body.smart-project-dialog-open,
body.help-assistant-open {
  overflow: hidden;
}

.smart-project-hero.smart-project-trigger {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  width: 100%;
  min-height: 132px;
  padding: 18px;
  gap: 14px;
  border: 1px solid #172033;
  border-radius: 18px;
  background: radial-gradient(circle at 88% 20%, rgba(65, 125, 255, .26), transparent 34%), linear-gradient(145deg, #111827, #17233c);
  color: #fff;
  text-align: left;
  box-shadow: 0 18px 34px rgba(15, 23, 42, .16);
}

.smart-project-hero.smart-project-trigger:hover,
.smart-project-hero.smart-project-trigger[aria-expanded="true"] {
  border-color: #2f68e8;
  background: radial-gradient(circle at 88% 20%, rgba(78, 137, 255, .34), transparent 36%), linear-gradient(145deg, #111827, #1b2a49);
  box-shadow: 0 22px 42px rgba(15, 23, 42, .22);
}

.smart-project-hero-icon,
.smart-project-dialog-mark,
.help-assistant-avatar,
.help-assistant-launcher-icon {
  display: grid;
  place-items: center;
  background: #111827;
  color: #fff;
}

.smart-project-hero-icon {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 15px;
  background: rgba(255, 255, 255, .1);
}

.smart-project-hero-icon svg {
  width: 26px;
  height: 26px;
}

.smart-project-hero-copy,
.smart-project-hero-copy > * {
  display: block;
}

.smart-project-hero-copy small {
  margin-bottom: 6px;
  color: #a9c4ff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
}

.smart-project-hero-copy strong {
  margin-bottom: 7px;
  color: #fff;
  font-size: 18px;
  line-height: 1.25;
}

.smart-project-hero-copy > span {
  max-width: 390px;
  color: #cbd5e1;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}

.smart-project-hero-action {
  align-self: end;
  color: #dbe7ff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.manual-project-entry {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #667085;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}

.manual-project-entry strong {
  color: #344054;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.smart-project-dialog-backdrop {
  position: fixed;
  z-index: 2147483632;
  inset: 0;
  display: grid;
  padding: 24px;
  place-items: center;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(8px);
}

.smart-project-dialog-backdrop.hidden,
.smart-project-dialog.hidden {
  display: none !important;
}

.smart-project-form.smart-project-dialog {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(980px, calc(100vw - 48px));
  height: min(860px, calc(100vh - 48px));
  padding: 0;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 32px 90px rgba(15, 23, 42, .34);
}

@media (min-width: 761px) {
  .smart-project-form.smart-project-dialog.choosing-target {
    height: min(640px, calc(100vh - 48px));
  }
}

.smart-project-dialog-header {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 14px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #e4e7ec;
}

.smart-project-dialog-mark {
  width: 52px;
  height: 52px;
  border-radius: 15px;
}

.smart-project-dialog-mark svg,
.help-assistant-avatar svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.smart-project-dialog-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
}

.smart-project-dialog-header h3 {
  margin: 0;
  color: #101828;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.2;
}

.smart-project-dialog-header p {
  margin: 5px 0 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.5;
}

.smart-project-dialog-close,
.help-assistant-header [data-help-close] {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #fff;
  color: #475467;
  cursor: pointer;
  font: 500 25px/1 system-ui, sans-serif;
}

.smart-project-flow-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #e4e7ec;
}

.smart-project-flow-tabs[hidden] {
  display: none;
}

.smart-project-flow-tabs > button {
  display: grid;
  min-height: 64px;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  border: 0;
  background: #f8fafc;
  color: #475467;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background-color 160ms ease, color 160ms ease;
}

.smart-project-flow-tabs > button:hover:not(:disabled) {
  background: #f1f5fb;
}

.smart-project-flow-tabs > button[aria-selected="true"] {
  background: #eef4ff;
  color: #174ea6;
  box-shadow: inset 0 -3px #5f84c8;
}

.smart-project-flow-tabs > button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.smart-project-flow-tabs span {
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
}

.smart-project-flow-tabs strong {
  font-size: 14px;
  font-weight: 700;
}

.smart-project-flow-tabs small {
  overflow: hidden;
  color: #667085;
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-project-dialog-body {
  display: block;
  min-height: 0;
  padding: 24px;
  overflow: auto;
}

.smart-project-step-page {
  width: min(100%, 900px);
  margin: 0 auto;
}

.smart-project-step-page[hidden] {
  display: none;
}

.smart-project-input-page {
  display: grid;
  align-content: start;
  gap: 14px;
}

.smart-project-primary-column {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  grid-template-areas:
    "brief-label constraints-label"
    "brief constraints"
    "examples references";
  align-content: start;
  gap: 8px 18px;
}

.smart-project-primary-column > label[for="smartProjectBrief"] { grid-area: brief-label; }
.smart-project-primary-column > #smartProjectBrief { grid-area: brief; min-height: 210px; }
.smart-project-primary-column > .smart-project-example-row { grid-area: examples; align-self: start; }
.smart-project-primary-column > label[for="smartProjectConstraints"] { grid-area: constraints-label; }
.smart-project-primary-column > #smartProjectConstraints { grid-area: constraints; min-height: 122px; }
.smart-project-primary-column > .agent-reference-panel { grid-area: references; align-self: stretch; margin-top: 0; }

.smart-project-plan-page {
  width: min(100%, 940px);
}

.smart-project-dialog label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: #344054;
  font-size: 14px;
  font-weight: 700;
}

.smart-project-dialog label > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  background: #eef4ff;
  color: #2563eb;
  font-size: 14px;
}

.smart-project-dialog textarea,
.smart-project-dialog input,
.smart-project-dialog select {
  width: 100%;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  background: #fff;
  color: #101828;
  font: inherit;
  font-size: 14px;
}

.smart-project-dialog textarea,
.smart-project-dialog input {
  padding: 12px 13px;
}

.smart-project-dialog textarea {
  min-height: 0;
  resize: vertical;
  line-height: 1.55;
}

.smart-project-dialog input,
.smart-project-dialog select {
  height: 46px;
}

.smart-project-dialog select {
  padding: 0 12px;
}

.smart-project-dialog textarea:focus,
.smart-project-dialog input:focus,
.smart-project-dialog select:focus {
  border-color: #7aa2f5;
  outline: 3px solid rgba(37, 99, 235, .13);
  outline-offset: 1px;
}

.smart-project-example-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.smart-project-example-row > span {
  margin-right: 3px;
  color: #596579;
  font-size: 14px;
  font-weight: 700;
}

.smart-project-example-row button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #d9e2f2;
  border-radius: 9px;
  background: #f8faff;
  color: #344054;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.smart-project-example-row button:hover {
  border-color: #9ab8ee;
  background: #eef4ff;
  color: #174ea6;
}

.smart-project-advanced {
  margin-top: 4px;
  padding: 11px 12px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #f9fafb;
}

.smart-project-advanced summary {
  color: #475467;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.smart-project-advanced label {
  margin: 12px 0 7px;
}

.smart-project-advanced #smartProjectModel {
  display: block;
}

.smart-project-dialog-footer {
  display: flex;
  min-height: 84px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 24px;
  border-top: 1px solid #e4e7ec;
  background: #f8fafc;
}

.smart-project-dialog-footer > div:first-child > strong {
  display: block;
  color: #344054;
  font-size: 14px;
}

.smart-project-dialog .smart-project-status {
  min-height: 18px;
  margin: 4px 0 0;
  font-size: 14px;
}

.smart-project-dialog .smart-project-actions {
  display: flex;
  grid-template-columns: none;
  flex: 0 0 auto;
  gap: 8px;
}

.smart-project-dialog .smart-project-actions button {
  width: auto;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 11px;
}

.smart-project-dialog #createSmartProjectButton {
  min-width: 220px;
  border: 1px solid #111827;
  background: #111827;
  color: #fff;
}

.smart-project-mode-chooser {
  display: grid;
  grid-column: 1 / -1;
  align-content: start;
  gap: 20px;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 20px 4px;
}

.smart-project-mode-chooser[hidden] {
  display: none;
}

.smart-project-mode-chooser > header {
  max-width: 660px;
}

.smart-project-mode-chooser > header > span {
  display: block;
  margin-bottom: 5px;
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
}

.smart-project-mode-chooser h4 {
  margin: 0;
  color: #101828;
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.3;
}

.smart-project-mode-chooser > header p {
  margin: 7px 0 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.6;
}

.smart-project-mode-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.smart-project-mode-bar button {
  display: grid;
  min-height: 168px;
  align-content: start;
  gap: 8px;
  padding: 18px;
  border: 1px solid #d8dee8;
  border-radius: 16px;
  background: #fff;
  color: #667085;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 180ms ease, background 180ms ease;
}

.smart-project-mode-bar button:hover {
  border-color: #8fb0eb;
  background: #f8faff;
  color: #344054;
}

.smart-project-mode-bar button.active {
  border-color: #7aa2e8;
  background: #f8faff;
  color: #101828;
}

.smart-project-mode-bar strong,
.smart-project-mode-bar span {
  display: block;
  overflow-wrap: anywhere;
}

.smart-project-mode-bar strong {
  color: #101828;
  font-size: 18px;
  line-height: 1.3;
}

.smart-project-mode-bar span {
  color: #667085;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.6;
}

.smart-project-mode-bar .smart-project-mode-number {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: #eef4ff;
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
}

.smart-project-mode-bar small {
  display: block;
  color: #596579;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.smart-project-mode-bar b {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid #e4e7ec;
  color: #174ea6;
  font-size: 14px;
  font-weight: 700;
}

.smart-project-generation-mode-bar button {
  min-height: 176px;
}

.smart-project-back-button {
  width: fit-content;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #667085;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.smart-project-back-button:hover {
  color: #101828;
}

.smart-project-back-button:focus-visible {
  border-radius: 8px;
  outline: 2px solid #4f76bd;
  outline-offset: 2px;
}

.smart-project-mode-help {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #f8fafc;
  color: #667085;
  font-size: 14px;
  line-height: 1.55;
}

.smart-project-mode-help strong {
  flex: 0 0 auto;
  color: #344054;
}

.smart-project-target-panel {
  padding: 16px;
  border: 1px solid #cbd8ec;
  border-radius: 14px;
  background: #f8faff;
}

.smart-project-target-panel[hidden],
.smart-project-target-fields[hidden] {
  display: none;
}

.smart-project-target-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: end;
}

.smart-project-target-fields label {
  grid-column: 1 / -1;
  color: #344054;
  font-size: 14px;
  font-weight: 700;
}

.smart-project-target-fields label span {
  color: #596579;
  font-weight: 700;
}

.smart-project-target-fields :where(select, input, textarea) {
  width: 100%;
  min-height: 46px;
  border: 1px solid #cbd5e1;
  border-radius: 11px;
  background: #fff;
  color: #101828;
  font: inherit;
  font-size: 14px;
}

.smart-project-target-fields :where(select, input) {
  padding: 0 13px;
}

.smart-project-target-fields textarea {
  grid-column: 1 / -1;
  min-height: 76px;
  padding: 11px 13px;
  resize: vertical;
}

.smart-project-target-fields :where(select, input, textarea):focus-visible {
  border-color: #4f76bd;
  outline: 3px solid rgba(79, 118, 189, .16);
}

.smart-project-target-fields > small {
  align-self: center;
  color: #667085;
  font-size: 14px;
  line-height: 1.5;
}

.smart-project-target-fields > button {
  min-width: 166px;
  min-height: 46px;
  border-radius: 11px;
  white-space: nowrap;
}

.smart-project-mode-summary {
  display: flex;
  grid-column: 1 / -1;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 14px;
  border: 1px solid #d8e2f2;
  border-radius: 13px;
  background: #f8faff;
}

.smart-project-mode-summary[hidden] {
  display: none;
}

.smart-project-mode-summary > div {
  min-width: 0;
}

.smart-project-mode-summary span,
.smart-project-mode-summary strong,
.smart-project-mode-summary small {
  display: block;
}

.smart-project-mode-summary span {
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
}

.smart-project-mode-summary strong {
  margin-top: 2px;
  color: #101828;
  font-size: 14px;
}

.smart-project-mode-summary small {
  margin-top: 2px;
  color: #667085;
  font-size: 14px;
  line-height: 1.4;
}

.smart-project-mode-summary button {
  min-width: 88px;
  min-height: 42px;
  flex: 0 0 auto;
  border: 1px solid #c8d4e5;
  border-radius: 10px;
  background: #fff;
  color: #344054;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.smart-project-agent-fields {
  display: grid;
  gap: 9px;
  margin: 1px 0 3px;
  padding: 12px;
  border: 1px solid #d8e2f2;
  border-radius: 12px;
  background: #f8faff;
}

.smart-project-agent-fields[hidden] {
  display: none;
}

.smart-project-agent-fields p,
.smart-project-field-hint {
  margin: -2px 0 3px;
  color: #667085;
  font-size: 14px;
  line-height: 1.5;
}

.smart-project-interview-panel {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 11px;
  padding: 14px;
  border: 1px solid #cbd9ed;
  border-radius: 14px;
  background: #f7faff;
}

.smart-project-interview-step {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: #e7effd;
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
}

.smart-project-interview-panel > div {
  min-width: 0;
}

.smart-project-interview-eyebrow,
.smart-project-interview-panel strong,
.smart-project-interview-panel p {
  display: block;
}

.smart-project-interview-eyebrow {
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
}

.smart-project-interview-panel strong {
  margin-top: 3px;
  color: #101828;
  font-size: 14px;
  line-height: 1.4;
}

.smart-project-interview-panel p {
  margin: 5px 0 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.6;
}

.smart-project-interview-summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid #dce5f2;
}

.smart-project-interview-summary span {
  color: #475467;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.smart-project-interview-summary button {
  min-width: 76px;
  min-height: 40px;
  flex: 0 0 auto;
  border: 1px solid #b9c9df;
  border-radius: 10px;
  background: #fff;
  color: #174ea6;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.smart-project-question-layer {
  position: absolute;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(4px);
}

.smart-project-question-layer[hidden] {
  display: none;
}

.smart-project-question-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(620px, 100%);
  max-height: min(700px, calc(100vh - 96px));
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .14);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 72px rgba(15, 23, 42, .32);
}

.smart-project-question-dialog > header {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid #e4e7ec;
}

.smart-project-question-dialog > header span,
.smart-project-question-dialog > header strong {
  display: block;
}

.smart-project-question-dialog > header span {
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
}

.smart-project-question-dialog > header strong {
  margin-top: 3px;
  color: #344054;
  font-size: 14px;
}

.smart-project-question-dialog > header button {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  background: #fff;
  color: #475467;
  cursor: pointer;
  font: 500 24px/1 system-ui, sans-serif;
}

.smart-project-question-body {
  min-height: 0;
  padding: 26px;
  overflow: auto;
}

.smart-project-question-badge {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: #111827;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
}

.smart-project-question-body h4 {
  margin: 16px 0 0;
  color: #101828;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.smart-project-question-body > p {
  margin: 9px 0 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.65;
}

.smart-project-question-options {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.smart-project-question-options button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 66px;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid #d0d5dd;
  border-radius: 13px;
  background: #fff;
  color: #344054;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 180ms ease, background 180ms ease;
}

.smart-project-question-options button:hover,
.smart-project-question-options button[aria-pressed="true"] {
  border-color: #7da4e8;
  background: #f4f8ff;
}

.smart-project-question-options button > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: #eef4ff;
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
}

.smart-project-question-options button > strong {
  color: #1d2939;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.smart-project-custom-toggle {
  min-height: 44px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #475467;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.smart-project-custom-answer-row {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  padding: 13px;
  border: 1px solid #d8e2f2;
  border-radius: 13px;
  background: #f8fafc;
}

.smart-project-custom-answer-row[hidden] {
  display: none;
}

.smart-project-dialog .smart-project-custom-answer-row label {
  margin: 0;
  font-size: 14px;
}

.smart-project-custom-answer-row button {
  min-height: 44px;
  border: 1px solid #111827;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.smart-project-question-dialog > footer {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 18px;
  border-top: 1px solid #e4e7ec;
  background: #f8fafc;
}

.smart-project-question-dialog > footer button {
  min-width: 88px;
  min-height: 44px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: #fff;
  color: #344054;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.smart-project-question-dialog > footer span {
  color: #667085;
  font-size: 14px;
  line-height: 1.45;
  text-align: right;
}

.smart-project-dialog label > strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.agent-reference-panel {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding: 13px;
  border: 1px solid #e4e7ec;
  border-radius: 13px;
  background: #f8fafc;
}

.agent-reference-panel[hidden] {
  display: none;
}

.agent-reference-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.agent-reference-heading > div {
  min-width: 0;
}

.agent-reference-heading strong,
.agent-reference-heading small {
  display: block;
}

.agent-reference-heading strong {
  color: #344054;
  font-size: 14px;
  line-height: 1.35;
}

.agent-reference-heading strong span {
  margin-left: 5px;
  color: #667085;
  font-weight: 700;
}

.agent-reference-heading small {
  margin-top: 3px;
  color: #667085;
  font-size: 14px;
  line-height: 1.45;
}

.smart-project-dialog .agent-reference-add {
  display: inline-flex;
  min-height: 40px;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 11px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: #fff;
  color: #344054;
  cursor: pointer;
  font-size: 14px;
}

.agent-reference-add svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
}

.smart-project-dialog .agent-reference-input {
  display: none;
}

.agent-reference-preview {
  display: flex;
  gap: 8px;
  padding-bottom: 2px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.agent-reference-preview[hidden] {
  display: none;
}

.agent-reference-item {
  position: relative;
  width: 74px;
  min-width: 74px;
  margin: 0;
}

.agent-reference-item img {
  display: block;
  width: 74px;
  height: 58px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  object-fit: cover;
  background: #fff;
}

.agent-reference-item figcaption {
  margin-top: 4px;
  overflow: hidden;
  color: #475467;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-reference-item button {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 8px;
  background: rgba(17, 24, 39, .78);
  color: #fff;
  cursor: pointer;
  font: 700 15px/1 system-ui, sans-serif;
}

.agent-plan-preview {
  display: grid;
  grid-column: 1 / -1;
  gap: 13px;
  min-width: 0;
  padding: 17px;
  border: 1px solid #d8e2f2;
  border-radius: 15px;
  background: #fbfcfe;
}

.agent-plan-preview[hidden] {
  display: none;
}

.agent-plan-preview > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.agent-plan-preview > header > div {
  min-width: 0;
}

.agent-plan-preview > header span {
  display: block;
  margin-bottom: 3px;
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
}

.agent-plan-preview h4 {
  margin: 0;
  color: #101828;
  font-size: 16px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.agent-plan-preview > header p {
  margin: 4px 0 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.5;
}

.agent-plan-preview > header > strong {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid #d8e2f2;
  border-radius: 9px;
  background: #fff;
  color: #344054;
  font-size: 14px;
  white-space: nowrap;
}

.agent-plan-tasks {
  display: grid;
  gap: 8px;
}

.agent-plan-common-prompt {
  display: grid;
  grid-template-columns: minmax(150px, .34fr) minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--theme-accent, #5f84c8) 32%, var(--theme-border, #d8e2f2));
  border-radius: 13px;
  background: color-mix(in srgb, var(--theme-accent-soft, #eef4ff) 58%, var(--theme-panel, #fff));
}

.agent-plan-common-prompt > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.agent-plan-common-prompt > div > span {
  color: var(--theme-accent, #5f84c8);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.agent-plan-common-prompt > div > strong {
  color: var(--theme-text, #101828);
  font-size: 14px;
}

.agent-plan-common-prompt > div > small {
  color: var(--theme-muted, #667085);
  font-size: 14px;
  line-height: 1.55;
}

.smart-project-dialog .agent-plan-common-prompt textarea {
  width: 100%;
  min-height: 92px;
  padding: 10px 11px;
  border: 1px solid var(--theme-border, #d8e2f2);
  border-radius: 10px;
  background: var(--theme-panel, #fff);
  color: var(--theme-text, #101828);
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
}

.smart-project-dialog .agent-plan-common-prompt textarea:focus {
  border-color: var(--theme-accent, #5f84c8);
  outline: 3px solid color-mix(in srgb, var(--theme-accent, #5f84c8) 16%, transparent);
}

.agent-plan-scheme-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 2px 1px;
}

.agent-plan-scheme-heading > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
}

.agent-plan-scheme-heading strong {
  color: var(--theme-text, #101828);
  font-size: 14px;
}

.agent-plan-scheme-heading span,
.agent-plan-scheme-heading small {
  color: var(--theme-muted, #667085);
  font-size: 14px;
}

.agent-plan-empty {
  padding: 20px 14px;
  border: 1px dashed #cfd8e6;
  border-radius: 11px;
  color: #667085;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.agent-plan-task {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  padding: 12px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #fff;
}

.agent-plan-task.is-running {
  border-color: #8fb0eb;
  background: #f8faff;
}

.agent-plan-task.is-done {
  border-color: #b8dbd1;
}

.agent-plan-task.is-failed {
  border-color: #efb8c2;
}

.agent-plan-task-index {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: #eef4ff;
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
}

.agent-plan-task-content {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.agent-plan-task-content > header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agent-plan-task-content > header strong {
  min-width: 0;
  color: #101828;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.agent-plan-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.agent-plan-task-meta span {
  padding: 4px 7px;
  border-radius: 7px;
  background: #f2f4f7;
  color: #667085;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.agent-plan-quick-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.smart-project-dialog .agent-plan-task .agent-plan-quick-setting {
  position: relative;
  display: inline-grid;
  min-width: 104px;
  grid-template-columns: auto minmax(44px, 1fr);
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 8px 4px 10px;
  border: 1px solid #d8e2f2;
  border-radius: 10px;
  background: #f8faff;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.smart-project-dialog .agent-plan-task .agent-plan-quick-setting:hover {
  border-color: #9db7e5;
  background: #f2f6fd;
}

.smart-project-dialog .agent-plan-task .agent-plan-quick-setting:focus-within {
  border-color: #5f84c8;
  box-shadow: 0 0 0 3px rgb(95 132 200 / 16%);
}

.smart-project-dialog .agent-plan-task .agent-plan-quick-setting > span {
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #667085;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.smart-project-dialog .agent-plan-task .agent-plan-quick-setting select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 20px 0 2px;
  border: 0;
  border-radius: 6px;
  outline: 0;
  background-color: transparent;
  color: #1d2939;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}

.smart-project-dialog .agent-plan-task .agent-plan-quick-setting select:disabled,
.smart-project-dialog .agent-plan-task .agent-plan-quick-setting:has(select:disabled) {
  cursor: not-allowed;
  opacity: 0.58;
}

.smart-project-dialog .agent-plan-task .agent-plan-count-setting {
  display: grid;
  min-width: min(280px, 100%);
  flex: 1 1 280px;
  grid-template-columns: auto minmax(120px, 1fr) 48px;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 3px 10px;
  border: 1px solid #d8e2f2;
  border-radius: 10px;
  background: #f8faff;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.smart-project-dialog .agent-plan-task .agent-plan-count-setting:hover {
  border-color: #9db7e5;
  background: #f2f6fd;
}

.smart-project-dialog .agent-plan-task .agent-plan-count-setting:focus-within {
  border-color: #5f84c8;
  box-shadow: 0 0 0 3px rgb(95 132 200 / 16%);
}

.agent-plan-count-setting > span {
  color: #667085;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.agent-plan-count-setting output {
  color: #1d2939;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.agent-plan-count-setting input[type="range"] {
  width: 100%;
  height: 38px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}

.agent-plan-count-setting input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--theme-accent, #5f84c8) 0 var(--agent-count-progress),
    color-mix(in srgb, var(--theme-border, #d8e2f2) 84%, var(--theme-panel, #fff)) var(--agent-count-progress) 100%
  );
}

.agent-plan-count-setting input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -7.5px;
  border: 4px solid var(--theme-panel, #fff);
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--theme-accent, #5f84c8);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-accent, #5f84c8) 35%, transparent), 0 3px 8px rgba(15, 23, 42, .16);
}

.agent-plan-count-setting input[type="range"]::-moz-range-track {
  height: 5px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-border, #d8e2f2) 84%, var(--theme-panel, #fff));
}

.agent-plan-count-setting input[type="range"]::-moz-range-progress {
  height: 5px;
  border-radius: 999px;
  background: var(--theme-accent, #5f84c8);
}

.agent-plan-count-setting input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 4px solid var(--theme-panel, #fff);
  border-radius: 50%;
  background: var(--theme-accent, #5f84c8);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-accent, #5f84c8) 35%, transparent), 0 3px 8px rgba(15, 23, 42, .16);
}

.agent-plan-count-setting input[type="range"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--theme-accent, #5f84c8) 24%, transparent);
  outline-offset: 1px;
  border-radius: 999px;
}

.agent-plan-count-setting input[type="range"]:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.smart-project-dialog .agent-plan-task .agent-plan-prompt-field {
  display: grid;
  gap: 5px;
  margin: 0;
}

.smart-project-dialog .agent-plan-task .agent-plan-prompt-field > span {
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #667085;
  font-size: 14px;
  text-align: left;
}

.smart-project-dialog .agent-plan-task textarea {
  min-height: 76px;
  padding: 9px 10px;
  border-radius: 9px;
  background: #fbfcfe;
  font-size: 14px;
  line-height: 1.5;
}

.agent-shot-status {
  flex: 0 0 auto;
  color: #667085;
  font-size: 14px;
  font-weight: 700;
}

.agent-shot-status.queued { color: #667085; }
.agent-shot-status.creating,
.agent-shot-status.submitting { color: #8b5e16; }
.agent-shot-status.generating { color: #2563eb; }
.agent-shot-status.done { color: #2f7d6e; }
.agent-shot-status.failed { color: #b42346; }

.agent-execution-progress {
  min-height: 17px;
  margin: 0;
  color: #475467;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.smart-project-form.execution-obscured {
  display: none !important;
}

.agent-execution-dialog {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(680px, calc(100vw - 48px));
  max-height: min(720px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--theme-border, #dce4f2) 88%, transparent);
  border-radius: 22px;
  background: var(--theme-panel, #fff);
  color: var(--theme-ink, #101828);
  box-shadow: 0 32px 90px rgba(15, 23, 42, .34);
}

.agent-execution-dialog[hidden] {
  display: none !important;
}

.agent-execution-dialog > header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--theme-border, #e4e7ec);
}

.agent-execution-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  background: var(--theme-accent, #2563eb);
  color: #fff;
}

.agent-execution-mark svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.agent-execution-dialog > header span:not(.agent-execution-mark) {
  display: block;
  margin-bottom: 3px;
  color: var(--theme-accent, #2563eb);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
}

.agent-execution-dialog h3 {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.2;
}

.agent-execution-dialog > header p {
  margin: 5px 0 0;
  color: var(--theme-muted, #667085);
  font-size: 14px;
  line-height: 1.5;
}

.agent-execution-body {
  min-height: 0;
  padding: 22px 24px;
  overflow: auto;
}

.agent-execution-progress-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.agent-execution-progress-heading strong {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.agent-execution-progress-heading span {
  color: var(--theme-muted, #667085);
  font-size: 14px;
  line-height: 1.5;
  text-align: right;
}

.agent-execution-progressbar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-border, #dce4f2) 72%, var(--theme-panel, #fff));
}

.agent-execution-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--theme-accent, #2563eb), color-mix(in srgb, var(--theme-accent, #2563eb) 62%, #79d7c4));
  transition: width 240ms ease-out;
}

.agent-execution-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0;
}

.agent-execution-stats > div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--theme-border, #e4e7ec);
  border-radius: 12px;
  background: color-mix(in srgb, var(--theme-canvas, #f8fafc) 82%, var(--theme-panel, #fff));
}

.agent-execution-stats dt {
  color: var(--theme-muted, #667085);
  font-size: 14px;
  font-weight: 700;
}

.agent-execution-stats dd {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.agent-execution-task-list {
  display: grid;
  gap: 7px;
}

.agent-execution-task {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 11px;
  border: 1px solid var(--theme-border, #e4e7ec);
  border-radius: 12px;
  background: var(--theme-panel, #fff);
}

.agent-execution-task > span:first-child {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--theme-accent, #2563eb) 10%, var(--theme-panel, #fff));
  color: var(--theme-accent, #2563eb);
  font-size: 14px;
  font-weight: 700;
}

.agent-execution-task strong {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-execution-task b {
  color: var(--theme-muted, #667085);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.agent-execution-task.is-creating b,
.agent-execution-task.is-submitting b { color: #8b5e16; }
.agent-execution-task.is-generating b { color: var(--theme-accent, #2563eb); }
.agent-execution-task.is-done b { color: #2f7d6e; }
.agent-execution-task.is-failed b { color: #b42346; }

.agent-execution-dialog > footer {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-top: 1px solid var(--theme-border, #e4e7ec);
  background: color-mix(in srgb, var(--theme-canvas, #f8fafc) 82%, var(--theme-panel, #fff));
}

.agent-execution-dialog > footer p {
  margin: 0;
  color: var(--theme-muted, #667085);
  font-size: 14px;
  line-height: 1.5;
}

.agent-execution-dialog > footer button {
  min-width: 160px;
  min-height: 44px;
  border-radius: 11px;
}

.smart-project-dialog .agent-execute-button {
  border: 1px solid #2563eb;
  background: #eef4ff;
  color: #174ea6;
  font-weight: 700;
}

.smart-project-dialog button:focus-visible,
.smart-project-dialog label:focus-within {
  outline: 3px solid rgba(37, 99, 235, .16);
  outline-offset: 2px;
}

.help-assistant-launcher {
  position: fixed;
  z-index: 2147483630;
  right: 18px;
  bottom: 18px;
  display: flex;
  min-width: 172px;
  min-height: 54px;
  align-items: center;
  gap: 10px;
  padding: 7px 13px 7px 8px;
  border: 1px solid rgba(15, 23, 42, .14);
  border-radius: 16px;
  background: #fff;
  color: #111827;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .2);
  cursor: pointer;
  text-align: left;
}

.help-assistant-launcher-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
}

.help-assistant-launcher-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.help-assistant-launcher strong,
.help-assistant-launcher small {
  display: block;
}

.help-assistant-launcher strong {
  font-size: 14px;
}

.help-assistant-launcher small {
  margin-top: 2px;
  color: #667085;
  font-size: 14px;
}

.help-assistant-launcher.is-new::after {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #2563eb;
  content: "";
}

.help-assistant-backdrop {
  position: fixed;
  z-index: 2147483631;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  background: rgba(15, 23, 42, .44);
  backdrop-filter: blur(4px);
}

.help-assistant-backdrop.hidden {
  display: none;
}

.help-assistant-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  width: min(460px, 100vw);
  height: 100%;
  overflow: hidden;
  background: #f7f8fa;
  box-shadow: -22px 0 60px rgba(15, 23, 42, .22);
}

.help-assistant-header {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border-bottom: 1px solid #e4e7ec;
  background: #fff;
}

.help-assistant-avatar {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}

.help-assistant-header small {
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .11em;
}

.help-assistant-header h2 {
  margin: 3px 0 0;
  color: #101828;
  font-size: 20px;
}

.help-assistant-context {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 18px 12px;
  padding: 13px 14px;
  border: 1px solid #dce4f2;
  border-radius: 13px;
  background: #fff;
}

.help-assistant-status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: #22a06b;
}

.help-assistant-context p {
  margin: 0;
  color: #475467;
  font-size: 14px;
  line-height: 1.6;
}

.help-assistant-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 0 18px 14px;
}

.help-assistant-topic-grid button {
  min-height: 42px;
  padding: 6px;
  border: 1px solid #d8dee9;
  border-radius: 10px;
  background: #fff;
  color: #475467;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.help-assistant-topic-grid button.active,
.help-assistant-topic-grid button:hover {
  border-color: #9bb9ee;
  background: #eef4ff;
  color: #174ea6;
}

.help-assistant-answer {
  min-height: 0;
  margin: 0 18px 16px;
  padding: 20px;
  overflow: auto;
  border: 1px solid #e4e7ec;
  border-radius: 16px;
  background: #fff;
}

.help-assistant-answer-kicker {
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
}

.help-assistant-answer h3 {
  margin: 8px 0;
  color: #101828;
  font-size: 19px;
}

.help-assistant-answer > p {
  margin: 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.65;
}

.help-assistant-answer ol {
  display: grid;
  gap: 8px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
  counter-reset: help-step;
}

.help-assistant-answer li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #344054;
  font-size: 14px;
  font-weight: 700;
  counter-increment: help-step;
}

.help-assistant-answer li::before {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  place-items: center;
  border-radius: 8px;
  background: #f1f4f8;
  color: #475467;
  content: counter(help-step);
  font-size: 14px;
  font-weight: 700;
}

.help-assistant-answer > button {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border: 1px solid #111827;
  border-radius: 11px;
  background: #111827;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.help-assistant-footer {
  padding: 13px 18px;
  border-top: 1px solid #e4e7ec;
  background: #fff;
  color: #667085;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .smart-project-dialog-backdrop { padding: 8px; }
  .smart-project-form.smart-project-dialog {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    border-radius: 16px;
  }
  .smart-project-dialog-header {
    grid-template-columns: 42px minmax(0, 1fr) 40px;
    padding: 16px;
  }
  .smart-project-dialog-mark { width: 42px; height: 42px; }
  .smart-project-flow-tabs > button {
    min-height: 62px;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 8px 14px;
  }
  .smart-project-flow-tabs small { display: none; }
  .smart-project-dialog-body { padding: 18px 16px; }
  .smart-project-primary-column {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brief-label"
      "brief"
      "examples"
      "constraints-label"
      "constraints"
      "references";
    gap: 9px;
  }
  .smart-project-primary-column > #smartProjectBrief { min-height: 190px; }
  .smart-project-primary-column > #smartProjectConstraints { min-height: 104px; }
  .smart-project-mode-bar { grid-template-columns: 1fr; }
  .smart-project-mode-chooser { gap: 14px; padding: 4px 0; }
  .smart-project-mode-bar button { min-height: 144px; padding: 16px; }
  .smart-project-generation-mode-bar button { min-height: 152px; }
  .smart-project-mode-summary { align-items: flex-start; }
  .smart-project-mode-summary button { min-width: 84px; }
  .smart-project-interview-summary { align-items: flex-start; flex-direction: column; }
  .smart-project-interview-summary button { width: 100%; }
  .smart-project-question-layer { padding: 8px; }
  .smart-project-question-dialog { max-height: calc(100vh - 32px); border-radius: 16px; }
  .smart-project-question-body { padding: 20px 16px; }
  .smart-project-question-body h4 { font-size: 21px; }
  .smart-project-question-dialog > footer { align-items: stretch; flex-direction: column-reverse; }
  .smart-project-question-dialog > footer button { width: 100%; }
  .smart-project-question-dialog > footer span { text-align: left; }
  .smart-project-mode-help { align-items: flex-start; flex-direction: column; gap: 3px; }
  .smart-project-target-panel { padding: 12px; }
  .smart-project-target-fields { grid-template-columns: 1fr; }
  .smart-project-target-fields > :where(label, textarea) { grid-column: 1; }
  .smart-project-target-fields > button { width: 100%; }
  .agent-plan-preview { padding: 13px; }
  .agent-plan-preview > header { align-items: stretch; flex-direction: column; gap: 8px; }
  .agent-plan-preview > header > strong { align-self: start; }
  .agent-plan-common-prompt { grid-template-columns: 1fr; gap: 9px; padding: 12px; }
  .agent-plan-scheme-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .agent-plan-task { grid-template-columns: 30px minmax(0, 1fr); gap: 9px; padding: 10px; }
  .agent-plan-task-index { width: 30px; height: 30px; }
  .agent-plan-quick-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .smart-project-dialog .agent-plan-task .agent-plan-quick-setting {
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 6px 8px;
  }
  .smart-project-dialog .agent-plan-task .agent-plan-quick-setting select {
    min-height: 32px;
    padding-left: 0;
    text-align: left;
  }
  .smart-project-dialog .agent-plan-task .agent-plan-count-setting {
    min-width: 0;
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr) 44px;
    gap: 8px;
  }
  .agent-reference-heading { align-items: flex-start; }
  .smart-project-dialog-footer { align-items: stretch; flex-direction: column; padding: 14px 16px; }
  .smart-project-dialog .smart-project-actions { display: grid; grid-template-columns: 1fr; }
  .smart-project-dialog .smart-project-actions button,
  .smart-project-dialog #createSmartProjectButton { width: 100%; min-width: 0; }
  .agent-execution-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 16px;
  }
  .agent-execution-dialog > header { grid-template-columns: 42px minmax(0, 1fr); padding: 17px 16px; }
  .agent-execution-mark { width: 42px; height: 42px; border-radius: 13px; }
  .agent-execution-body { padding: 18px 16px; }
  .agent-execution-progress-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .agent-execution-progress-heading span { text-align: left; }
  .agent-execution-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-execution-dialog > footer { align-items: stretch; flex-direction: column; padding: 14px 16px; }
  .agent-execution-dialog > footer button { width: 100%; }
  .smart-project-hero.smart-project-trigger {
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 126px;
    padding: 15px;
  }
  .smart-project-hero-icon { width: 46px; height: 46px; }
  .smart-project-hero-action { grid-column: 2; justify-self: start; }
  .help-assistant-launcher {
    right: 10px;
    bottom: 68px;
    min-width: 54px;
    width: 54px;
    padding: 7px;
  }
  .help-assistant-launcher > span:last-child { display: none; }
  .help-assistant-panel { width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
  .smart-project-hero.smart-project-trigger,
  .help-assistant-launcher,
  .smart-project-question-options button,
  .smart-project-flow-tabs > button,
  .agent-plan-count-setting,
  .agent-execution-progress-fill { transition: none; }
}

/* Workspace UI hotfix: complete the dynamically rendered controls and keep
   every primary action inside its own layout region. */
.smart-project-hero.smart-project-trigger {
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-height: 154px;
  align-items: start;
  padding: 17px;
  gap: 12px 14px;
}

.smart-project-hero-icon {
  width: 48px;
  height: 48px;
}

.smart-project-hero-copy {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.smart-project-hero-copy small {
  margin-bottom: 5px;
  font-size: 14px;
  line-height: 1.35;
}

.smart-project-hero-copy strong {
  margin-bottom: 5px;
  font-size: 17px;
}

.smart-project-hero-copy > span {
  max-width: none;
  font-size: 14px;
  line-height: 1.5;
}

.smart-project-hero-action {
  grid-column: 2;
  justify-self: start;
  align-self: start;
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 9px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  line-height: 1;
  white-space: nowrap;
}

.control-panel > .generation-path-guide {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--line, #e8e8e5);
  border-radius: 0;
  background: transparent;
}

.generation-path-title {
  display: grid;
  gap: 3px;
}

.generation-path-title strong {
  color: var(--ink, #18181b);
  font-size: 14px;
  font-weight: 700;
}

.generation-path-title span {
  color: var(--muted, #71717a);
  font-size: 14px;
  line-height: 1.5;
}

.generation-path-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.generation-path-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 70px;
  align-content: center;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--line-strong, #d8d8d3);
  border-radius: 11px;
  background: #fff;
  color: var(--ink, #18181b);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.generation-path-card strong {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.generation-path-card span {
  color: var(--muted, #71717a);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
}

.generation-path-card:hover {
  border-color: #9bb5e8;
  background: #f8faff;
}

.generation-path-card.active {
  border-color: #8aacef;
  background: #edf4ff;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .14);
}

.generation-path-card.active::after {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2563eb;
  content: "";
}

.generation-path-card:disabled {
  cursor: not-allowed;
  opacity: .46;
}

.generation-path-link {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px dashed #d7dde7;
  border-radius: 9px;
  background: #fafaf8;
  color: #526071;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
}

.generation-path-link:hover {
  border-color: #9bb5e8;
  background: #f3f7ff;
  color: #1d4ed8;
}

.stage-folder-bar {
  display: grid;
  gap: 10px;
  overflow: hidden;
  box-sizing: border-box;
}

.stage-folder-title {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.stage-folder-title > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.stage-folder-title strong {
  overflow: hidden;
  color: var(--ink, #18181b);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-folder-title span {
  overflow: hidden;
  color: var(--muted, #71717a);
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-filter-toggle {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line-strong, #d8d8d3);
  border-radius: 999px;
  background: #f7f7f5;
  color: #52525b;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.stage-filter-toggle:hover,
.stage-filter-toggle.active {
  border-color: #b7c9ec;
  background: #eef4ff;
  color: #1d4ed8;
}

.stage-folder-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.stage-folder-chip {
  display: inline-flex;
  min-width: 0;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--line-strong, #d8d8d3);
  border-radius: 9px;
  background: #fafaf8;
  color: #52525b;
  cursor: pointer;
  font: inherit;
}

.stage-folder-chip span {
  overflow: hidden;
  max-width: 112px;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-folder-chip strong {
  color: #71717a;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stage-folder-chip:hover {
  border-color: #b8c8e8;
  background: #f6f9ff;
}

.stage-folder-chip.active {
  border-color: #8aacef;
  background: #edf4ff;
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .12);
}

.stage-folder-chip.active strong {
  color: #2563eb;
}

.stage-chain-hint {
  margin: 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: #f7f8fa;
  color: #667085;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
}

.rail .help-assistant-launcher {
  position: relative;
  z-index: auto;
  right: auto;
  bottom: auto;
  display: inline-flex;
  width: 68px;
  min-width: 0;
  height: 56px;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #71717a;
  box-shadow: none;
  text-align: center;
}

.rail .help-assistant-launcher:hover,
.rail .help-assistant-launcher[aria-expanded="true"] {
  background: #f4f4f2;
  color: #18181b;
}

.rail .help-assistant-launcher-icon {
  width: 19px;
  height: 19px;
  flex-basis: 19px;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.rail .help-assistant-launcher-icon svg {
  width: 19px;
  height: 19px;
}

.rail .help-assistant-launcher > span:last-child strong {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.rail .help-assistant-launcher > span:last-child small {
  display: none;
}

.rail .help-assistant-launcher.is-new::after {
  top: 5px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-width: 2px;
}

@media (max-width: 920px) {
  .rail .help-assistant-launcher {
    width: auto;
    min-width: 58px;
    height: 44px;
    flex-direction: row;
    padding: 5px 9px;
  }

  .rail .help-assistant-launcher.is-new::after {
    top: 2px;
    right: 3px;
  }
}

@media (max-width: 760px) {
  .smart-project-hero.smart-project-trigger {
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 150px;
    padding: 15px;
  }

  .smart-project-hero-icon {
    width: 44px;
    height: 44px;
  }

  .generation-path-options {
    grid-template-columns: 1fr;
  }

  .stage-folder-title {
    display: grid;
    gap: 8px;
  }

  .stage-filter-toggle {
    justify-self: start;
  }

  .stage-folder-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stage-folder-chip {
    justify-content: space-between;
  }

  .stage-folder-chip span {
    max-width: none;
  }

  .help-assistant-launcher > span:last-child {
    display: block;
  }
}
/* Keep panel restore controls reachable after either side panel is collapsed. */
.app-shell.control-collapsed .control-resizer,
.app-shell.inspector-collapsed .inspector-resizer {
  visibility: visible !important;
  overflow: visible !important;
  z-index: 12;
}

.app-shell.control-collapsed .control-resizer .panel-toggle,
.app-shell.inspector-collapsed .inspector-resizer .panel-toggle {
  z-index: 13;
  pointer-events: auto;
}

.main-stage.workspace-view-saved .saved-library-actions,
.main-stage.workspace-view-log .activity-log-actions {
  display: flex !important;
}

.main-stage.workspace-view-saved #toggleSavedSectionButton,
.main-stage.workspace-view-log #toggleLogSectionButton {
  display: none !important;
}

.empty-state .ghost-button,
.saved-empty .ghost-button {
  margin-top: 10px;
}

/* 2026-08-17: keep primary actions self-explanatory and hide power-user clutter. */
.workspace-topbar .star-filter-button {
  display: inline-flex;
  width: auto;
  min-width: 112px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.workspace-topbar .star-filter-button svg {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
}

.tile-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  opacity: 1;
  transform: none;
}

.image-action-button {
  display: inline-flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 5px;
  border: 1px solid rgba(208, 213, 221, 0.94);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  color: #25324a;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.14);
  font: 800 10.5px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.image-action-button:hover,
.image-action-button:focus-visible {
  border-color: #9ab5e6;
  background: #eef4ff;
  color: #1d4ed8;
}

.image-action-button svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tile-star,
.saved-star {
  display: inline-flex;
  width: auto;
  min-width: 66px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 9px;
  font-size: 14px;
}

.star-label {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.saved-star {
  min-width: 62px;
  min-height: 34px;
  height: 34px;
}

.main-stage.workspace-view-saved .saved-library-actions,
.main-stage.workspace-view-log .activity-log-actions {
  gap: 8px;
}

.main-stage.workspace-view-saved .utility-actions .ghost-button,
.main-stage.workspace-view-log .utility-actions .ghost-button {
  min-height: 40px;
}

#openOutputsButton[hidden],
#gridViewButton[hidden],
#listViewButton[hidden],
#clearButton[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .workspace-topbar .star-filter-button {
    min-width: 104px;
  }

  .tile-actions {
    left: 7px;
    right: 7px;
    bottom: 7px;
    gap: 4px;
  }

  .image-action-button {
    min-height: 44px;
    padding-inline: 4px;
    font-size: 14px;
  }

  .image-action-button svg {
    display: none;
  }
}

/* 2026-08-17: responsive cards and progressive image previews. */
.image-tile {
  container-type: inline-size;
  height: max-content;
}

.image-tile > .image-frame,
.image-tile > .tile-actions,
.image-tile > .tile-info {
  flex-shrink: 0;
}

.tile-actions {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  padding: 9px 10px;
  border-top: 1px solid var(--line);
  background: #fff;
  opacity: 1;
  transform: none;
}

.image-action-button {
  max-width: 100%;
  overflow: hidden;
  box-shadow: none;
  backdrop-filter: none;
}

.image-action-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile-info,
.tile-copy,
.workspace-tabs,
.workspace-tab,
.workspace-topbar .search-box,
.workspace-topbar .gallery-actions {
  min-width: 0;
}

.tile-copy {
  flex: 1 1 auto;
}

.tile-info > span {
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-load-more {
  grid-column: 1 / -1;
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px;
  color: #71717a;
  font-size: 14px;
  font-weight: 700;
}

.preview-load-more .ghost-button {
  min-height: 38px;
  background: #fff;
}

.gallery-grid.list-view .image-frame {
  grid-column: 1;
  grid-row: 1 / 3;
}

.gallery-grid.list-view .tile-info {
  grid-column: 2;
  grid-row: 1;
}

.gallery-grid.list-view .tile-actions {
  grid-column: 2;
  grid-row: 2;
}

@container (max-width: 320px) {
  .tile-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile-actions .image-action-button:first-child {
    grid-column: 1 / -1;
  }

  .image-action-button {
    min-height: 40px;
    font-size: 14px;
  }
}

@media (min-width: 921px) and (max-width: 1180px) {
  .app-shell,
  .app-shell.control-collapsed,
  .app-shell.inspector-collapsed {
    grid-template-columns: 72px minmax(300px, 340px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    overflow-x: hidden;
  }

  .rail {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .control-panel {
    grid-column: 2;
    grid-row: 1;
  }

  .main-stage {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
  }

  .control-resizer,
  .inspector-resizer {
    display: none !important;
  }

  .iteration-panel {
    grid-column: 2 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(240px, 1fr) minmax(170px, 220px);
    align-items: start;
    max-height: 42vh;
    border-top: 1px solid var(--line);
  }

  .app-shell.inspector-collapsed .iteration-panel,
  .app-shell.control-collapsed .control-panel {
    display: none;
  }

  .inspector-header,
  .meta-list {
    grid-column: 1 / -1;
  }

  .selected-preview {
    grid-row: span 3;
  }
}

@media (max-width: 1180px) {
  .workspace-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .workspace-tabs {
    grid-column: 1 / -1;
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workspace-tab {
    justify-content: center;
    padding-inline: 8px;
  }

  .workspace-topbar .search-box {
    grid-column: 1;
    width: 100%;
    justify-self: stretch;
  }

  .workspace-topbar .gallery-actions {
    grid-column: 2;
  }
}

@media (max-width: 760px) {
  .workspace-topbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace-topbar .search-box,
  .workspace-topbar .gallery-actions {
    grid-column: 1;
  }

  .workspace-tabs {
    overflow: hidden;
  }

  .workspace-tab {
    gap: 4px;
    padding-inline: 5px;
    font-size: 14px;
  }

  .preview-load-more {
    flex-direction: column;
    gap: 6px;
  }
}

/* 2026-08-17: two-column workspace — create and iterate in one left panel. */
.control-panel > .iteration-panel.embedded-inspector {
  position: static;
  display: none !important;
  width: 100%;
  max-height: none;
  flex: 0 0 auto;
  gap: 12px;
  margin: 4px 0 16px;
  padding: 15px;
  overflow: visible;
  border: 1px solid #b9ccf3;
  border-radius: 14px;
  background: #f5f8ff;
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.09);
}

.control-panel > .iteration-panel.embedded-inspector.has-selection {
  display: flex !important;
}

.embedded-inspector .inspector-header {
  position: static;
  padding: 0 0 3px;
  border: 0;
  background: transparent;
}

.embedded-inspector .inspector-header h2 {
  font-size: 17px;
}

.embedded-inspector #toggleInspectorButton {
  display: inline-flex !important;
  width: auto;
  min-width: 72px;
  height: 34px;
  padding-inline: 10px;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.control-panel.has-selection > #generateButton {
  display: none;
}

.embedded-inspector .selected-preview {
  min-height: 150px;
  max-height: 190px;
  aspect-ratio: 16 / 9;
  border-radius: 11px;
  background-color: #fff;
}

.embedded-inspector .field {
  margin: 0;
}

.embedded-inspector textarea {
  min-height: 104px;
}

.embedded-inspector .meta-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.embedded-inspector .meta-list > div,
.embedded-inspector .meta-list strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 841px) {
  .app-shell,
  .app-shell.control-collapsed,
  .app-shell.inspector-collapsed {
    grid-template-columns: minmax(320px, var(--control-width)) minmax(0, 1fr) !important;
    grid-template-rows: 64px minmax(0, 1fr) !important;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    align-items: stretch;
    overflow: hidden;
  }

  .rail {
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: auto;
    max-height: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 5px;
    padding: 6px 9px;
    overflow: hidden;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .rail-logo {
    flex: 0 0 42px;
    margin: 0 4px 0 0;
  }

  .rail-button,
  .rail-avatar {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
  }

  .rail-label {
    font-size: 14px;
  }

  .rail-spacer {
    display: block;
    flex: 1 1 auto;
  }

  .control-panel,
  .app-shell.control-collapsed .control-panel {
    display: flex;
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    max-height: calc(100vh - 64px);
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--line);
  }

  .main-stage {
    grid-column: 2;
    grid-row: 1 / 3;
    min-width: 0;
    min-height: 0;
    height: 100vh;
    overflow: hidden;
  }

  .control-resizer,
  .inspector-resizer {
    display: none !important;
  }
}

@media (max-width: 840px) {
  .control-panel > .iteration-panel.embedded-inspector {
    margin-block: 6px 14px;
  }
}

/* 2026-08-17: fluid typography, natural image ratios and vector export. */
.image-frame {
  min-height: 0;
  aspect-ratio: var(--preview-ratio, 1 / 1);
}

.image-frame img,
.saved-preview-button img,
.selected-preview img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
  object-position: center;
}

.saved-preview-button {
  aspect-ratio: var(--preview-ratio, 1 / 1);
}

.embedded-inspector .selected-preview {
  min-height: 128px;
  max-height: 220px;
  aspect-ratio: var(--preview-ratio, 16 / 9);
}

.iteration-reference-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e4e4e7;
  border-radius: 11px;
  background: #fff;
}

.iteration-reference-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.iteration-reference-header > div:first-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.iteration-reference-header strong {
  color: #27272a;
  font-size: 14px;
  line-height: 1.4;
}

.iteration-reference-header strong span {
  margin-left: 4px;
  color: #71717a;
  font-size: 14px;
  font-weight: 700;
}

.iteration-reference-header small {
  display: -webkit-box;
  overflow: hidden;
  color: #71717a;
  font-size: 14px;
  line-height: 1.45;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.iteration-reference-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.iteration-reference-add {
  display: inline-flex;
  min-width: 68px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid #d4d4d8;
  border-radius: 9px;
  background: #fafafa;
  color: #3f3f46;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.iteration-reference-add svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.iteration-reference-add:hover,
.iteration-reference-add:focus-within {
  border-color: #9ca3af;
  background: #f4f4f5;
  color: #18181b;
}

.iteration-reference-panel.is-disabled .iteration-reference-add {
  opacity: 0.48;
  pointer-events: none;
}

.iteration-reference-preview {
  display: flex;
  gap: 8px;
  min-width: 0;
  padding: 2px 0 3px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.iteration-reference-preview[hidden] {
  display: none;
}

.iteration-reference-item {
  position: relative;
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  margin: 0;
  border: 1px solid #d4d4d8;
  border-radius: 10px;
  background: #f4f4f5;
  overflow: hidden;
}

.iteration-reference-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.iteration-reference-item button {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: rgba(24, 24, 27, 0.78);
  color: #fff;
  cursor: pointer;
}

.iteration-reference-item button:hover,
.iteration-reference-item button:focus-visible {
  background: #18181b;
}

.iteration-reference-item button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

@media (max-width: 640px) {
  .iteration-reference-add {
    min-height: 44px;
  }

  .iteration-reference-header small {
    white-space: normal;
  }

  .iteration-reference-item {
    flex-basis: 68px;
    width: 68px;
    height: 68px;
  }

  .iteration-reference-item button {
    width: 36px;
    height: 36px;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .creation-settings-backdrop {
    padding: 8px;
  }

  .creation-settings-dialog,
  .creation-settings-dialog[data-active-panel="project"],
  .creation-settings-dialog[data-active-panel="project"].project-settings-expanded {
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }

  .creation-settings-header {
    min-height: 58px;
    padding: 8px 16px 6px;
  }

  .creation-settings-header small {
    display: none;
  }

  .creation-settings-header h2 {
    font-size: 18px;
  }

  .creation-settings-close {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .creation-settings-tabs {
    margin: 0 16px;
  }

  .creation-settings-tabs button {
    min-height: 36px;
  }

  .creation-settings-content {
    padding: 12px 16px 16px;
  }

  .creation-settings-footer {
    padding: 8px 16px;
  }

  .creation-settings-footer .secondary-button {
    min-height: 40px;
  }
}

.workspace-tab,
.image-action-button,
.tile-info,
.stage-folder-chip,
.project-stage,
.image-export-button {
  font-size: clamp(10.5px, 0.75vw, 12px);
}

.tile-copy strong,
.tile-copy em,
.tile-info > span,
.stage-folder-chip span,
.stage-folder-chip strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-export-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  margin-top: 3px;
  padding: 12px;
  border: 1px solid #c8d6f2;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.82);
}

.image-export-heading {
  display: grid;
  gap: 3px;
}

.image-export-heading strong {
  color: #25324a;
  font-size: 14px;
}

.image-export-heading span {
  color: #667085;
  font-size: 14px;
  line-height: 1.5;
}

.image-export-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.image-export-transparency {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #e4e4e7;
  border-radius: 9px;
  background: #fafafa;
  cursor: pointer;
}

.image-export-transparency input {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  accent-color: #4f6fae;
}

.image-export-transparency > span {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.image-export-transparency strong {
  color: #27272a;
  font-size: 14px;
}

.image-export-transparency small,
.image-export-note {
  color: #71717a;
  font-size: 14px;
  line-height: 1.45;
}

.image-export-note {
  margin: 0;
}

.image-export-button {
  display: inline-flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding-inline: 8px;
  overflow: hidden;
  border: 1px solid #9db7eb;
  border-radius: 9px;
  background: #fff;
  color: #1d4ed8;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-export-button:hover,
.image-export-button:focus-visible {
  border-color: #2563eb;
  background: #edf4ff;
}

.image-export-button[aria-disabled="true"] {
  border-color: #e4e4e7;
  background: #f4f4f5;
  color: #a1a1aa;
  cursor: not-allowed;
}

@media (max-width: 430px) {
  .image-export-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 2026-08-17: Quiet Studio — three mutually exclusive task screens. */
.control-panel,
.app-shell.control-collapsed .control-panel {
  min-height: 0;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-color: #e4e4e7;
  background: #fafafa;
  color: #18181b;
}

.task-shell-header {
  position: relative;
  z-index: 3;
  display: grid;
  flex: 0 0 auto;
  gap: 12px;
  padding: 14px 16px 13px;
  border-bottom: 1px solid #e4e4e7;
  background: rgba(250, 250, 250, 0.96);
  backdrop-filter: blur(14px);
}

.task-shell-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  color: #71717a;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.task-shell-brand .status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
}

.control-mode-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid #e4e4e7;
  border-radius: 14px;
  background: #f1f1f3;
}

.creation-method-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding-top: 1px;
}

.creation-method-switcher[hidden] {
  display: none !important;
}

.creation-method-button {
  display: grid;
  min-width: 0;
  min-height: 38px;
  align-content: center;
  gap: 1px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #71717a;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.creation-method-button strong,
.creation-method-button small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creation-method-button strong {
  color: inherit;
  font-size: 14px;
  font-weight: 780;
}

.creation-method-button small {
  color: #a1a1aa;
  font-size: 14px;
  font-weight: 620;
}

.creation-method-button:hover {
  border-color: #e4e4e7;
  background: rgba(255, 255, 255, 0.5);
  color: #27272a;
}

.creation-method-button.active {
  border-color: #d4d4d8;
  background: #fff;
  color: #18181b;
}

.creation-method-button.active small {
  color: #71717a;
}

.creation-method-button:focus-visible {
  outline: 2px solid #18181b;
  outline-offset: 1px;
}

.control-mode-button {
  position: relative;
  min-width: 0;
  min-height: 46px;
  padding: 0 7px;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #71717a;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
}

.control-mode-button:hover {
  color: #27272a;
  background: rgba(255, 255, 255, 0.58);
}

.control-mode-button.active {
  color: #18181b;
  background: #fff;
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.08);
}

.control-mode-button:active {
  transform: scale(0.98);
}

.control-mode-button:focus-visible {
  outline: 2px solid #18181b;
  outline-offset: 1px;
}

.control-mode-button.has-selection::after {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2563eb;
  content: "";
}

.control-mode-stage {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.control-mode-panel {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  animation: quiet-mode-enter 150ms ease-out;
}

.control-mode-panel[hidden] {
  display: none !important;
}

@keyframes quiet-mode-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

.generate-mode-panel,
.plan-mode-panel,
.control-mode-stage > .iteration-panel.embedded-inspector {
  padding: 22px 18px 28px;
}

.generate-mode-panel {
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.generate-mode-panel > *,
.control-mode-stage > .iteration-panel.embedded-inspector > * {
  flex-shrink: 0;
}

.mode-screen-intro {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.mode-screen-intro > span {
  color: #a1a1aa;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.mode-screen-intro h1 {
  margin: 0;
  color: #18181b;
  font-size: clamp(23px, 2.1vw, 28px);
  font-weight: 760;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.mode-screen-intro p {
  margin: 0;
  color: #71717a;
  font-size: 14px;
  line-height: 1.65;
}

.generate-mode-panel > .usage-card { order: 7; }
.generate-mode-panel > .generation-path-guide { order: 1; }
.generate-mode-panel > .project-panel { order: 2; }
.generate-mode-panel > .field { order: 3; }
.generate-mode-panel > .generation-module-list { order: 4; }
.generate-mode-panel > #generateButton { order: 8; }
.generate-mode-panel > .mode-screen-intro { order: 0; }

.generate-mode-panel > .project-panel {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 15px 0;
  border: 0;
  border-top: 1px solid #e4e4e7;
  border-bottom: 1px solid #e4e4e7;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.generate-mode-panel .project-panel-header {
  min-height: 24px;
  padding: 0;
  border: 0;
}

.generate-mode-panel .project-panel-header .eyebrow {
  display: none;
}

.generate-mode-panel .project-panel-header h2 {
  color: #3f3f46;
  font-size: 14px;
  font-weight: 700;
}

.generate-mode-panel .manual-project-entry {
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #71717a;
}

.generate-mode-panel .manual-project-entry:hover {
  background: #f4f4f5;
}

.generate-mode-panel .manual-project-entry strong {
  color: #27272a;
}

.generate-mode-panel > .field {
  display: grid;
  gap: 8px;
  margin: 0;
}

.generate-mode-panel > .field textarea {
  min-height: 152px;
  padding: 14px;
  border-color: #d4d4d8;
  border-radius: 12px;
  background: #fff;
  color: #18181b;
  font-size: 14px;
  line-height: 1.65;
  resize: vertical;
  box-shadow: none;
}

.generate-mode-panel > .field textarea:focus {
  border-color: #71717a;
  outline: 2px solid rgba(24, 24, 27, 0.1);
  outline-offset: 1px;
}

.generate-mode-panel > .prompt-assist-panel,
.generate-mode-panel > .control-disclosure,
.generate-mode-panel > .usage-card {
  margin: 0;
  border: 1px solid #e4e4e7;
  border-radius: 11px;
  background: #fff;
  box-shadow: none;
}

.generate-mode-panel > #generateButton {
  position: sticky;
  bottom: -12px;
  z-index: 2;
  width: 100%;
  min-height: 48px;
  margin: 1px 0 0;
  border-radius: 11px;
  background: #18181b;
  box-shadow: 0 10px 22px rgba(24, 24, 27, 0.12);
}

.generate-mode-panel > #generateButton:hover {
  background: #27272a;
}

.generation-path-guide {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.generation-path-guide[hidden] {
  display: none !important;
}

.generation-path-label {
  color: #71717a;
  font-size: 14px;
  font-weight: 700;
}

.generation-path-guide .generation-path-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border-radius: 9px;
  background: #ededf0;
}

.generation-path-guide .generation-path-card {
  min-height: 34px;
  padding: 0 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
}

.generation-path-guide .generation-path-card strong {
  font-size: 14px;
  font-weight: 700;
}

.generation-path-guide .generation-path-card span {
  display: none;
}

.generation-path-guide .generation-path-card.active {
  background: #fff;
  color: #18181b;
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.08);
}

.plan-mode-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.plan-mode-summary {
  display: grid;
  gap: 0;
  border-top: 1px solid #e4e4e7;
  border-bottom: 1px solid #e4e4e7;
}

.plan-mode-summary > div {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  min-height: 50px;
  align-items: center;
  border-bottom: 1px solid #eeeeef;
}

.plan-mode-summary > div:last-child {
  border-bottom: 0;
}

.plan-mode-summary strong {
  color: #a1a1aa;
  font-size: 14px;
  letter-spacing: 0.08em;
}

.plan-mode-summary span {
  color: #3f3f46;
  font-size: 14px;
  font-weight: 700;
}

.plan-mode-panel .plan-launch-button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  padding: 16px;
  border: 1px solid #27272a;
  border-radius: 13px;
  background: #18181b;
  color: #fff;
  box-shadow: none;
}

.plan-mode-panel .plan-launch-button:hover,
.plan-mode-panel .plan-launch-button[aria-expanded="true"] {
  border-color: #18181b;
  background: #27272a;
  transform: none;
  box-shadow: none;
}

.plan-mode-panel .plan-launch-button:focus-visible {
  outline: 2px solid #71717a;
  outline-offset: 2px;
}

.plan-mode-panel .smart-project-hero-icon {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.plan-mode-panel .smart-project-hero-copy small,
.plan-mode-panel .smart-project-hero-copy > span {
  color: #a1a1aa;
}

.plan-mode-panel .smart-project-hero-copy strong {
  color: #fff;
  font-size: 14px;
}

.plan-mode-panel .smart-project-hero-action {
  grid-column: 2;
  justify-self: start;
  color: #fff;
  font-size: 14px;
}

.plan-mode-note {
  margin: auto 0 0;
  color: #a1a1aa;
  font-size: 14px;
  line-height: 1.6;
}

.control-mode-stage > .iteration-panel.embedded-inspector {
  position: static;
  display: flex !important;
  width: 100%;
  max-height: none;
  flex-direction: column;
  gap: 19px;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: #fafafa;
  box-shadow: none;
}

.control-mode-stage > .iteration-panel.embedded-inspector[hidden] {
  display: none !important;
}

.control-mode-stage > .iteration-panel .inspector-header {
  position: static;
  padding: 0;
  border: 0;
  background: transparent;
}

.control-mode-stage > .iteration-panel .inspector-header .eyebrow {
  color: #a1a1aa;
  font-size: 14px;
  letter-spacing: 0.12em;
}

.control-mode-stage > .iteration-panel .inspector-header h2 {
  margin-top: 6px;
  color: #18181b;
  font-size: clamp(23px, 2.1vw, 28px);
  font-weight: 760;
  letter-spacing: -0.035em;
}

.control-mode-stage > .iteration-panel #toggleInspectorButton {
  display: none !important;
}

.control-mode-stage > .iteration-panel .selected-preview {
  min-height: 150px;
  max-height: 230px;
  margin: 0;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: none;
}

.control-mode-stage > .iteration-panel .selected-preview.empty {
  min-height: 150px;
  padding: 20px;
  color: #71717a;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.control-mode-stage > .iteration-panel .iteration-path-hint {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.control-mode-stage > .iteration-panel .iteration-path-hint strong {
  color: #3f3f46;
  font-size: 14px;
}

.control-mode-stage > .iteration-panel .iteration-path-hint span {
  color: #71717a;
  font-size: 14px;
  line-height: 1.55;
}

.control-mode-stage > .iteration-panel > .field {
  display: grid;
  gap: 8px;
  margin: 0;
}

.control-mode-stage > .iteration-panel textarea,
.control-mode-stage > .iteration-panel input {
  border-color: #d4d4d8;
  border-radius: 11px;
  background: #fff;
  box-shadow: none;
}

.control-mode-stage > .iteration-panel textarea {
  min-height: 126px;
  padding: 13px;
  font-size: 14px;
  line-height: 1.6;
}

.control-mode-stage > .iteration-panel #iterateButton {
  min-height: 48px;
  border-radius: 11px;
  background: #18181b;
  box-shadow: none;
}

.control-mode-stage > .iteration-panel .meta-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.selection-quick-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.selection-quick-meta > span {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid #e4e4e7;
  border-radius: 999px;
  background: #fff;
  color: #52525b;
  font-size: 14px;
  font-weight: 700;
}

.control-mode-stage > .iteration-panel .image-export-panel {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 13px;
  border: 1px solid #e4e4e7;
  border-radius: 11px;
  background: #fff;
  box-shadow: none;
}

.control-mode-stage > .iteration-panel .image-export-panel :where(.image-export-heading, .image-export-actions) {
  padding-bottom: 0;
  border-bottom: 0;
}

.control-mode-stage > .iteration-panel .image-export-panel .image-export-heading,
.control-mode-stage > .iteration-panel .image-export-panel .image-export-actions {
  display: grid;
}

.control-mode-stage > .iteration-panel .image-export-panel .image-export-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.control-mode-stage > .iteration-panel .image-export-panel strong {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.control-mode-stage > .iteration-panel .image-export-button {
  border-color: #d4d4d8;
  color: #27272a;
  background: #fafafa;
}

.control-mode-stage > .iteration-panel .image-export-button:hover,
.control-mode-stage > .iteration-panel .image-export-button:focus-visible {
  border-color: #a1a1aa;
  background: #f4f4f5;
}

.selection-details {
  border-top: 1px solid #e4e4e7;
  color: #52525b;
}

.selection-details summary {
  min-height: 42px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  list-style: none;
}

.selection-details summary::-webkit-details-marker {
  display: none;
}

.selection-details summary::after {
  margin-left: auto;
  color: #a1a1aa;
  content: "+";
}

.selection-details[open] summary::after {
  content: "−";
}

.selection-details-grid {
  display: grid;
  gap: 8px;
  padding-bottom: 4px;
}

.selection-details-grid > div {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 8px;
  background: #f4f4f5;
}

.selection-details-grid span {
  color: #a1a1aa;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.selection-details-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #3f3f46;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 840px) {
  .task-shell-header {
    padding-inline: 14px;
  }

  .generate-mode-panel,
  .plan-mode-panel,
  .control-mode-stage > .iteration-panel.embedded-inspector {
    padding: 20px 14px 26px;
  }

  .control-mode-stage {
    min-height: 560px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .control-mode-panel,
  .control-mode-button {
    animation: none;
    transition: none;
  }
}

/* The canvas remains available from Help, but no longer floats over task controls. */
.cowart-fab {
  display: none !important;
}

/* 2026-08-17: compact generation modules — one quiet settings list, no giant cards. */
.generation-module-list {
  display: grid;
  min-width: 0;
  border-top: 1px solid #e4e4e7;
  border-bottom: 1px solid #e4e4e7;
  background: transparent;
}

.generation-module-list > .prompt-assist-panel,
.generation-module-list > .control-disclosure {
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #ededee !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.generation-module-list > :last-child {
  border-bottom: 0 !important;
}

.generation-module-list .prompt-assist-toggle,
.generation-module-list .control-disclosure > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) 16px;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  align-items: center;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #3f3f46;
  cursor: pointer;
  box-shadow: none;
}

.generation-module-list .prompt-assist-toggle:hover,
.generation-module-list .control-disclosure > summary:hover {
  border: 0;
  background: #f4f4f5;
}

.generation-module-list .prompt-assist-toggle:focus-visible,
.generation-module-list .control-disclosure > summary:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid #71717a;
  outline-offset: -2px;
}

.generation-module-list .disclosure-label,
.generation-module-list .prompt-assist-toggle > span:first-child {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  color: #3f3f46;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-module-list .disclosure-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  color: #71717a;
}

.generation-module-list .disclosure-icon svg,
.generation-module-list .prompt-assist-toggle svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  stroke-width: 1.65;
}

.generation-module-list .prompt-assist-toggle small,
.generation-module-list .control-disclosure > summary > strong {
  min-width: 0;
  max-width: 138px;
  overflow: hidden;
  color: #66666f;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-module-list .disclosure-chevron {
  width: 16px;
  height: 16px;
  color: #8b8b94;
  font-size: 14px;
  transition: transform 150ms linear;
}

.generation-module-list .prompt-assist-panel.expanded .prompt-assist-toggle,
.generation-module-list .control-disclosure[open] > summary {
  color: #18181b;
  background: #f7f7f8;
}

.generation-module-list .prompt-assist-panel.expanded .prompt-assist-toggle > span:first-child,
.generation-module-list .control-disclosure[open] .disclosure-label {
  color: #18181b;
  font-weight: 700;
}

.generation-module-list .disclosure-body {
  padding: 8px 2px 14px 25px;
}

.generation-module-list .prompt-assist-panel.compact-assist {
  display: grid;
  gap: 0;
}

.generation-module-list .prompt-assist-panel.compact-assist.expanded {
  padding: 0 !important;
}

.generation-module-list .prompt-assist-panel.expanded > :not(.prompt-assist-toggle) {
  margin-left: 25px;
}

.generation-module-list .prompt-assist-panel.expanded .prompt-assist-header {
  margin-top: 10px;
}

.generation-module-list .prompt-assist-panel.expanded #applyPromptAssistButton {
  margin-bottom: 14px;
}

.generation-module-list .output-settings-body,
.generation-module-list .prompt-assist-controls,
.generation-module-list .prompt-assist-header {
  gap: 9px;
}

.generation-module-list .field,
.generation-module-list .settings-row {
  min-width: 0;
  gap: 9px;
}

.generation-module-list select,
.generation-module-list input,
.generation-module-list button:not(.prompt-assist-toggle) {
  min-height: 40px;
}

.generation-module-list .reference-dropzone {
  min-height: 64px;
  border-style: solid;
  border-radius: 9px;
  background: #fff;
}

.generate-mode-panel > .usage-card {
  margin: auto 0 0 !important;
  padding: 10px 0 0;
  border: 0 !important;
  border-top: 1px solid #e4e4e7 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.generate-mode-panel > .usage-card > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  gap: 8px;
  min-height: 44px;
  align-items: center;
  padding: 0 2px;
  color: #71717a;
  cursor: pointer;
}

.generate-mode-panel > .usage-card > summary:hover {
  background: #f4f4f5;
}

.generate-mode-panel > .usage-card .disclosure-icon {
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: transparent;
  color: #71717a;
  font-size: 14px;
}

.generate-mode-panel > .usage-card .disclosure-label {
  gap: 9px;
  color: #71717a;
  font-size: 14px;
  font-weight: 600;
}

.generate-mode-panel > .usage-card > summary > strong {
  color: #3f3f46;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0;
}

.generate-mode-panel > .usage-card .disclosure-chevron {
  font-size: 14px;
}

.generate-mode-panel > .usage-card .disclosure-body {
  padding: 8px 2px 13px 25px;
}

@media (max-width: 430px) {
  .generation-module-list .prompt-assist-toggle small,
  .generation-module-list .control-disclosure > summary > strong {
    max-width: 116px;
  }
}

/* Clear project stage flow: selection lives on the left; the gallery only changes its view. */
.generate-mode-panel .project-panel-header {
  align-items: center;
}

.generate-mode-panel .project-panel-header h2 {
  font-size: 14px;
}

.project-new-button,
.project-stage-edit-button,
.workflow-add-button,
.workflow-close-button {
  min-height: 36px;
  border: 1px solid var(--theme-border);
  border-radius: 9px;
  background: var(--theme-panel-raised);
  color: var(--theme-text);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.project-new-button {
  padding: 0 10px;
  border-color: var(--theme-border-strong);
  color: var(--theme-accent);
}

.project-new-button:hover,
.project-stage-edit-button:hover,
.workflow-add-button:hover {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

.project-stage-control {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 12px;
  background: color-mix(in srgb, var(--theme-accent-soft) 56%, var(--theme-panel));
}

.project-stage-control[hidden] {
  display: none !important;
}

.project-stage-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.project-stage-heading > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.project-stage-heading strong {
  color: var(--theme-text);
  font-size: 14px;
}

.project-stage-heading span {
  color: var(--theme-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.project-stage-edit-button {
  min-height: 32px;
  flex: 0 0 auto;
  padding: 0 9px;
  color: var(--theme-accent);
}

.project-stage-control select {
  width: 100%;
  height: 44px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 10px;
  background: var(--theme-panel);
  color: var(--theme-text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.project-stage-hint {
  margin: 0;
  color: var(--theme-text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.project-stage-hint strong {
  color: var(--theme-accent);
}

.generate-mode-panel .project-summary {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.generate-mode-panel .project-summary strong {
  font-size: 14px;
}

.generate-mode-panel .project-summary span {
  overflow: visible;
  color: var(--theme-text-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-overflow: clip;
  white-space: normal;
}

.workflow-editor-backdrop {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--theme-scrim);
}

.workflow-editor-backdrop.hidden,
.workflow-editor.hidden {
  display: none !important;
}

.workflow-editor {
  display: grid;
  width: min(620px, 100%);
  max-height: min(720px, calc(100vh - 40px));
  gap: 16px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  background: var(--theme-panel);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow-lg);
}

.workflow-editor-header {
  align-items: flex-start;
}

.workflow-editor-header > div {
  display: grid;
  gap: 4px;
}

.workflow-editor-header strong {
  color: var(--theme-text);
  font-size: 16px;
}

.workflow-editor-header span {
  color: var(--theme-text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.workflow-close-button {
  width: 36px;
  flex: 0 0 36px;
  padding: 0;
  color: var(--theme-text-muted);
  font-size: 20px;
}

.workflow-stage-list {
  gap: 10px;
  max-height: min(430px, calc(100vh - 260px));
  padding-right: 5px;
}

.workflow-stage-row {
  grid-template-columns: 28px minmax(150px, 1fr) auto;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--theme-border);
  border-radius: 11px;
  background: var(--theme-panel-soft);
}

.workflow-stage-row > span {
  width: 28px;
  height: 28px;
  background: var(--theme-panel);
  color: var(--theme-text-muted);
}

.workflow-stage-row input {
  height: 40px;
  border-color: var(--theme-border-strong);
  background: var(--theme-panel);
  color: var(--theme-text);
}

.workflow-stage-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.workflow-stage-row .workflow-stage-actions button {
  width: auto;
  min-width: 48px;
  height: 36px;
  padding: 0 9px;
  border-color: var(--theme-border);
  background: var(--theme-panel);
  color: var(--theme-text-muted);
  font-size: 14px;
  font-weight: 700;
}

.workflow-stage-row .workflow-stage-actions button:hover:not(:disabled) {
  border-color: var(--theme-border-strong);
  color: var(--theme-text);
}

.workflow-stage-row .workflow-stage-actions button.danger:hover:not(:disabled) {
  border-color: var(--theme-danger);
  background: color-mix(in srgb, var(--theme-danger) 8%, var(--theme-panel));
  color: var(--theme-danger);
}

.workflow-add-button {
  min-height: 42px;
  border-style: dashed;
}

.workflow-actions {
  justify-content: flex-end;
  padding-top: 3px;
}

.workflow-actions .secondary-button,
.workflow-actions .ghost-button {
  min-height: 42px;
  padding: 0 16px;
}

.stage-folder-bar {
  gap: 8px;
}

.stage-folder-title.stage-view-control {
  align-items: center;
}

.stage-folder-title.stage-view-control strong {
  font-size: 14px;
}

.stage-folder-title.stage-view-control span {
  margin-top: 2px;
  font-size: 14px;
}

.stage-view-control .stage-filter-toggle {
  min-height: 38px;
  padding: 0 12px;
  border-color: var(--theme-border-strong);
  background: var(--theme-panel);
  color: var(--theme-accent);
}

.stage-chain-hint {
  margin: 0;
  color: var(--theme-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Every disclosure names the task it reveals instead of relying on an abstract chevron. */
.generation-module-list .prompt-assist-toggle,
.generation-module-list .control-disclosure > summary,
.generate-mode-panel > .usage-card > summary {
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto;
}

.disclosure-action {
  min-width: 84px;
  color: var(--theme-accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
}

.disclosure-action .when-open {
  display: none;
}

.workspace-topbar .section-toggle-button,
.saved-library .section-toggle-button,
.activity-log .section-toggle-button {
  width: auto;
  min-width: 70px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.prompt-assist-panel.expanded .disclosure-action .when-closed,
details[open] > summary .disclosure-action .when-closed {
  display: none;
}

.prompt-assist-panel.expanded .disclosure-action .when-open,
details[open] > summary .disclosure-action .when-open {
  display: inline;
}

@media (max-width: 520px) {
  .workflow-editor-backdrop {
    align-items: end;
    padding: 10px;
  }

  .workflow-editor {
    width: 100%;
    max-height: calc(100vh - 20px);
    padding: 16px;
    border-radius: 16px 16px 10px 10px;
  }

  .workflow-stage-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .workflow-stage-actions {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workflow-stage-row .workflow-stage-actions button {
    min-width: 0;
  }

  .generation-module-list .prompt-assist-toggle,
  .generation-module-list .control-disclosure > summary {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 3px 2px;
  }

  .generation-module-list .prompt-assist-toggle small,
  .generation-module-list .control-disclosure > summary > strong {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
    padding-left: 25px;
    text-align: left;
  }

  .generation-module-list .disclosure-action {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* Background Agent execution and explicit project navigation. */
.workspace-project-button {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 72px;
  margin: 14px 20px 0;
  padding: 11px 14px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 16px;
  background: color-mix(in srgb, var(--theme-panel) 88%, var(--theme-accent-soft));
  color: var(--theme-text);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--theme-text) 7%, transparent);
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.workspace-project-button:hover {
  border-color: var(--theme-accent);
  background: color-mix(in srgb, var(--theme-panel) 78%, var(--theme-accent-soft));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--theme-accent) 12%, transparent);
}

.workspace-project-button:focus-visible,
.project-switch-item:focus-visible,
.agent-execution-close:focus-visible,
.agent-background-task-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--theme-accent) 24%, transparent);
  outline-offset: 2px;
}

.workspace-project-mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 13px;
  background: var(--theme-accent);
  color: var(--theme-accent-contrast);
}

.workspace-project-mark svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.workspace-project-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.workspace-project-copy small {
  color: var(--theme-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
}

.workspace-project-copy strong,
.workspace-project-copy > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-project-copy strong {
  color: var(--theme-text);
  font-size: 15px;
  font-weight: 820;
}

.workspace-project-copy > span {
  color: var(--theme-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.workspace-project-action {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 13px;
  border-radius: 11px;
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.workspace-project-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.creation-context-button {
  min-height: 78px;
  padding: 12px 14px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 15px;
  background: color-mix(in srgb, var(--theme-panel) 88%, var(--theme-accent-soft));
}

.creation-context-button:hover {
  border-color: var(--theme-accent);
  background: color-mix(in srgb, var(--theme-panel) 76%, var(--theme-accent-soft));
}

.creation-context-action {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--theme-accent);
  color: var(--theme-accent-contrast);
  font-size: 14px;
  font-weight: 700;
}

.project-switch-list {
  display: grid;
  gap: 8px;
  max-height: min(48vh, 520px);
  overflow-y: auto;
  padding: 2px;
  scrollbar-gutter: stable;
}

.project-switch-list:empty {
  display: none;
}

.project-switch-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  min-height: 64px;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid var(--theme-border);
  border-radius: 14px;
  background: var(--theme-panel-raised);
  color: var(--theme-text);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.project-switch-item:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-panel-soft);
}

.project-switch-item.is-active {
  border-color: color-mix(in srgb, var(--theme-accent) 56%, var(--theme-border));
  background: var(--theme-accent-soft);
  box-shadow: inset 3px 0 0 var(--theme-accent);
}

.project-switch-item:disabled {
  cursor: wait;
  opacity: .68;
}

.project-switch-item-mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: var(--theme-panel-soft);
  color: var(--theme-text-muted);
  font-size: 14px;
  font-weight: 700;
}

.project-switch-item.is-active .project-switch-item-mark {
  background: var(--theme-accent);
  color: var(--theme-accent-contrast);
}

.project-switch-item-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.project-switch-item-copy strong,
.project-switch-item-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-switch-item-copy strong {
  font-size: 14px;
  font-weight: 700;
}

.project-switch-item-copy small {
  color: var(--theme-text-muted);
  font-size: 14px;
}

.project-switch-item-state {
  min-width: 46px;
  color: var(--theme-text-muted);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.project-switch-item.is-active .project-switch-item-state {
  color: var(--theme-accent);
}

.creation-settings-content .project-select-fallback {
  display: none !important;
}

.agent-execution-dialog > header {
  grid-template-columns: 48px minmax(0, 1fr) 44px;
}

.agent-execution-close {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  background: var(--theme-panel-soft);
  color: var(--theme-text-muted);
  cursor: pointer;
}

.agent-execution-close:hover {
  border-color: var(--theme-border-strong);
  color: var(--theme-text);
}

.agent-execution-close svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.agent-execution-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.agent-execution-actions > button {
  min-height: 44px;
  border-radius: 11px;
}

.agent-execution-actions > .ghost-button {
  min-width: 132px;
}

.agent-background-task-button {
  position: fixed;
  z-index: 82;
  right: 22px;
  bottom: 22px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  width: min(310px, calc(100vw - 32px));
  min-height: 68px;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 42%, var(--theme-border));
  border-radius: 17px;
  background: color-mix(in srgb, var(--theme-panel) 92%, var(--theme-accent-soft));
  color: var(--theme-text);
  box-shadow: 0 18px 46px color-mix(in srgb, var(--theme-text) 18%, transparent);
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(16px);
}

.agent-background-task-button[hidden] {
  display: none !important;
}

.agent-background-task-button > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.agent-background-task-button small {
  color: var(--theme-text-muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
}

.agent-background-task-button strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-background-task-button b {
  color: var(--theme-accent);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.agent-background-task-status {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-accent-soft);
}

.agent-background-task-status::before {
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--theme-accent) 28%, transparent);
  border-top-color: var(--theme-accent);
  border-radius: 50%;
  content: "";
  animation: agent-background-spin 900ms linear infinite;
}

.agent-background-task-button.is-finished .agent-background-task-status::before,
.agent-background-task-button.has-failure .agent-background-task-status::before {
  width: 9px;
  height: 9px;
  border: 0;
  background: #2f7d6e;
  animation: none;
}

.agent-background-task-button.has-failure .agent-background-task-status::before {
  background: #b42346;
}

@keyframes agent-background-spin {
  to { transform: rotate(360deg); }
}

/* Account-wide background activity: visible across project switches without becoming a modal. */
.account-task-center {
  position: fixed;
  z-index: 40;
  right: 22px;
  bottom: 22px;
  display: grid;
  width: min(370px, calc(100vw - 32px));
  justify-items: end;
  gap: 10px;
  pointer-events: none;
}

.account-task-center[hidden],
.account-task-center-panel[hidden] {
  display: none !important;
}

.account-task-center-button,
.account-task-center-panel {
  pointer-events: auto;
}

.account-task-center-button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  width: min(286px, 100%);
  min-height: 66px;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 34%, var(--theme-border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--theme-panel) 94%, var(--theme-accent-soft));
  color: var(--theme-text);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--theme-text) 16%, transparent);
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(18px);
}

.account-task-center-button > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.account-task-center-button small,
.account-task-center-header small {
  color: var(--theme-text-muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
}

.account-task-center-button strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-task-center-button > b {
  display: grid;
  min-width: 27px;
  height: 27px;
  padding: 0 7px;
  place-items: center;
  border-radius: 999px;
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.account-task-center-status {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  background: var(--theme-accent-soft);
}

.account-task-center-status::before {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--theme-text-muted);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--theme-text-muted) 10%, transparent);
  content: "";
}

.account-task-center.has-active .account-task-center-status::before {
  border: 2px solid color-mix(in srgb, var(--theme-accent) 26%, transparent);
  border-top-color: var(--theme-accent);
  background: transparent;
  box-shadow: none;
  animation: account-task-spin 900ms linear infinite;
}

.account-task-center.has-failure .account-task-center-status::before {
  background: #b42346;
  box-shadow: 0 0 0 5px color-mix(in srgb, #b42346 11%, transparent);
}

@keyframes account-task-spin {
  to { transform: rotate(360deg); }
}

.account-task-center-panel {
  display: grid;
  grid-template-rows: auto auto minmax(90px, 1fr) auto;
  width: 100%;
  max-height: min(640px, calc(100vh - 112px));
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--theme-panel) 96%, var(--theme-accent-soft));
  box-shadow: 0 24px 70px color-mix(in srgb, var(--theme-text) 22%, transparent);
  backdrop-filter: blur(22px);
}

.account-task-center-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--theme-border);
}

.account-task-center-header > div {
  display: grid;
  gap: 3px;
}

.account-task-center-header h2 {
  margin: 0;
  color: var(--theme-text);
  font-size: 19px;
  line-height: 1.2;
}

.account-task-center-header p {
  margin: 0;
  color: var(--theme-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.account-task-center-close {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  background: var(--theme-surface-soft);
  color: var(--theme-text-muted);
  cursor: pointer;
}

.account-task-center-close svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.account-task-usage {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 1px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-border);
}

.account-task-usage > div {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 12px 13px;
  background: var(--theme-panel);
}

.account-task-usage dt {
  color: var(--theme-text-muted);
  font-size: 14px;
  white-space: nowrap;
}

.account-task-usage dd {
  overflow: hidden;
  margin: 0;
  color: var(--theme-text);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-task-project-list {
  display: grid;
  align-content: start;
  gap: 9px;
  overflow: auto;
  padding: 12px;
  overscroll-behavior: contain;
}

.account-task-empty {
  display: grid;
  min-height: 118px;
  place-items: center;
  padding: 18px;
  border: 1px dashed var(--theme-border-strong);
  border-radius: 15px;
  color: var(--theme-text-muted);
  font-size: 14px;
  text-align: center;
}

.account-task-project {
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 15px;
  background: var(--theme-panel);
}

.account-task-project > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 9px;
}

.account-task-project > header strong {
  overflow: hidden;
  color: var(--theme-text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-task-project > header button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  background: var(--theme-surface-soft);
  color: var(--theme-accent);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.account-task-batches {
  display: grid;
  border-top: 1px solid var(--theme-border);
}

.account-task-batch {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 8px 12px;
}

.account-task-batch + .account-task-batch {
  border-top: 1px solid color-mix(in srgb, var(--theme-border) 72%, transparent);
}

.account-task-batch-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--theme-text-muted);
}

.account-task-batch.is-submitted .account-task-batch-status,
.account-task-batch.is-generating .account-task-batch-status {
  background: var(--theme-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent) 12%, transparent);
}

.account-task-batch.is-completed .account-task-batch-status { background: #2f7d6e; }
.account-task-batch.is-failed .account-task-batch-status { background: #b42346; }

.account-task-batch > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.account-task-batch strong,
.account-task-batch small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-task-batch strong {
  color: var(--theme-text);
  font-size: 14px;
}

.account-task-batch small {
  color: var(--theme-text-muted);
  font-size: 14px;
}

.account-task-batch > b {
  color: var(--theme-text-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.account-task-center-panel > footer {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-top: 1px solid var(--theme-border);
  color: var(--theme-text-muted);
  font-size: 14px;
}

.account-task-center-panel > footer button {
  min-width: 52px;
  min-height: 32px;
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  background: var(--theme-panel);
  color: var(--theme-accent);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.account-task-center-button:focus-visible,
.account-task-center-close:focus-visible,
.account-task-center-panel button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--theme-accent) 25%, transparent);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .workspace-project-button {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    min-height: 68px;
    margin: 10px 12px 0;
    padding: 9px 10px;
    border-radius: 14px;
  }

  .workspace-project-mark {
    width: 42px;
    height: 42px;
  }

  .workspace-project-action {
    min-width: 44px;
    padding: 0 10px;
  }

  .workspace-project-action svg {
    display: none;
  }

  .agent-execution-dialog > header {
    grid-template-columns: 42px minmax(0, 1fr) 44px;
  }

  .agent-execution-dialog > footer .agent-execution-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .agent-execution-actions > button {
    width: 100%;
    min-width: 0;
  }

  .agent-background-task-button {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .account-task-center {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: calc(100vw - 24px);
  }

  .account-task-center-panel {
    max-height: min(72vh, 660px);
    border-radius: 20px;
  }

  .account-task-center-button {
    width: min(286px, 100%);
  }
}

@media (max-width: 430px) {
  .workspace-project-copy > span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-background-task-status::before {
    animation-duration: 2.4s;
  }

  .account-task-center.has-active .account-task-center-status::before {
    animation-duration: 2.4s;
  }
}

/* Minimal product header: one quiet brand, one necessary account action, no duplicate navigation. */
.rail .help-assistant-launcher {
  display: none !important;
}

.rail-logo {
  display: inline-flex;
  width: auto;
  height: 44px;
  min-width: 0;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.rail-brand-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid var(--theme-border);
  border-radius: 10px;
}

.rail-brand-icon svg,
.rail-avatar svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rail-brand-icon svg {
  fill: currentColor;
  stroke: none;
}

.rail-brand-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.rail-brand-copy strong {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.rail-brand-copy small {
  font-size: 14px;
  font-weight: 550;
  line-height: 1.2;
}

.rail-avatar {
  display: inline-flex;
  width: auto;
  height: 38px;
  min-width: 68px;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  border-radius: 10px;
  font-size: 14px;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.rail-avatar .rail-label {
  display: inline;
  font-size: 14px;
  font-weight: 700;
}

.task-shell-brand {
  justify-content: flex-end;
}

.task-shell-brand > span:first-child,
.mode-screen-intro > span,
.project-panel-header .eyebrow,
.embedded-inspector .eyebrow,
.saved-library-header .eyebrow,
.activity-log-header .eyebrow {
  display: none;
}

@media (min-width: 841px) {
  .rail-logo {
    flex: 0 1 auto;
    margin-right: 4px;
  }

  .rail-avatar {
    flex: 0 0 auto;
    width: auto;
    height: 38px;
  }
}

@media (max-width: 520px) {
  .rail {
    padding-inline: 12px;
  }

  .rail-brand-copy small {
    display: none;
  }

  .rail-avatar {
    min-width: 62px;
    height: 40px;
  }
}

/* Lucid Composer: keep the canvas quiet and move optional work into one focused setting surface. */
.generate-mode-panel {
  gap: 26px;
  padding: 28px 22px 34px;
}

.generate-mode-panel > .mode-screen-intro {
  gap: 8px;
}

.generate-mode-panel > .mode-screen-intro h1 {
  color: var(--theme-text);
  font-size: clamp(26px, 2.3vw, 32px);
  font-weight: 680;
  letter-spacing: -0.045em;
}

.generate-mode-panel > .mode-screen-intro p {
  max-width: 36em;
  color: var(--theme-text-muted);
  font-size: 14px;
  line-height: 1.7;
}

.generate-mode-panel > .creation-context-button { order: 2; }
.generate-mode-panel > .prompt-field { order: 3; }
.generate-mode-panel > .creation-toolbelt { order: 4; }
.generate-mode-panel > .generation-module-list { order: 5; }
.generate-mode-panel > #generateButton { order: 8; }

.creation-context-button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  align-items: center;
  padding: 12px 2px;
  border: 0;
  border-top: 1px solid var(--theme-border);
  border-bottom: 1px solid var(--theme-border);
  border-radius: 0;
  background: transparent;
  color: var(--theme-text);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}

.creation-context-button:hover {
  border-color: var(--theme-border-strong);
}

.creation-context-button:focus-visible,
.creation-tool-button:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: 3px;
}

.creation-context-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

.creation-context-mark svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.creation-context-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.creation-context-copy small {
  color: var(--theme-text-subtle);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.creation-context-copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--theme-text);
  font-size: 14px;
  font-weight: 620;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creation-context-action {
  color: var(--theme-accent);
  font-size: 14px;
  font-weight: 650;
}

.generate-mode-panel > .prompt-field {
  gap: 10px;
}

.generate-mode-panel > .prompt-field .field-label {
  min-height: 24px;
}

.generate-mode-panel > .prompt-field .field-label > span {
  color: var(--theme-text);
  font-size: 14px;
  font-weight: 650;
}

.generate-mode-panel > .prompt-field .field-label > strong {
  color: var(--theme-text-subtle);
  font-size: 14px;
  font-weight: 500;
}

.generate-mode-panel > .prompt-field textarea#promptInput {
  min-height: 136px;
  padding: 16px 17px;
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  background: var(--theme-panel-raised);
  color: var(--theme-text);
  font-size: 14px;
  line-height: 1.72;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

.generate-mode-panel > .prompt-field textarea:hover {
  border-color: var(--theme-border-strong);
}

.generate-mode-panel > .prompt-field textarea:focus {
  border-color: var(--theme-accent);
  outline: 3px solid color-mix(in srgb, var(--theme-accent) 13%, transparent);
  outline-offset: 1px;
}

.creation-toolbelt {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.creation-tool-button {
  display: grid;
  min-width: 0;
  min-height: 76px;
  align-content: center;
  justify-items: start;
  gap: 9px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--theme-border) 72%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--theme-accent-soft) 45%, var(--theme-panel));
  color: var(--theme-text);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.creation-tool-button:nth-child(2) {
  background: color-mix(in srgb, var(--theme-secondary-soft) 55%, var(--theme-panel));
}

.creation-tool-button:nth-child(3) {
  background: color-mix(in srgb, var(--theme-panel-soft) 55%, var(--theme-panel));
}

.creation-tool-button:hover {
  border-color: var(--theme-border-strong);
  transform: translateY(-1px);
}

.creation-tool-button > svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--theme-accent);
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.creation-tool-button > span {
  display: grid;
  min-width: 0;
  gap: 2px;
  width: 100%;
}

.creation-tool-button strong,
.creation-tool-button small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creation-tool-button strong {
  color: var(--theme-text);
  font-size: 14px;
  font-weight: 650;
}

.creation-tool-button small {
  color: var(--theme-text-muted);
  font-size: 14px;
  font-weight: 500;
}

.generate-mode-panel > .generation-module-list,
.generate-mode-panel > .usage-card {
  display: none !important;
}

.generate-mode-panel > #generateButton {
  bottom: 0;
  min-height: 54px;
  margin-top: 2px;
  border-radius: 15px;
  background: var(--theme-accent);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--theme-accent) 22%, transparent);
}

.generate-mode-panel > #generateButton:hover {
  background: var(--theme-accent-hover);
}

body.creation-settings-open {
  overflow: hidden;
}

.creation-settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147482800;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--theme-scrim) 84%, transparent);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.creation-settings-dialog {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(660px, 100%);
  height: min(760px, calc(100dvh - 48px));
  max-height: min(760px, calc(100dvh - 48px));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--theme-border) 80%, transparent);
  border-radius: 24px;
  background: var(--theme-panel);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow-lg);
  transition: height 180ms ease;
}

.creation-settings-dialog[data-active-panel="project"] {
  height: min(500px, calc(100dvh - 48px));
}

.creation-settings-dialog[data-active-panel="output"] {
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: auto;
}

.creation-settings-dialog[data-active-panel="project"].project-settings-expanded {
  height: min(680px, calc(100dvh - 48px));
}

@media (prefers-reduced-motion: reduce) {
  .creation-settings-dialog {
    transition: none;
  }
}

.creation-settings-header {
  display: flex;
  min-height: 86px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px 14px;
}

.creation-settings-header > div {
  display: grid;
  gap: 3px;
}

.creation-settings-header small {
  color: var(--theme-text-subtle);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.creation-settings-header h2 {
  margin: 0;
  color: var(--theme-text);
  font-size: 22px;
  font-weight: 670;
  letter-spacing: -0.03em;
}

.creation-settings-close {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: var(--theme-panel-soft);
  color: var(--theme-text-muted);
  cursor: pointer;
}

.creation-settings-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.creation-settings-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 24px;
  padding: 5px;
  border-radius: 14px;
  background: var(--theme-panel-soft);
}

.creation-settings-tabs button {
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--theme-text-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.creation-settings-tabs button.active {
  background: var(--theme-panel);
  color: var(--theme-text);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--theme-text) 7%, transparent);
}

.creation-settings-tabs button:focus-visible,
.creation-settings-close:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: 2px;
}

.creation-settings-content {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 26px 24px 30px;
  overscroll-behavior: contain;
}

.creation-settings-surface[hidden] {
  display: none !important;
}

.creation-settings-content .project-panel,
.creation-settings-content .prompt-assist-panel,
.creation-settings-content .control-disclosure {
  display: grid;
  gap: 20px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.creation-settings-content .project-panel-header {
  align-items: center;
  min-height: 44px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--theme-border);
}

.creation-settings-content .project-panel-header h2 {
  color: var(--theme-text-muted);
  font-size: 14px;
  font-weight: 600;
}

.creation-settings-content .project-summary {
  display: none !important;
}

.creation-settings-content .project-stage-control {
  display: grid;
  gap: 14px;
  margin: 2px 0 0;
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--theme-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.creation-settings-content .project-stage-heading strong {
  font-size: 14px;
  font-weight: 650;
}

.creation-settings-content .project-stage-heading span,
.creation-settings-content .project-stage-hint {
  color: var(--theme-text-muted);
  font-size: 14px;
  font-weight: 450;
  line-height: 1.6;
}

/* Project settings: keep the default view small and reveal one task at a time. */
.project-list-toggle-button,
.project-overview-edit,
.project-edit-close {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--theme-border);
  border-radius: 9px;
  background: var(--theme-panel-raised);
  color: var(--theme-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 720;
}

.project-list-toggle-button:hover,
.project-overview-edit:hover,
.project-edit-close:hover,
.project-list-toggle-button:focus-visible,
.project-overview-edit:focus-visible,
.project-edit-close:focus-visible {
  border-color: var(--theme-accent);
  color: var(--theme-accent);
}

.project-list-toggle-button:focus-visible,
.project-overview-edit:focus-visible,
.project-edit-close:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--theme-accent) 18%, transparent);
  outline-offset: 2px;
}

.project-overview-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 78px;
  padding: 14px;
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  background: var(--theme-panel-raised);
}

.project-overview-mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 13px;
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

.project-overview-mark svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.project-overview-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.project-overview-copy strong,
.project-overview-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-overview-copy strong {
  color: var(--theme-text);
  font-size: 15px;
  font-weight: 700;
}

.project-overview-copy span {
  color: var(--theme-text-muted);
  font-size: 14px;
}

.creation-settings-content .project-panel.listing .project-overview-card,
.creation-settings-content .project-panel.listing .project-stage-control,
.creation-settings-content .project-panel.listing .project-manage-panel,
.creation-settings-content .project-panel.creating .project-overview-card,
.creation-settings-content .project-panel.creating .project-switch-list,
.creation-settings-content .project-panel.creating .project-stage-control,
.creation-settings-content .project-panel.creating .project-manage-panel,
.creation-settings-content .project-panel.editing .project-overview-card,
.creation-settings-content .project-panel.editing .project-switch-list,
.creation-settings-content .project-panel.editing .project-stage-control,
.creation-settings-content .project-panel.editing .project-create-form {
  display: none !important;
}

.creation-settings-content .project-panel.creating .project-header-actions,
.creation-settings-content .project-panel.editing .project-header-actions {
  display: none;
}

.creation-settings-content .project-panel.listing .project-switch-list {
  display: grid;
  max-height: min(50dvh, 430px);
}

.creation-settings-content .project-panel.creating .project-create-form,
.creation-settings-content .project-panel.editing .project-manage-panel {
  display: grid;
}

.creation-settings-content .project-stage-control {
  gap: 10px;
  margin-top: 0;
  padding-top: 16px;
}

.creation-settings-content .project-stage-heading span,
.creation-settings-content .project-stage-hint {
  display: none;
}

.creation-settings-content .project-create-form,
.creation-settings-content .project-manage-panel {
  gap: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.project-simple-field {
  display: grid;
  gap: 7px;
  color: var(--theme-text);
  font-size: 14px;
  font-weight: 700;
}

.project-simple-field small {
  color: var(--theme-text-subtle);
  font-size: 14px;
  font-weight: 550;
}

.creation-settings-content .project-create-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  background: var(--theme-panel-raised);
  color: var(--theme-text);
  font: inherit;
}

.creation-settings-content .project-create-intro {
  padding-bottom: 4px;
}

.creation-settings-content .project-create-intro strong {
  color: var(--theme-text);
  font-size: 17px;
  font-weight: 720;
}

.creation-settings-content .project-create-intro span {
  color: var(--theme-text-muted);
  font-size: 14px;
}

.creation-settings-content .project-create-actions {
  justify-content: flex-end;
  padding-top: 2px;
}

.creation-settings-content .project-create-actions button {
  min-width: 104px;
  min-height: 44px;
}

.creation-settings-content .project-manage-panel > header {
  justify-content: space-between;
  padding-bottom: 4px;
}

.creation-settings-content .project-manage-panel > header strong {
  font-size: 17px;
  font-weight: 720;
}

.creation-settings-content .project-manage-panel > header div > span {
  font-size: 14px;
}

.creation-settings-content .project-manage-fields {
  gap: 14px;
}

.creation-settings-content .project-manage-fields input,
.creation-settings-content .project-manage-fields select,
.creation-settings-content .project-manage-fields textarea {
  border-color: var(--theme-border);
  border-radius: 12px;
  background: var(--theme-panel-raised);
  color: var(--theme-text);
}

.creation-settings-content .project-manage-actions {
  justify-content: flex-end;
}

.creation-settings-content .project-manage-actions .secondary-button {
  min-width: 132px;
}

.project-danger-zone {
  padding-top: 4px;
  border-top: 1px solid var(--theme-border);
}

.project-danger-zone > summary {
  width: max-content;
  padding: 10px 0;
  color: var(--theme-text-subtle);
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
}

.project-danger-zone > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--theme-danger) 6%, var(--theme-panel));
}

.project-danger-zone p {
  margin: 0;
  color: var(--theme-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.creation-settings-content .field > select,
.creation-settings-content .project-stage-control > select,
.creation-settings-content .field > input,
.creation-settings-content .prompt-assist-controls > select {
  min-height: 48px;
  border-color: var(--theme-border);
  border-radius: 12px;
  background: var(--theme-panel-raised);
}

.creation-settings-content .prompt-assist-toggle,
.creation-settings-content .control-disclosure > summary {
  display: none !important;
}

.creation-settings-content .prompt-assist-panel > :not(.prompt-assist-toggle),
.creation-settings-content .control-disclosure > .disclosure-body {
  display: grid;
  margin: 0 !important;
}

.creation-settings-content .prompt-assist-header {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.7fr);
  gap: 18px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--theme-border);
}

.creation-settings-content .prompt-assist-header strong {
  color: var(--theme-text);
  font-size: 15px;
  font-weight: 650;
}

.creation-settings-content .prompt-assist-header span {
  color: var(--theme-text-muted);
  font-size: 14px;
}

.creation-settings-content .prompt-assist-controls {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.creation-settings-content .prompt-assist-result {
  min-height: 150px;
  padding: 16px;
  border: 1px solid var(--theme-border);
  border-radius: 14px;
  background: var(--theme-panel-raised);
  color: var(--theme-text-muted);
  line-height: 1.7;
}

.creation-settings-content .control-disclosure > .disclosure-body {
  gap: 20px;
  padding: 0;
}

.creation-settings-content .reference-dropzone {
  min-height: 104px;
  border: 1px dashed var(--theme-border-strong);
  border-radius: 16px;
  background: var(--theme-panel-raised);
}

.creation-settings-content .output-settings-body {
  gap: 22px;
}

.creation-settings-content .settings-row {
  gap: 16px;
}

.creation-settings-footer {
  display: flex;
  justify-content: flex-end;
  padding: 14px 24px 20px;
  border-top: 1px solid var(--theme-border);
  background: color-mix(in srgb, var(--theme-panel) 94%, transparent);
}

.creation-settings-footer .secondary-button {
  min-width: 112px;
  min-height: 44px;
  border-color: var(--theme-accent);
  border-radius: 12px;
  background: var(--theme-accent);
  color: var(--theme-accent-contrast);
}

@media (max-width: 640px) {
  .generate-mode-panel {
    gap: 28px;
    padding: 26px 20px 34px;
  }

  .generate-mode-panel > .mode-screen-intro h1 {
    font-size: 29px;
  }

  .creation-context-button {
    min-height: 74px;
  }

  .creation-toolbelt {
    gap: 8px;
  }

  .creation-tool-button {
    min-height: 74px;
    padding: 11px 10px;
    border-radius: 14px;
  }

  .creation-tool-button small {
    font-size: 14px;
  }

  .creation-settings-backdrop {
    align-items: end;
    padding: 0;
  }

  .creation-settings-dialog {
    width: 100%;
    height: 92dvh;
    max-height: 92dvh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 24px 24px 0 0;
  }

  .creation-settings-dialog[data-active-panel="project"] {
    height: min(520px, 92dvh);
  }

  .creation-settings-dialog[data-active-panel="project"].project-settings-expanded {
    height: 92dvh;
  }

  .creation-settings-header {
    min-height: 82px;
    padding: 18px 20px 12px;
  }

  .creation-settings-header h2 {
    font-size: 20px;
  }

  .creation-settings-tabs {
    gap: 3px;
    margin: 0 14px;
    padding: 4px;
  }

  .creation-settings-tabs button {
    min-height: 44px;
    padding: 0 4px;
    font-size: 14px;
  }

  .creation-settings-content {
    padding: 24px 20px 28px;
  }

  .creation-settings-content .prompt-assist-header,
  .creation-settings-content .prompt-assist-controls,
  .creation-settings-content .settings-row {
    grid-template-columns: 1fr;
  }

  .creation-settings-footer {
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
  }

  .creation-settings-footer .secondary-button {
    width: 100%;
  }

  .creation-settings-content .project-panel-header {
    align-items: flex-start;
  }

  .creation-settings-content .project-header-actions {
    gap: 6px;
  }

  .project-list-toggle-button,
  .project-new-button {
    min-height: 40px;
  }

  .project-overview-card {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }

  .project-overview-mark {
    width: 40px;
    height: 40px;
  }

  .creation-settings-content .project-manage-fields {
    grid-template-columns: 1fr;
  }

  .creation-settings-content .project-manage-fields label.wide {
    grid-column: auto;
  }

  .project-danger-zone > div {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Batch Archive: every generation request becomes one compact collection box. */
.gallery-grid,
.main-stage.workspace-view-saved .saved-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: auto;
  gap: 16px;
  align-content: start;
}

.batch-collection-box {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  min-width: 0;
  min-height: 132px;
  align-items: center;
  padding: 15px;
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--theme-panel) 94%, var(--theme-panel-soft));
  color: var(--theme-text);
  text-align: left;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-text) 5%, transparent);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.batch-collection-box:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-panel);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--theme-text) 9%, transparent);
}

.batch-collection-box:focus-visible {
  border-color: var(--theme-accent);
  outline: 3px solid color-mix(in srgb, var(--theme-accent) 18%, transparent);
  outline-offset: 2px;
}

.batch-cover-stack {
  position: relative;
  display: block;
  width: 94px;
  height: 94px;
  isolation: isolate;
}

.batch-cover-stack::before,
.batch-cover-stack::after {
  position: absolute;
  inset: 5px 0 0 5px;
  z-index: -1;
  border: 1px solid var(--theme-border);
  border-radius: 13px;
  background: var(--theme-panel-soft);
  content: "";
}

.batch-cover-stack::after {
  inset: 10px -5px -5px 10px;
  z-index: -2;
  opacity: 0.72;
}

.batch-cover-media {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--theme-border-strong) 72%, transparent);
  border-radius: 13px;
  background:
    linear-gradient(45deg, color-mix(in srgb, var(--theme-panel-soft) 72%, transparent) 25%, transparent 25%),
    linear-gradient(-45deg, color-mix(in srgb, var(--theme-panel-soft) 72%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--theme-panel-soft) 72%, transparent) 75%),
    linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--theme-panel-soft) 72%, transparent) 75%),
    var(--theme-panel);
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  background-size: 14px 14px;
}

.batch-cover-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 220ms ease;
}

.batch-collection-box:hover .batch-cover-media img {
  transform: scale(1.025);
}

.batch-count-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  min-width: 42px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(24, 24, 27, 0.82);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  backdrop-filter: blur(8px);
}

.batch-box-copy {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.batch-box-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--theme-text-subtle);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.4;
}

.batch-box-meta > span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-box-meta i,
.batch-drawer-meta i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--theme-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 13%, transparent);
}

.batch-box-meta time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.batch-box-copy > strong {
  overflow: hidden;
  color: var(--theme-text);
  font-size: 14px;
  font-weight: 680;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-box-prompt {
  display: -webkit-box;
  min-height: 2.8em;
  overflow: hidden;
  color: var(--theme-text-muted);
  font-size: 14px;
  font-weight: 450;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.batch-box-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--theme-accent);
  font-size: 14px;
  font-weight: 650;
}

.batch-box-open svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.batch-load-more {
  grid-column: 1 / -1;
}

body.batch-drawer-open {
  overflow: hidden;
}

.batch-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vw, 52px);
  background: color-mix(in srgb, var(--theme-scrim, #0f172a) 78%, transparent);
  opacity: 0;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: opacity 180ms ease-out;
}

.batch-drawer-backdrop.is-open {
  opacity: 1;
}

.batch-drawer {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  width: min(1120px, 100%);
  height: min(820px, 100%);
  max-height: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--theme-border) 88%, transparent);
  border-radius: 22px;
  background: var(--theme-panel);
  color: var(--theme-text);
  box-shadow: 0 32px 90px color-mix(in srgb, var(--theme-text) 28%, transparent);
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transform-origin: center;
  transition:
    opacity 180ms ease-out,
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.batch-drawer-backdrop.is-open .batch-drawer {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.batch-drawer-header {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 14px;
}

.batch-drawer-header > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.batch-drawer-header small {
  color: var(--theme-text-subtle);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.batch-drawer-header h2 {
  margin: 0;
  color: var(--theme-text);
  font-size: 21px;
  font-weight: 680;
  letter-spacing: -0.03em;
}

.batch-drawer-close {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: var(--theme-panel-soft);
  color: var(--theme-text-muted);
  cursor: pointer;
}

.batch-drawer-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.batch-drawer-close:focus-visible,
.batch-drawer-recipe button:focus-visible,
.batch-drawer-grid button:focus-visible,
.batch-drawer-grid a:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: 2px;
}

.batch-drawer-recipe {
  display: grid;
  margin: 0 22px 14px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 18%, var(--theme-border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--theme-accent-soft) 24%, var(--theme-panel));
}

.batch-drawer-recipe.is-expanded {
  border-color: color-mix(in srgb, var(--theme-accent) 34%, var(--theme-border));
}

.batch-drawer-recipe > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.batch-drawer-recipe-toggle-copy small {
  color: var(--theme-text);
  font-size: 14px;
  font-weight: 720;
}

.batch-drawer-recipe-toggle-copy strong {
  display: block;
  max-width: 620px;
  overflow: hidden;
  color: var(--theme-text-subtle);
  font-size: 14px;
  font-weight: 540;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-drawer-recipe-toggle {
  display: grid;
  min-width: 0;
  min-height: 48px;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) auto auto 18px;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--theme-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease;
}

.batch-drawer-recipe-toggle:hover {
  background: color-mix(in srgb, var(--theme-accent-soft) 56%, transparent);
}

.batch-drawer-recipe-toggle-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.batch-drawer-recipe-summary {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--theme-panel);
  color: var(--theme-text-muted);
  font-size: 14px;
  font-weight: 620;
  white-space: nowrap;
}

.batch-drawer-recipe-toggle-label {
  color: var(--theme-accent);
  font-size: 14px;
  font-weight: 680;
}

.batch-drawer-recipe-chevron {
  transition: transform 180ms ease;
}

.batch-drawer-recipe-toggle[aria-expanded="true"] .batch-drawer-recipe-chevron {
  transform: rotate(180deg);
}

.batch-drawer-recipe > header #reuseBatchRecipeButton {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid var(--theme-accent);
  border-radius: 11px;
  background: var(--theme-accent);
  color: var(--theme-on-accent, #fff);
  font: inherit;
  font-size: 14px;
  font-weight: 680;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.batch-drawer-recipe > header #reuseBatchRecipeButton:hover:not(:disabled) {
  box-shadow: 0 8px 18px color-mix(in srgb, var(--theme-accent) 22%, transparent);
}

.batch-drawer-recipe > header #reuseBatchRecipeButton:active:not(:disabled) {
  transform: scale(0.98);
}

.batch-drawer-recipe > header #reuseBatchRecipeButton:disabled {
  border-color: var(--theme-border);
  background: var(--theme-panel-soft);
  color: var(--theme-text-subtle);
  cursor: not-allowed;
  opacity: 0.72;
}

.batch-drawer-recipe > header svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.batch-drawer-recipe-content {
  display: grid;
  max-height: min(34vh, 300px);
  gap: 10px;
  margin-top: 6px;
  padding: 12px 6px 5px;
  overflow-x: hidden;
  overflow-y: auto;
  border-top: 1px solid color-mix(in srgb, var(--theme-border) 86%, transparent);
  overscroll-behavior: contain;
}

.batch-drawer-prompt-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--theme-text-muted);
  font-size: 14px;
}

.batch-drawer-prompt-heading strong {
  color: var(--theme-text);
  font-size: 14px;
  font-weight: 680;
}

.batch-drawer-prompt {
  margin: 0;
  padding: 10px 11px;
  border-radius: 10px;
  background: var(--theme-panel);
  color: var(--theme-text);
  font-size: 14px;
  font-weight: 520;
  line-height: 1.65;
  white-space: pre-wrap;
}

.batch-drawer-prompt.is-missing {
  color: var(--theme-text-subtle);
  font-weight: 480;
}

.batch-drawer-original-prompt {
  color: var(--theme-text-muted);
  font-size: 14px;
}

.batch-drawer-original-prompt summary {
  color: var(--theme-accent);
  font-weight: 650;
  cursor: pointer;
}

.batch-drawer-original-prompt p {
  margin: 8px 0 0;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--theme-panel);
  line-height: 1.6;
  white-space: pre-wrap;
}

.batch-drawer-reference-block {
  display: grid;
  gap: 7px;
}

.batch-drawer-reference-block > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--theme-text-muted);
  font-size: 14px;
}

.batch-drawer-reference-block > div:first-child strong {
  color: var(--theme-text);
  font-weight: 680;
}

.batch-drawer-references {
  display: flex;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  padding: 1px 1px 3px;
  overscroll-behavior-x: contain;
}

.batch-drawer-references > p {
  margin: 0;
  color: var(--theme-text-subtle);
  font-size: 14px;
  line-height: 1.55;
}

.batch-drawer-references > button {
  position: relative;
  display: block;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  background: var(--theme-panel);
  cursor: zoom-in;
}

.batch-drawer-references img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.batch-drawer-references button span {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.76);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.batch-drawer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 22px 18px;
  border-bottom: 1px solid var(--theme-border);
}

.batch-drawer-meta span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--theme-panel-soft);
  color: var(--theme-text-muted);
  font-size: 14px;
  font-weight: 550;
}

.batch-drawer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px 14px;
  min-height: 0;
  align-content: start;
  padding: 20px 22px 32px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.batch-drawer[data-image-count="1"] .batch-drawer-grid {
  grid-template-columns: minmax(280px, 520px);
  justify-content: center;
}

.batch-drawer[data-image-count="2"] .batch-drawer-grid {
  grid-template-columns: repeat(2, minmax(240px, 360px));
  justify-content: center;
}

.batch-drawer-image {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 8px;
}

.batch-drawer-image-frame {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: var(--preview-ratio, 1 / 1);
  min-height: 132px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 14px;
  background:
    linear-gradient(45deg, var(--theme-panel-soft) 25%, transparent 25%),
    linear-gradient(-45deg, var(--theme-panel-soft) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--theme-panel-soft) 75%),
    linear-gradient(-45deg, transparent 75%, var(--theme-panel-soft) 75%),
    var(--theme-panel-raised);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.batch-drawer-image.selected .batch-drawer-image-frame {
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 14%, transparent);
}

.batch-drawer-preview {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.batch-drawer-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.batch-drawer-star {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #667085;
  font-size: 17px;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.batch-drawer-star.active {
  color: #a96d12;
}

.batch-drawer-image-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.batch-drawer-image-actions button,
.batch-drawer-image-actions a {
  display: inline-flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 5px;
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  background: var(--theme-panel-raised);
  color: var(--theme-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.batch-drawer-image-actions svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.batch-drawer-image-actions:has(.batch-image-export-trigger) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.batch-drawer-image-actions .batch-image-export-trigger {
  color: var(--theme-accent);
}

.batch-drawer-image-actions span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-drawer-image-meta {
  color: var(--theme-text-subtle);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.image-modal {
  z-index: 60;
}

@media (max-width: 640px) {
  .gallery-grid,
  .main-stage.workspace-view-saved .saved-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 12px;
    padding: 16px;
  }

  .batch-collection-box {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 13px;
    min-height: 118px;
    padding: 13px;
    border-radius: 16px;
  }

  .batch-cover-stack {
    width: 84px;
    height: 84px;
  }

  .batch-cover-media {
    width: 78px;
    height: 78px;
    border-radius: 12px;
  }

  .batch-box-open {
    display: none;
  }

  .batch-drawer-backdrop {
    align-items: center;
    padding:
      max(10px, env(safe-area-inset-top))
      10px
      max(10px, env(safe-area-inset-bottom));
  }

  .batch-drawer {
    width: 100%;
    height: 100%;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    border: 1px solid var(--theme-border);
    border-radius: 18px;
    box-shadow: 0 24px 70px color-mix(in srgb, var(--theme-text) 26%, transparent);
    transform: translateY(12px) scale(0.97);
  }

  .batch-drawer-backdrop.is-open .batch-drawer {
    transform: translateY(0) scale(1);
  }

  .batch-drawer-header {
    min-height: 80px;
    padding: 16px 18px 10px;
  }

  .batch-drawer-header h2 {
    font-size: 20px;
  }

  .batch-drawer-prompt {
    padding: 9px 10px;
    font-size: 14px;
  }

  .batch-drawer-recipe {
    margin: 0 16px 12px;
    padding: 7px 8px;
    border-radius: 13px;
  }

  .batch-drawer-recipe > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
  }

  .batch-drawer-recipe-toggle {
    grid-template-columns: minmax(0, 1fr) auto 18px;
    gap: 7px;
  }

  .batch-drawer-recipe-summary {
    display: none;
  }

  .batch-drawer-recipe > header #reuseBatchRecipeButton {
    min-width: 44px;
    padding: 0 10px;
  }

  .batch-drawer-recipe > header #reuseBatchRecipeButton span {
    display: none;
  }

  .batch-drawer-recipe-content {
    max-height: min(38dvh, 280px);
    padding: 10px 4px 4px;
  }

  .batch-drawer-references > button {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }

  .batch-drawer-meta {
    padding: 0 18px 16px;
  }

  .batch-drawer-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 16px 10px;
    padding: 16px 16px calc(28px + env(safe-area-inset-bottom));
  }

  .batch-drawer[data-image-count="1"] .batch-drawer-grid,
  .batch-drawer[data-image-count="2"] .batch-drawer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .batch-drawer-image-frame {
    min-height: 104px;
    border-radius: 12px;
  }

  .batch-drawer-image-actions {
    gap: 4px;
  }

  .batch-drawer-image-actions button,
  .batch-drawer-image-actions a {
    min-height: 44px;
    padding: 0 3px;
    border-radius: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .batch-drawer-backdrop,
  .batch-drawer,
  .batch-cover-media img {
    transition: none;
  }
}

/* Conversation Studio: clear attachment feedback, quieter chrome and a focused composer. */
.conversation-studio-backdrop {
  padding: clamp(16px, 3vw, 42px);
  background: color-mix(in srgb, var(--theme-scrim, #0f172a) 80%, transparent);
  backdrop-filter: blur(10px) saturate(0.86);
  -webkit-backdrop-filter: blur(10px) saturate(0.86);
}

.conversation-studio-dialog {
  width: min(1240px, 100%);
  height: min(860px, 100%);
  min-height: min(580px, 100%);
  border-color: color-mix(in srgb, var(--theme-border) 86%, transparent);
  border-radius: 26px;
  background: var(--theme-panel);
  box-shadow: 0 38px 110px color-mix(in srgb, var(--theme-text) 30%, transparent);
}

.conversation-studio-header {
  grid-template-columns: 52px minmax(0, 1fr) 46px;
  min-height: 92px;
  padding: 16px 20px;
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--theme-accent) 11%, transparent), transparent 34%),
    var(--theme-panel);
}

.conversation-studio-mark {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--theme-accent) 22%, transparent);
}

.conversation-studio-header > div > span {
  font-size: 14px;
  letter-spacing: 0.08em;
}

.conversation-studio-header h2 {
  margin-top: 3px;
  font-size: 23px;
  font-weight: 720;
}

.conversation-studio-header p {
  max-width: 680px;
  line-height: 1.5;
}

.conversation-studio-close {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.conversation-studio-close:hover,
.conversation-studio-close:focus-visible {
  background: var(--theme-panel-soft);
}

.conversation-studio-body {
  grid-template-columns: 292px minmax(0, 1fr);
}

.conversation-sidebar {
  gap: 10px;
  padding: 16px 14px 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--theme-accent-soft) 42%, var(--theme-panel-soft)) 0%, var(--theme-panel-soft) 42%);
}

.conversation-sidebar-heading {
  align-items: flex-start;
  padding: 2px 2px 12px;
}

.conversation-sidebar-heading strong {
  font-size: 14px;
  font-weight: 760;
}

.conversation-sidebar-heading button {
  min-width: 96px;
  border-color: color-mix(in srgb, var(--theme-accent) 30%, var(--theme-border));
  border-radius: 12px;
  background: var(--theme-panel);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--theme-text) 6%, transparent);
}

.conversation-sidebar-heading button:hover,
.conversation-sidebar-heading button:focus-visible {
  border-color: var(--theme-accent);
  background: color-mix(in srgb, var(--theme-accent-soft) 60%, var(--theme-panel));
}

.conversation-list {
  gap: 8px;
}

.conversation-list-item {
  min-height: 76px;
  padding: 10px;
  border-color: transparent;
  border-radius: 14px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.conversation-list-item:hover {
  border-color: var(--theme-border);
  background: color-mix(in srgb, var(--theme-panel) 82%, transparent);
}

.conversation-list-item.active {
  border-color: color-mix(in srgb, var(--theme-accent) 36%, var(--theme-border));
  background: var(--theme-panel);
  box-shadow:
    inset 3px 0 var(--theme-accent),
    0 10px 24px color-mix(in srgb, var(--theme-text) 7%, transparent);
}

.conversation-list-cover {
  width: 46px;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 12%, var(--theme-border));
  border-radius: 12px;
}

.conversation-main {
  background:
    radial-gradient(circle at 80% 14%, color-mix(in srgb, var(--theme-accent) 6%, transparent), transparent 30%),
    var(--theme-canvas);
}

.conversation-context-bar {
  min-height: 50px;
  margin: 12px 16px 0;
  padding: 0 14px;
  border: 1px solid var(--theme-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--theme-panel) 90%, transparent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--theme-text) 5%, transparent);
}

.conversation-live-dot {
  width: 7px;
  height: 7px;
}

.conversation-thread {
  gap: 24px;
  padding: 26px clamp(18px, 4vw, 54px) 22px;
}

.conversation-empty-state {
  gap: 12px;
  max-width: 480px;
  padding: 44px 28px;
}

.conversation-empty-state > span {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  box-shadow: 0 16px 32px color-mix(in srgb, var(--theme-text) 8%, transparent);
}

.conversation-empty-state strong {
  font-size: 18px;
}

.conversation-empty-state p {
  max-width: 420px;
  font-size: 14px;
}

.conversation-turn {
  gap: 14px;
  width: min(820px, 100%);
}

.conversation-user-message {
  max-width: min(680px, 88%);
  padding: 13px 16px;
  border-radius: 18px 18px 5px 18px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-accent) 16%, transparent);
}

.conversation-turn-reference-group {
  display: grid;
  gap: 5px;
  margin-top: 2px;
}

.conversation-turn-reference-group > b {
  color: color-mix(in srgb, currentColor 76%, transparent);
  font-size: 14px;
  font-weight: 820;
}

.conversation-assistant-message {
  width: min(740px, 94%);
  max-width: none;
  padding: 16px;
  border-radius: 5px 18px 18px 18px;
  box-shadow: 0 14px 32px color-mix(in srgb, var(--theme-text) 7%, transparent);
}

.conversation-context-ledger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 16%, var(--theme-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--theme-accent-soft) 35%, var(--theme-panel));
  color: var(--theme-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.conversation-context-ledger strong {
  color: var(--theme-text);
  font-size: 14px;
}

.conversation-context-ledger em {
  flex-basis: 100%;
  color: var(--theme-warning, #b54708);
  font-style: normal;
}

.conversation-clarification {
  margin: 12px 0;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 34%, var(--theme-border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--theme-accent-soft) 52%, var(--theme-panel));
  color: var(--theme-text);
}

.conversation-clarification.is-conflict {
  border-color: color-mix(in srgb, #f59e0b 42%, var(--theme-border));
  background: color-mix(in srgb, #fef3c7 52%, var(--theme-panel));
}

.conversation-clarification strong {
  display: block;
  margin-bottom: 5px;
  color: var(--theme-accent-strong, var(--theme-accent));
  font-size: 14px;
}

.conversation-clarification.is-conflict strong {
  color: #b45309;
}

.conversation-clarification p {
  margin: 0;
  line-height: 1.65;
}

.conversation-clarification > small {
  display: block;
  margin-top: 8px;
  color: var(--theme-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.conversation-clarification-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.conversation-clarification-options button {
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 30%, var(--theme-border));
  border-radius: 999px;
  background: var(--theme-panel);
  color: var(--theme-text);
  font: inherit;
  font-size: 14px;
  font-weight: 720;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.conversation-clarification-options button:hover,
.conversation-clarification-options button:focus-visible {
  border-color: var(--theme-accent);
  background: color-mix(in srgb, var(--theme-accent-soft) 62%, var(--theme-panel));
  color: var(--theme-accent-strong, var(--theme-accent));
  outline: none;
}

.conversation-clarification-options button:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 20%, transparent);
}

.conversation-prompt-confirmation {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 28%, var(--theme-border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--theme-accent-soft) 42%, var(--theme-panel));
}

.conversation-prompt-confirmation label {
  display: grid;
  gap: 3px;
}

.conversation-prompt-confirmation label strong {
  color: var(--theme-text);
  font-size: 14px;
}

.conversation-prompt-confirmation label span {
  color: var(--theme-text-muted);
  font-size: 14px;
}

.conversation-prompt-confirmation textarea {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  padding: 12px;
  border: 1px solid var(--theme-border);
  border-radius: 11px;
  background: var(--theme-panel);
  color: var(--theme-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.65;
}

.conversation-prompt-confirmation textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--theme-accent) 24%, transparent);
  border-color: var(--theme-accent);
}

.conversation-prompt-confirmation button {
  justify-self: end;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--theme-accent);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.conversation-prompt-confirmation button:disabled {
  opacity: .62;
  cursor: wait;
}

.conversation-assistant-message details.conversation-context-images {
  padding-top: 0;
  border-top: 0;
}

.conversation-context-images .conversation-turn-references {
  margin-top: 8px;
}

.conversation-turn-references.is-inherited img {
  border-color: var(--theme-border);
}

.conversation-output-grid button {
  border-radius: 13px;
}

.conversation-composer {
  position: relative;
  gap: 11px;
  margin: 0 16px 16px;
  padding: 14px;
  border: 1px solid var(--theme-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--theme-panel) 96%, transparent);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--theme-text) 10%, transparent);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.conversation-composer.is-dragging-reference {
  border-color: var(--theme-accent);
  background: color-mix(in srgb, var(--theme-accent-soft) 54%, var(--theme-panel));
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--theme-accent) 13%, transparent),
    0 18px 44px color-mix(in srgb, var(--theme-text) 10%, transparent);
}

.conversation-reference-row {
  min-height: 48px;
  padding: 0 2px;
}

.conversation-reference-row strong {
  font-size: 14px;
  font-weight: 760;
}

.conversation-reference-row > div span {
  max-width: 560px;
  font-size: 14px;
}

.conversation-reference-input {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.conversation-reference-row > button,
.conversation-reference-row > label {
  display: inline-flex;
  min-width: 116px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 34%, var(--theme-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--theme-accent-soft) 46%, var(--theme-panel));
  color: var(--theme-accent);
  font: inherit;
  font-size: 14px;
  font-weight: 760;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.conversation-reference-row > button:hover,
.conversation-reference-row > button:focus-visible,
.conversation-reference-row > label:hover,
.conversation-reference-row > label:focus-visible {
  border-color: var(--theme-accent);
  background: color-mix(in srgb, var(--theme-accent-soft) 72%, var(--theme-panel));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--theme-accent) 10%, transparent);
}

.conversation-reference-row > button.is-unavailable,
.conversation-reference-row > label.is-unavailable {
  border-style: dashed;
  border-color: var(--theme-border-strong);
  background: var(--theme-panel-soft);
  color: var(--theme-text-muted);
}

.conversation-reference-row > button.is-unavailable:hover,
.conversation-reference-row > button.is-unavailable:focus-visible,
.conversation-reference-row > label.is-unavailable:hover,
.conversation-reference-row > label.is-unavailable:focus-visible {
  border-color: var(--theme-accent);
  color: var(--theme-accent);
  box-shadow: none;
}

.conversation-reference-preview {
  gap: 9px;
  padding: 2px 4px 3px;
}

.conversation-reference-preview figure {
  flex-basis: 62px;
  width: 62px;
  height: 62px;
}

.conversation-reference-preview img {
  border: 1px solid var(--theme-border);
  border-radius: 11px;
}

.conversation-message-label textarea {
  min-height: 92px;
  max-height: 180px;
  padding: 13px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--theme-panel-soft) 72%, var(--theme-panel));
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.conversation-message-label textarea:focus {
  background: var(--theme-panel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 10%, transparent);
}

.conversation-composer-footer button {
  min-width: 148px;
  min-height: 48px;
  border-radius: 13px;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--theme-accent) 18%, transparent);
}

.conversation-composer-footer button:disabled {
  box-shadow: none;
}

.local-edit-canvas-button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 11px;
  width: 100%;
  min-height: 72px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 32%, var(--theme-border));
  border-radius: 13px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--theme-accent-soft) 66%, var(--theme-panel)) 0%, var(--theme-panel) 76%);
  color: var(--theme-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-accent) 8%, transparent);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.local-edit-canvas-button:hover,
.local-edit-canvas-button:focus-visible {
  border-color: var(--theme-accent);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--theme-accent) 13%, transparent);
}

.local-edit-canvas-button:active {
  transform: translateY(1px);
}

.local-edit-canvas-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: var(--theme-accent);
  color: var(--theme-on-accent, #fff);
}

.local-edit-canvas-mark svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.local-edit-canvas-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.local-edit-canvas-copy strong {
  font-size: 14px;
  font-weight: 780;
}

.local-edit-canvas-copy small {
  color: var(--theme-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.local-edit-canvas-action {
  color: var(--theme-accent);
  font-size: 14px;
  font-weight: 780;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .conversation-studio-backdrop {
    padding: 0;
  }

  .conversation-studio-dialog {
    width: 100vw;
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }

  .conversation-studio-header {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    min-height: calc(76px + env(safe-area-inset-top));
    padding: calc(10px + env(safe-area-inset-top)) 10px 10px;
  }

  .conversation-studio-mark {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .conversation-studio-header h2 {
    font-size: 20px;
  }

  .conversation-studio-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 132px minmax(0, 1fr);
  }

  .conversation-sidebar {
    padding: 9px 10px;
  }

  .conversation-list-item {
    flex-basis: 230px;
    min-height: 68px;
  }

  .conversation-context-bar {
    min-height: 44px;
    margin: 8px 8px 0;
    padding-inline: 11px;
  }

  .conversation-thread {
    gap: 18px;
    padding: 16px 12px;
  }

  .conversation-empty-state {
    padding: 24px 14px;
  }

  .conversation-empty-state > span {
    width: 54px;
    height: 54px;
    border-radius: 17px;
  }

  .conversation-user-message,
  .conversation-assistant-message {
    max-width: 96%;
  }

  .conversation-clarification-options {
    display: grid;
    grid-template-columns: 1fr;
  }

  .conversation-clarification-options button {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  .conversation-assistant-message {
    width: 96%;
  }

  .conversation-composer {
    gap: 9px;
    margin: 0 8px max(8px, env(safe-area-inset-bottom));
    padding: 11px;
    border-radius: 16px;
  }

  .conversation-reference-row {
    gap: 8px;
  }

  .conversation-reference-row > div span {
    max-width: 190px;
  }

  .conversation-reference-row > button,
  .conversation-reference-row > label {
    min-width: 104px;
    padding-inline: 10px;
  }

  .conversation-message-label textarea {
    min-height: 74px;
    max-height: 124px;
  }

  .conversation-composer-footer p {
    max-width: 52%;
  }

  .conversation-composer-footer button {
    min-width: 138px;
  }

  .local-edit-canvas-button {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .local-edit-canvas-action {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .conversation-studio-close,
  .conversation-list-item,
  .conversation-composer,
  .conversation-reference-row > button,
  .conversation-reference-row > label,
  .conversation-message-label textarea,
  .local-edit-canvas-button {
    transition: none;
  }
}

/* Viewport Composer: keep every essential creation control in one quiet screen. */
.generate-mode-panel {
  display: grid;
  grid-template-rows: auto auto minmax(112px, 1fr) auto auto;
  gap: 12px;
  height: 100%;
  min-height: 0;
  padding: 14px 18px 16px;
  overflow: hidden;
}

.generate-mode-panel > * {
  min-height: 0;
}

.generate-mode-panel > .mode-screen-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 12px;
}

.generate-mode-panel > .mode-screen-intro h1 {
  font-size: 22px;
  line-height: 1.15;
  white-space: nowrap;
}

.generate-mode-panel > .mode-screen-intro p {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creation-context-button {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 54px;
  padding: 7px 2px;
}

.creation-context-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.creation-context-mark svg {
  width: 17px;
  height: 17px;
}

.creation-context-copy {
  gap: 1px;
}

.creation-context-copy strong {
  font-size: 14px;
  line-height: 1.35;
}

.generate-mode-panel > .prompt-field {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 7px;
  min-height: 0;
}

.generate-mode-panel > .prompt-field .field-label {
  min-height: 19px;
}

.generate-mode-panel > .prompt-field textarea#promptInput {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: 12px 13px;
  border-radius: 13px;
  font-size: 14px;
  line-height: 1.58;
  resize: none;
  scrollbar-width: thin;
}

.creation-toolbelt {
  gap: 8px;
}

.creation-tool-button {
  grid-template-columns: 18px minmax(0, 1fr);
  min-height: 54px;
  align-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 13px;
}

.creation-tool-button > svg {
  width: 17px;
  height: 17px;
}

.creation-tool-button > span {
  gap: 1px;
}

.creation-tool-button strong {
  font-size: 14px;
}

.creation-tool-button small {
  font-size: 14px;
}

.generate-mode-panel > #generateButton {
  position: static;
  min-height: 48px;
  margin: 0;
  border-radius: 13px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-accent) 18%, transparent);
}

.creation-tool-button:active,
.generate-mode-panel > #generateButton:active {
  transform: scale(0.98);
}

@media (min-width: 841px) {
  .generate-mode-panel {
    overflow: hidden;
    scrollbar-gutter: auto;
  }
}

@media (max-width: 840px) {
  .control-mode-stage {
    min-height: 540px;
  }

  .generate-mode-panel {
    grid-template-rows: auto auto minmax(120px, 1fr) auto auto;
    gap: 11px;
    padding: 14px 14px 16px;
  }
}

@media (max-width: 420px) {
  .generate-mode-panel > .mode-screen-intro p,
  .creation-tool-button small {
    display: none;
  }

  .creation-tool-button {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 4px;
    padding-inline: 5px;
    text-align: center;
  }
}

@media (max-height: 700px) and (min-width: 841px) {
  .task-shell-header {
    gap: 7px;
    padding-block: 8px;
  }

  .task-shell-brand {
    min-height: 24px;
  }

  .control-mode-button {
    min-height: 40px;
  }

  .generate-mode-panel {
    grid-template-rows: auto auto minmax(88px, 1fr) auto auto;
    gap: 9px;
    padding-block: 10px 12px;
  }

  .generate-mode-panel > .mode-screen-intro p,
  .creation-context-copy small,
  .creation-tool-button small {
    display: none;
  }

  .creation-context-button,
  .creation-tool-button {
    min-height: 46px;
  }

  .generate-mode-panel > #generateButton {
    min-height: 44px;
  }
}

/* Keep the original image optically untouched. Blur belongs to an isolated
   backdrop layer; it must never cascade onto the large preview itself. */
.image-modal {
  grid-template-rows: minmax(0, 1fr) auto;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate;
}

.image-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(9, 11, 17, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.image-modal > * {
  position: relative;
  z-index: 1;
}

.image-modal > .modal-close {
  position: fixed;
  z-index: 2;
}

.image-modal > #modalImage,
.modal-loading {
  grid-column: 1;
  grid-row: 1;
}

.image-modal > #modalImage {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  image-rendering: auto;
}

.modal-loading {
  align-self: center;
  justify-self: center;
  max-width: min(82vw, 360px);
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.8);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
}

.modal-caption {
  grid-column: 1;
  grid-row: 2;
}

/* Calm, recoverable request diagnostics. The report card stays in context and
   never exposes server paths, prompts, credentials, or stack traces. */
.generation-failure {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 138px;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 25%, var(--theme-border));
  border-radius: 20px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--theme-accent) 10%, transparent), transparent 45%),
    var(--theme-panel);
  box-shadow: var(--theme-shadow);
}

.generation-failure-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

.generation-failure-mark svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.generation-failure-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.generation-failure-copy > strong {
  color: var(--theme-text);
  font-size: 17px;
  font-weight: 760;
  letter-spacing: -0.02em;
}

.generation-failure-copy > p {
  max-width: 62em;
  margin: 0;
  color: var(--theme-text-muted);
  font-size: 14px;
  line-height: 1.65;
}

.generation-report-id,
.log-report-id {
  display: inline-flex;
  width: fit-content;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--theme-panel-soft) 84%, transparent);
  color: var(--theme-text-muted);
  cursor: pointer;
  font: inherit;
}

.generation-report-id code,
.log-report-id {
  color: var(--theme-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.generation-report-id svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.generation-report-id:hover,
.log-report-id:hover {
  border-color: color-mix(in srgb, var(--theme-accent) 45%, var(--theme-border));
  color: var(--theme-accent);
}

.generation-failure-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.generation-failure-actions > button {
  min-height: 44px;
  white-space: nowrap;
}

.log-report-id {
  min-height: 24px;
  margin-left: 5px;
  padding: 0 7px;
  border-radius: 7px;
  vertical-align: middle;
}

@media (max-width: 520px) {
  .generation-failure {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 18px;
  }

  .generation-failure-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .generation-failure-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final project-navigation overrides follow the viewport composer rules. */
.generate-mode-panel > .creation-context-button {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 70px;
  padding: 10px 12px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 15px;
  background: color-mix(in srgb, var(--theme-panel) 88%, var(--theme-accent-soft));
}

.generate-mode-panel > .creation-context-button:hover {
  border-color: var(--theme-accent);
  background: color-mix(in srgb, var(--theme-panel) 76%, var(--theme-accent-soft));
}

.generate-mode-panel > .creation-context-button .creation-context-action {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--theme-accent);
  color: var(--theme-accent-contrast);
  font-size: 14px;
  font-weight: 700;
}

@media (max-height: 700px) and (min-width: 841px) {
  .generate-mode-panel > .creation-context-button {
    min-height: 54px;
    padding-block: 6px;
  }
}

@media (max-width: 760px) {
  .agent-execution-dialog > footer .agent-execution-actions > button {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-background-task-status::before {
    animation: none;
  }
}

/* Developer API center */
.developer-api-button {
  color: var(--theme-muted);
}

.developer-api-button svg,
.developer-api-mark svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.developer-api-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, #111827 44%, transparent);
  backdrop-filter: blur(10px);
}

.developer-api-dialog {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(980px, 100%);
  max-height: min(860px, calc(100dvh - 48px));
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 24px;
  background: var(--theme-panel);
  color: var(--theme-text);
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24);
}

.developer-api-header {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 44px;
  gap: 16px;
  align-items: center;
  padding: 24px 28px 20px;
}

.developer-api-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  background: #111827;
  color: #fff;
}

.developer-api-mark svg {
  width: 27px;
  height: 27px;
}

.developer-api-header small,
.developer-api-docs-intro > span {
  display: block;
  margin-bottom: 5px;
  color: var(--theme-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
}

.developer-api-header h2,
.developer-api-section-heading h3,
.developer-api-docs-intro h3,
.developer-api-doc-card h4 {
  margin: 0;
  color: var(--theme-text);
}

.developer-api-header h2 {
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.2;
}

.developer-api-header p,
.developer-api-section-heading p,
.developer-api-docs-intro p,
.developer-api-doc-card header p,
.developer-api-note p,
.api-key-secret-panel p {
  margin: 5px 0 0;
  color: var(--theme-muted);
  font-size: 14px;
  line-height: 1.55;
}

.developer-api-close {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--theme-border);
  border-radius: 14px;
  background: var(--theme-panel-muted);
  color: var(--theme-muted);
}

.developer-api-close:hover {
  border-color: var(--theme-accent);
  color: var(--theme-accent);
}

.developer-api-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.developer-api-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--theme-border);
  background: var(--theme-panel-muted);
}

.developer-api-tabs button {
  position: relative;
  min-height: 58px;
  border: 0;
  background: transparent;
  color: var(--theme-muted);
  font-size: 14px;
  font-weight: 700;
}

.developer-api-tabs button + button {
  border-left: 1px solid var(--theme-border);
}

.developer-api-tabs button.active {
  background: color-mix(in srgb, var(--theme-panel) 84%, var(--theme-accent-soft));
  color: var(--theme-accent);
}

.developer-api-tabs button.active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--theme-accent);
  content: "";
}

.developer-api-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.developer-api-panel {
  display: grid;
  gap: 20px;
  padding: 26px 28px 32px;
}

.developer-api-section-heading h3,
.developer-api-docs-intro h3 {
  font-size: 20px;
}

.developer-api-create-form {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 160px auto;
  gap: 14px;
  align-items: end;
  padding: 18px;
  border: 1px solid var(--theme-border);
  border-radius: 18px;
  background: var(--theme-panel-muted);
}

.developer-api-create-form > label,
.developer-api-create-form fieldset {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.developer-api-create-form > label > span,
.developer-api-create-form legend {
  color: var(--theme-muted);
  font-size: 14px;
  font-weight: 700;
}

.developer-api-create-form input[type="text"],
.developer-api-create-form select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 12px;
  background: var(--theme-panel);
  color: var(--theme-text);
  font: inherit;
}

.developer-api-create-form fieldset {
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border: 0;
}

.developer-api-create-form fieldset label {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--theme-border);
  border-radius: 11px;
  background: var(--theme-panel);
  color: var(--theme-text);
  font-size: 14px;
  font-weight: 700;
}

.developer-api-create-form input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--theme-accent);
}

#createApiKeyButton {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--theme-accent);
  color: var(--theme-accent-contrast);
  font-weight: 700;
  white-space: nowrap;
}

#createApiKeyButton:disabled {
  opacity: .6;
}

.api-key-secret-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 42%, var(--theme-border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--theme-accent-soft) 64%, var(--theme-panel));
}

.api-key-secret-row,
.developer-api-base-url,
.developer-api-code-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.api-key-secret-row code,
.developer-api-base-url code {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--theme-text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-key-secret-row button,
.developer-api-base-url button,
.developer-api-code-heading button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 10px;
  background: var(--theme-panel);
  color: var(--theme-accent);
  font-weight: 700;
}

.api-key-list {
  display: grid;
  gap: 10px;
}

.api-key-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 20px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  background: var(--theme-panel);
}

.api-key-card.is-revoked {
  opacity: .62;
}

.api-key-card strong,
.api-key-card code,
.api-key-card small {
  display: block;
}

.api-key-card code {
  margin-top: 5px;
  color: var(--theme-muted);
  font-size: 14px;
}

.api-key-card small {
  margin-top: 7px;
  color: var(--theme-subtle, var(--theme-muted));
  font-size: 14px;
}

.api-key-card button {
  min-width: 76px;
  min-height: 40px;
  border: 1px solid color-mix(in srgb, #ef4444 30%, var(--theme-border));
  border-radius: 11px;
  background: transparent;
  color: #c24141;
  font-weight: 700;
}

.api-key-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #10b981 13%, var(--theme-panel));
  color: #087a55;
  font-size: 14px;
  font-style: normal;
}

.is-revoked .api-key-status {
  background: var(--theme-panel-muted);
  color: var(--theme-muted);
}

.developer-api-empty {
  margin: 0;
  padding: 24px;
  border: 1px dashed var(--theme-border-strong);
  border-radius: 16px;
  color: var(--theme-muted);
  text-align: center;
}

.developer-api-docs-intro {
  padding: 2px 2px 4px;
}

.developer-api-doc-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--theme-border);
  border-radius: 18px;
  background: var(--theme-panel);
}

.developer-api-doc-card > header {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
}

.developer-api-doc-card > header > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
  font-size: 14px;
  font-weight: 700;
}

.developer-api-doc-card h4 {
  font-size: 15px;
}

.developer-api-doc-card pre {
  max-width: 100%;
  margin: 0;
  overflow: auto;
  padding: 16px;
  border-radius: 14px;
  background: #111827;
  color: #e5eefc;
  font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
}

.developer-api-code-heading > code {
  color: var(--theme-accent);
  font-size: 14px;
  font-weight: 700;
}

.developer-api-base-url {
  padding: 10px 10px 10px 14px;
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  background: var(--theme-panel-muted);
}

.developer-api-endpoints {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.developer-api-endpoints div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  background: var(--theme-panel-muted);
}

.developer-api-endpoints code {
  overflow-wrap: anywhere;
  color: var(--theme-accent);
  font-size: 14px;
}

.developer-api-endpoints span {
  color: var(--theme-muted);
  font-size: 14px;
}

.developer-api-builder-form,
.developer-api-batch-editor {
  display: grid;
  gap: 16px;
}

.developer-api-builder-block,
.developer-api-builder-output {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--theme-border);
  border-radius: 18px;
  background: var(--theme-panel);
}

.developer-api-builder-global {
  border-color: color-mix(in srgb, var(--theme-accent) 34%, var(--theme-border));
  background: color-mix(in srgb, var(--theme-accent-soft) 38%, var(--theme-panel));
}

.developer-api-builder-block > header,
.developer-api-builder-output > header,
.developer-api-batch-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.developer-api-builder-block > header strong,
.developer-api-builder-block > header small,
.developer-api-builder-output > header strong,
.developer-api-builder-output > header small {
  display: block;
}

.developer-api-builder-block > header strong,
.developer-api-builder-output > header strong {
  color: var(--theme-text);
  font-size: 14px;
}

.developer-api-builder-block > header small,
.developer-api-builder-output > header small {
  margin-top: 4px;
  color: var(--theme-muted);
  font-size: 14px;
  line-height: 1.45;
}

.developer-api-builder-grid,
.developer-api-batch-main,
.developer-api-batch-overrides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.developer-api-builder-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.developer-api-builder-grid label,
.developer-api-batch-main label,
.developer-api-batch-overrides label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.developer-api-builder-grid label > span,
.developer-api-batch-main label > span,
.developer-api-batch-overrides label > span,
.developer-api-mode-group legend {
  color: var(--theme-muted);
  font-size: 14px;
  font-weight: 700;
}

.developer-api-builder-grid label > small {
  color: var(--theme-muted);
  font-size: 14px;
  line-height: 1.45;
}

.developer-api-reference-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  padding: 12px;
  border: 1px dashed var(--theme-border-strong);
  border-radius: 12px;
  background: var(--theme-panel-muted);
}

.developer-api-reference-upload input[type="file"] {
  min-width: 0;
  color: var(--theme-muted);
  font-size: 14px;
}

.developer-api-reference-upload button {
  min-height: 38px;
  padding: 0 13px;
  border: 0;
  border-radius: 10px;
  background: var(--theme-accent);
  color: var(--theme-accent-contrast);
  font-weight: 700;
}

.developer-api-reference-upload small {
  grid-column: 1 / -1;
  color: var(--theme-muted);
  font-size: 14px;
}

.developer-api-builder-grid .wide,
.developer-api-batch-main .wide,
.developer-api-batch-overrides .wide,
.developer-api-mode-group {
  grid-column: 1 / -1;
}

.developer-api-builder-form input[type="text"],
.developer-api-builder-form input[type="number"],
.developer-api-builder-form select,
.developer-api-builder-form textarea {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 11px;
  background: var(--theme-panel);
  color: var(--theme-text);
  font: inherit;
}

.developer-api-builder-form textarea {
  min-height: 76px;
  resize: vertical;
  line-height: 1.55;
}

.developer-api-builder-form input:focus,
.developer-api-builder-form select:focus,
.developer-api-builder-form textarea:focus {
  outline: 3px solid color-mix(in srgb, var(--theme-accent) 18%, transparent);
  border-color: var(--theme-accent);
}

.developer-api-mode-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.developer-api-mode-group legend {
  grid-column: 1 / -1;
  margin-bottom: 1px;
}

.developer-api-mode-group label {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  background: var(--theme-panel);
  cursor: pointer;
}

.developer-api-mode-group label:has(input:checked) {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
}

.developer-api-mode-group input,
.developer-api-override-toggle input {
  width: 17px;
  height: 17px;
  accent-color: var(--theme-accent);
}

.developer-api-mode-group strong,
.developer-api-mode-group small {
  display: block;
}

.developer-api-mode-group strong {
  color: var(--theme-text);
  font-size: 14px;
}

.developer-api-mode-group small {
  margin-top: 3px;
  color: var(--theme-muted);
  font-size: 14px;
}

.developer-api-builder-batches-heading button,
.developer-api-builder-output button,
.developer-api-batch-card > header button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 10px;
  background: var(--theme-panel-muted);
  color: var(--theme-accent);
  font-weight: 700;
}

.developer-api-builder-batches-heading button:disabled,
.developer-api-batch-card > header button:disabled {
  opacity: .45;
}

.developer-api-batch-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--theme-border);
  border-radius: 15px;
  background: var(--theme-panel-muted);
}

.developer-api-batch-card.is-overridden {
  border-color: color-mix(in srgb, var(--theme-accent) 50%, var(--theme-border));
  box-shadow: inset 3px 0 0 var(--theme-accent);
}

.developer-api-batch-card > header > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  min-width: 0;
}

.developer-api-batch-card > header > div > span {
  grid-row: 1 / 3;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
  font-size: 14px;
  font-weight: 700;
}

.developer-api-batch-card > header strong {
  overflow: hidden;
  color: var(--theme-text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.developer-api-batch-card > header small {
  color: var(--theme-muted);
  font-size: 14px;
}

.developer-api-override-toggle {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  color: var(--theme-text);
  font-size: 14px;
  font-weight: 700;
}

.developer-api-batch-overrides {
  padding-top: 14px;
  border-top: 1px solid var(--theme-border);
}

.developer-api-builder-output > header > div:last-child {
  display: flex;
  gap: 8px;
}

.developer-api-builder-output pre {
  max-height: 360px;
  margin: 0;
  overflow: auto;
  padding: 16px;
  border-radius: 14px;
  background: #111827;
  color: #e5eefc;
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
}

.developer-api-builder-output .is-warning {
  color: #c2410c;
}

.developer-api-note {
  padding: 16px 18px;
  border-left: 3px solid var(--theme-accent);
  border-radius: 4px 14px 14px 4px;
  background: var(--theme-accent-soft);
}

@media (max-width: 760px) {
  .developer-api-backdrop {
    padding: 0;
  }

  .developer-api-dialog {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .developer-api-body,
  .developer-api-panel {
    max-width: 100%;
    overflow-x: hidden;
  }

  .developer-api-header {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 12px;
    padding: 16px;
  }

  .developer-api-mark {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .developer-api-header p {
    display: none;
  }

  .developer-api-panel {
    padding: 20px 16px 28px;
  }

  .developer-api-create-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .developer-api-create-form fieldset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .developer-api-create-form fieldset label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .api-key-secret-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
  }

  .developer-api-endpoints {
    grid-template-columns: minmax(0, 1fr);
  }

  .developer-api-builder-grid,
  .developer-api-builder-grid.compact,
  .developer-api-batch-main,
  .developer-api-batch-overrides,
  .developer-api-mode-group {
    grid-template-columns: minmax(0, 1fr);
  }

  .developer-api-builder-block,
  .developer-api-builder-output {
    padding: 15px;
  }

  .developer-api-builder-output > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .developer-api-reference-upload {
    grid-template-columns: minmax(0, 1fr);
  }

  .developer-api-reference-upload small {
    grid-column: 1;
  }
}

@media (max-width: 420px) {
  .developer-api-header h2 {
    font-size: 18px;
  }

  .developer-api-header small {
    font-size: 14px;
  }

  .api-key-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .api-key-card button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .developer-api-backdrop,
  .developer-api-dialog,
  .developer-api-tabs button::after {
    scroll-behavior: auto;
    transition: none;
  }
}

/* 2026-09-01: simplified image editing and first-class video storyline workspace. */
body.storyboard-workspace-open {
  overflow: hidden;
}

.control-mode-switcher {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.control-panel {
  container-name: studio-controls;
  container-type: inline-size;
}

.control-mode-button {
  min-height: 48px;
  padding-inline: 5px;
  font-size: 14px;
}

.storyboard-mode-panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px 18px 36px;
}

.storyboard-mode-panel > * {
  min-width: 0;
  flex-shrink: 0;
}

.storyboard-story-field,
.storyboard-duration-field {
  display: grid;
  gap: 8px;
}

.storyboard-story-field {
  position: relative;
}

.storyboard-duration-builder {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--theme-accent, #4f75c8) 28%, var(--theme-border, #dbe4f0));
  border-radius: 16px;
  background: color-mix(in srgb, var(--theme-accent-soft, #eef4ff) 34%, var(--theme-panel, #fff));
}

.storyboard-duration-heading {
  display: flex;
  min-height: 46px;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.storyboard-duration-heading::-webkit-details-marker { display: none; }

.storyboard-duration-heading > span { display: grid; gap: 3px; min-width: 0; }
.storyboard-duration-heading strong { color: var(--theme-text, #172033); font-size: 14px; font-weight: 700; }
.storyboard-duration-heading small { color: var(--theme-text-muted, #6b7890); font-size: 14px; line-height: 1.45; }
.storyboard-duration-heading em {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--theme-accent, #4f75c8);
  color: var(--theme-on-accent, #fff);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}

.storyboard-duration-builder:not([open]) .storyboard-duration-heading { align-items: center; }
.storyboard-duration-builder:not([open]) .storyboard-duration-heading em::after { content: " · 展开"; }
.storyboard-duration-builder[open] .storyboard-duration-heading em::after { content: " · 收起"; }
.storyboard-duration-body { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--theme-border, #dbe4f0); }

.storyboard-duration-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.storyboard-duration-controls > label { display: grid; gap: 6px; min-width: 0; }
.storyboard-duration-controls > label > span:first-child { color: var(--theme-text-muted, #6b7890); font-size: 14px; font-weight: 700; }
.storyboard-duration-controls input,
.storyboard-duration-controls select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--theme-border, #dbe4f0);
  border-radius: 12px;
  background: var(--theme-panel, #fff);
  color: var(--theme-text, #172033);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  outline: none;
}
.storyboard-duration-controls select { padding: 0 10px; }
.storyboard-number-control { position: relative; display: block; }
.storyboard-number-control input { padding: 0 34px 0 11px; }
.storyboard-number-control b { position: absolute; top: 50%; right: 11px; color: var(--theme-text-muted, #6b7890); font-size: 14px; transform: translateY(-50%); pointer-events: none; }
.storyboard-duration-controls input:focus,
.storyboard-duration-controls select:focus { border-color: var(--theme-accent, #4f75c8); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, #4f75c8) 14%, transparent); }

.storyboard-duration-preview {
  margin: 0;
  padding: 10px 11px;
  border-radius: 11px;
  background: var(--theme-panel, #fff);
  color: var(--theme-accent, #4f75c8);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
}
.storyboard-duration-preview[data-tone="error"] { color: #b42318; }

.storyboard-manual-duration {
  border-top: 1px solid var(--theme-border, #dbe4f0);
}
.storyboard-manual-duration > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  color: var(--theme-text, #172033);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.storyboard-manual-duration > summary span { max-width: 45%; overflow: hidden; color: var(--theme-text-muted, #6b7890); text-overflow: ellipsis; white-space: nowrap; }
.storyboard-manual-duration .storyboard-duration-field { padding-top: 5px; }

.storyboard-story-field > span,
.storyboard-duration-field > span {
  color: var(--theme-text, #172033);
  font-size: 14px;
  font-weight: 700;
}

.storyboard-story-field textarea,
.storyboard-duration-field input,
.storyboard-settings-disclosure select {
  width: 100%;
  border: 1px solid var(--theme-border, #dbe4f0);
  border-radius: 14px;
  background: var(--theme-panel, #fff);
  color: var(--theme-text, #172033);
  font: inherit;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.storyboard-story-field textarea {
  height: clamp(154px, 22dvh, 210px);
  min-height: 154px;
  padding: 14px 14px 38px;
  resize: vertical;
  line-height: 1.7;
}

.storyboard-duration-field input,
.storyboard-settings-disclosure select {
  min-height: 48px;
  padding: 0 13px;
}

.storyboard-story-field textarea:focus,
.storyboard-duration-field input:focus,
.storyboard-settings-disclosure select:focus {
  border-color: var(--theme-accent, #4f75c8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, #4f75c8) 14%, transparent);
}

.storyboard-story-field small,
.storyboard-duration-field small {
  color: var(--theme-text-muted, #6b7890);
  font-size: 14px;
  line-height: 1.55;
}

.storyboard-story-field > small {
  position: absolute;
  right: 10px;
  bottom: 9px;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-panel, #fff) 88%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-border, #dbe4f0) 72%, transparent);
  text-align: right;
  pointer-events: none;
}

.storyboard-settings-disclosure {
  border: 1px solid var(--theme-border, #dbe4f0);
  border-radius: 14px;
  background: var(--theme-panel-soft, #f7f9fc);
  overflow: hidden;
}

.storyboard-settings-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 13px;
  color: var(--theme-text, #172033);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.storyboard-settings-disclosure summary span {
  max-width: 52%;
  overflow: hidden;
  color: var(--theme-text-muted, #6b7890);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-settings-disclosure > div {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.storyboard-settings-disclosure label {
  display: grid;
  gap: 5px;
}

.storyboard-settings-disclosure label > span {
  color: var(--theme-text-muted, #6b7890);
  font-size: 14px;
  font-weight: 700;
}

.storyboard-plan-status {
  margin: -10px 2px 0;
  color: var(--theme-text-muted, #6b7890);
  font-size: 14px;
  line-height: 1.55;
}

.storyboard-mode-panel > .primary-button {
  width: 100%;
  min-height: 52px;
  margin-top: 2px;
  border-radius: 14px;
}

@container studio-controls (max-width: 380px) {
  .task-shell-header {
    gap: 10px;
    padding: 13px 14px;
  }

  .control-mode-switcher {
    gap: 3px;
    padding: 3px;
  }

  .control-mode-button {
    min-height: 44px;
    padding-inline: 3px;
    font-size: 14px;
  }

  .storyboard-mode-panel {
    gap: 20px;
    padding: 20px 15px 32px;
  }

  .storyboard-mode-panel .mode-screen-intro {
    gap: 4px;
  }

  .storyboard-mode-panel .mode-screen-intro h1 {
    font-size: 23px;
  }

  .storyboard-mode-panel .mode-screen-intro p {
    line-height: 1.55;
  }

  .storyboard-story-field textarea {
    height: clamp(150px, 21dvh, 184px);
    min-height: 150px;
  }

  .storyboard-duration-builder {
    gap: 13px;
    padding: 15px;
    border-radius: 17px;
  }

  .storyboard-duration-controls {
    gap: 10px;
  }

  .storyboard-duration-preview {
    padding: 11px 12px;
  }

  .storyboard-settings-disclosure summary {
    min-height: 52px;
    padding-inline: 14px;
  }
}

@container studio-controls (max-width: 315px) {
  .control-mode-button {
    font-size: 14px;
  }

  .storyboard-duration-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .storyboard-duration-heading {
    display: grid;
  }

  .storyboard-duration-heading em {
    justify-self: start;
  }
}

@media (max-height: 700px) {
  .storyboard-mode-panel {
    gap: 18px;
    padding-block: 16px 28px;
  }

  .storyboard-story-field textarea {
    height: 142px;
    min-height: 142px;
  }
}

.storyboard-plan-status[data-tone="error"] { color: #b42318; }
.storyboard-plan-status[data-tone="success"] { color: #087a55; }

.storyboard-recent-list {
  display: grid;
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid var(--theme-border, #dbe4f0);
}

.storyboard-recent-list > strong {
  font-size: 14px;
  color: var(--theme-text-muted, #6b7890);
}

.storyboard-recent-list button {
  display: grid;
  gap: 3px;
  min-height: 52px;
  padding: 9px 11px;
  border: 1px solid var(--theme-border, #dbe4f0);
  border-radius: 11px;
  background: var(--theme-panel, #fff);
  color: var(--theme-text, #172033);
  text-align: left;
  cursor: pointer;
}

.storyboard-recent-list button span { font-size: 14px; font-weight: 700; }
.storyboard-recent-list button small { color: var(--theme-text-muted, #6b7890); font-size: 14px; }

.iteration-primary-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--theme-accent, #4f75c8) 28%, var(--theme-border, #dbe4f0));
  border-radius: 16px;
  background: color-mix(in srgb, var(--theme-accent-soft, #eef4ff) 28%, var(--theme-panel, #fff));
}

.iteration-primary-card .iteration-request-field {
  margin: 0;
}

.iteration-primary-card .iteration-request-field > span {
  font-size: 14px;
  font-weight: 700;
}

.iteration-primary-card .iteration-request-field textarea {
  min-height: 132px;
}

.iteration-primary-card .primary-button {
  min-height: 48px;
}

.iteration-primary-actions {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 8px;
  align-items: end;
}

.iteration-count-field {
  display: grid;
  gap: 5px;
  color: var(--theme-text-muted, #6b7890);
  font-size: 14px;
  font-weight: 700;
}

.iteration-count-field input {
  width: 100%;
  height: 48px;
  min-height: 48px;
  padding: 0 10px;
  border: 1px solid var(--theme-border, #dbe4f0);
  border-radius: 11px;
  background: var(--theme-panel, #fff);
  color: var(--theme-text, #172033);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.iteration-optimize-button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid var(--theme-border, #dbe4f0);
  border-radius: 12px;
  background: var(--theme-panel, #fff);
  color: var(--theme-text, #172033);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, opacity 160ms ease;
}

.iteration-optimize-button:hover:not(:disabled),
.iteration-optimize-button:focus-visible {
  border-color: var(--theme-accent, #4f75c8);
  background: var(--theme-accent-soft, #eef4ff);
}

.iteration-optimize-button:disabled {
  opacity: .44;
  cursor: not-allowed;
}

.iteration-optimize-button svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: var(--theme-accent, #4f75c8);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iteration-optimize-button > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.iteration-optimize-button strong {
  font-size: 14px;
  font-weight: 700;
}

.iteration-optimize-button small {
  color: var(--theme-text-muted, #6b7890);
  font-size: 14px;
  line-height: 1.4;
}

.iteration-prompt-review-footer {
  grid-template-columns: minmax(0, 1fr);
}

.iteration-quick-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.iteration-quick-tools button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 62px;
  padding: 9px;
  border: 1px solid var(--theme-border, #dbe4f0);
  border-radius: 13px;
  background: var(--theme-panel, #fff);
  color: var(--theme-text, #172033);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.iteration-quick-tools button:hover:not(:disabled),
.iteration-quick-tools button:focus-visible {
  border-color: var(--theme-accent, #4f75c8);
  background: var(--theme-accent-soft, #eef4ff);
}

.iteration-quick-tools button:disabled { opacity: .42; cursor: not-allowed; }
.iteration-quick-tools svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.iteration-quick-tools button > span { display: grid; gap: 2px; min-width: 0; }
.iteration-quick-tools strong { font-size: 14px; font-weight: 700; }
.iteration-quick-tools small { color: var(--theme-text-muted, #6b7890); font-size: 14px; line-height: 1.35; }

.iteration-secondary-tools {
  border: 1px solid var(--theme-border, #dbe4f0);
  border-radius: 13px;
  background: var(--theme-panel-soft, #f7f9fc);
  overflow: hidden;
}

.iteration-secondary-tools > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 12px;
  color: var(--theme-text, #172033);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.iteration-secondary-tools > summary strong { color: var(--theme-text-muted, #6b7890); font-size: 14px; }
.iteration-secondary-tools .iteration-reference-panel { border: 0; border-top: 1px solid var(--theme-border, #dbe4f0); border-radius: 0; }

.iteration-assistant-backdrop,
.iteration-review-backdrop,
.storyboard-workspace-backdrop {
  position: fixed;
  inset: 0;
  z-index: 102;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 36px);
  background: color-mix(in srgb, var(--theme-scrim, #0f172a) 72%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.iteration-assistant-dialog,
.iteration-prompt-review,
.storyboard-workspace-dialog {
  border: 1px solid var(--theme-border, #dbe4f0);
  background: var(--theme-panel, #fff);
  color: var(--theme-text, #172033);
  box-shadow: 0 30px 90px rgba(15, 23, 42, .28);
}

.iteration-assistant-dialog {
  width: min(680px, 100%);
  max-height: min(760px, 92dvh);
  overflow: auto;
  border-radius: 22px;
}

.iteration-assistant-dialog > header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--theme-border, #dbe4f0);
}

.iteration-assistant-mark,
.storyboard-workspace-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--theme-accent-soft, #eef4ff);
  color: var(--theme-accent, #4f75c8);
}

.iteration-assistant-mark svg,
.storyboard-workspace-mark svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.iteration-assistant-dialog header small,
.storyboard-workspace-header small { color: var(--theme-accent, #4f75c8); font-size: 14px; font-weight: 700; letter-spacing: .1em; }
.iteration-assistant-dialog header h2,
.storyboard-workspace-header h2 { margin: 2px 0; font-size: 20px; }
.iteration-assistant-dialog header p,
.storyboard-workspace-header p { margin: 0; color: var(--theme-text-muted, #6b7890); font-size: 14px; line-height: 1.5; }
.iteration-assistant-dialog header > button,
.storyboard-workspace-header > button,
.iteration-prompt-review-header > button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--theme-panel-soft, #f1f4f8);
  color: var(--theme-text-muted, #6b7890);
  font: 700 22px/1 inherit;
  cursor: pointer;
}

.iteration-assistant-body { display: grid; gap: 12px; padding: 18px; }
.iteration-assistant-body .image-critique-panel { padding: 16px; }

.iteration-review-backdrop .iteration-prompt-review {
  position: relative;
  display: grid;
  width: min(760px, 100%);
  max-height: min(820px, 92dvh);
  padding: 20px;
  overflow: auto;
  border-radius: 22px;
}

.iteration-review-backdrop .iteration-prompt-review-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 44px;
  align-items: center;
}

.storyboard-workspace-dialog {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(1360px, calc(100vw - 48px));
  height: min(900px, calc(100dvh - 48px));
  min-height: 560px;
  border-radius: 24px;
  overflow: hidden;
}

.storyboard-workspace-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 44px;
  gap: 13px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--theme-border, #dbe4f0);
}

.storyboard-workspace-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, auto);
  gap: 12px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--theme-border, #dbe4f0);
  background: var(--theme-panel-soft, #f7f9fc);
}

.storyboard-workspace-toolbar > div { display: flex; min-width: 0; flex-wrap: wrap; gap: 8px; align-items: center; }
.storyboard-workspace-toolbar > div:last-child { justify-content: flex-end; }
.storyboard-workspace-meta span { padding: 7px 10px; border: 1px solid var(--theme-border, #dbe4f0); border-radius: 999px; background: var(--theme-panel, #fff); color: var(--theme-text-muted, #6b7890); font-size: 14px; font-weight: 700; }
.storyboard-workspace-toolbar button,
.storyboard-workspace-footer button,
.storyboard-keyframe button,
.storyboard-segment-copy {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--theme-border, #dbe4f0);
  border-radius: 11px;
  background: var(--theme-panel, #fff);
  color: var(--theme-text, #172033);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.storyboard-workspace-toolbar .primary-button { border-color: var(--theme-accent, #4f75c8); background: var(--theme-accent, #4f75c8); color: var(--theme-on-accent, #fff); }
.storyboard-workspace-toolbar button:disabled,
.storyboard-keyframe button:disabled { opacity: .45; cursor: not-allowed; }

.storyboard-workspace-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 16px;
  overflow: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--theme-canvas, #edf2f8) 44%, var(--theme-panel, #fff));
}

.storyboard-visual-bible,
.storyboard-prompts-section,
.storyboard-timeline-section,
.storyboard-segments-section {
  min-width: 0;
  border: 1px solid var(--theme-border, #dbe4f0);
  border-radius: 17px;
  background: var(--theme-panel, #fff);
}

.storyboard-timeline-focus {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.storyboard-timeline-focus > * {
  flex-shrink: 0;
}

.storyboard-timeline-focus > header {
  align-items: center;
  padding: 18px 20px 12px;
}

.storyboard-timeline-focus > header p {
  max-width: 520px;
  line-height: 1.5;
  text-align: right;
}

.storyboard-continuity-disclosure {
  margin: 0 20px 4px;
  overflow: hidden;
  border: 1px solid var(--theme-border, #dbe4f0);
  border-radius: 12px;
  background: var(--theme-panel-soft, #f7f9fc);
}

.storyboard-continuity-disclosure > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 13px;
  color: var(--theme-text, #172033);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.storyboard-continuity-disclosure > summary span {
  color: var(--theme-text-muted, #6b7890);
  font-size: 14px;
  font-weight: 700;
}

.storyboard-continuity-disclosure > p {
  margin: 0;
  padding: 12px 13px;
  border-top: 1px solid var(--theme-border, #dbe4f0);
  color: var(--theme-text-muted, #6b7890);
  font-size: 14px;
  line-height: 1.65;
}

.storyboard-visual-bible { display: grid; grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr); gap: 20px; padding: 18px; }
.storyboard-visual-bible small,
.storyboard-timeline-section header small,
.storyboard-segments-section header small { color: var(--theme-accent, #4f75c8); font-size: 14px; font-weight: 700; letter-spacing: .09em; }
.storyboard-visual-bible h3,
.storyboard-timeline-section h3,
.storyboard-segments-section h3 { margin: 3px 0 0; font-size: 15px; }
.storyboard-visual-bible p { margin: 0; color: var(--theme-text-muted, #6b7890); font-size: 14px; line-height: 1.7; }
.storyboard-prompts-section > header,
.storyboard-timeline-section > header,
.storyboard-segments-section > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 15px 16px 10px; }
.storyboard-prompts-section > header small,
.storyboard-prompts-section > header p { color: var(--theme-text-muted, #6b7890); }
.storyboard-prompts-section > header small { color: var(--theme-accent, #4f75c8); font-size: 14px; font-weight: 700; letter-spacing: .09em; }
.storyboard-prompts-section > header h3 { margin: 3px 0 0; font-size: 15px; }
.storyboard-prompts-section > header p { max-width: 520px; margin: 0; font-size: 14px; line-height: 1.55; text-align: right; }
.storyboard-timeline-section > header p { margin: 0; color: var(--theme-text-muted, #6b7890); font-size: 14px; }

.storyboard-prompt-review-list {
  display: grid;
  gap: 10px;
  padding: 4px 16px 16px;
}

.storyboard-prompt-review {
  overflow: hidden;
  border: 1px solid var(--theme-border, #dbe4f0);
  border-radius: 13px;
  background: var(--theme-panel-soft, #f7f9fc);
}

.storyboard-prompt-review[open] {
  border-color: color-mix(in srgb, var(--theme-accent, #4f75c8) 42%, var(--theme-border, #dbe4f0));
  background: var(--theme-panel, #fff);
  box-shadow: 0 9px 28px color-mix(in srgb, var(--theme-scrim, #0f172a) 7%, transparent);
}

.storyboard-prompt-review > summary {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto 24px;
  gap: 11px;
  align-items: center;
  min-height: 66px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}

.storyboard-prompt-review > summary::-webkit-details-marker { display: none; }
.storyboard-prompt-review > summary::after {
  content: "⌄";
  display: grid;
  grid-column: 4;
  grid-row: 1;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--theme-text-muted, #6b7890);
  font-size: 14px;
  transition: transform 180ms ease;
}
.storyboard-prompt-review[open] > summary::after { transform: rotate(180deg); }

.storyboard-prompt-index {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--theme-accent-soft, #eef4ff);
  color: var(--theme-accent, #4f75c8);
  font-size: 14px;
  font-weight: 700;
}

.storyboard-prompt-summary-copy { display: grid; gap: 3px; min-width: 0; }
.storyboard-prompt-summary-copy strong { color: var(--theme-text, #172033); font-size: 14px; }
.storyboard-prompt-summary-copy small { overflow: hidden; color: var(--theme-text-muted, #6b7890); font-size: 14px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.storyboard-prompt-review > summary em {
  min-width: 62px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--theme-accent-soft, #eef4ff);
  color: var(--theme-accent, #4f75c8);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  text-align: center;
}
.storyboard-prompt-review > summary em[data-tone="dirty"] { background: #fff4e5; color: #9a5b00; }

.storyboard-prompt-review-body {
  display: grid;
  gap: 10px;
  padding: 4px 12px 12px 61px;
  border-top: 1px solid var(--theme-border, #dbe4f0);
}
.storyboard-prompt-review-body > label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 10px; }
.storyboard-prompt-review-body > label span { color: var(--theme-text, #172033); font-size: 14px; font-weight: 700; }
.storyboard-prompt-review-body > label small { color: var(--theme-text-muted, #6b7890); font-size: 14px; text-align: right; }
.storyboard-prompt-review-body textarea {
  width: 100%;
  min-height: 138px;
  padding: 12px;
  resize: vertical;
  border: 1px solid var(--theme-border, #dbe4f0);
  border-radius: 11px;
  background: var(--theme-panel, #fff);
  color: var(--theme-text, #172033);
  font: inherit;
  font-size: 14px;
  line-height: 1.65;
  outline: none;
}
.storyboard-prompt-review-body textarea:focus { border-color: var(--theme-accent, #4f75c8); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, #4f75c8) 14%, transparent); }
.storyboard-prompt-review-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.storyboard-prompt-review-actions span { color: var(--theme-text-muted, #6b7890); font-size: 14px; }
.storyboard-prompt-review-actions button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--theme-border, #dbe4f0);
  border-radius: 10px;
  background: var(--theme-panel, #fff);
  color: var(--theme-text, #172033);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.storyboard-prompt-review-actions button:hover:not(:disabled),
.storyboard-prompt-review-actions button:focus-visible { border-color: var(--theme-accent, #4f75c8); color: var(--theme-accent, #4f75c8); }
.storyboard-prompt-review-actions button:disabled { cursor: not-allowed; opacity: .52; }

.storyboard-timeline {
  display: flex;
  gap: 0;
  width: 100%;
  min-width: 0;
  padding: 18px 20px 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.storyboard-keyframe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: clamp(264px, 23vw, 320px);
  flex: 0 0 clamp(264px, 23vw, 320px);
  padding: 13px;
  border: 1px solid var(--theme-border, #dbe4f0);
  border-radius: 16px;
  background: var(--theme-panel-soft, #f7f9fc);
  scroll-snap-align: start;
}

.storyboard-keyframe > * { flex-shrink: 0; }

.storyboard-keyframe-time { display: flex; justify-content: space-between; align-items: center; color: var(--theme-text-muted, #6b7890); font-size: 14px; font-weight: 700; }
.storyboard-keyframe-time strong { color: var(--theme-accent, #4f75c8); font-size: 14px; }
.storyboard-keyframe-time > span { display: flex; align-items: center; gap: 6px; }
.storyboard-keyframe-time em {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--theme-accent-soft, #eef4ff);
  color: var(--theme-accent, #4f75c8);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}
.storyboard-keyframe-time em[data-tone="dirty"] { background: #fff4e5; color: #9a5b00; }
.storyboard-keyframe-visual { position: relative; height: 190px; overflow: hidden; border: 1px solid var(--theme-border, #dbe4f0); border-radius: 14px; background: linear-gradient(145deg, var(--theme-panel-soft, #f1f4f8), color-mix(in srgb, var(--theme-accent-soft, #eef4ff) 55%, var(--theme-panel, #fff))); }
.storyboard-keyframe-visual img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.storyboard-keyframe-placeholder { display: grid; place-items: center; height: 100%; padding: 20px; color: var(--theme-text-muted, #6b7890); text-align: center; }
.storyboard-keyframe-placeholder svg { width: 34px; height: 34px; margin-bottom: 8px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.storyboard-keyframe-placeholder span { display: block; font-size: 14px; line-height: 1.5; }
.storyboard-keyframe-description {
  display: -webkit-box;
  min-height: 32px;
  margin: 0;
  overflow: hidden;
  color: var(--theme-text-muted, #6b7890);
  font-size: 14px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.storyboard-keyframe button { width: 100%; }
.storyboard-node-details {
  overflow: hidden;
  border-top: 1px solid var(--theme-border, #dbe4f0);
}
.storyboard-node-details > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--theme-text, #172033);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.storyboard-node-details > summary::-webkit-details-marker { display: none; }
.storyboard-node-details > summary::after { content: "⌄"; color: var(--theme-text-muted, #6b7890); font-size: 14px; transition: transform 180ms ease; }
.storyboard-node-details[open] > summary::after { transform: rotate(180deg); }
.storyboard-node-details > summary small { margin-left: auto; color: var(--theme-text-muted, #6b7890); font-size: 14px; font-weight: 700; }
.storyboard-node-details-body { display: grid; gap: 9px; padding: 2px 0 2px; }
.storyboard-node-details-body > label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.storyboard-node-details-body > label span { font-size: 14px; font-weight: 700; }
.storyboard-node-details-body > label small { color: var(--theme-text-muted, #6b7890); font-size: 14px; }
.storyboard-node-details-body > textarea {
  width: 100%;
  min-height: 132px;
  padding: 10px;
  resize: vertical;
  border: 1px solid var(--theme-border, #dbe4f0);
  border-radius: 10px;
  background: var(--theme-panel, #fff);
  color: var(--theme-text, #172033);
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
  outline: none;
}
.storyboard-node-details-body > textarea:focus { border-color: var(--theme-accent, #4f75c8); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent, #4f75c8) 14%, transparent); }
.storyboard-node-segment {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--theme-border, #dbe4f0);
}
.storyboard-node-segment > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.storyboard-node-segment > div > span { display: grid; gap: 2px; min-width: 0; }
.storyboard-node-segment strong { font-size: 14px; }
.storyboard-node-segment small { color: var(--theme-text-muted, #6b7890); font-size: 14px; }
.storyboard-node-segment p { max-height: 130px; margin: 0; overflow: auto; color: var(--theme-text-muted, #6b7890); font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.storyboard-node-segment button { width: auto; min-height: 38px; padding-inline: 10px; font-size: 14px; }
.storyboard-keyframe + .storyboard-timeline-link { display: grid; place-items: center; width: 84px; flex: 0 0 84px; color: var(--theme-accent, #4f75c8); }
.storyboard-timeline-link span { display: block; width: 100%; height: 2px; background: currentColor; }
.storyboard-timeline-link small { position: absolute; margin-top: -24px; color: var(--theme-text-muted, #6b7890); font-size: 14px; white-space: nowrap; }

.storyboard-segments { display: grid; gap: 10px; padding: 0 16px 16px; }
.storyboard-segment { display: grid; grid-template-columns: 94px minmax(0, .7fr) minmax(0, 1.3fr) auto; gap: 12px; align-items: start; padding: 13px; border: 1px solid var(--theme-border, #dbe4f0); border-radius: 13px; background: var(--theme-panel-soft, #f7f9fc); }
.storyboard-segment-time { display: grid; gap: 4px; color: var(--theme-accent, #4f75c8); font-size: 14px; font-weight: 700; }
.storyboard-segment-time small { color: var(--theme-text-muted, #6b7890); font-size: 14px; }
.storyboard-segment-copy-block { display: grid; gap: 5px; min-width: 0; }
.storyboard-segment-copy-block strong { font-size: 14px; }
.storyboard-segment-copy-block p { max-height: 100px; overflow: auto; margin: 0; color: var(--theme-text-muted, #6b7890); font-size: 14px; line-height: 1.6; white-space: pre-wrap; }

.storyboard-workspace-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 64px; padding: 10px 20px; border-top: 1px solid var(--theme-border, #dbe4f0); background: var(--theme-panel, #fff); }
.storyboard-workspace-footer span { min-width: 0; color: var(--theme-text-muted, #6b7890); font-size: 14px; line-height: 1.5; }
.storyboard-workspace-footer button { min-width: 76px; flex-shrink: 0; white-space: nowrap; }

@media (max-width: 760px) {
  .control-mode-button { font-size: 14px; }
  .iteration-quick-tools { grid-template-columns: minmax(0, 1fr); }
  .iteration-assistant-backdrop,
  .iteration-review-backdrop,
  .storyboard-workspace-backdrop { padding: 0; }
  .iteration-assistant-dialog,
  .iteration-review-backdrop .iteration-prompt-review,
  .storyboard-workspace-dialog { width: 100vw; height: 100dvh; max-height: none; min-height: 0; border: 0; border-radius: 0; }
  .iteration-assistant-dialog > header,
  .storyboard-workspace-header { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 14px 12px; }
  .storyboard-workspace-mark { width: 44px; height: 44px; border-radius: 12px; }
  .storyboard-workspace-header small { overflow: hidden; font-size: 14px; letter-spacing: .07em; text-overflow: ellipsis; white-space: nowrap; }
  .storyboard-workspace-header h2 { font-size: 18px; }
  .storyboard-workspace-toolbar { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px 14px; }
  .storyboard-workspace-toolbar > div:last-child { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); width: 100%; gap: 8px; }
  .storyboard-workspace-toolbar button { min-width: 0; width: 100%; padding-inline: 10px; }
  .storyboard-workspace-body { gap: 12px; padding: 12px; }
  .storyboard-timeline-focus > header { align-items: flex-start; flex-direction: column; gap: 6px; padding: 14px 14px 10px; }
  .storyboard-timeline-focus > header p { max-width: none; text-align: left; }
  .storyboard-continuity-disclosure { margin: 0 14px 4px; }
  .storyboard-visual-bible { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; }
  .storyboard-prompts-section > header { align-items: flex-start; flex-direction: column; }
  .storyboard-prompts-section > header p { max-width: none; text-align: left; }
  .storyboard-prompts-section > header,
  .storyboard-timeline-section > header,
  .storyboard-segments-section > header { padding: 14px 14px 9px; }
  .storyboard-prompt-review-list { padding: 3px 14px 14px; }
  .storyboard-prompt-review-body { padding-left: 12px; }
  .storyboard-timeline { display: grid; gap: 10px; padding: 8px 14px 14px; overflow-x: visible; scroll-snap-type: none; }
  .storyboard-keyframe { width: 100%; padding: 12px; border: 1px solid var(--theme-border, #dbe4f0); border-radius: 14px; background: var(--theme-panel-soft, #f7f9fc); scroll-snap-align: none; }
  .storyboard-keyframe-visual { height: 220px; }
  .storyboard-keyframe + .storyboard-timeline-link { display: flex; width: 100%; min-height: 34px; flex: none; gap: 10px; align-items: center; padding: 0 6px; }
  .storyboard-timeline-link small { position: static; order: 1; margin: 0; font-size: 14px; }
  .storyboard-timeline-link span { order: 2; min-width: 24px; flex: 1; height: 1px; }
  .storyboard-segment { grid-template-columns: minmax(0, 1fr); }
  .storyboard-segment-copy { width: 100%; }
  .storyboard-workspace-footer { gap: 10px; min-height: 64px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); }
}

@media (max-width: 390px) {
  .control-mode-switcher { gap: 2px; padding: 3px; }
  .control-mode-button { min-height: 46px; padding-inline: 2px; font-size: 14px; letter-spacing: -.02em; }
  .storyboard-workspace-toolbar > div:last-child { grid-template-columns: 1fr; }
  .storyboard-workspace-header p { display: none; }
  .storyboard-duration-controls { grid-template-columns: minmax(0, 1fr); }
  .storyboard-prompt-review > summary { grid-template-columns: 34px minmax(0, 1fr) 24px; }
  .storyboard-prompt-review > summary em { grid-column: 2; margin: 3px 0 0; justify-self: start; }
  .storyboard-prompt-review > summary::after { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
  .storyboard-prompt-review-body > label { align-items: flex-start; flex-direction: column; gap: 4px; }
  .storyboard-prompt-review-body > label small { text-align: left; }
  .storyboard-keyframe { padding: 10px; }
  .storyboard-keyframe-visual { height: 180px; }
  .storyboard-workspace-footer span { font-size: 14px; }
}

@media (max-width: 340px) {
  .storyboard-workspace-toolbar { padding-inline: 10px; }
  .storyboard-workspace-body { padding: 10px; }
  .storyboard-continuity-disclosure { margin-inline: 12px; }
  .storyboard-prompts-section > header,
  .storyboard-timeline-section > header,
  .storyboard-segments-section > header { padding-inline: 12px; }
  .storyboard-prompt-review-list,
  .storyboard-timeline { padding-inline: 12px; }
  .storyboard-prompt-review > summary { gap: 8px; padding-inline: 10px; }
  .storyboard-workspace-footer { padding-inline: 10px; }
}

/* 2026-09 clarity pass: task-first entry, progressive disclosure, and compact mobile flows. */
.creation-settings-tabs,
.creation-settings-tabs[hidden] {
  display: none !important;
}

.creation-task-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.creation-task-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 11px;
  min-width: 0;
  min-height: 92px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--theme-border, #dbe4f0);
  border-radius: 15px;
  background: var(--theme-panel, #fff);
  color: var(--theme-text, #172033);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.creation-task-card:hover,
.creation-task-card:focus-visible {
  border-color: var(--theme-accent, #4f75c8);
  background: color-mix(in srgb, var(--theme-accent-soft, #eef4ff) 46%, var(--theme-panel, #fff));
  outline: none;
}

.creation-task-card.is-primary {
  border-color: var(--theme-accent, #4f75c8);
  background: color-mix(in srgb, var(--theme-accent-soft, #eef4ff) 62%, var(--theme-panel, #fff));
}

.creation-task-card-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: var(--theme-accent-soft, #eef4ff);
  color: var(--theme-accent, #4f75c8);
}

.creation-task-card-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.creation-task-card strong { font-size: 14px; font-weight: 700; }
.creation-task-card small { color: var(--theme-text-muted, #6b7890); font-size: 14px; line-height: 1.45; }
.creation-task-card > b { color: var(--theme-accent, #4f75c8); font-size: 15px; }

.plan-mode-panel .conversation-studio-trigger {
  min-height: 66px;
  padding: 10px 12px;
  border-radius: 13px;
  box-shadow: none;
}

.plan-mode-panel .conversation-studio-trigger-copy > span { display: none; }
.plan-mode-panel .conversation-studio-trigger-copy strong { font-size: 14px; }
.plan-mode-panel .conversation-studio-trigger-icon { width: 38px; height: 38px; border-radius: 11px; }

details.agent-plan-task {
  display: block;
  padding: 0;
  overflow: hidden;
}

.agent-plan-task-summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  gap: 10px;
  min-height: 62px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.agent-plan-task-summary::-webkit-details-marker { display: none; }
.agent-plan-task-summary::after { content: "⌄"; color: #667085; font-size: 14px; transition: transform 160ms ease; }
.agent-plan-task[open] > .agent-plan-task-summary::after { transform: rotate(180deg); }
.agent-plan-task-summary > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.agent-plan-task-summary > span:nth-child(2) strong { overflow: hidden; color: #101828; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.agent-plan-task-summary > span:nth-child(2) small { overflow: hidden; color: #667085; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.agent-plan-task-summary > em { color: #667085; font-size: 14px; font-style: normal; font-weight: 700; white-space: nowrap; }
.agent-plan-task > .agent-plan-task-content { padding: 0 12px 12px 56px; border-top: 1px solid #eef1f5; }
.agent-plan-task-guidance { margin: 10px 0 0; color: #667085; font-size: 14px; }

.iteration-prompt-compare {
  display: grid;
  grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
  gap: 12px;
  margin-top: 14px;
}

.iteration-original-request {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--theme-border, #dbe4f0);
  border-radius: 14px;
  background: var(--theme-panel-soft, #f7f9fc);
}
.iteration-original-request > span,
.iteration-final-prompt-field > span { color: var(--theme-text, #172033); font-size: 14px; font-weight: 700; }
.iteration-original-request p { max-height: 260px; margin: 0; overflow: auto; color: var(--theme-text, #172033); font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.iteration-original-request small { color: var(--theme-text-muted, #6b7890); font-size: 14px; line-height: 1.5; }
.iteration-prompt-compare .iteration-final-prompt-field { margin: 0; }
.iteration-prompt-compare .iteration-final-prompt-field textarea { min-height: 220px; }

.batch-drawer-recipe-content { max-height: min(30vh, 260px); }
.toast { z-index: 2147483647 !important; }

.storyboard-timeline {
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
  overscroll-behavior-x: contain;
}
.storyboard-timeline::after { content: ""; flex: 0 0 16px; }
.storyboard-mode-panel > .primary-button {
  position: sticky;
  bottom: 0;
  z-index: 3;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
}

@container studio-controls (max-width: 430px) {
  .creation-task-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .creation-task-card { min-height: 72px; padding: 10px 12px; }
  .plan-mode-panel { gap: 14px; }
  .plan-mode-panel .mode-screen-intro p { font-size: 14px; }
  .plan-mode-note { margin-top: 2px; }
  .control-mode-stage > .iteration-panel .selected-preview { max-height: 170px; }
  .iteration-primary-card .iteration-request-field textarea { min-height: 104px; }
  .iteration-quick-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iteration-quick-tools button { grid-template-columns: 26px minmax(0, 1fr); min-height: 54px; }
  .iteration-quick-tools small { display: none; }
  .storyboard-story-field textarea { height: 136px; min-height: 136px; }
  .storyboard-duration-builder { padding: 13px; }
}

@media (max-width: 760px) {
  .iteration-prompt-compare { grid-template-columns: minmax(0, 1fr); }
  .iteration-original-request p { max-height: 110px; }
  .iteration-prompt-compare .iteration-final-prompt-field textarea { min-height: 180px; }
  .agent-plan-task-summary { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .agent-plan-task-summary > em { grid-column: 2; }
  .agent-plan-task-summary::after { grid-column: 3; grid-row: 1 / span 2; }
  .agent-plan-task > .agent-plan-task-content { padding-left: 12px; }
  .context-policy-summary-list {
    display: flex;
    padding-bottom: 5px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .context-policy-summary-item,
  .context-policy-summary-item[data-policy-point="custom"] {
    width: min(78vw, 250px);
    min-width: min(78vw, 250px);
    min-height: 86px;
    scroll-snap-align: start;
  }
  .storyboard-timeline {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .storyboard-keyframe {
    width: min(84vw, 330px);
    flex: 0 0 min(84vw, 330px);
    scroll-snap-align: center;
  }
  .storyboard-keyframe + .storyboard-timeline-link { width: 58px; flex: 0 0 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .agent-plan-task-summary::after { transition: none; }
}

@media (max-height: 640px) {
  .storyboard-workspace-backdrop { padding: 8px; }
  .storyboard-workspace-dialog {
    width: min(1360px, calc(100vw - 16px));
    height: calc(100dvh - 16px);
    min-height: 0;
    border-radius: 18px;
  }
  .storyboard-workspace-header { padding: 9px 14px; }
  .storyboard-workspace-mark { width: 42px; height: 42px; border-radius: 11px; }
  .storyboard-workspace-header p { display: none; }
  .storyboard-workspace-toolbar { padding: 8px 14px; }
  .storyboard-workspace-toolbar button { min-height: 40px; }
  .storyboard-workspace-body { gap: 12px; padding: 12px; }
  .storyboard-workspace-footer { min-height: 52px; padding: 6px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .storyboard-story-field textarea,
  .storyboard-duration-field input,
  .storyboard-prompt-review > summary::after,
  .iteration-quick-tools button,
  .iteration-assistant-backdrop,
  .iteration-review-backdrop,
  .storyboard-workspace-backdrop { transition: none; scroll-behavior: auto; }
}

/* Account-level context policy: one compact gear and one focused settings dialog. */
.context-policy-button {
  display: inline-flex;
  min-width: 86px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid var(--theme-border);
  border-radius: 9px;
  background: var(--theme-panel);
  color: var(--theme-text-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.context-policy-button:hover,
.context-policy-button:focus-visible,
.context-policy-button.is-customized {
  border-color: var(--theme-border-strong);
  background: var(--theme-panel-raised);
  color: var(--theme-text);
}

.context-policy-button.is-customized {
  box-shadow: inset 0 -2px 0 var(--theme-accent);
}

.context-policy-button svg,
.context-policy-mark svg,
.context-policy-close svg,
.context-policy-assistant-icon svg,
.context-policy-assistant button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

body.context-policy-open {
  overflow: hidden;
}

.context-policy-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483300;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--theme-text) 28%, transparent);
  backdrop-filter: blur(12px);
}

.context-policy-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(820px, calc(100vw - 32px));
  max-height: min(900px, calc(100dvh - 48px));
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 24px;
  background: var(--theme-panel-raised);
  color: var(--theme-text);
  box-shadow: 0 30px 90px color-mix(in srgb, var(--theme-text) 24%, transparent);
}

.context-policy-header {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 42px;
  gap: 14px;
  align-items: center;
  padding: 20px 22px;
  border-bottom: 1px solid var(--theme-border);
}

.context-policy-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

.context-policy-mark svg {
  width: 23px;
  height: 23px;
}

.context-policy-header > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.context-policy-header small {
  color: var(--theme-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
}

.context-policy-header h2,
.context-policy-header p,
.context-policy-summary-item p,
.context-policy-status {
  margin: 0;
}

.context-policy-header h2 {
  font-size: 22px;
  font-weight: 720;
  letter-spacing: -.035em;
}

.context-policy-header p {
  color: var(--theme-text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.context-policy-close {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: var(--theme-panel-soft);
  color: var(--theme-text-muted);
  cursor: pointer;
}

.context-policy-close:hover {
  background: var(--theme-accent-soft);
  color: var(--theme-text);
}

.context-policy-close svg {
  width: 19px;
  height: 19px;
}

.context-policy-body {
  display: grid;
  gap: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 22px 24px;
}

.context-policy-summary,
.context-policy-editor,
.context-policy-assistant {
  display: grid;
  gap: 12px;
}

.context-policy-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.context-policy-section-heading > div {
  display: grid;
  gap: 3px;
}

.context-policy-section-heading strong,
.context-policy-assistant-copy strong {
  color: var(--theme-text);
  font-size: 14px;
  font-weight: 720;
}

.context-policy-section-heading span,
.context-policy-assistant-copy span,
.context-policy-status {
  color: var(--theme-text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.context-policy-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--theme-panel-soft);
  color: var(--theme-text-muted) !important;
  font-weight: 700;
}

.context-policy-badge.customized {
  background: var(--theme-accent-soft);
  color: var(--theme-accent) !important;
}

.context-policy-summary-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.context-policy-summary-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  min-height: 92px;
  align-content: start;
  padding: 13px;
  border: 1px solid var(--theme-border);
  border-radius: 15px;
  background: color-mix(in srgb, var(--theme-panel-soft) 58%, var(--theme-panel));
}

.context-policy-summary-item > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 10px;
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
  font-size: 14px;
  font-weight: 700;
}

.context-policy-summary-item > div {
  display: grid;
  gap: 4px;
}

.context-policy-summary-item strong {
  font-size: 14px;
  font-weight: 720;
}

.context-policy-summary-item p {
  color: var(--theme-text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.context-policy-summary-item[data-policy-point="custom"] {
  grid-column: 1 / -1;
  min-height: 74px;
  border-color: color-mix(in srgb, var(--theme-accent) 28%, var(--theme-border));
  background: color-mix(in srgb, var(--theme-accent-soft) 55%, var(--theme-panel));
}

.context-policy-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.context-policy-scopes span {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--theme-panel-soft);
  color: var(--theme-text-muted);
  font-size: 14px;
  font-weight: 700;
}

.context-policy-editor,
.context-policy-assistant {
  padding-top: 18px;
  border-top: 1px solid var(--theme-border);
}

.context-policy-editor textarea,
.context-policy-assistant textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--theme-border);
  border-radius: 15px;
  background: var(--theme-panel);
  color: var(--theme-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.7;
}

.context-policy-editor textarea {
  min-height: 132px;
  padding: 14px 15px;
}

.context-policy-assistant textarea {
  min-height: 86px;
  padding: 12px 14px;
}

.context-policy-editor textarea:focus,
.context-policy-assistant textarea:focus {
  border-color: var(--theme-accent);
  outline: 3px solid color-mix(in srgb, var(--theme-accent) 13%, transparent);
}

.context-policy-assistant {
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: end;
}

.context-policy-assistant-copy {
  display: flex;
  grid-column: 1 / -1;
  gap: 10px;
  align-items: center;
}

.context-policy-assistant-copy > div {
  display: grid;
  gap: 2px;
}

.context-policy-assistant-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 11px;
  background: var(--theme-accent-soft);
  color: var(--theme-accent) !important;
}

.context-policy-assistant-icon svg {
  width: 18px;
  height: 18px;
}

.context-policy-assistant button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 34%, var(--theme-border));
  border-radius: 13px;
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.context-policy-assistant button:hover {
  border-color: var(--theme-accent);
  background: color-mix(in srgb, var(--theme-accent-soft) 72%, var(--theme-panel));
}

.context-policy-assistant button svg {
  width: 16px;
  height: 16px;
}

.context-policy-status {
  min-height: 18px;
}

.context-policy-status.success {
  color: var(--theme-success, #16845b);
}

.context-policy-status.error {
  color: var(--theme-danger, #c24b61);
}

.context-policy-footer {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 22px;
  border-top: 1px solid var(--theme-border);
  background: color-mix(in srgb, var(--theme-panel) 88%, transparent);
}

.context-policy-footer > div {
  display: flex;
  gap: 9px;
}

.context-policy-footer button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  background: var(--theme-panel);
  color: var(--theme-text-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 720;
  cursor: pointer;
}

.context-policy-footer button:hover {
  border-color: var(--theme-border-strong);
  color: var(--theme-text);
}

.context-policy-footer button.primary {
  border-color: var(--theme-accent);
  background: var(--theme-accent);
  color: var(--theme-accent-contrast, #fff);
}

.context-policy-footer button:disabled,
.context-policy-assistant button:disabled {
  cursor: wait;
  opacity: .62;
}

@media (max-width: 720px) {
  .context-policy-backdrop { padding: 8px; }
  .context-policy-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 19px;
  }
  .context-policy-header {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 10px;
    padding: 14px;
  }
  .context-policy-mark { width: 40px; height: 40px; border-radius: 12px; }
  .context-policy-header p { display: none; }
  .context-policy-body { gap: 16px; padding: 16px 14px 20px; }
  .context-policy-summary-list { grid-template-columns: 1fr; }
  .context-policy-summary-item[data-policy-point="custom"] { grid-column: auto; }
  .context-policy-assistant { grid-template-columns: 1fr; }
  .context-policy-assistant button { width: 100%; }
  .context-policy-footer {
    align-items: stretch;
    padding: 10px 14px;
  }
  .context-policy-footer > div { flex: 1; }
  .context-policy-footer > div button { flex: 1; }
}

@media (max-width: 430px) {
  .context-policy-button {
    width: 34px;
    min-width: 34px;
    padding: 0;
  }
  .context-policy-button span { display: none; }
  .context-policy-section-heading { gap: 8px; }
  .context-policy-section-heading > div > span { display: none; }
  .context-policy-footer { flex-direction: column-reverse; }
  .context-policy-reset { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .context-policy-button,
  .context-policy-close { transition: none; }
}

/* 2026-09-01: export is a contextual image action, not a persistent editor setting. */
.control-mode-stage > .iteration-panel .selected-preview {
  position: relative;
}

.selected-image-export-trigger,
.modal-export-trigger {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--theme-border-strong) 72%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--theme-panel) 93%, transparent);
  color: var(--theme-text);
  font: inherit;
  font-size: 14px;
  font-weight: 760;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.selected-image-export-trigger {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  min-width: 82px;
  padding: 0 13px;
}

.selected-image-export-trigger svg,
.modal-export-trigger svg,
.image-export-dialog-header button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.selected-image-export-trigger:hover,
.selected-image-export-trigger:focus-visible {
  border-color: var(--theme-accent);
  background: var(--theme-panel);
  color: var(--theme-accent);
}

.modal-export-trigger {
  position: fixed !important;
  top: 22px;
  right: 78px;
  z-index: 3 !important;
  min-width: 82px;
  padding: 0 14px;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(15, 23, 42, 0.68);
  color: #fff;
}

.modal-export-trigger:hover,
.modal-export-trigger:focus-visible {
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.2);
}

.modal-export-trigger:focus-visible,
.selected-image-export-trigger:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--theme-accent) 36%, transparent);
  outline-offset: 2px;
}

body.image-export-open {
  overflow: hidden;
}

.image-export-dialog-backdrop {
  position: fixed;
  inset: 0;
  /* The image preview is at 120; its export dialog must stay above it. */
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(9, 11, 17, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.image-export-dialog-backdrop[hidden],
.image-export-dialog[hidden] {
  display: none !important;
}

.image-export-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: min(720px, calc(100dvh - 32px));
  overflow-y: auto;
  border: 1px solid var(--theme-border);
  border-radius: 22px;
  background: var(--theme-panel);
  color: var(--theme-text);
  box-shadow: 0 28px 90px rgba(15, 23, 42, 0.32);
}

.image-export-dialog-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: start;
  gap: 16px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--theme-border);
}

.image-export-dialog-header > div {
  display: grid;
  gap: 5px;
}

.image-export-dialog-header small {
  color: var(--theme-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.image-export-dialog-header h2,
.image-export-dialog-header p {
  margin: 0;
}

.image-export-dialog-header h2 {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.image-export-dialog-header p {
  color: var(--theme-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.image-export-dialog-header button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  background: var(--theme-panel-raised);
  color: var(--theme-text-muted);
  cursor: pointer;
}

.image-export-dialog-header button:hover,
.image-export-dialog-header button:focus-visible {
  border-color: var(--theme-border-strong);
  color: var(--theme-text);
}

.image-export-dialog-selection {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin: 18px 22px 0;
  padding: 10px;
  border: 1px solid var(--theme-border);
  border-radius: 14px;
  background: var(--theme-panel-raised);
}

.image-export-dialog-selection img {
  display: block;
  width: 64px;
  height: 64px;
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  background: var(--theme-panel);
  object-fit: contain;
}

.image-export-dialog-selection > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.image-export-dialog-selection strong,
.image-export-dialog-selection span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-export-dialog-selection strong {
  font-size: 14px;
}

.image-export-dialog-selection span {
  color: var(--theme-text-muted);
  font-size: 14px;
}

#imageExportDialogContent {
  padding: 16px 22px 22px;
}

#imageExportDialogContent .image-export-panel {
  display: grid;
  grid-column: auto;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#imageExportDialogContent .image-export-transparency {
  min-height: 58px;
  padding: 10px 12px;
  border-color: var(--theme-border);
  border-radius: 12px;
  background: var(--theme-panel-raised);
}

#imageExportDialogContent .image-export-transparency strong {
  color: var(--theme-text);
  font-size: 14px;
}

#imageExportDialogContent .image-export-transparency small,
#imageExportDialogContent .image-export-note {
  color: var(--theme-text-muted);
  font-size: 14px;
}

#imageExportDialogContent .image-export-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

#imageExportDialogContent .image-export-button {
  min-height: 50px;
  border-color: var(--theme-border);
  border-radius: 12px;
  background: var(--theme-panel-raised);
  color: var(--theme-text);
  font-size: 14px;
}

#imageExportDialogContent .image-export-button:hover,
#imageExportDialogContent .image-export-button:focus-visible {
  border-color: var(--theme-accent);
  background: color-mix(in srgb, var(--theme-accent) 8%, var(--theme-panel));
  color: var(--theme-accent);
}

#imageExportDialogContent .image-export-note {
  margin: -2px 0 0;
}

@media (max-width: 520px) {
  .image-export-dialog-backdrop {
    align-items: end;
    padding: 8px;
  }

  .image-export-dialog {
    width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: 20px;
  }

  .image-export-dialog-header {
    padding: 18px 16px 14px;
  }

  .image-export-dialog-selection {
    margin: 14px 16px 0;
  }

  #imageExportDialogContent {
    padding: 14px 16px 18px;
  }

  .modal-export-trigger {
    top: calc(10px + env(safe-area-inset-top));
    right: 62px;
    min-width: 64px;
    padding: 0 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .selected-image-export-trigger,
  .modal-export-trigger {
    transition: none;
  }
}

@media (max-width: 760px) {
  .context-policy-summary-list {
    display: flex;
    padding-bottom: 5px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .context-policy-summary-item,
  .context-policy-summary-item[data-policy-point="custom"] {
    width: min(78vw, 250px);
    min-width: min(78vw, 250px);
    min-height: 86px;
    grid-column: auto;
    scroll-snap-align: start;
  }
}

@container studio-controls (max-width: 430px) {
  .control-mode-stage > .iteration-panel .selected-preview {
    max-height: 170px;
  }
}

/* 2026-09-01: five-person usability pass. */
.iteration-base-upload {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.empty-edit-picker {
  display: grid;
  max-width: 280px;
  gap: 7px;
  margin: auto;
  place-items: center;
}

.empty-edit-picker strong {
  color: var(--theme-text, #172033);
  font-size: 14px;
}

.empty-edit-picker span {
  color: var(--theme-text-muted, #6b7890);
  font-size: 14px;
  line-height: 1.55;
}

.empty-edit-picker label {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
  padding: 0 16px;
  border: 1px solid var(--theme-accent, #4f75c8);
  border-radius: 12px;
  background: var(--theme-accent, #4f75c8);
  color: var(--theme-on-accent, #fff);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.empty-edit-picker label:hover,
.empty-edit-picker label:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent, #4f75c8) 16%, transparent);
  outline: none;
}

.storyboard-create-project-button {
  display: inline-flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  border: 1px solid var(--theme-accent, #4f75c8);
  border-radius: 14px;
  background: var(--theme-accent, #4f75c8);
  color: var(--theme-on-accent, #fff);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--theme-accent, #4f75c8) 18%, transparent);
}

.storyboard-create-project-button:hover,
.storyboard-create-project-button:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent, #4f75c8) 16%, transparent),
    0 12px 28px color-mix(in srgb, var(--theme-accent, #4f75c8) 18%, transparent);
  outline: none;
}

.smart-project-form.has-no-projects .smart-project-mode-chooser > header,
.smart-project-form.has-no-projects .smart-project-mode-bar,
.smart-project-form.has-no-projects .smart-project-mode-help {
  display: none;
}

.smart-project-form.has-no-projects .smart-project-mode-chooser {
  width: min(100%, 620px);
  gap: 12px;
  padding-block: 12px;
}

@media (min-width: 761px) {
  .smart-project-form.smart-project-dialog.choosing-target.has-no-projects {
    height: min(510px, calc(100vh - 48px));
  }
}

@media (max-width: 760px) {
  .rail-avatar,
  .context-policy-button,
  .theme-menu-button,
  .workspace-tab {
    min-height: 44px !important;
  }

  .context-policy-button {
    width: 44px;
    min-width: 44px;
  }

  .smart-project-form.has-no-projects .smart-project-target-panel {
    padding: 12px;
  }

  .smart-project-form.has-no-projects .smart-project-target-fields textarea {
    min-height: 62px;
  }

  .smart-project-form.smart-project-dialog.choosing-target.has-no-projects {
    height: auto;
    max-height: calc(100dvh - 24px);
  }

  .search-box,
  .search-box input,
  .stage-filter-toggle {
    min-height: 44px !important;
  }
}

.sidebar-stage-selector {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(118px, auto);
  align-items: center;
  gap: 8px;
  margin: 8px 12px 0;
}

.sidebar-stage-selector .stage-quick-project {
  overflow: hidden;
  min-width: 0;
  color: var(--theme-text-muted);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-stage-selector select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 32px 0 10px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 10px;
  background: var(--theme-panel);
  color: var(--theme-text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.sidebar-stage-selector select:focus-visible {
  border-color: var(--theme-accent);
  outline: 3px solid color-mix(in srgb, var(--theme-accent) 18%, transparent);
  outline-offset: 1px;
}

.sidebar-stage-selector select:disabled {
  cursor: wait;
  opacity: 0.66;
}

@media (max-width: 760px) {
  .sidebar-stage-selector {
    grid-template-columns: minmax(0, 0.85fr) minmax(132px, 1.15fr);
  }

  .activity-log-actions button,
  .saved-library-actions button,
  [data-generation-failure-action] {
    min-height: 44px !important;
  }
}