/* /selection-controls.css */
/* Selection inputs have their own geometry; text-field padding and minimum
 * heights must never stretch them. This first layer takes precedence over
 * legacy !important form rules without changing hidden card/switch inputs. */
@layer compactSelection {
  html:root body input:is([type="checkbox"], [type="radio"]):not(:where(
    .sr-only, .visually-hidden, .hidden, [hidden], [role="switch"],
    .settings-segmented input, .project-copy-lock-control input,
    .social-platform-choice input, .design-smart-operations input,
    .new-project-source-choice input, .layout-scope-control input,
    .ai-copy-policy input, .style-source-page input
  )) {
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    display: inline-grid !important;
    place-content: center !important;
    flex: 0 0 15px !important;
    width: 15px !important;
    min-width: 15px !important;
    max-width: 15px !important;
    height: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--neutral-muted, #777777) !important;
    border-radius: 4px !important;
    background: var(--neutral-panel, #ffffff) !important;
    color: var(--neutral-accent-text, #ffffff) !important;
    accent-color: var(--neutral-accent, #a26820) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    vertical-align: middle !important;
    align-self: center !important;
    cursor: pointer !important;
    transition: border-color 120ms ease, background-color 120ms ease !important;
  }

  html:root body input:is([type="checkbox"], [type="radio"]):not(:where(
    .sr-only, .visually-hidden, .hidden, [hidden], [role="switch"],
    .settings-segmented input, .project-copy-lock-control input,
    .social-platform-choice input, .design-smart-operations input,
    .new-project-source-choice input, .layout-scope-control input,
    .ai-copy-policy input, .style-source-page input
  ))::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    background: currentColor;
    opacity: 0 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.6 8.7 10 3.3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.6 8.7 10 3.3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  html:root body input:is([type="checkbox"], [type="radio"]):not(:where(
    .sr-only, .visually-hidden, .hidden, [hidden], [role="switch"],
    .settings-segmented input, .project-copy-lock-control input,
    .social-platform-choice input, .design-smart-operations input,
    .new-project-source-choice input, .layout-scope-control input,
    .ai-copy-policy input, .style-source-page input
  )):is(:checked, [type="checkbox"]:indeterminate) {
    border-color: var(--neutral-accent, #a26820) !important;
    background: var(--neutral-accent, #a26820) !important;
  }

  html:root body input:is([type="checkbox"], [type="radio"]):is(:checked, [type="checkbox"]:indeterminate)::before {
    opacity: 1 !important;
  }

  html:root body input[type="checkbox"]:indeterminate::before {
    width: 7px;
    height: 2px;
    border-radius: 1px;
    -webkit-mask: none;
    mask: none;
  }

  html:root body input[type="radio"] {
    border-radius: 50% !important;
  }

  html:root body input[type="radio"]::before {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    -webkit-mask: none;
    mask: none;
  }

  html:root body input:is([type="checkbox"], [type="radio"]):hover:not(:disabled) {
    border-color: var(--neutral-accent, #a26820) !important;
  }

  html:root body input:is([type="checkbox"], [type="radio"]):focus-visible {
    outline: 2px solid var(--neutral-accent, #a26820) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
  }

  html:root body input:is([type="checkbox"], [type="radio"]):not(:where(
    .sr-only, .visually-hidden, .hidden, [hidden], [role="switch"],
    .settings-segmented input, .project-copy-lock-control input,
    .social-platform-choice input, .design-smart-operations input,
    .new-project-source-choice input, .layout-scope-control input,
    .ai-copy-policy input, .style-source-page input
  )):disabled {
    cursor: not-allowed !important;
    opacity: .5 !important;
  }

  html:root body :is(
    .settings-toggle, .reference-guide-enabled, .reference-guide-modes > label,
    .assistant-reference-mode-list > label, .scene-voice-controls > label,
    .scene-preserve-toggle, .smart-color-web-only, .editable-background-toggle,
    .delivery-preflight-panel label, .manual-design-confirm-check,
    .assistant-document-page-toolbar > label, .assistant-document-page-body label,
    .assistant-document-review > label, .design-region-reference-modes > label,
    .design-reference-board-modes > label
  ) {
    align-items: center !important;
    gap: 7px !important;
  }

  html:root body .settings-toggle {
    min-height: 32px !important;
  }

  html:root body :is(
    .reference-guide-modes > label, .assistant-reference-mode-list > label,
    .scene-voice-controls > label, .smart-color-web-only,
    .assistant-document-page-toolbar > label, .assistant-document-review > label
  ) {
    min-height: 24px !important;
    cursor: pointer;
  }

  /* Page-selection badges are the other visible square selection controls.
   * Keep their original positioning while making the glyph and tile compact. */
  html:root body :is(.design-thumb-select, .representative-thumb-select) {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    padding: 0 !important;
    border: 1px solid var(--neutral-muted, #777777) !important;
    border-radius: 4px !important;
    background: var(--neutral-panel, #ffffff) !important;
    color: var(--neutral-muted, #777777) !important;
    box-shadow: none !important;
  }

  html:root body :is(.design-thumb-select, .representative-thumb-select).selected {
    border-color: var(--neutral-accent, #a26820) !important;
    background: var(--neutral-accent, #a26820) !important;
    color: var(--neutral-accent-text, #ffffff) !important;
  }

  html:root body :is(.design-thumb-select, .representative-thumb-select) :is(svg, .fluent-icon-shell, .fluent-icon) {
    width: 12px !important;
    min-width: 12px !important;
    height: 12px !important;
    min-height: 12px !important;
  }

  @media (forced-colors: active) {
    html:root body input:is([type="checkbox"], [type="radio"]):not(:where(
      .sr-only, .visually-hidden, .hidden, [hidden], [role="switch"],
      .settings-segmented input, .project-copy-lock-control input,
      .social-platform-choice input, .design-smart-operations input,
      .new-project-source-choice input, .layout-scope-control input,
      .ai-copy-policy input, .style-source-page input
    )) {
      appearance: auto !important;
      -webkit-appearance: auto !important;
      background: revert !important;
      border-color: ButtonText !important;
      accent-color: auto !important;
      opacity: 1 !important;
    }

    html:root body input:is([type="checkbox"], [type="radio"])::before {
      display: none;
    }
  }
}

/* /styles.css */
/* ==== consolidated from /styles.css (cascade order preserved) ==== */
:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --line: #d9dee7;
  --line-strong: #b9c2d2;
  --text: #17202c;
  --muted: #647084;
  --primary: #245edb;
  --primary-strong: #1644a6;
  --accent: #be7c2c;
  --good: #168061;
  --danger: #c63d3d;
  --canvas-bg: #ece2d1;
  --shadow: 0 16px 38px rgba(23, 32, 44, 0.11);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

button,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  cursor: zoom-in;
}

button:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.app-shell {
  display: grid;
  grid-template-columns: 104px 1fr;
  grid-template-rows: 76px 1fr;
  min-height: 100vh;
}

.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

.topbar h1,
.panel h2 {
  margin: 0;
  letter-spacing: 0;
}

.topbar h1 {
  font-size: 21px;
  line-height: 1.2;
}

.topbar p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.top-actions,
.button-row,
.canvas-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 86px;
  font-size: 13px;
  color: var(--muted);
}

.status-dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
}

.status-dot.ready::before {
  background: var(--good);
}

.status-dot.mock::before {
  background: var(--accent);
}

.primary-btn,
.ghost-btn,
.danger-btn,
.icon-btn {
  border: 1px solid transparent;
  border-radius: 8px;
  min-height: 38px;
  padding: 0 14px;
  color: #ffffff;
  background: var(--primary);
}

.primary-btn:hover {
  background: var(--primary-strong);
}

.ghost-btn {
  color: var(--text);
  background: #ffffff;
  border-color: var(--line-strong);
}

.danger-btn {
  background: #fff5f5;
  color: var(--danger);
  border-color: #efb2b2;
}

.icon-btn {
  width: 38px;
  padding: 0;
  color: var(--text);
  background: #ffffff;
  border-color: var(--line-strong);
}

.rail {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 12px;
  overflow: auto;
  background: #ffffff;
  border-right: 1px solid var(--line);
}

.rail-item {
  display: grid;
  gap: 6px;
  place-items: center;
  min-height: 72px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
}

.rail-item span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eef1f6;
  color: var(--muted);
  font-size: 12px;
}

.rail-item strong {
  font-size: 13px;
  font-weight: 600;
}

.rail-item.active {
  color: var(--primary);
  border-color: #cad7ff;
  background: #f3f6ff;
}

.rail-item.active span {
  background: var(--primary);
  color: #ffffff;
}

.workspace {
  grid-column: 2;
  grid-row: 2;
  padding: 22px;
  overflow: auto;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(23, 32, 44, 0.05);
}

.flow-panel {
  min-height: calc(100vh - 120px);
  padding: 22px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.panel h2 {
  font-size: 18px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 16px;
}

label {
  display: grid;
  gap: 8px;
}

label span {
  color: var(--muted);
  font-size: 13px;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 10px 11px;
  color: var(--text);
  background: #ffffff;
  outline: none;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(36, 94, 219, 0.12);
}

.wide {
  grid-column: span 2;
}

.project-optional {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding: 12px 14px;
  border: 1px solid #d8e2f0;
  border-radius: 14px;
  background: #f8fafc;
}

.project-optional summary {
  cursor: pointer;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

.project-optional > .form-grid {
  margin-top: 14px;
}

.creation-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.mode-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  min-height: unset;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  cursor: pointer;
}

.mode-card.selected {
  border-color: rgba(36, 94, 219, 0.55);
  background: #f6f9ff;
  box-shadow: 0 0 0 4px rgba(36, 94, 219, 0.1);
}

.mode-card input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin-top: 2px;
  accent-color: var(--primary);
}

.mode-card span {
  display: grid;
  gap: 6px;
}

.mode-card strong {
  color: var(--text);
  font-size: 15px;
}

.mode-card em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.55;
}

.asset-match-panel {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #d8e2f0;
  border-radius: 14px;
  background: #f8fafc;
}

.asset-match-panel strong {
  color: var(--text);
  font-size: 14px;
}

.asset-match-panel span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.mode-flow-guide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 13px 14px;
  border: 1px solid #d8e2f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff, #f3f7fc);
}

.mode-flow-guide strong {
  flex: 1 1 100%;
  color: var(--text);
  font-size: 14px;
}

.mode-flow-guide span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #1f3b63;
  background: var(--neutral-accent-soft);
  font-size: 12px;
  font-weight: 700;
}

.mode-flow-guide em {
  flex: 1 1 100%;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}

.mode-flow-guide.upload-mode span {
  color: #315f45;
  background: #e9f7ef;
}

.requirements-note {
  margin-top: 16px;
  padding: 12px 14px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9fc;
  font-size: 13px;
}

.style-controls {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9fc;
}

.style-controls strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 14px;
}

.style-controls p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.style-basis-toggle {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr);
  align-items: start;
  gap: 10px;
  min-height: unset;
  padding: 12px 14px;
  border: 1px solid #d8e2f0;
  border-radius: 14px;
  background: #ffffff;
}

.style-basis-toggle input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin-top: 2px;
  accent-color: var(--primary);
}

.style-basis-toggle span {
  display: grid;
  gap: 4px;
}

.style-basis-toggle strong {
  color: var(--text);
  font-size: 14px;
}

.style-basis-toggle em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.design-basis-toggle {
  max-width: 360px;
  margin-right: 8px;
  padding: 9px 11px;
  text-align: left;
}

.design-basis-toggle strong {
  font-size: 13px;
}

.design-basis-toggle em {
  font-size: 11px;
}

.style-lock-summary {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9fc;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.style-lock-summary.locked {
  border-color: rgba(36, 94, 219, 0.34);
  background: #f3f7ff;
}

.style-lock-summary.unlocked {
  border-color: rgba(245, 158, 11, 0.36);
  background: linear-gradient(180deg, #fffbeb, #fff7ed);
}

.style-lock-summary strong {
  color: var(--text);
  font-size: 14px;
}

.style-lock-summary span,
.style-lock-summary em {
  display: block;
}

.style-lock-summary em {
  color: var(--muted);
  font-style: normal;
}

.style-option-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
  max-height: 236px;
  overflow: auto;
  padding-right: 4px;
}

.style-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.style-option.recommended {
  border-color: rgba(36, 94, 219, 0.36);
  background: #f5f8ff;
}

.style-option input {
  width: auto;
  margin-top: 3px;
}

.style-option strong,
.style-option span {
  display: block;
}

.style-option strong {
  font-size: 13px;
}

.style-option span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.style-option-body {
  display: grid;
  gap: 6px;
}

.style-option .style-option-meta {
  margin-top: 0;
  color: #475569;
  font-weight: 700;
}

.style-option-tags {
  display: flex !important;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 0 !important;
}

.style-option-tags em {
  display: inline-flex;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid #d8e2f0;
  border-radius: 999px;
  background: #f8fbff;
  color: #526176;
  font-size: 11px;
  font-style: normal;
  line-height: 1.3;
}

.style-option-reason {
  margin-top: 0 !important;
  color: #64748b;
}

.outline-copy-settings {
  display: grid;
  grid-template-columns: minmax(260px, 520px) 1fr;
  align-items: end;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 14px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9fc;
}

.outline-copy-settings p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.upload-zone {
  display: grid;
  gap: 18px;
}

.upload-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.upload-choice {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
}

.upload-choice.reference-choice {
  border-color: rgba(0, 113, 227, 0.28);
  background: rgba(240, 247, 255, 0.78);
}

.upload-choice.reference-choice.upload-mode-reference {
  border-color: rgba(15, 118, 110, 0.45);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.92), rgba(240, 249, 255, 0.92));
  box-shadow: 0 14px 30px rgba(15, 118, 110, 0.08);
}

.upload-choice.reference-choice.upload-mode-reference strong::after {
  content: "鎺ㄨ崘涓婁紶";
  display: inline-flex;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
  font-size: 11px;
  font-weight: 700;
}

.upload-choice strong {
  font-size: 14px;
}

.upload-choice span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.upload-choice-note {
  display: block;
  color: #356091;
  font-size: 12px;
  line-height: 1.55;
}

.asset-grid,
.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.asset-grid-empty {
  grid-template-columns: 1fr;
}

.asset-ai-intake-status {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid #cfe4ff;
  border-radius: 8px;
  background: #f2f8ff;
  color: #245b91;
  font-size: 12px;
}

.asset-ai-intake-status > svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.asset-ai-intake-status.is-loading > svg {
  animation: asset-intake-spin 1s linear infinite;
}

.asset-ai-intake-status.is-error {
  border-color: #f4c7c7;
  background: #fff6f6;
  color: #a33a3a;
}

.asset-ai-intake-status .compact-btn {
  margin-left: auto;
  min-height: 28px;
  padding: 4px 8px;
  white-space: nowrap;
}

.asset-role-control {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 10px;
  color: var(--muted);
  font-size: 11px;
}

.asset-role-control span {
  padding: 0;
  color: var(--muted);
  font-size: 11px;
}

.asset-role-control select {
  min-width: 96px;
  height: 28px;
  padding: 2px 24px 2px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--text);
  font-size: 11px;
}

.asset-role-badge.ai-intake {
  color: #1d6b4b;
  background: rgba(235, 250, 242, 0.96);
  border-color: rgba(37, 145, 95, 0.25);
}

.asset-role-badge.ai-intake.low,
.asset-role-badge.ai-intake.pending {
  color: #8a5a13;
  background: rgba(255, 248, 225, 0.96);
  border-color: rgba(190, 137, 35, 0.28);
}

@keyframes asset-intake-spin {
  to { transform: rotate(360deg); }
}

.asset-empty-card {
  display: grid;
  gap: 7px;
  min-height: 118px;
  padding: 18px;
  align-content: center;
  border: 1px dashed #cbd5e1;
  background: linear-gradient(180deg, #f8fbff, #f3f7fc);
  color: #64748b;
}

.asset-empty-card strong {
  color: #334155;
  font-size: 14px;
}

.asset-empty-card span {
  line-height: 1.55;
}

.asset-item,
.slide-preview,
.outline-row,
.thumb {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.asset-item {
  overflow: hidden;
  position: relative;
}

.asset-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: #eef1f6;
}

.asset-item strong,
.asset-item span {
  display: block;
  padding: 8px 10px;
}

.asset-badge-row {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 6px;
  pointer-events: none;
}

.asset-role-badge {
  padding: 4px 7px;
  border-radius: 999px;
  color: #374151;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.08);
  font-size: 11px;
  font-weight: 700;
}

.asset-role-badge.reference {
  color: #0a4ea3;
  background: rgba(232, 243, 255, 0.94);
  border-color: rgba(0, 113, 227, 0.24);
}

.asset-item strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-item span {
  padding-top: 0;
  color: var(--muted);
  font-size: 12px;
}

.outline-list {
  display: grid;
  gap: 12px;
}

.outline-row {
  display: grid;
  grid-template-columns: 52px 1fr 1.5fr;
  gap: 12px;
  padding: 12px;
  align-items: start;
}

.outline-index {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #ffffff;
  background: var(--primary);
}

.outline-row textarea {
  min-height: 78px;
}

.outline-row .detail-copy-field {
  min-height: 132px;
}

.slide-preview {
  padding: 12px;
}

.mini-slide {
  position: relative;
  width: 100%;
  aspect-ratio: var(--slide-aspect, 16 / 9);
  overflow: hidden;
  background: var(--canvas-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.design-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slide-preview strong {
  display: block;
  margin-top: 10px;
  font-size: 13px;
}

.slide-preview-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.slide-preview-actions button {
  flex: 1;
  min-height: 34px;
}

.single-slide-empty {
  min-height: 100%;
  border: 0;
  border-radius: 0;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.62);
}

.design-error-card {
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 12px;
  text-align: center;
  color: #991b1b;
  background: rgba(254, 242, 242, 0.86);
}

.design-error-card strong {
  margin: 0;
  color: inherit;
  font-size: 12px;
}

.design-error-card span {
  max-height: 52px;
  overflow: hidden;
  color: #b91c1c;
  font-size: 11px;
  line-height: 1.45;
}

.design-error-text {
  max-height: 56px;
  margin: 8px 0 0;
  overflow: auto;
  color: #b91c1c;
  font-size: 12px;
  line-height: 1.5;
}

.style-moodboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  scroll-margin-top: 18px;
}

.style-moodboard {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.style-moodboard.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(36, 94, 219, 0.13);
}

.style-moodboard.pending {
  border-style: dashed;
  background: #fbfcff;
}

.style-moodboard.queued {
  background: #fbfcff;
}

.style-moodboard.generating {
  border-color: rgba(36, 94, 219, 0.35);
  background: #f7faff;
}

.style-moodboard.failed {
  border-color: rgba(192, 0, 0, 0.35);
  background: #fff7f7;
}

.style-moodboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.style-moodboard-head strong {
  font-size: 14px;
}

.style-moodboard-head span {
  color: var(--muted);
  font-size: 12px;
}

.style-moodboard-image-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 6px;
  overflow: hidden;
}

.style-moodboard-image-btn:focus-visible {
  outline: 3px solid rgba(36, 94, 219, 0.36);
  outline-offset: 3px;
}

.style-moodboard-placeholder {
  display: grid;
  place-items: center;
  gap: 8px;
  width: 100%;
  aspect-ratio: var(--slide-aspect, 16 / 9);
  padding: 18px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  background: linear-gradient(135deg, #f7f9fc, #eef3fb);
}

.style-moodboard.generating .style-moodboard-placeholder {
  border-color: rgba(36, 94, 219, 0.35);
  background: linear-gradient(135deg, #f6f9ff, #eaf1ff);
}

.style-moodboard.failed .style-moodboard-placeholder {
  border-color: rgba(192, 0, 0, 0.3);
  background: linear-gradient(135deg, #fff7f7, #ffecec);
}

.style-moodboard-placeholder strong,
.style-moodboard-placeholder span {
  display: block;
}

.style-moodboard-placeholder strong {
  color: var(--text);
  font-size: 14px;
}

.style-moodboard-placeholder span {
  font-size: 12px;
  line-height: 1.5;
}

.style-moodboard-image-btn img,
.style-moodboard img {
  width: 100%;
  aspect-ratio: var(--slide-aspect, 16 / 9);
  object-fit: contain;
  display: block;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--canvas-bg);
}

.style-moodboard p {
  min-height: 44px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.style-moodboard > .ghost-btn,
.style-moodboard > .primary-btn {
  width: 100%;
}

.layer-plan {
  display: grid;
  gap: 12px;
}

.layer-slide {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.layer-slide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.layer-slide-head span {
  color: var(--muted);
  font-size: 12px;
}

.layer-list {
  display: grid;
}

.layer-row {
  display: grid;
  grid-template-columns: 96px 1fr 92px;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.layer-row:last-child {
  border-bottom: 0;
}

.layer-row strong,
.layer-row p {
  margin: 0;
}

.layer-row p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.layer-row small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
}

.layer-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  text-align: right;
}

.stage2-material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 14px;
}

.stage2-material {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(45deg, #f3f4f6 25%, transparent 25%),
    linear-gradient(-45deg, #f3f4f6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f3f4f6 75%),
    linear-gradient(-45deg, transparent 75%, #f3f4f6 75%);
  background-color: #ffffff;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

.stage2-material img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  display: block;
}

.stage2-material figcaption {
  min-height: 32px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  word-break: break-word;
}

.layer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--muted);
  font-size: 12px;
}

.layer-badge.background {
  background: #5b6d84;
}

.layer-badge.visual {
  background: #be7c2c;
}

.layer-badge.text {
  background: #245edb;
}

.layer-badge.shape {
  background: #168061;
}

.editor-layout {
  display: grid;
  grid-template-columns: clamp(176px, 17vw, 230px) minmax(440px, 1fr) clamp(220px, 22vw, 300px);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-height: calc(100vh - 120px);
}

.thumb-panel,
.inspector {
  padding: 14px;
}

.thumb-panel {
  grid-column: 1;
  grid-row: 2;
  background: #f5f7fb;
  border-right: 1px solid rgba(148, 163, 184, 0.28);
}

.editor-top-ribbon {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

.thumb-panel .panel-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 10px;
  background: #f5f7fb;
}

.thumb-panel .panel-head h2 {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thumb-panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.thumbnail-list {
  display: grid;
  gap: 10px;
}

.thumb {
  position: relative;
  padding: 8px;
  background: #ffffff;
}

.thumb::before {
  content: attr(data-slide);
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  min-width: 22px;
  padding: 2px 5px;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.thumb.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(36, 94, 219, 0.13);
}

.thumb.dragging {
  opacity: 0.58;
  cursor: grabbing;
}

.thumb.drop-before::after,
.thumb.drop-after::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  z-index: 4;
  height: 3px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.thumb.drop-before::after {
  top: -6px;
}

.thumb.drop-after::after {
  bottom: -6px;
}

.thumb .mini-slide {
  pointer-events: none;
}

.thumb-title {
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-area {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 12px;
  background: #eef1f6;
}

.inspector {
  grid-column: 3;
  grid-row: 2;
}

.canvas-toolbar {
  min-height: 48px;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.editor-ribbon {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
}

.ribbon-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.9);
}

.ribbon-title {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.ribbon-tool,
.ribbon-select {
  min-height: 32px;
  padding: 6px 9px;
  border-radius: 8px;
  font-size: 12px;
}

.ribbon-number {
  width: 64px;
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 8px;
}

.ribbon-color {
  width: 38px;
  min-height: 32px;
  padding: 3px;
  border-radius: 8px;
}

.ribbon-tool.active {
  color: #ffffff;
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 8px 18px rgba(36, 94, 219, 0.18);
}

.ribbon-tool.sticky {
  border-color: #0f9f6e;
  box-shadow: 0 0 0 2px rgba(15, 159, 110, 0.18), 0 8px 18px rgba(15, 159, 110, 0.2);
}

.office-canvas-shell {
  display: grid;
  grid-template-rows: 28px minmax(0, 1fr) 32px;
  min-height: 680px;
  overflow: hidden;
  background: #e6eaf1;
}

.office-canvas-body {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  min-height: 0;
}

.office-ruler {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  user-select: none;
  background:
    linear-gradient(#d4dbe7, #d4dbe7) left bottom / 100% 1px no-repeat,
    #f8fafc;
}

.office-ruler-horizontal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  padding-left: 34px;
}

.office-ruler-horizontal span {
  padding: 0 0 5px 4px;
  border-left: 1px solid rgba(100, 116, 139, 0.24);
}

.office-ruler-vertical {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  justify-items: center;
  padding-top: 4px;
  border-right: 1px solid #d4dbe7;
}

.office-ruler-vertical span {
  writing-mode: vertical-rl;
  padding-top: 4px;
  border-top: 1px solid rgba(100, 116, 139, 0.24);
}

.slide-stage {
  display: block;
  min-height: 0;
  padding: 40px 44px;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.5), transparent 42%),
    #dfe3eb;
}

.office-status-bar {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 80px;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.office-status-bar span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-status-bar span:last-child {
  text-align: right;
}

.speaker-notes-panel {
  display: grid;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(248, 250, 252, 0.94);
}

.speaker-notes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.speaker-notes-head strong {
  font-size: 12px;
  font-weight: 900;
  color: var(--text);
}

.speaker-notes-head span {
  color: var(--muted);
  font-size: 12px;
}

#speakerNotesInput {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  line-height: 1.5;
  outline: none;
}

#speakerNotesInput:focus {
  border-color: rgba(37, 99, 235, 0.65);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.slide-canvas {
  position: relative;
  width: var(--editor-canvas-width, min(100%, 980px));
  max-width: none;
  max-height: none;
  margin: 0 auto;
  aspect-ratio: var(--slide-aspect, 16 / 9);
  overflow: hidden;
  background: var(--canvas-bg);
  border: 1px solid #b8b0a4;
  box-shadow: var(--shadow);
  transition: width 0.16s ease, background-size 0.16s ease;
}

.slide-canvas.external-drop-active {
  outline: 3px dashed #0f9f6e;
  outline-offset: 8px;
  box-shadow: 0 0 0 8px rgba(15, 159, 110, 0.12), var(--shadow);
}

.slide-canvas.show-grid {
  background-color: var(--canvas-bg);
  background-image:
    linear-gradient(90deg, rgba(36, 94, 219, 0.12) 1px, transparent 1px),
    linear-gradient(rgba(36, 94, 219, 0.12) 1px, transparent 1px);
  background-size: 5% 5%;
}

.print-guide-layer,
.print-guide {
  position: absolute;
  pointer-events: none;
}

.print-guide-layer {
  inset: 0;
  z-index: 220;
  overflow: hidden;
}

.print-guide {
  border: 1px dashed currentColor;
}

.print-guide > span {
  position: absolute;
  top: 3px;
  left: 4px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.88);
  color: inherit;
  font-size: 9px;
  line-height: 1.35;
}

.trim-guide {
  color: #e11d48;
  box-shadow: 0 0 0 9999px rgba(225, 29, 72, 0.035);
}

.safe-guide {
  color: #0284c7;
}

.format-preset-summary {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.canvas-area.pan-mode .slide-stage {
  cursor: grab;
}

.canvas-area.pan-mode .slide-el {
  cursor: grab;
}

.canvas-area.panning .slide-stage,
.canvas-area.panning .slide-el {
  cursor: grabbing;
}

.canvas-area.format-painter-mode .slide-stage,
.slide-canvas.format-painter-mode .slide-el {
  cursor: copy;
}

.slide-canvas.format-painter-mode .slide-el:hover {
  outline: 2px dashed #0f9f6e;
  outline-offset: 3px;
}

.slide-canvas.snap-enabled .slide-el.selected {
  outline-style: dashed;
}

.editor-ribbon .ribbon-tool,
.editor-ribbon #addTextBtn,
.editor-ribbon #deleteElementBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 42px;
  white-space: nowrap;
}

.editor-ribbon .ribbon-tool::before,
.editor-ribbon #addTextBtn::before,
.editor-ribbon #deleteElementBtn::before {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 15px;
  line-height: 1;
}

#selectToolBtn::before { content: "A"; }
#panToolBtn::before { content: "H"; }
#toggleGridBtn::before { content: "#"; }
#toggleSnapBtn::before { content: "S"; }
#addTextBtn::before { content: "T"; font-weight: 800; }
#addRectBtn::before { content: "[]"; }
#addEllipseBtn::before { content: "O"; }
#addLineBtn::before { content: "/"; }
#textBoldBtn::before { content: "B"; font-weight: 900; }
#textAlignLeftBtn::before { content: "L"; }
#textAlignCenterBtn::before { content: "C"; }
#textAlignRightBtn::before { content: "R"; }
#duplicateElementBtn::before { content: "2"; }
#bringForwardBtn::before { content: "Up"; }
#sendBackwardBtn::before { content: "Dn"; }
#bringToFrontBtn::before { content: "Top"; }
#sendToBackBtn::before { content: "Bot"; }
#alignLeftBtn::before { content: "|<"; }
#alignCenterBtn::before { content: "|"; }
#alignRightBtn::before { content: ">|"; }
#alignTopBtn::before { content: "T"; }
#alignMiddleBtn::before { content: "M"; }
#alignBottomBtn::before { content: "B"; }
#distributeHorizontalBtn::before { content: "H"; }
#distributeVerticalBtn::before { content: "V"; }
#sameWidthBtn::before { content: "W"; }
#sameHeightBtn::before { content: "H"; }
#sameSizeBtn::before { content: "1:1"; }
#groupElementsBtn::before { content: "G"; }
#ungroupElementsBtn::before { content: "UG"; }
#rotateLeftBtn::before { content: "<"; }
#rotateRightBtn::before { content: ">"; }
#toggleLockBtn::before { content: "馃敀"; }
#undoEditBtn::before { content: "<"; }
#redoEditBtn::before { content: ">"; }
#formatPainterBtn::before { content: "P"; }
#cutElementBtn::before { content: "X"; }
#copyElementBtn::before { content: "C"; }
#pasteElementBtn::before { content: "V"; }
#deleteElementBtn::before { content: "脳"; font-weight: 900; }

.slide-el {
  position: absolute;
  min-width: 4px;
  min-height: 4px;
  outline: 0 solid transparent;
  cursor: move;
}

.slide-text-content {
  display: block;
  width: 100%;
  min-width: 0;
  white-space: pre-wrap;
}

.slide-el.selected {
  outline: 2px dashed var(--primary);
  outline-offset: 2px;
}

.floating-editor-tools {
  position: absolute;
  z-index: 260;
  display: grid;
  gap: 7px;
  min-width: 230px;
  max-width: min(420px, 82%);
  padding: 8px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.18);
  transform: translate(-50%, calc(-100% - 18px));
  backdrop-filter: blur(16px);
}

.floating-editor-tools::after {
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-right: 1px solid rgba(37, 99, 235, 0.22);
  border-bottom: 1px solid rgba(37, 99, 235, 0.22);
  background: rgba(255, 255, 255, 0.96);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.floating-tools-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.floating-tools-row strong {
  flex: 0 0 auto;
  color: var(--neutral-text);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.floating-editor-tools select,
.floating-editor-tools input {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font-size: 12px;
}

.floating-editor-tools select {
  width: 78px;
  padding: 5px 7px;
}

.floating-editor-tools.text-tools {
  min-width: 360px;
  max-width: min(520px, 92%);
}

.floating-editor-tools.text-tools .floating-tools-row {
  flex-wrap: nowrap;
}

.floating-editor-tools [data-floating-copy-layout] {
  width: 116px;
}

.floating-editor-tools input {
  flex: 1 1 180px;
  min-width: 0;
  padding: 5px 8px;
}

.floating-editor-tools .mini-btn {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.floating-editor-tools .mini-btn.primary {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
}

.floating-editor-tools .mini-btn:disabled {
  cursor: wait;
  opacity: 0.72;
}

.floating-editor-tools.image-tools {
  min-width: 360px;
}

.element-drag-edge {
  position: absolute;
  z-index: 7;
  display: none;
  background: rgba(37, 99, 235, 0);
  cursor: move;
}

.slide-el.selected .element-drag-edge { display: none; }

.element-drag-edge.top {
  top: -10px;
  left: -10px;
  right: -10px;
  height: 14px;
}

.element-drag-edge.right {
  top: -10px;
  right: -10px;
  bottom: -10px;
  width: 14px;
}

.element-drag-edge.bottom {
  right: -10px;
  bottom: -10px;
  left: -10px;
  height: 14px;
}

.element-drag-edge.left {
  top: -10px;
  bottom: -10px;
  left: -10px;
  width: 14px;
}

.slide-el.multi-selected {
  outline-color: #2563eb;
}

.element-rotate-handle {
  position: absolute;
  left: 50%;
  top: -36px;
  z-index: 10;
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.22);
  transform: translateX(-50%);
  cursor: grab;
}

.element-rotate-handle:active {
  cursor: grabbing;
}

.element-rotate-stem {
  position: absolute;
  left: 50%;
  top: -20px;
  z-index: 8;
  display: none;
  width: 1px;
  height: 18px;
  background: var(--primary);
  transform: translateX(-50%);
  pointer-events: none;
}

.selection-overlay .element-rotate-handle,
.selection-overlay .element-rotate-stem {
  display: block;
}

.element-resize-handle {
  position: absolute;
  z-index: 9;
  display: none;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border: 2px solid var(--primary);
  border-radius: 2px;
  background: #ffffff;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.24);
}

.selection-overlay .element-resize-handle {
  display: block;
}

.selection-overlay {
  position: absolute;
  z-index: 1000;
  box-sizing: border-box;
  border: 2px dashed #2563eb;
  outline: 1px solid rgba(255, 255, 255, 0.82);
  outline-offset: 1px;
  cursor: move;
  touch-action: none;
}

.selection-overlay.multi {
  border-style: solid;
  background: rgba(37, 99, 235, 0.025);
}

.selection-overlay.locked {
  border-color: #a76400;
  cursor: not-allowed;
}

.element-resize-handle.nw {
  left: -7px;
  top: -7px;
  cursor: nwse-resize;
}

.element-resize-handle.ne {
  right: -7px;
  top: -7px;
  cursor: nesw-resize;
}

.element-resize-handle.n {
  left: 50%;
  top: -7px;
  transform: translateX(-50%);
  cursor: ns-resize;
}

.element-resize-handle.e {
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}

.element-resize-handle.sw {
  left: -7px;
  bottom: -7px;
  cursor: nesw-resize;
}

.element-resize-handle.s {
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  cursor: ns-resize;
}

.element-resize-handle.se {
  right: -7px;
  bottom: -7px;
  cursor: nwse-resize;
}

.element-resize-handle.w {
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}

.slide-el.text {
  padding: 0.15%;
  white-space: pre-wrap;
  overflow: hidden;
  line-height: 1.15;
  cursor: move;
  -webkit-user-select: none;
  user-select: none;
}

.slide-el.text.editing {
  box-sizing: border-box;
  overflow: auto;
  border: 0;
  background: transparent;
  caret-color: var(--primary);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  cursor: text;
  resize: none;
  appearance: none;
  -webkit-user-select: text;
  user-select: text;
  touch-action: auto;
}

.slide-el.text.editing:focus {
  box-shadow: 0 0 0 4px rgba(36, 94, 219, 0.12);
}

textarea.slide-el.text.editing {
  display: block;
}

.slide-el.text.editing .element-rotate-handle,
.slide-el.text.editing .element-rotate-stem,
.slide-el.text.editing .element-drag-edge,
.slide-el.text.editing .element-resize-handle {
  display: none;
}

.slide-el.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.inline-image-replace {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 6;
  width: min(78%, 220px);
  min-height: 30px;
  padding: 4px 9px;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.2);
  transform: translateX(-50%);
}

.slide-el.line {
  min-height: 0;
  border-top: 2px solid currentColor;
}

.inspector-body {
  display: grid;
  gap: 12px;
}

.editor-layer-list {
  display: grid;
  gap: 6px;
  max-height: 220px;
  margin-bottom: 12px;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.editor-layer-list.empty-state {
  min-height: 84px;
  margin-bottom: 12px;
}

.editor-layer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 4px;
  color: var(--muted);
  font-size: 12px;
}

.editor-layer-head strong {
  color: var(--text);
  font-size: 13px;
}

.editor-layer-item {
  display: grid;
  grid-template-columns: 28px 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 9px;
  text-align: left;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: #ffffff;
}

.editor-layer-item.is-hidden {
  opacity: 0.58;
}

.editor-layer-item.active {
  border-color: var(--primary);
  background: #eef5ff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}

.layer-visibility-btn,
.layer-order-actions button {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: #475569;
  font-size: 12px;
  line-height: 1;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 6px;
  background: #f8fafc;
  cursor: pointer;
}

.layer-visibility-btn:hover,
.layer-order-actions button:hover {
  color: #0f172a;
  border-color: rgba(37, 99, 235, 0.45);
  background: var(--neutral-accent-soft);
}

.editor-layer-item.is-hidden .layer-visibility-btn {
  color: #94a3b8;
  background: #f1f5f9;
}

.layer-title {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.layer-order-actions {
  display: inline-flex;
  gap: 4px;
}

.editor-layer-item.grouped small::after {
  content: " 路 缁勫悎";
  color: #0f9f6e;
}

.editor-layer-item strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-layer-item small {
  color: var(--muted);
  font-size: 11px;
}

.layer-type-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #64748b;
}

.layer-type-dot.text {
  background: #2563eb;
}

.layer-type-dot.image {
  background: #16a34a;
}

.layer-type-dot.shape {
  background: #f59e0b;
}

.image-match-card {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid #d8e2f0;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbff, #eef6ff);
}

.image-match-card strong,
.image-match-card span,
.image-match-card p {
  margin: 0;
}

.image-match-card strong {
  color: #1d4ed8;
  font-size: 13px;
}

.image-match-card span {
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  word-break: break-word;
}

.image-match-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.copy-ai-card,
.single-design-mode {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid #d8e2f0;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf7, #f7fbff);
}

.slide-preview .single-design-mode {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 7px 8px;
  border-color: rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.08);
}

.copy-ai-card strong,
.single-design-mode span {
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 800;
}

.slide-preview .single-design-mode span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.copy-ai-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.copy-ai-card select,
.single-design-mode select {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.copy-ai-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.copy-ai-grid label {
  display: grid;
  gap: 4px;
}

.copy-ai-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.slide-preview .single-design-mode select {
  min-height: 30px;
  padding: 5px 26px 5px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

.copy-ai-card .ghost-btn {
  width: 100%;
}

.single-design-mode {
  margin-top: 9px;
}

.slide-preview .slide-preview-actions {
  margin-top: 8px;
}

.slide-preview .slide-preview-actions .ghost-btn {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
}

.inspector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.inspector .wide {
  grid-column: span 2;
}

.replace-image-control small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.requirements-advanced {
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fbff;
}

.requirements-advanced summary {
  cursor: pointer;
  color: #334155;
  font-size: 14px;
  font-weight: 800;
}

.requirements-advanced > .form-grid {
  margin-top: 14px;
}

.export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.export-tile {
  display: grid;
  gap: 10px;
  min-height: 132px;
  padding: 18px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.export-tile.ready {
  border-color: #bfd0ff;
  background: #f7f9ff;
}

.export-tile strong {
  font-size: 24px;
}

.export-tile span {
  color: var(--muted);
}

.empty-state {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  max-width: 420px;
  padding: 12px 14px;
  border-radius: 8px;
  color: #ffffff;
  background: #1f2937;
  box-shadow: var(--shadow);
  z-index: 20;
}

.toast.toast-actionable {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.toast.toast-actionable:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 3px;
}

.editor-context-menu {
  position: fixed;
  z-index: 80;
  min-width: 186px;
  padding: 6px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.2);
}

.editor-context-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 30px;
  padding: 6px 9px;
  border: 0;
  border-radius: 6px;
  color: #0f172a;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  text-align: left;
}

.editor-context-menu button:hover:not(:disabled) {
  background: var(--neutral-accent-soft);
}

.editor-context-menu button:disabled {
  color: #94a3b8;
  cursor: default;
}

.editor-context-menu button.danger {
  color: #b91c1c;
}

.editor-context-menu small {
  color: #94a3b8;
  font-size: 11px;
}

.context-menu-separator {
  height: 1px;
  margin: 5px 4px;
  background: #e2e8f0;
}

.generation-progress {
  position: fixed;
  right: 22px;
  bottom: 82px;
  z-index: 30;
  width: min(360px, calc(100vw - 44px));
  padding: 14px 15px 15px;
  border: 1px solid rgba(36, 94, 219, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

.generation-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.generation-progress-head strong {
  font-size: 14px;
}

.generation-progress-head span {
  color: var(--muted);
  font-size: 12px;
}

.generation-progress p {
  margin: 9px 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.generation-progress-bar {
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf6;
}

.generation-progress-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 8%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #31a56f, var(--accent));
  transition: width 0.45s ease;
}

.generation-progress-bar span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: progressShine 1.35s linear infinite;
}


@keyframes progressShine {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

.image-viewer {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: #f8fafc;
}

.image-viewer:not([open]) {
  display: none;
}

.image-viewer::backdrop {
  background: rgba(8, 11, 16, 0.88);
}

.image-viewer-window {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: 52px minmax(0, 1fr);
  background: rgba(8, 11, 16, 0.96);
}

.image-viewer-toolbar {
  z-index: 2;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px 8px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: #11151b;
}

.image-viewer-toolbar > strong {
  min-width: 0;
  overflow: hidden;
  color: #f8fafc;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-viewer-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.image-viewer-zoom-actions,
.image-viewer-assistant-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.image-viewer-assistant-actions {
  margin-right: auto;
  margin-left: 8px;
}

.image-viewer-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #20252c;
  border-color: rgba(255, 255, 255, 0.22);
}

.image-viewer-action-btn:hover:not(:disabled),
.image-viewer-action-btn:focus-visible {
  border-color: rgba(255, 255, 255, 0.56);
  background: #2a3038;
}

.image-viewer-editable-menu {
  position: relative;
}

.image-viewer-editable-menu > summary {
  list-style: none;
  cursor: pointer;
}

.image-viewer-editable-menu > summary::-webkit-details-marker {
  display: none;
}

.image-viewer-editable-options {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  left: 0;
  display: grid;
  min-width: 148px;
  padding: 5px;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: #171b21;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.38);
}

.image-viewer-editable-options button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #e5e7eb;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.image-viewer-editable-options button:hover,
.image-viewer-editable-options button:focus-visible {
  background: #252b33;
  outline: none;
}

.image-viewer-editable-options svg {
  width: 15px;
  height: 15px;
}

.image-viewer-btn.is-busy {
  opacity: 0.58;
  pointer-events: none;
}

@media (max-width: 640px) {
  .image-viewer-toolbar {
    gap: 5px;
    padding-inline: 9px;
  }

  .image-viewer-toolbar > strong {
    max-width: 28vw;
  }

  .image-viewer-assistant-actions {
    margin-left: 0;
  }

  .image-viewer-action-btn,
  .image-viewer-btn {
    width: 32px;
    height: 32px;
    min-height: 32px;
  }

  .image-viewer-reset {
    width: 46px;
  }
}

.image-viewer-btn,
.image-viewer-reset {
  display: grid;
  width: 34px;
  height: 34px;
  min-height: 34px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: #1b212a;
  color: #f8fafc;
}

.image-viewer-reset {
  width: 58px;
  font-size: 11px;
}

.image-viewer-btn:hover:not(:disabled),
.image-viewer-reset:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.38);
  background: #28313d;
}

.image-viewer-btn:focus-visible,
.image-viewer-reset:focus-visible,
.image-viewer-stage:focus-visible {
  outline: 2px solid #58a6ff;
  outline-offset: -2px;
}

.image-viewer-btn svg {
  width: 17px;
  height: 17px;
}

.image-viewer-stage {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 24px;
  overflow: auto;
  place-items: center;
  background-color: #0c1015;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.025) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.025) 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.image-viewer-stage img {
  display: block;
  max-width: min(1400px, calc(100vw - 48px));
  max-height: calc(100dvh - 100px);
  object-fit: contain;
  transform: scale(var(--image-viewer-zoom, 1));
  transform-origin: center;
  transition: transform 120ms ease;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.48);
}

.image-viewer-status {
  display: grid;
  max-width: 360px;
  place-items: center;
  gap: 6px;
  color: #cbd5e1;
  font-size: 13px;
  text-align: center;
}

.image-viewer-status.error strong {
  color: #ffffff;
  font-size: 15px;
}

.image-viewer-open {
  overflow: hidden !important;
}

.business-image-preview {
  cursor: zoom-in;
}

#slideCanvas .business-image-preview,
#thumbnailList .business-image-preview {
  cursor: inherit;
}

.image-preview-trigger {
  position: absolute;
  z-index: 12;
  top: 7px;
  right: 7px;
  display: grid;
  width: 30px;
  height: 30px;
  min-height: 30px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #38bdf8;
  opacity: 0.86;
  cursor: zoom-in;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 3px rgba(0, 0, 0, 0.72));
  transition: opacity 120ms ease, color 120ms ease, transform 120ms ease;
}

.image-preview-trigger svg {
  width: 15px;
  height: 15px;
  pointer-events: none;
}

.slide-el.image:hover > .image-preview-trigger,
.slide-el.image:focus-within > .image-preview-trigger,
.design-page-canvas:hover > .image-preview-trigger,
.design-page-canvas:focus-within > .image-preview-trigger,
.style-workflow-canvas:hover > .image-preview-trigger,
.style-workflow-canvas:focus-within > .image-preview-trigger,
.editable-workflow-canvas:hover > .image-preview-trigger,
.editable-workflow-canvas:focus-within > .image-preview-trigger,
.workflow-thumb:hover > .image-preview-trigger,
.workflow-thumb:focus-visible > .image-preview-trigger,
.thumb:hover > .image-preview-trigger,
.thumb:focus-visible > .image-preview-trigger {
  opacity: 1;
}

.image-preview-trigger:hover,
.image-preview-trigger:focus-visible {
  color: #f59e0b;
  opacity: 1;
  transform: scale(1.08);
}

.thumb-preview-trigger {
  top: 5px;
  right: 20px;
  width: 26px;
  height: 26px;
  min-height: 26px;
}

@media (hover: none), (max-width: 767.98px) {
  .image-preview-trigger {
    opacity: 1;
  }

  .image-viewer-stage {
    padding: 10px;
  }

  .image-viewer-stage img {
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 78px);
  }
}

.hidden {
  display: none !important;
}
@media (max-width: 1180px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .editor-layout {
    grid-template-columns: 168px 1fr;
  }

  .inspector {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
  }

  .topbar,
  .rail {
    grid-column: 1;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  .rail {
    grid-row: 2;
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .rail-item {
    min-width: 78px;
  }

  .workspace {
    grid-column: 1;
    grid-row: 3;
    padding: 14px;
  }

  .form-grid,
  .editor-layout,
  .export-grid {
    grid-template-columns: 1fr;
  }

  .wide {
    grid-column: span 1;
  }

  .slide-stage {
    min-height: 360px;
    padding: 10px;
  }
}

/* Apple-inspired product UI refresh */
:root {
  --apple-bg: #f5f5f7;
  --apple-surface: rgba(255, 255, 255, 0.82);
  --apple-surface-strong: rgba(255, 255, 255, 0.96);
  --apple-line: rgba(60, 60, 67, 0.16);
  --apple-line-strong: rgba(60, 60, 67, 0.24);
  --apple-text: #1d1d1f;
  --apple-muted: #6e6e73;
  --apple-blue: #0071e3;
  --apple-blue-dark: #005bbf;
  --apple-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
}

html,
body {
  color: var(--apple-text);
  background:
    linear-gradient(180deg, #fbfbfd 0%, var(--apple-bg) 42%, #ffffff 100%);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Segoe UI",
    "Microsoft YaHei",
    sans-serif;
}

body {
  min-height: 100vh;
}

.app-shell {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 18px;
  max-width: 1560px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px;
}

.topbar {
  grid-column: 1 / -1;
  position: sticky;
  top: 12px;
  z-index: 40;
  min-height: 76px;
  padding: 16px 20px;
  border: 1px solid var(--apple-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: saturate(180%) blur(26px);
  backdrop-filter: saturate(180%) blur(26px);
}

.topbar h1 {
  color: var(--apple-text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
}

.topbar p,
.panel-head p,
.requirements-note,
.style-lock-summary,
.style-controls p,
.outline-copy-settings p,
.empty-state {
  color: var(--apple-muted);
}

.top-actions {
  gap: 10px;
}

.status-dot {
  min-height: 34px;
  border: 1px solid var(--apple-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--apple-muted);
  box-shadow: none;
}

.status-dot.ready {
  color: #137333;
  background: rgba(232, 245, 233, 0.78);
}

.rail {
  position: sticky;
  top: 108px;
  align-self: start;
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--apple-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
}

.rail-item {
  min-height: 70px;
  padding: 9px 6px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--apple-muted);
  box-shadow: none;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.rail-item:hover {
  background: rgba(0, 0, 0, 0.045);
  transform: translateY(-1px);
}

.rail-item span {
  width: 28px;
  height: 28px;
  border: 1px solid var(--apple-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--apple-muted);
  font-weight: 700;
}

.rail-item strong {
  font-size: 12px;
  letter-spacing: 0;
}

.rail-item.active {
  background: #1d1d1f;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(29, 29, 31, 0.18);
}

.rail-item.active span {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.workspace {
  min-width: 0;
}

.panel,
.flow-panel,
.thumb-panel,
.inspector,
.export-tile,
.slide-preview,
.style-moodboard,
.asset-item,
.outline-row,
.layer-slide {
  border: 1px solid var(--apple-line);
  border-radius: 18px;
  background: var(--apple-surface-strong);
  box-shadow: var(--apple-shadow);
}

.flow-panel {
  padding: 22px;
}

.panel-head {
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(60, 60, 67, 0.1);
}

.panel-head h2 {
  color: var(--apple-text);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
}

.button-row {
  gap: 10px;
}

button,
.primary-btn,
.ghost-btn,
.danger-btn,
.icon-btn {
  min-height: 38px;
  border-radius: 999px;
  font-weight: 650;
  letter-spacing: 0;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

button:not(:disabled):hover {
  transform: translateY(-1px);
}

.primary-btn {
  border-color: var(--apple-blue);
  background: var(--apple-blue);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 113, 227, 0.22);
}

.primary-btn:not(:disabled):hover {
  border-color: var(--apple-blue-dark);
  background: var(--apple-blue-dark);
}

.ghost-btn,
.icon-btn {
  border-color: var(--apple-line);
  background: rgba(255, 255, 255, 0.74);
  color: var(--apple-text);
  box-shadow: none;
}

.ghost-btn:not(:disabled):hover,
.icon-btn:not(:disabled):hover {
  border-color: var(--apple-line-strong);
  background: #ffffff;
}

.danger-btn {
  border-color: rgba(255, 59, 48, 0.2);
  background: rgba(255, 59, 48, 0.08);
  color: #b42318;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  min-height: 42px;
  border: 1px solid var(--apple-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--apple-text);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.03);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(0, 113, 227, 0.62);
  box-shadow:
    0 0 0 4px rgba(0, 113, 227, 0.12),
    inset 0 1px 1px rgba(0, 0, 0, 0.03);
}

label span {
  color: #515154;
  font-weight: 650;
}

.setup-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(460px, 1.28fr);
  gap: 18px;
  margin-top: 18px;
}

.setup-layout-redesigned {
  align-items: start;
  grid-template-columns: minmax(300px, 0.9fr) minmax(560px, 1.1fr);
  gap: 20px;
}

.mode-workspace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.mode-workspace {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.82));
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}

.mode-workspace:hover,
.mode-workspace:focus-visible {
  border-color: rgba(37, 99, 235, 0.5);
  box-shadow: 0 18px 38px rgba(37, 99, 235, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.mode-workspace.active {
  border-color: rgba(37, 99, 235, 0.58);
  background: linear-gradient(180deg, color-mix(in srgb, var(--neutral-accent) 5%, var(--neutral-panel)), #ffffff);
  box-shadow: 0 18px 38px rgba(37, 99, 235, 0.12);
}

.mode-workspace.inactive {
  opacity: 0.72;
}

.mode-workspace-head {
  display: grid;
  gap: 7px;
}

.mode-workspace-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
}

.mode-workspace-head p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.65;
}

.mode-workspace-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mode-workspace-flow span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid #d8e2f0;
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.mode-workspace .compact-btn {
  justify-self: start;
}

.setup-block {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(60, 60, 67, 0.12);
  border-radius: 16px;
  background: rgba(248, 248, 250, 0.72);
}

.assets-panel,
.requirements-panel {
  padding: 18px;
  border-color: rgba(148, 163, 184, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.78));
}

.requirements-panel {
  position: relative;
  overflow: hidden;
}

.requirements-panel::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #0071e3, #60a5fa, #22c55e);
  content: "";
}

.section-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.section-heading-row h3 {
  margin: 2px 0 0;
  color: #1d1d1f;
  font-size: 17px;
  letter-spacing: 0;
}

.section-chip {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid rgba(0, 113, 227, 0.18);
  border-radius: 999px;
  background: rgba(240, 247, 255, 0.86);
  color: #2563eb;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.mode-switch-card {
  padding: 12px;
  border: 1px solid rgba(0, 113, 227, 0.18);
  border-radius: 14px;
  background: rgba(240, 247, 255, 0.62);
}

.mode-switch-card small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.section-kicker {
  margin-bottom: 12px;
  color: var(--apple-muted);
  font-size: 12px;
  font-weight: 700;
}

.upload-zone {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.upload-choice-stack {
  grid-template-columns: 1fr;
  gap: 12px;
}

.dropzone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1.5px dashed rgba(37, 99, 235, 0.32);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(248, 250, 252, 0.92));
  color: #1f2937;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.mode-panel-muted {
  opacity: 0.68;
}

.mode-panel-muted .dropzone {
  border-color: rgba(148, 163, 184, 0.3);
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.9));
}

.dropzone:hover,
.dropzone:focus-visible,
.dropzone.dragging {
  border-color: rgba(37, 99, 235, 0.72);
  background:
    linear-gradient(135deg, rgba(219, 234, 254, 0.96), rgba(240, 253, 250, 0.94));
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
  outline: none;
}

.dropzone-icon {
  display: grid;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: #2563eb;
  color: #fff;
  font-size: 28px;
  font-weight: 500;
  place-items: center;
}

.dropzone strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}

.dropzone span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
}

.compact-btn {
  min-height: 36px;
  padding: 8px 12px;
  white-space: nowrap;
}

.asset-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 10px;
}

.asset-list-head strong {
  color: #334155;
  font-size: 13px;
}

.asset-list-head span {
  color: #64748b;
  font-size: 12px;
}

.requirements-form-shell {
  display: grid;
  gap: 14px;
}

.mode-choice-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mode-choice-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.mode-choice-card:hover,
.mode-choice-card:focus-within {
  border-color: rgba(0, 113, 227, 0.36);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}

.mode-choice-card.selected {
  border-color: rgba(0, 113, 227, 0.58);
  background: linear-gradient(180deg, rgba(240, 247, 255, 0.98), rgba(255, 255, 255, 0.9));
  box-shadow: 0 16px 34px rgba(0, 113, 227, 0.14);
}

.mode-choice-card input {
  position: absolute;
  inset: 14px 14px auto auto;
  width: 18px;
  height: 18px;
  accent-color: #0071e3;
}

.mode-choice-badge {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.1);
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.mode-choice-card.selected .mode-choice-badge {
  background: rgba(0, 113, 227, 0.14);
  color: #0064c8;
}

.mode-choice-card strong {
  padding-right: 24px;
  color: #111827;
  font-size: 16px;
}

.mode-choice-card small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
}

.mode-select-fallback {
  display: none;
}

.requirements-section {
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.035);
}

.requirements-section-primary {
  border-color: rgba(0, 113, 227, 0.18);
  background: rgba(248, 251, 255, 0.88);
}

.requirements-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.requirements-section-head strong,
.requirements-advanced summary span {
  color: #1f2937;
  font-size: 15px;
  font-weight: 800;
}

.requirements-section-head span,
.requirements-advanced summary small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.requirements-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.requirements-grid label {
  min-width: 0;
}

.requirements-grid select,
.requirements-grid input,
.requirements-grid textarea {
  min-height: 46px;
}

.requirements-advanced {
  padding: 0;
  overflow: hidden;
}

.requirements-advanced summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

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

.requirements-advanced summary::after {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  color: #64748b;
  content: "+";
  display: grid;
  font-size: 18px;
  font-weight: 500;
  place-items: center;
}

.requirements-advanced[open] summary::after {
  content: "-";
}

.requirements-advanced > .requirements-grid {
  padding: 0 14px 14px;
}

.requirements-note,
.style-controls,
.style-lock-summary,
.outline-copy-settings,
.advanced-tools {
  border: 1px solid rgba(60, 60, 67, 0.12);
  border-radius: 16px;
  background: rgba(248, 248, 250, 0.72);
  box-shadow: none;
}

.style-controls {
  grid-template-columns: 180px minmax(0, 1fr);
}

.style-option-list {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  max-height: 340px;
}

.style-option,
.style-moodboard,
.slide-preview,
.asset-item,
.outline-row,
.layer-slide {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.045);
}

.style-option.recommended,
.style-lock-summary.locked {
  border-color: rgba(0, 113, 227, 0.26);
  background: rgba(240, 247, 255, 0.86);
}

.style-moodboard.selected {
  border-color: rgba(0, 113, 227, 0.52);
  box-shadow: 0 12px 34px rgba(0, 113, 227, 0.14);
}

.advanced-tools {
  display: block;
  margin-top: 18px;
  padding: 14px;
}

.advanced-tools summary {
  cursor: pointer;
  color: var(--apple-text);
  font-weight: 700;
}

.advanced-tools .button-row {
  margin-top: 14px;
  flex-wrap: wrap;
}

.advanced-tools .layer-plan {
  margin-top: 14px;
}

.design-basis-toggle {
  min-width: 280px;
  max-width: 380px;
  border-radius: 16px;
}

.editor-layout {
  grid-template-columns: minmax(160px, 220px) minmax(480px, 1fr) minmax(260px, 340px);
  gap: 18px;
}

.canvas-area {
  border: 1px solid var(--apple-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--apple-shadow);
}

.canvas-toolbar {
  border-bottom: 1px solid rgba(60, 60, 67, 0.1);
  background: rgba(248, 248, 250, 0.72);
}

.slide-stage {
  background:
    linear-gradient(90deg, rgba(60, 60, 67, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(60, 60, 67, 0.05) 1px, transparent 1px),
    #f5f5f7;
  background-size: 24px 24px;
}

.slide-canvas {
  border-radius: 10px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.16);
}

.generation-progress,
.toast {
  border-radius: 18px;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .rail {
    top: 0;
    grid-template-columns: repeat(7, minmax(76px, 1fr));
    overflow-x: auto;
  }

  .setup-layout,
  .editor-layout,
  .style-controls {
    grid-template-columns: 1fr;
  }
}

/* UI refresh: product-workbench polish */
:root {
  --bg: #eef2f7;
  --panel: #ffffff;
  --line: #d7dfeb;
  --line-strong: #b7c2d4;
  --text: #111827;
  --muted: #64748b;
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --primary-soft: var(--neutral-accent-soft);
  --accent: #0f766e;
  --good: #059669;
  --danger: #dc2626;
  --canvas-bg: #f4efe7;
  --shadow: 0 20px 56px rgba(15, 23, 42, 0.14);
  --soft-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

body {
  background:
    radial-gradient(circle at 18% -10%, rgba(37, 99, 235, 0.13), transparent 32%),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 42%, #e8edf5 100%);
}

.app-shell {
  grid-template-columns: 112px 1fr;
  grid-template-rows: 82px 1fr;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 0 30px;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(215, 223, 235, 0.9);
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(16px);
}

.topbar h1 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
}

.topbar p {
  max-width: 780px;
  color: #667085;
}

.status-dot {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
}

.primary-btn,
.ghost-btn,
.danger-btn,
.icon-btn {
  min-height: 40px;
  border-radius: 10px;
  font-weight: 700;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}

.primary-btn {
  border-color: rgba(37, 99, 235, 0.8);
  background: linear-gradient(180deg, #3778ff, #235fdc);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.23);
}

.primary-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.28);
}

.ghost-btn,
.icon-btn {
  color: #1f2937;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border-color: #cbd5e1;
}

.ghost-btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled) {
  border-color: #94a3b8;
  background: #ffffff;
}

.danger-btn {
  color: #b91c1c;
  background: #fff7f7;
  border-color: #fecaca;
}

.rail {
  padding: 18px 14px;
  background: rgba(255, 255, 255, 0.78);
  border-right: 1px solid rgba(215, 223, 235, 0.85);
  backdrop-filter: blur(14px);
}

.rail-item {
  min-height: 74px;
  border-radius: 14px;
  color: #64748b;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.rail-item:hover {
  color: #1e40af;
  background: #f8fbff;
}

.rail-item span {
  width: 28px;
  height: 28px;
  background: #e7edf7;
  font-weight: 800;
}

.rail-item.active {
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.24);
  background: linear-gradient(180deg, color-mix(in srgb, var(--neutral-accent) 5%, var(--neutral-panel)), var(--neutral-accent-soft));
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08), 0 10px 22px rgba(37, 99, 235, 0.1);
}

.workspace {
  padding: 24px;
}

.panel {
  border-color: rgba(203, 213, 225, 0.9);
  border-radius: 16px;
  box-shadow: var(--soft-shadow);
}

.flow-panel {
  padding: 26px;
}

.panel-head {
  padding-bottom: 16px;
  border-bottom: 1px solid #eef2f7;
}

.panel h2 {
  font-size: 19px;
  font-weight: 800;
  color: #0f172a;
}

.panel-head p {
  max-width: 880px;
  margin: 8px 0 0;
  color: #64748b;
  line-height: 1.65;
}

.form-grid {
  gap: 18px;
}

label {
  gap: 7px;
}

label span {
  color: #526176;
  font-weight: 700;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  min-height: 44px;
  border-color: #cbd5e1;
  border-radius: 12px;
  background: #fbfdff;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #aebbd0;
  background: #ffffff;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.requirements-note,
.style-controls,
.style-lock-summary,
.outline-copy-settings {
  border-color: #d8e2f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff, #f3f7fc);
}

.style-lock-summary.locked {
  position: relative;
  border-color: rgba(37, 99, 235, 0.34);
  background: linear-gradient(180deg, #f3f7ff, #eef6ff);
}

.style-lock-summary.locked::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2563eb, #0f766e);
}

.style-option-list {
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: 12px;
  max-height: 288px;
}

.style-option {
  border-color: #dce4ef;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.style-option.recommended {
  border-color: rgba(37, 99, 235, 0.38);
  background: #f7faff;
}

.style-option input {
  accent-color: var(--primary);
}

.asset-item,
.slide-preview,
.outline-row,
.thumb,
.style-moodboard,
.layer-slide,
.export-tile {
  border-color: #dce4ef;
  border-radius: 14px;
  box-shadow: 0 7px 20px rgba(15, 23, 42, 0.045);
}

.outline-row {
  grid-template-columns: 56px minmax(260px, 0.85fr) minmax(420px, 1.35fr);
  padding: 14px;
}

.outline-index {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-weight: 800;
  background: linear-gradient(180deg, #3778ff, #235fdc);
}

.preview-grid,
.asset-grid,
.style-moodboard-grid {
  gap: 18px;
}

.slide-preview,
.style-moodboard {
  padding: 14px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.slide-preview:hover,
.style-moodboard:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.1);
}

.style-moodboard.selected {
  border-color: rgba(37, 99, 235, 0.8);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), 0 18px 38px rgba(37, 99, 235, 0.11);
}

.style-moodboard-head span {
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475569;
  font-weight: 700;
}

.style-moodboard.selected .style-moodboard-head span {
  color: #1d4ed8;
  background: var(--neutral-accent-soft);
}

.style-moodboard-image-btn,
.mini-slide,
.style-moodboard-image-btn img,
.style-moodboard img {
  border-radius: 12px;
}

.layer-slide-head {
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
}

.layer-row {
  grid-template-columns: 108px 1fr 96px;
}

.editor-layout {
  grid-template-columns: 210px minmax(680px, 1fr) 300px;
  gap: 12px;
  align-items: stretch;
  min-height: calc(100vh - 112px);
}

.thumb-panel,
.inspector {
  padding: 16px;
}

.thumb {
  padding: 10px;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.thumb:hover {
  transform: translateY(-1px);
}

.thumb.active {
  border-color: rgba(37, 99, 235, 0.82);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.canvas-toolbar {
  min-height: 56px;
  border-color: #dce4ef;
  border-radius: 14px;
  box-shadow: var(--soft-shadow);
}

.slide-stage {
  min-height: 650px;
  border-color: #d4deea;
  border-radius: 16px;
  background:
    linear-gradient(45deg, rgba(148, 163, 184, 0.13) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(148, 163, 184, 0.13) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.13) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.13) 75%),
    #e8edf5;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0, 0 0;
  background-size: 24px 24px, 24px 24px, 24px 24px, 24px 24px, auto;
}

.slide-canvas {
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 4px;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.26);
}

.slide-el.selected {
  outline: 2px dashed #2563eb;
  outline-offset: 3px;
}

.marquee-selection {
  position: absolute;
  z-index: 999;
  border: 1px solid #2563eb;
  background: rgba(37, 99, 235, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.72) inset;
  pointer-events: none;
}

.marquee-selection.contain {
  border-style: solid;
  background: rgba(37, 99, 235, 0.1);
}

.marquee-selection.intersect {
  border-style: dashed;
  background: rgba(37, 99, 235, 0.17);
}

.smart-guide {
  position: absolute;
  z-index: 998;
  border-color: #ef4444;
  border-style: solid;
  pointer-events: none;
}

.smart-guide.vertical {
  border-left-width: 1px;
}

.smart-guide.horizontal {
  border-top-width: 1px;
}

.element-grip {
  background: #2563eb;
}

.export-tile {
  min-height: 148px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.export-tile.ready {
  border-color: rgba(37, 99, 235, 0.3);
  background: linear-gradient(180deg, #f7faff, #eef6ff);
}

.export-tile strong {
  color: #0f172a;
  font-weight: 900;
}

.empty-state {
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.72);
}

.toast,
.generation-progress {
  border-radius: 14px;
}

.generation-progress {
  border-color: rgba(37, 99, 235, 0.22);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}
@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 96px 1fr;
  }

  .outline-row {
    grid-template-columns: 52px 1fr;
  }

  .outline-row > div:last-child {
    grid-column: 2;
  }

  .editor-layout {
    grid-template-columns: 176px 1fr;
  }
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
  }

  .topbar {
    padding: 16px;
  }

  .rail {
    flex-direction: row;
  }

  .workspace {
    padding: 14px;
  }

  .flow-panel {
    padding: 18px;
  }

  .form-grid,
  .setup-layout-redesigned,
  .mode-workspace-grid,
  .mode-choice-panel,
  .requirements-grid,
  .style-controls,
  .outline-copy-settings,
  .outline-row,
  .editor-layout,
  .export-grid {
    grid-template-columns: 1fr;
  }

  .dropzone {
    grid-template-columns: 1fr;
  }

  .dropzone-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  .outline-row > div:last-child {
    grid-column: auto;
  }
}

/* Small viewport polish */
@media (max-width: 760px) {
  .topbar {
    gap: 14px;
    background: rgba(255, 255, 255, 0.94);
  }

  .topbar h1 {
    font-size: 20px;
  }

  .top-actions {
    width: 100%;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .top-actions .status-dot {
    flex: 1 1 100%;
    justify-content: center;
  }

  .top-actions button {
    flex: 1 1 0;
  }

  .rail {
    position: sticky;
    top: 0;
    z-index: 35;
    gap: 10px;
    padding: 10px 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .rail::-webkit-scrollbar {
    display: none;
  }

  .rail-item {
    min-width: 72px;
    min-height: 68px;
    border-radius: 12px;
  }

  .rail-item span {
    width: 26px;
    height: 26px;
  }

  .panel-head {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .panel-head .button-row {
    width: 100%;
    flex-wrap: wrap;
  }

  .panel-head .button-row button,
  .panel-head > button {
    flex: 1 1 180px;
  }

  .style-moodboard-grid,
  .preview-grid,
  .asset-grid {
    grid-template-columns: 1fr;
  }

  .slide-preview-actions {
    flex-wrap: wrap;
  }

  .slide-preview-actions button {
    flex: 1 1 128px;
  }
}

/* Outline editor: grouped copy blocks for long-form PPT writing */
.outline-list {
  gap: 18px;
}

.outline-row {
  grid-template-columns: 1fr !important;
  gap: 16px;
  padding: 18px;
}

.outline-row > div:last-child {
  grid-column: auto !important;
}

.outline-card-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.outline-title-fields {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
}

.outline-head-body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.outline-page-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.outline-page-summary span {
  padding: 4px 8px;
  border: 1px solid #dbe5f2;
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.outline-groups {
  display: grid;
  gap: 12px;
}

.outline-group {
  border: 1px solid #dce4ef;
  border-radius: 14px;
  background: #f8fafc;
  overflow: hidden;
}

.outline-group summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  color: #0f172a;
  font-weight: 700;
}

.outline-group summary span {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.outline-group[open] summary {
  border-bottom: 1px solid #dce4ef;
  background: #ffffff;
}

.outline-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
}

.outline-field {
  min-width: 0;
}

.outline-field:has(.outline-textarea-large),
.outline-field:has(.detail-copy-field) {
  grid-column: 1 / -1;
}

.outline-field > span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.outline-field > span strong {
  font-size: 13px;
}

.outline-field > span em {
  color: #94a3b8;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.outline-row textarea {
  width: 100%;
  min-height: 0;
  resize: vertical;
  line-height: 1.65;
}

.outline-row .outline-textarea-compact {
  min-height: 92px;
}

.outline-row .outline-textarea-large,
.outline-row .detail-copy-field {
  min-height: 220px;
  max-height: 360px;
  overflow: auto;
}

@media (max-width: 900px) {
  .outline-card-head,
  .outline-title-fields,
  .outline-field-grid {
    grid-template-columns: 1fr;
  }

  .outline-index {
    justify-self: start;
  }

  .outline-group summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Final Apple surface overrides: keep this after older refresh layers. */
html,
body {
  background:
    linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 46%, #ffffff 100%) !important;
}

.workspace {
  padding: 0 !important;
}

.topbar,
.rail,
.flow-panel,
.canvas-area,
.thumb-panel,
.inspector {
  border-color: rgba(60, 60, 67, 0.16) !important;
}

.slide-stage {
  background:
    linear-gradient(90deg, rgba(60, 60, 67, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(60, 60, 67, 0.045) 1px, transparent 1px),
    #f5f5f7 !important;
  background-size: 24px 24px !important;
  background-position: 0 0 !important;
}

.outline-index,
.thumb.active {
  background: #1d1d1f !important;
}

.thumb.active {
  color: #ffffff;
}

.image-to-ppt-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.94), rgba(240, 253, 250, 0.92));
}

.image-to-ppt-panel > div:first-child {
  display: grid;
  gap: 5px;
}

.image-to-ppt-panel strong {
  color: #0f172a;
  font-size: 15px;
}

.image-to-ppt-panel span,
.semantic-rebuild-view span,
.semantic-rebuild-view em {
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
}

.image-to-ppt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.visually-hidden-file {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

.semantic-rebuild-view {
  display: grid;
  gap: 12px;
  min-height: 88px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.semantic-rebuild-view.ready {
  border-color: rgba(5, 150, 105, 0.34);
  background: rgba(240, 253, 244, 0.74);
}

.semantic-rebuild-view.has-fallback {
  border-color: rgba(190, 124, 44, 0.4);
  background: rgba(255, 251, 235, 0.76);
}

.asset-replacement-panel {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.24);
}
.asset-replacement-panel header,
.asset-replacement-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.asset-replacement-panel header span,
.asset-replacement-list article span {
  color: #64748b;
  font-size: 12px;
}
.asset-replacement-list {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow: auto;
}
.asset-replacement-list article {
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
}
.asset-replacement-list article > div { display: grid; gap: 2px; min-width: 0; }
.asset-replacement-list article em { font-style: normal; font-weight: 800; color: #b45309; }
.asset-replacement-list article em.auto { color: #047857; }

.semantic-rebuild-summary {
  display: grid;
  gap: 4px;
}

.semantic-rebuild-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.semantic-rebuild-stats span,
.semantic-slide-list article a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.semantic-slide-list {
  display: grid;
  gap: 8px;
}

.semantic-slide-list article {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
}

.semantic-slide-list article em {
  font-style: normal;
  color: #b45309;
}

/* Dark / light theme switch. Keep this last so it wins over older UI layers. */
:root[data-theme="dark"] {
  --bg: #0b1120;
  --panel: #111827;
  --line: rgba(148, 163, 184, 0.22);
  --line-strong: rgba(203, 213, 225, 0.34);
  --text: #e5edf8;
  --muted: #98a6ba;
  --primary: #60a5fa;
  --primary-strong: #3b82f6;
  --primary-soft: rgba(59, 130, 246, 0.16);
  --accent: #2dd4bf;
  --good: #34d399;
  --danger: #f87171;
  --canvas-bg: #111827;
  --shadow: 0 24px 64px rgba(0, 0, 0, 0.46);
  --soft-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  --apple-bg: #0b1120;
  --apple-surface: rgba(15, 23, 42, 0.78);
  --apple-surface-strong: rgba(17, 24, 39, 0.96);
  --apple-line: rgba(148, 163, 184, 0.22);
  --apple-line-strong: rgba(203, 213, 225, 0.34);
  --apple-text: #e5edf8;
  --apple-muted: #98a6ba;
}

:root[data-theme="dark"],
:root[data-theme="dark"] body {
  color: var(--text) !important;
  background:
    radial-gradient(circle at 16% -10%, rgba(96, 165, 250, 0.18), transparent 34%),
    linear-gradient(180deg, #08111f 0%, #0b1120 48%, #111827 100%) !important;
}

:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .rail,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .flow-panel,
:root[data-theme="dark"] .canvas-area,
:root[data-theme="dark"] .editor-top-ribbon,
:root[data-theme="dark"] .thumb-panel,
:root[data-theme="dark"] .inspector,
:root[data-theme="dark"] .setup-block,
:root[data-theme="dark"] .assets-panel,
:root[data-theme="dark"] .requirements-panel,
:root[data-theme="dark"] .mode-card,
:root[data-theme="dark"] .mode-workspace,
:root[data-theme="dark"] .mode-workspace-flow span,
:root[data-theme="dark"] .requirements-section,
:root[data-theme="dark"] .requirements-note,
:root[data-theme="dark"] .style-controls,
:root[data-theme="dark"] .style-basis-toggle,
:root[data-theme="dark"] .style-lock-summary,
:root[data-theme="dark"] .outline-copy-settings,
:root[data-theme="dark"] .asset-item,
:root[data-theme="dark"] .slide-preview,
:root[data-theme="dark"] .style-moodboard,
:root[data-theme="dark"] .layer-slide,
:root[data-theme="dark"] .export-tile,
:root[data-theme="dark"] .canvas-toolbar,
:root[data-theme="dark"] .dropzone,
:root[data-theme="dark"] .upload-choice,
:root[data-theme="dark"] .upload-choice.reference-choice,
:root[data-theme="dark"] .upload-choice.reference-choice.upload-mode-reference,
:root[data-theme="dark"] .mode-choice-card,
:root[data-theme="dark"] .style-option,
:root[data-theme="dark"] .outline-row,
:root[data-theme="dark"] .outline-group,
:root[data-theme="dark"] .outline-page-summary span,
:root[data-theme="dark"] .outline-group summary,
:root[data-theme="dark"] .outline-group[open] summary,
:root[data-theme="dark"] .single-slide-empty,
:root[data-theme="dark"] .generation-progress,
:root[data-theme="dark"] .inline-image-replace,
:root[data-theme="dark"] .mode-select-fallback,
:root[data-theme="dark"] .image-to-ppt-panel,
:root[data-theme="dark"] .semantic-rebuild-view,
:root[data-theme="dark"] .semantic-slide-list article,
:root[data-theme="dark"] .asset-empty-card,
:root[data-theme="dark"] .image-match-card {
  color: var(--text) !important;
  border-color: var(--line) !important;
  background: rgba(15, 23, 42, 0.76) !important;
  box-shadow: var(--soft-shadow) !important;
}

:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .rail {
  background: rgba(8, 17, 31, 0.82) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] strong,
:root[data-theme="dark"] .panel h2,
:root[data-theme="dark"] .topbar h1,
:root[data-theme="dark"] .export-tile strong,
:root[data-theme="dark"] .style-moodboard-head strong,
:root[data-theme="dark"] .asset-item strong,
:root[data-theme="dark"] .slide-preview strong {
  color: #f8fafc !important;
}

:root[data-theme="dark"] p,
:root[data-theme="dark"] label span,
:root[data-theme="dark"] .topbar p,
:root[data-theme="dark"] .panel-head p,
:root[data-theme="dark"] .requirements-note,
:root[data-theme="dark"] .style-lock-summary,
:root[data-theme="dark"] .style-controls p,
:root[data-theme="dark"] .outline-copy-settings p,
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .asset-item span,
:root[data-theme="dark"] .style-moodboard-head span,
:root[data-theme="dark"] .style-moodboard p,
:root[data-theme="dark"] .mode-workspace-flow span,
:root[data-theme="dark"] .mode-choice-card span,
:root[data-theme="dark"] .mode-choice-card em,
:root[data-theme="dark"] .requirements-section-head span,
:root[data-theme="dark"] .requirements-advanced summary span,
:root[data-theme="dark"] .outline-page-summary span,
:root[data-theme="dark"] .outline-group summary span,
:root[data-theme="dark"] .outline-field > span em,
:root[data-theme="dark"] .dropzone span,
:root[data-theme="dark"] .image-to-ppt-panel span,
:root[data-theme="dark"] .semantic-rebuild-view span,
:root[data-theme="dark"] .semantic-rebuild-view em,
:root[data-theme="dark"] .status-dot {
  color: var(--muted) !important;
}

:root[data-theme="dark"] .dropzone strong,
:root[data-theme="dark"] .requirements-section-head strong,
:root[data-theme="dark"] .requirements-advanced summary span,
:root[data-theme="dark"] .mode-choice-card strong,
:root[data-theme="dark"] .mode-workspace-head h3,
:root[data-theme="dark"] .style-basis-toggle strong,
:root[data-theme="dark"] .image-to-ppt-panel strong,
:root[data-theme="dark"] .semantic-rebuild-view strong,
:root[data-theme="dark"] .outline-group summary {
  color: #f8fafc !important;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  color: var(--text) !important;
  border-color: rgba(148, 163, 184, 0.32) !important;
  background: rgba(15, 23, 42, 0.92) !important;
}

:root[data-theme="dark"] input:hover,
:root[data-theme="dark"] select:hover,
:root[data-theme="dark"] textarea:hover,
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus {
  border-color: rgba(96, 165, 250, 0.72) !important;
  background: rgba(17, 24, 39, 0.98) !important;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15) !important;
}

:root[data-theme="dark"] .ghost-btn,
:root[data-theme="dark"] .icon-btn,
:root[data-theme="dark"] .theme-toggle-btn {
  color: #e5edf8 !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96)) !important;
}

:root[data-theme="dark"] .ghost-btn:hover:not(:disabled),
:root[data-theme="dark"] .icon-btn:hover:not(:disabled),
:root[data-theme="dark"] .theme-toggle-btn:hover:not(:disabled) {
  border-color: rgba(96, 165, 250, 0.68) !important;
  background: rgba(30, 41, 59, 0.98) !important;
}

:root[data-theme="dark"] .primary-btn {
  border-color: rgba(96, 165, 250, 0.82) !important;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8) !important;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.3) !important;
}

:root[data-theme="dark"] .status-dot,
:root[data-theme="dark"] .style-moodboard-head span,
:root[data-theme="dark"] .rail-item span,
:root[data-theme="dark"] .mode-choice-badge,
:root[data-theme="dark"] .asset-badge,
:root[data-theme="dark"] .outline-page-summary span,
:root[data-theme="dark"] .semantic-rebuild-stats span,
:root[data-theme="dark"] .semantic-slide-list article a {
  border-color: rgba(148, 163, 184, 0.26) !important;
  background: rgba(30, 41, 59, 0.78) !important;
}

:root[data-theme="dark"] .status-dot.ready {
  color: #86efac !important;
  background: rgba(22, 101, 52, 0.28) !important;
}

:root[data-theme="dark"] .rail-item {
  color: var(--muted) !important;
  background: transparent !important;
}

:root[data-theme="dark"] .rail-item:hover,
:root[data-theme="dark"] .rail-item.active,
:root[data-theme="dark"] .mode-card.selected,
:root[data-theme="dark"] .mode-choice-card.selected,
:root[data-theme="dark"] .mode-workspace.active,
:root[data-theme="dark"] .style-option.recommended,
:root[data-theme="dark"] .style-moodboard.selected,
:root[data-theme="dark"] .export-tile.ready {
  color: var(--neutral-text) !important;
  border-color: rgba(96, 165, 250, 0.62) !important;
  background: linear-gradient(180deg, rgba(30, 64, 175, 0.3), rgba(15, 23, 42, 0.9)) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12), var(--soft-shadow) !important;
}

:root[data-theme="dark"] .dropzone:hover,
:root[data-theme="dark"] .dropzone:focus-visible,
:root[data-theme="dark"] .dropzone.dragging {
  border-color: rgba(45, 212, 191, 0.76) !important;
  background: rgba(13, 148, 136, 0.12) !important;
}

:root[data-theme="dark"] .dropzone-icon {
  color: #bfdbfe !important;
  background: rgba(37, 99, 235, 0.22) !important;
}

:root[data-theme="dark"] .mode-panel-muted {
  opacity: 0.82 !important;
}

:root[data-theme="dark"] .layer-slide-head,
:root[data-theme="dark"] .style-lock-summary.locked,
:root[data-theme="dark"] .requirements-section-primary {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.94)) !important;
}

:root[data-theme="dark"] .slide-stage {
  border-color: rgba(148, 163, 184, 0.28) !important;
  background:
    linear-gradient(90deg, rgba(148, 163, 184, 0.09) 1px, transparent 1px),
    linear-gradient(rgba(148, 163, 184, 0.09) 1px, transparent 1px),
    #0f172a !important;
  background-size: 24px 24px !important;
}

:root[data-theme="dark"] .slide-canvas {
  border-color: rgba(226, 232, 240, 0.2) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58) !important;
}

:root[data-theme="dark"] .slide-canvas.external-drop-active {
  outline-color: #34d399 !important;
  box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.18), 0 28px 80px rgba(0, 0, 0, 0.58) !important;
}

:root[data-theme="dark"] .mini-slide,
:root[data-theme="dark"] .asset-item img,
:root[data-theme="dark"] .style-moodboard-image-btn,
:root[data-theme="dark"] .style-moodboard-image-btn img,
:root[data-theme="dark"] .style-moodboard img {
  background-color: rgba(15, 23, 42, 0.9) !important;
}

:root[data-theme="dark"] .generation-progress-bar {
  background: rgba(51, 65, 85, 0.9) !important;
}

:root[data-theme="dark"] .generation-progress-bar span,
:root[data-theme="dark"] .style-lock-summary.locked::before {
  background: linear-gradient(90deg, #60a5fa, #2dd4bf) !important;
}

:root[data-theme="dark"] .outline-index,
:root[data-theme="dark"] .thumb.active {
  color: #ffffff !important;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8) !important;
}

/* Editor polish overrides: stable icon labels and WPS-like canvas view states. */
.editor-ribbon .ribbon-tool::before,
.editor-ribbon #addTextBtn::before,
.editor-ribbon #deleteElementBtn::before {
  content: "";
  color: currentColor;
}

#selectToolBtn::before { content: "A"; font-size: 13px; font-weight: 900; transform: rotate(-18deg); }
#panToolBtn::before { content: "H"; font-size: 13px; font-weight: 900; }
#fitSlideBtn::before { content: "[]"; font-size: 11px; font-weight: 900; }
#fitWidthBtn::before { content: "<>"; font-size: 11px; font-weight: 900; }
#toggleRulerBtn::before { content: "R"; font-size: 12px; font-weight: 900; }
#toggleGuidesBtn::before { content: "+"; font-size: 15px; font-weight: 900; }
#toggleGridBtn::before { content: "#"; font-size: 14px; font-weight: 900; }
#toggleSnapBtn::before { content: "S"; font-size: 12px; font-weight: 900; }
#addTextBtn::before { content: "T"; font-weight: 900; }
#addRectBtn::before { content: "[]"; }
#addEllipseBtn::before { content: "O"; }
#addLineBtn::before { content: "/"; font-weight: 900; }
#textBoldBtn::before { content: "B"; font-weight: 900; }
#textAlignLeftBtn::before { content: "L"; font-size: 12px; font-weight: 900; }
#textAlignCenterBtn::before { content: "C"; font-size: 12px; font-weight: 900; }
#textAlignRightBtn::before { content: "R"; font-size: 12px; font-weight: 900; }
#duplicateElementBtn::before { content: "2"; font-weight: 900; }
#bringForwardBtn::before { content: "Up"; font-size: 10px; font-weight: 900; }
#sendBackwardBtn::before { content: "Dn"; font-size: 10px; font-weight: 900; }
#bringToFrontBtn::before { content: "Top"; font-size: 9px; font-weight: 900; }
#sendToBackBtn::before { content: "Bot"; font-size: 9px; font-weight: 900; }
#alignLeftBtn::before { content: "|<"; font-size: 10px; font-weight: 900; }
#alignCenterBtn::before { content: "|"; font-size: 13px; font-weight: 900; }
#alignRightBtn::before { content: ">|"; font-size: 10px; font-weight: 900; }
#alignTopBtn::before { content: "T"; font-size: 12px; font-weight: 900; }
#alignMiddleBtn::before { content: "M"; font-size: 12px; font-weight: 900; }
#alignBottomBtn::before { content: "B"; font-size: 12px; font-weight: 900; }
#distributeHorizontalBtn::before { content: "H"; font-size: 12px; font-weight: 900; }
#distributeVerticalBtn::before { content: "V"; font-size: 12px; font-weight: 900; }
#sameWidthBtn::before { content: "W"; font-size: 12px; font-weight: 900; }
#sameHeightBtn::before { content: "H"; font-size: 12px; font-weight: 900; }
#sameSizeBtn::before { content: "1:1"; font-size: 9px; font-weight: 900; }
#groupElementsBtn::before { content: "G"; font-size: 12px; font-weight: 900; }
#ungroupElementsBtn::before { content: "UG"; font-size: 9px; font-weight: 900; }
#rotateLeftBtn::before { content: "<"; font-weight: 900; }
#rotateRightBtn::before { content: ">"; font-weight: 900; }
#toggleLockBtn::before { content: "Lk"; font-size: 9px; font-weight: 900; }
#undoEditBtn::before { content: "<"; font-weight: 900; }
#redoEditBtn::before { content: ">"; font-weight: 900; }
#formatPainterBtn::before { content: "P"; font-size: 12px; font-weight: 900; }
#cutElementBtn::before { content: "X"; font-size: 12px; font-weight: 900; }
#copyElementBtn::before { content: "C"; font-size: 12px; font-weight: 900; }
#pasteElementBtn::before { content: "V"; font-size: 12px; font-weight: 900; }
#deleteElementBtn::before { content: "X"; font-weight: 900; }

.office-canvas-shell.rulers-hidden {
  grid-template-rows: minmax(0, 1fr) 32px;
}

.office-canvas-shell.rulers-hidden .office-ruler-horizontal,
.office-canvas-shell.rulers-hidden .office-ruler-vertical {
  display: none;
}

.office-canvas-shell.rulers-hidden .office-canvas-body {
  grid-template-columns: minmax(0, 1fr);
}

.office-canvas-shell.guides-hidden .smart-guide {
  display: none;
}

:root[data-theme="dark"] .office-canvas-shell,
:root[data-theme="dark"] .office-canvas-body {
  color: #dbe7f6 !important;
  background: #0b1220 !important;
}

:root[data-theme="dark"] .office-ruler,
:root[data-theme="dark"] .office-status-bar {
  color: #a8b7cc !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  background:
    linear-gradient(#243247, #243247) left bottom / 100% 1px no-repeat,
    #111827 !important;
}

:root[data-theme="dark"] .office-status-bar {
  background: linear-gradient(180deg, #111827, #0f172a) !important;
}

:root[data-theme="dark"] .ribbon-title,
:root[data-theme="dark"] .thumb-title,
:root[data-theme="dark"] .editor-layer-head span,
:root[data-theme="dark"] .inspector-body label span {
  color: #a8b7cc !important;
}

/* Desktop editor layout hardening: keep previews, ribbon, and canvas in their lanes. */
@media (min-width: 960px) {
  .editor-layout {
    grid-template-columns: clamp(176px, 17vw, 230px) minmax(440px, 1fr) clamp(220px, 22vw, 300px);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
  }

  .thumb-panel,
  .canvas-area,
  .inspector,
  .editor-top-ribbon {
    min-width: 0;
    overflow: hidden;
  }

  .thumbnail-list {
    align-content: start;
    gap: 10px;
    max-height: calc(100vh - 170px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
  }

  .thumb {
    width: 100%;
    box-sizing: border-box;
  }

  .thumb .mini-slide {
    width: 100% !important;
    max-width: 172px;
    height: auto !important;
    aspect-ratio: var(--slide-aspect, 16 / 9);
    transform: none !important;
    transform-origin: center center;
  }

  .thumb .slide-el {
    pointer-events: none;
  }

  .canvas-toolbar {
    max-height: 148px;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .editor-ribbon {
    align-items: center;
    gap: 6px;
  }

  .ribbon-group {
    gap: 4px;
    padding: 5px 6px;
  }

  .ribbon-tool,
  .ribbon-select {
    min-height: 28px;
    padding: 5px 7px;
    font-size: 11px;
  }

  .ribbon-number {
    width: 54px;
    min-height: 28px;
  }

  .ribbon-color {
    width: 32px;
    min-height: 28px;
  }

  .office-canvas-shell {
    min-height: calc(100vh - 260px);
  }
}

/* Keep the edit step as a PowerPoint/WPS-style desktop workbench at every width. */
#step-edit.editor-layout {
  grid-template-columns: clamp(176px, 17vw, 230px) minmax(440px, 1fr) clamp(220px, 22vw, 300px) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: calc(100vh - 112px);
}

.workspace:has(#step-edit:not(.hidden)) {
  overflow-x: auto;
}

#step-edit .thumb-panel,
#step-edit .canvas-area,
#step-edit .inspector,
#step-edit .editor-top-ribbon {
  min-width: 0;
  overflow: hidden;
}

#step-edit .editor-top-ribbon {
  grid-column: 1 / -1;
  grid-row: 1;
}

#step-edit .thumb-panel {
  grid-column: 1;
  grid-row: 2;
}

#step-edit .canvas-area {
  grid-column: 2;
  grid-row: 2;
  min-height: 0;
}

#step-edit .inspector {
  grid-column: 3;
  grid-row: 2;
  min-height: 0;
  overflow-y: auto;
}

#step-edit .thumb-panel,
#step-edit .canvas-area,
#step-edit .inspector {
  align-self: start;
  height: min(620px, calc(100vh - 206px));
  min-height: 440px;
}

#step-edit .thumbnail-list {
  align-content: start;
  gap: 10px;
  max-height: calc(100% - 44px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

#step-edit .thumb {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 8px;
}

#step-edit .thumb .mini-slide {
  display: block;
  width: 100% !important;
  max-width: none;
  height: auto !important;
  aspect-ratio: var(--slide-aspect, 16 / 9);
  transform: none !important;
}

#step-edit .thumb-panel .panel-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  background: transparent !important;
}

#step-edit .thumb-panel .panel-head h2 {
  color: var(--text) !important;
  line-height: 1.2;
}

#step-edit .thumbnail-list:empty::before {
  content: "鏆傛棤椤甸潰";
  display: grid;
  place-items: center;
  min-height: 96px;
  color: var(--muted);
  font-size: 13px;
  border: 1px dashed rgba(148, 163, 184, 0.36);
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.08);
}

#step-edit .thumb-panel-actions .icon-btn {
  flex: 0 0 auto;
  width: 30px;
  min-height: 30px;
  border-radius: 9px;
  font-size: 15px;
}

#step-edit #addSlideBtn {
  color: #ffffff;
  border-color: rgba(37, 99, 235, 0.74);
  background: #2563eb;
}

#step-edit .canvas-toolbar {
  height: 62px;
  max-height: 62px;
  padding: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

#step-edit .editor-ribbon {
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 4px;
  width: 100%;
}

#step-edit .ribbon-group {
  flex: 0 0 auto;
  flex-wrap: nowrap !important;
  min-height: 46px;
  padding: 5px 4px;
}

#step-edit .ribbon-title {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding-right: 5px;
  border-right: 1px solid rgba(148, 163, 184, 0.24);
  white-space: nowrap;
}

#step-edit .ribbon-tool,
#step-edit .ribbon-select,
#step-edit .ribbon-number,
#step-edit .ribbon-color {
  flex: 0 0 auto;
}

#step-edit .ribbon-select {
  max-width: 108px;
}

#step-edit #canvasZoomSelect {
  width: 78px;
}

#step-edit .inspector-toolbox {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

#step-edit .inspector-tool-section {
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.72);
}

#step-edit .inspector-tool-section h3 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

#step-edit .inspector-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

#step-edit .inspector-tool-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#step-edit .inspector-toolbox .ghost-btn,
#step-edit .inspector-toolbox .danger-btn,
#step-edit .inspector-toolbox .ribbon-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
}

#step-edit .inspector-toolbox .ribbon-tool::before,
#step-edit .inspector-toolbox #deleteElementBtn::before {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  font-size: 11px;
  line-height: 1;
}

:root[data-theme="dark"] #step-edit .inspector-tool-section {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.58);
}

:root[data-theme="dark"] #step-edit .editor-top-ribbon {
  border-color: rgba(148, 163, 184, 0.24) !important;
  background: rgba(8, 17, 31, 0.94) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24) !important;
}

:root[data-theme="dark"] #step-edit .canvas-toolbar {
  background: rgba(8, 17, 31, 0.86) !important;
}

:root[data-theme="dark"] #step-edit .editor-ribbon {
  background: transparent !important;
}

:root[data-theme="dark"] #step-edit .ribbon-group {
  border-color: rgba(148, 163, 184, 0.22) !important;
  background: rgba(15, 23, 42, 0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] #step-edit .ribbon-title {
  color: #9fb3cf !important;
  border-right-color: rgba(148, 163, 184, 0.24) !important;
}

:root[data-theme="dark"] #step-edit .ribbon-tool,
:root[data-theme="dark"] #step-edit .ribbon-select,
:root[data-theme="dark"] #step-edit .ribbon-number {
  color: #e5edf8 !important;
  border-color: rgba(148, 163, 184, 0.26) !important;
  background: #172033 !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] #step-edit .ribbon-color {
  border-color: rgba(148, 163, 184, 0.26) !important;
  background: #172033 !important;
}

:root[data-theme="dark"] #step-edit .ribbon-select option {
  color: #e5edf8;
  background: #111827;
}

:root[data-theme="dark"] #step-edit .ribbon-tool:hover:not(:disabled),
:root[data-theme="dark"] #step-edit .ribbon-select:hover:not(:disabled),
:root[data-theme="dark"] #step-edit .ribbon-number:hover:not(:disabled),
:root[data-theme="dark"] #step-edit .ribbon-color:hover:not(:disabled) {
  border-color: rgba(96, 165, 250, 0.58) !important;
  background: #1e2a40 !important;
}

:root[data-theme="dark"] #step-edit .ribbon-tool.active {
  color: #ffffff !important;
  border-color: #60a5fa !important;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8) !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28) !important;
}

:root[data-theme="dark"] #step-edit .ribbon-tool.sticky {
  border-color: #34d399 !important;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.22), 0 10px 22px rgba(52, 211, 153, 0.18) !important;
}

:root[data-theme="dark"] #step-edit .inspector-toolbox .ribbon-tool {
  color: #e5edf8 !important;
  border-color: rgba(148, 163, 184, 0.26) !important;
  background: #172033 !important;
}

:root[data-theme="dark"] #step-edit .inspector-toolbox .ribbon-tool:hover:not(:disabled) {
  border-color: rgba(96, 165, 250, 0.58) !important;
  background: #1e2a40 !important;
}

#step-edit .office-canvas-shell {
  height: min(620px, calc(100vh - 206px));
  min-height: 440px;
  grid-template-rows: 28px minmax(0, 1fr) 32px auto;
}

#step-edit .office-canvas-body {
  min-height: 0;
  overflow: hidden;
}

#step-edit .slide-stage {
  display: block !important;
  box-sizing: border-box;
  height: 100%;
  min-height: 0 !important;
  padding: 24px 30px;
  overflow: auto;
  border: 0;
  border-radius: 0;
}

/* Product UI polish pass: calmer surfaces, denser editor controls, clearer hierarchy. */
:root {
  --surface-1: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #eef3fb;
  --blue-soft: rgba(37, 99, 235, 0.1);
  --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.13);
  --card-radius: 14px;
}

body {
  background:
    radial-gradient(circle at 18% -12%, rgba(37, 99, 235, 0.08), transparent 34%),
    linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
}

.app-shell {
  grid-template-columns: 92px 1fr;
  grid-template-rows: 68px 1fr;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0 22px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(148, 163, 184, 0.18);
}

.topbar h1 {
  font-size: 18px;
  font-weight: 900;
}

.topbar p {
  margin-top: 4px;
  font-size: 12px;
}

.top-actions {
  gap: 8px;
}

.primary-btn,
.ghost-btn,
.danger-btn,
.icon-btn,
.ribbon-tool,
.ribbon-select,
.ribbon-number {
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.primary-btn {
  border-color: #1d4ed8;
  background: linear-gradient(180deg, #2f6df1, #1d4ed8);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.2);
  font-weight: 800;
}

.primary-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.25);
}

.ghost-btn,
.icon-btn {
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.ghost-btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled) {
  border-color: rgba(37, 99, 235, 0.42);
  background: #ffffff;
  box-shadow: var(--focus-ring);
}

.rail {
  gap: 10px;
  padding: 14px 10px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.rail-item {
  min-height: 68px;
  border-radius: 14px;
}

.rail-item span {
  width: 28px;
  height: 28px;
  font-weight: 900;
}

.rail-item strong {
  max-width: 68px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-item:hover {
  color: var(--primary);
  background: rgba(37, 99, 235, 0.06);
}

.rail-item.active {
  border-color: rgba(37, 99, 235, 0.22);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.workspace {
  padding: 18px;
}

.panel,
.setup-block,
.requirements-section,
.style-controls,
.style-moodboard,
.slide-preview,
.asset-item,
.export-tile,
.thumb-panel,
.inspector,
.canvas-area {
  border-color: rgba(148, 163, 184, 0.24);
  border-radius: var(--card-radius);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.07);
}

.flow-panel {
  padding: 20px;
}

.panel-head {
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.panel-head h2 {
  font-size: 20px;
  font-weight: 900;
}

.panel-head p {
  max-width: 860px;
  color: #64748b;
  line-height: 1.6;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border-color: rgba(148, 163, 184, 0.34);
  border-radius: 10px;
  background: #ffffff;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.58);
  box-shadow: var(--focus-ring);
}

.creation-mode-grid,
.mode-workspace-grid,
.upload-choice-grid {
  gap: 14px;
}

.mode-card,
.mode-workspace,
.upload-choice,
.dropzone {
  border-radius: 16px;
  border-color: rgba(148, 163, 184, 0.26);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.88));
}

.mode-card.selected,
.mode-workspace.active,
.upload-choice.active {
  border-color: rgba(37, 99, 235, 0.45);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.92));
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.12);
}

.preview-grid {
  gap: 16px;
}

.slide-preview {
  padding: 14px;
  overflow: hidden;
}

.slide-preview .mini-slide,
.style-moodboard img,
.design-preview-img {
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.slide-preview strong {
  display: block;
  margin-top: 9px;
  line-height: 1.35;
}

.single-design-mode {
  box-shadow: none;
}

#step-edit {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

#step-edit .editor-layout {
  gap: 12px;
}

#step-edit .editor-top-ribbon,
#step-edit .thumb-panel,
#step-edit .canvas-area,
#step-edit .inspector {
  border-color: rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
}

#step-edit .canvas-toolbar {
  height: 58px;
  max-height: 58px;
  padding: 7px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

#step-edit .ribbon-group {
  min-height: 42px;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.82);
}

#step-edit .ribbon-title {
  color: #64748b;
  font-size: 10px;
}

#step-edit .ribbon-tool,
#step-edit .ribbon-select,
#step-edit .ribbon-number,
#step-edit .ribbon-color {
  min-height: 30px;
  border-color: rgba(148, 163, 184, 0.28);
  border-radius: 9px;
  background: #ffffff;
  box-shadow: none;
}

#step-edit .ribbon-tool:hover:not(:disabled),
#step-edit .ribbon-select:hover:not(:disabled),
#step-edit .ribbon-number:hover:not(:disabled) {
  border-color: rgba(37, 99, 235, 0.45);
  background: #f8fbff;
}

#step-edit .office-canvas-shell {
  border-radius: 0 0 16px 16px;
  background: #e8edf5;
}

#step-edit .slide-stage {
  background:
    linear-gradient(45deg, rgba(148, 163, 184, 0.12) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(148, 163, 184, 0.12) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.12) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.12) 75%),
    #dfe5ee;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  background-size: 24px 24px;
}

#step-edit .slide-canvas {
  border: 1px solid rgba(100, 116, 139, 0.28);
  border-radius: 3px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.26);
}

#step-edit .office-ruler,
#step-edit .office-status-bar {
  background: rgba(248, 250, 252, 0.9);
}

#step-edit .thumb {
  border-radius: 12px;
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.86);
}

#step-edit .thumb.active {
  border-color: rgba(37, 99, 235, 0.68);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

#step-edit .inspector-body {
  padding: 10px;
}

#step-edit .inspector-grid {
  gap: 9px;
}

#step-edit .inspector-grid label,
.copy-ai-card,
.image-match-card,
.replace-image-control {
  border-radius: 12px;
}

.floating-editor-tools {
  border-color: rgba(37, 99, 235, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 54px rgba(15, 23, 42, 0.2);
}

.floating-editor-tools .mini-btn,
.floating-editor-tools input,
.floating-editor-tools select {
  border-radius: 9px;
}

.generation-progress {
  border-radius: 16px;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.14);
}

#toast {
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.18);
}

/* Final flow polish: Apple-like, clear 7-step product navigation. */
.app-shell {
  grid-template-columns: 104px minmax(0, 1fr);
}

.rail {
  gap: 8px;
  padding: 12px 8px;
}

.rail-item {
  min-height: 64px;
  padding: 8px 4px;
}

.rail-item strong {
  max-width: 86px;
  font-size: 11px;
  font-weight: 800;
}

.rail-item span {
  width: 26px;
  height: 26px;
  font-size: 12px;
}

.flow-panel,
.setup-block,
.requirements-section,
.style-controls,
.style-lock-summary,
.style-option,
.style-moodboard,
.slide-preview,
.image-to-ppt-panel,
.export-tile {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.panel-head h2 {
  letter-spacing: 0;
}

.panel-head p {
  color: #6e6e73;
}

#step-imageppt .image-to-ppt-panel {
  max-width: 980px;
}

:root[data-theme="dark"] .flow-panel,
:root[data-theme="dark"] .setup-block,
:root[data-theme="dark"] .requirements-section,
:root[data-theme="dark"] .style-controls,
:root[data-theme="dark"] .style-lock-summary,
:root[data-theme="dark"] .style-option,
:root[data-theme="dark"] .style-moodboard,
:root[data-theme="dark"] .slide-preview,
:root[data-theme="dark"] .image-to-ppt-panel,
:root[data-theme="dark"] .export-tile {
  background: rgba(15, 23, 42, 0.78) !important;
}
@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 78px 1fr;
  }

  .workspace {
    padding: 12px;
  }

  #step-edit .editor-layout {
    grid-template-columns: 150px minmax(0, 1fr) 260px;
  }
}

:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at 18% -12%, rgba(96, 165, 250, 0.16), transparent 34%),
    linear-gradient(180deg, #08111f 0%, #0b1120 52%, #0f172a 100%) !important;
}

:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .rail,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .setup-block,
:root[data-theme="dark"] .requirements-section,
:root[data-theme="dark"] .style-controls,
:root[data-theme="dark"] .style-moodboard,
:root[data-theme="dark"] .slide-preview,
:root[data-theme="dark"] .asset-item,
:root[data-theme="dark"] .export-tile,
:root[data-theme="dark"] #step-edit .editor-top-ribbon,
:root[data-theme="dark"] #step-edit .thumb-panel,
:root[data-theme="dark"] #step-edit .canvas-area,
:root[data-theme="dark"] #step-edit .inspector,
:root[data-theme="dark"] .floating-editor-tools {
  border-color: rgba(148, 163, 184, 0.2) !important;
  background: rgba(15, 23, 42, 0.76) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.32) !important;
}

:root[data-theme="dark"] .mode-card,
:root[data-theme="dark"] .mode-workspace,
:root[data-theme="dark"] .upload-choice,
:root[data-theme="dark"] .dropzone,
:root[data-theme="dark"] #step-edit .ribbon-group,
:root[data-theme="dark"] #step-edit .thumb {
  border-color: rgba(148, 163, 184, 0.2) !important;
  background: rgba(17, 24, 39, 0.76) !important;
}

:root[data-theme="dark"] .mode-card.selected,
:root[data-theme="dark"] .mode-workspace.active,
:root[data-theme="dark"] .rail-item.active {
  border-color: rgba(96, 165, 250, 0.48) !important;
  background: rgba(37, 99, 235, 0.18) !important;
}

:root[data-theme="dark"] #step-edit .office-canvas-shell,
:root[data-theme="dark"] #step-edit .slide-stage {
  background-color: #0f172a !important;
}

:root[data-theme="dark"] #step-edit .office-ruler,
:root[data-theme="dark"] #step-edit .office-status-bar,
:root[data-theme="dark"] #step-edit .canvas-toolbar {
  color: #9fb3cf !important;
  background: rgba(8, 17, 31, 0.82) !important;
}

:root[data-theme="dark"] .speaker-notes-panel {
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(8, 17, 31, 0.86);
}

:root[data-theme="dark"] #speakerNotesInput {
  border-color: rgba(71, 85, 105, 0.7);
  background: rgba(15, 23, 42, 0.84);
  color: rgba(226, 232, 240, 0.95);
}

:root[data-theme="dark"] #speakerNotesInput:focus {
  border-color: rgba(96, 165, 250, 0.78);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16);
}

:root[data-theme="dark"] .floating-editor-tools::after {
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.96);
}

/* Apple Store visual pass: calm retail-style canvas, clean cards, strong spacing. */
:root {
  --apple-bg: #f5f5f7;
  --apple-card: #ffffff;
  --apple-card-soft: #fbfbfd;
  --apple-text: #1d1d1f;
  --apple-muted: #6e6e73;
  --apple-blue: #0071e3;
  --apple-blue-hover: #0077ed;
  --apple-border: rgba(0, 0, 0, 0.08);
  --apple-hairline: rgba(0, 0, 0, 0.06);
  --apple-shadow: 0 18px 46px rgba(0, 0, 0, 0.06);
  --apple-shadow-hover: 0 26px 70px rgba(0, 0, 0, 0.1);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  background:
    radial-gradient(circle at 18% -10%, rgba(255, 255, 255, 0.95), transparent 30%),
    var(--apple-bg);
  color: var(--apple-text);
}

.app-shell {
  grid-template-columns: 118px minmax(0, 1fr);
  grid-template-rows: 96px 1fr;
  gap: 0;
  background: transparent;
}

.topbar {
  align-self: start;
  min-height: 74px;
  margin: 18px 24px 0;
  padding: 0 22px;
  border: 1px solid var(--apple-border);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.045);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
}

.topbar h1 {
  color: var(--apple-text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
}

.topbar p {
  margin-top: 5px;
  color: var(--apple-muted);
  font-size: 13px;
}

.top-actions {
  gap: 8px;
}

.status-dot {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(52, 199, 89, 0.2);
  border-radius: 999px;
  background: rgba(52, 199, 89, 0.1);
  color: #1d7f3a;
  white-space: nowrap;
}

.primary-btn,
.ghost-btn,
.danger-btn,
.icon-btn {
  border-radius: 999px;
  min-height: 40px;
  padding-inline: 18px;
  font-weight: 600;
  letter-spacing: 0;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.primary-btn {
  border-color: transparent;
  background: var(--apple-blue);
  box-shadow: 0 10px 24px rgba(0, 113, 227, 0.22);
}

.primary-btn:hover:not(:disabled) {
  background: var(--apple-blue-hover);
  box-shadow: 0 14px 30px rgba(0, 113, 227, 0.28);
  transform: translateY(-1px);
}

.ghost-btn,
.icon-btn {
  border-color: var(--apple-border);
  background: rgba(255, 255, 255, 0.86);
  color: var(--apple-text);
  box-shadow: none;
}

.ghost-btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled) {
  border-color: rgba(0, 113, 227, 0.22);
  background: #ffffff;
  color: var(--apple-blue);
  transform: translateY(-1px);
}

.danger-btn {
  border-color: rgba(255, 59, 48, 0.18);
  background: rgba(255, 59, 48, 0.08);
  color: #d70015;
}

.theme-toggle-btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: #ffffff;
}

.rail {
  align-self: start;
  position: sticky;
  top: 112px;
  max-height: calc(100vh - 132px);
  margin: 12px 0 24px 18px;
  padding: 12px 8px;
  border: 1px solid var(--apple-border);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.055);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
}

.rail-item {
  min-height: 68px;
  border-radius: 18px;
  color: #515154;
  background: transparent;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.rail-item:hover {
  background: rgba(0, 0, 0, 0.035);
  color: var(--apple-text);
  transform: translateY(-1px);
}

.rail-item span {
  width: 28px;
  height: 28px;
  background: #e8e8ed;
  color: #6e6e73;
  font-weight: 700;
}

.rail-item strong {
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.rail-item.active {
  border-color: transparent;
  background: #eaf3ff;
  color: var(--apple-blue);
  box-shadow: inset 0 0 0 1px rgba(0, 113, 227, 0.08);
}

.rail-item.active span {
  background: var(--apple-blue);
  color: #ffffff;
}

.workspace {
  padding: 12px 24px 32px 20px;
}

.panel,
.flow-panel,
.setup-block,
.requirements-section,
.style-controls,
.style-lock-summary,
.style-option,
.style-moodboard,
.slide-preview,
.asset-item,
.image-to-ppt-panel,
.export-tile,
.thumb-panel,
.canvas-area,
.inspector,
#step-edit .editor-top-ribbon {
  border: 1px solid var(--apple-border);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--apple-shadow);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
}

.flow-panel {
  min-height: calc(100vh - 142px);
  padding: 28px 28px 32px;
}

.panel-head {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--apple-hairline);
}

.panel-head h2 {
  color: var(--apple-text);
  font-size: 28px;
  font-weight: 750;
  line-height: 1.12;
}

.panel-head p {
  margin-top: 8px;
  max-width: 880px;
  color: var(--apple-muted);
  font-size: 15px;
  line-height: 1.55;
}

.form-grid,
.setup-layout-redesigned {
  gap: 18px;
}

label span,
.ribbon-title,
.asset-list-head span,
.style-moodboard-head span,
.export-tile span {
  color: var(--apple-muted);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  background: #ffffff;
  color: var(--apple-text);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(0, 113, 227, 0.55);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12);
}

.mode-card,
.mode-workspace,
.upload-choice,
.dropzone,
.outline-copy-settings,
.copy-ai-card,
.image-match-card,
.replace-image-control {
  border-radius: 24px;
  border-color: var(--apple-border);
  background: var(--apple-card);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.045);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.mode-card:hover,
.mode-workspace:hover,
.upload-choice:hover,
.style-moodboard:hover,
.slide-preview:hover,
.export-tile:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--apple-shadow-hover);
}

.mode-card.selected,
.mode-workspace.active,
.upload-choice.active,
.style-moodboard.selected,
.export-tile.ready {
  border-color: rgba(0, 113, 227, 0.22);
  background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%);
  box-shadow: 0 18px 48px rgba(0, 113, 227, 0.12);
}

.mode-card strong,
.mode-workspace strong,
.upload-choice strong,
.style-moodboard-head strong,
.export-tile strong {
  color: var(--apple-text);
  font-weight: 750;
}

.mode-card em,
.mode-workspace em,
.upload-choice span,
.style-moodboard p {
  color: var(--apple-muted);
  line-height: 1.55;
}

.style-option-list,
.style-moodboard-grid,
.preview-grid,
.export-grid {
  gap: 18px;
}

.style-moodboard,
.slide-preview,
.export-tile {
  overflow: hidden;
}

.style-moodboard-image-btn,
.style-moodboard-image-btn img,
.style-moodboard img,
.slide-preview .mini-slide,
.design-preview-img,
.semantic-rebuild-thumb {
  border-radius: 18px;
}

.export-tile {
  min-height: 148px;
  padding: 28px;
  background: var(--apple-card);
}

.export-tile strong {
  font-size: 28px;
  line-height: 1.1;
}

.generation-progress,
#toast,
.floating-editor-tools {
  border-color: var(--apple-border);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.14);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
}

#toast {
  border-radius: 999px;
}

#step-edit {
  background: transparent;
}

#step-edit .editor-top-ribbon,
#step-edit .thumb-panel,
#step-edit .canvas-area,
#step-edit .inspector {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--apple-shadow);
}

#step-edit .canvas-toolbar {
  border-radius: 24px 24px 0 0;
  background: rgba(255, 255, 255, 0.84);
  flex-wrap: wrap;
  height: auto;
  max-height: none;
  overflow: visible;
  row-gap: 8px;
}

#step-edit .ribbon-group,
#step-edit .inspector-tool-section,
#step-edit .thumb {
  border-radius: 16px;
  border-color: var(--apple-border);
  background: var(--apple-card-soft);
}

#step-edit .ribbon-tool,
#step-edit .ribbon-select,
#step-edit .ribbon-number,
#step-edit .ribbon-color,
#step-edit .inspector-toolbox .ghost-btn,
#step-edit .inspector-toolbox .danger-btn {
  border-radius: 999px;
}

#step-edit .office-canvas-shell {
  border-radius: 0 0 24px 24px;
  background: #f5f5f7;
}

#step-edit .slide-stage {
  background:
    linear-gradient(45deg, rgba(0, 0, 0, 0.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0, 0, 0, 0.035) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.035) 75%),
    #efeff4;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  background-size: 24px 24px;
}

#step-edit .slide-canvas {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.16);
}

#step-edit .editor-top-ribbon {
  overflow: visible;
}

#step-edit .panel-head h2 {
  font-size: 24px;
}

#step-edit .inspector-toolbox {
  gap: 12px;
}

#step-edit .inspector-tool-section {
  padding: 14px;
}

#step-edit .inspector-tool-section h3 {
  color: var(--apple-muted);
  font-size: 12px;
  font-weight: 700;
}

#step-edit .thumbnail-list {
  scrollbar-width: thin;
}

#step-edit .thumbnail-list::-webkit-scrollbar,
.workspace::-webkit-scrollbar,
.rail::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#step-edit .thumbnail-list::-webkit-scrollbar-thumb,
.workspace::-webkit-scrollbar-thumb,
.rail::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
}

#step-edit .thumbnail-list::-webkit-scrollbar-track,
.workspace::-webkit-scrollbar-track,
.rail::-webkit-scrollbar-track {
  background: transparent;
}

:root[data-theme="dark"] {
  --apple-bg: #000000;
  --apple-card: #161617;
  --apple-card-soft: #1d1d1f;
  --apple-text: #f5f5f7;
  --apple-muted: #a1a1a6;
  --apple-border: rgba(255, 255, 255, 0.12);
  --apple-hairline: rgba(255, 255, 255, 0.08);
  --apple-shadow: 0 18px 46px rgba(0, 0, 0, 0.32);
  --apple-shadow-hover: 0 26px 70px rgba(0, 0, 0, 0.44);
}

:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at 15% -10%, rgba(41, 151, 255, 0.22), transparent 30%),
    #000000 !important;
  color: var(--apple-text);
}

:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .rail,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .flow-panel,
:root[data-theme="dark"] .setup-block,
:root[data-theme="dark"] .requirements-section,
:root[data-theme="dark"] .style-controls,
:root[data-theme="dark"] .style-lock-summary,
:root[data-theme="dark"] .style-option,
:root[data-theme="dark"] .style-moodboard,
:root[data-theme="dark"] .slide-preview,
:root[data-theme="dark"] .asset-item,
:root[data-theme="dark"] .image-to-ppt-panel,
:root[data-theme="dark"] .export-tile,
:root[data-theme="dark"] .thumb-panel,
:root[data-theme="dark"] .canvas-area,
:root[data-theme="dark"] .inspector,
:root[data-theme="dark"] #step-edit .editor-top-ribbon,
:root[data-theme="dark"] .floating-editor-tools,
:root[data-theme="dark"] .generation-progress {
  border-color: var(--apple-border) !important;
  background: rgba(22, 22, 23, 0.86) !important;
  box-shadow: var(--apple-shadow) !important;
}

:root[data-theme="dark"] .ghost-btn,
:root[data-theme="dark"] .icon-btn,
:root[data-theme="dark"] .theme-toggle-btn {
  border-color: var(--apple-border) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--apple-text) !important;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .mode-card,
:root[data-theme="dark"] .mode-workspace,
:root[data-theme="dark"] .upload-choice,
:root[data-theme="dark"] .dropzone,
:root[data-theme="dark"] .outline-copy-settings,
:root[data-theme="dark"] #step-edit .ribbon-group,
:root[data-theme="dark"] #step-edit .inspector-tool-section,
:root[data-theme="dark"] #step-edit .thumb {
  border-color: var(--apple-border) !important;
  background: rgba(29, 29, 31, 0.88) !important;
  color: var(--apple-text) !important;
}

:root[data-theme="dark"] .mode-card.selected,
:root[data-theme="dark"] .mode-workspace.active,
:root[data-theme="dark"] .upload-choice.active,
:root[data-theme="dark"] .style-moodboard.selected,
:root[data-theme="dark"] .export-tile.ready,
:root[data-theme="dark"] .rail-item.active {
  border-color: rgba(41, 151, 255, 0.32) !important;
  background: rgba(41, 151, 255, 0.16) !important;
}

:root[data-theme="dark"] .panel-head h2,
:root[data-theme="dark"] .topbar h1,
:root[data-theme="dark"] .mode-card strong,
:root[data-theme="dark"] .mode-workspace strong,
:root[data-theme="dark"] .upload-choice strong,
:root[data-theme="dark"] .style-moodboard-head strong,
:root[data-theme="dark"] .export-tile strong {
  color: var(--apple-text) !important;
}

:root[data-theme="dark"] .panel-head p,
:root[data-theme="dark"] .topbar p,
:root[data-theme="dark"] label span,
:root[data-theme="dark"] .style-moodboard p,
:root[data-theme="dark"] .export-tile span {
  color: var(--apple-muted) !important;
}

.social-apple-panel {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.9), transparent 34%),
    linear-gradient(180deg, rgba(245, 245, 247, 0.96), rgba(255, 255, 255, 0.72));
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.social-store-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin-bottom: 16px;
}

.social-eyebrow {
  color: var(--apple-muted, #6e6e73);
  display: block;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 8px;
}

.social-store-hero h2 {
  color: var(--apple-text, #1d1d1f);
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: 0;
  line-height: 1.04;
  margin: 0;
  max-width: 820px;
}

.social-store-hero p {
  color: var(--apple-muted, #6e6e73);
  font-size: 17px;
  line-height: 1.55;
  margin: 14px 0 0;
  max-width: 760px;
}

.social-hero-side {
  align-items: flex-end;
  display: grid;
  gap: 12px;
  justify-items: end;
  min-width: 280px;
}

.social-model-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.social-model-pills div {
  border-radius: 999px !important;
  min-height: 34px;
  padding: 8px 12px !important;
}

.social-model-pills strong {
  font-size: 12px !important;
}

.social-model-pills span {
  font-size: 11px !important;
}

.social-upload-usage {
  align-items: center;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--apple-border, rgba(0, 0, 0, 0.08));
  border-radius: 999px;
  display: inline-flex;
  gap: 8px;
  min-height: 38px;
  padding: 6px 10px 6px 14px;
}

.social-upload-usage span {
  color: var(--apple-muted, #6e6e73);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.social-upload-usage select {
  background: transparent;
  border: 0;
  color: var(--apple-text, #1d1d1f);
  font-size: 13px;
  font-weight: 800;
  min-height: 26px;
  outline: 0;
  padding: 0 18px 0 0;
}

.social-quick-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.social-quick-strip div {
  align-items: center;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--apple-border, rgba(0, 0, 0, 0.08));
  border-radius: 18px;
  display: flex;
  gap: 10px;
  min-height: 58px;
  padding: 12px 14px;
}

.social-quick-strip strong {
  color: #0071e3;
  font-size: 13px;
}

.social-quick-strip span {
  color: var(--apple-text, #1d1d1f);
  font-size: 14px;
  font-weight: 800;
}

.social-publish-layout {
  display: block;
}

.social-workflow-column,
.social-preview-column {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.social-preview-column {
  align-self: start;
  position: sticky;
  top: 96px;
}

.social-step-card,
.social-preview-panel {
  border: 1px solid var(--apple-border, rgba(0, 0, 0, 0.08));
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.06);
  padding: 20px;
}

.social-preview-panel {
  background: #ffffff;
  max-height: none;
  overflow: visible;
  padding: 16px;
}

.social-step-head {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
}

.social-step-head > span {
  align-items: center;
  background: #0071e3;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.social-step-head strong {
  color: var(--apple-text, #1d1d1f);
  display: block;
  font-size: 22px;
  letter-spacing: 0;
  line-height: 1.16;
}

.social-step-head p {
  color: var(--apple-muted, #6e6e73);
  font-size: 13px;
  line-height: 1.5;
  margin: 5px 0 0;
}

.social-primary-actions,
.social-generate-actions,
.social-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.social-preview-actions {
  margin: 10px 0;
}

.social-preview-actions .ghost-btn {
  flex: 1 1 148px;
  justify-content: center;
}

.social-source-pools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.social-source-pool {
  border: 1px solid var(--apple-hairline, rgba(0, 0, 0, 0.08));
  border-radius: 18px;
  background: rgba(245, 245, 247, 0.62);
  min-width: 0;
  padding: 12px;
}

.social-source-pool.wide {
  grid-column: 1 / -1;
}

.social-pool-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.social-pool-head strong {
  color: var(--apple-text, #1d1d1f);
  font-size: 15px;
}

.social-pool-head span {
  color: var(--apple-muted, #6e6e73);
  font-size: 12px;
  text-align: right;
}

.social-card-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.social-card-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.social-card-head > div > span {
  color: var(--apple-muted, #6e6e73);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.social-card-head strong {
  color: var(--apple-text, #1d1d1f);
  font-size: 24px;
  letter-spacing: 0;
  line-height: 1.08;
  white-space: nowrap;
}

.social-card-head em {
  background: rgba(0, 113, 227, 0.08);
  border: 1px solid rgba(0, 113, 227, 0.14);
  border-radius: 999px;
  color: #0066cc;
  flex: 0 0 auto;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  padding: 8px 10px;
}

.social-preview-advice {
  border: 1px solid rgba(0, 113, 227, 0.14);
  border-radius: 18px;
  background: linear-gradient(135deg, #eef6ff, #f1fbf5);
  color: var(--apple-muted, #6e6e73);
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 10px;
  padding: 10px 12px;
}

.social-result-section {
  display: grid;
  gap: 8px;
}

.social-result-section + .social-result-section {
  margin-top: 10px;
}

.social-result-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.social-result-head strong {
  color: var(--apple-text, #1d1d1f);
  font-size: 14px;
}

.social-result-head span {
  color: var(--apple-muted, #6e6e73);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.social-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.social-form-grid.compact {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.social-form-grid .wide {
  grid-column: 1 / -1;
}

#step-social select,
#step-social input,
#step-social textarea {
  border-color: var(--apple-border, rgba(0, 0, 0, 0.08));
  background: rgba(255, 255, 255, 0.92);
  color: var(--apple-text, #1d1d1f);
}

#step-social select option {
  background: #ffffff;
  color: #1d1d1f;
}

#socialUploadBtn {
  display: none !important;
}

.social-recommend-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(0, 113, 227, 0.18);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0, 113, 227, 0.09), rgba(52, 199, 89, 0.08));
  padding: 16px;
}

.social-recommend-box div {
  display: grid;
  gap: 4px;
}

.social-recommend-box strong {
  color: var(--apple-text, #1d1d1f);
  font-size: 14px;
}

.social-recommend-box span {
  color: var(--apple-muted, #6e6e73);
  font-size: 12px;
  line-height: 1.5;
}

.social-ai-recommend-panel {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(0, 113, 227, 0.16);
  border-radius: 20px;
  background: rgba(245, 250, 255, 0.72);
  padding: 16px;
}

.social-ai-recommend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.social-ai-recommend-head div {
  display: grid;
  gap: 4px;
}

.social-ai-recommend-head strong,
.social-smart-group > strong {
  color: var(--apple-text, #1d1d1f);
  font-size: 14px;
}

.social-ai-recommend-head span,
.social-smart-reason,
.social-smart-tone {
  color: var(--apple-muted, #6e6e73);
  font-size: 12px;
  line-height: 1.55;
}

.social-smart-recommendation {
  display: grid;
  gap: 12px;
}

.social-smart-reason,
.social-smart-tone {
  margin: 0;
}

.social-smart-group {
  display: grid;
  gap: 8px;
}

.social-smart-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.social-smart-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(0, 113, 227, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--apple-text, #1d1d1f);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  min-height: 34px;
  padding: 7px 11px;
}

.social-smart-chip:hover {
  border-color: rgba(0, 113, 227, 0.36);
  background: rgba(0, 113, 227, 0.08);
}

.palette-swatches {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
}

.palette-swatches i {
  width: 14px;
  height: 14px;
  display: block;
}

.social-layout-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.social-layout-choice-grid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.social-mockup-preset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.social-mockup-preset {
  border: 1px solid var(--apple-hairline, rgba(0, 0, 0, 0.08));
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--apple-text, #1d1d1f);
  cursor: pointer;
  display: grid;
  gap: 7px;
  min-height: 126px;
  padding: 11px;
  text-align: left;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.social-mockup-preset:hover,
.social-mockup-preset.active {
  border-color: rgba(0, 113, 227, 0.42);
  box-shadow: 0 14px 30px rgba(0, 113, 227, 0.12);
  transform: translateY(-1px);
}

.social-mockup-preset strong {
  font-size: 13px;
}

.social-mockup-preset em {
  color: var(--apple-muted, #6e6e73);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.social-mockup-preset-preview {
  align-items: center;
  background: linear-gradient(145deg, #eef2f8, #dce4ef);
  border-radius: 13px;
  display: flex;
  height: 64px;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.social-mockup-preset-preview i {
  background: linear-gradient(145deg, #fff, #cbd6e5);
  border: 2px solid rgba(24, 31, 43, 0.78);
  box-shadow: 0 9px 18px rgba(18, 27, 42, 0.18);
  display: block;
}

.social-mockup-preset-preview.phone-feed i,
.social-mockup-preset-preview.phone-floating i,
.social-mockup-preset-preview.auto i {
  border-radius: 8px;
  height: 46px;
  width: 25px;
}

.social-mockup-preset-preview.phone-floating i {
  transform: rotate(-8deg);
}

.social-mockup-preset-preview.desktop-screen i {
  border-radius: 5px;
  height: 34px;
  width: 52px;
}

.social-mockup-preset-preview.desktop-screen::after {
  background: #323842;
  border-radius: 99px;
  bottom: 8px;
  content: "";
  height: 3px;
  position: absolute;
  width: 64px;
}

.social-mockup-preset-preview.poster-scene i {
  border-color: #f8f8f8;
  border-radius: 2px;
  height: 45px;
  transform: rotate(-2deg);
  width: 32px;
}

.social-mockup-preset-preview.multi-device i {
  border-radius: 5px;
  height: 32px;
  transform: translateX(-4px);
  width: 46px;
}

.social-mockup-preset-preview.multi-device::after {
  background: linear-gradient(145deg, #fff, #cbd6e5);
  border: 2px solid rgba(24, 31, 43, 0.78);
  border-radius: 7px;
  content: "";
  height: 39px;
  position: absolute;
  transform: translate(22px, 9px);
  width: 21px;
}

.social-mockup-preset-preview.platform-feed i {
  border: 0;
  border-radius: 8px;
  height: 43px;
  width: 52px;
}

.social-mockup-preset-preview.platform-feed::before,
.social-mockup-preset-preview.platform-feed::after {
  background: rgba(24, 31, 43, 0.32);
  border-radius: 99px;
  content: "";
  height: 3px;
  left: 13px;
  position: absolute;
  top: 13px;
  width: 16px;
  z-index: 1;
}

.social-mockup-preset-preview.platform-feed::after {
  left: 34px;
  top: 43px;
  width: 12px;
}

.social-mockup-preset-preview.raw i {
  border-color: rgba(24, 31, 43, 0.2);
  border-radius: 5px;
  height: 43px;
  width: 50px;
}

.social-mockup-live-panel {
  align-items: stretch;
  border: 1px solid rgba(0, 113, 227, 0.16);
  border-radius: 20px;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(210px, 0.9fr) minmax(0, 1.1fr);
  margin-top: 14px;
  overflow: hidden;
  padding: 12px;
}

.social-mockup-live-preview {
  align-items: center;
  aspect-ratio: 16 / 10;
  background: linear-gradient(145deg, #e9eef6, #cfd8e6);
  border-radius: 15px;
  display: flex;
  justify-content: center;
  min-height: 160px;
  overflow: hidden;
  position: relative;
}

.social-mockup-live-preview.empty-state {
  color: var(--apple-muted, #6e6e73);
  font-size: 12px;
  line-height: 1.5;
  padding: 22px;
  text-align: center;
}

.social-mockup-live-preview img {
  display: block;
  object-fit: cover;
}

.social-mockup-live-preview .mockup-device {
  background: #12151b;
  box-shadow: 0 28px 55px rgba(18, 27, 42, 0.34);
  overflow: hidden;
  position: relative;
}

.social-mockup-live-preview .mockup-device img {
  height: 100%;
  width: 100%;
}

.social-mockup-live-preview.phone-feed .mockup-device,
.social-mockup-live-preview.phone-floating .mockup-device,
.social-mockup-live-preview.auto .mockup-device {
  border: 7px solid #11151c;
  border-radius: 23px;
  height: 82%;
  width: 36%;
}

.social-mockup-live-preview.phone-floating .mockup-device {
  transform: rotate(-7deg) translateX(-8%);
}

.social-mockup-live-preview.phone-floating::after,
.social-mockup-live-preview.multi-device::after {
  background: rgba(255, 255, 255, 0.68);
  border-radius: 18px;
  box-shadow: 0 18px 34px rgba(18, 27, 42, 0.2);
  content: "";
  height: 58%;
  position: absolute;
  right: 12%;
  transform: rotate(8deg);
  width: 28%;
}

.social-mockup-live-preview.desktop-screen .mockup-device {
  border: 8px solid #161a20;
  border-radius: 10px 10px 5px 5px;
  height: 58%;
  width: 70%;
}

.social-mockup-live-preview.desktop-screen::after {
  background: linear-gradient(180deg, #c3cad3, #858e9b);
  border-radius: 3px 3px 14px 14px;
  bottom: 14%;
  content: "";
  height: 7%;
  position: absolute;
  width: 82%;
}

.social-mockup-live-preview.poster-scene {
  background: linear-gradient(145deg, #c8b8a2, #8c765f);
}

.social-mockup-live-preview.poster-scene .mockup-device {
  background: #fff;
  border: 8px solid #f7f3ed;
  border-radius: 2px;
  height: 74%;
  transform: rotate(-2deg);
  width: 42%;
}

.social-mockup-live-preview.multi-device .mockup-device {
  border: 7px solid #141820;
  border-radius: 9px;
  height: 52%;
  transform: translateX(-10%);
  width: 58%;
}

.social-mockup-live-preview.platform-feed .mockup-device {
  background: #fff;
  border-radius: 14px;
  height: 78%;
  padding: 28px 12px 12px;
  width: 64%;
}

.social-mockup-live-preview.platform-feed .mockup-device::before {
  background: #c8ced7;
  border-radius: 99px;
  content: "";
  height: 7px;
  left: 13px;
  position: absolute;
  top: 11px;
  width: 32%;
}

.social-mockup-live-preview.raw .mockup-device {
  background: transparent;
  box-shadow: 0 20px 40px rgba(18, 27, 42, 0.2);
  height: 78%;
  width: 64%;
}

.social-mockup-live-copy {
  align-content: center;
  display: grid;
  gap: 7px;
  padding: 8px 8px 8px 0;
}

.social-mockup-live-copy > span {
  color: #0071e3;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.social-mockup-live-copy strong {
  color: var(--apple-text, #1d1d1f);
  font-size: 17px;
}

.social-mockup-live-copy p {
  color: var(--apple-muted, #6e6e73);
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}

.social-mockup-live-copy em {
  background: rgba(0, 113, 227, 0.09);
  border: 1px solid rgba(0, 113, 227, 0.18);
  border-radius: 999px;
  color: #0066cc;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  justify-self: start;
  padding: 5px 8px;
}

.social-model-status {
  display: grid;
  gap: 10px;
}

.social-model-status div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--apple-hairline, rgba(0, 0, 0, 0.08));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  padding: 12px;
}

.social-model-status strong {
  color: var(--apple-text, #1d1d1f);
  font-size: 14px;
}

.social-model-status span {
  color: var(--apple-muted, #6e6e73);
  font-size: 12px;
  text-align: right;
}

.social-model-status .ready {
  border-color: rgba(52, 199, 89, 0.26);
  background: rgba(52, 199, 89, 0.08);
}

.social-model-status .not-ready {
  border-color: rgba(255, 149, 0, 0.28);
  background: rgba(255, 149, 0, 0.08);
}

.social-layout-choice {
  border: 1px solid var(--apple-hairline, rgba(0, 0, 0, 0.08));
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 12px;
  text-align: left;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.social-layout-choice:hover,
.social-layout-choice.active {
  border-color: rgba(0, 113, 227, 0.42);
  box-shadow: 0 14px 30px rgba(0, 113, 227, 0.12);
  transform: translateY(-1px);
}

.social-layout-choice strong {
  color: var(--apple-text, #1d1d1f);
  font-size: 14px;
}

.social-layout-choice em {
  color: var(--apple-muted, #6e6e73);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.social-layout-mini {
  background: #f5f5f7;
  border-radius: 12px;
  display: grid;
  gap: 4px;
  min-height: 54px;
  overflow: hidden;
  padding: 6px;
}

.social-layout-mini i {
  background: linear-gradient(135deg, #ffffff, #dce7f7);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 7px;
  display: block;
  min-height: 12px;
}

.social-layout-mini.hero,
.social-layout-mini.minimal {
  align-content: center;
}

.social-layout-mini.minimal i {
  margin: 0 auto;
  width: 66%;
}

.social-layout-mini.split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.social-layout-mini.magazine,
.social-layout-mini.featureGrid {
  grid-template-columns: 1.45fr 1fr 1fr;
}

.social-layout-mini.showcase,
.social-layout-mini.gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.social-layout-mini.scattered {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
}

.social-layout-mini .wide,
.social-layout-mini .large {
  grid-column: span 3;
}

.social-layout-mini.magazine .large,
.social-layout-mini.featureGrid .large {
  grid-column: span 1;
  grid-row: span 2;
}

.social-layout-mini .tilt.a {
  transform: rotate(-8deg);
}

.social-layout-mini .tilt.b {
  transform: translateY(6px) rotate(5deg);
}

.social-layout-mini .tilt.c {
  transform: rotate(-3deg);
}

.social-more-layouts,
.social-advanced-panel {
  border: 1px solid var(--apple-hairline, rgba(0, 0, 0, 0.08));
  border-radius: 18px;
  background: rgba(245, 245, 247, 0.52);
  margin-top: 12px;
  padding: 12px;
}

.social-more-layouts summary,
.social-advanced-panel summary {
  color: var(--apple-text, #1d1d1f);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}

.social-more-layouts[open] summary,
.social-advanced-panel[open] summary {
  margin-bottom: 12px;
}

.social-inner-rule {
  align-items: center;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.social-inner-rule p,
.social-inline-advice {
  color: var(--apple-muted, #6e6e73);
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}

.social-inline-advice {
  margin-top: 10px;
}

.social-inner-layout-preview {
  display: grid;
  gap: 8px;
  border-radius: 14px;
  background: #f5f5f7;
  padding: 10px;
  aspect-ratio: 3 / 4;
}

.social-inner-layout-preview span {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: linear-gradient(135deg, #ffffff, #e9eef8);
}

.social-source-grid,
.social-output-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 12px;
}

.social-output-notice {
  grid-column: 1 / -1;
  border: 1px solid rgba(0, 113, 227, 0.18);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0, 113, 227, 0.08), rgba(52, 199, 89, 0.08));
  color: var(--apple-text, #1d1d1f);
  display: grid;
  gap: 4px;
  padding: 12px 14px;
}

.social-output-notice strong {
  font-size: 14px;
  font-weight: 800;
}

.social-output-notice span,
.social-output-notice small {
  color: var(--apple-muted, #6e6e73);
  font-size: 12px;
  line-height: 1.5;
}

.social-output-grid.empty-state,
.social-copy-view.empty-state {
  align-items: center;
  border: 1px dashed rgba(0, 113, 227, 0.22);
  border-radius: 18px;
  color: var(--apple-muted, #6e6e73);
  display: flex;
  font-size: 14px;
  line-height: 1.55;
  min-height: 104px;
  padding: 16px;
}

.social-output-grid.empty-state {
  min-height: 112px;
}

.social-source-card,
.social-output-card {
  margin: 0;
  border: 1px solid var(--apple-hairline, rgba(0, 0, 0, 0.08));
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.64);
  overflow: hidden;
}

.social-source-card.reference {
  border-color: rgba(0, 113, 227, 0.24);
  background: linear-gradient(180deg, rgba(0, 113, 227, 0.07), rgba(52, 199, 89, 0.05));
}

.social-source-card img,
.social-output-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  display: block;
  background: #f5f5f7;
}

.social-output-card img {
  aspect-ratio: 3 / 4;
}

.social-mockup-output-grid .social-output-card img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.social-source-card figcaption,
.social-output-card figcaption {
  display: grid;
  gap: 3px;
  padding: 10px 12px 12px;
}

.social-source-badge {
  background: rgba(0, 113, 227, 0.09);
  border: 1px solid rgba(0, 113, 227, 0.18);
  border-radius: 999px;
  color: #0066cc;
  display: inline-flex;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  justify-self: start;
  line-height: 1;
  padding: 5px 8px;
}

.social-source-card figcaption strong,
.social-output-card figcaption strong {
  color: var(--apple-text, #1d1d1f);
  font-size: 13px;
}

.social-source-card figcaption span,
.social-output-card figcaption span {
  color: var(--apple-muted, #6e6e73);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-copy-view {
  display: grid;
  gap: 12px;
  margin-top: 0;
}

.social-copy-view article {
  display: grid;
  gap: 6px;
  border: 1px solid var(--apple-hairline, rgba(0, 0, 0, 0.08));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  padding: 14px;
}

.social-copy-view article span {
  color: var(--apple-muted, #6e6e73);
  font-size: 12px;
  font-weight: 700;
}

.social-copy-view article strong,
.social-copy-view article p {
  color: var(--apple-text, #1d1d1f);
  margin: 0;
  line-height: 1.7;
}

:root[data-theme="dark"] .social-card,
:root[data-theme="dark"] .social-step-card,
:root[data-theme="dark"] .social-preview-panel,
:root[data-theme="dark"] .social-source-pool,
:root[data-theme="dark"] .social-layout-choice,
:root[data-theme="dark"] .social-more-layouts,
:root[data-theme="dark"] .social-advanced-panel,
:root[data-theme="dark"] .social-source-card,
:root[data-theme="dark"] .social-output-card,
:root[data-theme="dark"] .social-mockup-preset,
:root[data-theme="dark"] .social-mockup-live-panel,
:root[data-theme="dark"] .social-page-rule,
:root[data-theme="dark"] .social-model-status div,
:root[data-theme="dark"] .social-copy-view article {
  border-color: var(--apple-border) !important;
  background: rgba(22, 22, 23, 0.86) !important;
}

:root[data-theme="dark"] .social-preview-panel {
  background: #161617 !important;
}

:root[data-theme="dark"] .social-apple-panel {
  background:
    radial-gradient(circle at 20% 0%, rgba(45, 45, 48, 0.8), transparent 34%),
    linear-gradient(180deg, rgba(20, 20, 22, 0.98), rgba(8, 8, 9, 0.9)) !important;
}

:root[data-theme="dark"] .social-store-hero h2,
:root[data-theme="dark"] .social-step-head strong,
:root[data-theme="dark"] .social-pool-head strong,
:root[data-theme="dark"] .social-layout-choice strong,
:root[data-theme="dark"] .social-more-layouts summary,
:root[data-theme="dark"] .social-advanced-panel summary,
:root[data-theme="dark"] .social-quick-strip span {
  color: var(--apple-text) !important;
}

:root[data-theme="dark"] .social-store-hero p,
:root[data-theme="dark"] .social-step-head p,
:root[data-theme="dark"] .social-pool-head span,
:root[data-theme="dark"] .social-layout-choice em,
:root[data-theme="dark"] .social-inner-rule p,
:root[data-theme="dark"] .social-inline-advice,
:root[data-theme="dark"] .social-eyebrow {
  color: var(--apple-muted) !important;
}

:root[data-theme="dark"] .social-quick-strip div {
  border-color: var(--apple-border) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

:root[data-theme="dark"] .social-upload-usage {
  border-color: var(--apple-border) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

:root[data-theme="dark"] .social-upload-usage select {
  color: var(--apple-text) !important;
}

:root[data-theme="dark"] .social-source-card.reference {
  border-color: rgba(41, 151, 255, 0.28) !important;
  background: linear-gradient(180deg, rgba(41, 151, 255, 0.12), rgba(48, 209, 88, 0.08)) !important;
}

:root[data-theme="dark"] .social-recommend-box {
  border-color: rgba(41, 151, 255, 0.22) !important;
  background: linear-gradient(135deg, rgba(41, 151, 255, 0.16), rgba(48, 209, 88, 0.1)) !important;
}

:root[data-theme="dark"] .social-ai-recommend-panel,
:root[data-theme="dark"] .social-smart-chip {
  border-color: var(--apple-border) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

:root[data-theme="dark"] .social-smart-chip:hover {
  border-color: rgba(41, 151, 255, 0.32) !important;
  background: rgba(41, 151, 255, 0.14) !important;
}

:root[data-theme="dark"] #step-social select,
:root[data-theme="dark"] #step-social input,
:root[data-theme="dark"] #step-social textarea {
  border-color: var(--apple-border, rgba(255, 255, 255, 0.12)) !important;
  background: rgba(29, 29, 31, 0.92) !important;
  color: var(--apple-text, #f5f5f7) !important;
}

:root[data-theme="dark"] #step-social select option {
  background: #1d1d1f !important;
  color: #f5f5f7 !important;
}

:root[data-theme="dark"] .social-layout-choice:hover,
:root[data-theme="dark"] .social-layout-choice.active,
:root[data-theme="dark"] .social-mockup-preset:hover,
:root[data-theme="dark"] .social-mockup-preset.active {
  border-color: rgba(41, 151, 255, 0.44) !important;
  box-shadow: 0 14px 30px rgba(41, 151, 255, 0.12) !important;
}

:root[data-theme="dark"] .social-layout-mini {
  background: rgba(255, 255, 255, 0.06) !important;
}

:root[data-theme="dark"] .social-mockup-preset-preview,
:root[data-theme="dark"] .social-mockup-live-preview {
  background: linear-gradient(145deg, #252a33, #14171c) !important;
}

:root[data-theme="dark"] .social-mockup-live-preview.poster-scene {
  background: linear-gradient(145deg, #665645, #342b24) !important;
}

:root[data-theme="dark"] .social-mockup-live-copy em {
  background: rgba(41, 151, 255, 0.14);
  border-color: rgba(41, 151, 255, 0.28);
  color: #8cc8ff;
}

:root[data-theme="dark"] .social-layout-mini i {
  border-color: var(--apple-border) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)) !important;
}

:root[data-theme="dark"] .social-source-badge {
  background: rgba(41, 151, 255, 0.14) !important;
  border-color: rgba(41, 151, 255, 0.28) !important;
  color: #8cc8ff !important;
}

:root[data-theme="dark"] .social-inner-layout-preview {
  background: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .social-inner-layout-preview span {
  border-color: var(--apple-border);
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
}

:root[data-theme="dark"] .social-source-card img,
:root[data-theme="dark"] .social-output-card img {
  background: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .social-card-head strong,
:root[data-theme="dark"] .social-recommend-box strong,
:root[data-theme="dark"] .social-ai-recommend-head strong,
:root[data-theme="dark"] .social-smart-group > strong,
:root[data-theme="dark"] .social-smart-chip,
:root[data-theme="dark"] .social-page-rule strong,
:root[data-theme="dark"] .social-model-status strong,
:root[data-theme="dark"] .social-source-card figcaption strong,
:root[data-theme="dark"] .social-output-card figcaption strong,
:root[data-theme="dark"] .social-copy-view article strong,
:root[data-theme="dark"] .social-copy-view article p {
  color: var(--apple-text) !important;
}

:root[data-theme="dark"] .social-card-head > div > span,
:root[data-theme="dark"] .social-preview-advice,
:root[data-theme="dark"] .social-result-head span,
:root[data-theme="dark"] .social-recommend-box span,
:root[data-theme="dark"] .social-ai-recommend-head span,
:root[data-theme="dark"] .social-smart-reason,
:root[data-theme="dark"] .social-smart-tone,
:root[data-theme="dark"] .social-rule-kicker,
:root[data-theme="dark"] .social-page-rule p,
:root[data-theme="dark"] .social-model-status span,
:root[data-theme="dark"] .social-source-card figcaption span,
:root[data-theme="dark"] .social-output-card figcaption span,
:root[data-theme="dark"] .social-copy-view article span {
  color: var(--apple-muted) !important;
}

:root[data-theme="dark"] .social-card-head em {
  border-color: rgba(41, 151, 255, 0.26) !important;
  background: rgba(41, 151, 255, 0.16) !important;
  color: #8cc8ff !important;
}

:root[data-theme="dark"] .social-preview-advice {
  border-color: rgba(41, 151, 255, 0.22) !important;
  background: linear-gradient(135deg, #102033, #10241a) !important;
}


.style-moodboard-placeholder,
.style-moodboard-image-btn img,
.style-moodboard img {
  aspect-ratio: var(--slide-aspect, 16 / 9) !important;
}

.style-moodboard-image-btn img,
.style-moodboard img {
  object-fit: contain !important;
}

#styleMoodboardView .style-moodboard-image-btn,
#styleMoodboardView .style-moodboard-image-btn img,
#styleMoodboardView .style-moodboard img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
}

.social-output-card .style-moodboard-image-btn img {
  aspect-ratio: 3 / 4 !important;
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .topbar {
    margin-inline: 14px;
  }

  .rail {
    margin-left: 12px;
  }

  .social-store-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .social-hero-side {
    align-items: start;
    justify-content: flex-start;
    justify-items: start;
    max-width: none;
  }

  .social-publish-layout {
    grid-template-columns: 1fr;
  }

  .social-preview-column {
    position: static;
  }

  .social-preview-panel {
    max-height: none;
    overflow: visible;
  }

  .social-quick-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .social-card,
  .social-model-card,
  .social-reference-card,
  .social-config-card,
  .social-layout-card {
    grid-column: span 6;
  }
}

@media (max-width: 820px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
  }

  .topbar {
    grid-row: 1;
    margin: 12px;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
  }

  .top-actions {
    flex-wrap: wrap;
  }

  .rail {
    position: static;
    grid-row: 2;
    flex-direction: row;
    max-height: none;
    margin: 0 12px 12px;
    overflow-x: auto;
  }

  .rail-item {
    min-width: 72px;
  }

  .workspace {
    grid-column: 1;
    grid-row: 3;
    padding: 0 12px 18px;
  }

  .panel-head {
    flex-direction: column;
  }

  .flow-panel {
    min-height: auto;
    padding: 20px;
  }

  .social-store-hero h2 {
    font-size: 36px;
  }

  .social-quick-strip {
    grid-template-columns: 1fr;
  }

  .social-publish-layout {
    grid-template-columns: 1fr;
  }

  .social-source-pools,
  .social-form-grid,
  .social-form-grid.compact,
  .social-layout-choice-grid,
  .social-layout-choice-grid.compact,
  .social-mockup-preset-grid,
  .social-mockup-live-panel,
  .social-inner-rule {
    grid-template-columns: 1fr;
  }

  .social-inner-rule {
    align-items: start;
  }

  .social-card,
  .social-model-card,
  .social-reference-card,
  .social-config-card,
  .social-layout-card {
    grid-column: 1 / -1;
  }

  .social-form-grid {
    grid-template-columns: 1fr;
  }

  .social-page-rule-grid,
  .social-recommend-box,
  .social-ai-recommend-head {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .social-card-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .social-preview-advice,
  .social-result-head {
    max-width: none;
    text-align: left;
  }
}

/* Editor-centered project navigation and content workspace. */
.content-workspace-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 12px;
  padding: 4px 2px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
}

.content-workspace-head.hidden {
  display: none;
}

.content-workspace-head > div {
  min-width: 210px;
}

.content-workspace-kicker {
  display: block;
  margin-bottom: 4px;
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
}

.content-workspace-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  letter-spacing: 0;
}

.content-workspace-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.content-workspace-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(112px, 1fr));
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: rgba(241, 245, 249, 0.88);
}

.content-workspace-tabs button {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: center;
  gap: 0 7px;
  min-height: 42px;
  padding: 5px 9px;
  color: #64748b;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.content-workspace-tabs button svg {
  grid-row: 1 / 3;
  width: 16px;
  height: 16px;
}

.content-workspace-tabs button span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-workspace-tabs button em {
  overflow: hidden;
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-workspace-tabs button.active {
  color: #0f172a;
  background: #ffffff;
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.12);
}

body[data-active-step="content"][data-content-tab="requirements"] #modeUploadPanel,
body[data-active-step="content"][data-content-tab="assets"] #modeRequirementsPanel {
  display: none;
}

body[data-active-step="content"][data-content-tab="requirements"] #step-assets .setup-layout,
body[data-active-step="content"][data-content-tab="assets"] #step-assets .setup-layout {
  grid-template-columns: minmax(0, 1fr);
}

body[data-active-step="content"][data-content-tab="assets"] #step-assets .mode-workspace-grid,
body[data-active-step="content"][data-content-tab="assets"] #step-assets .mode-flow-guide {
  display: none;
}

/* Inspector switches between deterministic properties and AI proposals. */
.inspector-view-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  margin: 0 0 12px;
  padding: 3px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 7px;
  background: #f1f5f9;
}

.inspector-view-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 8px;
  color: #64748b;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.inspector-view-tabs button svg {
  width: 14px;
  height: 14px;
}

.inspector-view-tabs button.active {
  color: #0f172a;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.layout-ai-panel {
  display: grid;
  gap: 12px;
}

.layout-ai-panel.hidden {
  display: none;
}

.layout-ai-intro {
  display: flex;
  align-items: center;
  gap: 10px;
}

.layout-ai-mark {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  color: #ffffff;
  border-radius: 7px;
  background: #2563eb;
}

.layout-ai-mark svg {
  width: 16px;
  height: 16px;
}

.layout-ai-intro > div {
  min-width: 0;
}

.layout-ai-intro strong {
  color: var(--text);
  font-size: 13px;
}

.layout-ai-intro p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.layout-inheritance-summary {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 7px;
}

.layout-inheritance-summary > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 9px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.layout-inheritance-summary > div:last-child { border-bottom: 0; }
.layout-inheritance-summary > div > span { color: var(--muted); font-size: 10px; }
.layout-inheritance-summary strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.layout-inheritance-swatches { display: inline-flex; gap: 2px; margin-right: 5px; }
.layout-inheritance-swatches i { width: 10px; height: 10px; border-radius: 50%; background: var(--swatch); }
.layout-control-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.layout-control-head strong { font-size: 10px; }
.layout-control-head span { color: var(--muted); font-size: 9px; }

.layout-scope-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.layout-scope-control label {
  min-width: 0;
  cursor: pointer;
}

.layout-scope-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.layout-scope-control span {
  display: grid;
  place-items: center;
  min-height: 32px;
  padding: 4px 8px;
  color: #64748b;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 6px;
  background: #ffffff;
  font-size: 11px;
  font-weight: 750;
}

.layout-scope-control input:checked + span {
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.48);
  background: rgba(37, 99, 235, 0.08);
}

.layout-analyze-btn,
.layout-preview-actions button {
  justify-content: center;
  width: 100%;
}

.layout-ai-status {
  padding: 8px 9px;
  color: #64748b;
  border-left: 3px solid #94a3b8;
  background: rgba(148, 163, 184, 0.08);
  font-size: 10px;
  line-height: 1.5;
}

.layout-ai-status.loading {
  color: #1d4ed8;
  border-left-color: #2563eb;
  background: rgba(37, 99, 235, 0.08);
}

.layout-ai-status.error {
  color: #b91c1c;
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.layout-diagnosis-list,
.layout-proposal-list {
  display: grid;
  gap: 7px;
}

.layout-diagnosis-item {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 8px;
  color: #475569;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  font-size: 10px;
  line-height: 1.45;
}

.layout-diagnosis-item::before {
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border-radius: 50%;
  background: #3b82f6;
  content: "";
}

.layout-diagnosis-item.warning::before { background: #f59e0b; }
.layout-diagnosis-item.error::before { background: #ef4444; }

.layout-proposal-card {
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 8px;
  color: #334155;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 7px;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
}

.layout-proposal-card:hover,
.layout-proposal-card.active {
  border-color: rgba(37, 99, 235, 0.58);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}

.layout-proposal-card .mini-slide {
  width: 100%;
  aspect-ratio: var(--slide-aspect, 16 / 9);
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 5px;
  background: #ffffff;
  pointer-events: none;
}

.layout-proposal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.layout-proposal-head strong {
  color: #0f172a;
  font-size: 12px;
}

.layout-proposal-head span {
  color: #64748b;
  font-size: 9px;
}

.layout-model-badge {
  justify-self: start;
  padding: 2px 5px;
  color: #475569;
  border: 1px solid rgba(100, 116, 139, 0.24);
  border-radius: 4px;
  background: #f8fafc;
  font-size: 9px;
  line-height: 1.35;
}

.layout-model-badge.ready {
  color: #166534;
  border-color: rgba(22, 101, 52, 0.2);
  background: #f0fdf4;
}

.layout-model-badge.failed {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.2);
  background: #fef2f2;
}

.layout-proposal-card p {
  margin: 0;
  color: #64748b;
  font-size: 10px;
  line-height: 1.45;
}

.layout-proposal-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.layout-proposal-summary span {
  padding: 2px 5px;
  color: #475569;
  border-radius: 4px;
  background: #f1f5f9;
  font-size: 9px;
}

.layout-preview-actions {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 6px;
  padding-top: 8px;
  background: inherit;
}

.layout-preview-actions.hidden {
  display: none;
}

#step-edit.layout-previewing .slide-canvas {
  outline: 3px solid rgba(37, 99, 235, 0.48);
  outline-offset: 3px;
}

#step-edit.layout-previewing .slide-canvas::after {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1000;
  padding: 4px 7px;
  color: #ffffff;
  border-radius: 5px;
  background: rgba(37, 99, 235, 0.92);
  content: "临时预览";
  font-size: 10px;
  font-weight: 800;
}

:root[data-theme="dark"] .content-workspace-tabs,
:root[data-theme="dark"] .inspector-view-tabs {
  border-color: rgba(255, 255, 255, 0.12);
  background: #27272a;
}

:root[data-theme="dark"] .content-workspace-tabs button.active,
:root[data-theme="dark"] .inspector-view-tabs button.active,
:root[data-theme="dark"] .layout-scope-control span,
:root[data-theme="dark"] .layout-proposal-card {
  color: #e4e4e7;
  border-color: rgba(255, 255, 255, 0.12);
  background: #18181b;
}

:root[data-theme="dark"] .layout-ai-intro strong,
:root[data-theme="dark"] .layout-proposal-head strong {
  color: #f4f4f5;
}

:root[data-theme="dark"] .layout-proposal-summary span {
  color: #d4d4d8;
  background: #27272a;
}

:root[data-theme="dark"] .layout-model-badge {
  color: #d4d4d8;
  border-color: rgba(255, 255, 255, 0.14);
  background: #27272a;
}

:root[data-theme="dark"] .layout-model-badge.ready {
  color: #bbf7d0;
  border-color: rgba(74, 222, 128, 0.24);
  background: rgba(22, 101, 52, 0.22);
}

:root[data-theme="dark"] .layout-model-badge.failed {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(127, 29, 29, 0.24);
}

@media (max-width: 1100px) {
  .content-workspace-head {
    align-items: stretch;
    flex-direction: column;
  }

  .content-workspace-tabs {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .content-workspace-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final dark-mode coverage for newer modules and compact chips. */
:root[data-theme="dark"] .project-optional,
:root[data-theme="dark"] .mode-flow-guide,
:root[data-theme="dark"] .asset-match-panel,
:root[data-theme="dark"] .asset-ai-intake-status,
:root[data-theme="dark"] .upload-choice-note,
:root[data-theme="dark"] .social-ai-recommend-panel,
:root[data-theme="dark"] .social-recommend-box,
:root[data-theme="dark"] .social-source-pool,
:root[data-theme="dark"] .social-layout-choice,
:root[data-theme="dark"] .social-more-layouts,
:root[data-theme="dark"] .social-advanced-panel,
:root[data-theme="dark"] .social-inner-layout-preview,
:root[data-theme="dark"] .social-source-grid.empty-state,
:root[data-theme="dark"] .social-output-grid.empty-state,
:root[data-theme="dark"] .semantic-rebuild-view.empty-state,
:root[data-theme="dark"] .preview-grid.empty-state,
:root[data-theme="dark"] .asset-grid.empty-state,
:root[data-theme="dark"] .style-moodboard-grid.empty-state,
:root[data-theme="dark"] .layer-plan.empty-state,
:root[data-theme="dark"] .outline-list.empty-state,
:root[data-theme="dark"] .social-copy-view.empty-state,
:root[data-theme="dark"] .editor-layer-list.empty-state {
  border-color: var(--apple-border) !important;
  background: rgba(22, 22, 23, 0.82) !important;
  color: var(--apple-muted) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .asset-ai-intake-status {
  border-color: rgba(96, 165, 250, 0.32) !important;
  background: rgba(30, 64, 175, 0.2) !important;
  color: #bfdbfe !important;
}
:root[data-theme="dark"] .asset-ai-intake-status.is-error {
  border-color: rgba(248, 113, 113, 0.32) !important;
  background: rgba(127, 29, 29, 0.22) !important;
  color: #fecaca !important;
}

:root[data-theme="dark"] .asset-role-control select {
  border-color: rgba(148, 163, 184, 0.34);
  background: rgba(15, 23, 42, 0.72);
  color: #e5e7eb;
}
:root[data-theme="dark"] .asset-role-badge.ai-intake {
  border-color: rgba(74, 222, 128, 0.28);
  background: rgba(22, 101, 52, 0.22);
  color: #bbf7d0;
}
:root[data-theme="dark"] .asset-role-badge.ai-intake.low,
:root[data-theme="dark"] .asset-role-badge.ai-intake.pending {
  border-color: rgba(250, 204, 21, 0.28);
  background: rgba(113, 63, 18, 0.24);
  color: #fde68a;
}

:root[data-theme="dark"] .mode-flow-guide span,
:root[data-theme="dark"] .mode-flow-guide.upload-mode span,
:root[data-theme="dark"] .section-chip,
:root[data-theme="dark"] .style-option-tags em,
:root[data-theme="dark"] .asset-role-badge,
:root[data-theme="dark"] .asset-role-badge.reference,
:root[data-theme="dark"] .social-smart-chip,
:root[data-theme="dark"] .palette-swatches,
:root[data-theme="dark"] .social-rule-kicker,
:root[data-theme="dark"] .mode-choice-badge {
  border-color: rgba(96, 165, 250, 0.24) !important;
  background: rgba(41, 151, 255, 0.12) !important;
  color: var(--neutral-text) !important;
}

:root[data-theme="dark"] .project-optional summary,
:root[data-theme="dark"] .requirements-advanced summary,
:root[data-theme="dark"] .social-store-hero h2,
:root[data-theme="dark"] .social-step-head strong,
:root[data-theme="dark"] .social-layout-choice strong,
:root[data-theme="dark"] .social-more-layouts summary,
:root[data-theme="dark"] .social-advanced-panel summary,
:root[data-theme="dark"] .social-card-head strong,
:root[data-theme="dark"] .social-recommend-box strong,
:root[data-theme="dark"] .social-ai-recommend-head strong,
:root[data-theme="dark"] .social-smart-group > strong,
:root[data-theme="dark"] .social-page-rule strong,
:root[data-theme="dark"] .social-model-status strong,
:root[data-theme="dark"] .social-copy-view article strong {
  color: var(--apple-text) !important;
}

:root[data-theme="dark"] .project-optional summary,
:root[data-theme="dark"] .social-store-hero p,
:root[data-theme="dark"] .social-step-head p,
:root[data-theme="dark"] .social-layout-choice em,
:root[data-theme="dark"] .social-inner-rule p,
:root[data-theme="dark"] .social-inline-advice,
:root[data-theme="dark"] .social-card-head span,
:root[data-theme="dark"] .social-recommendation,
:root[data-theme="dark"] .social-recommend-box span,
:root[data-theme="dark"] .social-ai-recommend-head span,
:root[data-theme="dark"] .social-smart-reason,
:root[data-theme="dark"] .social-smart-tone,
:root[data-theme="dark"] .social-page-rule p,
:root[data-theme="dark"] .social-source-card figcaption span,
:root[data-theme="dark"] .social-output-card figcaption span,
:root[data-theme="dark"] .social-copy-view article span,
:root[data-theme="dark"] .empty-state {
  color: var(--apple-muted) !important;
}

:root[data-theme="dark"] .social-page-rule,
:root[data-theme="dark"] .social-model-status div,
:root[data-theme="dark"] .social-step-card,
:root[data-theme="dark"] .social-preview-panel,
:root[data-theme="dark"] .social-copy-view article,
:root[data-theme="dark"] .social-source-card,
:root[data-theme="dark"] .social-output-card,
:root[data-theme="dark"] .social-quick-strip div,
:root[data-theme="dark"] .social-card,
:root[data-theme="dark"] .style-option,
:root[data-theme="dark"] .style-option.recommended {
  border-color: var(--apple-border) !important;
  background: rgba(22, 22, 23, 0.86) !important;
  color: var(--apple-text) !important;
}

:root[data-theme="dark"] .social-source-card img,
:root[data-theme="dark"] .social-output-card img,
:root[data-theme="dark"] .social-inner-layout-preview span,
:root[data-theme="dark"] .mini-slide,
:root[data-theme="dark"] .style-moodboard-placeholder {
  border-color: var(--apple-border) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

:root[data-theme="dark"] .ghost-btn:disabled,
:root[data-theme="dark"] .primary-btn:disabled,
:root[data-theme="dark"] button:disabled,
:root[data-theme="dark"] select:disabled {
  opacity: 0.44;
}

/* Final contrast polish for dark mode after all module-specific styles. */
:root[data-theme="dark"] .panel-head,
:root[data-theme="dark"] #step-edit .thumb-panel .panel-head,
:root[data-theme="dark"] #step-edit .inspector .panel-head {
  border-bottom-color: var(--apple-hairline, rgba(255, 255, 255, 0.08)) !important;
}

:root[data-theme="dark"] .semantic-slide-list article a {
  border-color: rgba(96, 165, 250, 0.34) !important;
  background: rgba(37, 99, 235, 0.18) !important;
  color: #bfdbfe !important;
}

:root:not([data-theme="dark"]) #step-edit .ribbon-tool.active,
:root:not([data-theme="dark"]) #step-edit .inspector-toolbox .ribbon-tool.active {
  border-color: rgba(0, 113, 227, 0.72) !important;
  background: linear-gradient(180deg, #0077ed, #0071e3) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(0, 113, 227, 0.22) !important;
}

:root[data-theme="dark"] .editor-layer-list,
:root[data-theme="dark"] #step-edit .inspector-body.empty-state {
  border-color: var(--apple-border, rgba(255, 255, 255, 0.12)) !important;
  background: rgba(22, 22, 23, 0.82) !important;
  color: var(--apple-muted, #a1a1a6) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .editor-layer-head,
:root[data-theme="dark"] .editor-layer-item small {
  color: var(--apple-muted, #a1a1a6) !important;
}

:root[data-theme="dark"] .editor-layer-head strong,
:root[data-theme="dark"] .editor-layer-item strong {
  color: var(--apple-text, #f5f5f7) !important;
}

:root[data-theme="dark"] .editor-layer-item {
  border-color: var(--apple-border, rgba(255, 255, 255, 0.12)) !important;
  background: rgba(29, 29, 31, 0.9) !important;
  color: var(--apple-text, #f5f5f7) !important;
}

:root[data-theme="dark"] .editor-layer-item.active {
  border-color: rgba(96, 165, 250, 0.52) !important;
  background: rgba(37, 99, 235, 0.18) !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18) !important;
}

:root[data-theme="dark"] .layer-visibility-btn,
:root[data-theme="dark"] .layer-order-actions button {
  border-color: rgba(148, 163, 184, 0.28) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--apple-text, #f5f5f7) !important;
}

:root[data-theme="dark"] .layer-visibility-btn:hover,
:root[data-theme="dark"] .layer-order-actions button:hover {
  border-color: rgba(96, 165, 250, 0.5) !important;
  background: rgba(41, 151, 255, 0.16) !important;
  color: #bfdbfe !important;
}

:root[data-theme="dark"] .editor-layer-item.is-hidden .layer-visibility-btn {
  color: var(--apple-muted, #a1a1a6) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Social publish result panel should read as an independent fixed summary. */
:root[data-theme="dark"] .social-preview-panel {
  background: #161617 !important;
}

:root[data-theme="dark"] .social-preview-advice {
  border-color: rgba(41, 151, 255, 0.22) !important;
  background: linear-gradient(135deg, #102033, #10241a) !important;
  color: var(--apple-muted, #a1a1a6) !important;
}

:root[data-theme="dark"] .social-card-head > div > span,
:root[data-theme="dark"] .social-result-head span {
  color: var(--apple-muted, #a1a1a6) !important;
}

:root[data-theme="dark"] .social-card-head em {
  border-color: rgba(41, 151, 255, 0.26) !important;
  background: rgba(41, 151, 255, 0.16) !important;
  color: #8cc8ff !important;
}

/* Final visibility guard: step panels must not occupy layout space when hidden. */
.hidden,
[id^="step-"].hidden,
#step-edit.editor-layout.hidden {
  display: none !important;
}

/* Selection popovers live in a viewport portal so professional image tools are never clipped by the slide. */
.floating-editor-portal {
  position: fixed;
  inset: 0;
  z-index: 520;
  pointer-events: none;
}

.floating-editor-portal .floating-editor-tools {
  position: fixed;
  max-width: calc(100vw - 24px);
  transform: none;
  pointer-events: auto;
}

.floating-editor-portal .floating-editor-tools::after {
  display: none;
}

.floating-editor-tools.image-workbench {
  width: min(620px, calc(100vw - 24px));
  max-width: min(620px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  overflow: auto;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.98) !important;
}

.floating-editor-tools.image-workbench.is-collapsed {
  max-height: 46px;
  overflow: hidden;
}

.floating-editor-tools.group-tools {
  min-width: 250px;
  padding: 8px 10px;
  border-radius: 8px !important;
}

.floating-editor-tools.group-tools .selection-count {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--neutral-text);
  border-radius: 6px;
  background: var(--neutral-panel-raised);
  font-size: 12px;
  font-weight: 800;
}

.floating-editor-tools .mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.floating-editor-tools .mini-btn svg {
  width: 14px;
  height: 14px;
}

.floating-image-head {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 5px 7px;
  border-bottom: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
}

.image-workbench.is-expanded .floating-image-head {
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.floating-tool-grip {
  display: grid;
  grid-template-columns: repeat(2, 3px);
  grid-auto-rows: 3px;
  gap: 2px;
  padding: 4px 3px;
  cursor: grab;
}

.floating-tool-grip i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #94a3b8;
}

.floating-image-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
}

.floating-image-identity img {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  object-fit: cover;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 7px;
  background: #f1f5f9;
}

.floating-image-identity span {
  max-width: 150px;
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-image-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  gap: 3px;
  flex: 1 1 auto;
  padding: 2px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: #f1f5f9;
}

.floating-image-library-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.floating-image-library-row label {
  min-width: 0;
}

.floating-image-library-row select {
  min-height: 30px;
}

.floating-image-hint {
  margin: 0;
  color: #64748b;
  font-size: 11px;
}

.floating-image-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 28px;
  padding: 3px 7px;
  color: #64748b;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.floating-panel-collapse {
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  color: #64748b;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.floating-panel-collapse svg {
  width: 14px;
  height: 14px;
}

.floating-image-tabs button.active {
  color: #0f172a;
  background: #ffffff;
  box-shadow: none;
}

.floating-image-tabs svg {
  width: 14px;
  height: 14px;
}

.floating-image-panel {
  padding: 12px;
}

.floating-replace-panel,
.floating-trace-panel,
.floating-cutout-panel,
.floating-cmyk-panel {
  display: grid;
  gap: 12px;
}

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

.trace-preview-grid figure {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #eef2f7 25%, transparent 25%),
    linear-gradient(-45deg, #eef2f7 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef2f7 75%),
    linear-gradient(-45deg, transparent 75%, #eef2f7 75%);
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-size: 12px 12px;
}

.trace-preview-grid figure > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.trace-preview-grid figcaption {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 3px 6px;
  color: #ffffff;
  border-radius: 5px;
  background: rgba(15, 23, 42, 0.72);
  font-size: 10px;
  font-weight: 750;
}

.trace-preview-empty {
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.trace-preview-empty svg {
  width: 24px;
  height: 24px;
}

.trace-preview-grid.is-stale figure:last-child::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.52);
  content: "参数已更改";
  font-size: 11px;
  font-weight: 800;
}

.trace-control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.trace-control-grid label,
.trace-advanced-grid label,
.cmyk-dpi-field {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.trace-control-grid label > span,
.trace-advanced-grid label > span,
.cmyk-dpi-field > span {
  color: #64748b;
  font-size: 10px;
  font-weight: 750;
}

.floating-editor-tools.image-workbench select,
.floating-editor-tools.image-workbench input:not([type="checkbox"]):not([type="color"]) {
  width: 100%;
}

.trace-range-field > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.trace-range-field output,
.trace-threshold-field output {
  color: #2563eb;
  font-weight: 800;
}

.trace-range-field input,
.trace-threshold-field input {
  min-height: 18px !important;
  padding: 0 !important;
  accent-color: #2563eb;
}

.trace-advanced {
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.trace-advanced summary {
  padding: 8px 0;
  color: #475569;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.trace-advanced-grid {
  display: grid;
  grid-template-columns: 2fr 1fr repeat(3, auto);
  align-items: center;
  gap: 10px;
  padding: 0 0 10px;
}

.trace-advanced-grid > label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.trace-advanced-grid .is-disabled {
  opacity: 0.42;
}

.trace-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.trace-engine-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: auto;
  color: #0f766e;
  font-size: 10px;
  font-weight: 750;
}

.trace-engine-badge svg {
  width: 14px;
  height: 14px;
}

.cmyk-image-summary {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.cmyk-image-summary img {
  width: 72px;
  height: 54px;
  object-fit: contain;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 7px;
  background: #f8fafc;
}

.cmyk-image-summary > div {
  display: grid;
  gap: 4px;
}

.cmyk-image-summary strong {
  color: #0f172a;
  font-size: 14px;
}

.cmyk-image-summary span,
.cmyk-notice {
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
}

.cmyk-channel-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.cmyk-channel-strip span {
  display: grid;
  place-items: center;
  min-height: 26px;
  color: #ffffff;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 850;
}

.cmyk-channel-strip span:nth-child(1) { background: #00a7d6; }
.cmyk-channel-strip span:nth-child(2) { background: #d61f77; }
.cmyk-channel-strip span:nth-child(3) { color: #3f3f46; background: #f4d500; }
.cmyk-channel-strip span:nth-child(4) { background: #171717; }

.cmyk-notice {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 9px;
  border-left: 3px solid #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}

.cmyk-notice svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

.cmyk-convert-btn {
  width: 100%;
}

.cutout-method-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.cutout-method-row > label {
  display: grid;
  gap: 5px;
}

.cutout-method-row > label > span,
.cutout-color-field > span {
  color: #64748b;
  font-size: 10px;
  font-weight: 750;
}

.cutout-quality-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 8px;
  color: #0f766e;
  border: 1px solid rgba(13, 148, 136, 0.24);
  border-radius: 7px;
  background: rgba(13, 148, 136, 0.08);
  font-size: 10px;
  font-weight: 750;
}

.cutout-quality-badge.local {
  color: #475569;
  border-color: rgba(100, 116, 139, 0.24);
  background: rgba(100, 116, 139, 0.08);
}

.cutout-quality-badge svg {
  width: 13px;
  height: 13px;
}

.cutout-local-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto auto;
  align-items: end;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.72);
}

.cutout-local-controls.is-disabled {
  opacity: 0.46;
}

.cutout-color-field {
  display: grid;
  gap: 5px;
}

.cutout-color-field input {
  width: 42px;
  height: 30px;
  padding: 3px;
}

.cutout-auto-field {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  color: #475569;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.cutout-notice {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
}

.cutout-notice svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  color: #0f766e;
}

:root[data-theme="dark"] .floating-editor-tools.image-workbench {
  background: rgba(24, 24, 27, 0.98) !important;
}

:root[data-theme="dark"] .floating-image-head {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(24, 24, 27, 0.96);
}

:root[data-theme="dark"] .floating-image-identity strong,
:root[data-theme="dark"] .cmyk-image-summary strong,
:root[data-theme="dark"] .floating-image-tabs button.active {
  color: #f4f4f5;
}

:root[data-theme="dark"] .floating-image-tabs,
:root[data-theme="dark"] .floating-image-tabs button.active {
  border-color: rgba(255, 255, 255, 0.12);
  background: #27272a;
}

:root[data-theme="dark"] .trace-advanced,
:root[data-theme="dark"] .trace-preview-grid figure {
  border-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .floating-editor-tools .mini-btn:not(.primary) {
  color: #e4e4e7;
  border-color: rgba(255, 255, 255, 0.14);
  background: #27272a;
}

:root[data-theme="dark"] .cutout-local-controls {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(39, 39, 42, 0.72);
}

@media (max-width: 680px) {
  .floating-editor-tools.image-workbench {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
  }

  .floating-image-head {
    align-items: stretch;
    flex-direction: column;
  }

  .trace-control-grid,
  .trace-advanced-grid,
  .cutout-local-controls {
    grid-template-columns: 1fr 1fr;
  }
}

.semantic-replace-notice {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: 8px;
  background: rgba(254, 243, 199, 0.72);
  color: #92400e;
  font-size: 13px;
  line-height: 1.6;
}

#step-edit .thumb-panel .panel-head .icon-btn {
  flex: 0 0 30px;
  width: 30px;
  min-height: 30px;
}

:root[data-theme="dark"] .semantic-replace-notice {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(120, 53, 15, 0.28);
  color: #fde68a;
}

@media (max-width: 820px) {
  .rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    overflow-x: visible;
  }

  .rail-item {
    min-width: 0;
  }

  .workspace:has(#step-edit:not(.hidden)) {
    overflow-x: hidden;
  }

  #step-edit.editor-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(4, auto) !important;
    min-height: 0;
  }

  #step-edit .editor-top-ribbon,
  #step-edit .thumb-panel,
  #step-edit .canvas-area,
  #step-edit .inspector {
    grid-column: 1;
    width: 100%;
    height: auto;
    min-height: 0;
  }

  #step-edit .editor-top-ribbon {
    grid-row: 1;
    overflow: hidden;
  }

  #step-edit .thumb-panel {
    grid-row: 2;
  }

  #step-edit .thumb-panel .panel-head {
    flex-direction: row;
  }

  #step-edit .canvas-area {
    grid-row: 3;
    min-height: 500px;
  }

  #step-edit .inspector {
    grid-row: 4;
    max-height: none;
    overflow: visible;
  }

  #step-edit .canvas-toolbar {
    height: auto;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }

  #step-edit .editor-ribbon {
    width: max-content;
    min-width: 100%;
  }

  #step-edit .thumbnail-list {
    display: flex;
    gap: 10px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
  }

  #step-edit .thumb {
    flex: 0 0 160px;
  }

  #step-edit .office-canvas-shell {
    height: 500px;
    min-height: 500px;
  }

  #step-edit .slide-stage {
    padding: 18px 12px;
  }
}

/* /ui-polish.css */
/* ==== consolidated from /ui-polish.css (cascade order preserved) ==== */
/* Studio UI: final visual layer. Keeps legacy feature styles intact while
   establishing one predictable product shell and component language. */
:root {
  color-scheme: light;
  --ui-bg: #f5f5f7;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #fbfbfd;
  --ui-surface-muted: #f0f0f2;
  --ui-border: rgba(0, 0, 0, 0.09);
  --ui-border-strong: rgba(0, 0, 0, 0.16);
  --ui-text: #1d1d1f;
  --ui-muted: #6e6e73;
  --ui-primary: #0071e3;
  --ui-primary-hover: #0077ed;
  --ui-primary-soft: #eaf4ff;
  --ui-blue: #0071e3;
  --ui-amber: #bf6a02;
  --ui-danger: #d70015;
  --ui-radius: 8px;
  --ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.035), 0 10px 30px rgba(0, 0, 0, 0.045);
  --bg: var(--ui-bg);
  --panel: var(--ui-surface);
  --line: var(--ui-border);
  --line-strong: var(--ui-border-strong);
  --text: var(--ui-text);
  --muted: var(--ui-muted);
  --primary: var(--ui-primary);
  --primary-strong: var(--ui-primary-hover);
  --good: var(--ui-primary);
  --accent: var(--ui-amber);
  --danger: var(--ui-danger);
  --apple-bg: var(--ui-bg);
  --apple-card: var(--ui-surface);
  --apple-card-soft: var(--ui-surface-subtle);
  --apple-text: var(--ui-text);
  --apple-muted: var(--ui-muted);
  --apple-blue: var(--ui-primary);
  --apple-blue-dark: var(--ui-primary-hover);
  --apple-border: var(--ui-border);
  --apple-hairline: var(--ui-border);
  --apple-shadow: var(--ui-shadow);
  --apple-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.08);
}

html {
  min-width: 320px;
  background: var(--ui-bg);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  background: var(--ui-bg) !important;
  color: var(--ui-text);
  font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.5;
}

button,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  letter-spacing: 0;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: 2px solid rgba(0, 113, 227, 0.42);
  outline-offset: 2px;
}

.app-shell {
  grid-template-columns: 88px minmax(0, 1fr) !important;
  grid-template-rows: 68px minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100dvh;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--ui-bg);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  min-width: 0;
  min-height: 68px !important;
  height: 68px;
  margin: 0 !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.topbar > div:first-child {
  position: relative;
  min-width: 0;
  padding-left: 17px;
}

.topbar > div:first-child::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--ui-primary);
}

.topbar h1 {
  overflow: hidden;
  margin: 0;
  color: var(--ui-text);
  font-size: 17px !important;
  font-weight: 760 !important;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar p {
  overflow: hidden;
  margin: 3px 0 0 !important;
  color: var(--ui-muted);
  font-size: 12px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-actions {
  flex: 0 0 auto;
  gap: 8px !important;
}

.status-dot {
  min-width: 0 !important;
  max-width: 280px;
  min-height: 32px;
  padding: 0 11px;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  background: var(--ui-surface-subtle);
  color: var(--ui-muted) !important;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-dot::before {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  background: var(--ui-border-strong);
  box-shadow: 0 0 0 3px rgba(102, 115, 111, 0.08);
}

.status-dot.ready {
  border-color: #b8dcd5;
  background: #f0faf7;
  color: #23675f !important;
}

.status-dot.ready::before {
  background: #15947f;
  box-shadow: 0 0 0 3px rgba(21, 148, 127, 0.12);
}

.status-dot.mock::before {
  background: var(--ui-amber);
  box-shadow: 0 0 0 3px rgba(182, 106, 22, 0.1);
}

.primary-btn,
.ghost-btn,
.danger-btn,
.icon-btn {
  min-height: 36px;
  padding: 0 13px;
  border-radius: var(--ui-radius) !important;
  box-shadow: none !important;
  font-size: 13px;
  font-weight: 650;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.primary-btn {
  border-color: var(--ui-primary) !important;
  background: var(--ui-primary) !important;
  color: #ffffff !important;
}

.primary-btn:hover:not(:disabled) {
  border-color: var(--ui-primary-hover) !important;
  background: var(--ui-primary-hover) !important;
  box-shadow: 0 6px 16px rgba(0, 113, 227, 0.18) !important;
  transform: translateY(-1px);
}

.primary-btn:active:not(:disabled),
.ghost-btn:active:not(:disabled),
.icon-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.ghost-btn,
.icon-btn,
.theme-toggle-btn {
  border-color: var(--ui-border-strong) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
}

.ghost-btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled),
.theme-toggle-btn:hover:not(:disabled) {
  border-color: #96aaa5 !important;
  background: var(--ui-surface-subtle) !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.08) !important;
}

.danger-btn {
  border-color: #e7bbb7 !important;
  background: #fff7f6 !important;
  color: var(--ui-danger) !important;
}

button:disabled,
select:disabled,
input:disabled {
  opacity: 0.48;
}

.rail {
  position: sticky !important;
  top: 68px !important;
  z-index: 40;
  grid-row: 2 !important;
  align-self: start !important;
  width: 88px;
  height: calc(100dvh - 68px);
  max-height: none !important;
  margin: 0 !important;
  padding: 12px 8px !important;
  gap: 4px !important;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0 !important;
  border-right: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.rail-item {
  position: relative;
  display: grid !important;
  place-items: center;
  align-content: center;
  gap: 3px !important;
  width: 100%;
  min-height: 59px !important;
  padding: 6px 3px !important;
  border: 0 !important;
  border-radius: var(--ui-radius) !important;
  background: transparent !important;
  color: var(--ui-muted) !important;
  box-shadow: none !important;
  transform: none !important;
}

.rail-item::after {
  content: "";
  position: absolute;
  top: 11px;
  bottom: 11px;
  left: -8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: transparent;
  transform: scaleY(0.35);
  transition: background-color 160ms ease, transform 180ms ease;
}

.rail-item span {
  display: grid;
  place-items: center;
  width: 24px !important;
  height: 20px !important;
  border-radius: 4px !important;
  background: var(--ui-surface-muted) !important;
  color: var(--ui-muted) !important;
  font-variant-numeric: tabular-nums;
  font-size: 10px !important;
  font-weight: 750 !important;
}

.rail-item strong {
  max-width: 72px !important;
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.rail-item:hover {
  background: #f2f6f5 !important;
  color: var(--ui-text) !important;
}

.rail-item.active {
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
}

.rail-item.active::after {
  background: var(--ui-primary);
  transform: scaleY(1);
}

.rail-item.active span {
  background: var(--ui-primary) !important;
  color: #ffffff !important;
}

.workspace {
  grid-column: 2 !important;
  grid-row: 2 !important;
  min-width: 0;
  padding: 20px 24px 28px !important;
  background: var(--ui-bg);
}

.panel,
.flow-panel,
.setup-block,
.requirements-section,
.style-controls,
.style-lock-summary,
.style-option,
.style-moodboard,
.slide-preview,
.asset-item,
.image-to-ppt-panel,
.export-tile,
.thumb-panel,
.canvas-area,
.inspector,
#step-edit .editor-top-ribbon {
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.flow-panel {
  min-height: calc(100dvh - 116px) !important;
  padding: 24px !important;
}

.flow-panel:not(.hidden),
#step-edit:not(.hidden) {
  animation: studio-enter 240ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

@keyframes studio-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel-head {
  align-items: flex-start !important;
  gap: 18px;
  margin-bottom: 20px !important;
  padding: 0 0 18px !important;
  border-bottom: 1px solid var(--ui-border) !important;
}

.panel-head h2 {
  margin: 0;
  color: var(--ui-text) !important;
  font-size: 22px !important;
  font-weight: 750 !important;
  line-height: 1.25;
}

.panel-head p {
  max-width: 820px;
  margin: 5px 0 0 !important;
  color: var(--ui-muted) !important;
  font-size: 13px !important;
  line-height: 1.65;
}

.button-row {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px !important;
}

.form-grid,
.setup-layout-redesigned {
  gap: 16px !important;
}

label {
  gap: 7px;
}

label span,
.ribbon-title,
.asset-list-head span,
.style-moodboard-head span,
.export-tile span {
  color: var(--ui-muted) !important;
  font-size: 12px;
  font-weight: 560;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  min-height: 40px;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #9fafa9 !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(0, 113, 227, 0.68) !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1) !important;
}

textarea {
  line-height: 1.55;
}

.creation-mode-grid,
.mode-workspace-grid,
.upload-choice-grid,
.style-option-list,
.style-moodboard-grid,
.preview-grid,
.export-grid {
  gap: 12px !important;
}

.mode-card,
.mode-workspace,
.upload-choice,
.dropzone,
.outline-copy-settings,
.copy-ai-card,
.image-match-card,
.replace-image-control,
.project-optional,
.mode-flow-guide,
.asset-match-panel,
.social-ai-recommend-panel,
.social-recommend-box,
.social-more-layouts,
.social-advanced-panel {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface-subtle) !important;
  box-shadow: none !important;
}

.mode-card,
.mode-workspace,
.upload-choice {
  min-height: 108px;
  padding: 16px !important;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.mode-card:hover,
.mode-workspace:hover,
.upload-choice:hover,
.style-moodboard:hover,
.slide-preview:hover,
.export-tile:hover:not(:disabled) {
  border-color: #aec0bb !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07) !important;
  transform: translateY(-1px);
}

.mode-card.selected,
.mode-workspace.active,
.upload-choice.active,
.style-moodboard.selected,
.export-tile.ready {
  border-color: rgba(0, 113, 227, 0.55) !important;
  background: #f2faf8 !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.08) !important;
}

.mode-card strong,
.mode-workspace strong,
.upload-choice strong,
.style-moodboard-head strong,
.export-tile strong {
  color: var(--ui-text) !important;
  font-weight: 700 !important;
}

.mode-card em,
.mode-workspace em,
.upload-choice span,
.style-moodboard p {
  color: var(--ui-muted) !important;
  font-style: normal;
  line-height: 1.55;
}

.project-optional {
  padding: 13px 14px !important;
}

.project-optional summary,
.requirements-advanced summary,
.advanced-tools summary,
.social-more-layouts summary,
.social-advanced-panel summary {
  color: var(--ui-text) !important;
  font-size: 13px;
  font-weight: 650 !important;
}

.setup-block {
  box-shadow: none !important;
}

.setup-block .requirements-section,
.social-step-card .social-source-pool,
.inspector-toolbox .inspector-tool-section {
  border: 0 !important;
  border-top: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.style-moodboard,
.slide-preview,
.asset-item,
.export-tile {
  overflow: hidden;
}

.style-moodboard-image-btn,
.style-moodboard-image-btn img,
.style-moodboard img,
.slide-preview .mini-slide,
.design-preview-img,
.semantic-rebuild-thumb,
.social-source-card,
.social-output-card,
.social-source-card img,
.social-output-card img {
  border-radius: var(--ui-radius) !important;
}

.image-load-error {
  display: none !important;
}

.image-load-fallback {
  display: grid;
  width: 100%;
  min-height: 120px;
  place-items: center;
  padding: 24px;
  color: var(--text-muted, #6e6e73);
  background: #f5f5f7;
  font-size: 13px;
  text-align: center;
}

.empty-state {
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface-subtle) !important;
  color: var(--ui-muted) !important;
}

.export-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.export-tile {
  position: relative;
  min-height: 156px !important;
  padding: 24px !important;
  text-align: left;
}

.export-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--ui-border);
  transition: background-color 160ms ease;
}

.export-tile.ready::before {
  background: var(--ui-primary);
}

.export-tile strong {
  font-size: 24px !important;
  letter-spacing: 0;
}

.generation-progress,
#toast,
.floating-editor-tools {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.generation-progress-bar {
  background: var(--ui-surface-muted) !important;
}

.generation-progress-bar span {
  background: var(--ui-primary) !important;
}

#toast {
  border-radius: 999px !important;
}

#step-edit .canvas-toolbar {
  height: 52px !important;
  max-height: 52px !important;
  padding: 6px 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ui-surface) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#step-edit .editor-ribbon {
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: max-content;
  min-width: 100%;
}

#step-edit .ribbon-group {
  flex: 0 0 auto;
  min-height: 38px !important;
  padding: 3px 8px !important;
  gap: 5px !important;
  border: 0 !important;
  border-right: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#step-edit .ribbon-group:last-child {
  border-right: 0 !important;
}

#step-edit .ribbon-title {
  align-self: center;
  padding: 0 3px 0 0 !important;
  border: 0 !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  white-space: nowrap;
}

#step-edit .ribbon-tool,
#step-edit .ribbon-select,
#step-edit .ribbon-number,
#step-edit .ribbon-color {
  min-height: 30px !important;
  padding: 0 9px !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: 5px !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
  font-size: 11px !important;
}

#step-edit .ribbon-tool::before,
#step-edit #addTextBtn::before,
#step-edit #deleteElementBtn::before,
#step-edit .inspector-toolbox .ribbon-tool::before,
#step-edit .inspector-toolbox #deleteElementBtn::before {
  display: none !important;
  content: none !important;
}

#step-edit .ribbon-tool:hover:not(:disabled),
#step-edit .ribbon-select:hover:not(:disabled),
#step-edit .ribbon-number:hover:not(:disabled) {
  border-color: #92a7a1 !important;
  background: var(--ui-surface-subtle) !important;
}

#step-edit .ribbon-tool.active {
  border-color: rgba(0, 113, 227, 0.38) !important;
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
  box-shadow: none !important;
}

#step-edit .inspector-toolbox .ribbon-tool.active {
  border-color: rgba(0, 113, 227, 0.4) !important;
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
  box-shadow: none !important;
}

:root:not([data-theme="dark"]) #step-edit .inspector-toolbox .ribbon-tool.active {
  border-color: rgba(0, 113, 227, 0.4) !important;
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
  box-shadow: none !important;
}

#step-edit .thumb-panel .panel-head,
#step-edit .inspector .panel-head {
  flex: 0 0 auto;
  min-height: 36px !important;
  margin: 0 0 10px !important;
  padding: 0 0 10px !important;
}

#step-edit .thumb-panel .panel-head h2,
#step-edit .inspector .panel-head h2 {
  font-size: 15px !important;
  font-weight: 700 !important;
}

#step-edit .thumb-panel-actions {
  flex: 0 0 auto;
  margin-bottom: 10px;
}

#step-edit #addSlideBtn {
  width: 100%;
  border-color: var(--ui-primary) !important;
  background: var(--ui-primary) !important;
  color: #ffffff !important;
}

#step-edit .thumbnail-list {
  flex: 1 1 auto;
  align-content: start;
  max-height: none !important;
  min-height: 0;
  padding: 0 3px 8px 0;
  gap: 8px !important;
  overflow-x: hidden;
  overflow-y: auto;
}

#step-edit .thumbnail-list:empty::before {
  content: "暂无页面" !important;
}

#step-edit .thumb {
  padding: 7px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

#step-edit .thumb:hover {
  border-color: #9fb1ac !important;
}

#step-edit .thumb.active {
  border-color: var(--ui-primary) !important;
  background: var(--ui-primary-soft) !important;
  box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.1) !important;
}

#step-edit .thumb .mini-slide {
  border-radius: 3px !important;
}

#step-edit .office-canvas-shell {
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  background: #e4e8e7 !important;
}

#step-edit .office-canvas-body {
  min-height: 0;
}

#step-edit .slide-stage {
  height: 100%;
  min-height: 0 !important;
  padding: 28px 32px !important;
  background-color: #dfe4e2 !important;
  background-image: linear-gradient(rgba(88, 107, 101, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(88, 107, 101, 0.1) 1px, transparent 1px) !important;
  background-position: 0 0 !important;
  background-size: 24px 24px !important;
}

#step-edit .slide-canvas {
  border: 1px solid #b8c0be !important;
  border-radius: 2px !important;
  box-shadow: 0 18px 44px rgba(29, 42, 38, 0.2) !important;
}

#step-edit .office-ruler,
#step-edit .office-status-bar {
  border-color: var(--ui-border) !important;
  background: var(--ui-surface-subtle) !important;
  color: #55635f !important;
}

#step-edit .speaker-notes-panel {
  padding: 9px 12px 10px !important;
  border-top: 1px solid var(--ui-border) !important;
  background: var(--ui-surface) !important;
}

#step-edit #speakerNotesInput {
  min-height: 70px;
  border-color: var(--ui-border) !important;
  background: var(--ui-surface-subtle) !important;
}

#step-edit .inspector-toolbox {
  gap: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--ui-border);
}

#step-edit .inspector-tool-section {
  padding: 11px 0 !important;
}

#step-edit .inspector-tool-section:first-child {
  border-top: 0 !important;
  padding-top: 0 !important;
}

#step-edit .inspector-tool-section h3 {
  margin: 0 0 8px !important;
  color: var(--ui-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

#step-edit .inspector-tool-grid,
#step-edit .inspector-tool-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

#step-edit .inspector-toolbox .ghost-btn,
#step-edit .inspector-toolbox .danger-btn,
#step-edit .inspector-toolbox .ribbon-tool {
  width: 100%;
  min-height: 30px !important;
  padding: 0 6px !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  white-space: normal !important;
}

#step-edit .editor-layer-list,
#step-edit .inspector-body {
  margin-top: 12px;
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface-subtle) !important;
  box-shadow: none !important;
}

/* Social publishing is a work surface, not a landing page. */
.social-apple-panel {
  padding: 0 !important;
  overflow: hidden;
}

.social-store-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 24px !important;
  min-height: 0 !important;
  padding: 24px !important;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface) !important;
}

.social-eyebrow {
  display: inline-block;
  margin-bottom: 5px;
  color: var(--ui-primary) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}

.social-store-hero h2 {
  max-width: none !important;
  margin: 0 !important;
  color: var(--ui-text) !important;
  font-size: 24px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

.social-store-hero p {
  max-width: 760px !important;
  margin: 6px 0 0 !important;
  color: var(--ui-muted) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.social-hero-side {
  align-items: flex-end !important;
  min-width: 290px;
}

.social-model-pills {
  gap: 6px !important;
}

.social-model-pills div,
.social-model-status div {
  min-height: 30px;
  border: 1px solid #b9dcd6 !important;
  border-radius: 999px !important;
  background: #f1faf8 !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
}

.social-quick-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 24px !important;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface-subtle);
}

.social-quick-strip div {
  min-height: 50px;
  padding: 0 14px !important;
  border: 0 !important;
  border-right: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.social-quick-strip div:last-child {
  border-right: 0 !important;
}

.social-quick-strip strong {
  color: var(--ui-primary) !important;
}

.social-publish-layout {
  padding: 20px 24px 24px !important;
  background: var(--ui-bg);
}

.social-workflow-column,
.social-preview-column {
  gap: 12px !important;
}

.social-step-card,
.social-preview-panel {
  padding: 18px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
}

.social-step-head > span {
  background: var(--ui-primary) !important;
  color: #ffffff !important;
}

.social-step-head strong {
  color: var(--ui-text) !important;
  font-size: 15px !important;
}

.social-step-head p,
.social-inline-advice,
.social-inner-rule p,
.social-preview-advice {
  color: var(--ui-muted) !important;
  font-size: 12px !important;
}

.social-source-pools {
  gap: 0 !important;
  margin-top: 14px;
  border-bottom: 1px solid var(--ui-border);
}

.social-source-pool {
  padding: 16px 0 !important;
}

.social-source-pool:nth-child(odd) {
  padding-right: 12px !important;
}

.social-source-pool:nth-child(even) {
  padding-left: 12px !important;
  border-left: 1px solid var(--ui-border) !important;
}

.social-layout-choice,
.social-page-rule,
.social-copy-view article,
.social-source-card,
.social-output-card {
  border-color: var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface-subtle) !important;
  box-shadow: none !important;
}

/* Correct legacy generated labels that were committed with broken encoding. */
.upload-choice.reference-choice.upload-mode-reference strong::after {
  content: "推荐上传" !important;
}

.editor-layer-item.grouped small::after {
  content: " · 组合" !important;
}

/* Dark mode keeps the same restrained hierarchy. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #111514;
  --ui-surface: #181d1c;
  --ui-surface-subtle: #1e2422;
  --ui-surface-muted: #27302d;
  --ui-border: #303a37;
  --ui-border-strong: #43504c;
  --ui-text: #edf2f0;
  --ui-muted: #9daba6;
  --ui-primary: #4cc5b4;
  --ui-primary-hover: #6dd2c3;
  --ui-primary-soft: #153d37;
  --ui-blue: #78a8ff;
  --ui-amber: #e0a258;
  --ui-danger: #ff847c;
  --ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 14px 34px rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .app-shell,
:root[data-theme="dark"] .workspace {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .rail,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .flow-panel,
:root[data-theme="dark"] .setup-block,
:root[data-theme="dark"] .requirements-section,
:root[data-theme="dark"] .style-controls,
:root[data-theme="dark"] .style-lock-summary,
:root[data-theme="dark"] .style-option,
:root[data-theme="dark"] .style-moodboard,
:root[data-theme="dark"] .slide-preview,
:root[data-theme="dark"] .asset-item,
:root[data-theme="dark"] .image-to-ppt-panel,
:root[data-theme="dark"] .export-tile,
:root[data-theme="dark"] #step-edit .editor-top-ribbon,
:root[data-theme="dark"] #step-edit .thumb-panel,
:root[data-theme="dark"] #step-edit .canvas-area,
:root[data-theme="dark"] #step-edit .inspector,
:root[data-theme="dark"] .social-store-hero,
:root[data-theme="dark"] .social-step-card,
:root[data-theme="dark"] .social-preview-panel,
:root[data-theme="dark"] .generation-progress,
:root[data-theme="dark"] .floating-editor-tools {
  border-color: var(--ui-border) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  box-shadow: var(--ui-shadow) !important;
}

:root[data-theme="dark"] .ghost-btn,
:root[data-theme="dark"] .icon-btn,
:root[data-theme="dark"] .theme-toggle-btn,
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .mode-card,
:root[data-theme="dark"] .mode-workspace,
:root[data-theme="dark"] .upload-choice,
:root[data-theme="dark"] .dropzone,
:root[data-theme="dark"] .outline-copy-settings,
:root[data-theme="dark"] .project-optional,
:root[data-theme="dark"] .social-layout-choice,
:root[data-theme="dark"] .social-page-rule,
:root[data-theme="dark"] .social-copy-view article,
:root[data-theme="dark"] .social-source-card,
:root[data-theme="dark"] .social-output-card,
:root[data-theme="dark"] #step-edit .ribbon-tool,
:root[data-theme="dark"] #step-edit .ribbon-select,
:root[data-theme="dark"] #step-edit .ribbon-number,
:root[data-theme="dark"] #step-edit .inspector-tool-section,
:root[data-theme="dark"] #step-edit .editor-layer-list,
:root[data-theme="dark"] #step-edit .inspector-body,
:root[data-theme="dark"] #step-edit #speakerNotesInput {
  border-color: var(--ui-border-strong) !important;
  background: var(--ui-surface-subtle) !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .mode-card.selected,
:root[data-theme="dark"] .mode-workspace.active,
:root[data-theme="dark"] .upload-choice.active,
:root[data-theme="dark"] .style-moodboard.selected,
:root[data-theme="dark"] .export-tile.ready,
:root[data-theme="dark"] .rail-item.active,
:root[data-theme="dark"] #step-edit .ribbon-tool.active,
:root[data-theme="dark"] #step-edit .thumb.active {
  border-color: rgba(76, 197, 180, 0.48) !important;
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
}

:root[data-theme="dark"] .rail-item:hover {
  background: var(--ui-surface-subtle) !important;
  color: var(--ui-text) !important;
}

:root[data-theme="dark"] .status-dot.ready,
:root[data-theme="dark"] .social-model-pills div,
:root[data-theme="dark"] .social-model-status div {
  border-color: #2f665d !important;
  background: #17302c !important;
  color: #b8e8df !important;
}

:root[data-theme="dark"] .primary-btn {
  border-color: var(--ui-primary) !important;
  background: var(--ui-primary) !important;
  color: #0d211e !important;
}

:root[data-theme="dark"] .primary-btn:hover:not(:disabled) {
  border-color: var(--ui-primary-hover) !important;
  background: var(--ui-primary-hover) !important;
}

:root[data-theme="dark"] #step-edit .office-canvas-shell {
  background: #151a19 !important;
}

:root[data-theme="dark"] #step-edit .slide-stage {
  background-color: #202624 !important;
  background-image: linear-gradient(rgba(142, 164, 157, 0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(142, 164, 157, 0.11) 1px, transparent 1px) !important;
}

:root[data-theme="dark"] #step-edit .office-ruler,
:root[data-theme="dark"] #step-edit .office-status-bar,
:root[data-theme="dark"] #step-edit .speaker-notes-panel,
:root[data-theme="dark"] .social-quick-strip {
  border-color: var(--ui-border) !important;
  background: var(--ui-surface-subtle) !important;
  color: var(--ui-muted) !important;
}

@media (max-width: 1180px) {
  .status-dot {
    max-width: 190px;
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .app-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    padding-bottom: 70px;
  }

  .topbar {
    grid-column: 1;
    grid-row: 1;
    align-items: stretch !important;
    flex-direction: column !important;
    justify-content: center;
    gap: 6px !important;
    min-height: 60px;
    height: auto;
    padding: 7px 12px !important;
  }

  .topbar > div:first-child {
    max-width: none;
    padding-left: 12px;
  }

  .topbar h1 {
    font-size: 14px !important;
  }

  .topbar p {
    font-size: 10px !important;
  }

  .top-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 5px !important;
  }

  .top-actions .status-dot {
    display: none;
  }

  .top-actions .primary-btn,
  .top-actions .ghost-btn {
    min-height: 32px;
    padding: 0 9px;
    font-size: 11px;
  }

  .rail {
    position: fixed !important;
    top: auto !important;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex !important;
    width: 100%;
    height: 70px;
    margin: 0 !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    gap: 4px !important;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0 !important;
    border-top: 1px solid var(--ui-border) !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
  }

  .rail-item {
    flex: 0 0 68px;
    width: 68px;
    min-width: 68px !important;
    min-height: 56px !important;
    padding: 4px 2px !important;
  }

  .rail-item::after {
    top: auto;
    right: 15px;
    bottom: -6px;
    left: 15px;
    width: auto;
    height: 3px;
    transform: scaleX(0.35);
  }

  .rail-item.active::after {
    transform: scaleX(1);
  }

  .rail-item span {
    width: 22px !important;
    height: 17px !important;
    font-size: 9px !important;
  }

  .rail-item strong {
    max-width: 64px !important;
    font-size: 10px !important;
  }

  .workspace {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 12px 12px 16px !important;
    overflow: visible !important;
  }

  .flow-panel {
    min-height: 0 !important;
    padding: 16px !important;
  }

  .panel-head {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
  }

  .panel-head h2 {
    font-size: 19px !important;
  }

  .panel-head .button-row {
    justify-content: flex-start;
  }

  .panel-head > button,
  .panel-head > .primary-btn,
  .panel-head > .ghost-btn {
    align-self: flex-start;
    flex: 0 0 auto !important;
    width: auto;
  }

  .creation-mode-grid,
  .mode-workspace-grid,
  .upload-choice-grid,
  .form-grid,
  .export-grid,
  .social-quick-strip,
  .social-source-pools,
  .social-form-grid,
  .social-form-grid.compact,
  .social-layout-choice-grid,
  .social-layout-choice-grid.compact,
  .social-inner-rule {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .wide {
    grid-column: 1 !important;
  }

  .mode-card,
  .mode-workspace,
  .upload-choice {
    min-height: 0;
  }

  #step-edit .canvas-toolbar {
    border-radius: var(--ui-radius) !important;
  }

  #step-edit .thumbnail-list {
    display: flex;
    flex: 0 0 auto;
    gap: 8px !important;
    max-height: none !important;
    overflow-x: auto;
    overflow-y: hidden;
  }

  #step-edit .thumb {
    flex: 0 0 150px;
  }

  #step-edit .office-canvas-shell {
    height: 500px !important;
    min-height: 500px !important;
  }

  #step-edit .slide-stage {
    padding: 18px 12px !important;
  }

  .social-store-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    padding: 18px 16px !important;
  }

  .social-store-hero h2 {
    font-size: 21px !important;
  }

  .social-hero-side {
    align-items: stretch !important;
    min-width: 0;
  }

  .social-quick-strip {
    display: grid !important;
    padding: 0 16px !important;
  }

  .social-quick-strip div {
    min-height: 42px;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ui-border) !important;
  }

  .social-quick-strip div:last-child {
    border-bottom: 0 !important;
  }

  .social-publish-layout {
    padding: 14px 12px 18px !important;
  }

  .social-source-pool:nth-child(odd),
  .social-source-pool:nth-child(even) {
    padding-right: 0 !important;
    padding-left: 0 !important;
    border-left: 0 !important;
  }
}

/* PC social publishing studio: results stay primary and regeneration is page-scoped. */
.social-studio-v2 .social-publish-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 20px 24px 28px !important;
}

.social-studio-v2 .social-result-stage {
  order: 2;
  position: static !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 24px !important;
  border-color: rgba(0, 113, 227, 0.2) !important;
  background: #fff !important;
  box-shadow: 0 18px 52px rgba(24, 40, 72, 0.07) !important;
}

.social-studio-v2 .social-result-stage.has-results {
  order: 1;
}

.social-studio-v2 .social-result-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.social-studio-v2 .social-result-stage-head > div:first-child {
  display: grid;
  gap: 3px;
}

.social-studio-v2 .social-result-stage-head > div:first-child > span {
  color: #6e6e73;
  font-size: 11px;
  font-weight: 700;
}

.social-studio-v2 .social-result-stage-head > div:first-child > strong {
  color: #1d1d1f;
  font-size: 22px;
  font-weight: 680;
  line-height: 1.25;
}

.social-studio-v2 .social-result-toolbar {
  display: grid;
  grid-template-columns: 148px auto auto;
  align-items: center;
  gap: 8px;
}

.social-studio-v2 .social-result-toolbar select,
.social-studio-v2 .social-result-toolbar button {
  min-height: 38px;
}

.social-studio-v2 .social-preview-advice {
  margin: 16px 0 0 !important;
  padding: 11px 13px !important;
  border: 1px solid rgba(0, 113, 227, 0.12) !important;
  border-radius: 6px !important;
  background: #f5f8fc !important;
  color: #515154 !important;
  font-size: 12px !important;
}

.social-studio-v2 .social-image-result-section {
  margin-top: 20px;
}

.social-studio-v2 .social-result-head {
  min-height: 34px;
}

.social-studio-v2 .social-output-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(340px, 430px)) !important;
  justify-content: start;
  align-items: start;
  gap: 22px !important;
  margin-top: 10px;
}

.social-studio-v2 .social-output-grid.empty-state {
  display: flex !important;
  min-height: 210px !important;
  width: 100%;
  border-radius: 6px !important;
  background: #fbfbfd !important;
}

.social-studio-v2 .social-output-notice {
  grid-column: 1 / -1;
  max-width: 882px;
  padding: 12px 14px;
  border-radius: 6px;
  background: #f3f8ff;
}

.social-studio-v2 .social-output-card {
  width: 100%;
  min-width: 0;
  border-radius: 8px !important;
  background: #f7f7f8 !important;
  box-shadow: 0 12px 34px rgba(31, 41, 55, 0.08) !important;
  overflow: hidden;
}

.social-studio-v2 .social-output-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 360px;
  border: 0;
  background: #eceef1;
  cursor: zoom-in;
  overflow: hidden;
}

.social-studio-v2 .social-output-card .social-output-preview img {
  width: 100% !important;
  height: auto !important;
  max-height: 580px;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background: #eceef1 !important;
  transition: transform 260ms ease, filter 260ms ease;
}

.social-studio-v2 .social-output-preview:hover img {
  transform: scale(1.012);
  filter: saturate(1.03);
}

.social-studio-v2 .social-output-card figcaption {
  display: grid;
  gap: 8px;
  padding: 14px !important;
  background: #fff;
}

.social-studio-v2 .social-output-card-title,
.social-studio-v2 .social-output-card-actions {
  display: grid;
  align-items: center;
  gap: 8px;
}

.social-studio-v2 .social-output-card-title {
  grid-template-columns: minmax(0, 1fr) auto;
}

.social-studio-v2 .social-output-card-title strong {
  color: #1d1d1f;
  font-size: 16px;
  font-weight: 680;
}

.social-studio-v2 .social-output-card-title em {
  padding: 4px 7px;
  border: 1px solid rgba(0, 113, 227, 0.15);
  border-radius: 999px;
  background: rgba(0, 113, 227, 0.07);
  color: #0066cc;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.social-studio-v2 .social-output-card figcaption > span {
  color: #6e6e73;
  font-size: 11px;
  white-space: normal;
}

.social-studio-v2 .social-output-card-actions {
  grid-template-columns: minmax(0, 1fr) 104px;
  padding-top: 4px;
}

.social-studio-v2 .social-output-card-actions .ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin: 0;
  text-decoration: none;
}

.social-studio-v2 .social-copy-result-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.social-studio-v2 .social-copy-result-section .social-copy-view.empty-state {
  min-height: 88px;
  border-radius: 6px;
}

.social-studio-v2 .social-workflow-column {
  order: 1;
  display: grid;
  gap: 12px !important;
}

.social-studio-v2 .social-result-stage.has-results + .social-workflow-column {
  order: 2;
}

.social-studio-v2 .social-layout-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: #f7f7f8;
}

.social-studio-v2 .social-layout-controls label {
  display: grid;
  gap: 6px;
}

.social-studio-v2 .social-layout-controls label > span {
  color: #6e6e73;
  font-size: 11px;
  font-weight: 700;
}

.social-studio-v2 .social-layout-controls select {
  min-width: 0;
  min-height: 38px;
  background: #fff;
}

.social-studio-v2 .social-inner-rule {
  grid-template-columns: 92px minmax(0, 1fr) !important;
  align-items: center;
  margin-top: 12px;
  padding: 12px 14px;
  border: 0 !important;
  border-radius: 8px;
  background: #f7f7f8;
}

.social-studio-v2 .social-inner-layout-preview {
  width: 64px;
  min-height: 82px;
  aspect-ratio: 3 / 4;
  padding: 6px;
  border-radius: 6px;
}

.social-studio-v2 .social-inner-layout-preview.focus,
.social-studio-v2 .social-inner-layout-preview.overlap {
  position: relative;
  display: block;
}

.social-studio-v2 .social-inner-layout-preview.focus span:first-child {
  position: absolute;
  inset: 6px 11px 29px 6px;
}

.social-studio-v2 .social-inner-layout-preview.focus span:last-child {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 34px;
  height: 27px;
}

.social-studio-v2 .social-inner-layout-preview.split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.social-studio-v2 .social-inner-layout-preview.overlap span {
  position: absolute;
  width: 38px;
  height: 50px;
}

.social-studio-v2 .social-inner-layout-preview.overlap span:first-child {
  top: 7px;
  left: 7px;
  transform: rotate(-4deg);
}

.social-studio-v2 .social-inner-layout-preview.overlap span:last-child {
  right: 7px;
  bottom: 7px;
  transform: rotate(4deg);
}

:root[data-theme="dark"] .social-studio-v2 .social-result-stage {
  border-color: rgba(41, 151, 255, 0.24) !important;
  background: #161617 !important;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.32) !important;
}

:root[data-theme="dark"] .social-studio-v2 .social-result-stage-head,
:root[data-theme="dark"] .social-studio-v2 .social-copy-result-section {
  border-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .social-studio-v2 .social-result-stage-head strong,
:root[data-theme="dark"] .social-studio-v2 .social-output-card-title strong {
  color: #f5f5f7;
}

:root[data-theme="dark"] .social-studio-v2 .social-preview-advice,
:root[data-theme="dark"] .social-studio-v2 .social-layout-controls,
:root[data-theme="dark"] .social-studio-v2 .social-inner-rule,
:root[data-theme="dark"] .social-studio-v2 .social-output-grid.empty-state {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #1d1d1f !important;
  color: #a1a1a6 !important;
}

:root[data-theme="dark"] .social-studio-v2 .social-output-card,
:root[data-theme="dark"] .social-studio-v2 .social-output-card figcaption,
:root[data-theme="dark"] .social-studio-v2 .social-layout-controls select {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #1d1d1f !important;
}

:root[data-theme="dark"] .social-studio-v2 .social-output-preview,
:root[data-theme="dark"] .social-studio-v2 .social-output-card .social-output-preview img {
  background: #0d0d0e !important;
}

:root[data-theme="dark"] .social-studio-v2 .social-output-notice {
  border-color: rgba(41, 151, 255, 0.22) !important;
  background: #1d1d1f !important;
}

:root[data-theme="dark"] .social-studio-v2 .social-output-notice strong {
  color: #f5f5f7 !important;
}

:root[data-theme="dark"] .social-studio-v2 .social-output-notice span {
  color: #a1a1a6 !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Customer workflow: project hub, focused navigation, and delivery readiness. */
.save-state {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: #6e6e73;
  font-size: 12px;
  white-space: nowrap;
}

.top-actions #saveDeckBtn.hidden {
  display: none !important;
}

.save-state::before {
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #34c759;
  content: "";
}

.save-state[data-status="dirty"]::before,
.save-state[data-status="saving"]::before {
  background: #ff9f0a;
}

.save-state[data-status="error"] {
  color: #d70015;
}

.save-state[data-status="error"]::before {
  background: #ff3b30;
}

.project-hub-view {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.project-hub-view.empty-state {
  display: flex;
  min-height: 112px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.project-hub-view.empty-state span {
  color: #6e6e73;
  font-size: 13px;
}

.project-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  padding: 14px;
  border: 1px solid rgba(60, 60, 67, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.project-card.current {
  border-color: rgba(0, 113, 227, 0.36);
  box-shadow: inset 3px 0 #0071e3;
}

.project-card-main {
  display: grid;
  min-width: 0;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-column: 1 / -1;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.project-card-cover {
  display: grid;
  width: 96px;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(60, 60, 67, 0.13);
  border-radius: 6px;
  background: #eef1f5 center / cover no-repeat;
  color: #6e6e73;
}

.project-card-cover .lucide {
  width: 22px;
  height: 22px;
}

.project-card-copy {
  display: flex;
  min-width: 0;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
}

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

.project-card-copy strong {
  color: #1d1d1f;
  font-size: 15px;
}

.project-card-copy em,
.project-card-copy small {
  color: #6e6e73;
  font-size: 12px;
  font-style: normal;
}

.project-progress {
  display: flex;
  align-items: center;
  gap: 5px;
}

.project-progress span {
  padding: 4px 7px;
  border-radius: 5px;
  background: rgba(118, 118, 128, 0.1);
  color: #8e8e93;
  font-size: 11px;
}

.project-progress span.done {
  background: rgba(52, 199, 89, 0.12);
  color: #248a3d;
}

.project-card-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.project-list-toggle {
  grid-column: 1 / -1;
  justify-self: center;
}

.project-delete-btn {
  color: #d70015 !important;
}

.new-project-panel,
.style-library-details {
  border-top: 1px solid rgba(60, 60, 67, 0.13);
}

.new-project-panel > summary,
.style-library-details > summary {
  padding: 16px 2px;
  color: #1d1d1f;
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
}

.new-project-form {
  padding-top: 4px;
}

.new-project-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.style-library-details {
  margin-top: 16px;
}

.style-library-details .style-option-list {
  margin-top: 2px;
}

.tool-launch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 920px;
}

.tool-launch-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(60, 60, 67, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.tool-launch-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: rgba(0, 113, 227, 0.1);
  color: #0071e3;
}

.tool-launch-item h3,
.tool-launch-item p {
  margin: 0;
}

.tool-launch-item h3 {
  font-size: 15px;
}

.tool-launch-item p {
  margin-top: 4px;
  color: #6e6e73;
  font-size: 12px;
}

.export-readiness {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(60, 60, 67, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.export-readiness > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.export-readiness > div span {
  color: #6e6e73;
  font-size: 12px;
}

.export-readiness ul {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 7px;
  list-style: none;
}

.export-readiness li {
  padding: 5px 8px;
  border-radius: 5px;
  background: rgba(255, 159, 10, 0.12);
  color: #9a5b00;
  font-size: 11px;
}

.export-readiness li.done {
  background: rgba(52, 199, 89, 0.12);
  color: #248a3d;
}

.rail-item:disabled {
  opacity: 0.34;
  cursor: not-allowed;
}

.rail-item-secondary {
  margin-top: 4px;
  border-top: 1px solid rgba(60, 60, 67, 0.1) !important;
}

#step-edit .selection-tools.hidden {
  display: none !important;
}

:root[data-theme="dark"] .save-state,
:root[data-theme="dark"] .project-card-copy em,
:root[data-theme="dark"] .project-card-copy small,
:root[data-theme="dark"] .project-hub-view.empty-state span,
:root[data-theme="dark"] .tool-launch-item p,
:root[data-theme="dark"] .export-readiness > div span {
  color: #a1a1a6;
}

:root[data-theme="dark"] .project-card,
:root[data-theme="dark"] .tool-launch-item,
:root[data-theme="dark"] .export-readiness {
  border-color: rgba(255, 255, 255, 0.13);
  background: #1d1d1f;
}

:root[data-theme="dark"] .project-card-copy strong,
:root[data-theme="dark"] .new-project-panel > summary,
:root[data-theme="dark"] .style-library-details > summary,
:root[data-theme="dark"] .tool-launch-item h3,
:root[data-theme="dark"] .export-readiness strong {
  color: #f5f5f7;
}

:root[data-theme="dark"] .project-card-cover {
  border-color: rgba(255, 255, 255, 0.11);
  background-color: #2c2c2e;
}

@media (min-width: 821px) and (max-width: 980px) {
  .app-shell {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    padding: 0 !important;
  }

  .rail {
    display: grid !important;
    width: 92px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(6, minmax(64px, 1fr)) !important;
    grid-auto-flow: row !important;
    overflow: hidden !important;
  }

  .rail-item {
    width: 100% !important;
    min-width: 0 !important;
  }

  .workspace {
    min-width: 0;
  }

  .project-hub-view,
  .tool-launch-grid {
    grid-template-columns: 1fr;
  }

  .export-readiness {
    grid-template-columns: 1fr;
  }

  .export-readiness ul {
    flex-wrap: wrap;
  }
}

/* Apple Studio refinement: typography, space, iconography, and motion. */
::selection {
  background: rgba(0, 113, 227, 0.2);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  font-family: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline-color: rgba(0, 113, 227, 0.58) !important;
}

.topbar {
  background: rgba(250, 250, 252, 0.82) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px) !important;
  backdrop-filter: saturate(180%) blur(22px) !important;
}

.topbar > .brand-block {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-left: 0 !important;
}

.topbar > .brand-block::before {
  display: none !important;
}

.brand-mark {
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #1d1d1f;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.brand-mark .lucide {
  width: 18px;
  height: 18px;
}

.brand-copy {
  min-width: 0;
}

.topbar h1 {
  font-size: 16px !important;
  font-weight: 650 !important;
}

.topbar p {
  margin-top: 2px !important;
  font-size: 11px !important;
}

.top-actions {
  gap: 7px !important;
}

.status-dot {
  min-height: 30px;
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.66);
  font-size: 11px;
}

.status-dot.ready {
  border-color: rgba(48, 176, 124, 0.24);
  background: rgba(236, 250, 243, 0.82);
  color: #16734c !important;
}

.status-dot.ready::before {
  background: #30b07c;
  box-shadow: 0 0 0 3px rgba(48, 176, 124, 0.12);
}

.primary-btn,
.ghost-btn,
.danger-btn,
.icon-btn {
  min-height: 36px;
  border-radius: 8px !important;
  font-size: 12px;
  font-weight: 600;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease !important;
}

.primary-btn {
  border-color: #0071e3 !important;
  background: #0071e3 !important;
  color: #ffffff !important;
}

.primary-btn:hover:not(:disabled) {
  border-color: #0077ed !important;
  background: #0077ed !important;
  box-shadow: 0 8px 20px rgba(0, 113, 227, 0.22) !important;
  transform: translateY(-1px) scale(1.01);
}

.ghost-btn,
.icon-btn,
.theme-toggle-btn {
  border-color: rgba(0, 0, 0, 0.12) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: #1d1d1f !important;
}

.ghost-btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled),
.theme-toggle-btn:hover:not(:disabled) {
  border-color: rgba(0, 0, 0, 0.18) !important;
  background: #ffffff !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.08) !important;
}

.has-control-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.has-control-icon > .lucide,
.has-control-icon > svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.has-control-icon .button-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-only-control {
  width: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
}

.icon-only-control > .lucide,
.icon-only-control > svg {
  width: 16px;
  height: 16px;
}

.icon-only-control:hover:not(:disabled) > .lucide,
.icon-only-control:hover:not(:disabled) > svg,
.rail-item:hover .lucide {
  transform: scale(1.06);
}

.lucide {
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), color 180ms ease;
}

.control-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 220px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(29, 29, 31, 0.94);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-size: 11px;
  line-height: 1.3;
  pointer-events: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  animation: apple-tooltip-in 120ms ease both;
}

@keyframes apple-tooltip-in {
  from { opacity: 0; transform: translateY(-2px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.rail {
  width: 92px;
  padding: 14px 9px !important;
  border-right-color: rgba(0, 0, 0, 0.07) !important;
  background: rgba(251, 251, 253, 0.88) !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px) !important;
  backdrop-filter: saturate(160%) blur(18px) !important;
}

.app-shell {
  grid-template-columns: 92px minmax(0, 1fr) !important;
}

.rail-item {
  min-height: 64px !important;
  gap: 5px !important;
  border-radius: 8px !important;
  color: #6e6e73 !important;
}

.rail-item::after {
  display: none;
}

.rail-item span {
  width: 30px !important;
  height: 30px !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: inherit !important;
}

.rail-item span .lucide,
.rail-item span svg {
  width: 17px;
  height: 17px;
}

.rail-item strong {
  color: inherit !important;
  font-size: 10px !important;
  font-weight: 560 !important;
}

.rail-item:hover {
  background: rgba(0, 0, 0, 0.035) !important;
  color: #1d1d1f !important;
}

.rail-item.active {
  background: rgba(0, 113, 227, 0.09) !important;
  color: #0071e3 !important;
}

.rail-item.active span {
  background: #0071e3 !important;
  color: #ffffff !important;
  box-shadow: 0 5px 14px rgba(0, 113, 227, 0.2);
}

.rail-item.active span .lucide,
.rail-item.active span svg {
  transform: scale(1.04);
}

.workspace {
  padding: 24px 28px 32px !important;
}

.panel,
.flow-panel,
.setup-block,
.requirements-section,
.style-controls,
.style-lock-summary,
.style-option,
.style-moodboard,
.slide-preview,
.asset-item,
.image-to-ppt-panel,
.export-tile,
.thumb-panel,
.canvas-area,
.inspector,
#step-edit .editor-top-ribbon {
  border-color: rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.025), 0 12px 36px rgba(0, 0, 0, 0.035) !important;
}

.flow-panel {
  min-height: calc(100dvh - 124px) !important;
  padding: 30px 32px 34px !important;
}

#step-style.flow-panel:not(.hidden) {
  min-height: auto !important;
}

#step-design.flow-panel:not(.hidden) {
  min-height: 520px !important;
}

.flow-panel:not(.hidden),
#step-edit:not(.hidden) {
  animation: apple-workspace-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes apple-workspace-in {
  from { opacity: 0; transform: translateY(7px) scale(0.997); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.panel-head {
  gap: 22px !important;
  margin-bottom: 24px !important;
  padding-bottom: 22px !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

.panel-head h2 {
  color: #1d1d1f !important;
  font-size: 25px !important;
  font-weight: 650 !important;
  line-height: 1.18;
}

.panel-head p {
  margin-top: 7px !important;
  color: #6e6e73 !important;
  font-size: 13px !important;
  line-height: 1.6;
}

label span,
.ribbon-title,
.asset-list-head span,
.style-moodboard-head span,
.export-tile span {
  color: #6e6e73 !important;
  font-weight: 500;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  min-height: 42px;
  padding: 10px 12px;
  border-color: rgba(0, 0, 0, 0.14) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #1d1d1f !important;
  font-size: 13px;
}

input:hover,
select:hover,
textarea:hover {
  border-color: rgba(0, 0, 0, 0.24) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #0071e3 !important;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12) !important;
}

.creation-mode-grid,
.mode-workspace-grid,
.upload-choice-grid,
.style-option-list,
.style-moodboard-grid,
.preview-grid,
.export-grid {
  gap: 14px !important;
}

.mode-card,
.mode-workspace,
.upload-choice,
.dropzone,
.outline-copy-settings,
.copy-ai-card,
.image-match-card,
.replace-image-control,
.project-optional,
.mode-flow-guide,
.asset-match-panel,
.social-ai-recommend-panel,
.social-recommend-box,
.social-more-layouts,
.social-advanced-panel {
  border-color: rgba(0, 0, 0, 0.09) !important;
  border-radius: 8px !important;
  background: #fbfbfd !important;
}

.mode-card,
.mode-workspace,
.upload-choice {
  min-height: 116px;
  padding: 19px 20px !important;
}

.mode-card > span {
  position: relative;
  padding-left: 38px;
}

.mode-card-symbol {
  position: absolute;
  top: -2px;
  left: 0;
  width: 25px;
  height: 25px;
  padding: 5px;
  border-radius: 7px;
  background: #f0f0f2;
  color: #1d1d1f;
}

.mode-card:hover,
.mode-workspace:hover,
.upload-choice:hover,
.style-moodboard:hover,
.slide-preview:hover,
.export-tile:hover:not(:disabled) {
  border-color: rgba(0, 0, 0, 0.14) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07) !important;
  transform: translateY(-2px);
}

.mode-card.selected,
.mode-workspace.active,
.upload-choice.active,
.style-moodboard.selected,
.export-tile.ready {
  border-color: rgba(0, 113, 227, 0.48) !important;
  background: #f5faff !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.08) !important;
}

.mode-card.selected .mode-card-symbol {
  background: #0071e3;
  color: #ffffff;
}

.mode-card input[type="radio"],
.style-option input[type="checkbox"] {
  accent-color: #0071e3;
}

.project-optional,
.requirements-advanced,
.advanced-tools,
.social-more-layouts,
.social-advanced-panel {
  overflow: hidden;
}

.project-optional[open] > :not(summary),
.requirements-advanced[open] > :not(summary),
.advanced-tools[open] > :not(summary),
.social-more-layouts[open] > :not(summary),
.social-advanced-panel[open] > :not(summary) {
  animation: apple-disclosure-in 220ms ease both;
}

@keyframes apple-disclosure-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.export-grid {
  gap: 12px !important;
}

.export-tile {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 15px;
  min-height: 166px !important;
  padding: 26px !important;
}

.export-tile::before {
  display: none;
}

.export-format-icon {
  grid-row: 1 / 3;
  align-self: center;
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 8px;
  background: #eaf4ff;
  color: #0071e3;
}

.export-tile strong {
  align-self: end;
  font-size: 23px !important;
  font-weight: 650 !important;
}

.export-tile span {
  align-self: start;
  margin-top: 5px;
}

.generation-progress,
#toast,
.floating-editor-tools {
  border-color: rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px) !important;
  backdrop-filter: saturate(180%) blur(22px) !important;
}

.generation-progress-bar span {
  background: #0071e3 !important;
}

.generation-progress.image-generation-progress {
  border-color: rgba(0, 113, 227, 0.28) !important;
}

.generation-progress.image-generation-progress .generation-progress-head strong::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #0071e3;
  box-shadow: 0 0 0 5px rgba(0, 113, 227, 0.1);
  animation: image-progress-dot 1.2s ease-in-out infinite;
}

.generation-progress.image-generation-progress .generation-progress-bar span {
  box-shadow: 0 0 14px rgba(0, 113, 227, 0.34);
  animation: image-progress-breathe 1.5s ease-in-out infinite;
}

.generation-progress.image-generation-progress.is-indeterminate .generation-progress-bar span::after {
  animation-duration: 0.85s;
}

button.image-task-running,
button.image-task-running:hover {
  border-color: #0071e3 !important;
  color: #ffffff !important;
  background: #0071e3 !important;
  box-shadow: 0 8px 22px rgba(0, 113, 227, 0.2) !important;
  opacity: 1 !important;
  cursor: progress !important;
}

button.image-task-running .lucide,
button.image-task-running svg {
  animation: image-button-spin 1.15s linear infinite;
}

@keyframes image-progress-dot {
  0%, 100% { opacity: 0.45; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes image-progress-breathe {
  0%, 100% { filter: brightness(0.92); }
  50% { filter: brightness(1.18); }
}

@keyframes image-button-spin {
  to { transform: rotate(360deg); }
}

/* Apple-like editing workbench: dense controls, quiet chrome, strong canvas. */
#step-edit .editor-top-ribbon,
#step-edit .thumb-panel,
#step-edit .canvas-area,
#step-edit .inspector {
  background: rgba(255, 255, 255, 0.97) !important;
}

#step-edit .canvas-toolbar {
  background: rgba(251, 251, 253, 0.92) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}

#step-edit .ribbon-group {
  border-right-color: rgba(0, 0, 0, 0.08) !important;
}

#step-edit .ribbon-title {
  color: #86868b !important;
  font-weight: 560 !important;
}

#step-edit .ribbon-tool,
#step-edit .ribbon-select,
#step-edit .ribbon-number,
#step-edit .ribbon-color {
  border-color: rgba(0, 0, 0, 0.12) !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #1d1d1f !important;
}

#step-edit .ribbon-tool.icon-only-control {
  width: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
}

#step-edit .ribbon-tool:hover:not(:disabled),
#step-edit .ribbon-select:hover:not(:disabled),
#step-edit .ribbon-number:hover:not(:disabled) {
  border-color: rgba(0, 0, 0, 0.18) !important;
  background: #f5f5f7 !important;
}

#step-edit .ribbon-tool.active,
:root:not([data-theme="dark"]) #step-edit .inspector-toolbox .ribbon-tool.active {
  border-color: rgba(0, 113, 227, 0.3) !important;
  background: #eaf4ff !important;
  color: #0071e3 !important;
}

#step-edit .thumb-panel,
#step-edit .inspector {
  padding: 13px !important;
}

#step-edit .thumb-panel .panel-head h2,
#step-edit .inspector .panel-head h2 {
  color: #1d1d1f !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

#step-edit #addSlideBtn {
  border-color: #0071e3 !important;
  background: #0071e3 !important;
}

#step-edit .thumb {
  border-color: rgba(0, 0, 0, 0.09) !important;
  background: #ffffff !important;
}

#step-edit .thumb.active {
  border-color: #0071e3 !important;
  background: #f5faff !important;
  box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.1) !important;
}

#step-edit .office-canvas-shell {
  background: #dedee3 !important;
}

#step-edit .slide-stage {
  background-color: #e5e5ea !important;
  background-image: linear-gradient(rgba(90, 90, 95, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(90, 90, 95, 0.09) 1px, transparent 1px) !important;
}

#step-edit .slide-canvas {
  border-color: rgba(0, 0, 0, 0.18) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2) !important;
}

#step-edit .office-ruler,
#step-edit .office-status-bar {
  background: rgba(251, 251, 253, 0.96) !important;
  color: #6e6e73 !important;
}

#step-edit .inspector-tool-section h3 {
  color: #86868b !important;
  font-weight: 600 !important;
}

#step-edit .inspector-toolbox .ghost-btn,
#step-edit .inspector-toolbox .danger-btn,
#step-edit .inspector-toolbox .ribbon-tool {
  gap: 6px;
  border-color: rgba(0, 0, 0, 0.1) !important;
  background: #ffffff !important;
}

#step-edit .inspector-toolbox .lucide {
  width: 13px;
  height: 13px;
}

#step-edit .editor-layer-list,
#step-edit .inspector-body {
  border-color: rgba(0, 0, 0, 0.08) !important;
  background: #fbfbfd !important;
}

.speaker-notes-panel {
  background: rgba(255, 255, 255, 0.98) !important;
}

/* Social publishing uses the same product language, without a marketing hero. */
.social-store-hero {
  padding: 28px 32px !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

.social-eyebrow {
  color: #0071e3 !important;
}

.social-store-hero h2 {
  color: #1d1d1f !important;
  font-size: 25px !important;
  font-weight: 650 !important;
}

.social-model-pills div,
.social-model-status div {
  border-color: rgba(48, 176, 124, 0.24) !important;
  background: rgba(236, 250, 243, 0.8) !important;
}

.social-quick-strip {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
  background: #fbfbfd !important;
}

.social-quick-strip strong {
  color: #0071e3 !important;
}

.social-step-card,
.social-preview-panel {
  border-color: rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

.social-step-head > span {
  background: #0071e3 !important;
}

/* Dark appearance mirrors Apple's black surfaces and luminous blue controls. */
:root[data-theme="dark"] {
  --ui-bg: #000000;
  --ui-surface: #161617;
  --ui-surface-subtle: #1d1d1f;
  --ui-surface-muted: #2c2c2e;
  --ui-border: rgba(255, 255, 255, 0.1);
  --ui-border-strong: rgba(255, 255, 255, 0.17);
  --ui-text: #f5f5f7;
  --ui-muted: #a1a1a6;
  --ui-primary: #2997ff;
  --ui-primary-hover: #40a2ff;
  --ui-primary-soft: rgba(41, 151, 255, 0.16);
}

:root[data-theme="dark"] .topbar {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(22, 22, 23, 0.82) !important;
}

:root[data-theme="dark"] .brand-mark {
  background: #f5f5f7;
  color: #1d1d1f;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .rail {
  border-right-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(22, 22, 23, 0.9) !important;
}

:root[data-theme="dark"] .rail-item {
  color: #a1a1a6 !important;
}

:root[data-theme="dark"] .rail-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f5f5f7 !important;
}

:root[data-theme="dark"] .rail-item.active {
  background: rgba(41, 151, 255, 0.14) !important;
  color: #6db7ff !important;
}

:root[data-theme="dark"] .rail-item.active span {
  background: #2997ff !important;
  color: #ffffff !important;
}

:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .flow-panel,
:root[data-theme="dark"] .setup-block,
:root[data-theme="dark"] .style-controls,
:root[data-theme="dark"] .style-moodboard,
:root[data-theme="dark"] .slide-preview,
:root[data-theme="dark"] .asset-item,
:root[data-theme="dark"] .image-to-ppt-panel,
:root[data-theme="dark"] .export-tile,
:root[data-theme="dark"] #step-edit .editor-top-ribbon,
:root[data-theme="dark"] #step-edit .thumb-panel,
:root[data-theme="dark"] #step-edit .canvas-area,
:root[data-theme="dark"] #step-edit .inspector,
:root[data-theme="dark"] .social-store-hero,
:root[data-theme="dark"] .social-step-card,
:root[data-theme="dark"] .social-preview-panel {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #161617 !important;
  color: #f5f5f7 !important;
}

:root[data-theme="dark"] .panel-head h2,
:root[data-theme="dark"] .social-store-hero h2,
:root[data-theme="dark"] #step-edit .thumb-panel .panel-head h2,
:root[data-theme="dark"] #step-edit .inspector .panel-head h2 {
  color: #f5f5f7 !important;
}

:root[data-theme="dark"] .primary-btn {
  border-color: #2997ff !important;
  background: #2997ff !important;
  color: #ffffff !important;
}

:root[data-theme="dark"] .primary-btn:hover:not(:disabled) {
  border-color: #40a2ff !important;
  background: #40a2ff !important;
}

:root[data-theme="dark"] .ghost-btn,
:root[data-theme="dark"] .icon-btn,
:root[data-theme="dark"] .theme-toggle-btn,
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .mode-card,
:root[data-theme="dark"] .mode-workspace,
:root[data-theme="dark"] .upload-choice,
:root[data-theme="dark"] .dropzone,
:root[data-theme="dark"] .project-optional,
:root[data-theme="dark"] .outline-copy-settings,
:root[data-theme="dark"] #step-edit .ribbon-tool,
:root[data-theme="dark"] #step-edit .ribbon-select,
:root[data-theme="dark"] #step-edit .ribbon-number,
:root[data-theme="dark"] #step-edit .inspector-toolbox .ribbon-tool,
:root[data-theme="dark"] #step-edit .editor-layer-list,
:root[data-theme="dark"] #step-edit .inspector-body {
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: #1d1d1f !important;
  color: #f5f5f7 !important;
}

:root[data-theme="dark"] .mode-card.selected,
:root[data-theme="dark"] .mode-workspace.active,
:root[data-theme="dark"] .upload-choice.active,
:root[data-theme="dark"] .style-moodboard.selected,
:root[data-theme="dark"] .export-tile.ready,
:root[data-theme="dark"] #step-edit .ribbon-tool.active,
:root[data-theme="dark"] #step-edit .inspector-toolbox .ribbon-tool.active,
:root[data-theme="dark"] #step-edit .thumb.active {
  border-color: rgba(41, 151, 255, 0.46) !important;
  background: rgba(41, 151, 255, 0.14) !important;
  color: #6db7ff !important;
}

:root[data-theme="dark"] .mode-card-symbol,
:root[data-theme="dark"] .export-format-icon {
  background: rgba(41, 151, 255, 0.14);
  color: #6db7ff;
}

:root[data-theme="dark"] #step-edit .canvas-toolbar,
:root[data-theme="dark"] #step-edit .office-ruler,
:root[data-theme="dark"] #step-edit .office-status-bar,
:root[data-theme="dark"] .social-quick-strip {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #1d1d1f !important;
  color: #a1a1a6 !important;
}

:root[data-theme="dark"] #step-edit .office-canvas-shell {
  background: #09090a !important;
}

:root[data-theme="dark"] #step-edit .slide-stage {
  background-color: #202022 !important;
  background-image: linear-gradient(rgba(180, 180, 185, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 180, 185, 0.1) 1px, transparent 1px) !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .flow-panel:not(.hidden),
  #step-edit:not(.hidden) {
    animation: none !important;
  }

  .primary-btn,
  .ghost-btn,
  .danger-btn,
  .icon-btn,
  .rail-item,
  .lucide,
  input,
  select,
  textarea {
    transition-duration: 0.01ms !important;
  }
}

/* /apple-workbench.css */
/* ==== consolidated from /apple-workbench.css (cascade order preserved) ==== */
/*
 * Apple Workbench
 *
 * A focused visual layer for the desktop application. The legacy styles keep
 * ownership of feature-specific layout; this file owns the product shell,
 * hierarchy, interaction feedback, and appearance themes.
 */

:root {
  color-scheme: light;
  --aw-bg: #f5f5f7;
  --aw-sidebar: rgba(251, 251, 253, 0.88);
  --aw-chrome: rgba(255, 255, 255, 0.82);
  --aw-surface: #ffffff;
  --aw-surface-raised: #ffffff;
  --aw-surface-soft: #f9f9fb;
  --aw-surface-strong: #eeeef0;
  --aw-text: #1d1d1f;
  --aw-text-secondary: #6e6e73;
  --aw-text-tertiary: #86868b;
  --aw-line: rgba(0, 0, 0, 0.09);
  --aw-line-strong: rgba(0, 0, 0, 0.16);
  --aw-blue: #0071e3;
  --aw-blue-hover: #0077ed;
  --aw-blue-soft: rgba(0, 113, 227, 0.09);
  --aw-green: #248a3d;
  --aw-green-soft: rgba(52, 199, 89, 0.1);
  --aw-orange: #9a5b00;
  --aw-orange-soft: rgba(255, 159, 10, 0.12);
  --aw-red: #d70015;
  --aw-red-soft: rgba(255, 59, 48, 0.09);
  --aw-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 10px 30px rgba(0, 0, 0, 0.04);
  --aw-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.04), 0 18px 42px rgba(0, 0, 0, 0.08);
  --aw-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --aw-motion-fast: 120ms;
  --aw-motion-standard: 160ms;
  --aw-sidebar-width: 208px;

  --ui-bg: var(--aw-bg);
  --ui-surface: var(--aw-surface);
  --ui-surface-subtle: var(--aw-surface-soft);
  --ui-surface-muted: var(--aw-surface-strong);
  --ui-border: var(--aw-line);
  --ui-border-strong: var(--aw-line-strong);
  --ui-text: var(--aw-text);
  --ui-muted: var(--aw-text-secondary);
  --ui-primary: var(--aw-blue);
  --ui-primary-hover: var(--aw-blue-hover);
  --ui-primary-soft: var(--aw-blue-soft);
  --bg: var(--aw-bg);
  --panel: var(--aw-surface);
  --line: var(--aw-line);
  --line-strong: var(--aw-line-strong);
  --text: var(--aw-text);
  --muted: var(--aw-text-secondary);
  --primary: var(--aw-blue);
  --primary-strong: var(--aw-blue-hover);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --aw-bg: #000000;
  --aw-sidebar: rgba(22, 22, 23, 0.9);
  --aw-chrome: rgba(22, 22, 23, 0.82);
  --aw-surface: #161617;
  --aw-surface-raised: #1d1d1f;
  --aw-surface-soft: #1d1d1f;
  --aw-surface-strong: #2c2c2e;
  --aw-text: #f5f5f7;
  --aw-text-secondary: #a1a1a6;
  --aw-text-tertiary: #8e8e93;
  --aw-line: rgba(255, 255, 255, 0.1);
  --aw-line-strong: rgba(255, 255, 255, 0.17);
  --aw-blue: #2997ff;
  --aw-blue-hover: #40a2ff;
  --aw-blue-soft: rgba(41, 151, 255, 0.14);
  --aw-green: #5ad37a;
  --aw-green-soft: rgba(48, 209, 88, 0.13);
  --aw-orange: #ffb340;
  --aw-orange-soft: rgba(255, 159, 10, 0.14);
  --aw-red: #ff6961;
  --aw-red-soft: rgba(255, 69, 58, 0.13);
  --aw-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 14px 34px rgba(0, 0, 0, 0.18);
  --aw-shadow-hover: 0 2px 5px rgba(0, 0, 0, 0.3), 0 20px 50px rgba(0, 0, 0, 0.28);
}

html,
body {
  min-width: 1080px;
  background: var(--aw-bg) !important;
}

body {
  color: var(--aw-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(0, 113, 227, 0.2);
}

button,
input,
select,
textarea,
summary {
  font-family: inherit;
  letter-spacing: 0 !important;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--aw-blue) 35%, transparent) !important;
  outline-offset: 2px !important;
}

/* Product shell */
.app-shell {
  grid-template-columns: var(--aw-sidebar-width) minmax(0, 1fr) !important;
  grid-template-rows: 64px minmax(0, 1fr) !important;
  width: 100% !important;
  min-height: 100dvh;
  background: var(--aw-bg) !important;
}

.topbar {
  z-index: 100 !important;
  min-height: 64px !important;
  height: 64px !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--aw-line) !important;
  border-radius: 0 !important;
  background: var(--aw-chrome) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px) !important;
  backdrop-filter: saturate(180%) blur(22px) !important;
}

.brand-block {
  min-width: 0;
  gap: 10px !important;
}

.brand-mark {
  width: 32px !important;
  height: 32px !important;
  flex-basis: 32px !important;
  border: 1px solid color-mix(in srgb, var(--aw-text) 12%, transparent);
  border-radius: 8px !important;
  overflow: hidden;
  background: #f3efe4 !important;
  color: #173f35 !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1) !important;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
}

.brand-mark .lucide {
  width: 17px !important;
  height: 17px !important;
}

.brand-copy h1,
.topbar h1 {
  color: var(--aw-text) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
}

.brand-copy h1 span {
  margin-left: 7px;
  color: var(--aw-text-secondary);
  font-size: 11px;
  font-weight: 520;
}

.brand-copy p,
.topbar p {
  margin-top: 2px !important;
  color: var(--aw-text-secondary) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.top-actions {
  gap: 7px !important;
}

.status-dot,
.save-state {
  min-height: 30px !important;
  font-size: 11px !important;
}

.status-dot {
  padding: 0 11px !important;
  border: 1px solid var(--aw-line) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--aw-surface-raised) 78%, transparent) !important;
  color: var(--aw-text-secondary) !important;
}

.status-dot.ready {
  border-color: color-mix(in srgb, var(--aw-green) 28%, transparent) !important;
  background: var(--aw-green-soft) !important;
  color: var(--aw-green) !important;
}

.status-dot.ready::before,
.save-state::before {
  background: var(--aw-green) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aw-green) 14%, transparent) !important;
}

.primary-btn,
.ghost-btn,
.danger-btn,
.icon-btn {
  min-height: 34px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 220ms ease, transform 220ms var(--aw-ease) !important;
}

.primary-btn {
  border-color: var(--aw-blue) !important;
  background: var(--aw-blue) !important;
  color: #ffffff !important;
}

.primary-btn:hover:not(:disabled) {
  border-color: var(--aw-blue-hover) !important;
  background: var(--aw-blue-hover) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--aw-blue) 24%, transparent) !important;
  transform: translateY(-1px) !important;
}

.ghost-btn,
.icon-btn,
.theme-toggle-btn {
  border-color: var(--aw-line-strong) !important;
  background: color-mix(in srgb, var(--aw-surface-raised) 88%, transparent) !important;
  color: var(--aw-text) !important;
}

.ghost-btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled),
.theme-toggle-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--aw-text) 28%, transparent) !important;
  background: var(--aw-surface-raised) !important;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-1px) !important;
}

.danger-btn {
  border-color: color-mix(in srgb, var(--aw-red) 25%, transparent) !important;
  background: var(--aw-red-soft) !important;
  color: var(--aw-red) !important;
}

.primary-btn:active:not(:disabled),
.ghost-btn:active:not(:disabled),
.icon-btn:active:not(:disabled),
.danger-btn:active:not(:disabled) {
  transform: scale(0.97) !important;
  transition-duration: 80ms !important;
}

.icon-only-control,
.icon-btn {
  width: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
}

.has-control-icon {
  gap: 6px !important;
}

.has-control-icon > .lucide,
.has-control-icon > svg {
  width: 14px !important;
  height: 14px !important;
}

/* Sidebar navigation */
.rail {
  display: flex !important;
  flex-direction: column !important;
  top: 64px !important;
  width: var(--aw-sidebar-width) !important;
  height: calc(100dvh - 64px) !important;
  padding: 16px 12px !important;
  gap: 4px !important;
  border: 0 !important;
  border-right: 1px solid var(--aw-line) !important;
  border-radius: 0 !important;
  background: var(--aw-sidebar) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px) !important;
  backdrop-filter: saturate(160%) blur(18px) !important;
}

.rail-item {
  display: flex !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 11px !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--aw-text-secondary) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color 160ms ease, background-color 180ms ease, transform 220ms var(--aw-ease) !important;
}

.rail-item::after {
  display: none !important;
}

.rail-item span {
  display: grid !important;
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  place-items: center !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: inherit !important;
  transition: color 180ms ease, background-color 180ms ease, transform 220ms var(--aw-ease) !important;
}

.rail-item span .lucide,
.rail-item span svg {
  width: 17px !important;
  height: 17px !important;
}

.rail-item strong {
  max-width: none !important;
  overflow: hidden;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 540 !important;
  line-height: 1 !important;
  text-align: left !important;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

.rail-item:hover:not(:disabled) {
  background: color-mix(in srgb, var(--aw-text) 5%, transparent) !important;
  color: var(--aw-text) !important;
}

.rail-item:hover:not(:disabled) span {
  transform: scale(1.04);
}

.rail-item.active {
  background: var(--aw-blue-soft) !important;
  color: var(--aw-blue) !important;
}

.rail-item.active span {
  background: var(--aw-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--aw-blue) 22%, transparent) !important;
}

.rail-item.active strong {
  font-weight: 650 !important;
}

.rail-item-secondary {
  margin-top: 0 !important;
  border-top: 0 !important;
}

.rail-section-label {
  padding: 7px 11px 5px;
  color: var(--aw-text-tertiary);
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
}

.rail-section-after {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--aw-line);
}

.rail-item strong em,
.beta-label {
  margin-left: 5px;
  color: #8a661b;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

.license-points {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, #c79a45 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #c79a45 10%, var(--aw-surface-raised));
  color: color-mix(in srgb, #8a661b 78%, var(--aw-text));
  font-size: 11px;
  font-weight: 650;
}

.desktop-only.hidden {
  display: none !important;
}

/* Desktop onboarding and settings */
.desktop-onboarding,
.desktop-modal {
  position: fixed;
  z-index: 5000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 32px;
  background: color-mix(in srgb, var(--aw-bg) 86%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}

.desktop-onboarding.hidden,
.desktop-modal.hidden {
  display: none !important;
}

.onboarding-window,
.settings-window {
  width: min(820px, calc(100vw - 64px));
  max-height: calc(100vh - 64px);
  overflow: auto;
  border: 1px solid var(--aw-line-strong);
  border-radius: 8px;
  background: var(--aw-surface-raised);
  color: var(--aw-text);
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.2);
  animation: desktop-modal-enter 440ms var(--aw-ease) both;
}

.onboarding-window {
  width: min(680px, calc(100vw - 64px));
  min-height: 570px;
  padding: 34px 40px 38px;
}

.onboarding-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.onboarding-brand img {
  width: 52px;
  height: 52px;
}

.onboarding-brand h1,
.onboarding-brand p,
.onboarding-step h2,
.onboarding-step p,
.settings-header h2,
.settings-header p,
.settings-pane h3,
.about-brand p {
  margin: 0;
}

.onboarding-brand h1 {
  font-size: 21px;
  line-height: 1.2;
}

.onboarding-brand p {
  margin-top: 4px;
  color: var(--aw-text-secondary);
  font-size: 12px;
}

.onboarding-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 28px 0 38px;
  padding: 0;
  overflow: hidden;
  border-radius: 6px;
  background: var(--aw-line);
  list-style: none;
}

.onboarding-progress li {
  padding: 10px;
  background: var(--aw-surface-soft);
  color: var(--aw-text-tertiary);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.onboarding-progress li.active {
  background: var(--aw-blue-soft);
  color: var(--aw-blue);
}

.onboarding-progress li.complete {
  background: color-mix(in srgb, #173f35 10%, var(--aw-surface-soft));
  color: #397563;
}

.onboarding-step {
  animation: desktop-pane-enter 340ms var(--aw-ease) both;
}

.onboarding-kicker {
  display: block;
  margin-bottom: 8px;
  color: #8a661b;
  font-size: 11px;
  font-weight: 700;
}

.onboarding-step h2 {
  margin-bottom: 24px;
  font-size: 28px;
  line-height: 1.15;
}

.activation-field,
.settings-path-field,
.settings-select-field {
  display: grid;
  gap: 8px;
}

.activation-field span,
.settings-path-field span,
.settings-select-field span {
  color: var(--aw-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.activation-field input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--aw-line-strong);
  border-radius: 7px;
  background: var(--aw-surface-soft);
  color: var(--aw-text);
  font-family: Consolas, "SFMono-Regular", monospace;
  font-size: 17px;
  text-transform: uppercase;
}

.activation-device-card {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--aw-line-strong);
  border-radius: 7px;
  background: var(--aw-surface-soft);
}

.activation-device-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.activation-device-heading > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.activation-device-heading strong {
  font-size: 13px;
}

.activation-device-heading span {
  color: var(--aw-text-secondary);
  font-size: 11px;
  line-height: 1.55;
}

.activation-device-heading .ghost-btn {
  flex: 0 0 auto;
}

.activation-device-code {
  display: block;
  min-height: 42px;
  padding: 10px 12px;
  overflow-wrap: anywhere;
  border: 1px solid var(--aw-line);
  border-radius: 6px;
  background: var(--aw-surface-raised);
  color: var(--aw-text);
  font-family: Consolas, "SFMono-Regular", monospace;
  font-size: 12px;
  line-height: 1.7;
  user-select: all;
}

.activation-help {
  display: grid;
  gap: 5px;
  margin-top: 14px;
  padding-left: 12px;
  border-left: 3px solid var(--aw-blue);
}

.activation-help p {
  color: var(--aw-text-secondary);
  font-size: 11px;
  line-height: 1.55;
}

.activation-help code {
  color: var(--aw-text);
  font-family: Consolas, "SFMono-Regular", monospace;
}

.onboarding-status,
.settings-note {
  margin: 14px 0 22px !important;
  color: var(--aw-text-secondary);
  font-size: 12px;
  line-height: 1.6;
}

.onboarding-status.error {
  color: var(--aw-red);
}

.onboarding-status.success {
  color: var(--aw-green);
}

.privacy-summary {
  margin-bottom: 20px;
  padding: 0 0 4px 16px;
  border-left: 3px solid #c79a45;
}

.privacy-summary p {
  margin-bottom: 10px;
  color: var(--aw-text-secondary);
  font-size: 13px;
  line-height: 1.65;
}

.privacy-confirm,
.settings-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  font-size: 13px;
}

.privacy-confirm input,
.settings-toggle input {
  width: 17px;
  height: 17px;
  accent-color: var(--aw-blue);
}

.onboarding-actions,
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
}

.byok-lock-panel {
  padding: 14px 16px;
  border: 1px solid var(--aw-line);
  border-radius: 7px;
  background: var(--aw-surface-soft);
  margin: 16px 0;
}

.byok-kind-switch {
  grid-template-columns: repeat(2, minmax(0, 150px));
  width: min(100%, 310px);
  margin: 14px 0;
}

.byok-kind-switch button {
  min-height: 30px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--aw-text-secondary);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.byok-kind-switch button[aria-selected="true"] {
  background: var(--aw-blue-soft);
  color: var(--aw-blue);
}

.byok-lock-panel .settings-path-field {
  display: block;
  max-width: 340px;
}

.byok-lock-panel .settings-actions {
  margin-top: 10px;
}

#byokConfigFields[hidden],
#byokConfigActions[hidden],
#unlockByokConfigBtn[hidden],
#lockByokConfigBtn[hidden],
#setByokPasswordBtn[hidden] {
  display: none !important;
}

.onboarding-actions .primary-btn:last-child {
  margin-left: auto;
}

.migration-summary {
  min-height: 86px;
  padding: 14px 16px;
  border: 1px solid var(--aw-line);
  border-radius: 7px;
  background: var(--aw-surface-soft);
  color: var(--aw-text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.migration-summary strong {
  display: block;
  margin-bottom: 4px;
  color: var(--aw-text);
}

.settings-window {
  width: min(940px, calc(100vw - 64px));
  height: min(680px, calc(100vh - 64px));
  overflow: hidden;
}

.settings-header {
  height: 76px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid var(--aw-line);
}

.settings-header > div {
  margin-right: auto;
}

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

.settings-header p {
  margin-top: 3px;
  color: var(--aw-text-secondary);
  font-size: 11px;
}

.settings-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  height: calc(100% - 76px);
}

.settings-nav {
  padding: 16px 10px;
  border-right: 1px solid var(--aw-line);
  background: var(--aw-surface-soft);
}

.settings-nav button {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--aw-text-secondary);
  font-size: 12px;
  text-align: left;
}

.settings-nav button:hover {
  background: color-mix(in srgb, var(--aw-text) 5%, transparent);
  color: var(--aw-text);
}

.settings-nav button.active {
  background: var(--aw-blue-soft);
  color: var(--aw-blue);
  font-weight: 650;
}

.settings-content {
  overflow: auto;
  padding: 30px 34px 40px;
}

.settings-pane {
  display: none;
}

.settings-pane.active {
  display: block;
  animation: desktop-pane-enter 260ms var(--aw-ease) both;
}

.settings-pane h3 {
  margin-bottom: 24px;
  font-size: 19px;
}

.settings-control-group {
  margin-bottom: 22px;
}

.settings-control-label {
  display: block;
  margin-bottom: 9px;
  color: var(--aw-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.settings-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 430px);
  min-height: 36px;
  padding: 3px;
  border: 1px solid var(--aw-line);
  border-radius: 7px;
  background: var(--aw-surface-soft);
}

.settings-segmented.performance-segmented {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(100%, 590px);
}

.settings-segmented label {
  position: relative;
  min-width: 0;
}

.settings-segmented input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.settings-segmented span {
  display: grid;
  min-width: 0;
  min-height: 30px;
  padding: 0 8px;
  place-items: center;
  border-radius: 5px;
  color: var(--aw-text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

.settings-segmented input:checked + span {
  background: var(--aw-blue-soft);
  color: var(--aw-blue) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aw-blue) 14%, transparent);
}

.settings-segmented input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--aw-blue) 35%, transparent);
  outline-offset: 1px;
}

.settings-pane[data-settings-pane="performance"] .settings-toggle {
  margin-top: 14px;
}

.settings-facts {
  margin: 0 0 22px;
}

.settings-facts > div {
  min-height: 45px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--aw-line);
}

.settings-facts dt {
  color: var(--aw-text-secondary);
  font-size: 12px;
}

.settings-facts dd {
  margin: 0;
  color: var(--aw-text);
  font-size: 13px;
}

.settings-path-field input,
.settings-select-field select {
  width: 100%;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid var(--aw-line-strong);
  border-radius: 6px;
  background: var(--aw-surface-soft);
  color: var(--aw-text);
}

.settings-select-field {
  max-width: 320px;
}

.settings-subhead {
  display: flex;
  align-items: center;
  margin: 30px 0 10px;
  font-size: 12px;
}

.settings-subhead span {
  margin-left: auto;
  color: var(--aw-text-tertiary);
}

.backup-list {
  border-top: 1px solid var(--aw-line);
}

.backup-row {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--aw-line);
  font-size: 12px;
}

.backup-row span {
  color: var(--aw-text-secondary);
}

.backup-row button {
  min-height: 28px !important;
}

.about-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.about-brand img {
  width: 54px;
  height: 54px;
}

.about-brand h3 {
  margin-bottom: 4px;
}

.about-brand p {
  color: var(--aw-text-secondary);
  font-size: 12px;
}

@keyframes desktop-modal-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes desktop-pane-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.rail-item:disabled {
  opacity: 0.32 !important;
}

/* Main work area */
.workspace {
  grid-column: 2 !important;
  grid-row: 2 !important;
  padding: 32px 40px 48px !important;
  background: var(--aw-bg) !important;
}

.flow-panel {
  width: min(100%, 1460px) !important;
  min-height: calc(100dvh - 144px) !important;
  margin: 0 auto !important;
  padding: 0 0 48px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.flow-panel:not(.hidden),
#step-edit:not(.hidden) {
  animation: aw-view-enter 420ms var(--aw-ease) both !important;
}

@keyframes aw-view-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel-head {
  align-items: flex-start !important;
  min-height: 78px;
  gap: 24px !important;
  margin: 0 0 26px !important;
  padding: 2px 0 22px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--aw-line) !important;
}

.panel-head h2 {
  margin: 0 !important;
  color: var(--aw-text) !important;
  font-size: 28px !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
}

.panel-head p {
  max-width: 760px !important;
  margin: 7px 0 0 !important;
  color: var(--aw-text-secondary) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.button-row {
  gap: 7px !important;
}

/* Inputs and disclosure controls */
label span,
.ribbon-title,
.asset-list-head span,
.style-moodboard-head span,
.export-tile span {
  color: var(--aw-text-secondary) !important;
  font-weight: 500 !important;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  min-height: 40px !important;
  padding: 9px 11px !important;
  border: 1px solid var(--aw-line-strong) !important;
  border-radius: 7px !important;
  background: var(--aw-surface-raised) !important;
  color: var(--aw-text) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 180ms ease !important;
}

input:hover,
select:hover,
textarea:hover {
  border-color: color-mix(in srgb, var(--aw-text) 28%, transparent) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--aw-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aw-blue) 14%, transparent) !important;
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--aw-blue);
}

.new-project-panel,
.project-optional,
.requirements-advanced,
.advanced-tools,
.style-library-details,
.social-more-layouts,
.social-advanced-panel {
  overflow: hidden !important;
  border: 1px solid var(--aw-line) !important;
  border-radius: 8px !important;
  background: var(--aw-surface) !important;
  box-shadow: var(--aw-shadow) !important;
}

.new-project-panel > summary,
.project-optional > summary,
.requirements-advanced > summary,
.advanced-tools > summary,
.style-library-details > summary,
.social-more-layouts > summary,
.social-advanced-panel > summary {
  min-height: 48px;
  padding: 14px 16px !important;
  color: var(--aw-text) !important;
  font-size: 13px !important;
  font-weight: 620 !important;
  cursor: pointer;
  transition: background-color 160ms ease !important;
}

.new-project-panel > summary:hover,
.project-optional > summary:hover,
.requirements-advanced > summary:hover,
.advanced-tools > summary:hover,
.style-library-details > summary:hover,
.social-more-layouts > summary:hover,
.social-advanced-panel > summary:hover {
  background: color-mix(in srgb, var(--aw-text) 4%, transparent) !important;
}

.new-project-form {
  padding: 4px 18px 20px !important;
}

.project-optional {
  box-shadow: none !important;
}

.new-project-panel .project-optional {
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.project-optional[open] > :not(summary),
.requirements-advanced[open] > :not(summary),
.advanced-tools[open] > :not(summary),
.style-library-details[open] > :not(summary),
.social-more-layouts[open] > :not(summary),
.social-advanced-panel[open] > :not(summary) {
  animation: aw-disclosure-enter 260ms var(--aw-ease) both !important;
}

@keyframes aw-disclosure-enter {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Repeated cards and selectable surfaces */
.project-card,
.mode-card,
.mode-workspace,
.upload-choice,
.style-moodboard,
.style-option,
.slide-preview,
.asset-item,
.outline-row,
.tool-launch-item,
.export-tile,
.social-step-card,
.social-preview-panel,
.social-source-card,
.social-output-card,
.image-to-ppt-panel {
  border: 1px solid var(--aw-line) !important;
  border-radius: 8px !important;
  background: var(--aw-surface) !important;
  color: var(--aw-text) !important;
  box-shadow: var(--aw-shadow) !important;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 260ms ease, transform 300ms var(--aw-ease) !important;
}

.project-card:hover,
.mode-card:hover,
.mode-workspace:hover,
.upload-choice:hover,
.style-moodboard:hover,
.slide-preview:hover,
.asset-item:hover,
.tool-launch-item:hover,
.export-tile:hover:not(:disabled),
.social-source-card:hover,
.social-output-card:hover {
  border-color: color-mix(in srgb, var(--aw-text) 18%, transparent) !important;
  box-shadow: var(--aw-shadow-hover) !important;
  transform: translateY(-2px) !important;
}

.mode-card.selected,
.mode-workspace.active,
.upload-choice.active,
.style-moodboard.selected,
.export-tile.ready,
.project-card.current {
  border-color: color-mix(in srgb, var(--aw-blue) 48%, transparent) !important;
  background: color-mix(in srgb, var(--aw-blue) 5%, var(--aw-surface)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aw-blue) 8%, transparent), var(--aw-shadow) !important;
}

.project-card,
.style-moodboard,
.slide-preview,
.asset-item,
.social-output-card {
  animation: aw-card-enter 420ms var(--aw-ease) both;
}

.project-card:nth-child(2),
.style-moodboard:nth-child(2),
.slide-preview:nth-child(2),
.asset-item:nth-child(2),
.social-output-card:nth-child(2) { animation-delay: 45ms; }
.project-card:nth-child(3),
.style-moodboard:nth-child(3),
.slide-preview:nth-child(3),
.asset-item:nth-child(3),
.social-output-card:nth-child(3) { animation-delay: 80ms; }
.project-card:nth-child(4),
.style-moodboard:nth-child(4),
.slide-preview:nth-child(4),
.asset-item:nth-child(4),
.social-output-card:nth-child(4) { animation-delay: 110ms; }
.project-card:nth-child(n + 5),
.style-moodboard:nth-child(n + 5),
.slide-preview:nth-child(n + 5),
.asset-item:nth-child(n + 5),
.social-output-card:nth-child(n + 5) { animation-delay: 135ms; }

@keyframes aw-card-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Project hub */
.project-hub-view {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 22px !important;
}

.project-card {
  min-height: 148px;
  gap: 14px 18px !important;
  padding: 18px !important;
}

.project-card.current {
  box-shadow: inset 3px 0 var(--aw-blue), var(--aw-shadow) !important;
}

.project-card-main {
  grid-template-columns: 116px minmax(0, 1fr) !important;
  gap: 15px !important;
}

.project-card-cover {
  width: 116px !important;
  border: 1px solid var(--aw-line) !important;
  border-radius: 6px !important;
  background-color: var(--aw-surface-strong) !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.08);
}

.project-card-copy {
  gap: 4px !important;
}

.project-card-copy strong {
  color: var(--aw-text) !important;
  font-size: 16px !important;
  font-weight: 650 !important;
}

.project-card-copy em,
.project-card-copy small {
  color: var(--aw-text-secondary) !important;
  font-size: 12px !important;
}

.project-progress {
  gap: 5px !important;
}

.project-progress span,
.export-readiness li {
  padding: 4px 7px !important;
  border-radius: 5px !important;
  background: color-mix(in srgb, var(--aw-text) 7%, transparent) !important;
  color: var(--aw-text-tertiary) !important;
  font-size: 10px !important;
}

.project-progress span.done,
.export-readiness li.done {
  background: var(--aw-green-soft) !important;
  color: var(--aw-green) !important;
}

.project-card-actions {
  gap: 6px !important;
}

.project-card-actions .primary-btn,
.project-card-actions .ghost-btn {
  min-height: 30px !important;
  padding: 0 11px !important;
  font-size: 11px !important;
}

/* Creation and setup */
.creation-mode-grid,
.mode-workspace-grid,
.upload-choice-grid,
.style-option-list,
.style-moodboard-grid,
.preview-grid,
.export-grid {
  gap: 14px !important;
}

.mode-card,
.mode-workspace,
.upload-choice {
  min-height: 114px !important;
  padding: 18px !important;
}

.mode-card-symbol,
.tool-launch-icon,
.export-format-icon {
  border-radius: 8px !important;
  background: var(--aw-blue-soft) !important;
  color: var(--aw-blue) !important;
}

.mode-card.selected .mode-card-symbol {
  background: var(--aw-blue) !important;
  color: #ffffff !important;
}

.mode-card strong,
.mode-workspace strong,
.upload-choice strong,
.style-moodboard-head strong,
.export-tile strong,
.tool-launch-item h3 {
  color: var(--aw-text) !important;
}

.mode-card em,
.mode-workspace p,
.upload-choice span,
.style-moodboard p,
.tool-launch-item p {
  color: var(--aw-text-secondary) !important;
}

.mode-flow-guide,
.outline-copy-settings,
.style-controls,
.style-lock-summary,
.asset-match-panel,
.export-readiness,
.social-ai-recommend-panel,
.social-recommend-box {
  border: 1px solid var(--aw-line) !important;
  border-radius: 8px !important;
  background: var(--aw-surface-soft) !important;
  color: var(--aw-text-secondary) !important;
  box-shadow: none !important;
}

.setup-layout-redesigned {
  gap: 18px !important;
}

.setup-block {
  border: 1px solid var(--aw-line) !important;
  border-radius: 8px !important;
  background: var(--aw-surface) !important;
  box-shadow: var(--aw-shadow) !important;
}

.requirements-panel::before {
  display: none !important;
}

.setup-block .requirements-section {
  border: 0 !important;
  border-top: 1px solid var(--aw-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.setup-block .requirements-section:first-child {
  border-top: 0 !important;
}

.dropzone {
  border: 1px dashed color-mix(in srgb, var(--aw-blue) 38%, var(--aw-line)) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--aw-blue) 4%, var(--aw-surface)) !important;
  box-shadow: none !important;
  transition: border-color 180ms ease, background-color 180ms ease, transform 240ms var(--aw-ease) !important;
}

.dropzone:hover,
.dropzone.dragover {
  border-color: var(--aw-blue) !important;
  background: color-mix(in srgb, var(--aw-blue) 7%, var(--aw-surface)) !important;
  transform: translateY(-1px);
}

.dropzone-icon {
  border-radius: 8px !important;
  background: var(--aw-blue) !important;
  color: #ffffff !important;
}

/* Outline, visual generation, and delivery */
.outline-list,
.asset-grid,
.preview-grid,
.style-moodboard-grid {
  align-content: start;
}

.outline-row {
  padding: 0 0 28px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--aw-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.outline-row:hover {
  border-bottom-color: color-mix(in srgb, var(--aw-blue) 32%, var(--aw-line)) !important;
}

.outline-group {
  overflow: hidden;
  border: 1px solid var(--aw-line) !important;
  border-radius: 8px !important;
  background: var(--aw-surface-soft) !important;
  box-shadow: none !important;
}

.outline-group summary {
  color: var(--aw-text) !important;
}

.outline-group summary span,
.outline-field > span em {
  color: var(--aw-text-secondary) !important;
}

.outline-group[open] summary {
  border-bottom-color: var(--aw-line) !important;
  background: var(--aw-surface) !important;
}

.outline-page-summary span {
  border-color: var(--aw-line) !important;
  border-radius: 5px !important;
  background: var(--aw-surface) !important;
  color: var(--aw-text-secondary) !important;
  font-weight: 600 !important;
}

.style-moodboard,
.slide-preview,
.asset-item {
  overflow: hidden;
}

.style-moodboard img,
.slide-preview img,
.asset-item img,
.social-output-card img {
  transition: transform 520ms var(--aw-ease), filter 260ms ease !important;
}

.style-moodboard:hover img,
.slide-preview:hover img,
.asset-item:hover img,
.social-output-card:hover img {
  transform: scale(1.012) !important;
}

.export-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.export-tile {
  min-height: 172px !important;
  padding: 24px !important;
}

.export-tile strong {
  font-size: 22px !important;
  font-weight: 650 !important;
}

.export-readiness {
  padding: 16px 18px !important;
}

.export-readiness li:not(.done) {
  background: var(--aw-orange-soft) !important;
  color: var(--aw-orange) !important;
}

.tool-launch-grid {
  gap: 14px !important;
  max-width: none !important;
}

.tool-launch-item {
  padding: 20px !important;
}

/* Editor chrome */
#step-edit .editor-top-ribbon,
#step-edit .thumb-panel,
#step-edit .canvas-area,
#step-edit .inspector {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--aw-surface) !important;
  color: var(--aw-text) !important;
  box-shadow: none !important;
}

#step-edit .canvas-toolbar {
  height: 50px !important;
  max-height: 50px !important;
  background: color-mix(in srgb, var(--aw-surface) 92%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}

#step-edit .ribbon-group {
  min-height: 36px !important;
  border-right-color: var(--aw-line) !important;
}

#step-edit .ribbon-title {
  color: var(--aw-text-tertiary) !important;
  font-weight: 560 !important;
}

#step-edit .ribbon-tool,
#step-edit .ribbon-select,
#step-edit .ribbon-number,
#step-edit .ribbon-color,
#step-edit .inspector-toolbox .ghost-btn,
#step-edit .inspector-toolbox .danger-btn,
#step-edit .inspector-toolbox .ribbon-tool {
  min-height: 30px !important;
  border-color: var(--aw-line-strong) !important;
  border-radius: 6px !important;
  background: var(--aw-surface-raised) !important;
  color: var(--aw-text) !important;
  box-shadow: none !important;
}

#step-edit .ribbon-tool:hover:not(:disabled),
#step-edit .ribbon-select:hover:not(:disabled),
#step-edit .ribbon-number:hover:not(:disabled),
#step-edit .inspector-toolbox .ghost-btn:hover:not(:disabled),
#step-edit .inspector-toolbox .ribbon-tool:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--aw-text) 28%, transparent) !important;
  background: color-mix(in srgb, var(--aw-text) 5%, var(--aw-surface)) !important;
}

#step-edit .ribbon-tool.active,
#step-edit .inspector-toolbox .ribbon-tool.active {
  border-color: color-mix(in srgb, var(--aw-blue) 34%, transparent) !important;
  background: var(--aw-blue-soft) !important;
  color: var(--aw-blue) !important;
}

#step-edit .thumb-panel .panel-head,
#step-edit .inspector .panel-head {
  min-height: 38px !important;
  margin: 0 0 10px !important;
  padding: 0 0 10px !important;
}

#step-edit .thumb-panel .panel-head h2,
#step-edit .inspector .panel-head h2 {
  color: var(--aw-text) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

#step-edit .thumb {
  border-color: var(--aw-line) !important;
  border-radius: 7px !important;
  background: var(--aw-surface-raised) !important;
}

#step-edit .thumb:hover {
  border-color: color-mix(in srgb, var(--aw-text) 24%, transparent) !important;
  transform: translateY(-1px);
}

#step-edit .thumb.active {
  border-color: var(--aw-blue) !important;
  background: var(--aw-blue-soft) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aw-blue) 12%, transparent) !important;
}

#step-edit .office-canvas-shell {
  background: #d8d8dc !important;
}

#step-edit .slide-stage {
  background-color: #e5e5e8 !important;
  background-image: linear-gradient(rgba(90, 90, 95, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(90, 90, 95, 0.08) 1px, transparent 1px) !important;
}

#step-edit .slide-canvas {
  border-color: rgba(0, 0, 0, 0.18) !important;
  border-radius: 2px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2) !important;
  transition: box-shadow 260ms ease, transform 320ms var(--aw-ease) !important;
}

#step-edit .office-ruler,
#step-edit .office-status-bar,
#step-edit .speaker-notes-panel {
  border-color: var(--aw-line) !important;
  background: var(--aw-surface-soft) !important;
  color: var(--aw-text-secondary) !important;
}

#step-edit .inspector-tool-section h3 {
  color: var(--aw-text-tertiary) !important;
}

#step-edit .editor-layer-list,
#step-edit .inspector-body {
  border-color: var(--aw-line) !important;
  border-radius: 7px !important;
  background: var(--aw-surface-soft) !important;
  color: var(--aw-text) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] #step-edit .office-canvas-shell {
  background: #09090a !important;
}

:root[data-theme="dark"] #step-edit .slide-stage {
  background-color: #202022 !important;
  background-image: linear-gradient(rgba(180, 180, 185, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 180, 185, 0.09) 1px, transparent 1px) !important;
}

:root[data-theme="dark"] #step-edit .slide-canvas {
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.56) !important;
}

/* Social publishing uses the same quiet workbench language. */
.social-apple-panel {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.social-store-hero {
  padding: 4px 0 24px !important;
  border-bottom: 1px solid var(--aw-line) !important;
  background: transparent !important;
}

.social-eyebrow {
  color: var(--aw-blue) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

.social-store-hero h2 {
  color: var(--aw-text) !important;
  font-size: 28px !important;
  font-weight: 650 !important;
}

.social-store-hero p,
.social-step-head p,
.social-inline-advice,
.social-preview-advice {
  color: var(--aw-text-secondary) !important;
}

.social-model-pills div,
.social-model-status div {
  border-color: color-mix(in srgb, var(--aw-green) 26%, transparent) !important;
  background: var(--aw-green-soft) !important;
  color: var(--aw-green) !important;
}

.social-quick-strip {
  border-color: var(--aw-line) !important;
  background: var(--aw-surface-soft) !important;
}

.social-quick-strip strong,
.social-step-head > span {
  color: var(--aw-blue) !important;
}

.social-step-head > span {
  background: var(--aw-blue) !important;
  color: #ffffff !important;
}

/* Floating status UI */
.generation-progress,
#toast,
.floating-editor-tools,
.control-tooltip {
  border: 1px solid var(--aw-line) !important;
  background: color-mix(in srgb, var(--aw-surface-raised) 90%, transparent) !important;
  color: var(--aw-text) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px) !important;
  backdrop-filter: saturate(180%) blur(22px) !important;
}

.generation-progress,
.floating-editor-tools {
  border-radius: 8px !important;
}

#toast {
  border-radius: 999px !important;
}

.generation-progress-bar {
  background: var(--aw-surface-strong) !important;
}

.generation-progress-bar span {
  background: var(--aw-blue) !important;
}

.generation-progress.image-generation-progress .generation-progress-head strong::before {
  background: var(--aw-blue) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--aw-blue) 12%, transparent) !important;
  animation: aw-status-pulse 1.5s ease-in-out infinite !important;
}

@keyframes aw-status-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.86); }
  50% { opacity: 1; transform: scale(1); }
}

/* Adaptive desktop performance tiers */
.performance-probe {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 420px;
  height: 240px;
  overflow: hidden;
  contain: strict;
  opacity: 0.01;
  pointer-events: none;
}

.performance-probe i {
  position: absolute;
  top: calc(var(--probe-index) * 11px);
  left: calc(var(--probe-index) * 18px);
  width: 150px;
  height: 84px;
  border: 1px solid rgba(23, 63, 53, 0.2);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.generation-progress.image-generation-progress .generation-progress-head strong::before {
  animation: none !important;
}

html[data-performance-tier="smooth"] *,
html[data-performance-tier="smooth"] *::before,
html[data-performance-tier="smooth"] *::after {
  animation: none !important;
  transition-duration: 120ms !important;
}

html[data-performance-tier="smooth"] .topbar,
html[data-performance-tier="smooth"] .rail,
html[data-performance-tier="smooth"] .desktop-modal,
html[data-performance-tier="smooth"] #step-edit .canvas-toolbar,
html[data-performance-tier="smooth"] .generation-progress,
html[data-performance-tier="smooth"] #toast,
html[data-performance-tier="smooth"] .floating-editor-tools,
html[data-performance-tier="smooth"] .control-tooltip,
html[data-performance-tier="off"] .topbar,
html[data-performance-tier="off"] .rail,
html[data-performance-tier="off"] .desktop-modal,
html[data-performance-tier="off"] #step-edit .canvas-toolbar,
html[data-performance-tier="off"] .generation-progress,
html[data-performance-tier="off"] #toast,
html[data-performance-tier="off"] .floating-editor-tools,
html[data-performance-tier="off"] .control-tooltip {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html:root[data-performance-tier="smooth"] .topbar,
html:root[data-performance-tier="off"] .topbar {
  background: var(--aw-surface) !important;
  box-shadow: none !important;
}

html:root[data-performance-tier="smooth"] .rail,
html:root[data-performance-tier="off"] .rail {
  background: var(--aw-surface-soft) !important;
  box-shadow: none !important;
}

html[data-performance-tier="smooth"] .project-card,
html[data-performance-tier="smooth"] .mode-workspace,
html[data-performance-tier="smooth"] .asset-item,
html[data-performance-tier="smooth"] .style-moodboard,
html[data-performance-tier="smooth"] .social-output-card,
html[data-performance-tier="smooth"] .generation-progress,
html[data-performance-tier="smooth"] .settings-window {
  box-shadow: none !important;
  transform: none !important;
}

html[data-performance-tier="standard"] *,
html[data-performance-tier="standard"] *::before,
html[data-performance-tier="standard"] *::after {
  animation-duration: 220ms !important;
  transition-duration: 200ms !important;
}

html[data-performance-tier="standard"] .topbar,
html[data-performance-tier="standard"] .rail,
html[data-performance-tier="standard"] .desktop-modal,
html[data-performance-tier="standard"] #step-edit .canvas-toolbar {
  -webkit-backdrop-filter: saturate(120%) blur(8px) !important;
  backdrop-filter: saturate(120%) blur(8px) !important;
}

html:root[data-performance-tier="standard"] .topbar,
html:root[data-performance-tier="standard"] .rail {
  box-shadow: none !important;
}

html[data-performance-tier="refined"] *,
html[data-performance-tier="refined"] *::before,
html[data-performance-tier="refined"] *::after {
  animation-duration: 300ms !important;
  transition-duration: 280ms !important;
}

html[data-performance-tier="refined"] .topbar,
html[data-performance-tier="refined"] .rail,
html[data-performance-tier="refined"] .desktop-modal,
html[data-performance-tier="refined"] #step-edit .canvas-toolbar {
  -webkit-backdrop-filter: saturate(135%) blur(12px) !important;
  backdrop-filter: saturate(135%) blur(12px) !important;
}

html:root[data-performance-tier="refined"] .topbar,
html:root[data-performance-tier="refined"] .rail {
  box-shadow: none !important;
}

html[data-performance-tier="refined"] .project-card:hover,
html[data-performance-tier="refined"] .mode-workspace:hover,
html[data-performance-tier="refined"] .style-moodboard:hover,
html[data-performance-tier="refined"] .social-output-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--aw-shadow-hover) !important;
}

@media (max-width: 980px) {
  html,
  body {
    min-width: 320px;
  }
}

/* Editor-centered AI workbench */
.editor-left-tabs,
.inspector-view-tabs,
.editor-notes-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  border-bottom: 1px solid var(--aw-line);
}

.editor-left-tabs,
.inspector-view-tabs {
  padding: 0 4px 8px;
}

.editor-left-tabs button,
.inspector-view-tabs button,
.editor-notes-tabs button {
  display: inline-flex;
  min-width: 0;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--aw-text-secondary);
  font-size: 10px;
  cursor: pointer;
}

.editor-left-tabs button { flex: 1 1 0; padding-inline: 4px; }
.inspector-view-tabs button { flex: 1 1 0; }
.editor-left-tabs button svg,
.inspector-view-tabs button svg,
.editor-notes-tabs button svg { width: 14px; height: 14px; flex: 0 0 auto; }
.editor-left-tabs button.active,
.inspector-view-tabs button.active,
.editor-notes-tabs button.active {
  background: var(--aw-surface-strong);
  color: var(--aw-blue);
}

.editor-left-view {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  padding-top: 8px;
}

.editor-left-actions { display: flex; padding: 2px 2px 8px; }
.editor-left-actions .ghost-btn { width: 100%; min-height: 32px; }
.editor-asset-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.editor-asset-item {
  display: grid;
  min-width: 0;
  min-height: 82px;
  grid-template-rows: 56px auto;
  gap: 5px;
  padding: 5px;
  overflow: hidden;
  border: 1px solid var(--aw-line);
  border-radius: 6px;
  background: var(--aw-surface-raised);
  color: var(--aw-text-secondary);
  cursor: pointer;
}
.editor-asset-item:disabled { cursor: default; opacity: 0.68; }
.editor-asset-item img { width: 100%; height: 56px; object-fit: cover; border-radius: 3px; background: var(--aw-surface-soft); }
.editor-asset-item > svg { width: 22px; height: 22px; place-self: center; }
.editor-asset-item span { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.editor-outline-list { display: grid; gap: 4px; }
.editor-outline-list button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 7px;
  border: 1px solid var(--aw-line);
  border-radius: 5px;
  background: var(--aw-surface-raised);
  color: var(--aw-text);
  text-align: left;
}
.editor-outline-list b { color: var(--aw-text-tertiary); font-size: 9px; font-variant-numeric: tabular-nums; }
.editor-outline-list span { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.editor-left-empty { display: grid; gap: 4px; padding: 24px 8px; color: var(--aw-text-tertiary); font-size: 10px; line-height: 1.55; text-align: center; }

.ribbon-ai-actions { margin-left: auto; }
.ribbon-ai-actions .compact-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; white-space: nowrap; }
.ribbon-ai-actions svg { width: 14px; height: 14px; }

.editor-notes-dock { border-top: 1px solid var(--aw-line); background: var(--aw-surface); }
.editor-notes-tabs { min-height: 34px; padding: 3px 9px; }
.editor-notes-tabs button { flex: 0 0 auto; }
.notes-isolation-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: var(--aw-green);
  font-size: 9px;
  white-space: nowrap;
}
.notes-isolation-badge svg { width: 13px; height: 13px; }
.notes-tab-panel textarea { width: 100%; min-height: 58px; resize: vertical; }
.speaker-notes-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.notes-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; }
.notes-meta { color: var(--aw-text-tertiary); font-size: 9px; line-height: 1.4; }

.layout-ai-panel { min-height: 0; overflow: auto; padding: 10px; }
.layout-ai-intro { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.layout-ai-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 6px; background: #173f35; color: #f3d58a; }
.layout-ai-mark svg { width: 15px; height: 15px; }
.layout-ai-intro strong { display: block; font-size: 12px; }
.layout-ai-intro p { margin: 2px 0 0; color: var(--aw-text-tertiary); font-size: 9px; }
.layout-inheritance-summary { display: grid; gap: 1px; margin-bottom: 10px; overflow: hidden; border: 1px solid var(--aw-line); border-radius: 7px; background: var(--aw-line); }
.layout-inheritance-summary > div { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 34px; padding: 6px 8px; background: var(--aw-surface-raised); }
.layout-inheritance-summary > div > span { color: var(--aw-text-tertiary); font-size: 9px; }
.layout-inheritance-summary strong { display: flex; min-width: 0; align-items: center; gap: 6px; overflow: hidden; color: var(--aw-text-secondary); font-size: 9px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.layout-inheritance-summary strong.ready { color: var(--aw-green); }
.layout-inheritance-summary strong.pending { color: var(--aw-text-tertiary); }
.layout-inheritance-swatches { display: inline-flex; flex: 0 0 auto; gap: 2px; }
.layout-inheritance-swatches i { width: 10px; height: 10px; border: 1px solid color-mix(in srgb, var(--aw-line) 68%, transparent); border-radius: 50%; background: var(--swatch); }
.layout-control-group { display: grid; gap: 5px; }
.layout-control-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.layout-control-head strong { color: var(--aw-text-secondary); font-size: 10px; }
.layout-control-head span { color: var(--aw-text-tertiary); font-size: 8px; }
.ai-copy-policy,
.layout-scope-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin-bottom: 8px; padding: 2px; border: 1px solid var(--aw-line); border-radius: 6px; background: var(--aw-surface-soft); }
.ai-copy-policy label,
.layout-scope-control label { min-width: 0; }
.ai-copy-policy input,
.layout-scope-control input { position: absolute; opacity: 0; pointer-events: none; }
.ai-copy-policy span,
.layout-scope-control span { display: grid; min-height: 28px; place-items: center; border-radius: 4px; color: var(--aw-text-secondary); font-size: 10px; cursor: pointer; }
.ai-copy-policy input:checked + span,
.layout-scope-control input:checked + span { background: var(--aw-surface-raised); color: var(--aw-blue); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.layout-analyze-btn,
.layout-refresh-btn { width: 100%; margin-bottom: 6px; }
.layout-ai-status,
.batch-design-status { padding: 8px; border: 1px solid var(--aw-line); border-radius: 6px; background: var(--aw-surface-soft); color: var(--aw-text-secondary); font-size: 10px; line-height: 1.5; }
.layout-ai-status.error { border-color: color-mix(in srgb, var(--aw-red) 35%, var(--aw-line)); color: var(--aw-red); }
.layout-diagnosis-list,
.layout-proposal-list { display: grid; gap: 7px; margin-top: 8px; }
.layout-diagnosis-item { padding: 7px 8px; border-left: 2px solid var(--aw-blue); background: var(--aw-surface-soft); color: var(--aw-text-secondary); font-size: 9px; line-height: 1.45; }
.layout-diagnosis-item.error { border-left-color: var(--aw-red); }
.layout-proposal-card { min-width: 0; padding: 7px; border: 1px solid var(--aw-line); border-radius: 7px; background: var(--aw-surface-raised); color: var(--aw-text); text-align: left; cursor: pointer; }
.layout-proposal-card.active { border-color: var(--aw-blue); box-shadow: 0 0 0 2px var(--aw-blue-soft); }
.layout-proposal-card .mini-slide { width: 100%; pointer-events: none; }
.layout-proposal-head { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 10px; }
.layout-proposal-head > span { color: var(--aw-text-tertiary); font-size: 9px; }
.layout-proposal-card p { margin: 4px 0; color: var(--aw-text-secondary); font-size: 9px; line-height: 1.4; }
.layout-proposal-summary { display: flex; flex-wrap: wrap; gap: 3px; }
.layout-proposal-summary span { padding: 2px 4px; border-radius: 3px; background: var(--aw-surface-strong); color: var(--aw-text-tertiary); font-size: 8px; }
.layout-preview-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.layout-rewrite-preview,
.layout-split-suggestion { display: grid; gap: 7px; margin-top: 8px; padding: 8px; border: 1px solid var(--aw-line); border-radius: 6px; background: var(--aw-surface-soft); font-size: 9px; }
.layout-rewrite-preview div { display: grid; gap: 3px; padding-top: 6px; border-top: 1px solid var(--aw-line); }
.layout-rewrite-preview del { color: var(--aw-red); }
.layout-rewrite-preview ins { color: var(--aw-green); text-decoration: none; }
.batch-design-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--aw-line); }
.batch-design-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 11px; }
.batch-design-head span { color: var(--aw-text-tertiary); font-size: 9px; }
.batch-design-panel > button { width: 100%; margin-bottom: 6px; }
.batch-design-inheritance { margin-bottom: 7px; padding: 8px; border: 1px solid var(--aw-line); border-radius: 6px; background: var(--aw-surface-soft); }
.batch-design-inheritance > div { display: flex; align-items: flex-start; gap: 7px; }
.batch-design-inheritance svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; }
.batch-design-inheritance span { display: grid; min-width: 0; gap: 2px; }
.batch-design-inheritance strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.batch-design-inheritance small { color: var(--aw-text-tertiary); font-size: 8px; line-height: 1.4; }
.batch-design-inheritance.ready { border-color: color-mix(in srgb, var(--aw-green) 32%, var(--aw-line)); }
.batch-design-inheritance.ready svg { color: var(--aw-green); }
.batch-design-inheritance.pending svg { color: var(--aw-orange, #b7791f); }
.batch-design-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }
.batch-page-preview { min-width: 0; padding: 4px; border: 1px solid var(--aw-line); border-radius: 6px; background: var(--aw-surface-raised); color: var(--aw-text); text-align: left; }
.batch-page-preview.ready { border-color: color-mix(in srgb, var(--aw-green) 28%, var(--aw-line)); }
.batch-page-preview .mini-slide { width: 100%; pointer-events: none; }
.batch-page-preview > span { display: flex; align-items: center; gap: 5px; min-width: 0; margin-top: 4px; }
.batch-page-preview b { font-size: 9px; }
.batch-page-preview em { min-width: 0; overflow: hidden; color: var(--aw-text-tertiary); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.batch-page-error { display: grid; min-height: 60px; place-items: center; color: var(--aw-red); }

.assistant-drawer.embedded {
  position: relative;
  inset: auto;
  z-index: auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 520px;
  border: 0;
  box-shadow: none;
  transform: none;
  visibility: visible;
}
.assistant-drawer.embedded .assistant-header { min-height: 56px; }
.assistant-attachment-toolbar { display: flex; align-items: center; gap: 5px; padding: 7px 16px; border-top: 1px solid var(--aw-line); }
.assistant-attachment-toolbar select { min-width: 0; flex: 1; height: 30px; border: 1px solid var(--aw-line); border-radius: 6px; background: var(--aw-surface-soft); color: var(--aw-text); font-size: 10px; }
.assistant-attachments { display: flex; gap: 5px; overflow-x: auto; padding: 0 16px; }
.assistant-attachments:empty { display: none; }
.assistant-attachment-chip { display: flex; min-width: 0; max-width: 190px; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid var(--aw-line); border-radius: 5px; background: var(--aw-surface-soft); }
.assistant-attachment-chip span { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-attachment-chip em { flex: 0 0 auto; color: var(--aw-text-tertiary); font-size: 8px; font-style: normal; }
.assistant-drop-active { outline: 2px solid var(--aw-blue); outline-offset: -2px; }
.assistant-action-sequence { display: grid; gap: 5px; margin: 9px 0 0; padding: 0; list-style: none; }
.assistant-action-sequence li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 6px; font-size: 9px; }
.assistant-action-sequence b { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 4px; background: var(--aw-surface-strong); }

.editor-drawer-backdrop { position: fixed; inset: 0; z-index: 1290; background: rgba(0,0,0,.16); }
.editor-delivery-drawer { position: fixed; z-index: 1300; top: 64px; right: 0; bottom: 0; width: min(390px, calc(100vw - 36px)); padding: 16px; overflow: auto; border-left: 1px solid var(--aw-line); background: var(--aw-surface); box-shadow: -18px 0 48px rgba(0,0,0,.14); transform: translateX(104%); transition: transform 180ms ease; }
.editor-delivery-drawer.open { transform: translateX(0); }
.editor-delivery-drawer > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--aw-line); }
.editor-delivery-drawer header div { display: grid; gap: 3px; }
.editor-delivery-drawer header span { color: var(--aw-text-tertiary); font-size: 9px; }

.professional-workbench { margin: 8px 10px; border: 1px solid var(--aw-line); border-radius: 7px; background: color-mix(in srgb, var(--aw-surface) 92%, var(--aw-fill)); }
.professional-workbench > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 0 10px; cursor: pointer; list-style: none; font-size: 11px; font-weight: 700; }
.professional-workbench > summary::-webkit-details-marker { display: none; }
.professional-workbench > summary small { color: var(--aw-text-tertiary); font-size: 9px; font-weight: 500; }
.professional-tool-groups { display: grid; gap: 8px; padding: 0 8px 8px; }
.professional-tool-groups section { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--aw-line); }
.professional-tool-groups section > strong { font-size: 10px; color: var(--aw-text-secondary); }
.professional-action-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(72px, .58fr); gap: 5px; }
.professional-action-grid input,
.professional-action-grid select,
.professional-action-grid button,
.professional-action-grid textarea { width: 100%; min-width: 0; min-height: 30px; font-size: 10px; box-sizing: border-box; }
.professional-action-grid textarea { resize: vertical; line-height: 1.45; padding: 7px 8px; }
.professional-action-grid #brandRulesInput,
.professional-action-grid #brandUsageInput { grid-column: 1 / -1; min-height: 52px; }
.professional-action-grid .wide-action { grid-column: 1 / -1; }
.professional-status { padding: 7px; border-radius: 5px; background: var(--aw-fill); color: var(--aw-text-tertiary); font-size: 9px; line-height: 1.45; }
.asset-library-filters { display: grid; grid-template-columns: 1fr 92px; gap: 5px; padding: 6px 10px; }
.asset-library-filters.system-mode { grid-template-columns: 1fr; }
.asset-library-filters input[type="search"], .asset-library-filters select { min-width: 0; height: 30px; font-size: 10px; }
.asset-library-filters label { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; color: var(--aw-text-tertiary); font-size: 9px; }
.system-asset-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 2px 2px 0;
}
.system-asset-tabs button {
  min-width: 0;
  min-height: 30px;
  padding: 4px 3px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--aw-text-tertiary);
  font-size: 9px;
  font-weight: 650;
  white-space: normal;
}
.system-asset-tabs button:hover { background: var(--aw-fill); color: var(--aw-text-secondary); }
.system-asset-tabs button.active { border-color: var(--aw-line); background: var(--aw-surface-strong); color: var(--aw-blue); }
.system-asset-library-status {
  margin: 0 10px 7px;
  color: var(--aw-text-tertiary);
  font-size: 9px;
  line-height: 1.45;
}
.editor-asset-item { position: relative; }
.editor-asset-item .asset-favorite { position: absolute; top: 3px; right: 3px; color: #f59e0b; font-size: 11px; }
.editor-asset-item .asset-meta { display: block; overflow: hidden; color: var(--aw-text-tertiary); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.system-asset-item { grid-template-rows: 56px auto auto; min-height: 104px; text-align: left; }
.system-asset-item .system-asset-preview {
  display: grid;
  width: 100%;
  height: 56px;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--aw-line) 72%, transparent);
  border-radius: 4px;
  background: #ffffff;
}
.system-asset-item .system-asset-preview img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}
.system-asset-item:hover { border-color: color-mix(in srgb, var(--aw-blue) 45%, var(--aw-line)); background: var(--aw-fill); }

.delivery-preflight-panel { display: grid; gap: 10px; margin: 14px 0; padding: 12px; border: 1px solid var(--aw-line); border-radius: 7px; background: var(--aw-fill); }
.delivery-preflight-panel > div:first-child { display: grid; gap: 3px; }
.delivery-preflight-panel > div:first-child span { color: var(--aw-text-tertiary); font-size: 10px; }
.delivery-preflight-panel label { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.preflight-result { max-height: 220px; overflow: auto; font-size: 10px; line-height: 1.55; color: var(--aw-text-secondary); }
.preflight-result .preflight-summary { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-weight: 700; }
.preflight-result ul { margin: 0; padding-left: 16px; }
.preflight-result li.error { color: #b42318; }
.preflight-result li.warning { color: #9a6700; }
.delivery-package-btn { width: 100%; margin-top: 12px; }

#step-edit .slide-el.table,
#step-edit .slide-el.chart { overflow: hidden; background: #fff; }
#step-edit .native-table-preview { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; font: inherit; color: inherit; }
#step-edit .native-table-preview td { overflow: hidden; padding: 2px 4px; border: 1px solid #cbd5e1; text-overflow: ellipsis; white-space: nowrap; }
#step-edit .native-table-preview tr:first-child td { background: #e2e8f0; font-weight: 700; }
#step-edit .native-chart-preview { display: flex; align-items: end; gap: 5%; width: 100%; height: 100%; padding: 10% 8% 12%; }
#step-edit .native-chart-bar { flex: 1 1 0; min-width: 4px; background: #2563eb; }
#step-edit .native-chart-pie { width: 70%; aspect-ratio: 1; margin: auto; border-radius: 50%; background: conic-gradient(#2563eb 0 35%, #14b8a6 35% 65%, #f59e0b 65% 100%); }
#step-edit .slide-el.image img { object-fit: var(--image-fit, cover); object-position: var(--image-position, 50% 50%); filter: var(--image-filter, none); transform: scaleX(var(--image-flip-x, 1)) scaleY(var(--image-flip-y, 1)); }
.delivery-readiness { display: grid; gap: 4px; margin: 14px 0; padding: 10px; border: 1px solid var(--aw-line); border-radius: 6px; background: var(--aw-surface-soft); font-size: 10px; }
.delivery-readiness span { color: var(--aw-text-secondary); line-height: 1.5; }
.editor-delivery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.editor-delivery-grid button { display: grid; min-height: 110px; place-items: center; gap: 3px; padding: 12px; border: 1px solid var(--aw-line); border-radius: 7px; background: var(--aw-surface-raised); color: var(--aw-text); cursor: pointer; }
.editor-delivery-grid svg { width: 22px; height: 22px; color: var(--aw-blue); }
.editor-delivery-grid span { color: var(--aw-text-tertiary); font-size: 9px; }

@media (max-width: 1280px) {
  .ribbon-ai-actions .compact-btn span { display: none; }
  .ribbon-ai-actions .compact-btn { width: 32px; padding-inline: 0; justify-content: center; }
}

@media (max-width: 980px) {
  .layout-ai-panel,
  .inspector-assistant-view { min-height: 520px; }
  .assistant-drawer.embedded { min-height: 520px; }
  .ribbon-ai-actions .compact-btn span { display: inline; }
  .ribbon-ai-actions .compact-btn { width: auto; padding-inline: 8px; }
}

@media (max-width: 640px) {
  .editor-left-tabs button span,
  .inspector-view-tabs button span { display: none; }
  .notes-isolation-badge { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
  .editor-delivery-grid { grid-template-columns: 1fr; }
  .editor-delivery-grid button { min-height: 76px; }
}

html[data-performance-tier="refined"] #step-edit,
html[data-performance-tier="refined"] #step-edit .office-canvas-shell,
html[data-performance-tier="refined"] #step-edit .slide-canvas {
  transform: none !important;
  perspective: none !important;
}

html[data-performance-tier="off"] *,
html[data-performance-tier="off"] *::before,
html[data-performance-tier="off"] *::after {
  animation: none !important;
  scroll-behavior: auto !important;
  transition: none !important;
}

html.startup-motion[data-performance-tier="standard"] .app-shell {
  animation: adaptive-startup 400ms var(--aw-ease) both !important;
}

html.startup-motion[data-performance-tier="refined"] .app-shell {
  animation: adaptive-startup 760ms var(--aw-ease) both !important;
}

@keyframes adaptive-startup {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Desktop window scaling, not a mobile layout. */
@media (max-width: 1280px) {
  :root {
    --aw-sidebar-width: 176px;
  }

  .workspace {
    padding-right: 26px !important;
    padding-left: 26px !important;
  }

  .project-card-main {
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }

  .project-card-cover {
    width: 96px !important;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .flow-panel:not(.hidden),
  #step-edit:not(.hidden),
  .project-card,
  .style-moodboard,
  .slide-preview,
  .asset-item,
  .social-output-card {
    animation: none !important;
  }
}

/* AI work assistant */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.rail-item-assistant {
  margin-top: 6px !important;
  border-top: 1px solid var(--aw-line) !important;
}

.rail-item-assistant.assistant-active {
  background: color-mix(in srgb, #173f35 10%, transparent) !important;
  color: color-mix(in srgb, #173f35 88%, var(--aw-text)) !important;
}

.rail-item-assistant.assistant-active span {
  background: #173f35 !important;
  color: #f3d58a !important;
}

.assistant-backdrop {
  position: fixed;
  z-index: 1190;
  inset: 64px 0 0;
  background: rgba(0, 0, 0, 0.12);
  opacity: 1;
  transition: opacity var(--aw-motion-standard) ease;
}

.assistant-backdrop.hidden {
  display: none !important;
}

.assistant-drawer {
  position: fixed;
  z-index: 1200;
  top: 64px;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(420px, calc(100vw - 80px));
  min-width: 360px;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--aw-line);
  background: var(--aw-surface);
  color: var(--aw-text);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.12);
  transform: translateX(calc(100% + 24px));
  visibility: hidden;
  transition: transform 200ms var(--aw-ease), visibility 0s linear 200ms;
}

.assistant-drawer.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 200ms var(--aw-ease), visibility 0s;
}

.assistant-header {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 11px 16px;
  border-bottom: 1px solid var(--aw-line);
}

.assistant-heading,
.assistant-header-actions {
  display: flex;
  align-items: center;
}

.assistant-heading {
  min-width: 0;
  gap: 10px;
}

.assistant-mark {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 8px;
  background: #173f35;
  color: #f3d58a;
}

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

.assistant-heading h2 {
  margin: 0;
  font-size: 14px;
  line-height: 1.25;
}

.assistant-heading p {
  margin: 2px 0 0;
  color: var(--aw-text-secondary);
  font-size: 10px;
  line-height: 1.3;
}

.assistant-header-actions {
  gap: 4px;
}

.assistant-icon-btn,
.assistant-send-btn {
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
}

.assistant-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: transparent;
  color: var(--aw-text-secondary);
}

.assistant-icon-btn:hover {
  background: var(--aw-surface-strong);
  color: var(--aw-text);
}

.assistant-icon-btn svg,
.assistant-send-btn svg {
  width: 16px;
  height: 16px;
}

.assistant-context {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 16px;
  border-bottom: 1px solid var(--aw-line);
  scrollbar-width: none;
}

.assistant-context::-webkit-scrollbar {
  display: none;
}

.assistant-context-chip {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 8px;
  border: 1px solid var(--aw-line);
  border-radius: 999px;
  background: var(--aw-surface-soft);
  color: var(--aw-text-secondary);
  font-size: 10px;
  white-space: nowrap;
}

.assistant-service-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 16px 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--aw-orange) 25%, var(--aw-line));
  border-radius: 6px;
  background: var(--aw-orange-soft);
  color: var(--aw-orange);
  font-size: 11px;
  line-height: 1.45;
}

.assistant-service-notice svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.assistant-messages {
  min-height: 0;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 16px 12px;
  overscroll-behavior: contain;
}

.assistant-empty {
  display: grid;
  min-height: 180px;
  align-content: center;
  gap: 6px;
  color: var(--aw-text-secondary);
  text-align: center;
}

.assistant-empty strong {
  color: var(--aw-text);
  font-size: 13px;
}

.assistant-empty span {
  font-size: 11px;
  line-height: 1.55;
}

.assistant-message {
  display: flex;
  margin: 0 0 14px;
}

.assistant-message.user {
  justify-content: flex-end;
}

.assistant-message-content {
  max-width: 88%;
  color: var(--aw-text);
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.assistant-message.user .assistant-message-content {
  padding: 8px 11px;
  border-radius: 8px 8px 2px 8px;
  background: var(--aw-blue);
  color: #ffffff;
}

.assistant-message.assistant .assistant-message-content,
.assistant-message.result .assistant-message-content {
  padding-left: 10px;
  border-left: 2px solid #c79a45;
}

.assistant-message.result .assistant-message-content {
  border-left-color: var(--aw-green);
  color: var(--aw-text-secondary);
}

.assistant-message.failed .assistant-message-content {
  border-left-color: var(--aw-red);
  color: var(--aw-red);
}

.assistant-thinking {
  color: var(--aw-text-secondary);
  font-size: 11px;
}

.assistant-action-preview {
  margin: -2px 0 16px;
  padding: 12px;
  border: 1px solid var(--aw-line-strong);
  border-radius: 8px;
  background: var(--aw-surface-soft);
}

.assistant-action-preview h3 {
  margin: 0;
  color: var(--aw-text);
  font-size: 12px;
  line-height: 1.35;
}

.assistant-action-preview > p {
  margin: 5px 0 0;
  color: var(--aw-text-secondary);
  font-size: 11px;
  line-height: 1.5;
}

.assistant-action-warning,
.assistant-action-cost {
  color: var(--aw-orange) !important;
}

.assistant-rewrite-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.assistant-rewrite-item {
  padding-top: 8px;
  border-top: 1px solid var(--aw-line);
}

.assistant-rewrite-item span {
  display: block;
  color: var(--aw-text-tertiary);
  font-size: 9px;
}

.assistant-rewrite-item del,
.assistant-rewrite-item ins {
  display: block;
  margin-top: 3px;
  color: var(--aw-text-secondary);
  font-size: 10px;
  line-height: 1.45;
  text-decoration: none;
}

.assistant-rewrite-item ins {
  color: var(--aw-text);
}

.assistant-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 12px;
}

.assistant-preview-actions button,
.assistant-suggestion {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--aw-line-strong);
  border-radius: 6px;
  background: var(--aw-surface);
  color: var(--aw-text);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.assistant-preview-actions .confirm {
  border-color: var(--aw-blue);
  background: var(--aw-blue);
  color: #ffffff;
}

.assistant-suggestions {
  display: flex;
  min-height: 46px;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 16px;
  border-top: 1px solid var(--aw-line);
  scrollbar-width: none;
}

.assistant-suggestions::-webkit-scrollbar {
  display: none;
}

.assistant-suggestion {
  flex: 0 0 auto;
  white-space: nowrap;
}

.assistant-suggestion:hover:not(:disabled) {
  border-color: var(--aw-blue);
  color: var(--aw-blue);
}

.assistant-suggestion:disabled {
  cursor: default;
  opacity: 0.45;
}

.assistant-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: end;
  gap: 8px;
  margin: 0 16px;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--aw-line-strong);
  border-radius: 8px;
  background: var(--aw-surface-soft);
}

.assistant-composer:focus-within {
  border-color: color-mix(in srgb, var(--aw-blue) 58%, var(--aw-line));
  box-shadow: 0 0 0 3px var(--aw-blue-soft);
}

.assistant-composer textarea {
  width: 100%;
  min-height: 24px;
  max-height: 120px;
  resize: none;
  overflow-y: auto;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--aw-text);
  font-size: 12px;
  line-height: 1.5;
  box-shadow: none !important;
}

.assistant-send-btn {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--aw-blue);
  color: #ffffff;
}

.assistant-send-btn:disabled {
  background: var(--aw-surface-strong);
  color: var(--aw-text-tertiary);
  cursor: default;
}

.assistant-composer-hint {
  margin: 6px 16px 10px;
  color: var(--aw-text-tertiary);
  font-size: 9px;
  text-align: right;
}

.assistant-highlight-target {
  outline: 3px solid color-mix(in srgb, var(--aw-blue) 38%, transparent) !important;
  outline-offset: 4px !important;
  transition: outline-color 160ms ease !important;
}

:root[data-theme="dark"] .rail-item-assistant.assistant-active {
  background: rgba(243, 213, 138, 0.1) !important;
  color: #f3d58a !important;
}

:root[data-theme="dark"] .assistant-drawer {
  border-left-color: rgba(255, 255, 255, 0.12);
}

html[data-performance-tier="smooth"] .assistant-drawer,
html[data-performance-tier="off"] .assistant-drawer {
  box-shadow: none;
  transition-duration: 120ms;
}

html[data-performance-tier="smooth"] .assistant-backdrop,
html[data-performance-tier="off"] .assistant-backdrop {
  background: rgba(0, 0, 0, 0.08);
}

html[data-performance-tier="refined"] .assistant-drawer {
  box-shadow: -22px 0 54px rgba(0, 0, 0, 0.16);
  transition-duration: 280ms;
}

@media (max-width: 1280px) {
  .assistant-drawer {
    width: 400px;
  }
}

/* The editable slide sits inside a larger pasteboard. Objects may be parked outside the export area. */
#step-edit .slide-stage {
  padding: 0 !important;
  overscroll-behavior: contain;
}

#step-edit .slide-pasteboard {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
  min-height: 100%;
  padding: var(--pasteboard-margin-y, 150px) var(--pasteboard-margin-x, 190px);
  margin: auto;
}

#step-edit .slide-canvas {
  flex: 0 0 auto;
  overflow: visible !important;
}

#step-edit .slide-pasteboard::after {
  position: absolute;
  inset: 18px;
  z-index: -1;
  border: 1px dashed color-mix(in srgb, var(--aw-text-tertiary) 18%, transparent);
  border-radius: 6px;
  content: "";
  pointer-events: none;
}

/* Compact PowerPoint-style status tools, slide browser, notes and presentation view. */
#step-edit .office-canvas-shell {
  container-type: inline-size;
  grid-template-rows: 28px minmax(0, 1fr) 38px auto !important;
}

#step-edit .office-status-bar {
  position: relative;
  z-index: 70;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(236px, 1fr) !important;
  align-items: center;
  gap: 8px !important;
  min-width: 0;
  min-height: 38px;
  padding: 0 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.status-bar-summary,
.status-bar-view-tools,
.status-bar-zoom {
  display: flex;
  align-items: center;
  min-width: 0;
}

.status-bar-summary {
  gap: 12px;
  overflow: hidden;
}

.status-bar-summary > span {
  flex: 0 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-bar-summary #editorSelectionStatus {
  flex: 1 1 auto;
  color: var(--aw-text-tertiary);
}

.status-bar-view-tools {
  gap: 2px;
  padding: 0 6px;
  border-inline: 1px solid var(--aw-line);
}

.status-bar-zoom {
  justify-content: flex-end;
  gap: 4px;
}

#step-edit .status-bar-btn,
.slide-show-control {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

#step-edit .status-bar-btn:hover:not(:disabled),
#step-edit .status-bar-btn.active {
  background: var(--aw-surface-strong);
  color: var(--aw-blue);
}

#step-edit .status-bar-btn:disabled,
.slide-show-control:disabled {
  cursor: default;
  opacity: 0.34;
}

#step-edit .status-bar-btn svg,
.slide-show-control svg {
  width: 15px;
  height: 15px;
}

#step-edit .status-notes-btn {
  display: inline-flex;
  width: auto;
  min-width: 54px;
  gap: 5px;
  padding: 0 7px;
}

#editorZoomRange {
  width: clamp(74px, 10vw, 132px);
  height: 18px;
  margin: 0 2px;
  padding: 0;
  accent-color: var(--aw-blue);
  cursor: pointer;
}

#editorZoomStatus {
  width: 40px;
  color: var(--aw-text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

#step-edit .speaker-notes-panel {
  gap: 6px !important;
  min-height: 0;
  padding: 8px 10px 9px !important;
}

#step-edit .speaker-notes-panel[hidden] {
  display: none !important;
}

#step-edit #speakerNotesInput {
  min-height: 56px !important;
  max-height: 130px;
  resize: vertical;
  border-radius: 6px !important;
}

.slide-browser-popover {
  position: absolute;
  left: 50%;
  bottom: 44px;
  z-index: 320;
  width: min(760px, calc(100cqw - 24px));
  max-height: min(62vh, 520px);
  overflow: hidden;
  border: 1px solid var(--aw-line-strong);
  border-radius: 8px;
  background: var(--aw-surface);
  color: var(--aw-text);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.22);
  transform: translateX(-50%);
}

.slide-browser-popover > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 46px;
  padding: 0 10px 0 14px;
  border-bottom: 1px solid var(--aw-line);
}

.slide-browser-popover > header > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.slide-browser-popover header strong {
  color: var(--aw-text);
  font-size: 13px;
}

.slide-browser-popover header span {
  color: var(--aw-text-tertiary);
  font-size: 10px;
}

.slide-browser-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
  max-height: min(calc(62vh - 46px), 474px);
  padding: 14px;
  overflow: auto;
}

.slide-browser-item {
  min-width: 0;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--aw-text-secondary);
  text-align: left;
  cursor: pointer;
}

.slide-browser-item:hover,
.slide-browser-item.active {
  border-color: var(--aw-line-strong);
  background: var(--aw-surface-soft);
}

.slide-browser-item.active {
  border-color: var(--aw-blue);
  box-shadow: 0 0 0 2px var(--aw-blue-soft);
}

.slide-browser-item .mini-slide {
  width: 100%;
  border-radius: 3px !important;
  pointer-events: none;
}

.slide-browser-design-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 3px;
  background: var(--aw-surface-muted);
  pointer-events: none;
}

.slide-browser-design-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.slide-browser-design-preview small {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.64);
  color: #fff;
  font-size: 9px;
}

.slide-browser-design-preview.empty {
  display: grid;
  place-items: center;
  color: var(--aw-text-tertiary);
}

.slide-show-design-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.slide-show-design-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  color: #777;
}

.slide-browser-item > span {
  display: flex;
  gap: 6px;
  min-width: 0;
  margin-top: 6px;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slide-browser-item > span b {
  color: var(--aw-text-tertiary);
  font-variant-numeric: tabular-nums;
}

body.slide-show-active {
  overflow: hidden !important;
}

.slide-show-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  grid-template-rows: 52px minmax(0, 1fr) 44px;
  background: #090909;
  color: #f5f5f7;
}

.slide-show-overlay[hidden] {
  display: none !important;
}

.slide-show-topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 0 14px 0 18px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.slide-show-topbar > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slide-show-stage {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
}

.slide-show-canvas {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 22px 72px rgba(0, 0, 0, 0.48);
}

.slide-show-canvas .slide-el,
.slide-show-canvas .slide-el.text {
  cursor: default;
  user-select: none;
}

.slide-show-canvas .slide-el[data-group-id]::after {
  display: none;
}

.slide-show-control {
  color: rgba(255, 255, 255, 0.82);
}

.slide-show-control:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.slide-show-topbar .slide-show-control {
  width: 32px;
  height: 32px;
}

.slide-show-nav {
  align-self: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.slide-show-nav.previous {
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
}

.slide-show-nav.next {
  grid-column: 3;
  grid-row: 2;
  justify-self: center;
}

.slide-show-counter {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: center;
  justify-self: center;
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

@container (max-width: 720px) {
  .status-bar-summary #editorSelectionStatus {
    display: none;
  }

  #step-edit .office-status-bar {
    grid-template-columns: auto auto minmax(190px, 1fr) !important;
  }

  .slide-browser-grid {
    grid-template-columns: repeat(3, minmax(110px, 1fr));
  }
}

@container (max-width: 560px) {
  #step-edit .office-status-bar {
    grid-template-columns: auto auto minmax(132px, 1fr) !important;
    gap: 3px !important;
    padding-inline: 5px !important;
  }

  .status-bar-view-tools {
    padding-inline: 3px;
  }

  #step-edit .status-notes-btn {
    width: 28px;
    min-width: 28px;
    padding: 0;
  }

  #step-edit .status-notes-btn .button-label,
  #editorZoomStatus {
    display: none;
  }

  #editorZoomRange {
    width: min(72px, 16cqw);
  }

  .slide-browser-grid {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
  }
}

@media (max-width: 640px) {
  .slide-show-overlay {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .slide-show-nav {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 980px) {
  #step-edit .thumbnail-list {
    display: flex !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  #step-edit .thumb {
    flex: 0 0 150px;
  }

  #step-edit .office-canvas-shell {
    height: 500px !important;
    min-height: 500px !important;
  }
}

/* Editor layout and panel resizing are owned by assistant-first.css. */
.smart-mockup-config-card .social-form-grid {
  align-items: end;
}
.smart-toggle-label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  align-items: center;
}
.smart-toggle-label span { grid-column: 1 / -1; }
.smart-toggle-label input { width: 18px; height: 18px; accent-color: #1677ff; }
.smart-toggle-label small { color: var(--muted-text, #6b7280); font-size: 12px; }
#socialMockupAnalysisView { display: grid; gap: 4px; }
#socialMockupAnalysisView strong { color: var(--text-primary, #111827); }
#socialMockupAnalysisView small { color: var(--muted-text, #6b7280); }

/* /assistant-first.css */
/* ==== consolidated from /assistant-first.css (cascade order preserved) ==== */
/* Assistant-first workbench: quiet chrome, centered canvas, persistent AI. */
:root {
  --af-bg: #f2f3f5;
  --af-chrome: #f8f8f9;
  --af-panel: #ffffff;
  --af-panel-soft: #f7f7f8;
  --af-panel-strong: #ececef;
  --af-text: #202124;
  --af-muted: #707177;
  --af-faint: #96979d;
  --af-line: rgba(28, 29, 31, 0.1);
  --af-line-strong: rgba(28, 29, 31, 0.17);
  --af-accent: #087f68;
  --af-accent-hover: #066b58;
  --af-accent-soft: rgba(8, 127, 104, 0.1);
  --af-gold: #b97919;
  --af-gold-soft: rgba(185, 121, 25, 0.1);
  --af-danger: #c9342f;
  --af-shadow: 0 14px 36px rgba(22, 22, 24, 0.12);
  --af-rail-width: 72px;
  --af-topbar-height: 56px;
  --af-left-width: 196px;
  --af-assistant-width: 372px;
  color-scheme: light;
}

/* Luxin voice controls stay compact on the desktop workbench and never cover the canvas. */
.luxin-voice-launcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 72px;
  height: 34px;
  padding: 0 9px 0 7px;
  border: 1px solid color-mix(in srgb, #0f8c86 42%, var(--line, #d7dbe3));
  border-radius: 18px;
  background: color-mix(in srgb, #0f8c86 8%, var(--surface, #fff));
  color: var(--text, #172033);
  font: inherit;
  font-size: 10px;
  font-weight: 760;
  cursor: pointer;
  overflow: hidden;
}
.luxin-voice-launcher:hover,
.luxin-voice-launcher:focus-visible,
.luxin-voice-launcher.enabled { border-color: #0f8c86; background: color-mix(in srgb, #0f8c86 15%, var(--surface, #fff)); }
.luxin-voice-launcher > i { position: relative; z-index: 1; width: 15px; height: 15px; color: #0f8c86; }
.luxin-voice-launcher em { position: relative; z-index: 1; font-style: normal; letter-spacing: .02em; }
.luxin-orbit {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 19px;
  height: 19px;
  border: 1px solid #0f8c86;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, #0f8c86 10%, transparent), 0 0 10px color-mix(in srgb, #0f8c86 25%, transparent);
}
.luxin-orbit::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #0f8c86; box-shadow: 0 0 7px #0f8c86; }
.luxin-voice-launcher.enabled .luxin-orbit { animation: luxin-orbit-pulse 1.8s ease-in-out infinite; }
@keyframes luxin-orbit-pulse { 50% { transform: scale(1.08); box-shadow: inset 0 0 0 3px color-mix(in srgb, #0f8c86 18%, transparent), 0 0 16px color-mix(in srgb, #0f8c86 40%, transparent); } }

.assistant-drawer .assistant-header .assistant-heading small { display: block; margin-top: 2px; color: var(--muted, #667085); font-size: 9px; }
.assistant-voice-status {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  min-height: 43px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line, #e2e5ea);
  background: color-mix(in srgb, #0f8c86 4%, var(--panel, #fff));
}
.assistant-voice-status[data-state="listening"],
.assistant-voice-status[data-state="starting"],
.assistant-voice-status[data-state="awake"] { background: color-mix(in srgb, #0f8c86 10%, var(--panel, #fff)); }
.assistant-voice-status[data-state="error"],
.assistant-voice-status[data-state="disabled"] { background: color-mix(in srgb, #b54708 8%, var(--panel, #fff)); }
.assistant-voice-pulse { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid color-mix(in srgb, #0f8c86 45%, transparent); border-radius: 50%; color: #0f8c86; }
.assistant-voice-pulse svg { width: 14px; height: 14px; }
.assistant-voice-status[data-state="listening"] .assistant-voice-pulse { animation: luxin-orbit-pulse 1.25s ease-in-out infinite; }
.assistant-voice-status > div { display: grid; min-width: 0; gap: 1px; }
.assistant-voice-status strong { overflow: hidden; color: var(--text, #172033); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-voice-status small { overflow: hidden; color: var(--muted, #667085); font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.assistant-voice-status .assistant-icon-btn { width: 28px; height: 28px; }
.assistant-voice-status .assistant-icon-btn svg { width: 14px; height: 14px; }
.assistant-composer { position: relative; }
.assistant-voice-input-btn { position: absolute; right: 42px; bottom: 8px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted, #667085); cursor: pointer; }
.assistant-voice-input-btn:hover, .assistant-voice-input-btn:focus-visible, .assistant-voice-input-btn.active { color: #0f8c86; background: color-mix(in srgb, #0f8c86 12%, transparent); }
.assistant-voice-input-btn svg { width: 16px; height: 16px; }
.assistant-composer textarea { padding-right: 78px; }
.settings-range-field { display: grid; gap: 6px; }
.settings-range-field > span { display: flex; justify-content: space-between; color: var(--text, #172033); font-size: 11px; }
.settings-range-field output { color: var(--muted, #667085); font-variant-numeric: tabular-nums; }
.settings-range-field input[type="range"] { width: 100%; accent-color: #0f8c86; }

:root[data-theme="dark"] .luxin-voice-launcher { background: color-mix(in srgb, #0f8c86 14%, #1d2229); color: #f3f5f6; }
:root[data-theme="dark"] .assistant-voice-status { background: color-mix(in srgb, #0f8c86 9%, #1c2026); }

/* Shared AI scene mockups for the design and editable workflow inspectors. */
.scene-mockup-inspector {
  border-top: 1px solid color-mix(in srgb, var(--line, #d8dee8) 72%, transparent);
  padding: 12px 14px 18px;
}

.scene-mockup-workspace,
.scene-mockup-workspace[open] {
  border: 0;
  background: transparent;
}

.scene-mockup-workspace > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0 10px;
  cursor: pointer;
  list-style: none;
}

.scene-mockup-workspace > summary::-webkit-details-marker { display: none; }
.scene-mockup-workspace > summary > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.scene-mockup-workspace > summary > span svg { width: 18px; height: 18px; color: #0f78d4; }
.scene-mockup-workspace > summary strong { font-size: 13px; font-weight: 720; }
.scene-mockup-workspace > summary em { color: var(--muted, #667085); font-size: 10px; font-style: normal; white-space: nowrap; }
.scene-mockup-body { display: grid; gap: 11px; }

.scene-mockup-loading,
.scene-mockup-empty {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  color: var(--muted, #667085);
  font-size: 11px;
}

.scene-mockup-loading svg { width: 18px; color: #6f42c1; animation: fluent-icon-breathe 1.35s ease-in-out infinite; }
.scene-mockup-empty svg { width: 20px; color: #d97706; }
.scene-model-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.scene-model-status > div {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 1px 6px;
  min-width: 0;
  padding: 7px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #d8dee8) 58%, transparent);
}
.scene-model-status svg { grid-row: 1 / span 3; width: 15px; height: 15px; margin-top: 1px; }
.scene-model-status span,
.scene-model-status small { overflow: hidden; color: var(--muted, #667085); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.scene-model-status strong { overflow: hidden; color: var(--text, #172033); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.scene-model-status .ready svg { color: #0c8f65; }
.scene-model-status .not-ready svg { color: #d97706; }
.scene-model-warning {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: #b54708;
  font-size: 9px;
  line-height: 1.45;
}
.scene-model-warning svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; }
.scene-voice-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px 8px;
  padding: 6px 0 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #d8dee8) 58%, transparent);
}
.scene-voice-controls label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--muted, #667085);
  font-size: 9px;
}
.scene-voice-controls input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: #0f78d4; }
.scene-voice-controls input[type="range"] { width: 74px; accent-color: #0f78d4; }
.scene-voice-controls small { grid-column: 1 / -1; color: var(--muted, #667085); font-size: 8.5px; line-height: 1.4; }
.scene-voice-controls.unsupported { display: flex; align-items: center; color: var(--muted, #667085); font-size: 9px; }
.scene-voice-controls.unsupported svg { width: 14px; height: 14px; }
.scene-mockup-intro { display: flex; align-items: baseline; gap: 8px; color: var(--muted, #667085); font-size: 10px; }
.scene-mockup-intro strong { margin-left: auto; color: var(--text, #172033); font-size: 12px; }
.scene-mockup-intro small { font-size: 10px; }

.scene-mockup-source-list {
  display: grid;
  max-height: 172px;
  overflow: auto;
  padding-right: 3px;
}

.scene-mockup-source {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 5px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #d8dee8) 58%, transparent);
  cursor: pointer;
}

.scene-mockup-source:last-child { border-bottom: 0; }
.scene-mockup-source.selected { background: color-mix(in srgb, #0f78d4 7%, transparent); }
.scene-mockup-source.unavailable { cursor: not-allowed; opacity: .48; }
.scene-mockup-source input { width: 15px; height: 15px; margin: 0; accent-color: #0f78d4; }
.scene-mockup-source > span { display: grid; gap: 1px; min-width: 0; }
.scene-mockup-source strong { overflow: hidden; color: var(--text, #172033); font-size: 10.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.scene-mockup-source small { overflow: hidden; color: var(--muted, #667085); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.scene-preserve-toggle {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 8px 4px;
  cursor: pointer;
}

.scene-preserve-toggle.active { color: #0c7a55; }
.scene-preserve-toggle input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: #0c8f65; }
.scene-preserve-toggle > span { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 1px 6px; }
.scene-preserve-toggle > span > :first-child { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.scene-preserve-toggle > span > strong { min-width: 0; grid-column: 2; grid-row: 1; }
.scene-preserve-toggle > span > small { min-width: 0; grid-column: 2; grid-row: 2; }
.scene-preserve-toggle svg { grid-row: 1 / span 2; width: 17px; height: 17px; color: #0c8f65; }
.scene-preserve-toggle strong { color: var(--text, #172033); font-size: 11px; }
.scene-preserve-toggle small { color: var(--muted, #667085); font-size: 9px; line-height: 1.45; }

.scene-analysis-btn,
.scene-mockup-generate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  font: inherit;
  font-size: 11px;
  font-weight: 680;
  cursor: pointer;
}

.scene-analysis-btn { background: color-mix(in srgb, #6f42c1 10%, transparent); color: #6f42c1; }
.scene-analysis-btn:hover:not(:disabled) { background: color-mix(in srgb, #6f42c1 16%, transparent); }
.scene-analysis-btn svg { width: 17px; height: 17px; }
.scene-analysis-btn:disabled,
.scene-mockup-generate:disabled { cursor: not-allowed; opacity: .52; }
.scene-mockup-generate svg { width: 17px; height: 17px; }

.scene-mockup-recommendation {
  display: grid;
  gap: 4px;
  padding: 3px 2px 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #d8dee8) 62%, transparent);
}

.scene-mockup-recommendation > span { display: inline-flex; align-items: center; gap: 5px; color: #6f42c1; font-size: 10px; font-weight: 680; }
.scene-mockup-recommendation > span svg { width: 14px; height: 14px; }
.scene-mockup-recommendation p,
.scene-mockup-recommendation small,
.scene-mockup-recommendation em { margin: 0; line-height: 1.45; }
.scene-mockup-recommendation p { color: var(--text, #172033); font-size: 10px; }
.scene-mockup-recommendation small { color: var(--muted, #667085); font-size: 9px; }
.scene-mockup-recommendation em { color: #b54708; font-size: 9px; font-style: normal; }

.scene-mockup-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.scene-mockup-field { display: grid; gap: 4px; min-width: 0; }
.scene-mockup-field > span,
.scene-custom-size label > span { color: var(--muted, #667085); font-size: 9px; }
.scene-mockup-field select,
.scene-mockup-field textarea,
.scene-custom-size input {
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line, #d8dee8) 82%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
  color: var(--text, #172033);
  font: inherit;
  font-size: 10px;
}

.scene-mockup-field select { height: 31px; padding: 0 7px; }
.scene-mockup-field textarea { min-height: 62px; padding: 7px; resize: vertical; line-height: 1.45; }
.scene-mockup-instructions { grid-column: 1 / -1; }
.scene-custom-size { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr); align-items: end; gap: 5px; }
.scene-custom-size.hidden { display: none; }
.scene-custom-size label { display: grid; gap: 4px; }
.scene-custom-size input { height: 30px; padding: 0 7px; }
.scene-custom-size b { align-self: center; color: var(--muted, #667085); font-size: 10px; text-align: center; }
.scene-mockup-mode-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--muted, #667085); font-size: 9px; line-height: 1.45; }
.scene-mockup-mode-note svg { flex: 0 0 auto; width: 14px; height: 14px; color: #0c8f65; }
.scene-mockup-results-head { display: flex; align-items: center; justify-content: space-between; padding-top: 3px; }
.scene-mockup-results-head strong { font-size: 11px; }
.scene-mockup-results-head span { color: var(--muted, #667085); font-size: 9px; }
.scene-mockup-results { display: grid; gap: 10px; }

.scene-mockup-result {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 0 10px;
  border-top: 1px solid color-mix(in srgb, var(--line, #d8dee8) 65%, transparent);
}

.scene-mockup-result-image {
  position: relative;
  width: 76px;
  height: 58px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: #dfe5ec;
  cursor: zoom-in;
}

.scene-mockup-result-image img { width: 100%; height: 100%; object-fit: cover; }
.scene-mockup-result-image.placeholder {
  display: grid;
  place-items: center;
  color: #b54708;
  cursor: default;
}
.scene-mockup-result-image.placeholder svg { width: 20px; height: 20px; }
.scene-mockup-result-image > svg { position: absolute; right: 5px; bottom: 5px; width: 13px; height: 13px; padding: 2px; border-radius: 3px; background: rgba(13, 20, 32, .68); color: #fff; }
.scene-mockup-result-copy { display: grid; align-content: start; gap: 2px; min-width: 0; }
.scene-mockup-result-copy strong { overflow: hidden; color: var(--text, #172033); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.scene-mockup-result-copy span,
.scene-mockup-result-copy small { color: var(--muted, #667085); font-size: 8.5px; line-height: 1.35; }
.scene-mockup-result-copy em { color: #b54708; font-size: 8px; font-style: normal; line-height: 1.35; }
.scene-mockup-result-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.scene-mockup-result-actions .icon-text-action,
.scene-mockup-result-actions .icon-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0f78d4;
  font: inherit;
  font-size: 9px;
  text-decoration: none;
  cursor: pointer;
}
.scene-mockup-result-actions svg { width: 13px; height: 13px; }
.scene-mockup-result-actions .danger { margin-left: auto; color: #c2413a; }
.scene-mockup-result.failed .scene-mockup-result-copy strong { color: #b54708; }

:root[data-theme="dark"] .scene-analysis-btn { color: #c6a9ff; }
:root[data-theme="dark"] .scene-mockup-workspace > summary > span svg,
:root[data-theme="dark"] .scene-mockup-result-actions .icon-text-action { color: #70b7ff; }
:root[data-theme="dark"] .scene-preserve-toggle.active,
:root[data-theme="dark"] .scene-preserve-toggle svg,
:root[data-theme="dark"] .scene-mockup-mode-note svg { color: #54d4a8; }

:root[data-theme="dark"] {
  --af-bg: #101011;
  --af-chrome: #161617;
  --af-panel: #1b1b1c;
  --af-panel-soft: #202021;
  --af-panel-strong: #29292b;
  --af-text: #f1f1f2;
  --af-muted: #aaaab0;
  --af-faint: #7e7e84;
  --af-line: rgba(255, 255, 255, 0.09);
  --af-line-strong: rgba(255, 255, 255, 0.15);
  --af-accent: #4cc7a7;
  --af-accent-hover: #65d3b6;
  --af-accent-soft: rgba(76, 199, 167, 0.13);
  --af-gold: #e0ad58;
  --af-gold-soft: rgba(224, 173, 88, 0.12);
  --af-danger: #ff716b;
  --af-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
  color-scheme: dark;
}

html,
body {
  min-width: 0 !important;
  background: var(--af-bg) !important;
}

body,
button,
input,
select,
textarea,
summary {
  color: var(--af-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  letter-spacing: 0 !important;
}

.app-shell {
  grid-template-columns: var(--af-rail-width) minmax(0, 1fr) !important;
  grid-template-rows: var(--af-topbar-height) minmax(0, 1fr) !important;
  min-height: 100dvh !important;
  background: var(--af-bg) !important;
}

.topbar {
  z-index: 300 !important;
  height: var(--af-topbar-height) !important;
  min-height: var(--af-topbar-height) !important;
  padding: 0 14px 0 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--af-line) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--af-chrome) 94%, transparent) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
}

.brand-block { gap: 9px !important; }
.brand-mark {
  width: 30px !important;
  height: 30px !important;
  flex-basis: 30px !important;
  border: 1px solid var(--af-line) !important;
  border-radius: 7px !important;
  background: #f1ecdf !important;
  box-shadow: none !important;
}
.brand-copy h1,
.topbar h1 { color: var(--af-text) !important; font-size: 13px !important; font-weight: 650 !important; }
.brand-copy h1 span { color: var(--af-muted) !important; font-size: 10px !important; font-weight: 520 !important; }
.brand-copy p,
.topbar p { color: var(--af-faint) !important; font-size: 10px !important; }
.top-actions { gap: 6px !important; }

.primary-btn,
.ghost-btn,
.danger-btn,
.icon-btn,
.theme-toggle-btn {
  min-height: 32px !important;
  padding: 0 11px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
}
.primary-btn { border-color: var(--af-accent) !important; background: var(--af-accent) !important; color: #fff !important; }
.primary-btn:hover:not(:disabled) { border-color: var(--af-accent-hover) !important; background: var(--af-accent-hover) !important; box-shadow: none !important; transform: none !important; }
.ghost-btn,
.icon-btn,
.theme-toggle-btn { border-color: var(--af-line-strong) !important; background: var(--af-panel) !important; color: var(--af-text) !important; }
.ghost-btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled),
.theme-toggle-btn:hover:not(:disabled) { border-color: var(--af-line-strong) !important; background: var(--af-panel-strong) !important; box-shadow: none !important; transform: none !important; }
.primary-btn:active:not(:disabled),
.ghost-btn:active:not(:disabled),
.icon-btn:active:not(:disabled) { transform: scale(0.97) !important; }
.status-dot,
.save-state,
.license-points { min-height: 28px !important; border-radius: 6px !important; font-size: 10px !important; }
.status-dot { border-color: var(--af-line) !important; background: var(--af-panel-soft) !important; color: var(--af-muted) !important; }

.rail {
  top: var(--af-topbar-height) !important;
  width: var(--af-rail-width) !important;
  height: calc(100dvh - var(--af-topbar-height)) !important;
  padding: 8px 7px !important;
  gap: 4px !important;
  border: 0 !important;
  border-right: 1px solid var(--af-line) !important;
  border-radius: 0 !important;
  background: var(--af-chrome) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.rail-section-label { display: none !important; }
.rail-item {
  display: flex !important;
  width: 58px !important;
  min-height: 52px !important;
  flex: 0 0 52px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 3px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--af-muted) !important;
}
.rail-item span {
  display: grid !important;
  width: 27px !important;
  height: 27px !important;
  flex: 0 0 27px !important;
  place-items: center !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}
.rail-item span svg { width: 16px !important; height: 16px !important; }
.rail-item strong {
  max-width: 54px !important;
  color: inherit !important;
  font-size: 9px !important;
  font-weight: 560 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}
.rail-item:hover:not(:disabled) { background: var(--af-panel-strong) !important; color: var(--af-text) !important; }
.rail-item.active { background: var(--af-accent-soft) !important; color: var(--af-accent) !important; }
.rail-item.active span { background: transparent !important; color: inherit !important; box-shadow: none !important; }
.rail-item-assistant { margin-bottom: 7px !important; background: var(--af-panel) !important; color: var(--af-accent) !important; box-shadow: inset 0 0 0 1px var(--af-line) !important; }
.rail-item-assistant.assistant-active { background: var(--af-accent-soft) !important; color: var(--af-accent) !important; }
.rail-item[data-step="tools"] { margin-top: auto !important; }

.workspace {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: auto !important;
  background: var(--af-bg) !important;
}
.workspace:has(#step-edit:not(.hidden)) { padding: 0 !important; overflow: hidden !important; }

.flow-panel,
#step-create,
#step-tools,
#step-imageppt,
#step-social {
  width: min(1180px, calc(100% - 40px)) !important;
  margin: 20px auto !important;
  padding: 22px !important;
  border: 1px solid var(--af-line) !important;
  border-radius: 8px !important;
  background: var(--af-panel) !important;
  box-shadow: none !important;
}
.panel-head { border-color: var(--af-line) !important; }
.panel-head h2 { color: var(--af-text) !important; font-size: 18px !important; letter-spacing: 0 !important; }
.panel-head p { color: var(--af-muted) !important; }
.new-project-panel,
.requirements-section,
.project-optional { border-color: var(--af-line) !important; border-radius: 7px !important; background: var(--af-panel-soft) !important; box-shadow: none !important; }
.mode-card,
.project-card,
.tool-launch-item,
.export-tile { border-color: var(--af-line) !important; border-radius: 7px !important; background: var(--af-panel) !important; box-shadow: none !important; }

#step-edit.editor-layout {
  grid-template-columns: var(--editor-left-width, var(--af-left-width)) minmax(420px, 1fr) var(--editor-right-width, var(--af-assistant-width)) !important;
  grid-template-rows: 48px minmax(0, 1fr) !important;
  width: 100% !important;
  height: calc(100dvh - var(--af-topbar-height)) !important;
  min-height: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--af-line) !important;
  box-shadow: none !important;
}
#step-edit .editor-top-ribbon,
#step-edit .thumb-panel,
#step-edit .canvas-area,
#step-edit .inspector {
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--af-panel) !important;
  color: var(--af-text) !important;
  box-shadow: none !important;
}
#step-edit .editor-top-ribbon { grid-column: 1 / -1 !important; grid-row: 1 !important; border-bottom: 1px solid var(--af-line) !important; }
#step-edit .thumb-panel { grid-column: 1 !important; grid-row: 2 !important; padding: 10px 8px !important; border-right: 1px solid var(--af-line) !important; }
#step-edit .canvas-area { grid-column: 2 !important; grid-row: 2 !important; }
#step-edit .inspector { grid-column: 3 !important; grid-row: 2 !important; padding: 0 !important; border-left: 1px solid var(--af-line) !important; }
#step-edit .inspector > .panel-head { display: none !important; }

#step-edit .canvas-toolbar {
  height: 47px !important;
  max-height: 47px !important;
  padding: 7px 9px !important;
  gap: 7px !important;
  overflow-x: auto !important;
  background: var(--af-chrome) !important;
  backdrop-filter: none !important;
}
#step-edit .ribbon-group { min-height: 32px !important; gap: 5px !important; padding-right: 7px !important; border-right-color: var(--af-line) !important; }
#step-edit .ribbon-title { display: none !important; }
#step-edit .ribbon-tool,
#step-edit .ribbon-select,
#step-edit .ribbon-number,
#step-edit .ribbon-color,
#step-edit .ribbon-ai-actions .compact-btn {
  min-height: 30px !important;
  height: 30px !important;
  border-color: var(--af-line-strong) !important;
  border-radius: 6px !important;
  background: var(--af-panel) !important;
  color: var(--af-text) !important;
  box-shadow: none !important;
}
#step-edit .ribbon-tool.active { border-color: var(--af-accent) !important; background: var(--af-accent-soft) !important; color: var(--af-accent) !important; }
#step-edit .ribbon-ai-actions { margin-left: auto !important; }
#step-edit .ribbon-ai-actions .primary-btn { border-color: var(--af-accent) !important; background: var(--af-accent) !important; color: #fff !important; }

#step-edit .thumb-panel .panel-head { min-height: 34px !important; margin: 0 2px 7px !important; padding: 0 2px 7px !important; }
#step-edit .thumb-panel .panel-head h2 { font-size: 12px !important; }
.editor-left-tabs,
.inspector-view-tabs { min-height: 42px !important; gap: 3px !important; padding: 5px !important; border-bottom: 1px solid var(--af-line) !important; }
.editor-left-tabs button,
.inspector-view-tabs button {
  min-height: 31px !important;
  border-radius: 6px !important;
  color: var(--af-muted) !important;
  font-size: 10px !important;
}
.editor-left-tabs button.active,
.inspector-view-tabs button.active { background: var(--af-panel-strong) !important; color: var(--af-accent) !important; }
.editor-left-view { padding-top: 7px !important; }
#step-edit .thumbnail-list { gap: 8px !important; }
#step-edit .thumb { border-color: var(--af-line) !important; border-radius: 6px !important; background: var(--af-panel-soft) !important; }
#step-edit .thumb.active { border-color: var(--af-accent) !important; background: var(--af-accent-soft) !important; box-shadow: 0 0 0 1px var(--af-accent) !important; }

#step-edit .office-canvas-shell {
  height: 100% !important;
  min-height: 0 !important;
  grid-template-rows: 24px minmax(0, 1fr) 36px auto !important;
  background: #dddddf !important;
}
#step-edit .office-canvas-body,
#step-edit .slide-stage {
  min-width: 0 !important;
  min-height: 0 !important;
  background-color: #e7e7e9 !important;
  background-image: linear-gradient(rgba(50, 50, 52, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(50, 50, 52, 0.055) 1px, transparent 1px) !important;
}
:root[data-theme="dark"] #step-edit .office-canvas-shell { background: #111112 !important; }
:root[data-theme="dark"] #step-edit .office-canvas-body,
:root[data-theme="dark"] #step-edit .slide-stage {
  background-color: #171718 !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) !important;
}
#step-edit .slide-pasteboard::after { border-color: color-mix(in srgb, var(--af-faint) 15%, transparent) !important; border-radius: 4px !important; }
#step-edit .slide-canvas { border: 1px solid rgba(0, 0, 0, 0.16) !important; border-radius: 2px !important; box-shadow: 0 18px 46px rgba(0, 0, 0, 0.2) !important; }
:root[data-theme="dark"] #step-edit .slide-canvas { border-color: rgba(255, 255, 255, 0.15) !important; box-shadow: 0 22px 54px rgba(0, 0, 0, 0.56) !important; }
#step-edit .office-ruler,
#step-edit .office-status-bar,
#step-edit .editor-notes-dock,
#step-edit .speaker-notes-panel { border-color: var(--af-line) !important; background: var(--af-chrome) !important; color: var(--af-muted) !important; }
#step-edit .office-status-bar { min-height: 36px !important; }
#step-edit .status-bar-btn { border-radius: 5px !important; }
#step-edit .status-bar-btn:hover:not(:disabled),
#step-edit .status-bar-btn.active { background: var(--af-panel-strong) !important; color: var(--af-accent) !important; }

.inspector-assistant-view { height: calc(100% - 54px) !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; }
.assistant-drawer.embedded {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  background: var(--af-panel) !important;
  box-shadow: none !important;
}
.assistant-drawer.embedded #assistantCloseBtn { display: none !important; }
.assistant-drawer:not(.embedded) {
  top: var(--af-topbar-height) !important;
  bottom: 0 !important;
  width: min(440px, calc(100vw - 24px)) !important;
  border-left: 1px solid var(--af-line) !important;
  background: var(--af-panel) !important;
  box-shadow: var(--af-shadow) !important;
}
.assistant-header { min-height: 54px !important; padding: 9px 11px 9px 13px !important; border-bottom-color: var(--af-line) !important; }
.assistant-mark { width: 30px !important; height: 30px !important; flex-basis: 30px !important; border-radius: 7px !important; background: #173f35 !important; color: #f0cc7a !important; }
.assistant-heading h2 { color: var(--af-text) !important; font-size: 13px !important; }
.assistant-heading p { color: var(--af-faint) !important; font-size: 9px !important; }
.assistant-icon-btn { width: 30px !important; height: 30px !important; border-radius: 6px !important; color: var(--af-muted) !important; }
.assistant-icon-btn:hover { background: var(--af-panel-strong) !important; color: var(--af-text) !important; }
.assistant-context { min-height: 38px !important; padding: 6px 12px !important; border-bottom-color: var(--af-line) !important; }
.assistant-context-chip { min-height: 23px !important; padding: 0 7px !important; border-color: var(--af-line) !important; border-radius: 5px !important; background: var(--af-panel-soft) !important; color: var(--af-muted) !important; font-size: 9px !important; }
.assistant-messages { padding: 15px 13px 10px !important; }
.assistant-message { margin-bottom: 15px !important; }
.assistant-message-content { max-width: 94% !important; color: var(--af-text) !important; font-size: 12px !important; line-height: 1.62 !important; }
.assistant-message.user .assistant-message-content {
  padding: 9px 10px !important;
  border: 1px solid color-mix(in srgb, var(--af-accent) 24%, var(--af-line)) !important;
  border-radius: 7px !important;
  background: var(--af-accent-soft) !important;
  color: var(--af-text) !important;
}
.assistant-message.assistant .assistant-message-content { padding-left: 10px !important; border-left: 2px solid var(--af-gold) !important; }
.assistant-message.result .assistant-message-content { padding-left: 10px !important; border-left: 2px solid var(--af-accent) !important; color: var(--af-muted) !important; }
.assistant-thinking { color: var(--af-muted) !important; }
.assistant-suggestions { min-height: 42px !important; padding: 6px 12px !important; border-top-color: var(--af-line) !important; }
.assistant-suggestion { min-height: 28px !important; border-color: var(--af-line) !important; border-radius: 6px !important; background: var(--af-panel-soft) !important; color: var(--af-muted) !important; }
.assistant-suggestion:hover:not(:disabled) { border-color: var(--af-accent) !important; color: var(--af-accent) !important; }
.assistant-attachment-toolbar { padding: 6px 12px !important; border-top-color: var(--af-line) !important; }
.assistant-attachment-toolbar select { border-color: var(--af-line) !important; border-radius: 6px !important; background: var(--af-panel-soft) !important; color: var(--af-text) !important; }
.assistant-composer {
  grid-template-columns: minmax(0, 1fr) 34px !important;
  gap: 7px !important;
  margin: 0 12px !important;
  padding: 8px 8px 8px 10px !important;
  border: 1px solid var(--af-line-strong) !important;
  border-radius: 8px !important;
  background: var(--af-panel-soft) !important;
}
.assistant-composer:focus-within { border-color: var(--af-accent) !important; box-shadow: 0 0 0 3px var(--af-accent-soft) !important; }
.assistant-composer textarea { color: var(--af-text) !important; font-size: 12px !important; }
.assistant-send-btn { width: 34px !important; height: 34px !important; border-radius: 6px !important; background: var(--af-accent) !important; color: #fff !important; }
.assistant-send-btn:disabled { background: var(--af-panel-strong) !important; color: var(--af-faint) !important; }
.assistant-composer-hint { margin: 5px 12px 8px !important; color: var(--af-faint) !important; }
.assistant-action-preview { border-color: var(--af-line-strong) !important; border-radius: 7px !important; background: var(--af-panel-soft) !important; }

.editor-panel-resizer { z-index: 80 !important; }
.editor-panel-resizer button { border-radius: 6px !important; background: var(--af-panel) !important; color: var(--af-muted) !important; }
.editor-delivery-drawer { top: var(--af-topbar-height) !important; border-left-color: var(--af-line) !important; background: var(--af-panel) !important; }
#toast,
.generation-progress,
.floating-editor-tools,
.control-tooltip { border-color: var(--af-line) !important; border-radius: 7px !important; background: var(--af-panel) !important; color: var(--af-text) !important; box-shadow: var(--af-shadow) !important; }

@media (max-width: 1180px) {
  :root { --af-left-width: 176px; --af-assistant-width: 340px; }
  .brand-copy h1 span,
  #apiStatus { display: none !important; }
}

@media (max-width: 980px) {
  body { overflow: auto !important; }
  .app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: var(--af-topbar-height) minmax(0, 1fr) 58px !important;
  }
  .topbar { grid-column: 1 !important; }
  .rail {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 900 !important;
    width: 100% !important;
    height: 58px !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    padding: 4px 6px !important;
    border: 0 !important;
    border-top: 1px solid var(--af-line) !important;
    background: color-mix(in srgb, var(--af-chrome) 96%, transparent) !important;
    backdrop-filter: blur(18px) !important;
  }
  .rail-item {
    width: auto !important;
    min-width: 48px !important;
    height: 50px !important;
    min-height: 50px !important;
    flex: 1 1 0 !important;
    margin: 0 !important;
  }
  .rail-item strong { display: none !important; }
  .rail-item[data-step="tools"] { margin-top: 0 !important; }
  .workspace { grid-column: 1 !important; padding-bottom: 58px !important; overflow: auto !important; }
  .workspace:has(#step-edit:not(.hidden)) { padding-bottom: 58px !important; overflow: auto !important; }
  #step-edit.editor-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 48px 380px minmax(520px, 68vh) auto !important;
    height: auto !important;
    min-height: calc(100dvh - var(--af-topbar-height) - 58px) !important;
    overflow: visible !important;
  }
  #step-edit .editor-top-ribbon { grid-column: 1 !important; grid-row: 1 !important; }
  #step-edit .inspector { grid-column: 1 !important; grid-row: 2 !important; height: 380px !important; border: 0 !important; border-bottom: 1px solid var(--af-line) !important; }
  #step-edit .canvas-area { grid-column: 1 !important; grid-row: 3 !important; min-height: 520px !important; }
  #step-edit .thumb-panel { grid-column: 1 !important; grid-row: 4 !important; border: 0 !important; border-top: 1px solid var(--af-line) !important; }
  #step-edit .thumbnail-list { display: flex !important; overflow-x: auto !important; overflow-y: hidden !important; }
  #step-edit .thumb { flex: 0 0 144px !important; }
  #step-edit .office-canvas-shell { height: min(68vh, 680px) !important; min-height: 520px !important; }
  .inspector-assistant-view { height: 338px !important; }
  .assistant-drawer.embedded { min-height: 0 !important; }
  .editor-panel-resizer { display: none !important; }
}

@media (max-width: 640px) {
  .topbar { padding-inline: 9px !important; }
  .brand-copy h1 span,
  .brand-copy p,
  #licensePoints,
  #apiStatus,
  #saveState,
  #themeToggleBtn,
  #saveDeckBtn { display: none !important; }
  .top-actions { margin-left: auto !important; }
  .flow-panel,
  #step-create,
  #step-tools,
  #step-imageppt,
  #step-social { width: calc(100% - 16px) !important; margin: 8px auto !important; padding: 14px !important; }
  #step-edit .canvas-toolbar { padding-inline: 6px !important; }
  #step-edit .ribbon-group:nth-of-type(2),
  #step-edit .ribbon-group:nth-of-type(4) { display: none !important; }
  #step-edit .ribbon-ai-actions .compact-btn span { display: none !important; }
  .assistant-drawer:not(.embedded) { width: 100% !important; }
  .assistant-message-content { max-width: 98% !important; }
}

/* Floating conversational assistant */
.app-shell {
  grid-template-areas: "topbar" "workspace" !important;
  grid-template-columns: minmax(0, 1fr) !important;
}
.assistant-workspace { display: none !important; }
.assistant-backdrop { display: none !important; }
.assistant-drawer:not(.embedded) {
  position: fixed !important;
  z-index: 1500 !important;
  inset: auto !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto auto auto auto !important;
  overflow: hidden !important;
  border: 1px solid var(--v2-line-strong) !important;
  border-radius: 8px !important;
  background: var(--v2-panel) !important;
  box-shadow: 0 18px 50px rgba(17, 24, 39, .24) !important;
  transform: none !important;
  transition: opacity .16s ease, box-shadow .16s ease !important;
}
.assistant-drawer:not(.embedded):not(.open) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.assistant-drawer:not(.embedded).open {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#assistantDrawer > .assistant-header { grid-row: 1; }
#assistantDrawer > .assistant-context { grid-row: 2; }
#assistantDrawer > .assistant-tasks { grid-row: 3; }
#assistantDrawer > .assistant-recommendations { grid-row: 4; }
#assistantDrawer > .assistant-service-notice { grid-row: 5; }
#assistantDrawer > .assistant-messages { grid-row: 6; }
#assistantDrawer > .assistant-suggestions { grid-row: 7; }
#assistantDrawer > .assistant-attachments { grid-row: 8; }
#assistantDrawer > .assistant-composer { grid-row: 9; }
#assistantDrawer > .assistant-composer-hint { grid-row: 10; }
.assistant-drawer.is-moving,
.assistant-drawer.is-resizing { transition: none !important; user-select: none; }
.assistant-header { cursor: grab; }
.assistant-drawer.is-moving .assistant-header { cursor: grabbing; }
.assistant-header-actions { display: flex; align-items: center; gap: 3px; }
.assistant-float-launcher {
  position: fixed;
  z-index: 1490;
  right: 20px;
  bottom: 20px;
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--v2-green) 38%, var(--v2-line));
  border-radius: 8px;
  background: var(--v2-green);
  color: #fff;
  box-shadow: 0 12px 32px rgba(17, 24, 39, .22);
}
.assistant-float-launcher svg { width: 21px; height: 21px; }
.assistant-resize-handle {
  position: absolute;
  z-index: 12;
  padding: 0;
  border: 0;
  background: transparent;
}
.assistant-resize-handle.edge-n,
.assistant-resize-handle.edge-s { right: 18px; left: 18px; height: 8px; cursor: ns-resize; }
.assistant-resize-handle.edge-n { top: 0; }
.assistant-resize-handle.edge-s { bottom: 0; }
.assistant-resize-handle.edge-e,
.assistant-resize-handle.edge-w { top: 18px; bottom: 18px; width: 8px; cursor: ew-resize; }
.assistant-resize-handle.edge-e { right: 0; }
.assistant-resize-handle.edge-w { left: 0; }
.assistant-resize-handle.edge-ne,
.assistant-resize-handle.edge-se,
.assistant-resize-handle.edge-sw,
.assistant-resize-handle.edge-nw { width: 22px; height: 22px; }
.assistant-resize-handle.edge-ne { top: 0; right: 0; cursor: nesw-resize; }
.assistant-resize-handle.edge-se {
  right: 0;
  bottom: 0;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 0 48%, var(--v2-faint) 49% 54%, transparent 55% 66%, var(--v2-faint) 67% 72%, transparent 73%);
}
.assistant-resize-handle.edge-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.assistant-resize-handle.edge-nw { top: 0; left: 0; cursor: nwse-resize; }
.assistant-recommendations {
  display: grid;
  gap: 7px;
  max-height: 260px;
  padding: 9px 11px;
  overflow: auto;
  border-bottom: 1px solid var(--v2-line);
  background: var(--v2-panel-soft);
}
.assistant-recommendations > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.assistant-recommendations > header > span { display: grid; gap: 2px; }
.assistant-recommendations > header strong { color: var(--v2-text); font-size: 10px; }
.assistant-recommendations > header small { color: var(--v2-faint); font-size: 8px; }
.assistant-recommendations > header div { display: flex; gap: 4px; }
.assistant-recommendations button { min-height: 26px; padding: 0 7px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel); color: var(--v2-muted); font-size: 8px; }
.assistant-recommendation-list { display: grid; gap: 6px; }
.assistant-recommendation-list article { display: grid; gap: 5px; padding: 8px; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-panel); }
.assistant-recommendation-list article > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.assistant-recommendation-list article strong { color: var(--v2-text); font-size: 10px; }
.assistant-recommendation-list article span { color: var(--v2-green); font-size: 8px; white-space: nowrap; }
.assistant-recommendation-list article p { margin: 0; color: var(--v2-muted); font-size: 9px; line-height: 1.45; }
.assistant-recommendation-list footer { display: flex; flex-wrap: wrap; gap: 5px; }
.assistant-recommendation-list button.primary { border-color: var(--v2-green); background: var(--v2-green); color: #fff; }
.assistant-turn-badge { display: inline-flex; margin: 0 6px 4px 0; padding: 2px 5px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel-soft); color: var(--v2-green); font-size: 8px; vertical-align: middle; }
.assistant-message-sources { display: grid; gap: 4px; margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--v2-line); }
.assistant-message-sources > strong { color: var(--v2-muted); font-size: 8px; }
.assistant-message-sources a { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--v2-accent); font-size: 9px; text-decoration: none; }
.assistant-message-sources a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assistant-message-sources a small { color: var(--v2-faint); font-size: 8px; white-space: nowrap; }
.assistant-attachment-chip button { min-height: 20px; padding: 0 5px; border: 0; background: transparent; color: var(--v2-accent); font-size: 8px; }
.assistant-preference-toggle { grid-template-columns: auto minmax(0, 1fr) !important; align-items: center; }
.assistant-preference-toggle input { width: 16px !important; min-height: 16px !important; }
.assistant-preferences-panel textarea { width: 100%; resize: vertical; padding: 8px 9px; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-panel-soft); color: var(--v2-text); font-size: 10px; }

.assistant-redaction-dialog {
  width: min(920px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--v2-line-strong);
  border-radius: 8px;
  background: var(--v2-panel);
  color: var(--v2-text);
  box-shadow: 0 22px 64px rgba(20, 24, 28, 0.24);
}
.assistant-redaction-dialog::backdrop { background: rgba(20, 24, 28, 0.52); }
.assistant-redaction-dialog > header,
.assistant-redaction-dialog > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.assistant-redaction-dialog > header { border-bottom: 1px solid var(--v2-line); }
.assistant-redaction-dialog > header > div { display: grid; gap: 3px; }
.assistant-redaction-dialog > header strong { font-size: 13px; }
.assistant-redaction-dialog > header span { color: var(--v2-muted); font-size: 10px; line-height: 1.45; }
.assistant-redaction-dialog > footer { justify-content: flex-end; border-top: 1px solid var(--v2-line); }
.assistant-redaction-dialog > footer button { min-height: 34px; padding: 0 12px; border: 1px solid var(--v2-line); border-radius: 6px; font-size: 11px; }
.assistant-redaction-dialog > footer .ghost-btn { background: transparent; color: var(--v2-muted); }
.assistant-redaction-dialog > footer .primary-btn { border-color: var(--v2-green); background: var(--v2-green); color: #fff; }
.assistant-redaction-dialog > footer button:disabled { cursor: wait; opacity: 0.65; }
.assistant-redaction-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: min(68vh, 720px);
  min-height: 280px;
  overflow: hidden;
  background: #202326;
}
.assistant-redaction-stage img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }
.assistant-redaction-overlay { position: absolute; touch-action: none; cursor: crosshair; }
.assistant-redaction-overlay > i { position: absolute; display: block; border: 1px solid rgba(255, 255, 255, 0.95); background: rgba(23, 25, 28, 0.84); pointer-events: none; }

.assistant-capture-dialog {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--v2-text);
  box-shadow: none;
}
.assistant-capture-dialog::backdrop { background: rgba(0, 0, 0, .01); }
.assistant-capture-stage { position: relative; display: grid; place-items: center; width: 100vw; height: 100vh; overflow: hidden; background: #111315; }
.assistant-capture-stage > img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; pointer-events: none; }
.assistant-capture-overlay { position: absolute; touch-action: none; cursor: crosshair; }
.assistant-capture-overlay::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .05); pointer-events: none; }
.assistant-capture-selection {
  position: absolute;
  display: block;
  border: 2px solid #2f91ff;
  background: transparent;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .48);
  pointer-events: none;
}
.assistant-capture-selection::before,
.assistant-capture-selection::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; border: 2px solid #2f91ff; pointer-events: none; }
.assistant-capture-selection::before { left: -5px; top: -5px; }
.assistant-capture-selection::after { right: -5px; bottom: -5px; }
.assistant-capture-selection > canvas { display: block; width: 100%; height: 100%; cursor: crosshair; pointer-events: auto; }
.assistant-capture-guide {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 6px;
  background: rgba(23, 25, 28, .94);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  transform: translateX(-50%);
  pointer-events: none;
}
.assistant-capture-guide svg { width: 16px; height: 16px; }
.assistant-capture-guide span { font-size: 12px; letter-spacing: 0; white-space: nowrap; }
.assistant-capture-toolbar {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 52px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 7px;
  background: rgba(30, 32, 35, .97);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .34);
}
.assistant-capture-tool-group { display: flex; align-items: center; gap: 4px; }
.assistant-capture-toolbar button,
.assistant-capture-close {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.assistant-capture-toolbar button:hover,
.assistant-capture-toolbar button:focus-visible,
.assistant-capture-close:hover,
.assistant-capture-close:focus-visible { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .1); outline: none; }
.assistant-capture-toolbar button.active { border-color: rgba(47, 145, 255, .72); background: rgba(47, 145, 255, .18); color: #72b8ff; }
.assistant-capture-toolbar button:disabled { cursor: not-allowed; opacity: .35; }
.assistant-capture-toolbar button svg,
.assistant-capture-close svg { width: 24px; height: 24px; stroke-width: 2; }
.assistant-capture-toolbar .assistant-capture-confirm { color: #4ea4ff; }
.assistant-capture-toolbar .assistant-capture-confirm:not(:disabled) { background: rgba(47, 145, 255, .14); }
.assistant-capture-toolbar-separator { width: 1px; height: 28px; margin: 0 3px; background: rgba(255, 255, 255, .18); }
.assistant-capture-close { position: fixed; top: 16px; right: 16px; z-index: 7; background: rgba(23, 25, 28, .92); }
.assistant-capture-text-input {
  position: absolute;
  z-index: 5;
  width: min(260px, calc(100% - 12px));
  min-width: 120px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid #2f91ff;
  border-radius: 4px;
  background: rgba(255, 255, 255, .98);
  color: #111;
  font: 600 16px/1.2 "Noto Sans SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
  outline: none;
}

@media (max-width: 767.98px) {
  .assistant-drawer:not(.embedded),
  .assistant-drawer:not(.embedded).assistant-expanded {
    top: var(--v2-topbar-height) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - var(--v2-topbar-height)) !important;
    border-width: 1px 0 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }
  .assistant-header { cursor: default; }
  .assistant-resize-handle,
  #assistantExpandBtn { display: none !important; }
  .assistant-recommendations { max-height: 220px; }
  .assistant-redaction-dialog { width: 100vw; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .assistant-redaction-stage { height: calc(100dvh - 132px); min-height: 0; }
  .assistant-redaction-dialog > header span { max-width: 76vw; }
  .assistant-capture-dialog { height: 100dvh; }
  .assistant-capture-stage { height: 100dvh; min-height: 0; }
}

/* Desktop workflow V4 ---------------------------------------------------- */
.editor-workflow-action[data-workflow-count]::after {
  content: attr(data-workflow-count);
  min-width: 26px;
  margin-left: 3px;
  padding: 1px 5px;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  color: var(--v2-faint);
  background: var(--v2-panel);
  font-size: 9px;
  line-height: 1.35;
  text-align: center;
}

#step-edit .copy-workflow-actions:not(.hidden) {
  display: flex !important;
  min-width: 0;
  margin-left: auto;
  padding-left: 8px;
  border-left: 1px solid var(--v2-line);
}

.copy-workflow-action-status {
  max-width: 240px;
  overflow: hidden;
  color: var(--v2-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#step-edit .copy-workflow-actions .compact-btn {
  min-height: 30px !important;
  height: 30px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
}

.style-direction-control {
  display: grid;
  grid-template-columns: auto minmax(120px, auto) minmax(220px, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.style-direction-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--v2-line);
  border-radius: 6px;
  background: var(--v2-panel-soft);
}

.style-direction-segmented button {
  min-height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 4px;
  color: var(--v2-muted);
  background: transparent;
}

.style-direction-segmented button.active {
  color: #fff;
  background: var(--v2-blue);
}

#styleDirectionCountField {
  display: grid;
  grid-template-columns: auto 64px;
  gap: 7px;
  align-items: center;
  margin: 0;
}

#styleDirectionCountField input { width: 64px; }
.style-direction-summary { display: grid; min-width: 0; gap: 2px; }
.style-direction-summary strong { color: var(--v2-text); font-size: 11px; }
.style-direction-summary span,
.style-direction-summary small { overflow: hidden; color: var(--v2-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.design-candidate-panel:empty { display: none; }
.design-candidate-panel {
  display: grid;
  gap: 8px;
  margin: 8px 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--v2-blue) 38%, var(--v2-line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--v2-blue-soft) 64%, var(--v2-panel));
}
.design-candidate-head,
.design-candidate-compare > div,
.design-version-row,
.editable-version-history > div > div {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: space-between;
}
.design-candidate-head > span { display: inline-flex; gap: 5px; align-items: center; color: var(--v2-text); font-size: 10px; }
.design-candidate-head svg { width: 14px; height: 14px; }
.design-candidate-head small,
.design-version-row span { color: var(--v2-faint); font-size: 9px; }
.design-candidate-compare { display: grid; gap: 7px; }
.design-candidate-compare.stale { border-left: 3px solid var(--v2-amber); padding-left: 7px; }
.design-candidate-actions,
.editable-candidate-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.design-version-history summary,
.editable-version-history summary { color: var(--v2-muted); font-size: 9px; cursor: pointer; }
.design-version-history > div,
.editable-version-history > div { display: grid; gap: 5px; padding-top: 6px; }

.design-compare-canvas,
.editable-compare-canvas {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 1280px) !important;
  aspect-ratio: auto !important;
  padding: 12px;
  background: var(--v2-bg) !important;
}
.design-compare-canvas figure,
.editable-compare-canvas figure { position: relative; display: grid; min-width: 0; gap: 6px; margin: 0; }
.design-compare-canvas figcaption,
.editable-compare-canvas figcaption { color: var(--v2-muted); font-size: 10px; }
.design-compare-canvas figure > img,
.editable-compare-canvas .editable-canvas-mini { width: 100%; aspect-ratio: var(--slide-aspect, 16 / 9); object-fit: contain; background: #fff; box-shadow: 0 8px 28px rgba(20, 24, 28, .16); }
.design-compare-canvas .canvas-preview-trigger { top: 27px; }
.workflow-canvas-overlay.candidate { grid-column: 1 / -1; position: static; min-height: 44px; }

.workflow-thumb-state.pending_confirmation,
.design-status-badge.pending_confirmation,
.editable-page-state.pending_confirmation { color: var(--v2-amber); background: color-mix(in srgb, var(--v2-amber) 12%, var(--v2-panel)); }

.social-v4-stages {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1px !important;
  padding: 1px !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 7px !important;
  background: var(--v2-line) !important;
}
.social-v4-stages > div { min-width: 0; border: 0 !important; border-radius: 0 !important; background: var(--v2-panel) !important; }
.social-v4-stages strong { display: block; color: var(--v2-text); font-size: 11px; }
.social-v4-stages span { color: var(--v2-muted); font-size: 9px; }

#editorWorkflowWorkspace .social-publish-layout {
  display: grid !important;
  grid-template-columns: minmax(250px, 300px) minmax(310px, 360px) minmax(440px, 1fr) !important;
  gap: 12px !important;
  align-items: start;
}
#editorWorkflowWorkspace .social-workflow-column { display: contents !important; }
#editorWorkflowWorkspace .social-v4-materials { grid-column: 1; grid-row: 1 / span 20; }
#editorWorkflowWorkspace .social-v4-platforms { grid-column: 2; grid-row: 1; }
#editorWorkflowWorkspace .social-v4-plan-config { grid-column: 2; grid-row: 2; }
#editorWorkflowWorkspace .social-workflow-column > .social-step-card:not(.social-v4-materials):not(.social-v4-platforms):not(.social-v4-plan-config) { grid-column: 2; }
#editorWorkflowWorkspace .social-v4-results { grid-column: 3; grid-row: 1 / span 20; min-width: 0; }
#editorWorkflowWorkspace .social-step-card {
  min-width: 0;
  margin: 0 !important;
  padding: 12px !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 7px !important;
  background: var(--v2-panel) !important;
  box-shadow: none !important;
}
#editorWorkflowWorkspace .social-step-head > span { display: none; }
#editorWorkflowWorkspace .social-step-head strong { font-size: 12px; }
#editorWorkflowWorkspace .social-step-head p { margin-top: 2px; color: var(--v2-muted); font-size: 9px; }
#editorWorkflowWorkspace .social-result-section { padding: 12px 0 !important; border: 0 !important; border-top: 1px solid var(--v2-line) !important; border-radius: 0 !important; background: transparent !important; }

.social-source-type-field { display: grid; min-width: 142px; gap: 3px; }
.social-source-type-field span { color: var(--v2-muted); font-size: 9px; }
.social-platform-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  max-height: 238px;
  margin-top: 10px;
  padding-right: 3px;
  overflow-y: auto;
}
.social-platform-choice { display: block; min-width: 0; }
.social-platform-choice input { position: absolute; opacity: 0; pointer-events: none; }
.social-platform-choice > span {
  display: flex;
  min-height: 38px;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px;
  border: 1px solid var(--v2-line);
  border-radius: 6px;
  color: var(--v2-muted);
  background: var(--v2-panel-soft);
  cursor: pointer;
}
.social-platform-choice.selected > span { border-color: var(--v2-blue); color: var(--v2-blue); background: var(--v2-blue-soft); }
.social-platform-choice strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.social-platform-choice small { flex: 0 0 auto; color: var(--v2-faint); font-size: 8px; }

.social-publish-plan-list { display: grid; gap: 6px; margin-top: 10px; }
.social-publish-plan { display: grid; gap: 3px; padding: 8px; border-left: 3px solid var(--v2-green); background: var(--v2-panel-soft); }
.social-publish-plan.stale { border-left-color: var(--v2-amber); }
.social-publish-plan header { display: flex; gap: 6px; align-items: center; justify-content: space-between; }
.social-publish-plan header strong { color: var(--v2-text); font-size: 10px; }
.social-publish-plan header em { color: var(--v2-green); font-size: 8px; font-style: normal; }
.social-publish-plan.stale header em { color: var(--v2-amber); }
.social-publish-plan > span,
.social-publish-plan > small { color: var(--v2-faint); font-size: 8px; }
.social-publish-plan p { margin: 0; color: var(--v2-muted); font-size: 9px; line-height: 1.45; }

.social-result-platform-tabs { display: flex; gap: 4px; margin: 8px 0 12px; overflow-x: auto; }
.social-result-platform-tabs button { display: grid; flex: 0 0 auto; gap: 1px; min-height: 36px; padding: 5px 9px; border: 1px solid var(--v2-line); border-radius: 6px; color: var(--v2-muted); background: var(--v2-panel-soft); }
.social-result-platform-tabs button.active { border-color: var(--v2-blue); color: var(--v2-blue); background: var(--v2-blue-soft); }
.social-result-platform-tabs span { color: var(--v2-faint); font-size: 8px; }

.assistant-generated-image-grid { gap: 10px !important; padding: 0 !important; }
.assistant-generated-image-card { gap: 5px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.assistant-generated-image-preview,
.assistant-generated-image-card.selected .assistant-generated-image-preview {
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.assistant-generated-image-preview:hover { border: 0 !important; opacity: .92; }
.assistant-generated-image-preview img { border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.assistant-artifact-variant-select { padding: 4px 0 !important; background: transparent !important; }

@media (max-width: 1440px) and (min-width: 1024px) {
  #editorWorkflowWorkspace .social-publish-layout {
    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) !important;
  }
  #editorWorkflowWorkspace .social-v4-materials { grid-column: 1; grid-row: 1 / span 20; }
  #editorWorkflowWorkspace .social-v4-platforms,
  #editorWorkflowWorkspace .social-v4-plan-config,
  #editorWorkflowWorkspace .social-workflow-column > .social-step-card:not(.social-v4-materials) { grid-column: 2; }
  #editorWorkflowWorkspace .social-v4-results { grid-column: 1 / -1; grid-row: 21; }
  .copy-workflow-action-status { display: none; }
}

/* Final desktop polish for the design preview: keep the inspector readable and
   keep the floating assistant outside the inspector's hit area. */
@media (min-width: 1024px) {
  body:has(#step-edit.design-preview-mode) .assistant-float-launcher {
    right: calc(var(--editor-right-width, var(--v2-inspector-width)) + 18px) !important;
    bottom: 18px !important;
  }

  #step-edit.design-preview-mode > .inspector {
    scrollbar-gutter: stable;
  }

  #step-edit.design-preview-mode .design-preview-inspector {
    gap: 10px;
    padding: 12px;
  }

  #step-edit.design-preview-mode .design-preview-inspector header p,
  #step-edit.design-preview-mode .design-preview-safety,
  #step-edit.design-preview-mode .design-region-selection-status {
    font-size: 10px;
    line-height: 1.5;
  }

  #step-edit.design-preview-mode .design-preview-inspector button {
    min-height: 34px;
  }

  #step-edit.design-preview-mode .design-preview-inspector button:disabled {
    opacity: .62;
    color: var(--v2-muted);
  }
}

/* Conversation design hub: a clear desktop task center that keeps the
   message stream primary while making advanced tools discoverable. */
.assistant-drawer:not(.embedded),
.assistant-drawer.embedded {
  grid-template-rows: auto auto auto auto auto auto auto auto auto minmax(180px, 1fr) auto auto auto auto auto auto !important;
}
#assistantDrawer > .assistant-header { grid-row: 1 !important; }
#assistantDrawer > .assistant-side-nav { grid-row: 2 !important; }
#assistantDrawer > .assistant-context { grid-row: 3 !important; }
#assistantDrawer > .assistant-brief-summary { grid-row: 4 !important; }
#assistantDrawer > .assistant-design-hub { grid-row: 5 !important; }
#assistantDrawer > .assistant-tasks { grid-row: 6 !important; }
#assistantDrawer > .assistant-pdf-redesign { grid-row: 7 !important; }
#assistantDrawer > .assistant-recommendations { grid-row: 8 !important; }
#assistantDrawer > .assistant-service-notice { grid-row: 9 !important; }
#assistantDrawer > .assistant-voice-status { grid-row: 10 !important; }
#assistantDrawer > .assistant-execution-controls { grid-row: 11 !important; }
#assistantDrawer > .assistant-image-generation-progress { grid-row: 12 !important; }
#assistantDrawer > .assistant-messages { grid-row: 13 !important; }
#assistantDrawer > .assistant-new-result { grid-row: 13 !important; }
#assistantDrawer > .assistant-brief-actions { grid-row: 14 !important; }
#assistantDrawer > .assistant-suggestions { grid-row: 15 !important; }
#assistantDrawer > .assistant-attachments { grid-row: 16 !important; }
#assistantDrawer > .assistant-composer { grid-row: 17 !important; }
#assistantDrawer > .assistant-composer-hint { grid-row: 18 !important; }

.assistant-design-hub {
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--v2-line, #d7dee8);
  background: var(--v2-panel-soft, #f3f6fa) !important;
  color: var(--v2-text, #162033);
}
.assistant-design-hub-head,
.assistant-design-hub-head > div,
.assistant-copy-mode,
.assistant-design-hub-meta,
.assistant-quick-tools-btn {
  display: flex;
  min-width: 0;
  align-items: center;
}
.assistant-design-hub-head { justify-content: space-between; gap: 8px; }
.assistant-design-hub-head > div { gap: 8px; }
.assistant-design-hub-head > div > svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--v2-blue, #2563eb); }
.assistant-design-hub-head span { display: grid; min-width: 0; gap: 2px; }
.assistant-design-hub-head strong { color: var(--v2-text, #162033); font-size: 11px; }
.assistant-design-hub-head small { overflow: hidden; color: var(--v2-muted, #64748b); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-design-hub-body { display: grid; gap: 8px; margin-top: 8px; }
.assistant-design-hub-body.hidden { display: none !important; }
.assistant-copy-mode { gap: 6px; }
.assistant-control-label { flex: 0 0 auto; color: var(--v2-muted, #64748b); font-size: 9px; }
.assistant-copy-mode-btn {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 5px 8px;
  border: 1px solid var(--v2-line, #d7dee8);
  border-radius: 6px;
  background: var(--v2-panel, #fff) !important;
  color: var(--v2-muted, #64748b);
  cursor: pointer;
  text-align: left;
}
.assistant-copy-mode-btn:hover { border-color: var(--v2-blue, #2563eb); }
.assistant-copy-mode-btn.active { border-color: var(--v2-blue, #2563eb); background: var(--neutral-accent-soft) !important; color: var(--v2-blue, #2563eb); }
.assistant-copy-mode-btn > svg { width: 16px; height: 16px; flex: 0 0 16px; }
.assistant-copy-mode-btn span { display: grid; min-width: 0; gap: 1px; }
.assistant-copy-mode-btn strong { overflow: hidden; color: var(--v2-text, #162033); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-copy-mode-btn small { overflow: hidden; color: var(--v2-faint, #94a3b8); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-design-hub-meta { gap: 5px; overflow: auto hidden; scrollbar-width: none; }
.assistant-design-hub-meta::-webkit-scrollbar { display: none; }
.assistant-design-hub-meta span { flex: 0 0 auto; padding: 3px 6px; border: 1px solid var(--v2-line, #d7dee8); border-radius: 4px; background: var(--v2-panel, #fff) !important; color: var(--v2-muted, #64748b); font-size: 8px; }
.assistant-quick-tools-wrap { position: relative; }
.assistant-quick-tools-btn { width: 100%; justify-content: center; gap: 5px; min-height: 30px; border: 1px solid var(--v2-line, #d7dee8); border-radius: 5px; background: var(--v2-panel, #fff) !important; color: var(--v2-text, #162033); font-size: 9px; cursor: pointer; }
.assistant-quick-tools-btn:hover { border-color: var(--v2-blue, #2563eb); color: var(--v2-blue, #2563eb); }
.assistant-quick-tools-btn > svg { width: 13px; height: 13px; }
.assistant-quick-tools-chevron { transition: transform .16s ease; }
.assistant-quick-tools-btn[aria-expanded="true"] .assistant-quick-tools-chevron { transform: rotate(180deg); }
.assistant-quick-tools-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 5px; padding: 6px; border: 1px solid var(--v2-line, #d7dee8); border-radius: 6px; background: var(--v2-panel, #fff) !important; box-shadow: 0 8px 18px rgba(15, 23, 42, .12); }
.assistant-quick-tools-panel.hidden { display: none !important; }
.assistant-quick-tools-panel button { display: flex; min-width: 0; align-items: center; gap: 5px; min-height: 34px; padding: 4px 5px; border: 1px solid var(--v2-line, #d7dee8); border-radius: 4px; background: var(--v2-panel-soft, #f3f6fa) !important; color: var(--v2-text, #162033); cursor: pointer; text-align: left; }
.assistant-quick-tools-panel button:hover { border-color: var(--v2-blue, #2563eb); background: var(--neutral-accent-soft) !important; }
.assistant-quick-tools-panel button > svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--v2-blue, #2563eb); }
.assistant-quick-tools-panel button span { display: grid; min-width: 0; gap: 1px; }
.assistant-quick-tools-panel button strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-quick-tools-panel button small { overflow: hidden; color: var(--v2-faint, #94a3b8); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }

/* The mascot is a title-bar companion, not a second content column. */
#assistantDrawer > .assistant-messages,
#assistantDrawer > .assistant-brief-actions,
#assistantDrawer > .assistant-suggestions { padding-right: 12px !important; }
.assistant-composer .assistant-ip-buddy { width: 58px !important; height: 64px !important; top: -58px !important; right: 12px !important; }
.assistant-composer .assistant-ip-buddy-status { width: 18px !important; height: 18px !important; border-width: 2px !important; }
.assistant-composer .assistant-ip-buddy-status svg { width: 10px !important; height: 10px !important; }

:root[data-theme="dark"] .assistant-design-hub { background: #11151b !important; color: #f8fafc; border-bottom-color: #2a3442; }
:root[data-theme="dark"] .assistant-design-hub-head strong,
:root[data-theme="dark"] .assistant-copy-mode-btn strong,
:root[data-theme="dark"] .assistant-quick-tools-panel button strong { color: #f8fafc; }
:root[data-theme="dark"] .assistant-design-hub-head small,
:root[data-theme="dark"] .assistant-control-label,
:root[data-theme="dark"] .assistant-copy-mode-btn small,
:root[data-theme="dark"] .assistant-design-hub-meta span,
:root[data-theme="dark"] .assistant-quick-tools-panel button small { color: #a8b3c2; }
:root[data-theme="dark"] .assistant-copy-mode-btn,
:root[data-theme="dark"] .assistant-design-hub-meta span,
:root[data-theme="dark"] .assistant-quick-tools-btn { border-color: #2a3442; background: #1a2029 !important; color: #dbe4ef; }
:root[data-theme="dark"] .assistant-copy-mode-btn.active,
:root[data-theme="dark"] .assistant-quick-tools-panel button:hover { background: #172d54 !important; }
:root[data-theme="dark"] .assistant-quick-tools-panel { border-color: #2a3442; background: #171c24 !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .34); }
:root[data-theme="dark"] .assistant-quick-tools-panel button { border-color: #2a3442; background: #202733 !important; color: #f8fafc; }

@media (min-width: 1024px) {
  .assistant-drawer:not(.embedded) { width: min(1040px, calc(100vw - 32px)) !important; }
  .assistant-side-nav { width: 210px !important; }
  #assistantDrawer > :not(.assistant-header):not(.assistant-side-nav) { margin-left: 210px !important; }
  #assistantDrawer > .assistant-side-nav { margin-left: 0 !important; }
  .assistant-design-hub { padding-inline: 14px; }
  .assistant-copy-mode-btn { min-height: 46px; }
}

html[data-client-platform="windows-desktop"] .mobile-sheet-btn {
  display: none !important;
}

/* Final ribbon clarity override. Keep these command controls frameless in
   dark and light themes while preserving readable blue action labels. */
#step-edit > .editor-top-ribbon #editorRibbon :is(#canvasZoomSelect, #addTextBtn, #addImageSelect, #aiDesignCurrentPageBtn, #openBatchDesignBtn) {
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
#step-edit > .editor-top-ribbon #editorRibbon :is(#aiDesignCurrentPageBtn, #openBatchDesignBtn) {
  color: var(--v2-blue, #1677ff) !important;
}

/* Floating chat: keep the composer anchored to the drawer bottom. The
   redesigned brief/tools area can grow and scroll, but must never push the
   voice and send controls outside the viewport. Embedded workbench assistants
   continue to use the normal grid flow below. */
@media (min-width: 768px) {
  #assistantDrawer:not(.embedded) {
    grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto minmax(120px, 1fr) auto auto 0 0 !important;
  }

  #assistantDrawer:not(.embedded) > .assistant-messages {
    min-height: 120px !important;
    overflow: auto !important;
    padding-bottom: 122px !important;
  }

  #assistantDrawer:not(.embedded) > .assistant-composer {
    position: absolute !important;
    z-index: 8 !important;
    right: 12px !important;
    bottom: 28px !important;
    left: 210px !important;
    width: auto !important;
    margin: 0 !important;
  }

  #assistantDrawer:not(.embedded) > .assistant-composer-hint {
    position: absolute !important;
    z-index: 8 !important;
    right: 12px !important;
    bottom: 6px !important;
    left: 210px !important;
    margin: 0 !important;
  }
}

/* Keep the conversation stream and composer usable in the fixed-height
   desktop assistant. Long brief details and tool lists scroll internally. */
#assistantPdfRedesignFileInput { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 1px !important; min-height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.assistant-brief-summary { max-height: 112px !important; overflow: auto !important; }
.assistant-brief-summary-details { max-height: 106px !important; }
.assistant-brief-summary-body { max-height: 68px !important; overflow: auto !important; }
.assistant-design-hub { max-height: 154px !important; overflow: auto !important; }
.assistant-design-hub-body { max-height: 126px !important; overflow: auto !important; }
.assistant-copy-mode-btn { min-height: 36px !important; }
.assistant-quick-tools-panel { max-height: 108px; overflow: auto; }
.assistant-messages { min-height: 120px !important; }

@container (max-width: 880px) {
  #step-edit .status-bar-summary #editorSelectionStatus,
  #step-edit .status-bar-summary #editorPrintStatus {
    display: none;
  }

  #step-edit .office-status-bar {
    grid-template-columns: minmax(0, 1fr) auto minmax(184px, auto) !important;
    gap: 4px !important;
  }

  #step-edit .status-bar-summary { gap: 5px; }
  #step-edit .status-bar-view-tools { padding-inline: 3px; }
  #step-edit .status-bar-zoom { gap: 2px; }
}

@media (max-width: 1023.98px) {
  body:has(#step-edit.design-preview-mode) .assistant-float-launcher {
    right: 18px !important;
    bottom: 150px !important;
  }
}

/* Preproject desktop polish V6: compact hierarchy and unframed work areas. */
@media (min-width: 981px) {
  #newProjectPanel[open] {
    background: color-mix(in srgb, var(--v2-bg) 72%, var(--v2-panel)) !important;
  }

  #newProjectPanel .new-document-head {
    min-height: 76px;
    grid-template-columns: minmax(340px, .85fr) minmax(0, 1.15fr) 36px;
    gap: 20px;
    padding: 11px clamp(28px, 3vw, 48px);
    background: var(--v2-panel);
    box-shadow: none;
    backdrop-filter: none;
  }

  #newProjectPanel .new-document-head > div {
    gap: 2px;
  }

  #newProjectPanel .new-document-head > div > span {
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: 9px;
    letter-spacing: 0;
  }

  #newProjectPanel .new-document-head h2 {
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: 0;
  }

  #newProjectPanel .new-document-head p {
    margin-top: 1px;
    font-size: 10px;
    line-height: 1.4;
  }

  #newProjectPanel .preproject-workflow-path {
    justify-content: flex-end;
    gap: 2px;
  }

  #newProjectPanel .preproject-workflow-path span {
    padding: 5px 6px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 650;
  }

  #newProjectPanel .preproject-workflow-path span.active {
    padding: 5px 8px;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v2-blue) 24%, transparent);
  }

  #newProjectPanel .preproject-workflow-path i {
    margin-inline: 1px;
    font-size: 8px;
    opacity: .5;
  }

  #newProjectPanel .new-document-head > .assistant-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 7px;
  }

  #newProjectPanel .preproject-project-panel {
    background: transparent;
  }

  #newProjectPanel .preproject-project-head {
    min-height: 58px;
    padding: 9px clamp(28px, 3vw, 48px);
    background: color-mix(in srgb, var(--v2-panel) 90%, var(--v2-bg));
  }

  #newProjectPanel .preproject-project-head > div:first-child {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 9px;
  }

  #newProjectPanel .preproject-project-head > div:first-child > span {
    flex: 0 0 auto;
    font-size: 9px;
  }

  #newProjectPanel .preproject-project-head > div:first-child > strong {
    flex: 0 0 auto;
    font-size: 13px;
    letter-spacing: 0;
  }

  #newProjectPanel .preproject-project-head > div:first-child > small {
    min-width: 0;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #newProjectPanel .preproject-project-actions {
    gap: 8px;
  }

  #newProjectPanel .preproject-target-control,
  #newProjectPanel #preprojectAddFilesBtn {
    min-height: 34px !important;
    border-radius: 7px !important;
  }

  #newProjectPanel .preproject-target-control {
    padding-left: 9px;
  }

  #newProjectPanel .preproject-target-control > span,
  #newProjectPanel .preproject-target-control select,
  #newProjectPanel #preprojectAddFilesBtn {
    font-size: 10px !important;
  }

  #newProjectPanel .preproject-target-control select {
    min-width: 66px;
    height: 32px;
  }

  #newProjectPanel .new-document-form {
    max-width: 1440px;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    gap: 14px;
    padding: 18px clamp(28px, 3vw, 48px) 28px;
  }

  #newProjectPanel .smart-project-brief {
    gap: 6px;
  }

  #newProjectPanel .smart-project-brief > span {
    font-size: 10px;
    font-weight: 700;
  }

  #newProjectPanel .smart-project-brief textarea {
    min-height: 112px;
    padding: 12px 13px;
    border-color: var(--v2-line);
    border-radius: 7px;
    background: color-mix(in srgb, var(--v2-panel) 96%, var(--v2-bg));
    font-size: 12px;
    line-height: 1.55;
    box-shadow: none;
  }

  #newProjectPanel .smart-project-detection {
    min-height: 112px;
    align-content: center;
    gap: 10px;
    padding: 14px 16px;
    border-color: var(--v2-line);
    border-radius: 7px;
    background: color-mix(in srgb, var(--v2-panel) 82%, var(--v2-bg));
    box-shadow: none;
  }

  #newProjectPanel .smart-detection-primary span {
    font-size: 10px;
  }

  #newProjectPanel .smart-detection-primary strong {
    font-size: 12px;
  }

  #newProjectPanel .smart-detection-tags span {
    padding: 4px 7px;
    border-radius: 5px;
    font-size: 9px;
  }

  #newProjectPanel .new-project-category-context {
    grid-template-columns: minmax(350px, .88fr) minmax(430px, 1.12fr);
    gap: 0 24px;
    padding: 4px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #newProjectPanel .new-project-category-head {
    align-items: center;
    margin-bottom: 18px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--v2-line);
  }

  #newProjectPanel .new-project-category-head h3 {
    font-size: 18px;
    line-height: 1.25;
  }

  #newProjectPanel .new-project-category-head p {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.45;
  }

  #newProjectPanel .new-project-category-head > i,
  #newProjectPanel .new-project-category-head > .fluent-icon-shell {
    width: 28px;
    height: 28px;
    padding: 6px;
    border: 1px solid var(--v2-line);
    border-radius: 7px;
    background: var(--v2-panel);
  }

  #newProjectPanel .design-workspace-config {
    padding: 0 24px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #newProjectPanel .new-project-category-fields {
    gap: 10px 12px;
    padding: 0 0 0 24px;
    border-left: 1px solid var(--v2-line);
  }

  #newProjectPanel .design-workspace-section-head {
    margin-bottom: 8px;
  }

  #newProjectPanel .design-workspace-section-head + .design-workspace-preset-grid {
    margin-bottom: 14px;
  }

  #newProjectPanel .design-workspace-preset-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  #newProjectPanel .design-workspace-preset {
    min-height: 56px;
    padding: 9px 10px;
    border-radius: 6px;
    box-shadow: none;
  }

  #newProjectPanel .design-workspace-preset.selected {
    box-shadow: inset 3px 0 var(--v2-blue);
  }

  #newProjectPanel .design-workspace-style-row {
    gap: 7px;
  }

  #newProjectPanel .design-workspace-style {
    width: 112px;
    min-width: 112px;
    border-radius: 6px;
  }

  #newProjectPanel .new-project-category-field input,
  #newProjectPanel .new-project-category-field select,
  #newProjectPanel .new-project-category-field textarea {
    min-height: 38px;
    border-radius: 6px !important;
    font-size: 11px;
  }

  #newProjectPanel .design-workspace-readiness,
  #newProjectPanel .design-workspace-summary {
    margin-top: 18px;
    padding: 16px 24px 0 0;
    border-top: 1px solid var(--v2-line);
    border-radius: 0;
    background: transparent;
  }

  #newProjectPanel .design-workspace-summary {
    padding-right: 0;
    padding-left: 24px;
    border-left: 1px solid var(--v2-line);
  }

  #newProjectPanel .design-workspace-readiness > header strong {
    font-size: 12px;
  }

  #newProjectPanel .design-workspace-readiness > header em {
    font-size: 20px;
  }

  #newProjectPanel .design-workspace-summary button {
    min-height: 34px;
    border-radius: 6px;
  }

  #newProjectPanel .new-project-category-output {
    margin-top: 18px;
    border-radius: 6px !important;
    background: color-mix(in srgb, var(--v2-panel) 82%, var(--v2-bg));
  }

  #newProjectPanel .preproject-project-panel > .new-project-actions {
    min-height: 60px;
    padding: 8px clamp(28px, 3vw, 48px);
    background: color-mix(in srgb, var(--v2-panel) 94%, var(--v2-bg));
    box-shadow: 0 -6px 18px rgb(15 23 42 / 5%);
    backdrop-filter: blur(12px);
  }

  #newProjectPanel .preproject-project-panel > .new-project-actions > button {
    min-height: 40px;
    padding-inline: 18px;
    border-radius: 7px;
    font-size: 11px;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--v2-blue) 18%, transparent);
  }
}

/* Preproject workspace V5: clearer hierarchy, denser desktop layout, and a
   calmer full-screen editing surface without reintroducing the assistant. */
#newProjectPanel[open] {
  background:
    radial-gradient(circle at 12% -12%, color-mix(in srgb, var(--v2-blue) 9%, transparent), transparent 34%),
    var(--v2-panel) !important;
}

#newProjectPanel .new-document-head {
  min-height: 88px;
  box-sizing: border-box;
  grid-template-columns: minmax(300px, .9fr) minmax(480px, 1.35fr) 40px;
  gap: clamp(18px, 2.4vw, 42px);
  padding: 16px clamp(22px, 3vw, 48px);
  border-bottom-color: color-mix(in srgb, var(--v2-line) 82%, transparent);
  background: color-mix(in srgb, var(--v2-panel) 88%, transparent);
  box-shadow: 0 8px 28px rgb(15 23 42 / 4%);
  backdrop-filter: blur(18px) saturate(125%);
}

#newProjectPanel .new-document-head > div { gap: 4px; }
#newProjectPanel .new-document-head > div > span {
  width: max-content;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--v2-blue) 10%, transparent);
  font-size: 10px;
  letter-spacing: .04em;
}
#newProjectPanel .new-document-head h2 { font-size: clamp(21px, 2vw, 27px); line-height: 1.22; letter-spacing: -.02em; }
#newProjectPanel .new-document-head p { max-width: 620px; font-size: 12px; line-height: 1.55; }
#newProjectPanel .new-document-head > .assistant-icon-btn {
  width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 9px;
}
#newProjectPanel .new-document-head > .assistant-icon-btn:hover {
  border-color: var(--v2-line);
  background: var(--v2-panel-soft);
}

#newProjectPanel .preproject-workflow-path { gap: 5px; justify-content: flex-end; }
#newProjectPanel .preproject-workflow-path span {
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 10px;
  transition: color .16s ease, background .16s ease;
}
#newProjectPanel .preproject-workflow-path span.active {
  padding: 6px 10px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v2-blue) 18%, transparent);
}
#newProjectPanel .preproject-workflow-path i { font-size: 9px; opacity: .65; }

#newProjectPanel .preproject-project-panel {
  background: color-mix(in srgb, var(--v2-bg) 44%, var(--v2-panel));
}
#newProjectPanel .preproject-project-head {
  min-height: 72px;
  box-sizing: border-box;
  padding: 13px clamp(22px, 3vw, 48px);
  background: color-mix(in srgb, var(--v2-panel) 92%, transparent);
}
#newProjectPanel .preproject-project-head > div:first-child { gap: 3px; }
#newProjectPanel .preproject-project-head > div:first-child > span { font-size: 10px; }
#newProjectPanel .preproject-project-head > div:first-child > strong { font-size: 15px; letter-spacing: -.01em; }
#newProjectPanel .preproject-project-head > div:first-child > small { font-size: 10px; line-height: 1.45; }
#newProjectPanel .preproject-project-actions { gap: 10px; }
#newProjectPanel .preproject-target-control,
#newProjectPanel #preprojectAddFilesBtn {
  min-height: 38px !important;
  border-radius: 9px !important;
}
#newProjectPanel .preproject-target-control { gap: 7px; padding: 0 8px 0 11px; background: var(--v2-panel); }
#newProjectPanel .preproject-target-control > span,
#newProjectPanel .preproject-target-control select { font-size: 11px; }
#newProjectPanel .preproject-target-control select { min-width: 74px; height: 36px; }
#newProjectPanel #preprojectAddFilesBtn { padding: 0 14px !important; font-size: 11px !important; }

#newProjectPanel .new-document-form {
  width: 100%;
  max-width: 1560px;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 16px;
  margin-inline: auto;
  padding: 22px clamp(22px, 3vw, 48px) 34px;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
body.design-category-new-project #newProjectPanel .new-document-form > label.smart-project-brief,
#newProjectPanel .new-document-form > .smart-project-brief { grid-column: 1 !important; grid-row: 1; }
#newProjectPanel .new-document-form > .smart-project-detection { grid-column: 2 !important; grid-row: 1; align-self: stretch; }
#newProjectPanel .smart-project-brief { gap: 8px; }
#newProjectPanel .smart-project-brief > span { font-size: 11px; }
#newProjectPanel .smart-project-brief textarea {
  min-height: 136px;
  padding: 14px 15px;
  border-color: color-mix(in srgb, var(--v2-blue) 18%, var(--v2-line));
  border-radius: 10px;
  background: var(--v2-panel);
  font-size: 13px;
  line-height: 1.65;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
}
#newProjectPanel .smart-project-brief textarea:focus {
  border-color: color-mix(in srgb, var(--v2-blue) 68%, var(--v2-line));
  outline: 3px solid color-mix(in srgb, var(--v2-blue) 11%, transparent);
}
#newProjectPanel .smart-project-detection {
  min-height: 136px;
  box-sizing: border-box;
  align-content: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--v2-blue) 9%, var(--v2-panel)), var(--v2-panel));
}
#newProjectPanel .smart-detection-primary span { font-size: 11px; }
#newProjectPanel .smart-detection-primary strong { font-size: 13px; }
#newProjectPanel .smart-detection-tags span { padding: 5px 9px; font-size: 10px; }
#newProjectPanel .smart-detection-tags small { font-size: 9px; }

#newProjectPanel .new-project-category-context {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr);
  gap: 14px 16px;
  padding: 18px;
  border-color: color-mix(in srgb, var(--v2-blue) 24%, var(--v2-line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--v2-panel) 96%, var(--v2-bg));
  box-shadow: inset 4px 0 color-mix(in srgb, var(--v2-blue) 72%, transparent), 0 12px 30px rgb(15 23 42 / 5%);
}
#newProjectPanel .new-project-category-head { grid-column: 1 / -1; padding-bottom: 2px; }
#newProjectPanel .new-project-category-head h3 { font-size: 20px; }
#newProjectPanel .new-project-category-head p { max-width: 720px; font-size: 12px; }
#newProjectPanel .design-workspace-config { grid-column: 1; grid-row: 2; }
#newProjectPanel .new-project-category-fields { grid-column: 2; grid-row: 2; align-content: start; }
#newProjectPanel .design-workspace-readiness { grid-column: 1; grid-row: 3; }
#newProjectPanel .design-workspace-summary { grid-column: 2; grid-row: 3; }
#newProjectPanel .new-project-category-output { grid-column: 1 / -1; }

#newProjectPanel .design-workspace-config,
#newProjectPanel .design-workspace-summary,
#newProjectPanel .design-workspace-readiness {
  padding: 14px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--v2-bg) 54%, var(--v2-panel));
}
#newProjectPanel .design-workspace-preset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#newProjectPanel .design-workspace-preset {
  min-height: 76px;
  padding: 11px 12px;
  border-radius: 8px;
}
#newProjectPanel .design-workspace-preset.selected {
  box-shadow: inset 3px 0 var(--v2-blue), 0 6px 18px rgb(15 23 42 / 8%);
}
#newProjectPanel .design-workspace-style { width: 122px; min-width: 122px; border-radius: 8px; }
#newProjectPanel .new-project-category-fields { gap: 12px; }
#newProjectPanel .new-project-category-field input,
#newProjectPanel .new-project-category-field select,
#newProjectPanel .new-project-category-field textarea {
  min-height: 42px;
  border-radius: 8px !important;
  font-size: 12px;
}
#newProjectPanel .design-workspace-readiness > header strong { font-size: 14px; }
#newProjectPanel .design-workspace-readiness > header em { font-size: 25px; }
#newProjectPanel .design-workspace-readiness-meter { height: 6px; }
#newProjectPanel .design-workspace-summary { grid-template-columns: 1fr !important; align-content: start; }
#newProjectPanel .design-workspace-summary > div:last-child > span { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
#newProjectPanel .design-workspace-summary button { min-height: 36px; border-radius: 7px; font-size: 10px; }
#newProjectPanel .new-project-category-output {
  padding: 11px 13px !important;
  border-radius: 8px !important;
  line-height: 1.5;
}

#newProjectPanel .new-project-source-panel,
#newProjectPanel .new-document-form > .project-optional {
  grid-column: 1 / -1;
  border-radius: 10px !important;
}
#newProjectPanel .new-project-source-dropzone { min-height: 82px; border-radius: 9px; }

#newProjectPanel .preproject-project-panel > .new-project-actions {
  min-height: 72px;
  box-sizing: border-box;
  padding: 11px clamp(22px, 3vw, 48px);
  background: color-mix(in srgb, var(--v2-panel) 94%, transparent);
  box-shadow: 0 -10px 28px rgb(15 23 42 / 6%);
  backdrop-filter: blur(16px) saturate(120%);
}
#newProjectPanel .preproject-project-panel > .new-project-actions > span { font-size: 10px; }
#newProjectPanel .preproject-project-panel > .new-project-actions > button {
  min-height: 46px;
  padding-inline: 22px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--v2-blue) 24%, transparent);
}

@media (max-width: 1180px) {
  #newProjectPanel .new-document-head { grid-template-columns: minmax(260px, .8fr) minmax(430px, 1.2fr) 40px; gap: 16px; }
  #newProjectPanel .preproject-workflow-path span { padding-inline: 6px; font-size: 9px; }
  #newProjectPanel .new-project-category-context { grid-template-columns: minmax(330px, .85fr) minmax(390px, 1.15fr); }
  #newProjectPanel .design-workspace-preset-grid { grid-template-columns: 1fr; }
  #newProjectPanel .design-workspace-preset { min-height: 58px; }
}

@media (max-width: 980px) {
  #newProjectPanel .new-document-head { min-height: 82px; grid-template-columns: minmax(0, 1fr) 40px; padding-inline: 18px; }
  #newProjectPanel .preproject-project-head { padding-inline: 18px; }
  #newProjectPanel .new-document-form { grid-template-columns: 1fr; padding: 18px; }
  #newProjectPanel .new-document-form > .smart-project-brief,
  #newProjectPanel .new-document-form > .smart-project-detection { grid-column: 1 !important; grid-row: auto; }
  #newProjectPanel .smart-project-brief textarea,
  #newProjectPanel .smart-project-detection { min-height: 120px; }
  #newProjectPanel .new-project-category-context { grid-template-columns: 1fr; }
  #newProjectPanel .new-project-category-context > * { grid-column: 1; grid-row: auto; }
  #newProjectPanel .design-workspace-preset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #newProjectPanel .design-workspace-summary > div:last-child > span { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 700px) {
  #newProjectPanel .new-document-head { min-height: 76px; padding: 13px 14px; }
  #newProjectPanel .new-document-head h2 { font-size: 19px; }
  #newProjectPanel .new-document-head p { font-size: 10px; }
  #newProjectPanel .preproject-project-head { align-items: stretch; flex-direction: column; padding: 12px 14px; }
  #newProjectPanel .preproject-project-actions { width: 100%; }
  #newProjectPanel .preproject-target-control { flex: 1 1 auto; }
  #newProjectPanel .preproject-target-control select { width: 100%; }
  #newProjectPanel .new-document-form { padding: 14px 14px 24px; }
  #newProjectPanel .new-project-category-context { padding: 14px; }
  #newProjectPanel .design-workspace-preset-grid { grid-template-columns: 1fr; }
  #newProjectPanel .new-project-category-fields { grid-template-columns: 1fr; }
  #newProjectPanel .preproject-project-panel > .new-project-actions { align-items: stretch; flex-direction: column; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); }
  #newProjectPanel .preproject-project-panel > .new-project-actions > button { width: 100%; }
}

/* Unified smart project entry: one conversation instead of separate creation modes. */
.smart-create {
  position: relative;
  z-index: 50;
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: none;
  margin-top: 28px;
}

.smart-create-composer {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--v2-line) 76%, var(--v2-blue) 24%);
  border-radius: 16px;
  background: color-mix(in srgb, var(--v2-panel) 90%, transparent);
  box-shadow: 0 18px 48px rgb(15 23 42 / 11%);
  backdrop-filter: blur(24px) saturate(145%);
  transition: border-color 160ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.smart-create:focus-within .smart-create-composer,
.smart-create.dragging .smart-create-composer {
  border-color: color-mix(in srgb, var(--v2-blue) 68%, var(--v2-line));
  box-shadow: 0 20px 54px rgb(15 23 42 / 14%), 0 0 0 3px color-mix(in srgb, var(--v2-blue) 10%, transparent);
}

.smart-create.dragging .smart-create-composer { transform: translateY(-2px); }
.smart-create-composer textarea {
  width: 100%;
  min-height: 94px;
  padding: 3px 4px;
  resize: vertical;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--v2-text);
  font: inherit;
  font-size: 15px;
  line-height: 1.65;
}
.smart-create-composer textarea::placeholder { color: var(--v2-faint); }

.smart-create-toolbar,
.smart-create-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.smart-create-toolbar { justify-content: space-between; }
.smart-create-tool,
.smart-create-submit {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--v2-panel-soft) 78%, transparent);
  color: var(--v2-text);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
}
.smart-create-tool:hover { border-color: color-mix(in srgb, var(--v2-blue) 46%, var(--v2-line)); color: var(--v2-blue); }
.smart-create-tool:disabled { cursor: wait; opacity: .62; }
.smart-create-capture-btn { flex: 0 0 auto; }
.smart-create-tool svg,
.smart-create-submit svg { width: 15px; height: 15px; }
.smart-create-submit { padding: 0 14px; border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; }
.smart-create-submit:hover { filter: brightness(1.05); }

.smart-create-target-wrap,
.smart-create-spec-wrap,
.smart-create-preference-wrap,
.smart-create-color-wrap { position: relative; }
.smart-create-color-btn { max-width: 190px; }
.smart-create-color-btn > span:not(.smart-create-color-preview) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-create-color-btn.manual { border-color: color-mix(in srgb, var(--v2-blue) 46%, var(--v2-line)); }
.smart-create-color-preview {
  display: inline-flex;
  width: 28px;
  height: 18px;
  flex: 0 0 28px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--v2-line) 84%, #fff 16%);
  border-radius: 5px;
}
.smart-create-color-preview i { flex: 1 1 0; background: var(--swatch); }
.smart-create-spec-btn { max-width: 260px; }
.smart-create-spec-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-create-spec-panel {
  position: fixed;
  z-index: 40;
  top: clamp(104px, 14vh, 140px);
  bottom: 24px;
  left: 50%;
  display: grid;
  width: min(780px, calc(100vw - 88px));
  max-height: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--v2-line) 82%, var(--v2-blue) 18%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--v2-panel) 98%, transparent);
  box-shadow: 0 24px 64px rgb(15 23 42 / 20%);
  backdrop-filter: blur(28px) saturate(150%);
}
.smart-create-spec-panel.hidden { display: none !important; }
.smart-create-spec-panel > header {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--v2-line);
}
.smart-create-spec-panel > header > div { display: grid; gap: 3px; }
.smart-create-spec-panel > header small { color: var(--v2-blue); font-size: 9px; font-weight: 750; }
.smart-create-spec-panel > header strong { font-size: 14px; }
.smart-create-spec-panel > header button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--v2-line);
  border-radius: 7px;
  background: transparent;
  color: var(--v2-muted);
  font: inherit;
  font-size: 10px;
}
.smart-create-spec-panel > header button:hover,
.smart-create-spec-panel > header button.active { border-color: color-mix(in srgb, var(--v2-blue) 46%, var(--v2-line)); background: color-mix(in srgb, var(--v2-blue) 8%, transparent); color: var(--v2-blue); }
.smart-create-spec-panel > header button svg { width: 13px; height: 13px; }
.smart-create-spec-columns {
  display: grid;
  min-height: 0;
  grid-template-columns: 180px minmax(220px, .95fr) minmax(280px, 1.25fr);
  overflow: hidden;
}
.smart-create-spec-columns > section { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
.smart-create-spec-columns > section + section { border-left: 1px solid var(--v2-line); }
.smart-create-spec-columns h3 {
  display: flex;
  min-height: 43px;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--v2-line);
  color: var(--v2-muted);
  font-size: 10px;
  font-weight: 700;
}
.smart-create-spec-columns h3 b { color: var(--v2-faint); font-size: 9px; }
.smart-create-spec-list { display: grid; min-height: 0; align-content: start; gap: 3px; padding: 7px; overflow: auto; }
.smart-create-spec-list button {
  display: grid;
  min-width: 0;
  min-height: 49px;
  grid-template-columns: 24px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--v2-text);
  font: inherit;
  text-align: left;
}
.smart-create-spec-columns > section:first-child .smart-create-spec-list button { min-height: 39px; padding-block: 5px; }
.smart-create-spec-list button:hover { background: color-mix(in srgb, var(--v2-panel-soft) 82%, transparent); }
.smart-create-spec-list button.active { border-color: color-mix(in srgb, var(--v2-blue) 26%, var(--v2-line)); background: color-mix(in srgb, var(--v2-blue) 9%, transparent); color: var(--v2-blue); }
.smart-create-spec-list button > svg:first-child { width: 15px; height: 15px; justify-self: center; }
.smart-create-spec-list button > svg:last-child { width: 12px; height: 12px; opacity: .45; }
.smart-create-spec-list button > span:not(.smart-create-spec-size-icon) { display: grid; min-width: 0; gap: 3px; }
.smart-create-spec-list button strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.smart-create-spec-list button small { overflow: hidden; color: var(--v2-faint); font-size: 8px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.smart-create-spec-projects button { grid-template-columns: 24px minmax(0, 1fr); }
.smart-create-spec-size-icon { display: grid; width: 24px; height: 30px; place-items: center; border: 1px solid var(--v2-line); border-radius: 4px; color: var(--v2-muted); }
.smart-create-spec-size-icon svg { width: 13px; height: 13px; }
.smart-create-spec-sizes button.active > svg:last-child { opacity: 1; }
.smart-create-spec-sizes .smart-create-spec-custom { margin-top: 4px; border-top-color: var(--v2-line); border-radius: 0 0 7px 7px; }
.smart-create-spec-panel > footer { display: flex; min-height: 48px; align-items: center; justify-content: flex-end; padding: 8px 15px; border-top: 1px solid var(--v2-line); }
.smart-create-spec-panel > footer button { min-height: 32px; padding: 0 14px; border: 1px solid var(--v2-blue); border-radius: 7px; background: var(--v2-blue); color: #fff; font: inherit; font-size: 10px; font-weight: 650; }
.smart-create-spec-panel > footer button:hover { filter: brightness(1.06); }
:root[data-theme="dark"] .smart-create-spec-panel { box-shadow: 0 24px 68px rgb(0 0 0 / 42%); }

/* The preference drawer is a real creation control, so keep it dense and
   scannable instead of turning every recommendation into a large card. */
.smart-create-preference-panel {
  position: fixed;
  z-index: 45;
  top: clamp(104px, 14vh, 140px);
  bottom: 24px;
  left: 50%;
  display: grid;
  width: min(920px, calc(100vw - 72px));
  max-height: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--v2-line) 78%, var(--v2-blue) 22%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--v2-panel) 98%, transparent);
  box-shadow: 0 24px 64px rgb(15 23 42 / 20%);
  backdrop-filter: blur(28px) saturate(150%);
}
.smart-create-preference-panel.hidden { display: none !important; }
.smart-create-preference-panel > header {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--v2-line);
}
.smart-create-preference-panel > header > div { display: grid; min-width: 0; gap: 3px; }
.smart-create-preference-panel > header small { color: var(--v2-blue); font-size: 9px; font-weight: 750; }
.smart-create-preference-panel > header strong { font-size: 14px; }
.smart-create-preference-panel > header span { overflow: hidden; color: var(--v2-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.smart-create-preference-panel > header button,
.smart-create-preference-panel > footer button {
  display: inline-flex;
  min-height: 32px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--v2-line);
  border-radius: 7px;
  background: transparent;
  color: var(--v2-muted);
  font: inherit;
  font-size: 10px;
  font-weight: 650;
}
.smart-create-preference-panel > header button:hover,
.smart-create-preference-panel > footer button:hover { border-color: color-mix(in srgb, var(--v2-blue) 46%, var(--v2-line)); color: var(--v2-blue); }
.smart-create-preference-panel > header button svg { width: 13px; height: 13px; }
.smart-create-preference-body {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0;
  overflow: auto;
}
.smart-create-preference-section { min-width: 0; padding: 12px 13px 11px; border-bottom: 1px solid var(--v2-line); }
.smart-create-preference-section:nth-child(even) { border-left: 1px solid var(--v2-line); }
.smart-create-preference-section.wide { grid-column: 1 / -1; }
.smart-create-preference-section > header { display: flex; min-width: 0; align-items: center; gap: 8px; margin-bottom: 8px; }
.smart-create-preference-section > header > b { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border: 1px solid color-mix(in srgb, var(--v2-blue) 32%, var(--v2-line)); border-radius: 6px; background: color-mix(in srgb, var(--v2-blue) 8%, transparent); color: var(--v2-blue); font-size: 9px; }
.smart-create-preference-section > header > div { display: grid; min-width: 0; gap: 2px; }
.smart-create-preference-section > header strong { color: var(--v2-text); font-size: 11px; }
.smart-create-preference-section > header small { overflow: hidden; color: var(--v2-faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.smart-create-preference-section > header em { margin-left: auto; color: var(--v2-blue); font-size: 8px; font-style: normal; white-space: nowrap; }
.smart-create-preference-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.smart-create-preference-section.wide .smart-create-preference-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.smart-create-preference-options button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 46px;
  grid-template-columns: auto minmax(0, 1fr) 13px;
  align-items: center;
  gap: 6px;
  padding: 6px 7px;
  border: 1px solid var(--v2-line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--v2-panel-soft) 52%, transparent);
  color: var(--v2-text);
  font: inherit;
  text-align: left;
}
.smart-create-preference-options button:hover { border-color: color-mix(in srgb, var(--v2-blue) 42%, var(--v2-line)); background: color-mix(in srgb, var(--v2-blue) 6%, var(--v2-panel)); }
.smart-create-preference-options button.active { border-color: color-mix(in srgb, var(--v2-blue) 62%, var(--v2-line)); background: color-mix(in srgb, var(--v2-blue) 10%, var(--v2-panel)); box-shadow: inset 2px 0 var(--v2-blue); }
.smart-create-preference-options button > span:not(.smart-create-preference-swatches) { display: grid; min-width: 0; gap: 2px; }
.smart-create-preference-options button strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.smart-create-preference-options button small { overflow: hidden; color: var(--v2-faint); font-size: 7.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.smart-create-preference-options button > em { position: absolute; top: 3px; right: 18px; color: var(--v2-blue); font-size: 7px; font-style: normal; }
.smart-create-preference-options button > svg { width: 12px; height: 12px; opacity: 0; color: var(--v2-blue); }
.smart-create-preference-options button.active > svg { opacity: 1; }
.smart-create-preference-swatches { display: inline-flex; width: 22px; flex: 0 0 22px; flex-wrap: wrap; gap: 2px; }
.smart-create-preference-swatches i { width: 9px; height: 9px; border: 1px solid rgb(15 23 42 / 12%); border-radius: 3px; }
.smart-create-preference-panel > footer { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 15px; border-top: 1px solid var(--v2-line); }
.smart-create-preference-panel > footer > span { display: inline-flex; min-width: 0; align-items: center; gap: 6px; overflow: hidden; color: var(--v2-faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.smart-create-preference-panel > footer > span svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--v2-blue); }
.smart-create-preference-panel > footer button { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; }
.smart-create-preference-panel > footer button:hover { color: #fff; filter: brightness(1.06); }
:root[data-theme="dark"] .smart-create-preference-panel { box-shadow: 0 24px 68px rgb(0 0 0 / 42%); }
.smart-create-color-panel {
  position: fixed;
  z-index: 48;
  top: clamp(104px, 14vh, 140px);
  bottom: 24px;
  left: 50%;
  display: grid;
  width: min(780px, calc(100vw - 88px));
  max-height: none;
  grid-template-rows: auto minmax(0, .88fr) minmax(0, 1.12fr) auto;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--v2-line) 78%, var(--v2-blue) 22%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--v2-panel) 98%, transparent);
  box-shadow: 0 24px 64px rgb(15 23 42 / 20%);
  backdrop-filter: blur(28px) saturate(150%);
}
.smart-create-color-panel.hidden { display: none !important; }
.smart-create-color-panel > header,
.smart-create-color-panel > footer {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--v2-line);
}
.smart-create-color-panel > header > div { display: grid; min-width: 0; gap: 3px; }
.smart-create-color-panel > header small { color: var(--v2-blue); font-size: 9px; font-weight: 750; }
.smart-create-color-panel > header strong { font-size: 14px; }
.smart-create-color-panel > header span { overflow: hidden; color: var(--v2-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.smart-create-color-panel > header button,
.smart-create-color-panel > footer button,
.smart-create-color-actions button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--v2-line);
  border-radius: 7px;
  background: transparent;
  color: var(--v2-muted);
  font: inherit;
  font-size: 10px;
  font-weight: 650;
}
.smart-create-color-panel button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--v2-blue) 48%, var(--v2-line)); color: var(--v2-blue); }
.smart-create-color-panel button:disabled { cursor: not-allowed; opacity: .42; }
.smart-create-color-panel button svg { width: 13px; height: 13px; }
.smart-create-color-current,
.smart-create-color-recommendations { min-width: 0; padding: 15px; }
.smart-create-color-current { display: grid; align-content: start; gap: 14px; overflow: auto; }
.smart-create-color-role { display: grid; gap: 6px; }
.smart-create-color-role > label { display: grid; width: min(330px, 100%); grid-template-columns: 42px 42px minmax(0, 1fr); align-items: center; gap: 8px; }
.smart-create-color-role > label > span,
.smart-create-color-role-head > span { color: var(--v2-text); font-size: 11px; font-weight: 700; }
.smart-create-color-role > label input[type="color"],
.smart-create-secondary-colors input[type="color"] {
  width: 40px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--v2-line);
  border-radius: 7px;
  background: var(--v2-panel-soft);
}
.smart-color-picker-trigger {
  position: relative;
  display: block;
  width: 40px;
  height: 34px;
  padding: 4px !important;
  overflow: hidden;
  border: 1px solid var(--v2-line) !important;
  border-radius: 7px !important;
  background: var(--v2-panel-soft) !important;
}
.smart-color-picker-trigger::before {
  position: absolute;
  inset: 4px;
  content: "";
  border-radius: 4px;
  background: conic-gradient(#fff 0 25%, #d7d7d7 0 50%, #fff 0 75%, #d7d7d7 0) 0 0 / 8px 8px;
}
.smart-color-picker-trigger > i { position: absolute; inset: 4px; border-radius: 4px; background: var(--picker-color); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 14%); }
.smart-create-secondary-colors .smart-color-picker-trigger { width: 34px; height: 34px; }
.smart-create-color-role > label input[type="text"],
.smart-create-secondary-colors input[type="text"] {
  min-width: 0;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--v2-line);
  border-radius: 7px;
  outline: 0;
  background: var(--v2-panel-soft);
  color: var(--v2-text);
  font: inherit;
  font-size: 10px;
  text-transform: uppercase;
}
.smart-create-color-role > small,
.smart-create-color-role-head > small { color: var(--v2-faint); font-size: 8px; }
.smart-create-color-role-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.smart-create-secondary-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.smart-create-secondary-colors > label { display: grid; min-width: 0; grid-template-columns: 34px minmax(0, 1fr) 28px; align-items: center; gap: 6px; }
.smart-create-secondary-colors input[type="color"] { width: 34px; height: 34px; }
.smart-create-secondary-colors > label > button,
.smart-create-color-add {
  display: inline-grid;
  height: 34px;
  min-height: 34px;
  place-items: center;
  border: 1px solid var(--v2-line);
  border-radius: 7px;
  background: transparent;
  color: var(--v2-faint);
}
.smart-create-color-add { grid-template-columns: auto auto; gap: 5px; padding: 0 10px; font: inherit; font-size: 9px; }
.smart-create-color-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.smart-create-color-recommendations { min-height: 0; padding-top: 12px; overflow: auto; border-top: 1px solid var(--v2-line); }
.smart-create-color-recommendations > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 9px; }
.smart-create-color-recommendations > header > div { display: grid; gap: 2px; }
.smart-create-color-recommendations > header strong { font-size: 11px; }
.smart-create-color-recommendations > header small,
.smart-create-color-recommendations > header em { color: var(--v2-faint); font-size: 8px; font-style: normal; }
.smart-create-color-recommendations > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.smart-create-color-recommendations > div > button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 58px;
  grid-template-columns: 46px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--v2-panel-soft) 55%, transparent);
  color: var(--v2-text);
  font: inherit;
  text-align: left;
}
.smart-create-color-recommendations > div > button.active { border-color: color-mix(in srgb, var(--v2-blue) 62%, var(--v2-line)); background: color-mix(in srgb, var(--v2-blue) 9%, var(--v2-panel)); box-shadow: inset 2px 0 var(--v2-blue); }
.smart-create-color-recommendations > div > button > b { position: absolute; top: 4px; right: 22px; color: var(--v2-blue); font-size: 7px; }
.smart-create-color-recommendations > div > button > span:not(.smart-create-color-swatches) { display: grid; min-width: 0; gap: 3px; }
.smart-create-color-recommendations > div > button strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.smart-create-color-recommendations > div > button small { overflow: hidden; color: var(--v2-faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.smart-create-color-recommendations > div > button > svg { opacity: 0; color: var(--v2-blue); }
.smart-create-color-recommendations > div > button.active > svg { opacity: 1; }
.smart-create-color-swatches { display: grid; width: 42px; height: 34px; grid-template-columns: repeat(2, 1fr); gap: 2px; overflow: hidden; border-radius: 6px; }
.smart-create-color-swatches i { border: 1px solid rgb(15 23 42 / 10%); border-radius: 3px; background: var(--swatch); }
.smart-create-color-panel > footer { min-height: 48px; border-top: 1px solid var(--v2-line); border-bottom: 0; }
.smart-create-color-panel > footer > span { display: inline-flex; min-width: 0; align-items: center; gap: 6px; overflow: hidden; color: var(--v2-faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.smart-create-color-panel > footer > span svg { flex: 0 0 auto; color: var(--v2-blue); }
.smart-create-color-panel > footer button { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; }
:root[data-theme="dark"] .smart-create-color-panel { box-shadow: 0 24px 68px rgb(0 0 0 / 42%); }

/* Desktop professional color picker, modeled after established graphics software. */
.smart-color-picker-overlay {
  position: fixed;
  z-index: 82;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(10 15 24 / 48%);
  backdrop-filter: blur(7px);
}
.smart-color-picker-overlay.hidden { display: none !important; }
.smart-color-picker-window {
  display: grid;
  width: min(900px, calc(100vw - 72px));
  max-height: calc(100vh - 48px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #555c66;
  border-radius: 12px;
  background: #2f3135;
  color: #eef1f5;
  box-shadow: 0 28px 90px rgb(0 0 0 / 48%);
}
.smart-color-picker-window > header {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 17px;
  border-bottom: 1px solid #4d5158;
  background: #eceff5;
  color: #17191d;
}
.smart-color-picker-window > header strong { color: #17191d !important; font-size: 14px; font-weight: 650; }
.smart-color-picker-window > header button { display: grid; width: 30px; height: 30px; place-items: center; border: 0; background: transparent; color: #17191d; }
.smart-color-picker-window > header svg { width: 19px; height: 19px; }
.smart-color-picker-body { display: grid; min-height: 0; grid-template-columns: minmax(0, 1.42fr) minmax(300px, .88fr); gap: 22px; padding: 22px; overflow: auto; }
.smart-color-picker-workspace { display: grid; min-width: 0; align-content: start; gap: 14px; }
.smart-color-picker-map-wrap { display: grid; min-width: 0; grid-template-columns: minmax(300px, 1fr) 30px; gap: 14px; }
.smart-color-picker-map {
  position: relative;
  aspect-ratio: 1.34;
  min-height: 330px;
  cursor: crosshair;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--picker-hue) 100% 50%));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
}
.smart-color-picker-map > i { position: absolute; width: 15px; height: 15px; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #000, 0 1px 4px rgb(0 0 0 / 80%); pointer-events: none; }
.smart-color-picker-hue { position: relative; min-height: 330px; cursor: ns-resize; background: linear-gradient(to bottom, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%); }
.smart-color-picker-hue > i { position: absolute; right: -7px; left: -7px; height: 4px; transform: translateY(-50%); border: 1px solid #f5f5f5; background: #141414; box-shadow: 0 0 0 1px #000; pointer-events: none; }
.smart-color-web-only { display: flex; align-items: center; gap: 8px; color: #dfe3e9; font-size: 11px; }
.smart-color-web-only input { width: 16px; height: 16px; accent-color: #3695ef; }
.smart-color-saved { display: grid; gap: 7px; }
.smart-color-saved > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.smart-color-saved strong { font-size: 11px; }
.smart-color-saved small,
.smart-color-saved > div > span { color: #9fa7b2; font-size: 9px; }
.smart-color-saved > div { display: flex; min-height: 25px; flex-wrap: wrap; align-items: center; gap: 5px; }
.smart-color-saved button { width: 24px; height: 24px; padding: 0; border: 1px solid #777e88; border-radius: 3px; background: var(--saved-color); }
.smart-color-picker-controls { display: grid; min-width: 0; align-content: start; gap: 14px; }
.smart-color-preview-pair { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; border: 1px solid #111; }
.smart-color-preview-pair > div { position: relative; display: grid; height: 80px; align-content: end; background: var(--preview-color); }
.smart-color-preview-pair span { position: relative; z-index: 1; padding: 4px 7px; background: rgb(0 0 0 / 46%); color: #fff; font-size: 10px; }
.smart-color-preview-pair i { position: absolute; inset: 0; background: var(--preview-color); }
.smart-color-picker-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.smart-color-picker-actions button { min-height: 34px; border: 1px solid #70757d; border-radius: 17px; background: transparent; color: #f2f4f7; font: inherit; font-size: 11px; }
.smart-color-picker-actions button.primary { border-color: #b8d8f8; background: #367fbd; }
.smart-color-picker-actions button:hover { border-color: #63aef2; color: #fff; }
.smart-color-picker-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.smart-color-picker-values fieldset { display: grid; min-width: 0; gap: 6px; margin: 0; padding: 8px; border: 1px solid #50545b; border-radius: 7px; }
.smart-color-picker-values legend { padding: 0 4px; color: #b7bdc6; font-size: 9px; }
.smart-color-picker-values label { display: grid; min-width: 0; grid-template-columns: 13px minmax(0, 1fr) auto; align-items: center; gap: 4px; }
.smart-color-picker-values b,
.smart-color-picker-values span { color: #d9dde3; font-size: 9px; }
.smart-color-picker-values input,
.smart-color-picker-hex input { min-width: 0; height: 28px; padding: 0 6px; border: 1px solid #50545b; border-radius: 3px; outline: 0; background: #25272a; color: #fff; font: inherit; font-size: 10px; }
.smart-color-picker-values input:focus,
.smart-color-picker-hex input:focus { border-color: #4ca4f2; box-shadow: 0 0 0 1px #4ca4f2; }
.smart-color-picker-values input::-webkit-inner-spin-button { opacity: .35; }
.smart-color-picker-hex { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 5px; }
.smart-color-picker-hex b { color: #cfd4db; font-size: 13px; }
.smart-color-picker-hex input { height: 32px; color: #7dc1ff; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.smart-color-picker-library { min-height: 0; max-height: min(430px, 48vh); overflow: auto; border-top: 1px solid #4d5158; background: #282a2e; }
.smart-color-picker-library.hidden { display: none; }
.smart-color-picker-library > header { position: sticky; z-index: 2; top: 0; padding: 10px 16px; border-bottom: 1px solid #444850; background: #282a2e; }
.smart-color-picker-library > header > div { display: grid; gap: 2px; }
.smart-color-picker-library > header strong { font-size: 11px; }
.smart-color-picker-library > header small { color: #969eaa; font-size: 8px; }
.smart-color-picker-library > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 12px 16px 16px; }
.smart-color-picker-library section { display: grid; min-width: 0; gap: 7px; padding: 9px; border: 1px solid #444850; border-radius: 7px; background: #303237; }
.smart-color-picker-library section > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.smart-color-picker-library section > header strong { font-size: 10px; }
.smart-color-picker-library section > header small { color: #8f97a2; font-size: 8px; }
.smart-color-picker-library section > div { display: grid; gap: 5px; }
.smart-color-picker-library article { display: grid; min-width: 0; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.smart-color-picker-library article > span { display: contents; }
.smart-color-picker-library article .smart-create-color-swatches { width: 38px; height: 24px; }
.smart-color-picker-library article b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.smart-color-picker-library article > div { display: flex; gap: 3px; }
.smart-color-picker-library article button { width: 18px; height: 18px; padding: 0; border: 1px solid #717780; border-radius: 3px; background: var(--library-color); }
.smart-create-target-menu {
  position: absolute;
  z-index: 30;
  bottom: calc(100% + 8px);
  left: 0;
  display: grid;
  width: min(310px, calc(100vw - 40px));
  gap: 3px;
  padding: 7px;
  border: 1px solid var(--v2-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--v2-panel) 96%, transparent);
  box-shadow: 0 18px 46px rgb(15 23 42 / 18%);
  backdrop-filter: blur(24px);
}
.smart-create-target-menu.hidden { display: none !important; }
.smart-create-target-menu button {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--v2-text);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
}
.smart-create-target-menu button small { color: var(--v2-muted); font-size: 9px; font-weight: 500; }
.smart-create-target-menu button:hover,
.smart-create-target-menu button.active { background: color-mix(in srgb, var(--v2-blue) 10%, transparent); color: var(--v2-blue); }

.smart-create-file-list { display: grid; gap: 7px; }
.smart-create-file-list.hidden { display: none !important; }
.smart-create-file {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(112px, 146px) 28px;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--v2-panel-soft) 74%, transparent);
}
.smart-create-file > svg { width: 17px; height: 17px; color: var(--v2-blue); justify-self: center; }
.smart-create-file > div { display: grid; min-width: 0; gap: 2px; }
.smart-create-file input,
.smart-create-file select {
  width: 100%;
  min-width: 0;
  height: 29px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--v2-text);
  font: inherit;
  font-size: 10px;
}
.smart-create-file input:focus,
.smart-create-file select:focus { border-color: var(--v2-blue); outline: 0; background: var(--v2-panel); }
.smart-create-file small { overflow: hidden; color: var(--v2-faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.smart-create-file > button { display: grid; width: 28px; height: 28px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--v2-muted); }
.smart-create-file > button:hover { background: color-mix(in srgb, #c42b1c 10%, transparent); color: #c42b1c; }
.smart-create-file > button svg { width: 14px; height: 14px; }
.smart-create-file:has(.smart-create-file-open) { grid-template-columns: 28px minmax(0, 1fr) minmax(112px, 146px) auto 28px; }
.smart-create-file > .smart-create-file-open { width: auto; min-width: 42px; height: 28px; padding: 0 9px; border-radius: 6px; background: color-mix(in srgb, var(--v2-blue) 12%, var(--v2-panel)); color: var(--v2-blue); font-size: 11px; font-weight: 700; }
.smart-create-file > .smart-create-file-open:hover { background: color-mix(in srgb, var(--v2-blue) 20%, var(--v2-panel)); color: var(--v2-blue); }

.smart-create-intake { display: grid; gap: 10px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--v2-blue) 28%, var(--v2-line)); border-radius: 10px; background: color-mix(in srgb, var(--v2-blue) 6%, var(--v2-panel)); }
.smart-create-intake.hidden { display: none !important; }
.smart-create-intake[data-status="analyzing"] { border-style: dashed; }
.smart-create-intake[data-status="error"] { border-color: color-mix(in srgb, #c2410c 48%, var(--v2-line)); background: color-mix(in srgb, #c2410c 7%, var(--v2-panel)); }
.smart-intake-head { display: flex; min-width: 0; align-items: center; gap: 9px; }
.smart-intake-head > i { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border-radius: 7px; background: color-mix(in srgb, var(--v2-blue) 12%, transparent); color: var(--v2-blue); }
.smart-intake-head > i svg { width: 14px; height: 14px; }
.smart-intake-head > div { display: grid; min-width: 0; gap: 2px; }
.smart-intake-head strong { color: var(--v2-text); font-size: 10px; }
.smart-intake-head small { overflow: hidden; color: var(--v2-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.smart-intake-head em { margin-left: auto; color: var(--v2-blue); font-size: 8px; font-style: normal; white-space: nowrap; }
.smart-intake-summary { margin: 0; color: var(--v2-muted); font-size: 9px; line-height: 1.45; }
.smart-intake-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.smart-intake-file { display: grid; min-width: 0; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid var(--v2-line); border-radius: 7px; background: color-mix(in srgb, var(--v2-panel) 78%, transparent); }
.smart-intake-file > svg { width: 14px; height: 14px; color: var(--v2-blue); }
.smart-intake-file > div { display: grid; min-width: 0; gap: 2px; }
.smart-intake-file strong { overflow: hidden; color: var(--v2-text); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.smart-intake-file small { overflow: hidden; color: var(--v2-faint); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.smart-intake-file > span { padding: 3px 5px; border-radius: 999px; background: color-mix(in srgb, var(--v2-blue) 10%, transparent); color: var(--v2-blue); font-size: 7px; white-space: nowrap; }
.smart-intake-file[data-confidence="low"] > span { background: color-mix(in srgb, #ca8a04 12%, transparent); color: #a16207; }
.smart-intake-config { display: flex; flex-wrap: wrap; gap: 5px; }
.smart-intake-config span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid var(--v2-line); border-radius: 999px; color: var(--v2-text); font-size: 8px; }
.smart-intake-config small { color: var(--v2-faint); font-size: 7px; }
.smart-intake-unresolved { display: grid; gap: 3px; margin: 0; padding-left: 18px; color: #a16207; font-size: 8px; line-height: 1.4; }
.smart-intake-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.smart-intake-actions small { color: var(--v2-faint); font-size: 8px; }
.smart-intake-actions button { min-height: 26px; padding: 0 9px; border: 1px solid var(--v2-line); border-radius: 6px; background: transparent; color: var(--v2-muted); font: inherit; font-size: 8px; }
.smart-intake-actions button:hover { border-color: color-mix(in srgb, var(--v2-blue) 46%, var(--v2-line)); color: var(--v2-blue); }
.smart-intake-loading { display: inline-flex; align-items: center; gap: 7px; color: var(--v2-blue); font-size: 9px; }
.smart-intake-loading svg { width: 13px; height: 13px; animation: spin 1s linear infinite; }

.smart-create-detection,
.smart-project-detection {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--v2-blue) 20%, var(--v2-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--v2-blue) 6%, transparent);
}
.smart-detection-primary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.smart-detection-primary span { display: inline-flex; align-items: center; gap: 6px; color: var(--v2-blue); font-size: 10px; font-weight: 700; }
.smart-detection-primary svg { width: 14px; height: 14px; }
.smart-detection-primary strong { overflow: hidden; color: var(--v2-text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.smart-detection-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.smart-detection-tags span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid var(--v2-line); border-radius: 999px; background: color-mix(in srgb, var(--v2-panel) 78%, transparent); color: var(--v2-text); font-size: 9px; }
.smart-detection-tags small { color: var(--v2-faint); font-size: 8px; }
.smart-detection-details { border-top: 1px solid color-mix(in srgb, var(--v2-blue) 14%, var(--v2-line)); }
.smart-detection-details > summary { display: flex; min-height: 30px; align-items: center; gap: 8px; padding-top: 6px; color: var(--v2-muted); cursor: pointer; list-style: none; }
.smart-detection-details > summary::-webkit-details-marker { display: none; }
.smart-detection-details > summary span { color: var(--v2-text); font-size: 9px; font-weight: 700; }
.smart-detection-details > summary small { margin-left: auto; color: var(--v2-faint); font-size: 8px; }
.smart-detection-details > summary svg { width: 13px; height: 13px; transition: transform .16s ease; }
.smart-detection-details[open] > summary svg { transform: rotate(180deg); }
.smart-detection-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 4px 0 2px; }
.smart-detection-groups section { min-width: 0; padding: 8px; border: 1px solid var(--v2-line); border-radius: 7px; background: color-mix(in srgb, var(--v2-panel) 82%, transparent); }
.smart-detection-groups h4 { margin: 0 0 5px; color: var(--v2-faint); font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.smart-detection-groups section > div { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 25px; border-top: 1px solid color-mix(in srgb, var(--v2-line) 70%, transparent); }
.smart-detection-groups section > div:first-of-type { border-top: 0; }
.smart-detection-groups section > div > span { color: var(--v2-faint); font-size: 8px; }
.smart-detection-groups section > div > strong { overflow: hidden; color: var(--v2-text); font-size: 9px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.smart-detection-groups section > div > em { padding: 2px 5px; border-radius: 999px; background: color-mix(in srgb, var(--v2-blue) 8%, transparent); color: var(--v2-blue); font-size: 7px; font-style: normal; white-space: nowrap; }
.smart-detection-groups section > div > em[data-source="manual"],
.smart-detection-groups section > div > em[data-source="mixed"] { background: color-mix(in srgb, #ca8a04 10%, transparent); color: #a16207; }

.smart-create-examples { display: flex; flex-wrap: wrap; gap: 7px; }
.smart-create-examples button { min-height: 30px; padding: 0 10px; border: 1px solid var(--v2-line); border-radius: 999px; background: transparent; color: var(--v2-muted); font: inherit; font-size: 10px; }
.smart-create-examples button:hover { border-color: color-mix(in srgb, var(--v2-blue) 42%, var(--v2-line)); color: var(--v2-blue); }

.smart-create-manual { width: 100%; max-width: none; margin-top: 12px; border: 1px solid var(--v2-line); border-radius: 10px; background: color-mix(in srgb, var(--v2-panel) 62%, transparent); }
.smart-create-manual > summary { display: flex; min-height: 42px; align-items: center; gap: 8px; padding: 0 12px; color: var(--v2-text); cursor: pointer; list-style: none; }
.smart-create-manual > summary::-webkit-details-marker { display: none; }
.smart-create-manual > summary svg { width: 15px; height: 15px; color: var(--v2-blue); }
.smart-create-manual > summary span { font-size: 11px; font-weight: 650; }
.smart-create-manual > summary small { margin-left: auto; color: var(--v2-faint); font-size: 9px; }
.smart-create-manual > .design-center,
.smart-create-manual > .project-quick-starts { margin: 0; padding: 14px; border-top: 1px solid var(--v2-line); }
.smart-create-manual > .project-quick-starts { grid-template-columns: repeat(5, minmax(100px, 1fr)); }
.smart-create-manual > .project-quick-starts button { min-height: 82px; }

.smart-project-brief textarea { min-height: 94px; height: auto !important; resize: vertical; padding: 9px 10px; line-height: 1.55; }
.new-document-panel { grid-template-rows: auto minmax(0, 1fr) !important; }
.new-document-panel > .preproject-workspace-grid { grid-row: 2; }
.preproject-project-panel > .new-document-form { grid-row: 2; }
.preproject-project-panel > .new-project-actions { grid-row: 3; }

:root[data-theme="dark"] .smart-create-composer,
:root[data-theme="dark"] .smart-create-target-menu { box-shadow: 0 20px 54px rgb(0 0 0 / 34%); }

@media (max-width: 760px) {
  .smart-intake-files { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .smart-create { max-width: none; }
  .smart-create-manual > .project-quick-starts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smart-create-preference-panel { width: min(680px, calc(100vw - 36px)); }
  .smart-create-preference-body { grid-template-columns: 1fr; }
  .smart-create-preference-section:nth-child(even) { border-left: 0; }
  .smart-create-preference-section.wide { grid-column: auto; }
  .smart-create-preference-options,
  .smart-create-preference-section.wide .smart-create-preference-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .project-home-content { padding: 26px 18px 44px; }
  .smart-create-composer { padding: 12px; border-radius: 12px; }
  .smart-create-toolbar { align-items: stretch; flex-direction: column; }
  .smart-create-toolbar-left { justify-content: space-between; }
  .smart-create-submit { width: 100%; }
  .smart-create-file { grid-template-columns: 24px minmax(0, 1fr) 28px; }
  .smart-create-file:has(.smart-create-file-open) { grid-template-columns: 24px minmax(0, 1fr) auto 28px; }
  .smart-create-file select { grid-column: 2 / 3; }
  .smart-create-file > .smart-create-file-open { grid-column: 3; grid-row: 1; }
  .smart-create-file > button[data-smart-file-remove] { grid-column: 4; grid-row: 1; }
  .smart-create-file:not(:has(.smart-create-file-open)) > button[data-smart-file-remove] { grid-column: 3; }
  .smart-detection-primary { align-items: flex-start; flex-direction: column; }
  .smart-detection-groups { grid-template-columns: 1fr; }
  .smart-create-manual > summary small { display: none; }
}

/* Credits account: one balance surface for the browser and desktop runtimes. */
.credits-control {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  overflow: visible;
}

.topbar .license-points {
  display: inline-flex;
  min-width: 86px;
  height: 34px;
  min-height: 34px !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--af-line-strong) !important;
  border-radius: 6px !important;
  background: var(--af-panel) !important;
  color: var(--af-text) !important;
  box-shadow: none !important;
  cursor: pointer;
}

.license-points > svg,
.license-points > .fluent-icon-shell {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
}

.license-points strong {
  color: var(--af-accent);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.license-points.warning strong { color: #b45309; }
.license-points.local strong { color: var(--af-muted); }

.credits-popover {
  position: absolute;
  z-index: 4600;
  top: calc(100% + 8px);
  right: 0;
  box-sizing: border-box;
  width: 300px;
  padding: 14px;
  border: 1px solid var(--af-line-strong);
  border-radius: 8px;
  background: var(--af-panel);
  color: var(--af-text);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
  white-space: normal;
}

.credits-popover.hidden { display: none !important; }

.credits-popover header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.credits-popover header > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.credits-popover header > div > strong { font-size: 13px; }
.credits-popover header small,
.credits-popover p,
.credits-rule { color: var(--af-muted); }

.credits-popover header button {
  display: inline-grid;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px !important;
  place-items: center;
  padding: 0;
  border: 1px solid var(--af-line);
  border-radius: 6px;
  background: var(--af-panel-soft);
  color: var(--af-muted);
  cursor: pointer;
}

.credits-popover header button:disabled { cursor: wait; opacity: .55; }
.credits-popover header button svg,
.credits-popover header button .fluent-icon-shell { width: 14px !important; height: 14px !important; }

.credits-summary {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.credits-summary > div {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--af-line);
  border-radius: 6px;
  background: var(--af-panel-soft);
}

.credits-summary span {
  color: var(--af-muted);
  font-size: 10px;
}

.credits-summary strong {
  overflow: hidden;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
}

.credits-summary .primary strong {
  color: var(--af-accent);
  font-size: 22px;
}

.credits-popover p {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.5;
}

.credits-rule {
  display: block;
  padding-top: 9px;
  border-top: 1px solid var(--af-line);
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 1399.98px) {
  .license-points > span { display: none; }
  .topbar .license-points { min-width: 58px; padding-inline: 8px; }
}

@media (max-width: 720px) {
  .credits-popover {
    position: fixed;
    top: 62px;
    right: 8px;
    width: min(300px, calc(100vw - 16px));
  }
}

/* Authoritative application layout: editor, integrated workflows, and drawers. */
html,
body,
.app-shell,
.workspace {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

#step-edit.editor-layout,
#step-edit > .editor-top-ribbon,
#step-edit .canvas-toolbar,
#step-edit > .canvas-area,
#step-edit > .thumb-panel,
#step-edit > .inspector {
  min-width: 0 !important;
  max-width: 100% !important;
}

#step-edit > .editor-workflow-workspace {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--v2-bg);
}

#step-edit > .editor-workflow-workspace.hidden {
  display: none !important;
}

#step-edit.workflow-panel-open > .thumb-panel,
#step-edit.workflow-panel-open > .canvas-area,
#step-edit.workflow-panel-open > .inspector,
#step-edit.workflow-panel-open > .editor-top-ribbon,
#step-edit.workflow-panel-open > .editor-panel-resizer {
  display: none !important;
}

#step-edit.workflow-panel-open > .editor-workflow-workspace {
  grid-row: 1 / -1 !important;
}

#editorWorkflowWorkspace > .flow-panel {
  position: static !important;
  display: block !important;
  width: min(1440px, 100%) !important;
  min-width: 0 !important;
  min-height: 100% !important;
  margin: 0 auto !important;
  padding: 18px 20px 36px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--v2-bg) !important;
  box-shadow: none !important;
}

#editorWorkflowWorkspace > .flow-panel.hidden {
  display: none !important;
}

#editorWorkflowWorkspace > .flow-panel > .panel-head,
#step-social > .social-store-hero {
  position: sticky;
  top: -18px;
  z-index: 4;
  margin: -18px -20px 16px !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--v2-line) !important;
  background: var(--v2-panel) !important;
}

#editorWorkflowWorkspace #closeStyleWorkspaceBtn,
#editorWorkflowWorkspace #closeSocialWorkspaceBtn {
  display: inline-grid !important;
}

#editorWorkflowWorkspace .style-controls,
#editorWorkflowWorkspace .style-lock-summary,
#editorWorkflowWorkspace .style-moodboard-grid,
#editorWorkflowWorkspace .style-library-details,
#editorWorkflowWorkspace .social-publish-layout,
#editorWorkflowWorkspace .social-quick-strip {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

#editorWorkflowWorkspace .social-store-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
}

#editorWorkflowWorkspace .social-store-hero h2 {
  font-size: 24px !important;
  line-height: 1.2;
}

#editorWorkflowWorkspace .social-store-hero p {
  margin-top: 6px;
  font-size: 13px !important;
}

#editorWorkflowWorkspace .social-hero-side {
  min-width: 0;
}

#editorWorkflowWorkspace .social-quick-strip {
  gap: 8px;
}

#editorWorkflowWorkspace .social-quick-strip div,
#editorWorkflowWorkspace .social-step-card,
#editorWorkflowWorkspace .social-preview-panel,
#editorWorkflowWorkspace .style-moodboard,
#editorWorkflowWorkspace .style-lock-summary,
#editorWorkflowWorkspace .style-library-details {
  border-radius: 8px !important;
}

#editorWorkflowWorkspace .social-quick-strip div {
  min-height: 48px;
  padding: 8px 10px;
}

#editorWorkflowWorkspace .social-quick-strip span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.assistant-tools-drawer:not(.open),
.editor-delivery-drawer:not(.open),
.assistant-drawer:not(.embedded):not(.open) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
}

.assistant-tools-drawer.open,
.editor-delivery-drawer.open,
.assistant-drawer:not(.embedded).open {
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

.assistant-tools-drawer.open,
.editor-delivery-drawer.open {
  display: grid !important;
}

[inert] {
  pointer-events: none !important;
}

.visually-hidden-file {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.professional-workbench:not([open]) > :not(summary) {
  display: none !important;
}

@media (max-width: 1180px) {
  #editorWorkflowWorkspace .social-store-hero {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    margin: 0 0 14px !important;
    padding: 12px !important;
  }

  #editorWorkflowWorkspace .social-hero-side {
    justify-items: start;
  }

  #editorWorkflowWorkspace .social-quick-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  :root { --v2-topbar-height: 54px; }

  .app-shell {
    grid-template-rows: var(--v2-topbar-height) minmax(0, 1fr) !important;
  }

  .topbar {
    display: flex !important;
    height: var(--v2-topbar-height) !important;
    min-height: var(--v2-topbar-height) !important;
    flex-wrap: nowrap !important;
    padding-inline: 10px !important;
  }

  .topbar .brand-block {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .topbar .brand-copy h1 span,
  .topbar .brand-copy p,
  .topbar #apiStatus,
  .topbar #saveState,
  .topbar #saveDeckBtn,
  .topbar #exportPptBtn {
    display: none !important;
  }

  .topbar .top-actions {
    width: auto !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    margin-left: auto !important;
  }

  #step-edit > .inspector {
    display: none !important;
  }

  body.mobile-inspector-open #step-edit > .inspector {
    position: fixed !important;
    z-index: 1330 !important;
    top: var(--v2-topbar-height) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    display: block !important;
    width: min(360px, calc(100vw - 48px)) !important;
    height: auto !important;
    overflow: auto !important;
    box-shadow: -16px 0 40px rgba(20, 24, 28, .2) !important;
  }
}

@media (max-width: 767.98px) {
  #step-edit.editor-layout {
    width: 100% !important;
    max-width: 100% !important;
  }

  #step-edit > .thumb-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  #editorWorkflowWorkspace > .flow-panel {
    padding: 10px 10px 24px !important;
  }

  #editorWorkflowWorkspace > .flow-panel > .panel-head {
    position: static;
    margin: 0 0 12px !important;
    padding: 10px !important;
  }

  #editorWorkflowWorkspace .panel-head,
  #editorWorkflowWorkspace .panel-head .button-row {
    align-items: stretch;
  }

  #editorWorkflowWorkspace .panel-head .button-row {
    width: 100%;
  }

  #editorWorkflowWorkspace .panel-head .button-row > button:not(.assistant-icon-btn) {
    flex: 1 1 140px;
  }

  #editorWorkflowWorkspace .social-quick-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #editorWorkflowWorkspace .social-result-toolbar,
  #editorWorkflowWorkspace .social-card-head,
  #editorWorkflowWorkspace .social-form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }
}

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

/* Assistant Workbench v2 */
:root {
  --v2-assistant-width: 360px;
  --v2-thumbnail-width: 176px;
  --v2-inspector-width: 300px;
  --v2-topbar-height: 56px;
  --v2-bg: #e8eeed;
  --v2-panel: #f8fbfa;
  --v2-panel-soft: #eef4f2;
  --v2-line: rgba(20, 42, 39, 0.12);
  --v2-line-strong: rgba(20, 42, 39, 0.2);
  --v2-text: #17201f;
  --v2-muted: #5e6b69;
  --v2-faint: #85908e;
  --v2-blue: #0b7f86;
  --v2-blue-soft: rgba(11, 127, 134, 0.11);
  --v2-green: #167c5d;
  --v2-green-soft: rgba(22, 124, 93, 0.1);
  --v2-amber: #a66c22;
  --v2-red: #c63834;
  --v2-shadow: 0 14px 38px rgba(20, 42, 39, 0.12);
  --glass-app-bg: linear-gradient(142deg, #e7ecea 0%, #e3eaef 46%, #efebf0 72%, #edf1ee 100%);
  --glass-prism: linear-gradient(118deg, transparent 0 10%, rgba(55, 145, 255, 0.24) 20%, rgba(74, 232, 204, 0.25) 31%, transparent 45%), linear-gradient(64deg, transparent 4%, rgba(255, 122, 205, 0.17) 22%, rgba(119, 126, 255, 0.18) 39%, transparent 57%), linear-gradient(154deg, transparent 40%, rgba(71, 202, 255, 0.21) 57%, rgba(158, 244, 211, 0.2) 69%, rgba(247, 143, 205, 0.14) 83%, transparent 95%);
  --glass-sheen: linear-gradient(116deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.1) 29%, rgba(70, 211, 207, 0.12) 57%, rgba(206, 125, 214, 0.1) 76%, rgba(255, 255, 255, 0.36) 100%);
  --glass-surface: rgba(255, 255, 255, 0.56);
  --glass-surface-strong: rgba(255, 255, 255, 0.74);
  --glass-control: rgba(255, 255, 255, 0.43);
  --glass-border: rgba(255, 255, 255, 0.82);
  --glass-shadow: 0 14px 38px rgba(25, 48, 44, 0.11);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.84), inset 1px 0 0 rgba(71, 202, 255, 0.2), inset -1px 0 0 rgba(247, 143, 205, 0.14);
  --glass-blur: blur(26px) saturate(165%);
}

:root[data-theme="dark"] {
  --v2-bg: #101414;
  --v2-panel: #191e1d;
  --v2-panel-soft: #202624;
  --v2-line: rgba(255, 255, 255, 0.1);
  --v2-line-strong: rgba(255, 255, 255, 0.18);
  --v2-text: #eef4f2;
  --v2-muted: #a8b3b0;
  --v2-faint: #75817e;
  --v2-blue: #53c3c5;
  --v2-blue-soft: rgba(83, 195, 197, 0.14);
  --v2-green: #56c89b;
  --v2-green-soft: rgba(86, 200, 155, 0.12);
  --v2-amber: #e2a84d;
  --v2-red: #f27671;
  --v2-shadow: 0 16px 42px rgba(0, 0, 0, 0.35);
  --glass-app-bg: linear-gradient(142deg, #0d1111 0%, #12191b 48%, #17141a 74%, #111716 100%);
  --glass-prism: linear-gradient(118deg, transparent 0 11%, rgba(40, 137, 238, 0.18) 21%, rgba(52, 205, 180, 0.16) 32%, transparent 46%), linear-gradient(64deg, transparent 5%, rgba(213, 83, 177, 0.12) 23%, rgba(93, 104, 224, 0.14) 40%, transparent 58%), linear-gradient(154deg, transparent 41%, rgba(42, 169, 220, 0.15) 58%, rgba(86, 202, 160, 0.12) 70%, rgba(199, 87, 163, 0.1) 84%, transparent 95%);
  --glass-sheen: linear-gradient(116deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.025) 29%, rgba(69, 207, 203, 0.08) 57%, rgba(198, 102, 205, 0.07) 76%, rgba(255, 255, 255, 0.075) 100%);
  --glass-surface: rgba(25, 31, 30, 0.62);
  --glass-surface-strong: rgba(28, 35, 33, 0.76);
  --glass-control: rgba(255, 255, 255, 0.055);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 18px 46px rgba(0, 0, 0, 0.3);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 1px 0 0 rgba(66, 184, 226, 0.12), inset -1px 0 0 rgba(200, 91, 169, 0.09);
}

.app-shell {
  display: grid !important;
  grid-template-areas: "topbar topbar" "workspace assistant" !important;
  grid-template-columns: minmax(0, 1fr) var(--v2-assistant-width) !important;
  grid-template-rows: var(--v2-topbar-height) minmax(0, 1fr) !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: var(--v2-bg) !important;
  color: var(--v2-text) !important;
}

.topbar {
  grid-area: topbar !important;
  height: var(--v2-topbar-height) !important;
  min-height: var(--v2-topbar-height) !important;
  padding: 0 12px !important;
  border-bottom: 1px solid var(--v2-line) !important;
  background: color-mix(in srgb, var(--v2-panel) 92%, transparent) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
}

.topbar .brand-block { min-width: 0 !important; }
.topbar .brand-copy h1 { font-size: 13px !important; letter-spacing: 0 !important; }
.topbar .brand-copy h1 span { color: var(--v2-muted) !important; font-size: 10px !important; }
.topbar .brand-copy p { max-width: min(48vw, 620px) !important; color: var(--v2-faint) !important; font-size: 9px !important; }
.topbar .top-actions { gap: 7px !important; }
.topbar button { min-height: 32px !important; border-radius: 6px !important; }
.mobile-sheet-btn { display: none !important; }

.rail { display: none !important; }

.assistant-workspace {
  grid-area: assistant;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid var(--v2-line);
  background: var(--v2-panel);
}

.workspace {
  grid-area: workspace !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--v2-bg) !important;
}

.workspace > #step-create:not(.hidden) {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--v2-bg) !important;
  box-shadow: none !important;
}

.workspace > #step-create:not(.hidden) > :not(.project-home-shell) { display: none !important; }
.workspace > #step-create:not(.hidden)::before {
  content: "";
  display: block;
  width: min(58vw, 760px);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--v2-line-strong);
  border-radius: 3px;
  background: var(--v2-panel);
  box-shadow: var(--v2-shadow);
}
.workspace > #step-create:not(.hidden)::after {
  content: "未命名设计";
  position: absolute;
  color: var(--v2-faint);
  font-size: 11px;
  letter-spacing: 0;
}

.assistant-drawer.embedded {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto auto minmax(110px, 1fr) auto auto auto auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--v2-panel) !important;
  color: var(--v2-text) !important;
  box-shadow: none !important;
  transform: none !important;
}

.assistant-header {
  min-height: 58px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--v2-line) !important;
}
.assistant-mark { background: var(--v2-green-soft) !important; color: var(--v2-green) !important; }
.assistant-heading h2 { color: var(--v2-text) !important; font-size: 13px !important; }
.assistant-heading p { color: var(--v2-faint) !important; font-size: 9px !important; }
.assistant-context { padding: 7px 12px !important; border-bottom: 1px solid var(--v2-line) !important; }
.assistant-context-chip { border-color: var(--v2-line) !important; background: var(--v2-panel-soft) !important; color: var(--v2-muted) !important; }

.assistant-tasks {
  display: grid;
  max-height: min(32vh, 280px);
  gap: 6px;
  padding: 7px 10px;
  overflow: auto;
  border-bottom: 1px solid var(--v2-line);
  background: var(--v2-panel-soft);
}
.assistant-tasks.hidden { display: none !important; }
.assistant-tasks.history-expanded { max-height: min(54vh, 480px); }
.assistant-task-overview { display: flex; min-height: 26px; align-items: center; justify-content: space-between; gap: 8px; }
.assistant-task-overview > span { display: grid; min-width: 0; gap: 1px; }
.assistant-task-overview strong { color: var(--v2-text); font-size: 10px; }
.assistant-task-overview small { overflow: hidden; color: var(--v2-faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-task-overview button { min-height: 24px; flex: 0 0 auto; padding: 0 7px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel); color: var(--v2-muted); font-size: 8px; }
.assistant-task-card {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--v2-line);
  border-radius: 7px;
  background: var(--v2-panel);
}
.assistant-task-card > header,
.assistant-task-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.assistant-task-card > header strong { min-width: 0; overflow: hidden; color: var(--v2-text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-task-card > header span { flex: 0 0 auto; color: var(--v2-muted); font-size: 9px; }
.assistant-task-card > p { margin: 0; color: var(--v2-muted); font-size: 10px; line-height: 1.45; }
.assistant-task-progress { width: 100%; height: 3px; overflow: hidden; border-radius: 2px; background: var(--v2-line); }
.assistant-task-progress i { display: block; height: 100%; border-radius: inherit; background: var(--v2-blue); transition: width 180ms ease; }
.assistant-task-card.completed .assistant-task-progress i { background: var(--v2-green); }
.assistant-task-card.failed .assistant-task-progress i { background: var(--v2-red); }
.assistant-task-card ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.assistant-task-card li { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 5px; align-items: start; color: var(--v2-faint); font-size: 9px; line-height: 1.35; }
.assistant-task-card li.running { color: var(--v2-blue); }
.assistant-task-card li.completed { color: var(--v2-muted); }
.assistant-task-card li.failed { color: var(--v2-red); }
.assistant-task-step-icon { display: grid; width: 14px; height: 14px; place-items: center; border: 1px solid var(--v2-line); border-radius: 50%; font-size: 8px; }
.assistant-task-card li.completed .assistant-task-step-icon { border-color: var(--v2-green); color: var(--v2-green); }
.assistant-task-error { color: var(--v2-red); font-size: 9px; line-height: 1.4; }
.assistant-task-error-actionable { display: grid; gap: 6px; }
.assistant-task-error-actionable > button,
.assistant-task-issue-details button {
  width: fit-content;
  min-height: 25px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--v2-red) 45%, var(--v2-line));
  border-radius: 5px;
  background: transparent;
  color: var(--v2-red);
  font-size: 9px;
}
.assistant-task-issue-details {
  display: grid;
  max-height: min(36vh, 320px);
  gap: 8px;
  padding-top: 8px;
  overflow: auto;
  border-top: 1px solid var(--v2-line);
  color: var(--v2-muted);
  font-size: 9px;
}
.assistant-task-issue-details > header,
.assistant-task-issue-page > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.assistant-task-issue-details > header { align-items: flex-start; }
.assistant-task-issue-details > header strong { color: var(--v2-text); font-size: 10px; line-height: 1.4; }
.assistant-task-issue-details > header > span { flex: 0 0 auto; color: var(--v2-faint); white-space: nowrap; }
.assistant-task-issue-details > p { margin: 0; color: var(--v2-muted); line-height: 1.5; }
.assistant-task-issue-page { display: grid; gap: 5px; padding-top: 7px; border-top: 1px dashed var(--v2-line); }
.assistant-task-issue-page:first-of-type { padding-top: 0; border-top: 0; }
.assistant-task-issue-page > header > span { display: grid; min-width: 0; gap: 1px; }
.assistant-task-issue-page > header strong { color: var(--v2-text); font-size: 10px; }
.assistant-task-issue-page > header small { overflow: hidden; color: var(--v2-faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-task-issue-page > ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.assistant-task-card .assistant-task-issue-page li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  color: var(--v2-muted);
  font-size: 9px;
  line-height: 1.45;
}
.assistant-task-card .assistant-task-issue-page li > span {
  padding: 1px 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--v2-red) 12%, transparent);
  color: var(--v2-red);
  font-size: 8px;
  text-align: center;
}
.assistant-task-card .assistant-task-issue-page li.warning > span {
  background: color-mix(in srgb, var(--v2-amber) 14%, transparent);
  color: var(--v2-amber);
}
.assistant-task-card .assistant-task-issue-page li > p { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.assistant-task-issue-details.ready > header strong { color: var(--v2-green); }
.assistant-task-card > footer span { color: var(--v2-faint); font-size: 9px; }
.assistant-task-card > footer .assistant-task-pending,
.assistant-task-card > footer .assistant-task-stale {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assistant-task-card > footer .assistant-task-pending {
  color: var(--v2-blue);
}
.assistant-task-card > footer .assistant-task-stale {
  color: var(--v2-faint);
}
.assistant-task-card > footer button { min-height: 25px; padding: 0 8px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel-soft); color: var(--v2-text); font-size: 9px; }

/* Xiao Pei sits above the composer like a persistent work companion. */
.assistant-composer .assistant-ip-buddy {
  position: absolute;
  z-index: 8;
  width: 112px;
  height: 123px;
  top: -116px;
  right: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .28));
  transition: transform .16s ease, filter .16s ease;
}

.assistant-composer .assistant-ip-buddy:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 14px 19px rgba(0, 0, 0, .32));
}

.assistant-composer .assistant-ip-buddy:focus-visible {
  outline: 2px solid var(--v2-blue, #2f6fed);
  outline-offset: 3px;
  border-radius: 20px 20px 9px 9px;
}

.assistant-ip-buddy-art {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.assistant-ip-buddy-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}

.assistant-ip-buddy-status {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 24px;
  height: 24px;
  top: 3px;
  right: 3px;
  place-items: center;
  border: 3px solid #06101f;
  border-radius: 50%;
  background: var(--v2-blue, #2f6fed);
  color: #fff;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .24);
}

.assistant-ip-buddy-status svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
}

.assistant-ip-buddy.muted .assistant-ip-buddy-status {
  background: #475569;
}

.assistant-drawer.assistant-compact .assistant-ip-buddy {
  width: 90px;
  height: 99px;
  top: -92px;
}

/* Reserve a small right-side lane where Xiao Pei overlaps the lower chat
   area, so messages and quick actions never render underneath the mascot. */
#assistantDrawer > .assistant-messages,
#assistantDrawer > .assistant-brief-actions,
#assistantDrawer > .assistant-suggestions {
  padding-right: 124px !important;
}

.assistant-drawer.assistant-compact .assistant-ip-buddy-art img {
  width: 100%;
  height: 100%;
}
.assistant-stage-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.assistant-stage-actions .confirm { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; }
.assistant-stage-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding-top: 7px; border-top: 1px solid var(--v2-line); }
.assistant-stage-strip span { display: flex; min-width: 0; align-items: center; gap: 4px; color: var(--v2-faint); font-size: 9px; }
.assistant-stage-strip b { display: grid; width: 15px; height: 15px; flex: 0 0 auto; place-items: center; border: 1px solid var(--v2-line); border-radius: 50%; font-size: 8px; }
.assistant-stage-strip span.active { color: var(--v2-blue); }
.assistant-stage-strip span.confirmed b { border-color: var(--v2-green); color: var(--v2-green); }
.assistant-stage-strip span.stale { color: var(--v2-amber); }
.assistant-stage-preview { display: grid; gap: 7px; min-width: 0; padding-top: 2px; }
.assistant-stage-preview.loading { color: var(--v2-muted); font-size: 9px; }
.assistant-stage-preview ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.assistant-stage-preview li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; align-items: start; }
.assistant-stage-preview li > b { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 3px; background: var(--v2-blue-soft); color: var(--v2-blue); font-size: 8px; }
.assistant-stage-preview li span { display: grid; min-width: 0; gap: 2px; }
.assistant-stage-preview li strong { overflow: hidden; color: var(--v2-text); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-stage-preview li small,
.assistant-stage-preview > small { color: var(--v2-faint); font-size: 8px; line-height: 1.45; }
.assistant-stage-preview.images li.assistant-stage-image-page { grid-template-columns: 18px minmax(88px, 30%) minmax(0, 1fr); align-items: center; }
.assistant-stage-preview.images li.assistant-stage-image-page > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel); cursor: zoom-in; }
.assistant-stage-preview.images li.assistant-stage-image-page > span { align-self: center; }
.assistant-stage-conversation-list li.assistant-stage-image-page { grid-template-columns: 20px minmax(112px, 34%) minmax(0, 1fr); align-items: center; }
.assistant-stage-conversation-list li.assistant-stage-image-page > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-panel); cursor: zoom-in; }
.assistant-stage-conversation-result { display: grid; gap: 9px; width: 100%; margin: 12px 0 4px; padding: 10px; border: 1px solid color-mix(in srgb, var(--v2-blue) 38%, var(--v2-line)); border-radius: 7px; background: color-mix(in srgb, var(--v2-blue-soft) 42%, var(--v2-panel)); }
.assistant-stage-conversation-result > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.assistant-stage-conversation-result > header > div { display: grid; gap: 2px; min-width: 0; }
.assistant-stage-conversation-result > header strong { color: var(--v2-text); font-size: 10px; }
.assistant-stage-conversation-result > header span { color: var(--v2-faint); font-size: 8px; line-height: 1.4; }
.assistant-stage-conversation-result > header em { flex: 0 0 auto; color: var(--v2-blue); font-size: 8px; font-style: normal; }
.assistant-stage-conversation-pages { display: grid; gap: 7px; max-height: 520px; overflow-y: auto; padding-right: 2px; }
.assistant-stage-conversation-page { display: grid; gap: 5px; padding: 8px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel-soft); }
.assistant-stage-conversation-page > header { display: flex; align-items: baseline; gap: 6px; }
.assistant-stage-conversation-page > header b { display: grid; width: 19px; height: 19px; flex: 0 0 auto; place-items: center; border-radius: 4px; background: var(--v2-blue-soft); color: var(--v2-blue); font-size: 8px; }
.assistant-stage-conversation-page > header strong { color: var(--v2-text); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.assistant-stage-conversation-page > div { color: var(--v2-muted); font-size: 9px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-stage-conversation-list { display: grid; gap: 6px; max-height: 420px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.assistant-stage-conversation-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 7px; align-items: start; padding: 7px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel-soft); }
.assistant-stage-conversation-list li > b { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 4px; background: var(--v2-blue-soft); color: var(--v2-blue); font-size: 8px; }
.assistant-stage-conversation-list li > span { display: grid; gap: 3px; min-width: 0; }
.assistant-stage-conversation-list strong { color: var(--v2-text); font-size: 9px; overflow-wrap: anywhere; }
.assistant-stage-conversation-list small { color: var(--v2-faint); font-size: 8px; line-height: 1.45; overflow-wrap: anywhere; }
.assistant-stage-conversation-variants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.assistant-stage-conversation-variant { display: grid; gap: 4px; min-width: 0; padding: 6px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel-soft); }
.assistant-stage-conversation-variant.selected { border-color: var(--v2-blue); box-shadow: 0 0 0 1px var(--v2-blue) inset; }
.assistant-stage-conversation-variant-preview { width: 100%; overflow: hidden; border-radius: 3px; }
.assistant-stage-conversation-variant-preview > * { max-width: 100%; }
.assistant-stage-conversation-variant strong { color: var(--v2-text); font-size: 9px; overflow-wrap: anywhere; }
.assistant-stage-conversation-variant small { color: var(--v2-faint); font-size: 8px; }
.assistant-stage-conversation-empty { margin: 0; color: var(--v2-faint); font-size: 9px; }
.assistant-copy-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.assistant-copy-mode button { min-height: 25px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel-soft); color: var(--v2-muted); font-size: 9px; }
.assistant-copy-mode button.active { border-color: var(--v2-blue); background: var(--v2-blue-soft); color: var(--v2-blue); }
.assistant-layout-variants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.assistant-layout-variant { display: grid; min-width: 0; min-height: 58px; gap: 2px; align-content: center; padding: 5px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel-soft); color: var(--v2-muted); text-align: left; }
.assistant-layout-variant.active { border-color: var(--v2-blue); box-shadow: 0 0 0 1px var(--v2-blue) inset; }
.assistant-layout-variant strong { overflow: hidden; color: var(--v2-text); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-layout-variant span { color: var(--v2-blue); font-size: 8px; }
.assistant-layout-variant small { color: var(--v2-faint); font-size: 8px; }
.assistant-capability-diagnostics { margin: 10px; border-top: 1px solid var(--v2-line); }
.assistant-capability-diagnostics summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; color: var(--v2-text); cursor: pointer; }
.assistant-capability-diagnostics summary span { font-size: 11px; font-weight: 700; }
.assistant-capability-diagnostics summary small { color: var(--v2-faint); font-size: 9px; }
.assistant-capability-list { display: grid; gap: 7px; padding-bottom: 10px; color: var(--v2-muted); font-size: 9px; }
.assistant-capability-list > header { display: flex; justify-content: space-between; gap: 8px; }
.assistant-capability-list > header span { color: var(--v2-faint); }
.assistant-capability-rows { display: grid; max-height: 300px; overflow: auto; border: 1px solid var(--v2-line); }
.assistant-capability-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; min-height: 38px; padding: 6px 7px; border-bottom: 1px solid var(--v2-line); }
.assistant-capability-row:last-child { border-bottom: 0; }
.assistant-capability-row > span { display: grid; min-width: 0; gap: 2px; }
.assistant-capability-row strong { color: var(--v2-text); font-size: 9px; }
.assistant-capability-row small { overflow: hidden; color: var(--v2-faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-capability-row em { padding: 2px 4px; border-radius: 3px; background: var(--v2-panel-soft); color: var(--v2-muted); font-size: 8px; font-style: normal; }
.assistant-capability-row.available em { background: color-mix(in srgb, var(--v2-green) 14%, transparent); color: var(--v2-green); }
.assistant-capability-row.service_not_connected em,
.assistant-capability-row.not_implemented em,
.assistant-capability-row.execution_failed em { background: color-mix(in srgb, var(--v2-red) 14%, transparent); color: var(--v2-red); }

.assistant-messages { min-height: 0 !important; padding: 13px 12px 8px !important; background: var(--v2-panel) !important; }
.assistant-message-content { color: var(--v2-text) !important; font-size: 11px !important; line-height: 1.58 !important; }
.assistant-message.user .assistant-message-content { border-radius: 7px !important; background: var(--v2-blue-soft) !important; color: var(--v2-text) !important; }
.assistant-message.assistant .assistant-message-content { border-left-color: var(--v2-amber) !important; }
.assistant-message.result .assistant-message-content { border-left-color: var(--v2-green) !important; }
.assistant-repeat-count { display: inline-flex; min-width: 24px; min-height: 18px; align-items: center; justify-content: center; margin-left: 6px; padding: 0 5px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel-soft); color: var(--v2-faint); font-size: 8px; vertical-align: middle; }
.assistant-design-result { display: grid; gap: 7px; width: 100%; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--v2-line); }
.assistant-design-result > header { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.assistant-design-result > header div { display: grid; gap: 2px; }
.assistant-design-result > header strong { color: var(--v2-text); font-size: 10px; }
.assistant-design-result > header span { color: var(--v2-faint); font-size: 8px; }
.assistant-design-result > header > em { flex: 0 0 auto; color: var(--v2-green); font-size: 8px; font-style: normal; }
.assistant-design-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.assistant-design-variant { display: grid; min-width: 0; align-content: start; gap: 5px; padding: 4px; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-panel-soft); }
.assistant-design-variant.applied { border-color: var(--v2-green); box-shadow: 0 0 0 1px color-mix(in srgb, var(--v2-green) 24%, transparent); }
.assistant-design-preview { position: relative; display: block; width: 100%; min-width: 0; padding: 2px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel); cursor: zoom-in; }
.assistant-design-preview:hover { border-color: var(--v2-blue); }
.assistant-design-preview .mini-slide { width: 100%; border-radius: 3px !important; pointer-events: none; }
.assistant-design-preview-empty { display: grid; min-height: 74px; place-items: center; color: var(--v2-faint); font-size: 8px; }
.assistant-design-badges { position: absolute; top: 4px; left: 4px; display: flex; flex-wrap: wrap; gap: 3px; pointer-events: none; }
.assistant-design-badges em { padding: 2px 3px; border-radius: 3px; background: color-mix(in srgb, var(--v2-panel) 90%, transparent); color: var(--v2-blue); font-size: 7px; font-style: normal; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.assistant-design-variant.applied .assistant-design-badges em:last-child { color: var(--v2-green); }
.assistant-design-variant-copy { display: grid; min-width: 0; gap: 1px; }
.assistant-design-variant-copy strong { overflow: hidden; color: var(--v2-text); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-design-variant-copy span,
.assistant-design-variant > p { margin: 0; color: var(--v2-faint); font-size: 7px; line-height: 1.35; }
.assistant-design-variant > p { min-height: 29px; overflow: hidden; }
.assistant-design-apply { width: 100%; min-height: 25px; padding: 0 4px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel); color: var(--v2-text); font-size: 8px; }
.assistant-design-apply:hover:not(:disabled) { border-color: var(--v2-blue); color: var(--v2-blue); }
.assistant-design-variant.applied .assistant-design-apply { border-color: color-mix(in srgb, var(--v2-green) 35%, var(--v2-line)); color: var(--v2-green); }
.assistant-design-result > footer { display: flex; justify-content: flex-end; gap: 5px; }
.assistant-design-result > footer button { min-height: 25px; padding: 0 7px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel-soft); color: var(--v2-muted); font-size: 8px; }
.assistant-design-result > footer button:hover { border-color: var(--v2-blue); color: var(--v2-blue); }

#closeStyleWorkspaceBtn { display: none; }

.style-moodboard .style-next-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.style-moodboard .style-next-btn svg {
  width: 16px;
  height: 16px;
}

.assistant-moodboard-result { display: grid; gap: 8px; width: 100%; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--v2-line); }
.assistant-moodboard-result > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.assistant-moodboard-result > header strong { color: var(--v2-text); font-size: 10px; }
.assistant-moodboard-result > header span { color: var(--v2-green); font-size: 8px; }
.assistant-moodboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.assistant-moodboard-card { display: grid; min-width: 0; gap: 4px; }
.assistant-moodboard-preview { display: block; width: 100%; overflow: hidden; padding: 0; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel-soft); cursor: zoom-in; }
.assistant-moodboard-preview img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.assistant-moodboard-card strong { overflow: hidden; color: var(--v2-text); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-moodboard-card small { min-height: 24px; overflow: hidden; color: var(--v2-faint); font-size: 7px; line-height: 1.35; }
.assistant-moodboard-result > footer { display: flex; justify-content: flex-end; }
.assistant-moodboard-result > footer button { min-height: 27px; padding: 0 8px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel-soft); color: var(--v2-blue); font-size: 8px; }

.assistant-generated-result { display: grid; gap: 8px; width: 100%; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--v2-line); }
.assistant-generated-result > header { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.assistant-generated-result > header div { display: grid; min-width: 0; gap: 2px; }
.assistant-generated-result > header strong { color: var(--v2-text); font-size: 10px; }
.assistant-generated-result > header span { color: var(--v2-faint); font-size: 8px; }
.assistant-generated-result > header em { flex: 0 0 auto; color: var(--v2-green); font-size: 8px; font-style: normal; }
.assistant-generated-image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 430px; padding-right: 2px; overflow-y: auto; }
.assistant-generated-image-card { display: grid; min-width: 0; gap: 4px; }
.assistant-generated-image-preview { display: block; width: 100%; min-width: 0; overflow: hidden; padding: 0; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel-soft); cursor: zoom-in; }
.assistant-generated-image-preview:hover { border-color: var(--v2-blue); }
.assistant-generated-image-preview { aspect-ratio: var(--assistant-artifact-aspect, 16 / 10); }
.assistant-generated-image-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.assistant-generated-image-card > span { display: grid; min-width: 0; gap: 1px; }
.assistant-generated-image-card strong { overflow: hidden; color: var(--v2-text); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-generated-image-card small { color: var(--v2-faint); font-size: 7px; }
.assistant-generated-copy { max-height: none; overflow: visible; padding: 7px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel-soft); color: var(--v2-muted); font-size: 8px; line-height: 1.55; white-space: pre-wrap; }
.assistant-design-locked-copy { display: block; }
.assistant-design-locked-copy summary { margin: -1px -1px 6px; color: var(--v2-text); font-weight: 700; cursor: pointer; }
.assistant-design-locked-copy > div { white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-generated-result > footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.assistant-generated-result > footer button { min-height: 27px; padding: 0 8px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel-soft); color: var(--v2-blue); font-size: 8px; }
.assistant-generated-result > footer button.primary { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; }
.assistant-generated-result > footer button:disabled { opacity: .55; cursor: default; }
.assistant-artifact-result.loading { min-height: 56px; place-items: center; color: var(--v2-faint); font-size: 9px; }
.assistant-artifact-result.failed > header em { color: var(--v2-red); }
.assistant-artifact-error { display: grid; gap: 4px; padding: 8px; border-left: 3px solid var(--v2-red); background: color-mix(in srgb, var(--v2-red) 7%, var(--v2-panel)); }
.assistant-artifact-error strong { color: var(--v2-text); font-size: 9px; }
.assistant-artifact-error span { color: var(--v2-muted); font-size: 8px; line-height: 1.45; }
.assistant-artifact-error button { justify-self: start; min-height: 27px; padding: 0 8px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel); color: var(--v2-blue); font-size: 8px; }
.assistant-generated-image-card.selected .assistant-generated-image-preview { border-color: var(--v2-green); box-shadow: 0 0 0 1px color-mix(in srgb, var(--v2-green) 45%, transparent); }
.assistant-artifact-variant-select { display: grid; min-width: 0; gap: 1px; width: 100%; padding: 2px 0; border: 0; background: transparent; text-align: left; }
.assistant-artifact-variant-select strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assistant-artifact-variant-select small { color: var(--v2-faint); font-size: 7px; }
.assistant-artifact-outline { display: grid; gap: 5px; max-height: 520px; margin: 0; padding: 0; overflow-y: auto; overflow-x: hidden; list-style: none; }
.assistant-artifact-outline li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; align-items: start; }
.assistant-artifact-outline li > b { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--v2-line); border-radius: 4px; color: var(--v2-blue); font-size: 8px; }
.assistant-artifact-outline li > span { display: grid; min-width: 0; gap: 1px; }
.assistant-artifact-outline strong { color: var(--v2-text); font-size: 9px; }
.assistant-artifact-outline small { overflow: hidden; color: var(--v2-faint); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-ppt-copy-preview { display: grid; gap: 8px; margin-top: 2px; }
.assistant-ppt-copy-preview > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.assistant-ppt-copy-preview > header strong { color: var(--v2-text); font-size: 13px; }
.assistant-ppt-copy-preview > header span { color: var(--v2-muted); font-size: 11px; }
.assistant-ppt-copy-pages { display: grid; gap: 8px; }
.assistant-ppt-copy-page { display: grid; gap: 4px; padding: 8px 9px; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-panel-soft); }
.assistant-ppt-copy-page > header { display: flex; align-items: baseline; gap: 7px; }
.assistant-ppt-copy-page > header b { flex: 0 0 auto; color: var(--v2-muted); font-size: 11px; }
.assistant-ppt-copy-page > header strong { min-width: 0; color: var(--v2-text); font-size: 13px; overflow-wrap: anywhere; }
.assistant-ppt-copy-page small { color: var(--v2-muted); font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-ppt-copy-page > div { color: var(--v2-text); font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-ppt-copy-page .assistant-ppt-copy-empty { color: var(--v2-faint); font-style: italic; }
.assistant-ppt-copy-guidance { min-width: 0; color: var(--v2-muted); font-size: 11px; line-height: 1.6; }
.assistant-ppt-copy-guidance > summary { cursor: pointer; }
.assistant-ppt-copy-guidance > div { padding-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-message.system-notice { margin: 2px 0; }
.assistant-message.system-notice .assistant-message-content { padding: 5px 8px; border: 1px solid var(--v2-line); border-radius: 5px; background: transparent; color: var(--v2-faint); font-size: 8px; }
.assistant-artifact-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.assistant-artifact-compare figure { display: grid; min-width: 0; gap: 3px; margin: 0; }
.assistant-artifact-compare img, .assistant-artifact-compare figure > span { display: grid; width: 100%; aspect-ratio: 16 / 10; place-items: center; overflow: hidden; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel-soft); object-fit: cover; color: var(--v2-faint); font-size: 8px; }
.assistant-artifact-compare figcaption { color: var(--v2-faint); font-size: 7px; text-align: center; }
.assistant-artifact-sync-note { display: grid; gap: 2px; padding: 7px 8px; border-left: 3px solid var(--v2-blue); background: color-mix(in srgb, var(--v2-blue-soft) 54%, var(--v2-panel)); }
.assistant-artifact-sync-note strong { color: var(--v2-text); font-size: 9px; }
.assistant-artifact-sync-note span { color: var(--v2-muted); font-size: 8px; line-height: 1.4; }
.assistant-copy-design-next { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 18px; padding: 14px 0; border-top: 1px solid var(--v2-line); }
.assistant-copy-design-next > div { display: grid; gap: 5px; }
.assistant-copy-design-next strong { color: var(--v2-text); font-size: 14px; font-weight: 600; }
.assistant-copy-design-next > div > span, .assistant-copy-design-more > summary { color: var(--v2-muted); font-size: 12px; }
.assistant-copy-design-next > button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 8px 13px; border: 1px solid var(--v2-line); border-radius: 7px; box-shadow: none; font-size: 13px; }
.assistant-copy-design-next > button svg { width: 16px; height: 16px; }
.assistant-copy-design-more > summary { width: fit-content; padding: 4px 0; cursor: pointer; }
.assistant-copy-design-more footer { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 9px; }
.assistant-artifact-sync-collapsed { justify-content: flex-start !important; }
.assistant-artifact-result .assistant-design-result-grid { max-height: 430px; padding-right: 2px; overflow-y: auto; }

.assistant-sync-prompt { display: grid; gap: 8px; margin: 8px 0 4px; padding: 10px; border: 1px solid color-mix(in srgb, var(--v2-blue) 36%, var(--v2-line)); border-radius: 7px; background: color-mix(in srgb, var(--v2-blue-soft) 70%, var(--v2-panel)); box-shadow: 0 10px 28px rgba(15, 23, 42, .08); }
.assistant-sync-prompt > div { display: grid; gap: 3px; }
.assistant-sync-prompt strong { color: var(--v2-text); font-size: 10px; }
.assistant-sync-prompt span { color: var(--v2-muted); font-size: 8px; line-height: 1.45; }
.assistant-sync-prompt footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.assistant-sync-prompt button { min-height: 27px; padding: 0 8px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel); color: var(--v2-muted); font-size: 8px; }
.assistant-sync-prompt button.primary { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; }

@media (max-width: 767.98px) {
  .assistant-moodboard-grid { grid-template-columns: 1fr; }
  .assistant-generated-image-grid { grid-template-columns: 1fr; }
  .assistant-artifact-compare { grid-template-columns: 1fr; }
  .assistant-artifact-result > footer button { flex: 1 1 calc(50% - 5px); }
  .assistant-sync-prompt footer button { flex: 1 1 auto; }
}
.assistant-suggestions {
  width: 100%;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  align-items: center;
  gap: 5px !important;
  padding: 5px 10px !important;
  overflow-x: auto;
  overflow-y: hidden;
  border-color: var(--v2-line) !important;
  background: var(--v2-panel) !important;
}
.assistant-suggestion { height: 26px !important; min-height: 26px !important; padding: 0 8px !important; border-color: var(--v2-line) !important; background: var(--v2-panel-soft) !important; color: var(--v2-muted) !important; font-size: 9px !important; }
.assistant-composer {
  grid-template-columns: minmax(0, 1fr) 34px !important;
  grid-template-rows: minmax(34px, auto) 32px !important;
  min-height: 82px !important;
  gap: 3px 7px !important;
  margin: 7px 10px 0 !important;
  padding: 7px 7px 6px 9px !important;
  border-color: var(--v2-line-strong) !important;
  border-radius: 7px !important;
  background: var(--v2-panel-soft) !important;
}
.assistant-composer:focus-within { border-color: var(--v2-blue) !important; box-shadow: 0 0 0 3px var(--v2-blue-soft) !important; }
.assistant-composer-tools { display: flex; min-width: 0; height: 32px; grid-column: 1; grid-row: 2; align-items: center; gap: 4px; }
.assistant-composer-tools .assistant-icon-btn { width: 24px !important; height: 24px !important; flex: 0 0 24px; }
.assistant-composer-tools .assistant-icon-btn svg { width: 14px; height: 14px; }
.assistant-composer-tools select { width: auto; min-width: 0 !important; max-width: 124px; height: 24px !important; min-height: 24px !important; flex: 0 1 auto; padding: 0 20px 0 3px !important; border: 0 !important; outline: 0; background-color: transparent !important; color: var(--v2-muted); font-size: 9px; box-shadow: none !important; }
.assistant-composer textarea { min-height: 34px !important; max-height: 150px !important; grid-column: 1 / -1; grid-row: 1; align-self: center; color: var(--v2-text) !important; font-size: 11px !important; }
.assistant-composer .assistant-send-btn { width: 32px !important; height: 32px !important; min-height: 32px !important; grid-column: 2; grid-row: 2; align-self: end; }
.assistant-send-btn { background: var(--v2-blue) !important; }
.assistant-composer-hint { color: var(--v2-faint) !important; }

#step-edit.editor-layout {
  position: relative !important;
  display: grid !important;
  animation: none !important;
  transform: none !important;
  grid-template-columns: var(--v2-thumbnail-width) minmax(0, 1fr) 0 !important;
  grid-template-rows: 52px minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: 0 !important;
  background: var(--v2-bg) !important;
}
#step-edit.hidden { display: none !important; }
#step-edit > .thumb-panel {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 8px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-right: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;
  background: var(--v2-panel) !important;
  box-shadow: none !important;
}
#step-edit > .editor-top-ribbon { grid-column: 1 / -1 !important; grid-row: 1 !important; min-width: 0 !important; border-bottom: 1px solid var(--v2-line) !important; background: var(--v2-panel) !important; }
#step-edit > .canvas-area { grid-column: 2 !important; grid-row: 2 !important; min-width: 0 !important; min-height: 0 !important; }
#step-edit > .inspector {
  position: absolute !important;
  z-index: 1410 !important;
  top: 52px !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block !important;
  width: min(var(--editor-right-width, var(--v2-inspector-width)), calc(100vw - 48px)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: auto !important;
  border: 0 !important;
  border-left: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;
  background: var(--v2-panel) !important;
  box-shadow: -16px 0 40px rgba(20,24,28,.18) !important;
}
#step-edit.right-panel-collapsed > .inspector { display: none !important; }
#step-edit > .editor-panel-resizer.left { display: none !important; }
#step-edit > .editor-panel-resizer.right { z-index: 1420 !important; }
.advanced-page-tabs { display: flex !important; }
#step-edit .thumb-panel > .panel-head { min-height: 34px !important; margin: 0 0 6px !important; padding: 0 2px 6px !important; }
#step-edit .thumb-panel > .panel-head h2 { font-size: 11px !important; }
#step-edit .thumb-panel .editor-left-view { min-height: 0 !important; overflow: auto !important; }
#step-edit .thumb-panel .editor-left-view.hidden { display: none !important; }
#step-edit .thumb-panel #editorPagesView:not(.hidden) { display: grid !important; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
#step-edit .thumbnail-list { min-height: 0 !important; overflow: auto !important; }
.inspector-view-tabs button[data-inspector-view="ai"],
#step-edit .ribbon-ai-actions { display: none !important; }
.inspector-view-tabs button { color: var(--v2-muted) !important; }
.inspector-view-tabs button.active { color: var(--v2-blue) !important; }
#step-edit .office-canvas-shell,
#step-edit .office-canvas-body,
#step-edit .slide-stage { background: var(--v2-bg) !important; }
#step-edit .slide-canvas { border-color: var(--v2-line-strong) !important; box-shadow: var(--v2-shadow) !important; }
.canvas-mode-segmented,
.editor-workflow-nav {
  flex: 0 0 auto !important;
  gap: 2px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--v2-line) !important;
  border-radius: 6px !important;
  background: var(--v2-panel-soft) !important;
}
.canvas-mode-segmented button,
.editor-workflow-nav button {
  display: inline-flex !important;
  min-width: 0 !important;
  min-height: 28px !important;
  height: 28px !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--v2-muted) !important;
  font-size: 10px !important;
  font-weight: 600;
  white-space: nowrap;
}
.canvas-mode-segmented button svg,
.editor-workflow-nav button svg { width: 13px; height: 13px; }
.canvas-mode-segmented button.active,
.editor-workflow-nav button.active { background: var(--v2-panel) !important; color: var(--v2-blue) !important; box-shadow: 0 1px 3px rgba(20,24,28,.12); }
#step-edit.design-preview-mode .ribbon-mode-actions,
#step-edit.design-preview-mode .ribbon-history-actions,
#step-edit.design-preview-mode .ribbon-insert-actions,
#step-edit.design-preview-mode .ribbon-text-actions,
#step-edit.design-preview-mode .ribbon-ai-actions { display: none !important; }
#step-edit.design-preview-mode .ribbon-view-actions { margin-left: auto; }
@media (min-width: 1024px) {
  #step-edit.editor-layout.design-preview-mode { grid-template-columns: var(--v2-thumbnail-width) minmax(0, 1fr) var(--editor-right-width, var(--v2-inspector-width)) !important; }
  #step-edit.design-preview-mode > .inspector {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 2 !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    border-left: 1px solid var(--v2-line) !important;
    box-shadow: none !important;
  }
}

/* The project home replaces the legacy blank-canvas placeholder. */
#step-create.project-start-screen::before,
#step-create.project-start-screen::after {
  content: none !important;
  display: none !important;
}

.workspace > #step-create.project-start-screen:not(.hidden) > .project-home-shell {
  display: grid !important;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.workspace:has(> #step-create.project-start-screen:not(.hidden)) {
  overflow: hidden !important;
}

.workspace > #step-create.project-start-screen:not(.hidden) {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.workspace #newProjectPanel {
  top: 0;
}

/* Optional project fields must remain inside the fixed-width document panel. */
#newProjectPanel .project-optional,
#newProjectPanel .project-optional > .form-grid,
#newProjectPanel .project-optional > .form-grid > label,
#newProjectPanel .project-optional select,
#newProjectPanel .project-optional input,
#newProjectPanel .project-optional textarea {
  min-width: 0;
  max-width: 100%;
}

#newProjectPanel .project-optional > .form-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 14px !important;
}

#newProjectPanel .project-optional > .form-grid > .wide {
  grid-column: 1 / -1;
}
#step-edit.design-preview-mode .inspector-view-tabs,
#step-edit.design-preview-mode #inspectorPropertiesView,
#step-edit.design-preview-mode #inspectorAiView,
#step-edit.design-preview-mode > .editor-panel-resizer.right { display: none !important; }
.design-preview-inspector { display: grid; gap: 12px; padding: 14px; }
.design-preview-inspector.hidden { display: none !important; }
.design-preview-inspector > header { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: start; padding-bottom: 12px; border-bottom: 1px solid var(--v2-line); }
.design-preview-inspector-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 5px; background: var(--v2-blue-soft); color: var(--v2-blue); }
.design-preview-inspector-icon svg { width: 15px; height: 15px; }
.design-preview-inspector header div { display: grid; min-width: 0; gap: 2px; }
.design-preview-inspector header strong { color: var(--v2-text); font-size: 12px; }
.design-preview-inspector header p { margin: 0; color: var(--v2-faint); font-size: 9px; line-height: 1.45; }
.design-status-badge { padding: 3px 5px; border-radius: 4px; background: var(--v2-panel-soft); color: var(--v2-faint); font-size: 8px; font-style: normal; white-space: nowrap; }
.design-status-badge.generating { background: var(--v2-blue-soft); color: var(--v2-blue); }
.design-status-badge.valid { background: color-mix(in srgb, var(--v2-green) 12%, var(--v2-panel)); color: var(--v2-green); }
.design-status-badge.stale,
.design-status-badge.unverified { background: color-mix(in srgb, #d97706 12%, var(--v2-panel)); color: #b45309; }
.design-status-badge.failed { background: color-mix(in srgb, var(--v2-red) 12%, var(--v2-panel)); color: var(--v2-red); }
.design-page-error { padding: 8px; border-left: 3px solid var(--v2-red); background: color-mix(in srgb, var(--v2-red) 7%, var(--v2-panel)); color: var(--v2-muted); font-size: 9px; line-height: 1.45; }
.design-page-primary,
.design-page-apply { width: 100%; min-height: 34px; }
.design-region-tools { display: grid; gap: 8px; padding: 10px 0; border-top: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line); }
.design-region-tools-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.design-region-tools-head > span { display: inline-flex; align-items: center; gap: 6px; color: var(--v2-text); font-size: 10px; }
.design-region-tools-head > span svg { width: 14px; height: 14px; color: #a855f7; }
.design-region-select { display: inline-flex; min-height: 28px; align-items: center; gap: 5px; padding: 0 5px; border: 0 !important; background: transparent !important; color: var(--v2-muted); }
.design-region-select svg { width: 14px; height: 14px; color: #a855f7; }
.design-region-select.active { color: #a855f7 !important; box-shadow: inset 0 -2px currentColor; }
.design-region-selection-status { margin: 0; color: var(--v2-faint); font-size: 9px; line-height: 1.45; }
.design-region-selection-status.ready { color: #168c72; }
.design-region-prompt-label { display: grid; gap: 5px; color: var(--v2-muted); font-size: 9px; }
.design-region-prompt-label textarea { width: 100%; min-height: 64px; resize: vertical; border: 1px solid var(--v2-line); border-radius: 5px; background: color-mix(in srgb, var(--v2-panel) 80%, transparent); color: var(--v2-text); font: inherit; line-height: 1.5; }
.design-region-prompt-label textarea:focus { border-color: #a855f7; outline: 2px solid color-mix(in srgb, #a855f7 18%, transparent); }
.design-region-actions { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 6px; }
.design-region-actions button { min-height: 32px; }
.design-region-actions button:first-child { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.design-region-actions button:first-child svg { width: 14px; height: 14px; }
.design-region-apply-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.design-batch-menu { border-top: 1px solid var(--v2-line); padding-top: 9px; }
.design-batch-menu summary { color: var(--v2-muted); font-size: 9px; cursor: pointer; }
.design-batch-menu > div { display: grid; gap: 6px; padding-top: 8px; }
.design-preview-safety { margin: 0; color: var(--v2-faint); font-size: 8px; line-height: 1.45; }
.design-smart-operations { display: grid; gap: 9px; }
.design-smart-card { display: grid; gap: 9px; padding: 10px; border: 1px solid var(--v2-line); border-radius: 7px; background: color-mix(in srgb, var(--v2-panel-soft) 74%, var(--v2-panel)); }
.design-smart-card > header,
.composition-candidate-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.design-smart-card > header span,
.composition-candidate-head strong { display: inline-flex; align-items: center; min-width: 0; gap: 6px; color: var(--v2-text); font-size: 10px; }
.design-smart-card > header svg { width: 14px; height: 14px; color: var(--v2-blue); }
.design-smart-card > header small,
.composition-candidate-head span { color: var(--v2-faint); font-size: 8px; white-space: nowrap; }
.design-smart-field { display: grid; gap: 5px; color: var(--v2-muted); font-size: 9px; }
.design-smart-field textarea,
.design-smart-field input,
.design-smart-grid input,
.design-smart-grid select { width: 100%; min-width: 0; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel); color: var(--v2-text); font: inherit; font-size: 10px; }
.design-smart-field textarea { min-height: 62px; padding: 7px; resize: vertical; line-height: 1.45; }
.design-smart-field input,
.design-smart-grid input,
.design-smart-grid select { height: 30px; padding: 0 7px; }
.design-smart-field.compact { grid-template-columns: 52px minmax(0, 1fr); align-items: center; }
.design-smart-mode,
.design-smart-chips,
.design-reference-modes,
.design-style-guard { display: flex; flex-wrap: wrap; gap: 6px; }
.design-smart-mode label,
.design-smart-chips label,
.design-reference-modes label,
.design-style-guard label,
.design-reference-pages label { display: inline-flex; align-items: center; min-width: 0; gap: 5px; color: var(--v2-muted); font-size: 9px; line-height: 1.3; }
.design-smart-mode label,
.design-smart-chips label,
.design-reference-modes label { padding: 5px 6px; border: 1px solid var(--v2-line); border-radius: 999px; background: var(--v2-panel); }
.design-smart-mode input,
.design-smart-chips input,
.design-reference-modes input,
.design-style-guard input,
.design-reference-pages input { accent-color: var(--v2-blue); }
.design-smart-grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 8px; }
.design-smart-grid label { display: grid; gap: 5px; color: var(--v2-muted); font-size: 9px; }
.design-reference-pages { border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-panel); }
.design-reference-pages summary { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; color: var(--v2-text); font-size: 10px; cursor: pointer; }
.design-reference-pages summary em { color: var(--v2-faint); font-style: normal; }
.design-reference-pages > div { display: grid; max-height: 150px; overflow: auto; gap: 5px; padding: 0 8px 8px; }
.design-reference-pages p { margin: 0; color: var(--v2-faint); font-size: 9px; }
.design-smart-actions,
.design-composition-actions,
.design-candidate-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.design-smart-actions.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.design-smart-actions button,
.design-composition-actions button,
.design-candidate-actions button { min-width: 0; min-height: 30px; white-space: normal; line-height: 1.25; }
.composition-candidates { gap: 10px; }
.composition-candidate { display: grid; gap: 7px; padding: 8px; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-panel); }
.composition-candidate.stale { border-color: color-mix(in srgb, #d97706 55%, var(--v2-line)); background: color-mix(in srgb, #d97706 8%, var(--v2-panel)); }
.composition-candidate p { margin: 0; color: #b45309; font-size: 9px; line-height: 1.4; }
.composition-preview-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.composition-preview-strip img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel-soft); }
.archived-pages-list { border-top: 1px solid var(--v2-line); padding-top: 8px; }
.archived-pages-list summary { color: var(--v2-muted); font-size: 9px; cursor: pointer; }
.archived-pages-list div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; color: var(--v2-muted); font-size: 9px; }
.design-thumb-select { position: absolute; top: 7px; left: 7px; z-index: 3; display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(255,255,255,.75); border-radius: 5px; background: rgba(18,22,28,.62); color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.16); }
.design-thumb-select svg { width: 14px; height: 14px; }
.design-thumb-select.selected { background: var(--v2-blue); border-color: var(--v2-blue); }
.page-workflow-thumb.selected-for-design { outline: 2px solid var(--v2-blue); outline-offset: -2px; }
@media (max-width: 720px) {
  .design-smart-actions,
  .design-composition-actions,
  .design-candidate-actions,
  .design-smart-actions.two,
  .design-smart-grid { grid-template-columns: 1fr; }
}
.design-page-canvas,
.design-page-empty { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: var(--v2-panel-soft); }
.design-page-canvas > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.design-preview-overlay { position: absolute; z-index: 8; top: 10px; left: 10px; display: grid; gap: 2px; max-width: calc(100% - 58px); padding: 6px 8px; border: 1px solid rgba(255,255,255,.22); border-radius: 5px; background: rgba(20,24,28,.76); color: #fff; text-align: left; backdrop-filter: blur(12px); pointer-events: none; }
.design-preview-overlay strong { font-size: 10px; }
.design-preview-overlay span { font-size: 8px; }
.design-preview-overlay.generating { inset: 0; top: 0; left: 0; max-width: none; place-content: center; justify-items: center; background: rgba(20,24,28,.58); }
.design-region-layer { position: absolute; z-index: 9; inset: 0; pointer-events: none; }
.design-region-layer.selecting { cursor: crosshair; }
.design-page-canvas.region-select-mode { cursor: crosshair; touch-action: none; }
.design-page-canvas.region-select-mode > .image-preview-trigger { pointer-events: none; opacity: .25; }
.design-region-selection { position: absolute; display: block; min-width: 2px; min-height: 2px; border: 2px solid #a855f7; background: color-mix(in srgb, #a855f7 16%, transparent); box-shadow: 0 0 0 9999px rgba(8,12,18,.38), 0 0 0 1px rgba(255,255,255,.8) inset; }
.design-region-selection > span { position: absolute; right: 0; bottom: 100%; padding: 3px 5px; background: #a855f7; color: #fff; font-size: 8px; white-space: nowrap; }
.design-region-progress { position: absolute; z-index: 14; inset: 0; display: grid; place-content: center; justify-items: center; gap: 5px; background: rgba(20,24,28,.66); color: #fff; text-align: center; backdrop-filter: blur(4px); }
.design-region-progress strong { font-size: 12px; }
.design-region-progress small { font-size: 9px; opacity: .76; }
.design-page-empty { display: grid; place-content: center; justify-items: center; gap: 7px; color: var(--v2-faint); text-align: center; }
.design-page-empty > span { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-panel); }
.design-page-empty svg { width: 18px; height: 18px; }
.design-page-empty strong { color: var(--v2-text); font-size: 13px; }
.design-page-empty small { max-width: 220px; font-size: 9px; }
.design-page-empty.failed > span { color: var(--v2-red); }
.design-progress-spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: design-preview-spin .8s linear infinite; }
.thumb { position: relative; }
.design-thumb-image img { width: 100%; height: 100%; object-fit: cover; }
.thumb-design-status { position: absolute; top: 6px; right: 6px; z-index: 3; width: 8px; height: 8px; border: 2px solid var(--v2-panel); border-radius: 50%; background: #9ca3af; }
.thumb-design-status.generating { background: #2563eb; }
.thumb-design-status.valid { background: #16a36a; }
.thumb-design-status.stale,
.thumb-design-status.unverified { background: #d97706; }
.thumb-design-status.failed { background: #dc2626; }
@keyframes design-preview-spin { to { transform: rotate(360deg); } }
.assistant-result-flash { animation: assistant-result-flash 820ms ease-out; }
.assistant-tools-backdrop {
  position: fixed;
  z-index: 1390;
  inset: var(--v2-topbar-height) 0 0 0;
  background: rgba(10, 12, 14, 0.22);
  backdrop-filter: blur(2px);
}
.assistant-tools-backdrop.hidden { display: none !important; }
.assistant-tools-drawer {
  position: fixed;
  z-index: 1400;
  top: var(--v2-topbar-height);
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(360px, calc(100vw - 28px));
  overflow: auto;
  border-left: 1px solid var(--v2-line);
  background: var(--v2-panel);
  color: var(--v2-text);
  box-shadow: -18px 0 46px rgba(20,24,28,.16);
  transform: translateX(102%);
  transition: transform 180ms ease;
}
.assistant-tools-drawer.open { transform: translateX(0); }
.assistant-tools-drawer > header,
.assistant-preferences-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.assistant-tools-drawer > header { min-height: 58px; padding: 10px 12px; border-bottom: 1px solid var(--v2-line); }
.assistant-tools-drawer > header div,
.assistant-preferences-panel > header { display: grid; gap: 2px; }
.assistant-tools-drawer header strong { font-size: 12px; }
.assistant-tools-drawer header span { color: var(--v2-faint); font-size: 9px; }
.assistant-tool-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 12px; border-bottom: 1px solid var(--v2-line); }
.assistant-tool-nav button { display: flex; min-width: 0; min-height: 42px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--v2-line); border-radius: 7px; background: var(--v2-panel-soft); color: var(--v2-text); text-align: left; }
.assistant-tool-nav button:hover { border-color: var(--v2-blue); color: var(--v2-blue); }
.assistant-tool-nav svg { width: 16px; height: 16px; }
.assistant-tool-nav span { min-width: 0; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-preferences-panel { align-content: start; display: grid; gap: 10px; padding: 14px 12px 20px; }
.assistant-preferences-panel > header { display: flex; margin-bottom: 2px; }
.assistant-preferences-panel label { display: grid; gap: 5px; }
.assistant-preferences-panel label > span { color: var(--v2-muted); font-size: 9px; }
.assistant-preferences-panel input,
.assistant-preferences-panel select { width: 100%; min-height: 34px; padding: 0 9px; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-panel-soft); color: var(--v2-text); font-size: 10px; }
.assistant-preference-actions { display: flex; justify-content: flex-end; gap: 7px; padding-top: 4px; }
@keyframes assistant-result-flash {
  0% { box-shadow: 0 0 0 0 rgba(8,119,209,.5), var(--v2-shadow); }
  45% { box-shadow: 0 0 0 7px rgba(8,119,209,.2), var(--v2-shadow); }
  100% { box-shadow: 0 0 0 0 rgba(8,119,209,0), var(--v2-shadow); }
}

@media (max-width: 1279.98px) {
  :root { --v2-assistant-width: 320px; --v2-thumbnail-width: 144px; --v2-inspector-width: 292px; }
}

@media (max-width: 1023.98px) {
  :root { --v2-assistant-width: 320px; --v2-thumbnail-width: 128px; }
  .app-shell {
    grid-template-areas: "topbar" "workspace" !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .assistant-workspace {
    position: fixed !important;
    z-index: 1320 !important;
    top: var(--v2-topbar-height) !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(var(--v2-assistant-width), calc(100vw - 40px)) !important;
    border-left: 1px solid var(--v2-line) !important;
    box-shadow: -16px 0 42px rgba(20,24,28,.2) !important;
    transform: translateX(102%);
    transition: transform 180ms ease;
    pointer-events: none;
  }
  body.mobile-assistant-open .assistant-workspace { transform: translateX(0); pointer-events: auto; }
  .mobile-sheet-btn { display: inline-grid !important; width: 32px !important; min-width: 32px !important; padding: 0 !important; place-items: center !important; }
  #step-edit > .inspector { right: 0 !important; }
  #step-edit > .editor-panel-resizer.right { right: 0 !important; }
}

@media (max-width: 767.98px) {
  .app-shell {
    grid-template-areas: "topbar" "workspace" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 52px minmax(0, 1fr) !important;
  }
  .topbar { height: 52px !important; min-height: 52px !important; }
  .topbar .brand-copy h1 span,
  .topbar .brand-copy p,
  .topbar #saveState { display: none !important; }
  .mobile-sheet-btn { display: inline-grid !important; width: 32px !important; min-width: 32px !important; padding: 0 !important; place-items: center !important; }
  .mobile-sheet-btn[aria-expanded="true"] { border-color: var(--v2-blue) !important; background: var(--v2-blue-soft) !important; color: var(--v2-blue) !important; }
  .assistant-workspace {
    position: fixed !important;
    z-index: 1320 !important;
    inset: 52px 0 0 0 !important;
    width: 100vw !important;
    height: calc(100dvh - 52px) !important;
    border: 0 !important;
    background: var(--v2-panel) !important;
    transform: translateX(-102%);
    transition: transform 180ms ease;
    pointer-events: none;
  }
  body.mobile-assistant-open .assistant-workspace { transform: translateX(0); pointer-events: auto; }
  .assistant-drawer.embedded #assistantCloseBtn { display: grid !important; }
  .assistant-tasks { max-height: 32vh; }
  .workspace { grid-area: workspace !important; }
  #step-edit.editor-layout { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: 46px minmax(0, 1fr) !important; }
  #step-edit > .editor-top-ribbon { height: 46px !important; overflow-x: auto !important; }
  #step-edit > .canvas-area {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #step-edit > .inspector { display: none !important; }
  #step-edit > .thumb-panel {
    position: fixed !important;
    z-index: 60 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 132px !important;
    padding: 6px 8px !important;
    border: 0 !important;
    border-top: 1px solid var(--v2-line) !important;
  }
  #step-edit .thumb-panel > .panel-head,
  #step-edit .slide-page-actions { display: none !important; }
  #step-edit .thumb-panel #editorPagesView { display: block !important; height: 100% !important; }
  #step-edit .thumbnail-list { display: flex !important; height: 100% !important; gap: 8px !important; overflow-x: auto !important; overflow-y: hidden !important; }
  #step-edit .thumb { flex: 0 0 92px !important; }
  #step-edit .office-canvas-shell { padding-bottom: 132px !important; }
  body.mobile-inspector-open #step-edit > .inspector {
    position: absolute !important;
    grid-column: auto !important;
    grid-row: auto !important;
    z-index: 1330 !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    overflow: auto !important;
    border: 0 !important;
    background: var(--v2-panel) !important;
    box-shadow: none !important;
  }
  body.mobile-inspector-open #rightEditorPanelResizer {
    position: absolute !important;
    z-index: 1340 !important;
    top: 8px !important;
    right: 8px !important;
    display: block !important;
    width: 34px !important;
    height: 34px !important;
  }
  body.mobile-inspector-open #rightEditorPanelResizer > button { transform: rotate(180deg); }
  #step-edit .office-canvas-shell { min-height: 300px !important; height: 100% !important; }
  .workspace > #step-create:not(.hidden)::before { width: min(82vw, 560px); }
}

@media (prefers-reduced-motion: reduce) {
  .assistant-task-progress i { transition: none !important; }
  .assistant-result-flash { animation: none !important; }
}

/* Final ergonomic pass. Keep the floating assistant from reserving layout space. */
.app-shell {
  grid-template-areas: "topbar" "workspace" !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.workspace { grid-area: workspace !important; }
.assistant-workspace { display: none !important; }

.workspace:has(> #step-create:not(.hidden)) {
  overflow: auto !important;
}

.workspace > #step-create:not(.hidden) {
  position: static !important;
  display: block !important;
  width: min(1180px, calc(100% - 48px)) !important;
  height: auto !important;
  min-height: 100% !important;
  margin: 0 auto !important;
  padding: 28px 0 56px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  justify-items: stretch !important;
  align-items: start !important;
}

.workspace > #step-create:not(.hidden)::before,
.workspace > #step-create:not(.hidden)::after {
  display: none !important;
  content: none !important;
}

.workspace > #step-create:not(.hidden) > .panel-head {
  display: flex !important;
  width: 100% !important;
}

.workspace > #step-create:not(.hidden) > .project-hub-view {
  display: grid !important;
  width: 100% !important;
}

.workspace > #step-create:not(.hidden) > .project-hub-view.empty-state {
  display: flex !important;
}

.workspace > #step-create:not(.hidden) > .new-project-panel {
  display: block !important;
  width: 100% !important;
}

#step-create .panel-head {
  margin-bottom: 22px !important;
  padding-bottom: 18px !important;
}

#step-create .panel-head h2 {
  font-size: 22px !important;
  line-height: 1.3 !important;
}

#step-create .panel-head p {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

#step-create .project-card-actions .primary-btn,
#step-create .project-card-actions .ghost-btn,
#step-create .project-list-toggle {
  min-height: 34px !important;
  font-size: 12px !important;
}

#step-create .primary-btn {
  border-color: var(--v2-blue) !important;
  background: var(--v2-blue) !important;
}

#step-create .primary-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--v2-blue) 84%, #000) !important;
  background: color-mix(in srgb, var(--v2-blue) 84%, #000) !important;
}

.topbar .brand-copy h1 {
  font-size: 14px !important;
  line-height: 1.25 !important;
}

.topbar .brand-copy h1 span,
.topbar .brand-copy p {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.topbar .brand-home-button {
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  flex: 0 0 34px !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.topbar button,
.topbar .status-dot,
.topbar .save-state,
.topbar .license-points {
  min-height: 34px !important;
  font-size: 12px !important;
}

.topbar .primary-btn,
#step-edit .primary-btn {
  border-color: var(--v2-blue) !important;
  background: var(--v2-blue) !important;
}

.topbar .primary-btn:hover:not(:disabled),
#step-edit .primary-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--v2-blue) 84%, #000) !important;
  background: color-mix(in srgb, var(--v2-blue) 84%, #000) !important;
}

#step-edit.editor-layout {
  grid-template-rows: 56px minmax(0, 1fr) !important;
}

#step-edit > .inspector { top: 56px !important; }

#step-edit .canvas-toolbar {
  height: 55px !important;
  max-height: 55px !important;
  padding: 10px 12px !important;
  gap: 8px !important;
}

#step-edit .ribbon-group {
  min-height: 34px !important;
  gap: 6px !important;
  padding-right: 9px !important;
}

#step-edit .ribbon-tool,
#step-edit .ribbon-select,
#step-edit .ribbon-number,
#step-edit .ribbon-color,
#step-edit .ribbon-ai-actions .compact-btn {
  height: 34px !important;
  min-height: 34px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

#step-edit .ribbon-tool.icon-only-control {
  width: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
}

#step-edit .ribbon-tool svg,
#step-edit .ribbon-ai-actions svg {
  width: 16px !important;
  height: 16px !important;
}

#step-edit .thumb-panel > .panel-head h2 {
  font-size: 13px !important;
  line-height: 1.3 !important;
}

#step-edit .slide-page-actions .ghost-btn {
  min-height: 36px !important;
  font-size: 12px !important;
}

#step-edit .thumb-title {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

/* Include the caption in the thumbnail's intrinsic height. The previous
   aspect-ratio rule sized only the preview surface, so captions overflowed
   and were clipped on projects with more than one page. */
#step-edit .thumbnail-list > .thumb {
  height: auto !important;
  min-height: 0 !important;
  margin-bottom: 22px !important;
  overflow: visible !important;
}

#step-edit .thumbnail-list > .thumb > .thumb-title {
  position: absolute;
  right: 7px;
  bottom: -20px;
  left: 7px;
  margin-top: 0;
}

#step-edit .office-canvas-shell {
  position: relative !important;
  grid-template-rows: 24px minmax(0, 1fr) 40px auto !important;
}

#step-edit .office-status-bar {
  min-height: 40px !important;
  padding-inline: 10px !important;
}

#step-edit .status-bar-summary,
#step-edit .status-bar-view-tools,
#step-edit .status-bar-zoom,
#editorZoomStatus {
  font-size: 11px !important;
}

#step-edit .status-bar-btn {
  min-width: 32px !important;
  min-height: 32px !important;
  font-size: 11px !important;
}

#step-edit .status-bar-btn.icon-only-control {
  width: 32px !important;
  padding: 0 !important;
}

#step-edit .editor-notes-dock {
  height: clamp(156px, 24vh, 184px) !important;
  min-height: 0 !important;
}

#step-edit .editor-notes-tabs {
  min-height: 40px !important;
  padding: 5px 10px !important;
}

#step-edit .editor-notes-tabs button {
  min-height: 32px !important;
  font-size: 12px !important;
}

#step-edit .notes-isolation-badge,
#step-edit .notes-toggle,
#step-edit .notes-meta,
#step-edit .speaker-notes-head span {
  font-size: 11px !important;
}

#step-edit .speaker-notes-head strong { font-size: 13px !important; }

#step-edit .speaker-notes-panel textarea {
  min-height: 68px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

#step-edit > .inspector,
#step-edit > .inspector button,
#step-edit > .inspector input,
#step-edit > .inspector select,
#step-edit > .inspector textarea {
  font-size: 12px !important;
}

#step-edit > .inspector button,
#step-edit > .inspector input,
#step-edit > .inspector select {
  min-height: 34px !important;
}

#toggleRightEditorPanelBtn {
  width: 28px !important;
  min-width: 28px !important;
  height: 48px !important;
}

#step-edit > .editor-panel-resizer {
  position: absolute;
  z-index: 1420 !important;
  top: 48px;
  bottom: 0;
  width: 11px;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}

#step-edit > .editor-panel-resizer::before {
  /* Keep the transparent resize target without drawing a full-height line. */
  content: none;
}

#step-edit > .editor-panel-resizer.left {
  left: var(--editor-left-width, var(--v2-thumbnail-width));
  transform: translateX(-50%);
}

#step-edit > .editor-panel-resizer.right {
  right: var(--editor-right-width, var(--v2-inspector-width));
  transform: translateX(50%);
}

#step-edit.left-panel-collapsed > .editor-panel-resizer.left,
#step-edit.right-panel-collapsed > .editor-panel-resizer.right {
  transform: none;
}

#step-edit.left-panel-collapsed > .editor-panel-resizer.left { left: 0; }
#step-edit.right-panel-collapsed > .editor-panel-resizer.right { right: 0; }

#step-edit > .editor-panel-resizer > button {
  position: absolute;
  top: 42%;
  left: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--v2-line-strong);
  border-radius: 6px;
  background: var(--v2-panel);
  color: var(--v2-muted);
  box-shadow: 0 3px 10px rgba(20, 24, 28, .12);
  cursor: pointer;
  transform: translate(-50%, -50%);
}

#step-edit > .editor-panel-resizer > button:hover {
  border-color: var(--v2-blue);
  color: var(--v2-blue);
}

#step-edit > .editor-panel-resizer > button svg {
  width: 14px;
  height: 14px;
}

body.editor-panel-resizing,
body.editor-panel-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

@media (max-width: 1023.98px) {
  #step-edit > .editor-panel-resizer {
    display: none !important;
  }

  body.mobile-inspector-open #rightEditorPanelResizer {
    display: block !important;
  }
}

@media (min-width: 1024px) {
  #step-edit.right-panel-collapsed > .editor-panel-resizer.right > #toggleRightEditorPanelBtn {
    right: 0 !important;
    left: auto !important;
    transform: translateY(-50%) !important;
  }
}

.assistant-heading h2 { font-size: 14px !important; }
.assistant-heading p,
.assistant-context-chip { font-size: 11px !important; }
.assistant-message-content,
.assistant-composer textarea { font-size: 13px !important; }
.assistant-suggestion { min-height: 30px !important; font-size: 11px !important; }
.assistant-task-overview strong,
.assistant-task-card > header strong { font-size: 12px !important; }
.assistant-task-overview small,
.assistant-task-card > p,
.assistant-task-card li,
.assistant-task-card > footer span { font-size: 10px !important; }

.assistant-tools-drawer header strong { font-size: 14px !important; }
.assistant-tools-drawer header span,
.assistant-preferences-panel label > span { font-size: 11px !important; }
.assistant-tool-nav span,
.assistant-preferences-panel input,
.assistant-preferences-panel select { font-size: 12px !important; }
.assistant-preferences-panel input,
.assistant-preferences-panel select { min-height: 36px !important; }

.app-shell button:focus-visible,
.app-shell input:focus-visible,
.app-shell select:focus-visible,
.app-shell textarea:focus-visible,
.assistant-float-launcher:focus-visible {
  outline: 2px solid var(--v2-blue) !important;
  outline-offset: 2px !important;
}

@media (max-width: 1279.98px) {
  :root { --v2-thumbnail-width: 152px; }
}

@media (max-width: 1023.98px) {
  :root { --v2-thumbnail-width: 132px; }
}

/* Desktop clarity pass: one home for each command, with a quiet canvas by default. */
:root {
  --v2-topbar-height: 54px;
  --v2-thumbnail-width: 164px;
}

.topbar {
  height: var(--v2-topbar-height) !important;
  min-height: var(--v2-topbar-height) !important;
  padding-inline: 12px !important;
}

.topbar .top-actions { gap: 4px !important; }
.topbar #saveDeckBtn { display: none !important; }
.topbar #apiStatus,
.topbar #saveState {
  min-height: 28px !important;
  padding-inline: 9px !important;
  font-size: 11px !important;
  white-space: nowrap;
}

.topbar #exportPptBtn {
  min-height: 34px !important;
  padding-inline: 12px !important;
}

.topbar .brand-copy p {
  max-width: min(46vw, 560px) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#step-edit.editor-layout {
  grid-template-rows: 48px minmax(0, 1fr) !important;
}

#step-edit > .inspector { top: 48px !important; }

#step-edit > .editor-top-ribbon {
  height: 48px !important;
  overflow: hidden !important;
}

#step-edit .canvas-toolbar {
  height: 47px !important;
  max-height: 47px !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  padding: 7px 10px !important;
}

#step-edit .ribbon-title { display: none !important; }

#step-edit .ribbon-group {
  min-height: 32px !important;
  gap: 4px !important;
  margin-right: 2px !important;
  padding: 0 8px 0 0 !important;
  border-right: 1px solid var(--v2-line) !important;
}

#step-edit .ribbon-view-actions,
#step-edit .ribbon-text-actions {
  display: none !important;
}

#editorRibbon[data-selected-type="text"] .ribbon-text-actions {
  display: flex !important;
}

#step-edit .ribbon-insert-actions { border-right: 0 !important; }

#step-edit .ribbon-tool,
#step-edit .ribbon-select,
#step-edit .ribbon-number,
#step-edit .ribbon-color,
#step-edit .ribbon-insert-actions button {
  height: 32px !important;
  min-height: 32px !important;
  font-size: 12px !important;
}

#step-edit #addTextBtn {
  min-width: 66px !important;
  padding-inline: 9px !important;
}

#step-edit .ribbon-insert-actions .ribbon-select {
  min-width: 118px !important;
}

#step-edit .office-canvas-shell.rulers-hidden {
  grid-template-rows: minmax(0, 1fr) 40px auto !important;
}

#step-edit .office-canvas-shell:not(.rulers-hidden) {
  grid-template-rows: 24px minmax(0, 1fr) 40px auto !important;
}

#step-edit .office-canvas-shell.rulers-hidden .office-canvas-body {
  grid-template-columns: minmax(0, 1fr) !important;
}

#step-edit .office-canvas-shell,
#step-edit .office-canvas-body,
#step-edit .slide-stage {
  background-color: #eceff1 !important;
  background-image: none !important;
}

:root[data-theme="dark"] #step-edit .office-canvas-shell,
:root[data-theme="dark"] #step-edit .office-canvas-body,
:root[data-theme="dark"] #step-edit .slide-stage {
  background-color: #151719 !important;
  background-image: none !important;
}

#step-edit .thumb-panel {
  padding: 10px 8px !important;
}

#step-edit .thumb-panel > .panel-head {
  min-height: 32px !important;
  margin-bottom: 8px !important;
}

#step-edit .thumb-panel > .panel-head h2 {
  font-size: 14px !important;
}

.assistant-drawer:not(.embedded) {
  border-color: var(--v2-line-strong) !important;
  background: var(--v2-panel) !important;
  box-shadow: 0 16px 40px rgba(17, 24, 39, .2) !important;
}

.assistant-header {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) auto !important;
  min-height: 52px !important;
  gap: 7px !important;
  padding: 7px 8px !important;
  cursor: move;
  background: var(--v2-panel) !important;
}

.assistant-drag-grip {
  display: grid;
  width: 18px;
  height: 32px;
  place-items: center;
  color: var(--v2-faint);
  cursor: grab;
}

.assistant-drag-grip svg { width: 15px; height: 15px; }
.assistant-drawer.is-moving .assistant-drag-grip { cursor: grabbing; }
.assistant-heading { gap: 7px !important; }
.assistant-heading > div { min-width: 0; }
.assistant-heading p { display: none !important; }
.assistant-heading h2 { font-size: 14px !important; }
.assistant-mark { width: 28px !important; height: 28px !important; border-radius: 6px !important; }
.assistant-mark svg { width: 15px !important; height: 15px !important; }
.assistant-header-actions { gap: 2px !important; }

.assistant-header-actions .assistant-icon-btn {
  width: 30px !important;
  height: 30px !important;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  cursor: pointer;
}

.assistant-header-actions .assistant-icon-btn:hover:not(:disabled) {
  border-color: var(--v2-line) !important;
  background: var(--v2-panel-soft) !important;
}

.assistant-resize-handle {
  min-width: 0 !important;
  min-height: 0 !important;
}

.assistant-resize-handle.edge-n,
.assistant-resize-handle.edge-s { height: 8px !important; }

.assistant-resize-handle.edge-e,
.assistant-resize-handle.edge-w { width: 8px !important; }

.assistant-resize-handle.edge-ne,
.assistant-resize-handle.edge-se,
.assistant-resize-handle.edge-sw,
.assistant-resize-handle.edge-nw {
  width: 22px !important;
  height: 22px !important;
}

.assistant-context {
  min-height: 38px !important;
  padding: 6px 10px !important;
  background: var(--v2-panel-soft) !important;
}

.assistant-tasks {
  max-height: min(38vh, 320px);
  padding: 6px 10px !important;
  background: var(--v2-panel) !important;
}

.assistant-task-overview { min-height: 32px; }
.assistant-tasks:not(.history-expanded) .assistant-task-card.completed { display: none; }
.assistant-messages { padding: 11px 10px 7px !important; }
.assistant-suggestions { padding-inline: 10px !important; }
.assistant-composer { margin-inline: 10px !important; }
.assistant-composer-hint { margin-bottom: 7px !important; }

.assistant-float-launcher {
  right: 18px !important;
  bottom: 18px !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 26px rgba(17, 24, 39, .2) !important;
}

.assistant-float-launcher::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--v2-green);
  border-radius: 50%;
  background: #fff;
}

@media (max-width: 1199.98px) {
  :root { --v2-thumbnail-width: 152px; }
  .topbar .brand-copy h1 span { display: none !important; }
  .topbar .brand-copy p { max-width: 34vw !important; }
}

/* Editor workflow from the design brief: preview, copy, style, editable output, media mockup. */
.editor-workflow-nav {
  display: inline-flex !important;
  width: max-content !important;
  min-width: max-content;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.editor-workflow-action {
  display: inline-flex;
  min-width: 108px !important;
  min-height: 32px !important;
  height: 32px !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid var(--v2-line-strong) !important;
  border-radius: 6px;
  background: var(--v2-panel) !important;
  color: var(--v2-muted) !important;
  font-size: 12px !important;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

#copyWorkflowBtn { min-width: 118px !important; }
#styleWorkflowBtn { min-width: 124px !important; }
#designWorkflowBtn { min-width: 146px !important; }
#editableWorkflowBtn { min-width: 154px !important; }
#socialWorkflowBtn { min-width: 168px !important; }

#leftEditorPanelResizer { display: none !important; }

@media (min-width: 1024px) {
  #step-edit:not(.workflow-panel-open) > #leftEditorPanelResizer {
    display: block !important;
  }
}

.editor-workflow-action svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.editor-workflow-action:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--v2-blue) 46%, var(--v2-line-strong)) !important;
  background: var(--v2-blue-soft) !important;
  color: var(--v2-blue) !important;
}

.editor-workflow-action.active {
  border-color: var(--v2-blue) !important;
  background: var(--v2-blue-soft) !important;
  color: var(--v2-blue) !important;
  box-shadow: none !important;
}

.editor-workflow-action:disabled {
  cursor: not-allowed;
  opacity: .46;
}

#step-edit .canvas-toolbar {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
}

@media (max-width: 767.98px) {
  .topbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    padding-inline: 8px !important;
  }
  .topbar .brand-block { min-width: 0 !important; flex: 1 1 auto !important; }
  .topbar .brand-copy h1 span,
  .topbar .brand-copy p { display: none !important; }
  .topbar .top-actions {
    width: auto !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    margin-left: auto !important;
  }
  .topbar #themeToggleBtn,
  .topbar #apiStatus,
  .topbar #saveState,
  .topbar #saveDeckBtn,
  .topbar #exportPptBtn,
  .topbar #advancedToolsBtn { display: none !important; }
  .editor-workflow-nav { gap: 5px; }
  #copyWorkflowBtn { min-width: 108px !important; }
  #styleWorkflowBtn { min-width: 112px !important; }
  #designWorkflowBtn { min-width: 136px !important; }
  #editableWorkflowBtn { min-width: 144px !important; }
  #socialWorkflowBtn { min-width: 158px !important; }
}

/* Final cascade guards for responsive panels and integrated workflow surfaces. */
body.style-moodboard-workspace-open,
body.editable-workflow-workspace-open,
body.social-publish-workspace-open {
  overflow: hidden !important;
}

#step-edit > .editor-workflow-workspace {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

#step-edit > .canvas-area {
  height: 100% !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

#step-edit.workflow-panel-open > .thumb-panel,
#step-edit.workflow-panel-open > .canvas-area,
#step-edit.workflow-panel-open > .inspector,
#step-edit.workflow-panel-open > .editor-top-ribbon,
#step-edit.workflow-panel-open > .editor-panel-resizer {
  display: none !important;
}

#step-edit.workflow-panel-open > .editor-workflow-workspace {
  grid-row: 1 / -1 !important;
}

.assistant-tools-drawer:not(.open),
.editor-delivery-drawer:not(.open),
.assistant-drawer:not(.embedded):not(.open) {
  display: none !important;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  #step-edit > .inspector {
    display: none !important;
  }

  body.mobile-inspector-open #step-edit > .inspector {
    position: fixed !important;
    z-index: 1330 !important;
    top: var(--v2-topbar-height) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    display: block !important;
    width: min(360px, calc(100vw - 48px)) !important;
    height: auto !important;
    overflow: auto !important;
  }

  #editorWorkflowWorkspace .social-result-stage,
  #editorWorkflowWorkspace .social-result-section,
  #editorWorkflowWorkspace .social-result-head,
  #editorWorkflowWorkspace .social-output-grid,
  #editorWorkflowWorkspace .social-output-card,
  #editorWorkflowWorkspace .social-output-preview,
  #editorWorkflowWorkspace .social-output-card img,
  #editorWorkflowWorkspace .social-output-card figcaption {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #editorWorkflowWorkspace .social-result-head {
    flex-wrap: wrap;
  }

  #editorWorkflowWorkspace .social-output-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 767.98px) {
  #editorWorkflowWorkspace .social-output-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #editorWorkflowWorkspace .social-result-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  #editorWorkflowWorkspace .social-result-head span {
    width: 100%;
    text-align: left !important;
  }
}

@media (max-width: 1023.98px) {
  .topbar {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .topbar .brand-block {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .topbar .top-actions {
    display: flex !important;
    width: auto !important;
    height: auto !important;
    max-height: 36px !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .topbar #licensePoints {
    display: none !important;
  }
}

/* Liquid-glass brand layer. Operational surfaces stay neutral and readable. */
html,
body {
  background-color: var(--v2-bg) !important;
  background-image: var(--glass-prism), var(--glass-app-bg) !important;
  background-attachment: fixed !important;
}

.app-shell,
.workspace {
  background-color: transparent !important;
  background-image: none !important;
}

.topbar {
  border-color: var(--glass-border) !important;
  background-color: var(--glass-surface-strong) !important;
  background-image: var(--glass-sheen) !important;
  box-shadow: var(--glass-highlight), 0 8px 24px rgba(24, 48, 44, 0.08) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
}

.brand-mark {
  border-color: var(--glass-border) !important;
  background: var(--glass-surface-strong) !important;
  box-shadow: var(--glass-highlight), 0 5px 14px rgba(20, 42, 39, 0.1) !important;
}

.workspace > #step-create:not(.hidden),
#editorWorkflowWorkspace,
#editorWorkflowWorkspace > .flow-panel,
#step-edit.editor-layout {
  background: transparent !important;
}

.flow-panel:not(#step-edit),
.assistant-tools-drawer,
.editor-delivery-drawer,
.assistant-drawer:not(.embedded),
.settings-dialog,
.onboarding-card {
  border-color: var(--glass-border) !important;
  background-color: var(--glass-surface) !important;
  background-image: var(--glass-sheen) !important;
  box-shadow: var(--glass-highlight), var(--glass-shadow) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
}

.project-card,
.mode-card,
.tool-launch-item,
.export-tile,
.style-moodboard,
.social-step-card,
.social-output-card,
.assistant-task-card {
  border-color: var(--glass-border) !important;
  border-radius: 8px !important;
  background: var(--glass-control) !important;
  box-shadow: var(--glass-highlight), 0 6px 18px rgba(20, 42, 39, 0.06) !important;
}

.new-project-panel,
.requirements-section,
.project-optional,
.style-lock-summary,
.style-library-details,
.social-preview-panel,
.social-quick-strip > div {
  border-color: var(--glass-border) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--glass-control) 86%, transparent) !important;
  box-shadow: var(--glass-highlight) !important;
}

.primary-btn {
  border-color: color-mix(in srgb, var(--v2-blue) 82%, var(--glass-border)) !important;
  background: color-mix(in srgb, var(--v2-blue) 88%, #ffffff) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 5px 14px rgba(11, 127, 134, 0.18) !important;
}

.primary-btn:hover:not(:disabled) {
  border-color: var(--v2-blue) !important;
  background: var(--v2-blue) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 7px 18px rgba(11, 127, 134, 0.22) !important;
}

.ghost-btn,
.icon-btn,
.theme-toggle-btn,
.status-dot,
.assistant-icon-btn {
  border-color: var(--glass-border) !important;
  background: var(--glass-control) !important;
  box-shadow: var(--glass-highlight) !important;
}

.ghost-btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled),
.theme-toggle-btn:hover:not(:disabled),
.assistant-icon-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--v2-blue) 42%, var(--glass-border)) !important;
  background: color-mix(in srgb, var(--v2-blue-soft) 68%, var(--glass-control)) !important;
  color: var(--v2-blue) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea {
  border-color: var(--glass-border) !important;
  background-color: var(--glass-control) !important;
  box-shadow: var(--glass-highlight) !important;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--v2-blue) 74%, transparent) !important;
  outline-offset: 2px !important;
}

#step-edit > .editor-top-ribbon,
#step-edit > .thumb-panel,
#step-edit > .inspector {
  border-color: var(--glass-border) !important;
  background-color: var(--glass-surface) !important;
  background-image: var(--glass-sheen) !important;
  box-shadow: var(--glass-highlight) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
}

#step-edit > .thumb-panel,
#step-edit > .inspector {
  height: auto !important;
  align-self: stretch !important;
}

#step-edit > .canvas-area,
#step-edit .office-canvas-shell,
#step-edit .office-canvas-body,
#step-edit .slide-stage {
  background: color-mix(in srgb, var(--glass-surface) 34%, transparent) !important;
}

#step-edit .canvas-toolbar {
  background: transparent !important;
}

#step-edit .editor-workflow-nav {
  gap: 4px !important;
  padding: 3px !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  background: var(--glass-control) !important;
  box-shadow: var(--glass-highlight) !important;
}

#step-edit .editor-workflow-action {
  height: 30px !important;
  min-height: 30px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#newProjectWorkflowBtn {
  min-width: 116px !important;
  margin-right: 2px;
  border-color: var(--glass-border) !important;
  background: color-mix(in srgb, var(--glass-surface-strong) 84%, transparent) !important;
  color: var(--v2-text) !important;
  box-shadow: var(--glass-highlight) !important;
}

#newProjectWorkflowBtn svg { color: var(--v2-green); }

#step-edit .editor-workflow-action:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--v2-blue) 36%, var(--glass-border)) !important;
  background: var(--v2-blue-soft) !important;
  color: var(--v2-blue) !important;
}

#step-edit .editor-workflow-action.active {
  border-color: color-mix(in srgb, var(--v2-blue) 28%, var(--glass-border)) !important;
  background: var(--glass-surface-strong) !important;
  color: var(--v2-blue) !important;
  box-shadow: var(--glass-highlight), 0 4px 12px rgba(11, 127, 134, 0.1) !important;
}

#step-edit > .inspector > .panel-head {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  align-items: center;
  border-bottom: 1px solid var(--glass-border) !important;
  background-color: var(--glass-surface-strong) !important;
  background-image: var(--glass-sheen) !important;
  box-shadow: var(--glass-highlight) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
}

#step-edit > .inspector > .panel-head h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--v2-text) !important;
  font-size: 13px !important;
  font-weight: 700;
}

#step-edit > .inspector > .panel-head h2 svg {
  width: 15px;
  height: 15px;
  color: var(--v2-blue);
}

#step-edit .inspector-view-tabs { display: none !important; }

#step-edit #inspectorPropertiesView,
#step-edit #inspectorAiView {
  padding: 8px 8px 14px;
}

#step-edit .inspector-toolbox {
  gap: 0 !important;
  margin: 0 !important;
}

#step-edit .inspector-tool-section {
  padding: 11px 4px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#step-edit .thumb,
#step-edit .layer-row,
#step-edit .layout-proposal-card {
  border-color: var(--glass-border) !important;
  border-radius: 7px !important;
  background: var(--glass-control) !important;
  box-shadow: var(--glass-highlight) !important;
}

#step-edit .thumb.active {
  border-color: var(--v2-blue) !important;
  background: var(--v2-blue-soft) !important;
  box-shadow: var(--glass-highlight), 0 0 0 1px var(--v2-blue) !important;
}

#step-edit > .editor-panel-resizer > button {
  border-color: var(--glass-border) !important;
  background: var(--glass-surface-strong) !important;
  color: var(--v2-muted) !important;
  box-shadow: var(--glass-highlight), 0 6px 18px rgba(20, 42, 39, 0.14) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
}

.assistant-float-launcher {
  border: 1px solid color-mix(in srgb, var(--v2-green) 72%, var(--glass-border)) !important;
  background: color-mix(in srgb, var(--v2-green) 88%, #ffffff) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 28px rgba(22, 124, 93, 0.24) !important;
}

@media (min-width: 1024px) {
  #step-edit.editor-layout {
    grid-template-columns: var(--v2-thumbnail-width) minmax(420px, 1fr) var(--editor-right-width, var(--v2-inspector-width)) !important;
  }

  #step-edit.editor-layout.right-panel-collapsed {
    grid-template-columns: var(--v2-thumbnail-width) minmax(0, 1fr) 0 !important;
  }

  #step-edit > .inspector {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 2 !important;
    width: auto !important;
    height: auto !important;
    overflow: auto !important;
    box-shadow: var(--glass-highlight) !important;
  }
}

@media (max-width: 767.98px) {
  #newProjectWorkflowBtn { min-width: 108px !important; }

  body.mobile-inspector-open #step-edit > .inspector {
    background: var(--glass-surface-strong) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    backdrop-filter: var(--glass-blur) !important;
  }

  body.mobile-inspector-open #rightEditorPanelResizer {
    position: absolute !important;
    top: 5px !important;
    right: 7px !important;
  }

  body.mobile-inspector-open #toggleRightEditorPanelBtn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
  }

  #step-edit > .inspector > .panel-head { padding-right: 50px !important; }
}

/* Fluent liquid-glass fidelity pass: Microsoft palette, layered controls, and motion. */
:root {
  --v2-topbar-height: 60px;
  --v2-blue: #0f6cbd;
  --v2-blue-soft: rgba(15, 108, 189, 0.12);
  --v2-green: #107c41;
  --v2-green-soft: rgba(16, 124, 65, 0.12);
  --v2-amber: #c96a18;
  --v2-bg: #f3f2ed;
  --v2-panel: #fffefa;
  --v2-panel-soft: #f8f7f1;
  --v2-text: #1a1a1a;
  --v2-muted: #5f6266;
  --v2-faint: #85888b;
  --ms-ice: #d8f4fb;
  --ms-porcelain: #fbf5e8;
  --ms-blue: #0f6cbd;
  --ms-cyan: #00a4ef;
  --ms-green: #107c41;
  --ms-orange: #c96a18;
  --ms-purple: #8764b8;
  --ms-pink: #c239b3;
  --ms-motion-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ms-motion-emphasized: cubic-bezier(0.28, 1.36, 0.48, 1);
  --glass-app-bg: linear-gradient(142deg, #fbf5e8 0%, #e6f5f8 42%, #f5eaf4 71%, #f1f3ee 100%);
  --glass-prism: linear-gradient(116deg, transparent 0 9%, rgba(37, 144, 248, 0.2) 20%, rgba(49, 214, 185, 0.2) 31%, transparent 46%), linear-gradient(66deg, transparent 3%, rgba(255, 125, 199, 0.17) 23%, rgba(132, 104, 230, 0.17) 39%, transparent 58%), linear-gradient(153deg, transparent 37%, rgba(35, 173, 237, 0.2) 55%, rgba(117, 226, 181, 0.17) 68%, rgba(245, 150, 186, 0.14) 83%, transparent 96%);
  --glass-sheen: linear-gradient(116deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.16) 28%, rgba(74, 210, 209, 0.12) 56%, rgba(203, 124, 214, 0.1) 76%, rgba(255, 255, 255, 0.5) 100%);
  --glass-surface: rgba(255, 255, 255, 0.58);
  --glass-surface-strong: rgba(255, 255, 255, 0.8);
  --glass-control: rgba(255, 255, 255, 0.52);
  --glass-border: rgba(255, 255, 255, 0.92);
  --glass-shadow: 0 18px 44px rgba(36, 67, 76, 0.13);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 1px 0 0 rgba(69, 193, 240, 0.18), inset -1px 0 0 rgba(217, 119, 208, 0.14);
  --glass-blur: blur(28px) saturate(168%);
}

:root[data-theme="dark"] {
  --v2-blue: #62b4f5;
  --v2-blue-soft: rgba(98, 180, 245, 0.16);
  --v2-green: #65d49c;
  --v2-green-soft: rgba(101, 212, 156, 0.14);
  --v2-amber: #f0a35b;
  --v2-bg: #121716;
  --v2-panel: #1b2422;
  --v2-panel-soft: #222c2a;
  --v2-text: #f4f6f5;
  --v2-muted: #b3bcb9;
  --v2-faint: #7d8986;
  --glass-app-bg: linear-gradient(142deg, #171914 0%, #122027 42%, #211824 73%, #151b19 100%);
  --glass-prism: linear-gradient(116deg, transparent 0 9%, rgba(52, 153, 232, 0.18) 20%, rgba(48, 198, 174, 0.15) 31%, transparent 46%), linear-gradient(66deg, transparent 3%, rgba(213, 94, 184, 0.12) 23%, rgba(103, 88, 209, 0.13) 39%, transparent 58%), linear-gradient(153deg, transparent 37%, rgba(37, 160, 215, 0.15) 55%, rgba(82, 194, 150, 0.11) 68%, rgba(204, 90, 168, 0.1) 83%, transparent 96%);
  --glass-sheen: linear-gradient(116deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.025) 28%, rgba(69, 207, 203, 0.08) 56%, rgba(198, 102, 205, 0.07) 76%, rgba(255, 255, 255, 0.08) 100%);
  --glass-surface: rgba(24, 33, 31, 0.7);
  --glass-surface-strong: rgba(29, 39, 37, 0.84);
  --glass-control: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.17);
  --glass-shadow: 0 20px 52px rgba(0, 0, 0, 0.34);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 1px 0 0 rgba(66, 184, 226, 0.14), inset -1px 0 0 rgba(200, 91, 169, 0.1);
}

html,
body,
button,
input,
select,
textarea,
summary {
  font-family: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif !important;
  letter-spacing: 0 !important;
}

body,
.app-shell,
.workspace {
  background-color: var(--v2-bg) !important;
  background-image: var(--glass-prism), var(--glass-app-bg) !important;
}

body::before,
body::after {
  position: fixed;
  z-index: 0;
  display: block;
  pointer-events: none;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 42px;
  filter: blur(12px) saturate(130%);
  opacity: 0.56;
  transform-origin: center;
  animation: fluent-ribbon-drift 18s var(--ms-motion-standard) infinite alternate;
}

body::before {
  top: 38%;
  left: -11vw;
  width: 82vw;
  height: 17vh;
  background: linear-gradient(108deg, rgba(60, 184, 241, 0.32), rgba(85, 220, 186, 0.26) 35%, rgba(195, 107, 220, 0.3) 71%, rgba(255, 176, 122, 0.22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 24px 70px rgba(51, 147, 191, 0.12);
  transform: rotate(-11deg) skewX(-8deg);
}

body::after {
  top: 10%;
  right: -16vw;
  width: 72vw;
  height: 14vh;
  background: linear-gradient(106deg, rgba(255, 160, 118, 0.21), rgba(245, 116, 197, 0.25) 36%, rgba(90, 139, 244, 0.28) 72%, rgba(90, 217, 205, 0.22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 24px 70px rgba(193, 107, 204, 0.11);
  transform: rotate(13deg) skewX(9deg);
  animation-delay: -6s;
}

.app-shell {
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate;
  background: transparent !important;
}

.topbar {
  height: var(--v2-topbar-height) !important;
  min-height: var(--v2-topbar-height) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  background-color: var(--glass-surface-strong) !important;
  background-image: var(--glass-sheen) !important;
  box-shadow: var(--glass-highlight), 0 9px 28px rgba(38, 72, 81, 0.1) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
}

.brand-mark {
  width: 34px !important;
  height: 34px !important;
  flex-basis: 34px !important;
  border-radius: 10px !important;
  border-color: var(--glass-border) !important;
  background-color: var(--glass-surface-strong) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,.8), rgba(91, 212, 204, .24) 48%, rgba(225, 119, 205, .2)) !important;
  box-shadow: var(--glass-highlight), 0 8px 18px rgba(42, 91, 108, 0.16) !important;
}

.topbar .brand-copy h1 { font-size: 15px !important; font-weight: 650 !important; }
.topbar .brand-copy h1 span { font-size: 11px !important; font-weight: 500 !important; color: var(--v2-muted) !important; }
.topbar .brand-copy p { font-size: 10px !important; color: var(--v2-faint) !important; }

.primary-btn,
.ghost-btn,
.danger-btn,
.icon-btn,
.theme-toggle-btn,
.assistant-icon-btn {
  min-height: 34px !important;
  border-radius: 11px !important;
  transition: transform 160ms var(--ms-motion-standard), box-shadow 160ms var(--ms-motion-standard), background-color 160ms var(--ms-motion-standard), border-color 160ms var(--ms-motion-standard), color 160ms var(--ms-motion-standard) !important;
}

.ghost-btn,
.icon-btn,
.theme-toggle-btn,
.assistant-icon-btn {
  border-color: var(--glass-border) !important;
  background-color: var(--glass-control) !important;
  background-image: var(--glass-sheen) !important;
  box-shadow: var(--glass-highlight), 0 3px 8px rgba(40, 76, 87, 0.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
}

.ghost-btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled),
.theme-toggle-btn:hover:not(:disabled),
.assistant-icon-btn:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--v2-blue) 46%, var(--glass-border)) !important;
  background-color: color-mix(in srgb, var(--v2-blue-soft) 64%, var(--glass-control)) !important;
  box-shadow: var(--glass-highlight), 0 7px 16px rgba(24, 91, 139, 0.14) !important;
  color: var(--v2-blue) !important;
}

.primary-btn,
.assistant-float-launcher {
  border-color: color-mix(in srgb, var(--v2-blue) 82%, var(--glass-border)) !important;
  background-color: var(--v2-blue) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,.22), transparent 46%, rgba(0, 62, 112, .14)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 color-mix(in srgb, var(--v2-blue) 72%, #082f52), 0 8px 18px rgba(15, 108, 189, .22) !important;
}

.primary-btn:hover:not(:disabled),
.assistant-float-launcher:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  background-color: color-mix(in srgb, var(--v2-blue) 88%, #ffffff) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 0 color-mix(in srgb, var(--v2-blue) 70%, #082f52), 0 12px 24px rgba(15, 108, 189, .28) !important;
}

.primary-btn:active:not(:disabled),
.ghost-btn:active:not(:disabled),
.icon-btn:active:not(:disabled),
.assistant-float-launcher:active:not(:disabled) {
  transform: translateY(1px) scale(.98) !important;
  transition-duration: 80ms !important;
}

.editor-workflow-nav {
  height: 42px !important;
  min-height: 42px !important;
  gap: 6px !important;
  padding: 4px !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  background-color: var(--glass-control) !important;
  background-image: var(--glass-sheen) !important;
  box-shadow: var(--glass-highlight), 0 8px 22px rgba(44, 92, 107, 0.1) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
}

.editor-workflow-action {
  --fluent-layer: #5cc9c1;
  --fluent-layer-deep: #248b98;
  position: relative !important;
  z-index: 0;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 12px !important;
  gap: 7px !important;
  overflow: visible !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 13px !important;
  background-color: rgba(255,255,255,.64) !important;
  background-image: var(--glass-sheen) !important;
  color: var(--v2-muted) !important;
  box-shadow: var(--glass-highlight), 0 2px 0 color-mix(in srgb, var(--fluent-layer) 74%, #ffffff), 0 4px 0 color-mix(in srgb, var(--fluent-layer-deep) 62%, #ffffff), 0 8px 14px rgba(47, 80, 91, .1) !important;
  transition: transform 160ms var(--ms-motion-emphasized), box-shadow 160ms var(--ms-motion-standard), color 160ms var(--ms-motion-standard), background-color 160ms var(--ms-motion-standard) !important;
}

.editor-workflow-action::before {
  position: absolute;
  z-index: -1;
  right: 9px;
  bottom: -5px;
  left: 9px;
  height: 7px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fluent-layer-deep) 84%, transparent), color-mix(in srgb, var(--fluent-layer) 72%, transparent), color-mix(in srgb, var(--fluent-layer-deep) 78%, transparent));
  opacity: .72;
  content: "";
  transition: transform 160ms var(--ms-motion-emphasized), opacity 160ms ease;
}

.editor-workflow-action:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--fluent-layer-deep) 42%, var(--glass-border)) !important;
  background-color: rgba(255,255,255,.82) !important;
  color: color-mix(in srgb, var(--fluent-layer-deep) 86%, #14232a) !important;
  box-shadow: var(--glass-highlight), 0 3px 0 var(--fluent-layer), 0 6px 0 color-mix(in srgb, var(--fluent-layer-deep) 72%, #ffffff), 0 12px 20px rgba(47, 80, 91, .16) !important;
}

.editor-workflow-action:hover:not(:disabled)::before { transform: translateY(2px); opacity: .9; }

.editor-workflow-action.active {
  border-color: color-mix(in srgb, var(--fluent-layer-deep) 52%, var(--glass-border)) !important;
  background-color: rgba(255,255,255,.9) !important;
  color: color-mix(in srgb, var(--fluent-layer-deep) 92%, #17232a) !important;
  box-shadow: var(--glass-highlight), 0 3px 0 var(--fluent-layer), 0 6px 0 var(--fluent-layer-deep), 0 13px 22px rgba(47, 80, 91, .18) !important;
}

#newProjectWorkflowBtn { --fluent-layer: #67d5a4; --fluent-layer-deep: #16845b; }
#copyWorkflowBtn { --fluent-layer: #7bc5f4; --fluent-layer-deep: #176db5; }
#styleWorkflowBtn { --fluent-layer: #d59ae8; --fluent-layer-deep: #8554b6; }
#designWorkflowBtn { --fluent-layer: #7adbd6; --fluent-layer-deep: #138e9a; }
#editableWorkflowBtn { --fluent-layer: #f5bb78; --fluent-layer-deep: #b25c1e; }
#socialWorkflowBtn { --fluent-layer: #e597d2; --fluent-layer-deep: #b63d91; }

.fluent-icon-shell {
  display: inline-grid;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  place-items: center;
  vertical-align: middle;
  color: currentColor;
}

.fluent-icon {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask-image: var(--fluent-icon-regular);
  mask-image: var(--fluent-icon-regular);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform 160ms var(--ms-motion-emphasized), opacity 160ms ease;
}

.has-control-icon > .fluent-icon-shell,
.editor-workflow-action > .fluent-icon-shell {
  width: 23px;
  height: 23px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255,255,255,.78), color-mix(in srgb, var(--fluent-layer, var(--v2-blue)) 26%, rgba(255,255,255,.34)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 2px 5px rgba(26, 66, 81, .12);
}

.editor-workflow-action > .fluent-icon-shell { color: var(--fluent-layer-deep); }
.has-control-icon:hover:not(:disabled) > .fluent-icon-shell .fluent-icon { transform: translateY(-1px) rotate(-3deg) scale(1.07); }
.has-control-icon:active:not(:disabled) > .fluent-icon-shell .fluent-icon { transform: scale(.92); }
.has-control-icon.active > .fluent-icon-shell .fluent-icon,
.has-control-icon[aria-pressed="true"] > .fluent-icon-shell .fluent-icon { -webkit-mask-image: var(--fluent-icon-filled, var(--fluent-icon-regular)); mask-image: var(--fluent-icon-filled, var(--fluent-icon-regular)); }

.icon-only-control > .fluent-icon-shell {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 7px;
}

.image-task-running > .fluent-icon-shell .fluent-icon,
[aria-busy="true"] > .fluent-icon-shell .fluent-icon { animation: fluent-icon-spin .8s linear infinite; }
.editor-workflow-action.active > .fluent-icon-shell .fluent-icon { animation: fluent-icon-breathe 3.8s ease-in-out infinite; }

#step-edit.editor-layout {
  grid-template-rows: 56px minmax(0, 1fr) !important;
}

#step-edit > .editor-top-ribbon { height: 56px !important; max-height: 56px !important; background-color: transparent !important; }
#step-edit .canvas-toolbar { height: 55px !important; max-height: 55px !important; padding: 9px 12px !important; }
#step-edit > .inspector { top: 56px !important; }
#step-edit > .editor-panel-resizer { top: 56px !important; }

#step-edit > .thumb-panel,
#step-edit > .inspector,
#step-edit > .editor-top-ribbon {
  border-color: var(--glass-border) !important;
  background-color: var(--glass-surface) !important;
  background-image: var(--glass-sheen) !important;
  box-shadow: var(--glass-highlight) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
}

#step-edit > .inspector > .panel-head {
  min-height: 48px !important;
  background-color: var(--glass-surface-strong) !important;
  background-image: var(--glass-sheen) !important;
}

#step-edit .thumb-panel .panel-head h2,
#step-edit > .inspector > .panel-head h2 { font-size: 14px !important; font-weight: 650 !important; }
#step-edit .inspector-tool-section { padding-block: 13px !important; }

#step-edit .thumb,
#step-edit .layer-row,
#step-edit .layout-proposal-card,
.project-card,
.mode-card,
.tool-launch-item,
.export-tile {
  border-radius: 10px !important;
  background-color: var(--glass-control) !important;
  background-image: var(--glass-sheen) !important;
  box-shadow: var(--glass-highlight), 0 7px 18px rgba(42, 83, 94, .09) !important;
}

#step-edit .thumb.active {
  border-color: color-mix(in srgb, var(--ms-blue) 72%, var(--glass-border)) !important;
  background-color: color-mix(in srgb, var(--ms-blue) 12%, var(--glass-control)) !important;
  box-shadow: var(--glass-highlight), 0 3px 0 rgba(15,108,189,.32), 0 0 0 1px var(--ms-blue), 0 10px 20px rgba(15,108,189,.16) !important;
}

.status-dot,
.save-state,
.license-points {
  border-radius: 999px !important;
  border-color: var(--glass-border) !important;
  background-color: var(--glass-control) !important;
  background-image: var(--glass-sheen) !important;
  box-shadow: var(--glass-highlight) !important;
}

.assistant-float-launcher {
  width: 52px !important;
  height: 52px !important;
  border-radius: 18px !important;
  background-color: var(--ms-green) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 0 #08643e, 0 13px 28px rgba(16,124,65,.26) !important;
}

.assistant-float-launcher > .fluent-icon-shell { width: 25px; height: 25px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--v2-muted) 42%, transparent); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--v2-blue) 58%, transparent); background-clip: padding-box; }

@keyframes fluent-ribbon-drift {
  0% { translate: -1.5% -1%; }
  100% { translate: 1.8% 1.5%; }
}

@keyframes fluent-icon-breathe {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-1px) rotate(-2deg); }
}

@keyframes fluent-icon-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .editor-workflow-action.active > .fluent-icon-shell .fluent-icon,
  .image-task-running > .fluent-icon-shell .fluent-icon,
  [aria-busy="true"] > .fluent-icon-shell .fluent-icon { animation: none !important; }
}

/* Keep the Fluent layer quiet: one glass surface, direct color, no icon-in-a-box stacking. */
.ghost-btn,
.icon-btn,
.theme-toggle-btn,
.assistant-icon-btn {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Desktop command architecture: workflow in the title bar, editing tools in the ribbon. */
@media (min-width: 1024px) {
  .topbar {
    display: grid !important;
    grid-template-columns: minmax(220px, .8fr) minmax(610px, 2fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    padding-inline: 14px !important;
  }

  .topbar .brand-block,
  .topbar .top-actions { min-width: 0 !important; }

  .topbar .top-actions {
    justify-self: end;
    margin-left: 0 !important;
  }

  .topbar > .topbar-workflow-nav {
    display: flex !important;
    width: min(100%, 820px) !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    justify-self: center;
    align-items: center;
    justify-content: center;
    gap: 4px !important;
    padding: 0 !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .topbar > .topbar-workflow-nav .editor-workflow-action {
    min-width: 0 !important;
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    flex: 1 1 auto;
    gap: 6px !important;
    padding: 0 7px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--v2-muted) !important;
    font-size: 11px !important;
    font-weight: 560 !important;
    text-overflow: ellipsis;
    transition: color 150ms var(--ms-motion-standard), transform 150ms var(--ms-motion-standard) !important;
  }

  .topbar > .topbar-workflow-nav .editor-workflow-action::before { display: none !important; }

  .topbar > .topbar-workflow-nav .editor-workflow-action:hover:not(:disabled) {
    background: transparent !important;
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--fluent-layer) 56%, transparent) !important;
    color: var(--fluent-layer-deep) !important;
    transform: translateY(-1px) !important;
  }

  .topbar > .topbar-workflow-nav .editor-workflow-action.active {
    background: transparent !important;
    box-shadow: inset 0 -2px 0 var(--fluent-layer-deep) !important;
    color: var(--fluent-layer-deep) !important;
    transform: none !important;
  }

  .topbar > .topbar-workflow-nav .editor-workflow-action > .fluent-icon-shell {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--fluent-layer-deep) !important;
  }

  .topbar > .topbar-workflow-nav .editor-workflow-action span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #step-edit.editor-layout {
    grid-template-rows: 54px minmax(0, 1fr) !important;
  }

  #step-edit > .editor-top-ribbon {
    height: 54px !important;
    max-height: 54px !important;
    overflow: hidden !important;
  }

  #step-edit .canvas-toolbar {
    display: flex !important;
    width: 100% !important;
    height: 53px !important;
    max-height: 53px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 7px 11px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  #step-edit > .inspector,
  #step-edit > .editor-panel-resizer { top: 54px !important; }

  #step-edit .ribbon-group {
    display: flex !important;
    min-width: max-content !important;
    min-height: 38px !important;
    align-items: center !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 8px 0 0 !important;
    border: 0 !important;
    border-right: 1px solid color-mix(in srgb, var(--v2-line) 72%, transparent) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #step-edit .ribbon-mode-actions,
  #step-edit .ribbon-history-actions,
  #step-edit .ribbon-view-actions,
  #step-edit .ribbon-insert-actions,
  #step-edit .ribbon-ai-actions { display: flex !important; }

  #step-edit .ribbon-text-actions { display: none !important; }
  #editorRibbon[data-selected-type="text"] .ribbon-text-actions { display: flex !important; }

  #step-edit .ribbon-ai-actions {
    margin-left: auto !important;
    padding-right: 0 !important;
    border-right: 0 !important;
  }

  #step-edit .ribbon-tool,
  #step-edit .ribbon-insert-actions button,
  #step-edit .ribbon-ai-actions .compact-btn {
    display: inline-flex !important;
    min-width: auto !important;
    height: 36px !important;
    min-height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 7px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--v2-muted) !important;
    font-size: 11px !important;
    font-weight: 540 !important;
    white-space: nowrap;
  }

  #step-edit .ribbon-tool:hover:not(:disabled),
  #step-edit .ribbon-insert-actions button:hover:not(:disabled),
  #step-edit .ribbon-ai-actions .compact-btn:hover:not(:disabled) {
    background: color-mix(in srgb, currentColor 9%, transparent) !important;
    color: var(--v2-blue) !important;
    transform: translateY(-1px) !important;
  }

  #step-edit .ribbon-tool.active {
    background: transparent !important;
    box-shadow: inset 0 -2px 0 currentColor !important;
    color: var(--v2-blue) !important;
  }

  #step-edit .ribbon-mode-actions .fluent-icon-shell { color: var(--ms-blue) !important; }
  #step-edit .ribbon-history-actions .fluent-icon-shell { color: var(--ms-purple) !important; }
  #step-edit .ribbon-view-actions .fluent-icon-shell { color: var(--ms-cyan) !important; }
  #step-edit .ribbon-insert-actions .fluent-icon-shell { color: var(--ms-green) !important; }
  #step-edit .ribbon-text-actions .fluent-icon-shell { color: var(--ms-orange) !important; }
  #step-edit .ribbon-ai-actions .fluent-icon-shell { color: var(--ms-pink) !important; }

  #step-edit .ribbon-group .fluent-icon-shell {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
  }

  #step-edit .ribbon-select,
  #step-edit .ribbon-number,
  #step-edit .ribbon-color {
    height: 34px !important;
    min-height: 34px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--v2-muted) !important;
    font-size: 11px !important;
  }

  #step-edit .ribbon-select:hover:not(:disabled),
  #step-edit .ribbon-number:hover:not(:disabled),
  #step-edit .ribbon-color:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--v2-blue-soft) 64%, transparent) !important;
  }

  #step-edit #canvasZoomSelect { width: 66px !important; min-width: 66px !important; }
  #step-edit .ribbon-insert-actions .ribbon-select { width: 124px !important; min-width: 124px !important; }
  #step-edit #textFontSizeInput { width: 54px !important; min-width: 54px !important; }
  #step-edit #textColorInput { width: 30px !important; min-width: 30px !important; padding: 5px !important; }

  #step-edit .ribbon-tool:disabled,
  #step-edit .ribbon-insert-actions button:disabled,
  #step-edit .ribbon-ai-actions .compact-btn:disabled,
  #step-edit .ribbon-select:disabled,
  #step-edit .ribbon-number:disabled,
  #step-edit .ribbon-color:disabled {
    opacity: .38 !important;
    background: transparent !important;
  }
}

.ghost-btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled),
.theme-toggle-btn:hover:not(:disabled),
.assistant-icon-btn:hover:not(:disabled) {
  border-color: transparent !important;
  background-color: color-mix(in srgb, var(--v2-blue-soft) 74%, transparent) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.primary-btn,
.assistant-float-launcher {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 12px rgba(15, 108, 189, .2) !important;
}

.primary-btn:hover:not(:disabled),
.assistant-float-launcher:hover:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 7px 16px rgba(15, 108, 189, .24) !important;
}

.has-control-icon > .fluent-icon-shell,
#step-edit .editor-workflow-action > .fluent-icon-shell {
  width: 1.15em !important;
  height: 1.15em !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#step-edit .editor-workflow-nav {
  border-radius: 14px !important;
  background-color: rgba(255,255,255,.44) !important;
  background-image: var(--glass-sheen) !important;
}

#step-edit .editor-workflow-action {
  min-height: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#step-edit .editor-workflow-action::before { display: none !important; }

#step-edit .editor-workflow-action:hover:not(:disabled) {
  border: 0 !important;
  background: color-mix(in srgb, var(--fluent-layer) 12%, transparent) !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

#step-edit .editor-workflow-action.active {
  border: 0 !important;
  background: color-mix(in srgb, var(--fluent-layer) 17%, rgba(255,255,255,.46)) !important;
  box-shadow: inset 0 -2px 0 var(--fluent-layer-deep) !important;
  color: var(--fluent-layer-deep) !important;
  transform: none !important;
}

#step-edit .editor-workflow-action > .fluent-icon-shell { color: var(--fluent-layer-deep) !important; }
#newProjectWorkflowBtn,
#copyWorkflowBtn,
#styleWorkflowBtn,
#designWorkflowBtn,
#editableWorkflowBtn,
#socialWorkflowBtn { box-shadow: none !important; }

#step-edit .inspector-toolbox .ghost-btn,
#step-edit .inspector-toolbox .danger-btn,
#step-edit .inspector-toolbox .ribbon-tool,
#step-edit .ribbon-tool,
#step-edit .status-bar-btn {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 7px !important;
}

#step-edit .inspector-tool-grid,
#step-edit .inspector-tool-grid.compact {
  gap: 2px 8px !important;
}

#step-edit .inspector-toolbox .ghost-btn,
#step-edit .inspector-toolbox .danger-btn,
#step-edit .inspector-toolbox .ribbon-tool {
  min-height: 31px !important;
  justify-content: flex-start !important;
  padding: 0 5px !important;
  font-weight: 520 !important;
  text-align: left !important;
}

#step-edit .inspector-toolbox .ghost-btn:disabled,
#step-edit .inspector-toolbox .danger-btn:disabled,
#step-edit .inspector-toolbox .ribbon-tool:disabled {
  background: transparent !important;
  box-shadow: none !important;
  opacity: .42 !important;
}

#step-edit .inspector-toolbox .ghost-btn:hover:not(:disabled),
#step-edit .inspector-toolbox .danger-btn:hover:not(:disabled),
#step-edit .inspector-toolbox .ribbon-tool:hover:not(:disabled),
#step-edit .status-bar-btn:hover:not(:disabled),
#step-edit .status-bar-btn.active {
  background: color-mix(in srgb, var(--v2-blue-soft) 82%, transparent) !important;
  color: var(--v2-blue) !important;
}

#step-edit .inspector-toolbox .fluent-icon-shell,
#step-edit .ribbon-group .fluent-icon-shell { color: var(--v2-blue); }
#step-edit .inspector-toolbox .fluent-icon-shell {
  width: 16px !important;
  height: 16px !important;
  flex-basis: 16px !important;
}
#step-edit .ribbon-group .fluent-icon-shell,
#step-edit .status-bar-btn .fluent-icon-shell {
  width: 15px !important;
  height: 15px !important;
  flex-basis: 15px !important;
}
#step-edit .inspector-tool-section:nth-child(2) .fluent-icon-shell { color: var(--ms-purple); }
#step-edit .inspector-tool-section:nth-child(3) .fluent-icon-shell { color: var(--ms-orange); }
#step-edit .inspector-tool-section:nth-child(4) .fluent-icon-shell { color: var(--ms-green); }

#step-edit .thumb,
#step-edit .layer-row,
#step-edit .layout-proposal-card,
.project-card,
.mode-card,
.tool-launch-item,
.export-tile {
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* Desktop commands stay as colored icons with labels, without legacy button tiles. */
@media (min-width: 1024px) {
  .topbar > .topbar-workflow-nav #newProjectWorkflowBtn {
    margin-right: 0 !important;
    border: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--fluent-layer-deep) !important;
  }

  .topbar > #editorWorkflowNav > .editor-workflow-action {
    min-width: max-content !important;
    flex: 1 1 auto !important;
  }

  :root #step-edit #editorRibbon .ribbon-tool.active {
    border: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: inset 0 -2px 0 currentColor !important;
    color: var(--v2-blue) !important;
  }

  :root #step-edit #editorRibbon .ribbon-tool:hover:not(:disabled),
  :root #step-edit #editorRibbon .ribbon-insert-actions button:hover:not(:disabled),
  :root #step-edit #editorRibbon .ribbon-ai-actions .compact-btn:hover:not(:disabled) {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: inset 0 -2px 0 color-mix(in srgb, currentColor 52%, transparent) !important;
  }

  :root #step-edit #editorRibbon .ribbon-tool.active > .fluent-icon-shell {
    color: var(--v2-blue) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
  .topbar {
    grid-template-columns: 150px minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  .topbar .brand-copy { min-width: 0 !important; }
  .topbar #projectMeta,
  .topbar #saveState { display: none !important; }

  .topbar > #editorWorkflowNav {
    width: 100% !important;
    gap: 1px !important;
  }

  .topbar > #editorWorkflowNav > .editor-workflow-action {
    padding-inline: 5px !important;
  }

  #step-edit #editorRibbon {
    gap: 3px !important;
    padding-inline: 6px !important;
  }

  #step-edit #editorRibbon .ribbon-group {
    padding-right: 5px !important;
  }

  #step-edit #editorRibbon .ribbon-tool,
  #step-edit #editorRibbon .ribbon-insert-actions button,
  #step-edit #editorRibbon .ribbon-ai-actions .compact-btn {
    padding-inline: 4px !important;
  }

  #step-edit #editorRibbon .ribbon-insert-actions .ribbon-select {
    width: 110px !important;
    min-width: 110px !important;
  }
}

/* Final desktop Fluent surface: quiet porcelain base, one glass layer, direct commands. */
:root {
  --v2-bg: #eef4f6;
  --v2-panel: #fbfdfe;
  --v2-panel-soft: #f4f8fa;
  --glass-app-bg: linear-gradient(135deg, #f8f5ec 0%, #eff7f9 34%, #edf5f8 69%, #f6f0f5 100%);
  --glass-prism:
    radial-gradient(88% 44% at 2% 99%, rgba(30, 170, 237, .12), transparent 67%),
    radial-gradient(72% 38% at 100% 12%, rgba(208, 84, 191, .08), transparent 68%),
    linear-gradient(111deg, transparent 17%, rgba(70, 202, 204, .055) 38%, transparent 57%);
  --glass-sheen: linear-gradient(122deg, rgba(255,255,255,.82), rgba(255,255,255,.24) 43%, rgba(90,197,219,.055) 68%, rgba(255,255,255,.62));
  --glass-surface: rgba(250, 253, 254, .7);
  --glass-surface-strong: rgba(255, 255, 255, .86);
  --glass-control: rgba(255, 255, 255, .46);
  --glass-border: rgba(255, 255, 255, .88);
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,.96), inset 1px 0 0 rgba(59,179,224,.08), inset -1px 0 0 rgba(202,89,187,.06);
  --glass-blur: blur(24px) saturate(142%);
}

:root[data-theme="dark"] {
  --v2-bg: #111716;
  --v2-panel: #19211f;
  --v2-panel-soft: #202927;
  --glass-app-bg: linear-gradient(138deg, #111715 0%, #12201f 42%, #171a21 72%, #1d171d 100%);
  --glass-prism:
    radial-gradient(85% 42% at 0% 100%, rgba(39, 157, 210, .09), transparent 68%),
    radial-gradient(70% 36% at 100% 8%, rgba(189, 71, 169, .07), transparent 70%);
  --glass-sheen: linear-gradient(122deg, rgba(255,255,255,.085), rgba(255,255,255,.018) 48%, rgba(65,177,199,.045) 70%, rgba(255,255,255,.055));
  --glass-surface: rgba(23, 31, 29, .76);
  --glass-surface-strong: rgba(20, 27, 26, .9);
  --glass-control: rgba(255,255,255,.035);
  --glass-border: rgba(255,255,255,.12);
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,.11), inset 1px 0 0 rgba(67,177,216,.07), inset -1px 0 0 rgba(198,87,171,.055);
}

body::before,
body::after {
  border: 0 !important;
  filter: blur(34px) saturate(120%) !important;
  opacity: .16 !important;
}

body::before {
  top: 66% !important;
  left: -16vw !important;
  height: 11vh !important;
  background: linear-gradient(104deg, rgba(38,167,224,.2), rgba(73,198,182,.14) 44%, rgba(158,93,203,.13)) !important;
  box-shadow: none !important;
}

body::after {
  top: 3% !important;
  right: -24vw !important;
  height: 9vh !important;
  background: linear-gradient(105deg, rgba(239,146,96,.12), rgba(210,91,180,.14) 45%, rgba(66,142,226,.13)) !important;
  box-shadow: none !important;
}

.topbar {
  border-bottom-color: color-mix(in srgb, var(--glass-border) 80%, rgba(73, 94, 104, .16)) !important;
  background-color: var(--glass-surface-strong) !important;
  box-shadow: var(--glass-highlight), 0 4px 16px rgba(35, 63, 72, .055) !important;
}

#step-edit > .thumb-panel,
#step-edit > .inspector,
#step-edit > .editor-top-ribbon {
  border-color: color-mix(in srgb, var(--glass-border) 74%, rgba(71, 91, 101, .14)) !important;
  background-color: var(--glass-surface) !important;
  box-shadow: var(--glass-highlight) !important;
}

#step-edit > .editor-top-ribbon {
  background-image: linear-gradient(90deg, rgba(255,255,255,.2), rgba(73,197,204,.04) 52%, rgba(198,87,180,.035)) !important;
}

#step-edit > .inspector > .panel-head {
  border-bottom: 1px solid color-mix(in srgb, var(--v2-line) 62%, transparent) !important;
  background-color: transparent !important;
  background-image: none !important;
}

#step-edit .inspector-tool-section {
  border-bottom: 1px solid color-mix(in srgb, var(--v2-line) 58%, transparent) !important;
  background: transparent !important;
}

#step-edit .inspector-toolbox .ghost-btn,
#step-edit .inspector-toolbox .danger-btn,
#step-edit .inspector-toolbox .ribbon-tool,
#step-edit #editorRibbon .ribbon-tool,
#step-edit #editorRibbon .ribbon-insert-actions button,
#step-edit #editorRibbon .ribbon-ai-actions .compact-btn,
#step-edit #editorRibbon .ribbon-select,
#step-edit #editorRibbon .ribbon-number,
#step-edit #editorRibbon .ribbon-color {
  border: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

#step-edit .inspector-toolbox .ghost-btn:hover:not(:disabled),
#step-edit .inspector-toolbox .danger-btn:hover:not(:disabled),
#step-edit .inspector-toolbox .ribbon-tool:hover:not(:disabled),
#step-edit #editorRibbon .ribbon-tool:hover:not(:disabled),
#step-edit #editorRibbon .ribbon-insert-actions button:hover:not(:disabled),
#step-edit #editorRibbon .ribbon-ai-actions .compact-btn:hover:not(:disabled),
#step-edit #editorRibbon .ribbon-select:hover:not(:disabled) {
  background-color: transparent !important;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, currentColor 48%, transparent) !important;
}

#step-edit .inspector-toolbox .ghost-btn.active,
#step-edit .inspector-toolbox .ribbon-tool.active,
:root #step-edit #editorRibbon .ribbon-tool.active {
  background-color: transparent !important;
  box-shadow: inset 0 -2px 0 currentColor !important;
}

:root #step-edit .inspector-toolbox button.ribbon-tool.active[class] {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: inset 0 -2px 0 currentColor !important;
}

:root[data-theme="dark"] #step-edit .inspector-toolbox button.ribbon-tool[class] {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] #step-edit .inspector-toolbox button.ribbon-tool.active[class] {
  box-shadow: inset 0 -2px 0 currentColor !important;
}

#step-edit .thumb:not(.active),
#step-edit .layer-row,
#step-edit .layout-proposal-card:not(.selected) {
  box-shadow: none !important;
}

@media (min-width: 1024px) {
  .topbar > #editorWorkflowNav,
  .topbar > #editorWorkflowNav > .editor-workflow-action,
  .topbar > #editorWorkflowNav > .editor-workflow-action:hover:not(:disabled),
  .topbar > #editorWorkflowNav > .editor-workflow-action.active {
    border: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  .topbar > #editorWorkflowNav > .editor-workflow-action {
    box-shadow: none !important;
  }

  .topbar > #editorWorkflowNav > .editor-workflow-action:hover:not(:disabled) {
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--fluent-layer-deep) 54%, transparent) !important;
  }

  .topbar > #editorWorkflowNav > .editor-workflow-action.active {
    box-shadow: inset 0 -2px 0 var(--fluent-layer-deep) !important;
  }
}

/* Dedicated conversion surface keeps editable generation separate from design preview. */
.editable-workflow-panel {
  color: var(--v2-text);
}

.editable-layer-workbench { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--v2-line); background: color-mix(in srgb, var(--v2-panel) 94%, var(--v2-panel-soft)); }
.editable-layer-primary-controls, .editable-model-routing, .editable-layer-mode, .editable-layer-tool-tabs, .editable-layer-selection-summary, .editable-layer-route-mini { min-width: 0; display: flex; align-items: center; }
.editable-layer-primary-controls { gap: 8px; flex-wrap: wrap; }
.editable-layer-mode { overflow: hidden; border: 1px solid var(--v2-line); border-radius: 6px; }
.editable-layer-mode button, .editable-layer-tool-tabs button { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 0; border-right: 1px solid var(--v2-line); border-radius: 0; background: transparent; color: var(--v2-muted); font: inherit; font-size: 10px; }
.editable-layer-mode button:last-child, .editable-layer-tool-tabs button:last-child { border-right: 0; }
.editable-layer-mode button.active, .editable-layer-tool-tabs button.active { background: var(--v2-blue-soft); color: var(--v2-blue); }
.editable-generation-mode { border-color: color-mix(in srgb, var(--v2-blue) 42%, var(--v2-line)); }
.editable-generation-mode button:first-child.active { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }
.editable-generation-mode button:last-child.active { background: color-mix(in srgb, var(--v2-blue) 15%, transparent); color: var(--v2-blue); }
.editable-layer-mode svg, .editable-layer-tool-tabs svg, .editable-model-routing svg { width: 14px; height: 14px; }
.editable-background-toggle { min-height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 3px 8px; border-left: 1px solid var(--v2-line); cursor: pointer; }
.editable-background-toggle input { width: 14px; height: 14px; accent-color: var(--v2-blue); }
.editable-background-toggle span { display: grid; gap: 0; }
.editable-background-toggle strong { font-size: 10px; }
.editable-background-toggle small { color: var(--v2-muted); font-size: 8px; line-height: 1.2; }
.editable-model-routing { justify-content: flex-end; gap: 1px; overflow: hidden; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-line); }
.editable-model-routing > span { min-width: 118px; display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 5px; padding: 6px 8px; background: var(--v2-panel); }
.editable-model-routing svg { grid-row: 1 / span 2; align-self: center; color: var(--v2-blue); }
.editable-model-routing strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.editable-model-routing small { overflow: hidden; color: var(--v2-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
#editableStageInspector, #editableStageInspector * { min-width: 0; }
#editableStageInspector .workflow-inspector-scroll { overflow-x: hidden; }
.editable-layer-inspector-workbench { display: grid; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line); background: color-mix(in srgb, var(--v2-panel) 97%, var(--v2-blue)); }
.editable-layer-inspector-workbench > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.editable-layer-inspector-workbench > header > div { display: grid; gap: 2px; }
.editable-layer-inspector-workbench > header strong { font-size: 11px; }
.editable-layer-inspector-workbench > header span { color: var(--v2-muted); font-size: 8px; }
.editable-layer-inspector-workbench > header em { padding: 2px 5px; border: 1px solid var(--v2-line); border-radius: 4px; color: var(--v2-muted); font-size: 8px; font-style: normal; }
.editable-layer-inspector-workbench > header em.confirmed { border-color: color-mix(in srgb, var(--v2-success) 45%, var(--v2-line)); color: var(--v2-success); }
.editable-layer-route-mini { align-items: stretch; gap: 5px; color: var(--v2-muted); font-size: 8px; line-height: 1.35; }
.editable-layer-route-mini span { flex: 1 1 0; }
.editable-layer-route-mini b { display: block; color: var(--v2-text); font-size: 8px; }
.editable-layer-route-mini i { width: 12px; position: relative; flex: 0 0 12px; }
.editable-layer-route-mini i::after { content: ""; position: absolute; top: 50%; left: 1px; right: 1px; border-top: 1px solid var(--v2-line); }
.editable-layer-empty { display: grid; justify-items: start; gap: 5px; padding: 12px 0 4px; }
.editable-layer-empty > svg { width: 20px; height: 20px; color: var(--v2-muted); }
.editable-layer-empty strong { font-size: 10px; }
.editable-layer-empty span { color: var(--v2-muted); font-size: 8px; line-height: 1.45; }
.editable-layer-empty button { margin-top: 3px; }
.editable-layer-source-note { display: flex; align-items: flex-start; gap: 7px; padding: 7px 8px; border: 1px solid color-mix(in srgb, var(--v2-blue) 32%, var(--v2-line)); border-radius: 5px; background: color-mix(in srgb, var(--v2-blue-soft) 52%, var(--v2-panel)); }
.editable-layer-source-note > svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--v2-blue); }
.editable-layer-source-note > span { display: grid; gap: 2px; min-width: 0; }
.editable-layer-source-note strong { color: var(--v2-text); font-size: 9px; }
.editable-layer-source-note small { color: var(--v2-muted); font-size: 8px; line-height: 1.4; }
.editable-layer-tool-tabs { overflow: hidden; border: 1px solid var(--v2-line); border-radius: 5px; }
.editable-layer-tool-tabs button { flex: 1 1 0; min-height: 28px; padding: 0 4px; }
.editable-layer-selection-surface { position: relative; width: 100%; aspect-ratio: var(--slide-aspect, 16 / 9); overflow: hidden; border: 1px solid var(--v2-line); border-radius: 5px; background: #111; touch-action: none; user-select: none; }
.editable-layer-selection-surface > img { width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none; }
.editable-layer-hotspot { position: absolute; min-width: 5px !important; min-height: 5px; padding: 0; border: 1px solid #f59e0b; border-radius: 2px; background: rgba(245,158,11,.1); color: #fff; cursor: pointer; }
.editable-layer-hotspot.selected { border: 2px solid #22c55e; background: rgba(34,197,94,.15); }
.editable-layer-hotspot span { position: absolute; top: 0; left: 0; max-width: 70px; padding: 1px 3px; overflow: hidden; background: rgba(17,17,17,.78); color: #fff; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.editable-layer-instruction { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.editable-layer-instruction textarea { width: 100%; resize: vertical; font-size: 9px; }
.editable-layer-selection-summary { justify-content: space-between; gap: 6px; flex-wrap: wrap; color: var(--v2-muted); font-size: 8px; }
.editable-layer-selection-summary strong { color: var(--v2-text); }
.editable-layer-selection-summary > div { display: flex; gap: 3px; }
.editable-layer-selection-summary button { border: 0; background: transparent; color: var(--v2-blue); font-size: 8px; cursor: pointer; }
.editable-layer-candidate-list { max-height: 156px; display: grid; overflow-y: auto; border-top: 1px solid var(--v2-line); }
.editable-layer-candidate-list label { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 6px 2px; border-bottom: 1px solid var(--v2-line); cursor: pointer; }
.editable-layer-candidate-list label > span { display: grid; gap: 1px; overflow: hidden; }
.editable-layer-candidate-list strong, .editable-layer-candidate-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editable-layer-candidate-list strong { font-size: 9px; }
.editable-layer-candidate-list small { color: var(--v2-muted); font-size: 8px; }
.editable-layer-candidate-list em { color: var(--v2-muted); font-size: 8px; font-style: normal; }
@media (max-width: 1500px) { .editable-layer-workbench { grid-template-columns: minmax(0, 1fr); } .editable-model-routing { justify-content: stretch; } .editable-model-routing > span { flex: 1 1 0; } }
@media (max-width: 760px) { .editable-layer-workbench { padding: 9px 12px; } .editable-layer-mode { width: 100%; } .editable-layer-mode button { flex: 1 1 0; } .editable-model-routing { display: grid; grid-template-columns: 1fr; } .editable-model-routing > span { min-width: 0; } }

.editable-workflow-status-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 18px 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--v2-line) 72%, transparent);
}

.editable-workflow-status-band > div:first-child {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.editable-workflow-status-band strong {
  font-size: 15px;
  font-weight: 650;
}

.editable-workflow-status-band span {
  max-width: 760px;
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.6;
}

.editable-workflow-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.editable-workflow-page-list {
  display: grid;
  margin-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--v2-line) 72%, transparent);
}

.editable-workflow-page-list.empty-state {
  min-height: 220px;
  place-content: center;
  border: 0;
  background: transparent;
  color: var(--v2-muted);
}

.editable-workflow-page-row {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 88px;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 8px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--v2-line) 68%, transparent);
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.editable-workflow-page-row:hover {
  background: color-mix(in srgb, var(--v2-blue-soft) 48%, transparent);
}

.editable-workflow-page-row.active {
  background: transparent;
  box-shadow: inset 3px 0 0 var(--v2-blue);
}

.editable-page-preview {
  position: relative;
  display: block;
  width: 104px;
  aspect-ratio: var(--slide-aspect, 16 / 9);
  overflow: hidden;
  border: 1px solid var(--v2-line-strong);
  border-radius: 4px;
  background: var(--v2-panel-soft);
}

.editable-page-preview > img,
.editable-page-preview > .mini-slide {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.editable-page-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

/* Desktop workflow stages share the editor shell instead of covering it. */
#step-edit.style-preview-mode .advanced-page-tabs,
#step-edit.style-preview-mode .slide-page-actions,
#step-edit.editable-preview-mode .slide-page-actions,
#step-edit.editable-canvas-mode .slide-page-actions,
#step-edit.style-preview-mode #regenerateDeckBtn,
#step-edit.editable-preview-mode #regenerateDeckBtn,
#step-edit.editable-canvas-mode #regenerateDeckBtn {
  display: none !important;
}

#step-edit.style-preview-mode .thumb-panel > .panel-head,
#step-edit.editable-preview-mode .thumb-panel > .panel-head,
#step-edit.editable-canvas-mode .thumb-panel > .panel-head {
  min-height: 46px;
  border-bottom: 1px solid color-mix(in srgb, var(--v2-line) 76%, transparent);
}

#step-edit.style-preview-mode .inspector-view-tabs,
#step-edit.style-preview-mode #designPreviewInspector,
#step-edit.style-preview-mode #inspectorPropertiesView,
#step-edit.style-preview-mode #layoutAiPanel,
#step-edit.editable-preview-mode .inspector-view-tabs,
#step-edit.editable-preview-mode #designPreviewInspector,
#step-edit.editable-preview-mode #inspectorPropertiesView,
#step-edit.editable-preview-mode #layoutAiPanel,
#step-edit.editable-canvas-mode .inspector-view-tabs,
#step-edit.editable-canvas-mode #designPreviewInspector,
#step-edit.editable-canvas-mode #layoutAiPanel,
#step-edit.editable-canvas-mode #inspectorPropertiesView {
  display: none !important;
}

#step-edit.editable-canvas-mode #inspectorPropertiesView {
  display: block !important;
}

.workflow-stage-inspector {
  display: grid;
  gap: 0;
  padding: 0 14px 18px;
  overflow: auto;
}

.workflow-stage-inspector.hidden {
  display: none !important;
}

.workflow-inspector-head,
.workflow-source-summary,
.workflow-inspector-actions,
.workflow-inspector-section,
.editable-progress-summary {
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--v2-line) 76%, transparent);
}

.workflow-inspector-head > div,
.editable-progress-summary {
  display: grid;
  gap: 5px;
}

.workflow-inspector-head strong,
.editable-progress-summary strong {
  color: var(--v2-text);
  font-size: 15px;
  font-weight: 700;
}

.workflow-inspector-head span,
.editable-progress-summary span,
.editable-progress-summary small,
.workflow-inspector-section p,
.font-license-note {
  color: var(--v2-muted);
  font-size: 12px;
  line-height: 1.55;
}

.workflow-source-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}

.workflow-source-summary > span { color: var(--v2-muted); }
.workflow-source-summary > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.workflow-inspector-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.workflow-wide-action {
  width: 100%;
  margin-top: 12px;
}

.editable-current-action,
.editable-all-action,
.editable-refresh-design-action {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.editable-current-actions { display: grid; gap: 6px; width: 100%; }
.editable-current-actions .workflow-wide-action { margin-top: 0; }

.editable-current-action svg,
.editable-all-action svg,
.editable-refresh-design-action svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.editable-keep-page {
  width: 100%;
  margin-top: 6px;
}

.editable-action-hint {
  min-height: 18px;
  margin: 7px 0 0;
  color: var(--v2-muted);
  font-size: 10px;
  line-height: 1.45;
}

.editable-action-hint.warning { color: var(--v2-amber); }

.editable-generation-progress,
.editable-generation-result {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--v2-line) 76%, transparent);
}

.editable-generation-progress header,
.editable-generation-progress footer,
.editable-generation-result > span {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.editable-generation-progress header > span,
.editable-generation-result > span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.editable-generation-progress header strong,
.editable-generation-result strong {
  overflow: hidden;
  color: var(--v2-text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editable-generation-progress header em {
  color: var(--v2-blue);
  font-size: 10px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.editable-generation-progress svg,
.editable-generation-result svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.editable-generation-progress header svg { animation: editable-progress-spin 1s linear infinite; }

.editable-generation-progress-track {
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: color-mix(in srgb, var(--v2-line) 72%, transparent);
}

.editable-generation-progress-track > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--v2-blue);
  transition: width 180ms ease;
}

.editable-generation-progress footer small,
.editable-generation-result small {
  color: var(--v2-muted);
  font-size: 10px;
  line-height: 1.4;
}

.editable-generation-result.completed > span { color: var(--v2-green); }
.editable-generation-result.partial > span { color: var(--v2-amber); }

.editable-more-menu {
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--v2-line) 76%, transparent);
}

.editable-more-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--v2-muted);
  font-size: 11px;
  cursor: pointer;
  list-style: none;
}

.editable-more-menu > summary::-webkit-details-marker { display: none; }
.editable-more-menu > summary svg { width: 14px; height: 14px; }

.editable-more-menu > div {
  display: grid;
  gap: 5px;
  padding-top: 8px;
}

.editable-more-menu > div > button {
  min-height: 30px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--v2-text);
  font-size: 11px;
  text-align: left;
}

.editable-more-menu > div > button:not(:disabled):hover {
  background: var(--v2-panel-soft);
  color: var(--v2-blue);
}

@keyframes editable-progress-spin { to { transform: rotate(360deg); } }

.workflow-inspector-empty,
.workflow-left-empty,
.workflow-canvas-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  color: var(--v2-muted);
  text-align: center;
}

.workflow-inspector-empty { min-height: 160px; }
.workflow-left-empty { min-height: 240px; padding: 20px 12px; }
.workflow-canvas-empty { width: 100%; height: 100%; padding: 32px; }
.workflow-inspector-empty i,
.workflow-left-empty i,
.workflow-canvas-empty i { width: 28px; height: 28px; color: var(--v2-blue); }
.workflow-inspector-empty span,
.workflow-left-empty span,
.workflow-canvas-empty span { max-width: 440px; font-size: 12px; line-height: 1.5; }

.workflow-thumb {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  height: max-content !important;
  grid-template-columns: 1fr;
  gap: 7px;
  padding: 8px 8px 10px;
  border: 0;
  border-left: 3px solid transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--v2-line) 70%, transparent);
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.workflow-thumb:hover { background: color-mix(in srgb, var(--v2-blue-soft) 42%, transparent); }
.workflow-thumb.active { border-left-color: var(--v2-blue); background: color-mix(in srgb, var(--v2-blue-soft) 54%, transparent); }
.workflow-thumb.locked { border-left-color: #16a34a; }

.workflow-thumb-image {
  display: block;
  width: 100%;
  aspect-ratio: var(--slide-aspect, 16 / 9);
  overflow: hidden;
  border: 1px solid var(--v2-line-strong);
  border-radius: 4px;
  background: var(--v2-panel-soft);
}

.workflow-thumb-image img,
.workflow-thumb-image > .mini-slide {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.workflow-thumb-copy { display: grid; min-width: 0; gap: 3px; padding-right: 14px; }
.workflow-thumb-copy strong { overflow: hidden; color: var(--v2-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-thumb-copy small { color: var(--v2-muted); font-size: 10px; }
.workflow-thumb-state { position: absolute; right: 8px; bottom: 15px; width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; }
.workflow-thumb-state.valid,
.workflow-thumb-state.editable,
.workflow-thumb-state.ready { background: #16a34a; }
.workflow-thumb-state.stale,
.workflow-thumb-state.editable-stale,
.workflow-thumb-state.unverified { background: #d97706; }
.workflow-thumb-state.failed,
.workflow-thumb-state.missing { background: #dc2626; }
.workflow-thumb-state.generating,
.workflow-thumb-state.converting { background: #0284c7; }

.style-workflow-canvas,
.editable-workflow-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
}

.style-workflow-canvas > img,
.editable-workflow-canvas > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.editable-canvas-mini,
.editable-canvas-mini > .mini-slide { width: 100%; height: 100%; }

.workflow-canvas-overlay {
  position: absolute;
  inset: auto 18px 18px 18px;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, #d97706 40%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, #fff 90%, transparent);
  box-shadow: 0 12px 28px rgb(15 23 42 / 16%);
  color: #7c2d12;
  backdrop-filter: blur(18px) saturate(130%);
}

.workflow-canvas-overlay span { font-size: 12px; }
.workflow-canvas-overlay.progress { border-color: color-mix(in srgb, var(--v2-blue) 42%, transparent); color: var(--v2-text); }

.workflow-inspector-section h3 {
  margin: 0 0 10px;
  color: var(--v2-text);
  font-size: 12px;
  font-weight: 700;
}

.style-palette-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--v2-line);
}

.style-palette-tabs button {
  min-width: 0;
  padding: 7px 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--v2-muted);
  font-size: 11px;
}

.style-palette-tabs button.active { border-bottom-color: var(--v2-blue); color: var(--v2-blue); font-weight: 700; }

.style-color-role-list { display: grid; }
.style-color-role-list label {
  display: grid;
  grid-template-columns: 64px 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 36px;
  border-bottom: 1px solid color-mix(in srgb, var(--v2-line) 58%, transparent);
  font-size: 11px;
}
.style-color-role-list input[type="color"] { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; }
.style-color-role-list input[type="text"] { min-width: 0; height: 28px; border: 0; background: transparent; font-family: Consolas, monospace; font-size: 11px; }

.style-contrast-status { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding-top: 10px; color: #b45309; font-size: 11px; }
.style-contrast-status.valid { color: #15803d; }
.style-contrast-status button { border: 0; background: transparent; color: inherit; font-size: 11px; }

.workflow-field,
.style-type-scale label {
  display: grid;
  min-height: 36px;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--v2-line) 58%, transparent);
  font-size: 11px;
}
.workflow-field { grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
.workflow-field select,
.style-type-scale input { min-width: 0; height: 30px; border: 0; background: transparent; color: var(--v2-text); }
.style-type-scale { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.style-type-scale label { grid-template-columns: minmax(0, 1fr) 44px 18px; }
.style-type-scale input { text-align: right; }
.style-type-scale em { color: var(--v2-muted); font-style: normal; }

.style-source-pages-dialog {
  width: min(780px, calc(100vw - 48px));
  max-height: min(720px, calc(100vh - 48px));
  padding: 0;
  border: 1px solid color-mix(in srgb, #fff 48%, var(--v2-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--v2-panel) 88%, transparent);
  box-shadow: 0 24px 70px rgb(15 23 42 / 30%);
  color: var(--v2-text);
  backdrop-filter: blur(28px) saturate(140%);
}
.style-source-pages-dialog::backdrop { background: rgb(15 23 42 / 44%); backdrop-filter: blur(6px); }
.style-source-pages-shell { display: grid; max-height: inherit; grid-template-rows: auto minmax(0, 1fr) auto; }
.style-source-pages-shell > header,
.style-source-pages-shell > footer { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--v2-line); }
.style-source-pages-shell > footer { border-top: 1px solid var(--v2-line); border-bottom: 0; }
.style-source-pages-shell > header > div { display: grid; gap: 4px; }
.style-source-pages-shell > header span { color: var(--v2-muted); font-size: 12px; }
.style-source-pages-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; padding: 8px 18px; overflow: auto; }

.style-library-dialog {
  width: min(1880px, calc(100vw - 24px));
  height: min(980px, calc(100vh - 24px));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--v2-line-strong);
  border-radius: 8px;
  background: var(--v2-panel);
  color: var(--v2-text);
  box-shadow: 0 24px 70px rgb(15 23 42 / 28%);
}

.style-library-dialog::backdrop { background: rgb(15 23 42 / 48%); backdrop-filter: blur(7px); }
.style-library-shell { display: grid; height: 100%; grid-template-rows: auto auto auto minmax(0, 1fr); }
.style-library-shell > header,
.style-library-shell > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--v2-line); }
.style-library-shell > footer { border-top: 1px solid var(--v2-line); border-bottom: 0; }
.style-library-shell > header > div { display: flex; align-items: baseline; gap: 10px; }
.style-library-shell > header strong { font-size: 16px; }
.style-library-shell > header span { color: var(--v2-muted); font-size: 11px; }
.style-library-head-actions { display: flex; align-items: center; gap: 8px; }
.style-library-head-actions .ghost-btn { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; padding: 0 10px; }
.style-library-head-actions .ghost-btn svg { width: 14px; height: 14px; }
.style-library-toolbar { display: grid; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--v2-line); background: var(--v2-panel-soft); }
.style-library-search { display: flex; min-width: 0; height: 36px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--v2-line-strong); border-radius: 6px; background: var(--v2-panel); }
.style-library-search svg { width: 16px; height: 16px; color: var(--v2-faint); }
.style-library-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--v2-text); }
.style-library-filters { display: flex; min-width: 0; max-height: 108px; align-content: center; align-items: center; flex-wrap: wrap; gap: 4px; overflow-x: hidden; overflow-y: auto; scrollbar-color: var(--v2-line-strong) transparent; scrollbar-width: thin; }
.style-library-filters button { flex: 0 0 auto; min-height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--v2-muted); font-size: 11px; }
.style-library-filters button:hover { background: var(--v2-panel); color: var(--v2-text); }
.style-library-filters button.active { border-color: color-mix(in srgb, var(--v2-blue) 42%, var(--v2-line)); background: color-mix(in srgb, var(--v2-blue) 9%, var(--v2-panel)); color: var(--v2-blue); }
.style-library-filters button:disabled { cursor: not-allowed; opacity: .42; }
.style-library-filters button span { display: inline-grid; min-width: 17px; height: 17px; margin-left: 3px; place-items: center; border-radius: 3px; background: var(--v2-panel); color: var(--v2-faint); font-size: 9px; }
.style-library-filters button.active span { background: color-mix(in srgb, var(--v2-blue) 14%, var(--v2-panel)); color: var(--v2-blue); }
.style-library-featured-systems { display: grid; min-width: 0; gap: 12px; padding: 14px; border: 1px solid var(--v2-line); border-radius: 8px; background: var(--v2-panel); }
.style-library-featured-systems > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.style-library-featured-systems > header > div { display: grid; gap: 3px; }
.style-library-featured-systems > header strong { font-size: 13px; }
.style-library-featured-systems > header small { color: var(--v2-muted); font-size: 10px; line-height: 1.45; }
.style-library-featured-systems > header em { flex: 0 0 auto; color: var(--v2-faint); font-size: 10px; font-style: normal; }
.style-library-featured-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
.style-library-featured-actions > button { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; min-width: 0; min-height: 58px; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid color-mix(in srgb, #FF2442 32%, var(--v2-line)); border-radius: 7px; background: color-mix(in srgb, #FF2442 5%, var(--v2-panel)); color: var(--v2-text); text-align: left; }
.style-library-featured-actions > button:hover { border-color: color-mix(in srgb, #FF2442 58%, var(--v2-line)); background: color-mix(in srgb, #FF2442 9%, var(--v2-panel)); }
.style-library-featured-actions > button > svg { width: 18px; height: 18px; justify-self: center; color: #E11D48; }
.style-library-featured-actions > button > span { display: grid; min-width: 0; gap: 2px; }
.style-library-featured-actions > button strong { font-size: 12px; }
.style-library-featured-actions > button small { overflow: hidden; color: var(--v2-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.style-library-featured-actions > button em { color: #E11D48; font-size: 10px; font-style: normal; }
.style-library-platform-registry { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.style-library-platform-registry > section { display: grid; min-width: 0; align-content: start; gap: 6px; padding: 8px; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-soft); }
.style-library-platform-registry > section > header { display: flex; min-width: 0; align-items: end; justify-content: space-between; gap: 8px; padding: 0 2px 4px; border-bottom: 1px solid var(--v2-line); }
.style-library-platform-registry > section > header > span { display: grid; min-width: 0; gap: 1px; }
.style-library-platform-registry > section > header strong { font-size: 11px; }
.style-library-platform-registry > section > header small { overflow: hidden; color: var(--v2-faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.style-library-platform-registry > section > header em { flex: 0 0 auto; color: var(--v2-faint); font-size: 9px; font-style: normal; }
.style-library-platform-registry > section > div { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.style-library-platform-registry button { display: grid; min-width: 0; min-height: 50px; grid-template-columns: minmax(0, 1fr) 14px; grid-template-rows: auto auto; align-content: center; gap: 2px 7px; padding: 7px 8px; border: 1px solid transparent; border-radius: 5px; background: var(--v2-panel); color: var(--v2-text); text-align: left; }
.style-library-platform-registry button:hover { border-color: color-mix(in srgb, #2563EB 42%, var(--v2-line)); background: color-mix(in srgb, #2563EB 6%, var(--v2-panel)); }
.style-library-platform-registry button > span { display: flex; min-width: 0; align-items: baseline; gap: 5px; }
.style-library-platform-registry button b { overflow: hidden; min-width: 0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.style-library-platform-registry button small { flex: 0 0 auto; max-width: 44%; overflow: hidden; color: var(--v2-faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.style-library-platform-registry button em { overflow: hidden; min-width: 0; color: var(--v2-muted); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.style-library-platform-registry button > svg { width: 12px; height: 12px; grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--v2-faint); }
.style-library-platform-registry [data-platform-group="china"] button:hover { border-color: color-mix(in srgb, #E11D48 38%, var(--v2-line)); background: color-mix(in srgb, #E11D48 5%, var(--v2-panel)); }
.style-library-platform-registry [data-platform-group="china"] button > svg { color: #E11D48; }
.style-library-featured-subhead { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 2px; }
.style-library-featured-subhead strong { font-size: 11px; }
.style-library-featured-subhead small { overflow: hidden; color: var(--v2-faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.style-library-city-registry { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.style-library-city-registry > section { display: grid; min-width: 0; align-content: start; gap: 5px; padding: 8px; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-soft); }
.style-library-city-registry > section > header { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 0 2px 3px; }
.style-library-city-registry > section > header strong { font-size: 10px; }
.style-library-city-registry > section > header small { color: var(--v2-faint); font-size: 9px; }
.style-library-city-registry > section > div { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.style-library-city-registry button { display: grid; min-width: 0; gap: 2px; padding: 6px 7px; border: 1px solid transparent; border-radius: 5px; background: var(--v2-panel); color: var(--v2-text); text-align: left; }
.style-library-city-registry button:hover { border-color: color-mix(in srgb, #D97706 42%, var(--v2-line)); background: color-mix(in srgb, #D97706 6%, var(--v2-panel)); }
.style-library-city-registry button > span { display: flex; min-width: 0; align-items: baseline; gap: 4px; }
.style-library-city-registry button b { flex: 0 0 auto; font-size: 10px; }
.style-library-city-registry button small { overflow: hidden; color: var(--v2-faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.style-library-city-registry button em { overflow: hidden; color: var(--v2-muted); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.catalog-search-match { display: flex; min-width: 0; align-items: center; gap: 5px; padding: 5px 7px; border-left: 2px solid #2563EB; border-radius: 3px; background: color-mix(in srgb, #2563EB 7%, var(--v2-panel)); color: var(--v2-muted); font-size: 9px; line-height: 1.35; }
.catalog-search-match svg { width: 12px; height: 12px; flex: 0 0 auto; color: #2563EB; }
.catalog-search-match b { flex: 0 0 auto; color: #1D4ED8; font-weight: 650; }
.catalog-search-match em { overflow: hidden; min-width: 0; color: var(--v2-muted); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.technique-library-card > .catalog-search-match { margin: 0 12px; }
.style-library-sort { display: flex; width: 132px; height: 36px; align-items: center; gap: 7px; padding: 0 8px; border: 1px solid var(--v2-line-strong); border-radius: 6px; background: var(--v2-panel); color: var(--v2-muted); }
.style-library-sort svg { width: 14px; height: 14px; flex: 0 0 auto; }
.style-library-sort select { width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--v2-text); font-size: 10px; }
.style-library-workspace { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) 286px; }
.style-library-catalog { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr); }
.style-library-catalog-head { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 14px; border-bottom: 1px solid var(--v2-line); background: color-mix(in srgb, var(--v2-panel-soft) 76%, var(--v2-panel)); }
.style-library-catalog-head > div { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
.style-library-catalog-head strong { font-size: 12px; }
.style-library-catalog-head span { color: var(--v2-muted); font-size: 9px; }
.style-library-catalog-head button { display: inline-flex; min-height: 28px; align-items: center; gap: 5px; padding: 0 8px; font-size: 9px; }
.style-library-catalog-head button svg { width: 12px; height: 12px; }
.style-library-catalog-actions { display: flex; align-items: center; gap: 6px; }
.style-library-catalog-actions .active { border-color: color-mix(in srgb, var(--v2-blue) 45%, var(--v2-line)); background: color-mix(in srgb, var(--v2-blue) 9%, var(--v2-panel)); color: var(--v2-blue); }
.style-library-coverage { display: grid; height: clamp(220px, 40vh, 360px); gap: 12px; padding: 12px 14px 14px; overflow: auto; border-bottom: 1px solid var(--v2-line); background: color-mix(in srgb, var(--v2-blue) 4%, var(--v2-panel)); }
.style-library-coverage.hidden { display: none; }
.style-library-coverage > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.style-library-coverage > header > div { display: grid; gap: 2px; }
.style-library-coverage > header strong { font-size: 12px; }
.style-library-coverage > header small { color: var(--v2-muted); font-size: 9px; }
.style-library-coverage > header em { padding: 3px 6px; border: 1px solid var(--v2-line); border-radius: 4px; color: var(--v2-blue); font-size: 9px; font-style: normal; }
.style-library-coverage-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.style-library-coverage-stats > span { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel); }
.style-library-coverage-stats b { font-size: 17px; }
.style-library-coverage-stats small { color: var(--v2-muted); font-size: 8px; }
.style-library-coverage-loading { display: flex; min-height: 120px; align-items: center; justify-content: center; gap: 8px; color: var(--v2-muted); font-size: 10px; }
.style-library-coverage-loading svg { width: 16px; height: 16px; animation: design-preview-spin .8s linear infinite; }
.style-library-professional-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.style-library-professional-links button { display: grid; min-width: 0; min-height: 48px; grid-template-columns: 18px minmax(0, 1fr) 14px; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel); color: inherit; text-align: left; }
.style-library-professional-links button:hover { border-color: color-mix(in srgb, var(--v2-blue) 48%, var(--v2-line)); background: color-mix(in srgb, var(--v2-blue) 7%, var(--v2-panel)); }
.style-library-professional-links button > svg { width: 15px; height: 15px; color: var(--v2-blue); }
.style-library-professional-links button > svg:last-child { width: 12px; height: 12px; color: var(--v2-muted); }
.style-library-professional-links button > span { display: grid; min-width: 0; gap: 2px; }
.style-library-professional-links button strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.style-library-professional-links button small { overflow: hidden; color: var(--v2-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.style-library-capability-completeness { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid color-mix(in srgb, #16A34A 32%, var(--v2-line)); border-radius: 5px; background: color-mix(in srgb, #16A34A 6%, var(--v2-panel)); }
.style-library-capability-completeness > span { display: flex; min-width: 0; align-items: center; gap: 5px; }
.style-library-capability-completeness svg { width: 13px; height: 13px; flex: 0 0 auto; color: #16A34A; }
.style-library-capability-completeness strong { color: var(--v2-ink); font-size: 10px; }
.style-library-capability-completeness small { color: var(--v2-muted); font-size: 8px; }
.style-library-capability-completeness > em { margin-left: auto; color: #15803D; font-size: 8px; font-style: normal; }
.style-library-coverage-matrix { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
.style-library-coverage-matrix > section { display: grid; min-width: 0; align-content: start; gap: 7px; padding: 9px 10px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel); }
.style-library-coverage-matrix > section.wide { grid-column: 1 / -1; }
.style-library-coverage-matrix > section > strong { font-size: 10px; }
.style-library-coverage-taxonomy { display: grid; gap: 5px; }
.style-library-coverage-taxonomy.regions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.style-library-coverage-taxonomy.periods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.style-library-coverage-taxonomy.scripts { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); }
.style-library-coverage-taxonomy button { display: flex; min-width: 0; min-height: 40px; align-items: center; justify-content: space-between; gap: 7px; padding: 5px 7px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel-soft); color: inherit; text-align: left; }
.style-library-coverage-taxonomy button:hover:not(:disabled),
.style-library-coverage-taxonomy button.active { border-color: color-mix(in srgb, var(--v2-blue) 48%, var(--v2-line)); background: color-mix(in srgb, var(--v2-blue) 9%, var(--v2-panel)); }
.style-library-coverage-taxonomy button:disabled { cursor: not-allowed; opacity: .42; }
.style-library-coverage-taxonomy button > span { display: grid; min-width: 0; gap: 1px; }
.style-library-coverage-taxonomy b,
.style-library-coverage-taxonomy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-library-coverage-taxonomy b { color: var(--v2-muted); font-size: 8px; }
.style-library-coverage-taxonomy small { color: var(--v2-faint); font-size: 7px; }
.style-library-coverage-taxonomy em { flex: 0 0 auto; color: var(--v2-blue); font-size: 9px; font-style: normal; }
.style-library-coverage-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 12px; }
.style-library-coverage-body > section { display: grid; min-width: 0; align-content: start; gap: 7px; padding: 9px 10px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel); }
.style-library-coverage-body > section > strong { font-size: 10px; }
.style-library-coverage-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 8px; }
.style-library-coverage-bars button { display: grid; min-width: 0; gap: 3px; padding: 4px 0; border: 0; background: transparent; color: inherit; text-align: left; }
.style-library-coverage-bars button > span { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 5px; }
.style-library-coverage-bars b { overflow: hidden; color: var(--v2-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.style-library-coverage-bars em { color: var(--v2-faint); font-size: 8px; font-style: normal; }
.style-library-coverage-bars i { display: block; height: 3px; overflow: hidden; border-radius: 999px; background: var(--v2-panel-soft); }
.style-library-coverage-bars u { display: block; height: 100%; border-radius: inherit; background: var(--v2-blue); text-decoration: none; }
.style-library-coverage-bars button:hover b { color: var(--v2-blue); }
.style-library-coverage-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.style-library-coverage-modes span { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 5px 6px; border-radius: 4px; background: var(--v2-panel-soft); }
.style-library-coverage-modes b { color: var(--v2-muted); font-size: 8px; }
.style-library-coverage-modes em { color: var(--v2-blue); font-size: 9px; font-style: normal; }
.style-library-coverage-body p { margin: 0; color: var(--v2-muted); font-size: 8px; line-height: 1.5; }
.style-library-capability-matrix { display: grid; gap: 9px; padding: 10px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel); }
.style-library-capability-matrix > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.style-library-capability-matrix > header > div { display: grid; gap: 2px; }
.style-library-capability-matrix > header strong { font-size: 10px; }
.style-library-capability-matrix > header small { color: var(--v2-muted); font-size: 8px; }
.style-library-capability-matrix > header em { flex: 0 0 auto; color: var(--v2-blue); font-size: 9px; font-style: normal; }
.style-library-capability-matrix > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.style-library-capability-matrix > div > section { display: grid; min-width: 0; gap: 6px; padding: 8px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel-soft); }
.style-library-capability-matrix section > header { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 6px; }
.style-library-capability-matrix section > header strong { font-size: 9px; }
.style-library-capability-matrix section > header small { overflow: hidden; color: var(--v2-faint); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.style-library-capability-matrix section > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.style-library-capability-matrix button { display: flex; min-width: 0; min-height: 38px; align-items: center; justify-content: space-between; gap: 7px; padding: 5px 7px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel); color: inherit; text-align: left; }
.style-library-capability-matrix button:hover,
.style-library-capability-matrix button.active { border-color: color-mix(in srgb, var(--v2-blue) 48%, var(--v2-line)); background: color-mix(in srgb, var(--v2-blue) 9%, var(--v2-panel)); }
.style-library-capability-matrix button > span { display: grid; min-width: 0; gap: 1px; }
.style-library-capability-matrix button b,
.style-library-capability-matrix button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-library-capability-matrix button b { color: var(--v2-muted); font-size: 8px; }
.style-library-capability-matrix button small { color: var(--v2-faint); font-size: 7px; }
.style-library-capability-matrix button em { flex: 0 0 auto; color: var(--v2-blue); font-size: 8px; font-style: normal; }
.style-library-grid { display: grid; min-height: 0; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 10px; padding: 12px 14px 20px; overflow: auto; background: color-mix(in srgb, var(--v2-panel-soft) 68%, var(--v2-panel)); }
.style-library-card { position: relative; display: grid; min-width: 0; align-self: start; overflow: hidden; border: 1px solid var(--v2-line); border-radius: 7px; background: var(--v2-panel); box-shadow: 0 2px 10px rgb(15 23 42 / 5%); }
.style-library-card:hover { border-color: var(--v2-line-strong); box-shadow: 0 8px 22px rgb(15 23 42 / 10%); transform: translateY(-1px); }
.style-library-card.selected { border-color: var(--v2-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--v2-blue) 18%, transparent), 0 8px 22px rgb(15 23 42 / 10%); }
.style-library-card.recommended::before { position: absolute; z-index: 3; top: 8px; left: 8px; padding: 3px 7px; border-radius: 4px; background: rgb(15 23 42 / 82%); color: #fff; content: "内容推荐"; font-size: 11px; }
.style-library-card.matched::before { background: var(--v2-blue); content: "本轮匹配"; }
.style-library-select { display: grid; width: 100%; min-width: 0; height: auto; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.style-library-preview { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--v2-line); background: var(--v2-panel-soft); cursor: zoom-in; }
.style-library-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.style-library-preview::after { position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / 14%); content: ""; pointer-events: none; }
.style-library-preview-expand { position: absolute; z-index: 2; right: 8px; bottom: 8px; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgb(255 255 255 / 34%); border-radius: 5px; background: rgb(15 23 42 / 70%); color: #fff; opacity: 0; pointer-events: none; transition: opacity 140ms ease; }
.style-library-preview:hover .style-library-preview-expand,
.style-library-preview:focus-within .style-library-preview-expand,
.style-match-result-preview:hover .style-library-preview-expand { opacity: 1; }
.style-library-preview-expand svg { width: 16px; height: 16px; }
.style-library-image-source { position: absolute; z-index: 2; bottom: 8px; left: 8px; display: inline-flex; height: 22px; align-items: center; gap: 5px; padding: 0 7px; border: 1px solid rgb(255 255 255 / 28%); border-radius: 4px; background: rgb(15 23 42 / 76%); color: #fff; font-size: 9px; line-height: 1; pointer-events: none; }
.style-library-image-source svg { width: 11px; height: 11px; }
.style-library-image-source.local { color: rgb(255 255 255 / 74%); }
.style-library-card-copy { display: grid; gap: 7px; padding: 10px 11px 11px; }
.style-library-card-title { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.style-library-card-title strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.style-library-card-title span { flex: 0 0 auto; color: var(--v2-muted); font-size: 9px; }
.style-library-palette { display: flex; gap: 4px; }
.style-library-palette i { width: 22px; height: 9px; border: 1px solid rgb(15 23 42 / 10%); border-radius: 2px; }
.style-library-card-meta { display: grid; gap: 3px; color: var(--v2-muted); font-size: 9px; line-height: 1.45; }
.style-library-card-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-library-card-image-policy { display: flex; min-width: 0; align-items: baseline; gap: 6px; color: var(--v2-faint); font-size: 8px; line-height: 1.35; }
.style-library-card-image-policy b { flex: 0 0 auto; color: var(--v2-blue); font-size: 8px; font-weight: 650; }
.style-library-card-image-policy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-library-card-uses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.style-library-card-uses em { display: flex; min-width: 0; min-height: 24px; align-items: center; gap: 4px; padding: 0 6px; overflow: hidden; border-left: 2px solid #2563EB; border-radius: 3px; background: color-mix(in srgb, #2563EB 7%, var(--v2-panel-soft)); color: var(--v2-muted); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.style-library-card-uses em.life { border-left-color: #E87932; background: color-mix(in srgb, #E87932 7%, var(--v2-panel-soft)); }
.style-library-card-uses svg { width: 10px; height: 10px; flex: 0 0 auto; color: #2563EB; }
.style-library-card-uses em.life svg { color: #E87932; }
.style-library-card-uses b { flex: 0 0 auto; color: var(--v2-text); font-size: 7px; }
.style-library-card-check { position: absolute; z-index: 4; top: 8px; right: 8px; display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgb(255 255 255 / 42%); border-radius: 50%; background: rgb(15 23 42 / 64%); color: #fff; pointer-events: none; }
.style-library-card-check svg { width: 14px; height: 14px; opacity: 0; }
.style-library-card.selected .style-library-card-check { border-color: var(--v2-blue); background: var(--v2-blue); }
.style-library-card.selected .style-library-card-check svg { opacity: 1; }
.style-library-zoom { position: absolute; z-index: 5; top: 42px; right: 8px; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgb(255 255 255 / 36%); border-radius: 5px; background: rgb(15 23 42 / 68%); color: #fff; }
.style-library-zoom svg { width: 14px; height: 14px; }

.technique-library-dialog { width: min(1540px, calc(100vw - 48px)) !important; height: min(940px, calc(100vh - 48px)) !important; max-width: calc(100vw - 48px) !important; max-height: calc(100vh - 48px) !important; padding: 0; overflow: hidden; border: 1px solid var(--v2-line-strong); border-radius: 8px; background: var(--v2-panel); color: var(--v2-text); box-shadow: 0 28px 80px rgb(15 23 42 / 30%); }
.technique-library-dialog::backdrop { background: rgb(15 23 42 / 54%); backdrop-filter: blur(8px); }
.technique-library-shell { display: grid; height: 100%; grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.technique-library-shell > header,
.technique-library-shell > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--v2-line); }
.technique-library-shell > header > div { display: grid; min-width: 0; gap: 3px; }
.technique-library-shell > header strong { font-size: 16px; }
.technique-library-shell > header span,
.technique-library-shell > footer { color: var(--v2-muted); font-size: 11px; }
.technique-library-shell > footer { border-top: 1px solid var(--v2-line); border-bottom: 0; }
.technique-library-toolbar { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); align-items: start; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--v2-line); background: var(--v2-panel-soft); }
.technique-library-search { display: flex; min-width: 0; height: 38px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--v2-line-strong); border-radius: 6px; background: var(--v2-panel); }
.technique-library-search svg { width: 16px; height: 16px; color: var(--v2-faint); }
.technique-library-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--v2-text); }
.technique-library-filters { display: flex; min-width: 0; max-height: 82px; align-content: flex-start; flex-wrap: wrap; gap: 4px; overflow: auto; }
.technique-library-filters button { flex: 0 0 auto; min-height: 34px; padding: 0 9px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--v2-muted); font-size: 10px; }
.technique-library-filters button:hover { background: var(--v2-panel); color: var(--v2-text); }
.technique-library-filters button.active { border-color: color-mix(in srgb, var(--v2-blue) 44%, var(--v2-line)); background: color-mix(in srgb, var(--v2-blue) 9%, var(--v2-panel)); color: var(--v2-blue); }
.technique-library-filters button span { display: inline-grid; min-width: 18px; height: 18px; margin-left: 4px; place-items: center; border-radius: 3px; background: var(--v2-panel); color: var(--v2-faint); font-size: 9px; }
.technique-library-result-head { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 16px; border-bottom: 1px solid var(--v2-line); background: color-mix(in srgb, var(--v2-panel-soft) 72%, var(--v2-panel)); }
.technique-library-result-head > div { display: flex; align-items: baseline; gap: 8px; }
.technique-library-result-head strong { font-size: 12px; }
.technique-library-result-head span { color: var(--v2-muted); font-size: 10px; }
.technique-library-result-head button { display: inline-flex; min-height: 28px; align-items: center; gap: 5px; padding: 0 8px; font-size: 9px; }
.technique-library-result-head button svg { width: 12px; height: 12px; }
.technique-library-grid { display: grid; min-height: 0; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 12px; padding: 14px 16px 24px; overflow: auto; background: color-mix(in srgb, var(--v2-panel-soft) 66%, var(--v2-panel)); }
.technique-library-card { display: grid; min-width: 0; gap: 10px; padding: 13px; border: 1px solid var(--v2-line); border-radius: 7px; background: var(--v2-panel); box-shadow: 0 2px 10px rgb(15 23 42 / 4%); }
.technique-library-card:hover { border-color: var(--v2-line-strong); box-shadow: 0 8px 22px rgb(15 23 42 / 8%); }
.technique-library-preview { position: relative; width: calc(100% + 26px); aspect-ratio: 16 / 9; margin: -13px -13px 1px; overflow: hidden; border-bottom: 1px solid var(--v2-line); border-radius: 7px 7px 0 0; background: var(--v2-panel-soft); cursor: zoom-in; }
.technique-library-preview > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.technique-library-preview:hover .style-library-preview-expand,
.technique-library-preview:focus-within .style-library-preview-expand { opacity: 1; }
.technique-library-card > header { display: grid; min-width: 0; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.technique-library-card > header > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 6px; background: color-mix(in srgb, var(--v2-blue) 9%, var(--v2-panel-soft)); color: var(--v2-blue); }
.technique-library-card > header svg { width: 17px; height: 17px; }
.technique-library-card > header > div { display: grid; min-width: 0; gap: 2px; }
.technique-library-card > header strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.technique-library-card > header small { overflow: hidden; color: var(--v2-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.technique-library-card > header em { flex: 0 0 auto; padding: 3px 6px; border: 1px solid var(--v2-line); border-radius: 4px; color: var(--v2-faint); font-size: 8px; font-style: normal; }
.technique-library-card > p { min-height: 42px; margin: 0; color: var(--v2-muted); font-size: 10px; line-height: 1.55; }
.technique-library-card dl { display: grid; gap: 7px; margin: 0; }
.technique-library-card dl > div { display: grid; min-width: 0; grid-template-columns: 38px minmax(0, 1fr); gap: 7px; }
.technique-library-card dt { color: var(--v2-faint); font-size: 9px; }
.technique-library-card dd { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px; margin: 0; color: var(--v2-text); font-size: 9px; line-height: 1.45; }
.technique-library-card dd span { padding: 2px 5px; border-radius: 3px; background: var(--v2-panel-soft); color: var(--v2-muted); }
.technique-library-card .avoid dd { color: #B45309; }
.technique-library-card > footer { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--v2-line); }
.technique-library-card-tags { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px; }
.technique-library-card-tags em { padding: 2px 5px; border: 1px solid var(--v2-line); border-radius: 3px; color: var(--v2-faint); font-size: 8px; font-style: normal; }
.technique-library-card > footer > button { display: inline-flex; min-height: 28px; flex: 0 0 auto; align-items: center; gap: 5px; padding: 0 7px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel-soft); color: var(--v2-blue); font-size: 8px; }
.technique-library-card > footer > button:hover { border-color: color-mix(in srgb, var(--v2-blue) 45%, var(--v2-line)); background: color-mix(in srgb, var(--v2-blue) 8%, var(--v2-panel)); }
.technique-library-card > footer > button svg { width: 11px; height: 11px; }
.technique-library-empty { grid-column: 1 / -1; display: grid; min-height: 300px; place-items: center; align-content: center; gap: 7px; color: var(--v2-muted); text-align: center; }
.technique-library-empty svg { width: 26px; height: 26px; color: var(--v2-faint); }
.technique-library-empty strong { color: var(--v2-text); font-size: 13px; }
.technique-library-empty span { font-size: 10px; }
.technique-detail-dialog { box-sizing: border-box; width: min(1400px, calc(100vw - 72px)) !important; height: min(880px, calc(100vh - 72px)) !important; max-width: calc(100vw - 72px) !important; max-height: calc(100vh - 72px) !important; margin: auto !important; padding: 0; overflow: hidden; border: 1px solid var(--v2-line-strong); border-radius: 8px; background: var(--v2-panel); color: var(--v2-text); box-shadow: 0 30px 90px rgb(15 23 42 / 34%); }
.technique-detail-dialog::backdrop { background: rgb(15 23 42 / 60%); backdrop-filter: blur(9px); }
.technique-detail-shell { display: grid; height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; }
.technique-detail-shell > header,
.technique-detail-shell > footer { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 17px; border-bottom: 1px solid var(--v2-line); }
.technique-detail-shell > header > div { display: grid; min-width: 0; gap: 2px; }
.technique-detail-shell > header strong { font-size: 15px; }
.technique-detail-shell > header span,
.technique-detail-shell > footer > span { color: var(--v2-muted); font-size: 10px; }
.technique-detail-shell > footer { border-top: 1px solid var(--v2-line); border-bottom: 0; }
.technique-detail-shell > footer > div { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.technique-detail-shell > footer button { display: inline-flex; min-height: 34px; align-items: center; gap: 6px; }
.technique-detail-content { display: grid; min-height: 0; align-content: start; gap: 14px; padding: 16px 18px 26px; overflow: auto; background: color-mix(in srgb, var(--v2-panel-soft) 68%, var(--v2-panel)); }
.technique-detail-hero { display: grid; min-width: 0; grid-template-columns: minmax(380px, .95fr) minmax(0, 1.05fr); gap: 18px; padding: 14px; border: 1px solid var(--v2-line); border-radius: 7px; background: var(--v2-panel); }
.technique-detail-hero figure { position: relative; min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-panel-soft); }
.technique-detail-hero figure img { display: block; width: 100%; height: 100%; min-height: 270px; object-fit: cover; cursor: zoom-in; }
.technique-detail-hero figure > span { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 4px; background: rgb(15 23 42 / 76%); color: #fff; font-size: 8px; }
.technique-detail-hero figure > span svg { width: 11px; height: 11px; }
.technique-detail-hero > div { display: grid; min-width: 0; align-content: start; gap: 10px; }
.technique-detail-category { display: inline-flex; width: max-content; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 4px; background: color-mix(in srgb, var(--v2-blue) 9%, var(--v2-panel-soft)); color: var(--v2-blue); font-size: 9px; }
.technique-detail-category svg { width: 13px; height: 13px; }
.technique-detail-hero h2 { display: grid; gap: 3px; margin: 0; font-size: 22px; }
.technique-detail-hero h2 small { color: var(--v2-muted); font-size: 11px; font-weight: 500; }
.technique-detail-hero > div > p { margin: 0; color: var(--v2-muted); font-size: 11px; line-height: 1.65; }
.technique-detail-hero dl { display: grid; gap: 7px; margin: 0; }
.technique-detail-hero dl > div { display: grid; min-width: 0; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-top: 1px solid var(--v2-line); }
.technique-detail-hero dt { color: var(--v2-faint); font-size: 9px; }
.technique-detail-hero dd { min-width: 0; margin: 0; color: var(--v2-text); font-size: 10px; line-height: 1.5; }
.technique-detail-hero dd.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.technique-detail-hero dd.tags span { padding: 2px 5px; border-radius: 3px; background: var(--v2-panel-soft); color: var(--v2-muted); }
.technique-detail-hero .avoid dd { color: #B45309; }
.technique-detail-section { display: grid; min-width: 0; gap: 9px; padding: 12px; border: 1px solid var(--v2-line); border-radius: 7px; background: var(--v2-panel); }
.technique-detail-section > header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 10px; }
.technique-detail-section > header > div { display: grid; min-width: 0; gap: 2px; }
.technique-detail-section > header strong { font-size: 12px; }
.technique-detail-section > header small { color: var(--v2-muted); font-size: 9px; }
.technique-detail-section > header em { flex: 0 0 auto; padding: 3px 6px; border: 1px solid var(--v2-line); border-radius: 4px; color: var(--v2-blue); font-size: 9px; font-style: normal; }
.technique-detail-capabilities > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.technique-detail-capabilities article { display: grid; min-width: 0; gap: 7px; padding: 10px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel-soft); }
.technique-detail-capabilities article header { display: grid; min-width: 0; gap: 2px; }
.technique-detail-capabilities article header strong { font-size: 10px; }
.technique-detail-capabilities article header small,
.technique-detail-capabilities article > small { color: var(--v2-faint); font-size: 8px; line-height: 1.45; }
.technique-detail-capabilities article p { margin: 0; color: var(--v2-muted); font-size: 9px; line-height: 1.5; }
.technique-detail-capabilities article > div { display: flex; flex-wrap: wrap; gap: 4px; }
.technique-detail-capabilities article > div span { padding: 2px 5px; border-radius: 3px; background: var(--v2-panel); color: var(--v2-blue); font-size: 8px; }
.technique-detail-capabilities article > button { width: max-content; min-height: 27px; padding: 0 7px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel); color: var(--v2-blue); font-size: 8px; }
.capability-detail-dialog { box-sizing: border-box; width: min(1380px, calc(100vw - 72px)) !important; height: min(880px, calc(100vh - 72px)) !important; max-width: calc(100vw - 72px) !important; max-height: calc(100vh - 72px) !important; margin: auto !important; padding: 0; overflow: hidden; border: 1px solid var(--v2-line-strong); border-radius: 8px; background: var(--v2-panel); color: var(--v2-text); box-shadow: 0 30px 90px rgb(15 23 42 / 34%); }
.capability-detail-dialog::backdrop { background: rgb(15 23 42 / 60%); backdrop-filter: blur(9px); }
.capability-detail-shell { display: grid; height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; }
.capability-detail-shell > header,
.capability-detail-shell > footer { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 17px; border-bottom: 1px solid var(--v2-line); }
.capability-detail-shell > header > div { display: grid; min-width: 0; gap: 2px; }
.capability-detail-shell > header strong { font-size: 15px; }
.capability-detail-shell > header span,
.capability-detail-shell > footer { color: var(--v2-muted); font-size: 10px; }
.capability-detail-shell > footer { border-top: 1px solid var(--v2-line); border-bottom: 0; }
.capability-detail-content { display: grid; min-height: 0; align-content: start; gap: 14px; padding: 16px 18px 26px; overflow: auto; background: color-mix(in srgb, var(--v2-panel-soft) 68%, var(--v2-panel)); }
.capability-detail-hero,
.capability-detail-section { display: grid; min-width: 0; gap: 10px; padding: 14px; border: 1px solid var(--v2-line); border-radius: 7px; background: var(--v2-panel); }
.capability-detail-hero h2 { display: grid; gap: 3px; margin: 0; font-size: 22px; }
.capability-detail-hero h2 small { color: var(--v2-muted); font-size: 11px; font-weight: 500; }
.capability-detail-hero > p { max-width: 980px; margin: 0; color: var(--v2-muted); font-size: 11px; line-height: 1.65; }
.capability-detail-hero dl { display: grid; gap: 0; margin: 0; }
.capability-detail-hero dl > div { display: grid; min-width: 0; grid-template-columns: 100px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--v2-line); }
.capability-detail-hero dt { color: var(--v2-faint); font-size: 9px; }
.capability-detail-hero dd { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px; margin: 0; color: var(--v2-text); font-size: 10px; line-height: 1.5; }
.capability-detail-hero dd span { padding: 2px 5px; border-radius: 3px; background: var(--v2-panel-soft); color: var(--v2-muted); }
.capability-detail-section > header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 10px; }
.capability-detail-section > header > div { display: grid; min-width: 0; gap: 2px; }
.capability-detail-section > header strong { font-size: 12px; }
.capability-detail-section > header small { color: var(--v2-muted); font-size: 9px; }
.capability-detail-section > header em { flex: 0 0 auto; padding: 3px 6px; border: 1px solid var(--v2-line); border-radius: 4px; color: var(--v2-blue); font-size: 9px; font-style: normal; }
.capability-detail-styles > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.capability-detail-styles button { display: grid; min-width: 0; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel-soft); color: inherit; text-align: left; }
.capability-detail-styles img { width: 72px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; }
.capability-detail-styles button > span,
.capability-detail-techniques button > span,
.capability-detail-sources a > span { display: grid; min-width: 0; gap: 2px; }
.capability-detail-styles strong,
.capability-detail-styles small,
.capability-detail-techniques strong,
.capability-detail-techniques small,
.capability-detail-sources strong,
.capability-detail-sources small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capability-detail-styles strong,
.capability-detail-techniques strong,
.capability-detail-sources strong { font-size: 9px; }
.capability-detail-styles small,
.capability-detail-techniques small,
.capability-detail-sources small { color: var(--v2-muted); font-size: 8px; }
.capability-detail-styles svg,
.capability-detail-techniques svg,
.capability-detail-sources svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--v2-blue); }
.capability-detail-techniques > div,
.capability-detail-sources > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.capability-detail-techniques button,
.capability-detail-sources a { display: flex; min-width: 0; min-height: 44px; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel-soft); color: inherit; text-align: left; text-decoration: none; }
.capability-detail-styles button:hover,
.capability-detail-techniques button:hover,
.capability-detail-sources a:hover { border-color: color-mix(in srgb, var(--v2-blue) 44%, var(--v2-line)); }
.research-source-library-dialog { box-sizing: border-box; width: min(1540px, calc(100vw - 48px)) !important; height: min(940px, calc(100vh - 48px)) !important; max-width: calc(100vw - 48px) !important; max-height: calc(100vh - 48px) !important; margin: auto !important; padding: 0; overflow: hidden; border: 1px solid var(--v2-line-strong); border-radius: 8px; background: var(--v2-panel); color: var(--v2-text); box-shadow: 0 28px 80px rgb(15 23 42 / 30%); }
.research-source-library-dialog::backdrop,
.research-source-detail-dialog::backdrop { background: rgb(15 23 42 / 58%); backdrop-filter: blur(8px); }
.research-source-library-shell { display: grid; height: 100%; grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.research-source-library-shell > header,
.research-source-library-shell > footer { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 17px; border-bottom: 1px solid var(--v2-line); }
.research-source-library-shell > header > div { display: grid; min-width: 0; gap: 2px; }
.research-source-library-shell > header strong { font-size: 15px; }
.research-source-library-shell > header span,
.research-source-library-shell > footer { color: var(--v2-muted); font-size: 10px; }
.research-source-library-shell > footer { border-top: 1px solid var(--v2-line); border-bottom: 0; }
.research-source-library-shell > footer button { display: inline-flex; min-height: 30px; align-items: center; gap: 5px; }
.research-source-library-toolbar { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); align-items: start; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--v2-line); background: var(--v2-panel-soft); }
.research-source-library-search { display: flex; min-width: 0; height: 38px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--v2-line-strong); border-radius: 6px; background: var(--v2-panel); }
.research-source-library-search svg { width: 16px; height: 16px; color: var(--v2-faint); }
.research-source-library-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--v2-text); }
.research-source-library-filters { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px; }
.research-source-library-filters button { min-height: 34px; padding: 0 9px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--v2-muted); font-size: 10px; }
.research-source-library-filters button.active { border-color: color-mix(in srgb, var(--v2-blue) 44%, var(--v2-line)); background: color-mix(in srgb, var(--v2-blue) 9%, var(--v2-panel)); color: var(--v2-blue); }
.research-source-library-filters button span { display: inline-grid; min-width: 18px; height: 18px; margin-left: 4px; place-items: center; border-radius: 3px; background: var(--v2-panel); font-size: 9px; }
.research-source-library-result-head { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 16px; border-bottom: 1px solid var(--v2-line); }
.research-source-library-result-head > div { display: flex; align-items: baseline; gap: 8px; }
.research-source-library-result-head strong { font-size: 12px; }
.research-source-library-result-head span { color: var(--v2-muted); font-size: 10px; }
.research-source-library-grid { display: grid; min-height: 0; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 10px; padding: 14px 16px 24px; overflow: auto; background: color-mix(in srgb, var(--v2-panel-soft) 66%, var(--v2-panel)); }
.research-source-card { display: grid; min-width: 0; gap: 9px; padding: 11px; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-panel); }
.research-source-card > header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 8px; }
.research-source-card > header > span { display: grid; min-width: 0; gap: 2px; }
.research-source-card strong,
.research-source-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.research-source-card strong { font-size: 10px; }
.research-source-card small { color: var(--v2-faint); font-size: 8px; }
.research-source-card header em { flex: 0 0 auto; padding: 2px 5px; border: 1px solid var(--v2-line); border-radius: 3px; color: var(--v2-blue); font-size: 8px; font-style: normal; }
.research-source-card > p { overflow: hidden; margin: 0; color: var(--v2-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.research-source-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.research-source-card dl > div { display: flex; align-items: baseline; justify-content: center; gap: 4px; border-right: 1px solid var(--v2-line); }
.research-source-card dl > div:last-child { border-right: 0; }
.research-source-card dt { color: var(--v2-faint); font-size: 8px; }
.research-source-card dd { margin: 0; color: var(--v2-text); font-size: 10px; font-weight: 650; }
.research-source-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 7px; border-top: 1px solid var(--v2-line); }
.research-source-card > footer a,
.research-source-card > footer button { display: inline-flex; min-height: 28px; align-items: center; gap: 5px; padding: 0 7px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel-soft); color: var(--v2-blue); font-size: 8px; text-decoration: none; }
.research-source-card > footer svg { width: 11px; height: 11px; }
.research-source-detail-dialog { box-sizing: border-box; width: min(1320px, calc(100vw - 72px)) !important; height: min(860px, calc(100vh - 72px)) !important; max-width: calc(100vw - 72px) !important; max-height: calc(100vh - 72px) !important; margin: auto !important; padding: 0; overflow: hidden; border: 1px solid var(--v2-line-strong); border-radius: 8px; background: var(--v2-panel); color: var(--v2-text); }

@media (max-width: 1499px), (max-height: 899px) {
  .style-library-v3-dialog,
  .technique-detail-dialog,
  .capability-detail-dialog,
  .research-source-detail-dialog {
    position: fixed !important;
    inset: 16px !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
  }
}
.research-source-detail-shell { display: grid; height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; }
.research-source-detail-shell > header,
.research-source-detail-shell > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 17px; border-bottom: 1px solid var(--v2-line); }
.research-source-detail-shell > header > div { display: grid; gap: 2px; }
.research-source-detail-shell > header strong { font-size: 15px; }
.research-source-detail-shell > header span,
.research-source-detail-shell > footer { color: var(--v2-muted); font-size: 10px; }
.research-source-detail-shell > footer { border-top: 1px solid var(--v2-line); border-bottom: 0; }
.research-source-detail-content { display: grid; min-height: 0; align-content: start; gap: 12px; padding: 16px 18px 24px; overflow: auto; background: var(--v2-panel-soft); }
.research-source-detail-content > section { display: grid; min-width: 0; gap: 9px; padding: 12px; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-panel); }
.research-source-detail-content > section > header { display: flex; justify-content: space-between; gap: 8px; }
.research-source-detail-content > section > header strong { font-size: 11px; }
.research-source-detail-content > section > header em { color: var(--v2-blue); font-size: 9px; font-style: normal; }
.research-source-detail-hero > span { width: max-content; padding: 3px 6px; border-radius: 3px; background: color-mix(in srgb, var(--v2-blue) 9%, var(--v2-panel-soft)); color: var(--v2-blue); font-size: 8px; }
.research-source-detail-hero h2 { margin: 0; font-size: 20px; }
.research-source-detail-hero p { margin: 0; color: var(--v2-muted); font-size: 9px; }
.research-source-detail-hero a { display: inline-flex; width: max-content; min-height: 32px; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--v2-line); border-radius: 4px; color: var(--v2-blue); font-size: 9px; text-decoration: none; }
.source-detail-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.source-detail-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 7px; }
.source-detail-links button,
.source-detail-styles button { display: grid; min-width: 0; min-height: 44px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel-soft); color: inherit; text-align: left; }
.source-detail-styles button { grid-template-columns: 70px minmax(0, 1fr) auto; }
.source-detail-styles img { width: 70px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; }
.source-detail-links button > span,
.source-detail-styles button > span { display: grid; min-width: 0; gap: 2px; }
.source-detail-links strong,
.source-detail-styles strong,
.source-detail-links small,
.source-detail-styles small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-detail-links strong,
.source-detail-styles strong { font-size: 9px; }
.source-detail-links small,
.source-detail-styles small { color: var(--v2-muted); font-size: 8px; }
.source-detail-links svg,
.source-detail-styles svg { width: 12px; height: 12px; color: var(--v2-blue); }
.technique-detail-styles > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.technique-detail-styles button { display: grid; min-width: 0; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel-soft); color: inherit; text-align: left; }
.technique-detail-styles button:hover { border-color: color-mix(in srgb, var(--v2-blue) 44%, var(--v2-line)); }
.technique-detail-styles img { width: 64px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; }
.technique-detail-styles button > span { display: grid; min-width: 0; gap: 2px; }
.technique-detail-styles button strong,
.technique-detail-styles button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.technique-detail-styles button strong { font-size: 9px; }
.technique-detail-styles button small { color: var(--v2-muted); font-size: 8px; }
.technique-detail-styles button svg { width: 12px; height: 12px; color: var(--v2-blue); }
.technique-detail-bottom { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.technique-detail-sources > div,
.technique-detail-related > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.technique-detail-sources a,
.technique-detail-related button { display: flex; min-width: 0; min-height: 44px; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel-soft); color: inherit; text-align: left; text-decoration: none; }
.technique-detail-sources a:hover,
.technique-detail-related button:hover { border-color: color-mix(in srgb, var(--v2-blue) 44%, var(--v2-line)); }
.technique-detail-sources a > span,
.technique-detail-related button { min-width: 0; }
.technique-detail-sources a > span { display: grid; gap: 2px; }
.technique-detail-sources strong,
.technique-detail-related strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.technique-detail-sources small,
.technique-detail-related small { overflow: hidden; color: var(--v2-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.technique-detail-sources svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--v2-blue); }
.technique-detail-related button { display: grid; justify-content: stretch; gap: 2px; }
.technique-detail-empty { display: grid; min-height: 80px; place-items: center; color: var(--v2-muted); font-size: 9px; }
.style-library-empty { grid-column: 1 / -1; display: grid; min-height: 260px; place-items: center; align-content: center; gap: 6px; color: var(--v2-muted); }
.style-match-panel { display: grid; max-height: 300px; grid-auto-rows: max-content; align-content: start; gap: 10px; padding: 12px 16px 14px; overflow: auto; border-bottom: 1px solid var(--v2-line); background: color-mix(in srgb, var(--v2-blue) 4%, var(--v2-panel)); }
.style-match-panel.collapsed { max-height: none; padding: 9px 16px; overflow: hidden; }
.style-match-panel.collapsed .style-match-controls,
.style-match-panel.collapsed .style-brief-controls,
.style-match-panel.collapsed .style-match-templates,
.style-match-panel.collapsed .style-dimension-groups,
.style-match-panel.collapsed .style-match-result { display: none; }
.style-match-panel.collapsed .style-match-head { align-items: center; }
.style-match-panel.collapsed .style-match-head > div:first-child > span { display: none; }
.style-match-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.style-match-head > div { display: grid; gap: 4px; }
.style-match-head strong { font-size: 13px; }
.style-match-head span { color: var(--v2-muted); font-size: 10px; line-height: 1.5; }
.style-match-head > .style-match-head-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.style-match-head-actions .assistant-icon-btn { width: 28px; height: 28px; }
.style-match-head-actions .assistant-icon-btn svg { width: 13px; height: 13px; }
.style-match-status { flex: 0 0 auto; padding: 4px 7px; border: 1px solid var(--v2-line); border-radius: 4px; color: var(--v2-muted); font-size: 10px; }
.style-match-status.is-loading { border-color: color-mix(in srgb, var(--v2-blue) 40%, var(--v2-line)); color: var(--v2-blue); }
.style-match-status.is-ready { border-color: color-mix(in srgb, #16a34a 38%, var(--v2-line)); color: #15803d; }
.style-match-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 8px; }
.style-match-controls textarea { min-height: 58px; resize: vertical; border: 1px solid var(--v2-line-strong); border-radius: 5px; padding: 8px 10px; background: var(--v2-panel); color: var(--v2-text); font-size: 12px; line-height: 1.5; }
.style-match-controls button { display: inline-flex; min-width: 126px; align-items: center; justify-content: center; gap: 7px; }
.style-brief-controls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.style-brief-controls label { display: grid; min-width: 0; gap: 4px; }
.style-brief-controls label[hidden] { display: none !important; }
.style-brief-controls label > span { color: var(--v2-faint); font-size: 8px; }
.style-brief-controls select, .style-brief-controls input { width: 100%; min-width: 0; height: 30px; padding: 0 7px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel); color: var(--v2-text); font-size: 9px; }
.style-match-templates { display: flex; min-width: 0; align-items: center; gap: 5px; overflow-x: auto; padding-bottom: 2px; }
.style-match-templates > span { flex: 0 0 auto; margin-right: 2px; color: var(--v2-faint); font-size: 9px; }
.style-match-templates button { flex: 0 0 auto; min-height: 25px; padding: 0 8px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel); color: var(--v2-muted); font-size: 9px; }
.style-match-templates button:hover { border-color: var(--v2-line-strong); color: var(--v2-text); }
.style-dimension-groups { display: grid; gap: 8px; }
.style-dimension-group { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: start; gap: 9px; }
.style-dimension-group > strong { padding-top: 5px; color: var(--v2-muted); font-size: 10px; }
.style-dimension-options { display: flex; flex-wrap: wrap; gap: 5px; }
.style-dimension-options button { min-height: 26px; padding: 0 8px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel); color: var(--v2-muted); font-size: 10px; }
.style-dimension-options button.has-children { display: grid; gap: 2px; min-height: 34px; text-align: left; }
.style-dimension-options button.has-children small { color: var(--v2-faint); font-size: 8px; line-height: 1.35; }
.style-dimension-options button.has-children.active small { color: color-mix(in srgb, var(--v2-blue) 70%, var(--v2-muted)); }
.style-dimension-options button:hover { border-color: var(--v2-line-strong); color: var(--v2-text); }
.style-dimension-options button.active { border-color: color-mix(in srgb, var(--v2-blue) 55%, var(--v2-line)); background: color-mix(in srgb, var(--v2-blue) 11%, var(--v2-panel)); color: var(--v2-blue); }
.style-content-structure-group { align-items: start; }
.style-content-structure-picker { display: grid; min-width: 0; gap: 8px; }
.style-content-structure-tabs button.expanded { box-shadow: inset 0 -2px 0 var(--v2-blue); }
.style-content-layout-detail { display: grid; min-width: 0; gap: 8px; padding: 9px 10px 10px; border: 1px solid var(--v2-line); border-radius: 5px; background: color-mix(in srgb, var(--v2-panel-soft) 70%, var(--v2-panel)); }
.style-content-layout-detail > header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 10px; }
.style-content-layout-detail > header > div { display: grid; min-width: 0; gap: 2px; }
.style-content-layout-detail > header strong { font-size: 10px; }
.style-content-layout-detail > header span { color: var(--v2-muted); font-size: 8px; line-height: 1.4; }
.style-content-layout-detail > header em { flex: 0 0 auto; padding: 2px 5px; border-radius: 3px; background: var(--v2-panel); color: var(--v2-faint); font-size: 8px; font-style: normal; }
.style-content-layout-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 5px; }
.style-content-layout-options button { display: grid; min-width: 0; min-height: 43px; align-content: start; gap: 3px; padding: 6px 7px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel); color: var(--v2-muted); text-align: left; }
.style-content-layout-options button:hover { border-color: var(--v2-line-strong); color: var(--v2-text); }
.style-content-layout-options button.active { border-color: color-mix(in srgb, var(--v2-blue) 58%, var(--v2-line)); background: color-mix(in srgb, var(--v2-blue) 10%, var(--v2-panel)); color: var(--v2-blue); }
.style-content-layout-options button span { font-size: 9px; font-weight: 650; }
.style-content-layout-options button small { color: var(--v2-faint); font-size: 8px; line-height: 1.35; }
.style-content-layout-options button.active small { color: color-mix(in srgb, var(--v2-blue) 60%, var(--v2-muted)); }
.style-match-result { display: grid; gap: 9px; padding: 11px 0 0; border-top: 1px solid color-mix(in srgb, var(--v2-blue) 24%, var(--v2-line)); }
.style-match-result.hidden { display: none; }
.style-match-result-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.style-match-result-head strong { font-size: 11px; }
.style-match-result-head span { color: var(--v2-muted); font-size: 10px; }
.style-match-result p { margin: 0; color: var(--v2-muted); font-size: 10px; line-height: 1.5; }
.style-match-result-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px; }
.style-match-result-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-panel); }
.style-match-result-card:hover { border-color: var(--v2-line-strong); }
.style-match-result-card.selected { border-color: var(--v2-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--v2-blue) 14%, transparent); }
.style-match-result-option { display: grid; width: 100%; min-width: 0; grid-template-columns: 132px minmax(0, 1fr); gap: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.style-match-result-preview { position: relative; min-height: 132px; overflow: hidden; border-right: 1px solid var(--v2-line); background: var(--v2-panel-soft); cursor: zoom-in; }
.style-match-result-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.style-match-result-score { position: absolute; bottom: 7px; left: 7px; padding: 3px 6px; border-radius: 3px; background: rgb(15 23 42 / 78%); color: #fff; font-size: 9px; }
.style-match-result-check { position: absolute; top: 7px; right: 7px; display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid rgb(255 255 255 / 48%); border-radius: 50%; background: rgb(15 23 42 / 62%); color: #fff; }
.style-match-result-check svg { width: 12px; height: 12px; opacity: 0; }
.style-match-result-card.selected .style-match-result-check { border-color: var(--v2-blue); background: var(--v2-blue); }
.style-match-result-card.selected .style-match-result-check svg { opacity: 1; }
.style-match-result-copy { display: grid; min-width: 0; align-content: start; gap: 6px; padding: 9px 10px 10px; }
.style-match-result-title { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 7px; }
.style-match-result-title strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.style-match-result-title em { flex: 0 0 auto; color: var(--v2-faint); font-size: 8px; font-style: normal; }
.style-match-result-palette { display: flex; gap: 3px; }
.style-match-result-palette i { width: 18px; height: 8px; border: 1px solid rgb(15 23 42 / 10%); border-radius: 2px; }
.style-match-result-spec { display: grid; gap: 2px; color: var(--v2-muted); font-size: 8px; line-height: 1.4; }
.style-match-result-spec span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-match-result-spec b { display: inline-block; min-width: 29px; color: var(--v2-text); font-weight: 600; }
.style-match-result-reason,
.style-match-result-usecases { color: var(--v2-muted); font-size: 8px; line-height: 1.45; }
.style-match-result-usecases { color: var(--v2-faint); }
.style-match-result-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.style-match-result-actions button { min-height: 28px; padding: 0 9px; font-size: 10px; }
.style-match-result-actions button { display: inline-flex; align-items: center; gap: 5px; }
.style-match-result-actions svg { width: 12px; height: 12px; }
.style-library-card-meta span { white-space: normal; }
.style-library-card-dimensions { display: flex; flex-wrap: wrap; gap: 4px; }
.style-library-card-dimensions em { padding: 2px 5px; border-radius: 3px; background: var(--v2-panel-soft); color: var(--v2-muted); font-size: 9px; font-style: normal; }
.style-library-selection,
.style-library-actions { display: flex; align-items: center; gap: 10px; }
.style-library-selection label { display: flex; align-items: center; gap: 7px; color: var(--v2-muted); font-size: 10px; }
.style-library-selection input { width: 58px; height: 32px; }
.style-library-actions button { display: inline-flex; align-items: center; gap: 7px; }
.style-library-actions svg { width: 15px; height: 15px; }
.style-library-selection-panel { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto auto; border-left: 1px solid var(--v2-line); background: var(--v2-panel); }
.style-library-selection-panel > header { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--v2-line); }
.style-library-selection-panel > header > div { display: grid; min-width: 0; gap: 2px; }
.style-library-selection-panel > header strong { font-size: 12px; }
.style-library-selection-panel > header span { color: var(--v2-muted); font-size: 9px; }
.style-library-selection-panel > header .assistant-icon-btn { width: 28px; height: 28px; }
.style-library-selection-panel > header svg { width: 13px; height: 13px; }
.style-library-selection-tray { min-height: 0; overflow: auto; padding: 4px 10px 10px; }
.style-library-selection-item { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px; padding: 8px 0; border-bottom: 1px solid var(--v2-line); }
.style-library-selection-detail { display: grid; min-width: 0; grid-template-columns: 20px 68px minmax(0, 1fr); align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.style-library-selection-index { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 4px; background: color-mix(in srgb, var(--v2-blue) 14%, var(--v2-panel-soft)); color: var(--v2-blue); font-size: 9px; font-weight: 700; }
.style-library-selection-detail img { display: block; width: 68px; height: 40px; object-fit: cover; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel-soft); }
.style-library-selection-detail > span:last-child { display: grid; min-width: 0; gap: 3px; }
.style-library-selection-detail strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.style-library-selection-detail small { color: var(--v2-muted); font-size: 8px; }
.style-library-selection-remove { display: grid; width: 26px; height: 26px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--v2-faint); }
.style-library-selection-remove:hover { border-color: var(--v2-line); background: var(--v2-panel-soft); color: #DC2626; }
.style-library-selection-remove svg { width: 12px; height: 12px; }
.style-library-selection-empty { display: grid; min-height: 180px; place-items: center; align-content: center; gap: 5px; color: var(--v2-muted); text-align: center; }
.style-library-selection-empty svg { width: 24px; height: 24px; color: var(--v2-faint); }
.style-library-selection-empty strong { font-size: 11px; }
.style-library-selection-empty span { color: var(--v2-faint); font-size: 9px; }
.style-library-count-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--v2-line); }
.style-library-count-setting > span { display: grid; gap: 2px; }
.style-library-count-setting strong { font-size: 10px; }
.style-library-count-setting small { color: var(--v2-faint); font-size: 8px; }
.style-library-count-setting input { width: 58px; height: 32px; }
.style-library-selection-panel .style-library-actions { display: grid; grid-template-columns: 1fr; gap: 7px; padding: 0 12px 12px; }
.style-library-selection-panel .style-library-actions button { width: 100%; min-height: 34px; justify-content: center; }

/* Style catalog V3: desktop asset browser */
.style-library-v3-dialog { width: calc(100vw - 28px); height: calc(100vh - 28px); max-width: none; max-height: none; }
.style-library-v3-shell { grid-template-rows: auto auto auto minmax(0, 1fr); }
.style-catalog-views { display: flex; min-width: 0; align-items: stretch; gap: 2px; padding: 0 14px; overflow-x: auto; border-bottom: 1px solid var(--v2-line); background: var(--v2-panel); }
.style-catalog-views button { position: relative; display: inline-flex; min-width: 112px; min-height: 45px; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border: 0; background: transparent; color: var(--v2-muted); font-size: 11px; }
.style-catalog-views button::after { position: absolute; right: 10px; bottom: 0; left: 10px; height: 2px; background: transparent; content: ""; }
.style-catalog-views button:hover { color: var(--v2-text); }
.style-catalog-views button.active { color: var(--v2-blue); }
.style-catalog-views button.active::after { background: var(--v2-blue); }
.style-catalog-views svg { width: 14px; height: 14px; }
.style-catalog-context { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 16px; border-bottom: 1px solid var(--v2-line); background: color-mix(in srgb, var(--v2-blue) 4%, var(--v2-panel-soft)); }
.style-catalog-context > span { display: grid; gap: 2px; }
.style-catalog-context strong { font-size: 11px; }
.style-catalog-context small { color: var(--v2-muted); font-size: 9px; }
.style-catalog-context > div { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 6px; overflow: hidden; }
.style-catalog-context em { display: inline-flex; min-height: 26px; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel); color: var(--v2-muted); font-size: 9px; font-style: normal; white-space: nowrap; }
.style-catalog-context em svg { width: 11px; height: 11px; color: var(--v2-blue); }
.style-library-v3-workspace { position: relative; grid-template-columns: 232px minmax(0, 1fr) 300px; }
.style-catalog-facet-panel { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr) auto; border-right: 1px solid var(--v2-line); background: var(--v2-panel); }
.style-catalog-facet-panel > .style-library-search { margin: 12px 12px 8px; }
.style-catalog-active-filters { display: flex; min-height: 31px; flex-wrap: wrap; gap: 4px; padding: 0 12px 8px; }
.style-catalog-active-filters > span { color: var(--v2-faint); font-size: 9px; }
.style-catalog-active-filters button { display: inline-flex; min-height: 23px; align-items: center; gap: 4px; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--v2-blue) 35%, var(--v2-line)); border-radius: 4px; background: color-mix(in srgb, var(--v2-blue) 8%, var(--v2-panel)); color: var(--v2-blue); font-size: 8px; }
.style-catalog-active-filters svg { width: 10px; height: 10px; }
.style-catalog-facet-panel .style-library-filters { display: grid; max-height: none; align-content: start; gap: 0; padding: 0 12px 16px; overflow: auto; }
.style-catalog-facet-panel .style-library-filters > section { display: grid; gap: 7px; padding: 11px 0; border-top: 1px solid var(--v2-line); }
.style-catalog-facet-panel .style-library-filters > section:first-of-type { border-top: 0; }
.style-catalog-facet-panel .style-library-filters section > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.style-catalog-facet-panel .style-library-filters section > header strong { font-size: 10px; }
.style-catalog-facet-panel .style-library-filters section > header small { color: var(--v2-faint); font-size: 8px; }
.style-catalog-facet-panel .style-library-filters section > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.style-catalog-facet-panel .style-library-filters section button { display: flex; min-width: 0; min-height: 30px; align-items: center; justify-content: space-between; gap: 7px; padding: 0 8px; border: 1px solid transparent; border-radius: 4px; background: var(--v2-panel-soft); color: var(--v2-muted); font-size: 9px; text-align: left; }
.style-catalog-facet-panel .style-library-filters section button span { display: block; min-width: 0; overflow: hidden; background: transparent; color: inherit; font-size: inherit; text-overflow: ellipsis; white-space: nowrap; }
.style-catalog-facet-panel .style-library-filters section button em { flex: 0 0 auto; color: var(--v2-faint); font-size: 7px; font-style: normal; }
.style-catalog-facet-panel .style-library-filters section button:hover { border-color: var(--v2-line-strong); color: var(--v2-text); }
.style-catalog-facet-panel .style-library-filters section button.active { border-color: color-mix(in srgb, var(--v2-blue) 45%, var(--v2-line)); background: color-mix(in srgb, var(--v2-blue) 9%, var(--v2-panel)); color: var(--v2-blue); }
.style-catalog-facet-panel .style-library-filters section p { margin: 0; color: var(--v2-muted); font-size: 9px; line-height: 1.5; }
.style-catalog-facet-panel > footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--v2-line); }
.style-catalog-facet-panel > footer .style-library-sort { min-width: 0; }
.style-library-v3-workspace > .style-library-catalog { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.style-library-v3-workspace .style-match-panel[hidden] { display: none; }
#styleLibraryCoverageBtn[hidden], #personalStyleCreateBtn[hidden] { display: none !important; }
.style-catalog-solution-switch { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel); }
.style-catalog-solution-switch[hidden] { display: none !important; }
.style-catalog-solution-switch button { min-height: 24px; padding: 0 8px; border: 0; border-radius: 3px; background: transparent; color: var(--v2-muted); font-size: 8px; }
.style-catalog-solution-switch button.active { background: color-mix(in srgb, var(--v2-blue) 11%, var(--v2-panel)); color: var(--v2-blue); }
.style-library-v3-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 12px; padding: 12px; }
.style-library-v3-card { min-width: 0; border-radius: 6px; }
.style-library-v3-card .style-library-preview { aspect-ratio: 16 / 9; min-height: 0; }
.style-library-v3-card .style-library-preview img { width: 100%; height: 100%; object-fit: cover; }
.style-library-v3-card .style-library-card-copy { min-height: 93px; gap: 7px; padding: 9px 10px 10px; }
.style-library-v3-card .style-library-card-title strong { font-size: 12px; }
.style-library-v3-card .style-library-card-title span { max-width: 42%; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.style-library-v3-card-tags { display: flex; min-width: 0; gap: 4px; }
.style-library-v3-card-tags em { min-width: 0; padding: 3px 5px; overflow: hidden; border-radius: 3px; background: var(--v2-panel-soft); color: var(--v2-muted); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.style-library-v3-score { display: inline-flex; align-items: center; gap: 4px; color: var(--v2-blue); font-size: 8px; }
.style-library-v3-score svg { width: 10px; height: 10px; }
.style-library-v3-card-actions { position: absolute; z-index: 5; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .14s ease; }
.style-library-v3-card:hover .style-library-v3-card-actions, .style-library-v3-card:focus-within .style-library-v3-card-actions { opacity: 1; }
.style-library-v3-card-actions button { display: grid; width: 27px; height: 27px; place-items: center; padding: 0; border: 1px solid rgb(255 255 255 / 35%); border-radius: 5px; background: rgb(15 23 42 / 78%); color: #fff; }
.style-library-v3-card-actions svg { width: 13px; height: 13px; }
.style-library-v3-card .style-library-card-check { top: auto; right: 9px; bottom: 9px; width: 23px; height: 23px; }
.style-catalog-load-more { min-height: 32px; margin: 8px 12px 12px; justify-content: center; }
.style-route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.style-route-card { min-width: 0; overflow: hidden; border: 1px solid var(--v2-line); border-radius: 7px; background: var(--v2-panel); }
.style-route-card.selected { border-color: var(--v2-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--v2-blue) 14%, transparent); }
.style-route-select { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.style-route-select figure { position: relative; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; background: var(--v2-panel-soft); }
.style-route-select figure img { width: 100%; height: 100%; object-fit: cover; }
.style-route-select figure span { position: absolute; bottom: 7px; left: 7px; padding: 3px 6px; border-radius: 3px; background: rgb(15 23 42 / 78%); color: #fff; font-size: 8px; }
.style-route-select figure > svg { position: absolute; top: 8px; right: 8px; width: 19px; height: 19px; color: #fff; filter: drop-shadow(0 1px 3px rgb(0 0 0 / 55%)); }
.style-route-select header { display: grid; gap: 3px; padding: 9px 10px; border-bottom: 1px solid var(--v2-line); }
.style-route-select header strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.style-route-select header small { color: var(--v2-muted); font-size: 8px; }
.style-route-body { display: grid; gap: 8px; padding: 9px 10px 10px; }
.style-route-body > p { min-height: 36px; margin: 0; color: var(--v2-muted); font-size: 8px; line-height: 1.5; }
.style-route-facts { display: grid; gap: 4px; }
.style-route-facts span { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px; color: var(--v2-muted); font-size: 7px; line-height: 1.4; }
.style-route-facts b { color: var(--v2-faint); font-weight: 650; }
.style-route-palette { display: flex; min-height: 20px; align-items: center; justify-content: space-between; gap: 8px; }
.style-route-palette > span { color: var(--v2-faint); font-size: 7px; }
.style-route-palette > div { display: flex; gap: 4px; }
.style-route-palette label { position: relative; width: 24px; height: 16px; overflow: hidden; border: 1px solid var(--v2-line-strong); border-radius: 3px; cursor: pointer; }
.style-route-palette label i { display: block; width: 100%; height: 100%; }
.style-route-palette input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.style-route-layouts { display: flex; min-height: 20px; flex-wrap: wrap; gap: 3px; }
.style-route-layouts em { padding: 2px 5px; border-radius: 3px; background: var(--v2-panel-soft); color: var(--v2-faint); font-size: 7px; font-style: normal; }
.style-route-event-suite { display: grid; gap: 6px; padding: 7px; border: 1px solid color-mix(in srgb, var(--v2-blue) 24%, var(--v2-line)); border-radius: 5px; background: color-mix(in srgb, var(--v2-blue) 4%, var(--v2-panel-soft)); }
.style-route-event-suite > span { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
.style-route-event-suite > span em { overflow: hidden; color: var(--v2-muted); font-size: 7px; font-style: normal; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.style-route-event-suite button { min-height: 27px; justify-content: center; font-size: 8px; }
.style-route-event-suite button svg { width: 11px; height: 11px; }
.style-route-modifiers { display: grid; gap: 4px; }
.style-route-modifiers label { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 7px; }
.style-route-modifiers label span { display: flex; justify-content: space-between; gap: 4px; color: var(--v2-muted); font-size: 7px; }
.style-route-modifiers label b { color: var(--v2-text); }
.style-route-modifiers input { width: 100%; accent-color: var(--v2-blue); }
.style-route-risk { display: flex; align-items: flex-start; gap: 5px; padding-top: 7px; border-top: 1px solid var(--v2-line); color: var(--v2-faint); font-size: 7px; line-height: 1.4; }
.style-route-risk svg { width: 10px; height: 10px; flex: 0 0 auto; color: #d97706; }
.style-catalog-detail-dialog, .personal-style-dialog { width: min(1120px, calc(100vw - 48px)); height: min(820px, calc(100vh - 48px)); padding: 0; overflow: hidden; border: 1px solid var(--v2-line-strong); border-radius: 8px; background: var(--v2-panel); color: var(--v2-text); }
.style-catalog-detail-dialog::backdrop, .personal-style-dialog::backdrop { background: rgb(15 23 42 / 58%); backdrop-filter: blur(6px); }
.style-catalog-detail-shell { display: grid; height: 100%; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.style-catalog-detail-shell > header, .personal-style-shell > header { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--v2-line); }
.style-catalog-detail-shell > header > div, .personal-style-shell > header > div { display: grid; gap: 3px; }
.style-catalog-detail-shell > header strong, .personal-style-shell > header strong { font-size: 14px; }
.style-catalog-detail-shell > header span, .personal-style-shell > header span { color: var(--v2-muted); font-size: 9px; }
.style-catalog-detail-shell > nav { display: flex; gap: 3px; padding: 7px 12px; overflow-x: auto; border-bottom: 1px solid var(--v2-line); }
.style-catalog-detail-shell > nav button { display: inline-flex; min-height: 30px; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--v2-muted); font-size: 9px; }
.style-catalog-detail-shell > nav button.active { border-color: color-mix(in srgb, var(--v2-blue) 40%, var(--v2-line)); background: color-mix(in srgb, var(--v2-blue) 8%, var(--v2-panel)); color: var(--v2-blue); }
.style-catalog-detail-shell > nav svg { width: 12px; height: 12px; }
.style-catalog-detail-content { min-height: 0; overflow: auto; padding: 16px; }
.style-catalog-detail-shell > footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--v2-line); }
.style-catalog-detail-overview { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 22px; align-items: start; }
.style-catalog-detail-overview figure { aspect-ratio: 16 / 9; margin: 0; overflow: hidden; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-panel-soft); }
.style-catalog-detail-overview figure img { width: 100%; height: 100%; object-fit: cover; }
.style-catalog-detail-overview > div { display: grid; gap: 10px; padding-top: 4px; }
.style-catalog-detail-overview > div > span { color: var(--v2-blue); font-size: 9px; }
.style-catalog-detail-overview h2 { margin: 0; font-size: 22px; letter-spacing: 0; }
.style-catalog-detail-overview p { margin: 0; color: var(--v2-muted); font-size: 11px; line-height: 1.7; }
.style-catalog-detail-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.style-catalog-detail-chips em { padding: 4px 7px; border-radius: 3px; background: var(--v2-panel-soft); color: var(--v2-muted); font-size: 8px; font-style: normal; }
.style-catalog-event-overview { display: grid; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--v2-line); }
.style-catalog-event-overview > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.style-catalog-event-overview strong { font-size: 12px; }
.style-catalog-event-overview small { color: var(--v2-muted); font-size: 8px; }
.style-catalog-event-overview > div { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.style-catalog-event-overview > div span { display: grid; min-width: 0; gap: 5px; padding: 9px; border-bottom: 2px solid color-mix(in srgb, var(--v2-blue) 50%, var(--v2-line)); background: var(--v2-panel-soft); color: var(--v2-muted); font-size: 8px; }
.style-catalog-event-overview > div b { color: var(--v2-blue); font-size: 8px; }
.style-catalog-detail-section, .style-catalog-related { display: grid; gap: 12px; }
.style-catalog-detail-section > header, .style-catalog-related > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--v2-line); }
.style-catalog-detail-section > header strong, .style-catalog-related > header strong { font-size: 13px; }
.style-catalog-detail-section > header small, .style-catalog-related > header small { color: var(--v2-muted); font-size: 9px; }
.style-catalog-detail-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.style-catalog-detail-list > span { display: flex; min-height: 38px; align-items: center; gap: 7px; padding: 7px 9px; border-bottom: 1px solid var(--v2-line); color: var(--v2-muted); font-size: 9px; }
.style-catalog-detail-list svg { width: 13px; height: 13px; color: var(--v2-blue); }
.style-catalog-capability-section { margin-top: 22px; }
.style-catalog-capability-section > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.style-catalog-capability-section button { display: grid; min-width: 0; min-height: 52px; grid-template-columns: minmax(0, 1fr) auto 14px; align-items: center; gap: 8px; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--v2-line); background: transparent; color: inherit; text-align: left; }
.style-catalog-capability-section button:hover { color: var(--v2-blue); }
.style-catalog-capability-section button > span { display: grid; min-width: 0; gap: 2px; }
.style-catalog-capability-section button strong, .style-catalog-capability-section button small, .style-catalog-capability-section button em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-catalog-capability-section button strong { font-size: 10px; }
.style-catalog-capability-section button small { color: var(--v2-muted); font-size: 8px; }
.style-catalog-capability-section button em { max-width: 170px; color: var(--v2-faint); font-size: 8px; font-style: normal; }
.style-catalog-capability-section button svg { width: 13px; height: 13px; color: var(--v2-blue); }
.style-catalog-event-spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.style-catalog-event-spec span { display: grid; gap: 4px; padding: 9px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel-soft); color: var(--v2-text); font-size: 9px; }
.style-catalog-event-spec b { color: var(--v2-faint); font-size: 7px; }
.style-catalog-event-assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.style-catalog-event-assets article { display: grid; min-width: 0; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px; border-bottom: 1px solid var(--v2-line); }
.style-catalog-event-assets article > svg { width: 15px; height: 15px; color: var(--v2-blue); }
.style-catalog-event-assets article > span { display: grid; min-width: 0; gap: 3px; }
.style-catalog-event-assets strong { font-size: 9px; }
.style-catalog-event-assets small { overflow: hidden; color: var(--v2-muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.style-catalog-event-assets em { padding: 3px 5px; border-radius: 3px; background: var(--v2-panel-soft); color: var(--v2-faint); font-size: 7px; font-style: normal; }
.style-catalog-detail-section dl { display: grid; gap: 0; margin: 0; }
.style-catalog-detail-section dl > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--v2-line); }
.style-catalog-detail-section dt { color: var(--v2-faint); font-size: 9px; }
.style-catalog-detail-section dd { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; color: var(--v2-muted); font-size: 10px; line-height: 1.55; }
.style-catalog-detail-section dd span { padding: 3px 6px; border-radius: 3px; background: var(--v2-panel-soft); }
.style-catalog-constraint-list, .style-catalog-source-list { display: grid; gap: 0; }
.style-catalog-constraint-list p { display: flex; gap: 8px; margin: 0; padding: 11px 0; border-bottom: 1px solid var(--v2-line); color: var(--v2-muted); font-size: 10px; line-height: 1.6; }
.style-catalog-constraint-list svg { width: 14px; height: 14px; flex: 0 0 auto; color: #16a34a; }
.style-catalog-profile-groups { display: grid; gap: 14px; margin-top: 22px; }
.style-catalog-method-profile { display: grid; gap: 11px; padding: 12px 14px; border-left: 3px solid var(--v2-blue); background: var(--v2-panel-soft); }
.style-catalog-method-profile.city { border-left-color: #168c72; }
.style-catalog-method-profile > header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 12px; }
.style-catalog-method-profile > header > span { display: grid; min-width: 0; gap: 2px; }
.style-catalog-method-profile > header em { color: var(--v2-blue); font-size: 8px; font-style: normal; }
.style-catalog-method-profile.city > header em { color: #168c72; }
.style-catalog-method-profile > header strong { font-size: 12px; }
.style-catalog-method-profile > header small { overflow: hidden; color: var(--v2-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.style-catalog-method-profile > header > svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--v2-blue); }
.style-catalog-method-profile.city > header > svg { color: #168c72; }
.style-catalog-method-profile > p { margin: 0; color: var(--v2-muted); font-size: 9px; line-height: 1.55; }
.style-catalog-method-profile > dl { display: grid; gap: 0; margin: 0; }
.style-catalog-method-profile > dl > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--v2-line); }
.style-catalog-method-profile dt { color: var(--v2-faint); font-size: 8px; }
.style-catalog-method-profile dd { margin: 0; color: var(--v2-muted); font-size: 9px; line-height: 1.5; }
.style-catalog-method-profile > footer { display: flex; gap: 7px; padding-top: 9px; border-top: 1px solid var(--v2-line); color: var(--v2-muted); font-size: 8px; line-height: 1.5; }
.style-catalog-method-profile > footer svg { width: 13px; height: 13px; flex: 0 0 auto; color: #16a34a; }
.style-catalog-professional-profile { display: grid; gap: 11px; padding: 12px 14px; border-left: 3px solid #b146c2; background: var(--v2-panel-soft); }
.style-catalog-professional-profile > header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 12px; }
.style-catalog-professional-profile > header > span { display: grid; min-width: 0; gap: 2px; }
.style-catalog-professional-profile > header em { color: #b146c2; font-size: 8px; font-style: normal; }
.style-catalog-professional-profile > header strong { font-size: 12px; }
.style-catalog-professional-profile > header small { overflow: hidden; color: var(--v2-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.style-catalog-professional-profile > header > svg { width: 16px; height: 16px; flex: 0 0 auto; color: #b146c2; }
.style-catalog-professional-profile > p { margin: 0; color: var(--v2-muted); font-size: 9px; line-height: 1.55; }
.style-catalog-professional-profile > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.style-catalog-professional-profile section { min-width: 0; padding-top: 9px; border-top: 1px solid var(--v2-line); }
.style-catalog-professional-profile section > strong { font-size: 9px; }
.style-catalog-professional-profile ol, .style-catalog-professional-profile ul { display: grid; gap: 5px; margin: 8px 0 0; padding-left: 18px; color: var(--v2-muted); font-size: 8px; line-height: 1.45; }
.style-catalog-source-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--v2-line); color: inherit; text-decoration: none; }
.style-catalog-source-list a > span { display: grid; gap: 3px; }
.style-catalog-source-list a strong { font-size: 10px; }
.style-catalog-source-list a small { color: var(--v2-muted); font-size: 8px; }
.style-catalog-source-list svg { width: 13px; height: 13px; color: var(--v2-blue); }
.style-catalog-related { margin-top: 22px; }
.style-catalog-related > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.style-catalog-related button { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; padding: 0; overflow: hidden; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel); color: inherit; text-align: left; }
.style-catalog-related img { width: 72px; height: 52px; object-fit: cover; }
.style-catalog-related button span { display: grid; min-width: 0; gap: 3px; padding-right: 7px; }
.style-catalog-related button strong, .style-catalog-related button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-catalog-related button strong { font-size: 9px; }
.style-catalog-related button small { color: var(--v2-muted); font-size: 7px; }
.personal-style-dialog { width: min(720px, calc(100vw - 48px)); height: auto; max-height: calc(100vh - 48px); }
.personal-style-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.personal-style-fields { display: grid; gap: 14px; padding: 18px; overflow: auto; }
.personal-style-fields label { display: grid; gap: 6px; }
.personal-style-fields label > span { font-size: 10px; font-weight: 650; }
.personal-style-fields input, .personal-style-fields textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--v2-line-strong); border-radius: 5px; background: var(--v2-panel-soft); color: var(--v2-text); font: inherit; font-size: 11px; line-height: 1.5; resize: vertical; }
.personal-style-fields input[type="file"] { padding: 7px; }
.personal-style-fields input[type="file"]::file-selector-button { min-height: 28px; margin-right: 9px; padding: 0 10px; border: 1px solid var(--v2-line-strong); border-radius: 4px; background: var(--v2-panel); color: var(--v2-text); font: inherit; cursor: pointer; }
.personal-style-fields small { color: var(--v2-faint); font-size: 8px; line-height: 1.45; }
.personal-style-shell > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 11px 18px; border-top: 1px solid var(--v2-line); }
@media (min-width: 1700px) { .style-library-v3-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1599px) {
  .style-library-v3-workspace { grid-template-columns: 220px minmax(0, 1fr); }
  .style-library-v3-workspace > .style-library-selection-panel { position: absolute; z-index: 12; top: 0; right: 0; bottom: 0; width: 300px; box-shadow: -16px 0 28px rgb(15 23 42 / 20%); }
  .style-library-v3-dialog.selection-collapsed .style-library-selection-panel { display: none; }
  .style-catalog-context > div em:nth-child(n+4) { display: none; }
}
@media (max-width: 1320px) {
  .style-library-v3-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .style-catalog-views button { min-width: 92px; }
  .style-route-grid { grid-template-columns: repeat(3, minmax(250px, 1fr)); overflow-x: auto; }
}

.style-library-detail-dialog {
  width: min(1240px, calc(100vw - 36px));
  height: min(900px, calc(100vh - 36px));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--v2-line-strong);
  border-radius: 8px;
  background: var(--v2-panel);
  color: var(--v2-text);
  box-shadow: 0 30px 90px rgb(15 23 42 / 34%);
}
.style-library-detail-dialog::backdrop { background: rgb(15 23 42 / 58%); backdrop-filter: blur(9px); }
.style-library-detail-shell { display: grid; height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; }
.style-library-detail-shell > header,
.style-library-detail-shell > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--v2-line); }
.style-library-detail-shell > footer { border-top: 1px solid var(--v2-line); border-bottom: 0; background: color-mix(in srgb, var(--v2-panel-soft) 70%, var(--v2-panel)); }
.style-library-detail-shell > header > div { display: grid; min-width: 0; gap: 3px; }
.style-library-detail-shell > header strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.style-library-detail-shell > header span { color: var(--v2-muted); font-size: 11px; }
.style-library-detail-content { display: grid; min-height: 0; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); align-content: start; gap: 0 24px; padding: 18px; overflow: auto; background: color-mix(in srgb, var(--v2-panel-soft) 48%, var(--v2-panel)); }
.style-detail-hero { position: relative; min-width: 0; align-self: start; overflow: hidden; border: 1px solid var(--v2-line-strong); border-radius: 6px; background: #111827; }
.style-detail-hero > button { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.style-detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.style-detail-hero-caption { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; gap: 16px; padding: 11px 16px; border-top: 1px solid rgb(255 255 255 / 14%); background: #111827; color: #fff; pointer-events: none; }
.style-detail-hero-caption span { display: grid; gap: 2px; }
.style-detail-hero-caption span:last-child { text-align: right; }
.style-detail-hero-caption small { font-size: 11px; font-weight: 700; }
.style-detail-hero-caption b { color: rgb(255 255 255 / 72%); font-size: 8px; font-weight: 600; }
.style-detail-hero-caption > i { width: 1px; height: 24px; background: rgb(255 255 255 / 28%); }
.style-detail-hero > .style-library-image-source { top: 10px; bottom: auto; }
.style-detail-overview { display: grid; min-width: 0; align-content: start; gap: 14px; padding: 4px 0; }
.style-detail-overview > div:first-child { display: grid; gap: 7px; }
.style-detail-kicker { color: var(--v2-blue); font-size: 9px; font-weight: 750; }
.style-detail-overview h2 { margin: 0; font-size: 24px; letter-spacing: 0; line-height: 1.18; }
.style-detail-overview p { margin: 0; color: var(--v2-muted); font-size: 11px; line-height: 1.65; }
.style-detail-overview dl { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--v2-line); }
.style-detail-overview dl > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--v2-line); font-size: 10px; line-height: 1.5; }
.style-detail-overview dt { color: var(--v2-faint); }
.style-detail-overview dd { margin: 0; color: var(--v2-text); }
.style-detail-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.style-detail-chips span { display: inline-flex; min-height: 24px; align-items: center; gap: 5px; padding: 0 7px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel); color: var(--v2-muted); font-size: 9px; }
.style-detail-chips b { color: var(--v2-text); font-size: 8px; }
.style-detail-section { grid-column: 1 / -1; display: grid; min-width: 0; gap: 12px; padding: 22px 0; border-top: 1px solid var(--v2-line); }
.style-detail-section:nth-of-type(3) { margin-top: 22px; }
.style-detail-section > header { display: flex; align-items: flex-start; gap: 10px; }
.style-detail-section > header > span { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, var(--v2-blue) 32%, var(--v2-line)); border-radius: 4px; color: var(--v2-blue); font-size: 9px; font-weight: 750; }
.style-detail-section > header > div { display: grid; gap: 3px; }
.style-detail-section > header strong { font-size: 13px; }
.style-detail-section > header small { color: var(--v2-muted); font-size: 9px; line-height: 1.45; }
.style-detail-use-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.style-detail-use { display: grid; min-width: 0; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; padding: 10px; border: 1px solid var(--v2-line); border-left: 3px solid #2563EB; border-radius: 5px; background: var(--v2-panel); }
.style-detail-use.life { border-left-color: #E87932; }
.style-detail-use > svg { width: 16px; height: 16px; color: #2563EB; }
.style-detail-use.life > svg { color: #E87932; }
.style-detail-use > span { display: grid; min-width: 0; gap: 3px; }
.style-detail-use small { color: var(--v2-faint); font-size: 8px; }
.style-detail-use strong { display: grid; gap: 1px; font-size: 10px; }
.style-detail-use strong b { color: var(--v2-muted); font-size: 8px; font-weight: 600; }
.style-detail-use em { color: var(--v2-muted); font-size: 8px; font-style: normal; line-height: 1.45; }
.style-detail-palette-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.style-detail-palette { display: grid; min-width: 0; gap: 9px; padding: 10px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel); }
.style-detail-palette header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.style-detail-palette header strong { font-size: 10px; }
.style-detail-palette header span { color: var(--v2-faint); font-size: 8px; }
.style-detail-palette > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.style-detail-palette > div > span { display: grid; min-width: 0; gap: 3px; }
.style-detail-palette i { height: 30px; border: 1px solid rgb(15 23 42 / 12%); border-radius: 3px; }
.style-detail-palette b { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.style-detail-palette em { overflow: hidden; color: var(--v2-faint); font-size: 7px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.style-detail-font-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.style-detail-font { display: grid; min-width: 0; gap: 6px; padding: 13px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel); }
.style-detail-font > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; font-size: 17px; font-weight: 750; }
.style-detail-font > span b { color: var(--v2-muted); font-size: 10px; }
.style-detail-font > strong { font-size: 10px; }
.style-detail-font small,
.style-detail-font em { color: var(--v2-muted); font-size: 8px; font-style: normal; line-height: 1.5; }
.style-detail-structure-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.style-detail-structure-group { display: grid; min-width: 0; align-content: start; gap: 8px; padding: 10px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel); }
.style-detail-structure-group > header { display: grid; gap: 3px; }
.style-detail-structure-group > header strong { font-size: 10px; }
.style-detail-structure-group > header span { color: var(--v2-faint); font-size: 8px; line-height: 1.4; }
.style-detail-structure-group > div { display: grid; gap: 0; }
.style-detail-structure-group > div > span { display: grid; gap: 2px; padding: 7px 0; border-top: 1px solid var(--v2-line); }
.style-detail-structure-group b { font-size: 9px; }
.style-detail-structure-group small { color: var(--v2-muted); font-size: 8px; line-height: 1.4; }
.style-detail-professional-system { grid-column: 1 / -1; display: grid; min-width: 0; gap: 12px; padding: 22px 0; border-top: 1px solid var(--v2-line); scroll-margin-top: 160px; }
.style-detail-professional-system > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.style-detail-professional-system > header > div { display: grid; min-width: 0; gap: 3px; }
.style-detail-professional-system > header strong { font-size: 14px; }
.style-detail-professional-system > header small { color: var(--v2-muted); font-size: 11px; line-height: 1.45; }
.style-detail-professional-system > header em { flex: 0 0 auto; padding: 3px 6px; border: 1px solid var(--v2-line); border-radius: 3px; color: #0F766E; font-size: 11px; font-style: normal; }
.style-detail-professional-system > p { margin: 0; padding: 10px 12px; border-left: 3px solid #0F766E; background: color-mix(in srgb, #0F766E 7%, var(--v2-panel)); color: var(--v2-muted); font-size: 11px; line-height: 1.55; }
.style-detail-professional-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 22px; }
.style-detail-professional-body > section { display: grid; min-width: 0; align-content: start; gap: 8px; }
.style-detail-professional-body > section > strong { font-size: 12px; }
.style-detail-professional-body ol,
.style-detail-professional-body ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.style-detail-professional-body ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; counter-reset: professional-section; }
.style-detail-professional-body li { min-width: 0; min-height: 34px; border-top: 1px solid var(--v2-line); color: var(--v2-muted); font-size: 11px; line-height: 1.45; }
.style-detail-professional-body ol li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; counter-increment: professional-section; }
.style-detail-professional-body ol li::before { color: #0F766E; font-variant-numeric: tabular-nums; content: counter(professional-section, decimal-leading-zero); }
.style-detail-professional-body ul li { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; }
.style-detail-professional-body ul svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; color: #15803D; }
.style-detail-professional-body li span { min-width: 0; overflow-wrap: anywhere; }

.style-detail-brand-system { grid-column: 1 / -1; display: grid; min-width: 0; gap: 12px; padding: 22px 0; border-top: 1px solid var(--v2-line); scroll-margin-top: 160px; }
.style-detail-brand-system > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.style-detail-brand-system > header > div { display: grid; min-width: 0; gap: 3px; }
.style-detail-brand-system > header strong { font-size: 14px; }
.style-detail-brand-system > header small { color: var(--v2-muted); font-size: 11px; line-height: 1.45; }
.style-detail-brand-system > header em { flex: 0 0 auto; padding: 3px 6px; border: 1px solid var(--v2-line); border-radius: 3px; color: var(--v2-blue); font-size: 11px; font-style: normal; }
.style-detail-brand-tabs { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.style-detail-brand-tabs button { display: grid; min-width: 132px; max-width: 240px; gap: 2px; padding: 7px 9px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel); color: var(--v2-text); text-align: left; cursor: pointer; }
.style-detail-brand-tabs button:hover { border-color: color-mix(in srgb, var(--v2-blue) 42%, var(--v2-line)); background: var(--v2-panel-soft); }
.style-detail-brand-tabs button.active { border-color: var(--v2-blue); box-shadow: inset 0 0 0 1px var(--v2-blue); }
.style-detail-brand-tabs strong { overflow: hidden; font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.style-detail-brand-tabs small { overflow: hidden; color: var(--v2-muted); font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.style-detail-brand-body { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(0, 2fr); gap: 22px; }
.style-detail-brand-body > section { display: grid; align-content: start; gap: 8px; }
.style-detail-brand-body > section > strong { font-size: 12px; }
.style-detail-brand-body ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: brand-principle; }
.style-detail-brand-body li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; min-height: 32px; border-top: 1px solid var(--v2-line); color: var(--v2-muted); font-size: 11px; counter-increment: brand-principle; }
.style-detail-brand-body li::before { color: var(--v2-blue); font-variant-numeric: tabular-nums; content: counter(brand-principle, decimal-leading-zero); }
.style-detail-brand-body dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin: 0; }
.style-detail-brand-body dl > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--v2-line); font-size: 11px; line-height: 1.5; }
.style-detail-brand-body dt { color: var(--v2-text); font-weight: 650; }
.style-detail-brand-body dd { min-width: 0; margin: 0; color: var(--v2-muted); overflow-wrap: anywhere; }
.style-detail-brand-system > p { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-left: 3px solid #D97706; background: color-mix(in srgb, #D97706 7%, var(--v2-panel)); color: var(--v2-muted); font-size: 11px; line-height: 1.55; }
.style-detail-brand-system > p svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; color: #D97706; }
.style-detail-city-tourism { grid-column: 1 / -1; display: grid; min-width: 0; gap: 12px; padding: 22px 0; border-top: 1px solid var(--v2-line); scroll-margin-top: 160px; }
.style-detail-city-tourism > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.style-detail-city-tourism > header > div { display: grid; min-width: 0; gap: 3px; }
.style-detail-city-tourism > header strong { font-size: 14px; }
.style-detail-city-tourism > header small { color: var(--v2-muted); font-size: 11px; line-height: 1.45; }
.style-detail-city-tourism > header em { flex: 0 0 auto; padding: 3px 6px; border: 1px solid var(--v2-line); border-radius: 3px; color: #0F766E; font-size: 11px; font-style: normal; }
.style-detail-city-tabs { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.style-detail-city-tabs button { display: grid; min-width: 112px; max-width: 200px; gap: 2px; padding: 7px 9px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel); color: var(--v2-text); text-align: left; cursor: pointer; }
.style-detail-city-tabs button:hover { border-color: color-mix(in srgb, #0F766E 42%, var(--v2-line)); background: var(--v2-panel-soft); }
.style-detail-city-tabs button.active { border-color: #0F766E; box-shadow: inset 0 0 0 1px #0F766E; }
.style-detail-city-tabs strong { overflow: hidden; font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.style-detail-city-tabs small { overflow: hidden; color: var(--v2-muted); font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.style-detail-city-body { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(0, 2fr); gap: 22px; }
.style-detail-city-body > section { display: grid; align-content: start; gap: 8px; }
.style-detail-city-body > section > strong { font-size: 12px; }
.style-detail-city-body ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: city-principle; }
.style-detail-city-body li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; min-height: 32px; border-top: 1px solid var(--v2-line); color: var(--v2-muted); font-size: 11px; counter-increment: city-principle; }
.style-detail-city-body li::before { color: #0F766E; font-variant-numeric: tabular-nums; content: counter(city-principle, decimal-leading-zero); }
.style-detail-city-body dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin: 0; }
.style-detail-city-body dl > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--v2-line); font-size: 11px; line-height: 1.5; }
.style-detail-city-body dt { color: var(--v2-text); font-weight: 650; }
.style-detail-city-body dd { min-width: 0; margin: 0; color: var(--v2-muted); overflow-wrap: anywhere; }
.style-detail-city-standards { display: grid; min-width: 0; gap: 8px; padding: 12px; border: 1px solid color-mix(in srgb, #0F766E 24%, var(--v2-line)); border-radius: 5px; background: color-mix(in srgb, #0F766E 4%, var(--v2-panel)); }
.style-detail-city-standards > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.style-detail-city-standards > header > div { display: grid; min-width: 0; gap: 3px; }
.style-detail-city-standards > header strong { font-size: 12px; }
.style-detail-city-standards > header small { color: var(--v2-muted); font-size: 10px; line-height: 1.45; }
.style-detail-city-standards > header em { flex: 0 0 auto; color: #0F766E; font-size: 10px; font-style: normal; }
.style-detail-city-standards > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 7px; }
.style-detail-city-standards a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; min-width: 0; padding: 8px 9px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel); color: var(--v2-text); text-decoration: none; }
.style-detail-city-standards a:hover { border-color: #0F766E; background: var(--v2-panel-soft); }
.style-detail-city-standards a strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.style-detail-city-standards a span { grid-column: 1 / -1; color: var(--v2-muted); font-size: 9px; line-height: 1.35; }
.style-detail-city-standards a svg { grid-column: 2; grid-row: 1; width: 12px; height: 12px; color: #0F766E; }
.style-detail-city-source { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--v2-muted); font-size: 10px; }
.style-detail-city-source svg { width: 14px; height: 14px; flex: 0 0 auto; color: #0F766E; }
.style-detail-city-source a { color: #0F766E; text-decoration: none; }
.style-detail-city-source a:hover { text-decoration: underline; }
.style-detail-city-tourism > p { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-left: 3px solid #D97706; background: color-mix(in srgb, #D97706 7%, var(--v2-panel)); color: var(--v2-muted); font-size: 11px; line-height: 1.55; }
.style-detail-city-tourism > p svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; color: #D97706; }
.style-detail-techniques { grid-column: 1 / -1; display: grid; min-width: 0; gap: 11px; padding: 22px 0; border-top: 1px solid var(--v2-line); }
.style-detail-techniques > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.style-detail-techniques > header > div { display: grid; gap: 3px; }
.style-detail-techniques > header strong { font-size: 13px; }
.style-detail-techniques > header small { color: var(--v2-muted); font-size: 9px; line-height: 1.45; }
.style-detail-techniques > header em { flex: 0 0 auto; padding: 3px 6px; border: 1px solid var(--v2-line); border-radius: 3px; color: var(--v2-blue); font-size: 9px; font-style: normal; }
.style-detail-technique-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.style-detail-technique-groups { min-width: 0; }
.style-detail-technique-group { min-width: 0; }
.style-detail-technique-group > div { min-width: 0; }
.style-detail-technique-card { display: grid; min-width: 0; gap: 6px; padding: 10px; overflow: hidden; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel); }
.style-detail-technique-preview { display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 2px; object-fit: cover; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel-soft); cursor: zoom-in; }
.style-detail-technique-card header { display: grid; min-width: 0; gap: 2px; }
.style-detail-technique-card header strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.style-detail-technique-card header small { min-width: 0; color: var(--v2-faint); font-size: 8px; overflow-wrap: anywhere; }
.style-detail-technique-card p { min-width: 0; margin: 0; color: var(--v2-muted); font-size: 8px; line-height: 1.45; overflow-wrap: anywhere; }
.style-detail-technique-card > span { min-width: 0; color: var(--v2-blue); font-size: 8px; line-height: 1.35; overflow-wrap: anywhere; }
.style-detail-technique-card > button { display: inline-flex; min-height: 28px; align-items: center; justify-content: center; gap: 5px; margin-top: 2px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel-soft); color: var(--v2-blue); font-size: 8px; }
.style-detail-technique-card > button:hover { border-color: color-mix(in srgb, var(--v2-blue) 44%, var(--v2-line)); }
.style-detail-technique-card > button svg { width: 11px; height: 11px; }
.style-detail-technique-empty { color: var(--v2-faint); font-size: 9px; }
.style-detail-technique-groups { display: grid; gap: 12px; }
.style-detail-technique-group { display: grid; min-width: 0; gap: 8px; }
.style-detail-technique-group > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.style-detail-technique-group > header strong { font-size: 11px; }
.style-detail-technique-group > header small { color: var(--v2-faint); font-size: 9px; }
.style-detail-technique-group > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.style-detail-capabilities { grid-column: 1 / -1; display: grid; min-width: 0; gap: 11px; padding: 22px 0; border-top: 1px solid var(--v2-line); }
.style-detail-capabilities > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.style-detail-capabilities > header > div { display: grid; gap: 3px; }
.style-detail-capabilities > header strong { font-size: 13px; }
.style-detail-capabilities > header small { color: var(--v2-muted); font-size: 9px; line-height: 1.45; }
.style-detail-capabilities > header em { flex: 0 0 auto; padding: 3px 6px; border: 1px solid var(--v2-line); border-radius: 3px; color: var(--v2-blue); font-size: 9px; font-style: normal; }
.style-detail-capabilities > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.style-detail-capability-card { display: grid; min-width: 0; gap: 8px; padding: 12px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel); }
.style-detail-capability-card > header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 10px; }
.style-detail-capability-card > header > span { display: grid; min-width: 0; gap: 2px; }
.style-detail-capability-card > header strong { font-size: 11px; }
.style-detail-capability-card > header small { color: var(--v2-faint); font-size: 8px; }
.style-detail-capability-card > header em { flex: 0 0 auto; padding: 2px 5px; border-radius: 3px; background: color-mix(in srgb, var(--v2-blue) 8%, var(--v2-panel-soft)); color: var(--v2-blue); font-size: 8px; font-style: normal; }
.style-detail-capability-card > p { margin: 0; color: var(--v2-muted); font-size: 9px; line-height: 1.55; }
.style-detail-capability-card dl { display: grid; gap: 0; margin: 0; }
.style-detail-capability-card dl > div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-top: 1px solid var(--v2-line); font-size: 8px; line-height: 1.45; }
.style-detail-capability-card dt { color: var(--v2-text); font-weight: 650; }
.style-detail-capability-card dd { display: flex; min-width: 0; flex-wrap: wrap; gap: 3px; margin: 0; color: var(--v2-muted); overflow-wrap: anywhere; }
.style-detail-capability-card dd span { padding: 1px 4px; border-radius: 3px; background: var(--v2-panel-soft); }
.style-detail-capability-card dd.sources a { color: var(--v2-blue); text-decoration: none; }
.style-detail-capability-card dd.sources a:hover { text-decoration: underline; }
.style-detail-research { grid-column: 1 / -1; display: grid; min-width: 0; gap: 11px; padding: 22px 0; border-top: 1px solid var(--v2-line); }
.style-detail-research > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.style-detail-research > header > div { display: grid; gap: 3px; }
.style-detail-research > header strong { font-size: 13px; }
.style-detail-research > header small { color: var(--v2-muted); font-size: 9px; line-height: 1.45; }
.style-detail-research > header em { flex: 0 0 auto; padding: 3px 6px; border: 1px solid var(--v2-line); border-radius: 3px; color: var(--v2-blue); font-size: 9px; font-style: normal; }
.style-detail-research > p { margin: 0; padding: 10px 12px; border-left: 3px solid #D97706; background: color-mix(in srgb, #D97706 7%, var(--v2-panel)); color: var(--v2-muted); font-size: 10px; line-height: 1.6; }
.style-detail-research > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.style-detail-source-card { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel); color: inherit; text-decoration: none; }
.style-detail-source-card:hover { border-color: var(--v2-blue); }
.style-detail-source-card > span { display: grid; min-width: 0; gap: 2px; }
.style-detail-source-card strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.style-detail-source-card small { color: var(--v2-muted); font-size: 8px; }
.style-detail-source-card svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--v2-blue); }
.style-detail-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 0; }
.style-detail-rules > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 9px; padding: 9px 0; border-top: 1px solid var(--v2-line); font-size: 9px; line-height: 1.5; }
.style-detail-rules dt { display: flex; align-items: center; gap: 6px; color: var(--v2-text); font-weight: 650; }
.style-detail-rules dt svg { width: 13px; height: 13px; color: var(--v2-blue); }
.style-detail-rules dd { margin: 0; color: var(--v2-muted); }
.style-library-detail-footnote { display: grid; gap: 2px; }
.style-library-detail-footnote strong { font-size: 11px; }
.style-library-detail-footnote span { color: var(--v2-muted); font-size: 9px; }
.style-library-detail-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.style-library-detail-actions button { display: inline-flex; align-items: center; gap: 6px; }
.style-library-detail-actions button.active { border-color: color-mix(in srgb, #16A34A 48%, var(--v2-line)); color: #15803D; }
.style-library-detail-actions svg { width: 14px; height: 14px; }

@media (min-width: 1100px) {
  .style-library-city-registry { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .style-dimension-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .style-dimension-densityLevels { grid-column: 2; grid-row: 2; }
  .style-content-structure-group { grid-column: 1 / -1; }
  .style-content-structure-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .style-content-structure-tabs button.has-children { min-width: 0; }
  .style-content-layout-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1100px) and (max-height: 820px) {
  .style-match-panel { max-height: 280px; }
}

@media (min-width: 1100px) and (max-width: 1320px) {
  .style-library-city-registry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .style-library-workspace { grid-template-columns: minmax(0, 1fr) 258px; }
  .style-library-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .style-library-toolbar { grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) auto; gap: 8px; }
  .style-library-filters button { padding: 0 8px; }
  .style-library-selection-detail { grid-template-columns: 20px 60px minmax(0, 1fr); gap: 6px; }
  .style-library-selection-detail img { width: 60px; height: 36px; }
  .style-library-coverage-taxonomy.regions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.layout-library-dialog { width: min(1420px, calc(100vw - 36px)); height: min(880px, calc(100vh - 36px)); padding: 0; overflow: hidden; border: 1px solid var(--v2-line-strong); border-radius: 8px; background: var(--v2-panel); color: var(--v2-text); box-shadow: 0 28px 80px rgb(15 23 42 / 28%); }
.layout-library-dialog::backdrop { background: rgb(15 23 42 / 46%); backdrop-filter: blur(4px); }
.layout-library-shell { display: grid; height: 100%; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.layout-library-shell > header,
.layout-library-shell > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--v2-line); }
.layout-library-shell > footer { border-top: 1px solid var(--v2-line); border-bottom: 0; }
.layout-library-shell > header > div { display: grid; gap: 3px; }
.layout-library-shell > header strong { font-size: 16px; }
.layout-library-shell > header span { color: var(--v2-muted); font-size: 11px; }
.layout-library-toolbar { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--v2-line); background: var(--v2-panel-soft); }
.layout-library-search { display: flex; min-width: 0; height: 36px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--v2-line-strong); border-radius: 6px; background: var(--v2-panel); }
.layout-library-search svg { width: 16px; height: 16px; color: var(--v2-faint); }
.layout-library-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--v2-text); }
.layout-library-filters { display: flex; min-width: 0; align-items: center; gap: 4px; overflow-x: auto; }
.layout-library-filters button { flex: 0 0 auto; min-height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--v2-muted); font-size: 11px; }
.layout-library-filters button:hover { background: var(--v2-panel); color: var(--v2-text); }
.layout-library-filters button.active { border-color: color-mix(in srgb, var(--v2-blue) 42%, var(--v2-line)); background: color-mix(in srgb, var(--v2-blue) 9%, var(--v2-panel)); color: var(--v2-blue); }
.layout-library-workspace { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) 420px; }
.layout-library-grid { display: grid; min-height: 0; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 12px; padding: 16px 18px 24px; overflow: auto; background: color-mix(in srgb, var(--v2-panel-soft) 70%, var(--v2-panel)); }
.layout-library-card { position: relative; display: grid; min-width: 0; overflow: hidden; border: 1px solid var(--v2-line); border-radius: 7px; background: var(--v2-panel); color: inherit; text-align: left; cursor: pointer; }
.layout-library-card:hover { border-color: var(--v2-line-strong); box-shadow: 0 8px 22px rgb(15 23 42 / 9%); }
.layout-library-card.selected { border-color: var(--v2-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--v2-blue) 18%, transparent); }
.layout-library-card-preview { position: relative; display: grid; height: 138px; place-items: center; overflow: hidden; border-bottom: 1px solid var(--v2-line); background: #E9EDF3; }
.layout-library-card-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.layout-library-card-score { position: absolute; top: 8px; right: 8px; padding: 3px 6px; border-radius: 4px; background: rgb(15 23 42 / 78%); color: #fff; font-size: 9px; }
.layout-library-card.recommended::before { position: absolute; z-index: 2; top: 8px; left: 8px; padding: 3px 6px; border-radius: 4px; background: var(--v2-blue); color: #fff; content: "AI 推荐"; font-size: 9px; }
.layout-library-card-copy { display: grid; gap: 7px; padding: 10px 11px 12px; }
.layout-library-card-copy > strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.layout-library-card-copy > span { color: var(--v2-muted); font-size: 9px; line-height: 1.45; }
.layout-library-card-tags { display: flex; min-width: 0; gap: 4px; overflow: hidden; }
.layout-library-card-tags i { flex: 0 0 auto; padding: 2px 5px; border: 1px solid var(--v2-line); border-radius: 3px; color: var(--v2-muted); font-size: 8px; font-style: normal; }
.layout-library-preview-panel { display: grid; min-height: 0; grid-template-rows: minmax(280px, 1fr) auto minmax(92px, auto); gap: 12px; padding: 16px 18px; overflow: auto; border-left: 1px solid var(--v2-line); background: var(--v2-panel); }
.layout-library-live-preview { display: grid; min-height: 280px; place-items: center; align-content: center; gap: 8px; padding: 16px; overflow: hidden; border: 1px solid var(--v2-line); border-radius: 6px; background: color-mix(in srgb, var(--v2-panel-soft) 78%, var(--v2-panel)); color: var(--v2-muted); text-align: center; }
.layout-library-live-preview > svg { width: 28px; height: 28px; }
.layout-library-live-preview > strong { color: var(--v2-text); font-size: 13px; }
.layout-library-live-preview > span { font-size: 10px; }
.layout-library-live-preview .mini-slide { width: 100%; max-height: 100%; border-radius: 4px; pointer-events: none; }
.layout-library-preview-meta { display: grid; gap: 5px; font-size: 10px; }
.layout-library-preview-meta strong { font-size: 13px; }
.layout-library-preview-meta span { color: var(--v2-muted); line-height: 1.5; }
.layout-library-diagnostics { display: grid; align-content: start; gap: 5px; }
.layout-library-diagnostic { padding: 6px 8px; border-left: 3px solid var(--v2-line-strong); background: var(--v2-panel-soft); color: var(--v2-muted); font-size: 9px; line-height: 1.45; }
.layout-library-diagnostic.error { border-left-color: #DC2626; color: #B91C1C; }
.layout-library-diagnostic.warning { border-left-color: #D97706; color: #B45309; }
.layout-library-foot-status { display: grid; min-width: 0; gap: 3px; }
.layout-library-foot-status strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.layout-library-foot-status span { color: var(--v2-muted); font-size: 10px; }
.layout-library-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.layout-library-actions button { display: inline-flex; align-items: center; gap: 6px; }
.layout-library-actions svg { width: 14px; height: 14px; }
.layout-library-empty { grid-column: 1 / -1; display: grid; min-height: 300px; place-items: center; align-content: center; gap: 7px; color: var(--v2-muted); }
.layout-library-empty svg { width: 24px; height: 24px; }

@media (max-width: 760px) {
  .style-library-dialog { width: calc(100vw - 16px); height: calc(100vh - 16px); }
  .style-library-detail-dialog { width: calc(100vw - 12px); height: calc(100vh - 12px); }
  .style-library-detail-content { grid-template-columns: 1fr; gap: 16px; padding: 12px; }
  .style-detail-overview { padding: 0; }
  .style-detail-section:nth-of-type(3) { margin-top: 4px; }
  .style-detail-use-grid,
  .style-detail-palette-grid,
  .style-detail-font-grid,
  .style-detail-structure-grid,
  .style-detail-rules { grid-template-columns: 1fr; }
  .style-library-detail-shell > footer { align-items: stretch; flex-direction: column; }
  .style-library-detail-actions { display: grid; width: 100%; grid-template-columns: 1fr 1fr; }
  .style-library-detail-actions .primary-btn { grid-column: 1 / -1; }
  .style-library-detail-actions button { justify-content: center; }
  .style-library-detail-footnote { display: none; }
  .style-library-toolbar { grid-template-columns: 1fr; }
  .style-library-filters { max-height: 140px; align-content: flex-start; }
  .style-library-grid { grid-template-columns: 1fr; padding: 12px; }
  .style-library-shell > footer { align-items: stretch; flex-direction: column; }
  .style-library-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .style-match-panel { max-height: 260px; }
  .style-match-controls { grid-template-columns: 1fr; }
  .style-match-controls button { width: 100%; }
  .style-brief-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .style-dimension-group { grid-template-columns: 1fr; gap: 4px; }
  .style-content-layout-options { grid-template-columns: 1fr; }
  .style-match-result-head { align-items: flex-start; flex-direction: column; }
  .style-match-result-options { grid-template-columns: 1fr; }
  .style-match-result-option { grid-template-columns: 116px minmax(0, 1fr); }
  .style-match-result-preview { min-height: 148px; }
}

/* Desktop style grammar workspace */
@media (min-width: 1000px) {
  #personalStyleCreateBtn[hidden] { display: none !important; }
  .style-library-dialog { width: min(1880px, calc(100vw - 28px)); height: min(1040px, calc(100vh - 28px)); }
  .style-library-workspace { grid-template-columns: minmax(0, 1fr) 320px; }
  .style-library-grid { grid-template-columns: repeat(3, minmax(280px, 1fr)); gap: 14px; }
  .style-library-preview { aspect-ratio: 16 / 9; background: #E9EDF3; }
  .style-library-preview img { width: 100%; height: 100%; object-fit: contain; }
  .style-library-card-copy { min-height: 148px; align-content: start; gap: 9px; padding: 12px; }
  .style-library-card-title strong { font-size: 13px; }
  .style-library-card-title strong small { display: block; margin-top: 2px; color: var(--v2-muted); font-size: 11px; font-weight: 500; line-height: 1.2; }
  .style-library-card-title span,
  .style-library-card-uses,
  .style-library-card-dimensions em,
  .style-library-card-match small,
  .style-library-selection-detail small,
  .style-library-selection-empty span,
  .style-library-count-setting small { font-size: 11px; }
  .style-library-card-uses svg,
  .style-library-image-source svg,
  .style-library-card-match svg { width: 14px; height: 14px; }
  .style-library-card-match { display: grid; min-width: 0; grid-template-columns: 16px auto minmax(0, 1fr); align-items: center; gap: 5px; color: var(--v2-blue); }
  .style-library-card-match b { font-size: 12px; }
  .style-library-card-match small { overflow: hidden; color: var(--v2-muted); text-overflow: ellipsis; white-space: nowrap; }
  .style-library-compare { position: absolute; z-index: 3; right: 42px; bottom: 10px; display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 1px solid var(--v2-line); border-radius: 5px; background: color-mix(in srgb, var(--v2-panel) 94%, transparent); color: var(--v2-muted); }
  .style-library-compare svg { width: 16px; height: 16px; }
  .style-library-card.comparing { border-color: color-mix(in srgb, var(--v2-blue) 62%, var(--v2-line)); }
  .style-library-card.comparing .style-library-compare { background: var(--v2-blue); color: #fff; }
  .style-library-zoom { width: 32px; height: 32px; }
  .style-library-zoom svg { width: 16px; height: 16px; }

  .style-library-detail-dialog {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    width: 1540px;
    min-width: 0;
    max-width: calc(100% - 28px);
    max-inline-size: calc(100% - 28px);
    height: 980px;
    min-height: 0;
    max-height: calc(100% - 28px);
    max-block-size: calc(100% - 28px);
    margin: auto;
  }
  .style-library-detail-shell { min-width: 0; min-height: 0; overflow: hidden; }
  .style-library-detail-content { display: block; min-width: 0; max-width: 100%; padding: 0; overflow: auto; background: color-mix(in srgb, var(--v2-panel-soft) 55%, var(--v2-panel)); }
  .style-detail-v3-head { position: sticky; z-index: 6; top: 0; display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; align-items: center; gap: 12px; min-height: 58px; padding: 10px 16px; border-bottom: 1px solid var(--v2-line); background: color-mix(in srgb, var(--v2-panel) 94%, transparent); backdrop-filter: blur(18px); }
  .style-detail-mode-switch { display: inline-flex; padding: 3px; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-panel-soft); }
  .style-detail-mode-switch button { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; color: var(--v2-muted); font-size: 12px; }
  .style-detail-mode-switch button.active { background: var(--v2-panel); color: var(--v2-text); box-shadow: 0 1px 4px rgb(15 23 42 / 10%); }
  .style-detail-mode-switch svg { width: 16px; height: 16px; }
  .style-detail-status { display: flex; min-width: 0; align-items: center; justify-self: center; gap: 8px; color: #B45309; }
  .style-detail-status.ready { color: #15803D; }
  .style-detail-status.stale { color: #B45309; }
  .style-detail-status > svg { width: 18px; height: 18px; }
  .style-detail-status > span { display: grid; min-width: 0; gap: 1px; }
  .style-detail-status strong { font-size: 12px; }
  .style-detail-status small { color: var(--v2-muted); font-size: 11px; }
  .style-detail-v3-head > .ghost-btn.active { border-color: var(--v2-blue); color: var(--v2-blue); }

  .style-detail-summary-strip { display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(220px, auto) auto; align-items: center; gap: 18px; min-height: 76px; padding: 12px 18px; border-bottom: 1px solid var(--v2-line); background: var(--v2-panel); }
  .style-detail-summary-strip > div { display: grid; min-width: 0; gap: 3px; }
  .style-detail-summary-strip > div strong { font-size: 16px; }
  .style-detail-summary-strip > div small { color: var(--v2-muted); font-size: 11px; }
  .style-detail-family { color: var(--v2-blue); font-size: 11px; font-weight: 700; }
  .style-detail-summary-palette { display: flex; gap: 4px; }
  .style-detail-summary-palette i { width: 28px; height: 28px; border: 1px solid rgb(15 23 42 / 12%); border-radius: 4px; }
  .style-detail-summary-keywords { display: flex; flex-wrap: wrap; gap: 5px; }
  .style-detail-summary-keywords em { padding: 4px 7px; border: 1px solid var(--v2-line); border-radius: 4px; color: var(--v2-muted); font-size: 11px; font-style: normal; }
  .style-detail-summary-image { display: grid; min-width: 120px; max-width: 240px; gap: 2px; }
  .style-detail-summary-image b { color: var(--v2-blue); font-size: 9px; font-weight: 700; }
  .style-detail-summary-image small { overflow: hidden; color: var(--v2-muted); font-size: 8px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
  .style-detail-match-score { display: grid; min-width: 68px; justify-items: end; }
  .style-detail-match-score b { color: var(--v2-blue); font-size: 18px; }
  .style-detail-match-score small { color: var(--v2-muted); font-size: 11px; }

  .style-detail-project-empty { display: grid; min-height: 440px; grid-template-columns: auto minmax(0, 480px) auto; place-content: center; align-items: center; gap: 16px; padding: 40px; text-align: left; }
  .style-detail-project-empty > svg { width: 32px; height: 32px; color: var(--v2-blue); }
  .style-detail-project-empty > div { display: grid; gap: 5px; }
  .style-detail-project-empty strong { font-size: 14px; }
  .style-detail-project-empty span { color: var(--v2-muted); font-size: 12px; line-height: 1.6; }

  .style-detail-project-workspace { display: grid; min-height: 560px; grid-template-columns: 230px minmax(520px, 1fr) 330px; }
  .style-detail-page-rail { display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr); border-right: 1px solid var(--v2-line); background: var(--v2-panel); }
  .style-detail-page-rail > header { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 12px; border-bottom: 1px solid var(--v2-line); }
  .style-detail-page-rail > header strong { font-size: 13px; }
  .style-detail-page-rail > header span { color: var(--v2-muted); font-size: 11px; }
  .style-detail-page-rail > div { display: grid; align-content: start; gap: 6px; padding: 10px; overflow: auto; }
  .style-detail-page-item { display: grid; min-width: 0; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: inherit; text-align: left; }
  .style-detail-page-item:hover { background: var(--v2-panel-soft); }
  .style-detail-page-item.active { border-color: var(--v2-blue); background: color-mix(in srgb, var(--v2-blue) 7%, var(--v2-panel)); }
  .style-detail-page-item img { display: block; width: 78px; aspect-ratio: 16 / 9; object-fit: contain; border: 1px solid var(--v2-line); border-radius: 3px; background: #E9EDF3; }
  .style-detail-page-item > span { display: grid; min-width: 0; gap: 3px; }
  .style-detail-page-item strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .style-detail-page-item small { overflow: hidden; color: var(--v2-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .style-detail-page-preview,
  .style-detail-library-preview { display: grid; min-width: 0; align-content: center; justify-items: center; gap: 9px; padding: 20px; background: color-mix(in srgb, var(--v2-panel-soft) 76%, var(--v2-panel)); }
  .style-detail-preview-frame { width: 100%; overflow: hidden; border: 1px solid var(--v2-line-strong); border-radius: 6px; background: #E9EDF3; box-shadow: 0 14px 34px rgb(15 23 42 / 12%); }
  .style-detail-preview-frame img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
  .style-detail-page-preview .style-detail-preview-frame { width: min(100%, calc((100vh - 320px) * 1.7778)); }
  .style-detail-library-preview .style-detail-preview-frame { width: min(100%, calc((100vh - 500px) * 1.7778)); }
  .style-detail-page-preview > span,
  .style-detail-library-preview > span { display: inline-flex; align-items: center; gap: 6px; color: var(--v2-muted); font-size: 11px; }
  .style-detail-page-preview > span svg,
  .style-detail-library-preview > span svg { width: 14px; height: 14px; }
  .style-detail-assignment-panel,
  .style-detail-grammar-panel { display: grid; align-content: start; gap: 14px; padding: 16px; overflow: auto; border-left: 1px solid var(--v2-line); background: var(--v2-panel); }
  .style-detail-assignment-panel > header,
  .style-detail-grammar-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .style-detail-assignment-panel > header > span,
  .style-detail-grammar-panel > header > span { display: grid; gap: 3px; }
  .style-detail-assignment-panel > header strong,
  .style-detail-grammar-panel > header strong { font-size: 14px; }
  .style-detail-assignment-panel > header small,
  .style-detail-grammar-panel > header small { color: var(--v2-muted); font-size: 11px; line-height: 1.45; }
  .style-detail-assignment-panel > header em { color: var(--v2-blue); font-size: 18px; font-style: normal; font-weight: 700; }
  .style-detail-grammar-panel > header em { color: var(--v2-blue); font-size: 11px; font-style: normal; }
  .style-detail-assignment-panel label { display: grid; gap: 6px; }
  .style-detail-assignment-panel label > span { font-size: 12px; font-weight: 650; }
  .style-detail-assignment-panel select { width: 100%; min-height: 36px; font-size: 12px; }
  .style-detail-assignment-panel dl,
  .style-detail-grammar-panel dl { display: grid; gap: 0; margin: 0; }
  .style-detail-assignment-panel dl > div,
  .style-detail-grammar-panel dl > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 9px; padding: 10px 0; border-top: 1px solid var(--v2-line); }
  .style-detail-assignment-panel dt,
  .style-detail-grammar-panel dt { color: var(--v2-muted); font-size: 11px; }
  .style-detail-assignment-panel dd,
  .style-detail-grammar-panel dd { margin: 0; font-size: 12px; line-height: 1.55; }
  .style-detail-grammar-panel dl > div.avoid dd { color: #B91C1C; }

  .style-detail-library-workspace { display: grid; min-width: 0; min-height: clamp(420px, calc(100vh - 260px), 600px); grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); grid-template-rows: auto minmax(0, 1fr); }
  .style-detail-series-tabs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--v2-line); background: var(--v2-panel); }
  .style-detail-series-tabs button { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 7px; border: 0; border-right: 1px solid var(--v2-line); border-bottom: 3px solid transparent; background: transparent; color: var(--v2-muted); }
  .style-detail-series-tabs button.active { border-bottom-color: var(--v2-blue); color: var(--v2-blue); }
  .style-detail-series-tabs strong { font-size: 12px; }
  .style-detail-series-tabs small { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 4px; background: var(--v2-panel-soft); font-size: 11px; }
  .style-detail-layout-browser { display: grid; min-width: 0; grid-template-rows: 164px minmax(0, 1fr); }
  .style-detail-layout-thumbs { display: flex; min-width: 0; gap: 9px; padding: 12px; overflow-x: auto; border-bottom: 1px solid var(--v2-line); background: var(--v2-panel); }
  .style-detail-layout-thumb { display: grid; width: 190px; min-width: 190px; grid-template-rows: 104px auto; padding: 0; overflow: hidden; border: 1px solid var(--v2-line); border-radius: 5px; background: var(--v2-panel); color: inherit; text-align: left; }
  .style-detail-layout-thumb.active { border-color: var(--v2-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--v2-blue) 14%, transparent); }
  .style-detail-layout-thumb img { display: block; width: 100%; height: 104px; object-fit: contain; background: #E9EDF3; }
  .style-detail-layout-thumb > span { display: grid; gap: 2px; padding: 7px 8px; }
  .style-detail-layout-thumb strong { font-size: 12px; }
  .style-detail-layout-thumb small { overflow: hidden; color: var(--v2-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

  .style-detail-comparison { padding: 14px 18px 18px; border-bottom: 1px solid var(--v2-line); background: var(--v2-panel); }
  .style-detail-comparison > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .style-detail-comparison > header > div { display: grid; gap: 2px; }
  .style-detail-comparison > header strong { font-size: 13px; }
  .style-detail-comparison > header span,
  .style-detail-comparison > header em { color: var(--v2-muted); font-size: 11px; font-style: normal; }
  .style-detail-comparison > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .style-detail-comparison article { display: grid; min-width: 0; gap: 7px; padding: 8px; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-panel-soft); }
  .style-detail-comparison article > button { padding: 0; overflow: hidden; border: 0; border-radius: 4px; background: #E9EDF3; }
  .style-detail-comparison article img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
  .style-detail-comparison article > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 6px; }
  .style-detail-comparison article > span strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .style-detail-comparison article > span small { grid-column: 1; color: var(--v2-muted); font-size: 11px; }
  .style-detail-comparison article > span button { grid-column: 2; grid-row: 1 / 3; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--v2-muted); }
  .style-detail-comparison article > span button svg { width: 14px; height: 14px; }
  .style-detail-comparison article p { min-height: 34px; margin: 0; color: var(--v2-muted); font-size: 11px; line-height: 1.5; }
  .style-match-strict-error { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid color-mix(in srgb, #DC2626 36%, var(--v2-line)); border-radius: 6px; background: color-mix(in srgb, #DC2626 5%, var(--v2-panel)); }
  .style-match-strict-error > svg { width: 20px; height: 20px; color: #DC2626; }
  .style-match-strict-error > span { display: grid; gap: 3px; }
  .style-match-strict-error strong { font-size: 12px; }
  .style-match-strict-error small { color: var(--v2-muted); font-size: 11px; }
}

@media (min-width: 1700px) {
  .style-library-grid { grid-template-columns: repeat(5, minmax(280px, 1fr)); }
}

:root[data-theme="dark"] .style-library-detail-dialog,
:root[data-theme="dark"] .style-library-detail-shell,
:root[data-theme="dark"] .style-library-detail-shell > header,
:root[data-theme="dark"] .style-library-detail-shell > footer {
  background: #191e1d !important;
  color: #eef4f2 !important;
}

:root[data-theme="dark"] .style-library-detail-shell > header,
:root[data-theme="dark"] .style-library-detail-shell > footer,
:root[data-theme="dark"] .style-detail-v3-head,
:root[data-theme="dark"] .style-detail-summary-strip,
:root[data-theme="dark"] .style-detail-page-rail,
:root[data-theme="dark"] .style-detail-assignment-panel,
:root[data-theme="dark"] .style-detail-grammar-panel,
:root[data-theme="dark"] .style-detail-series-tabs,
:root[data-theme="dark"] .style-detail-layout-thumbs,
:root[data-theme="dark"] .style-detail-comparison {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: #191e1d !important;
  color: #eef4f2 !important;
}

:root[data-theme="dark"] .style-detail-assignment-panel dd,
:root[data-theme="dark"] .style-detail-grammar-panel dd,
:root[data-theme="dark"] .style-detail-comparison strong,
:root[data-theme="dark"] .style-detail-layout-thumb strong,
:root[data-theme="dark"] .style-detail-page-item strong {
  color: #eef4f2 !important;
}

:root[data-theme="dark"] .style-detail-assignment-panel dt,
:root[data-theme="dark"] .style-detail-grammar-panel dt,
:root[data-theme="dark"] .style-detail-assignment-panel small,
:root[data-theme="dark"] .style-detail-grammar-panel small,
:root[data-theme="dark"] .style-detail-layout-thumb small,
:root[data-theme="dark"] .style-detail-page-item small,
:root[data-theme="dark"] .style-detail-comparison p,
:root[data-theme="dark"] .style-detail-comparison small {
  color: #a8b3b0 !important;
}

:root[data-theme="dark"] .style-detail-grammar-panel dl > div.avoid dd { color: #ff8b86 !important; }

html[data-theme="dark"] dialog#styleLibraryDetailDialog[open] > .style-library-detail-shell > header,
html[data-theme="dark"] dialog#styleLibraryDetailDialog[open] > .style-library-detail-shell > footer {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background-color: #191e1d !important;
  background-image: none !important;
  color: #eef4f2 !important;
}
.style-source-page { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; min-height: 58px; border-bottom: 1px solid var(--v2-line); }
.style-source-page > span { display: grid; min-width: 0; gap: 3px; }
.style-source-page strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.style-source-page small { color: var(--v2-muted); font-size: 10px; }

@media (max-width: 1279px) {
  .style-source-pages-list { grid-template-columns: 1fr; }
  .style-type-scale { grid-template-columns: 1fr; }
}

.editable-page-copy strong,
.editable-page-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editable-page-copy strong {
  font-size: 13px;
  font-weight: 620;
}

.editable-page-copy small {
  color: var(--v2-muted);
  font-size: 11px;
}

.editable-page-state {
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.editable-page-state.valid { color: var(--ms-green); }
.editable-page-state.stale,
.editable-page-state.unverified { color: var(--ms-orange); }
.editable-page-state.failed { color: #c42b1c; }

@media (max-width: 1100px) {
  .editable-workflow-status-band {
    grid-template-columns: 1fr;
  }

  .editable-workflow-actions {
    justify-content: flex-start;
  }
}

/* Photoshop-style desktop start screen and document sizing. */
#step-create.project-start-screen {
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.project-home-shell {
  display: grid;
  min-height: calc(100vh - var(--v2-topbar-height, 60px));
  grid-template-columns: 220px minmax(0, 1fr);
  background:
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--v2-blue) 12%, transparent), transparent 34%),
    color-mix(in srgb, var(--v2-bg) 94%, #eef5ff 6%);
}

.project-home-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 26px 18px 20px;
  border-right: 1px solid color-mix(in srgb, var(--v2-line) 72%, transparent);
  background: color-mix(in srgb, var(--v2-panel) 64%, transparent);
  backdrop-filter: blur(26px) saturate(145%);
}

.project-home-brand { display: flex; gap: 11px; align-items: center; margin: 0 8px 24px; }
.project-home-brand img { width: 34px; height: 34px; }
.project-home-brand div { display: grid; gap: 1px; }
.project-home-brand strong { font-size: 14px; }
.project-home-brand span,
.project-home-nav > p { color: var(--v2-muted); font-size: 11px; }
.project-home-nav-spacer { flex: 1; }
.project-home-nav > p { margin: 0 8px; line-height: 1.6; }

.project-home-primary,
.project-home-nav-item {
  display: flex;
  min-height: 38px;
  gap: 10px;
  align-items: center;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--v2-text);
  font: inherit;
  text-align: left;
}
.project-home-primary { margin-bottom: 12px; background: var(--v2-blue); color: #fff; font-weight: 650; }
.project-home-nav-item:hover,
.project-home-nav-item.active { background: color-mix(in srgb, var(--v2-blue) 10%, transparent); color: var(--v2-blue); }
.project-home-primary svg,
.project-home-nav-item svg { width: 17px; height: 17px; }

.project-home-content { min-width: 0; padding: 42px clamp(34px, 5vw, 76px) 60px; overflow: auto; }
.project-home-heading span { color: var(--v2-blue); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.project-home-heading h2 { margin: 6px 0 8px; font-size: clamp(28px, 3vw, 40px); font-weight: 650; letter-spacing: -.035em; }
.project-home-heading p { margin: 0; color: var(--v2-muted); }

.project-quick-starts {
  display: grid;
  grid-template-columns: repeat(5, minmax(124px, 1fr));
  gap: 14px;
  margin-top: 30px;
}
.project-quick-starts button {
  display: grid;
  min-height: 118px;
  align-content: center;
  gap: 12px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--v2-line) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--v2-panel) 66%, transparent);
  color: var(--v2-text);
  text-align: left;
  backdrop-filter: blur(18px) saturate(130%);
}
.project-quick-starts button:hover { border-color: color-mix(in srgb, var(--v2-blue) 52%, transparent); transform: translateY(-2px); box-shadow: 0 14px 34px rgb(15 23 42 / 10%); }
.project-quick-starts svg { width: 26px; height: 26px; color: var(--v2-blue); }
.project-quick-starts button:nth-child(2) svg { color: #b146c2; }
.project-quick-starts button:nth-child(3) svg { color: #e14b65; }
.project-quick-starts button:nth-child(4) svg { color: #d18b00; }
.project-quick-starts button:nth-child(5) svg { color: #168c72; }
.project-quick-starts span { display: grid; gap: 3px; }
.project-quick-starts strong { font-size: 13px; }
.project-quick-starts small { color: var(--v2-muted); font-size: 11px; }

.home-style-library {
  display: grid;
  gap: 12px;
  margin-top: 22px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--v2-line) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--v2-panel) 70%, transparent);
  box-shadow: 0 12px 30px rgb(15 23 42 / 7%);
  backdrop-filter: blur(20px) saturate(135%);
}

.home-style-library-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.home-style-library-head > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.home-style-library-head span {
  color: var(--v2-blue);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
}

.home-style-library-head h3,
.home-style-library-head p {
  margin: 0;
}

.home-style-library-head h3 {
  font-size: 18px;
  letter-spacing: 0;
}

.home-style-library-head p,
.home-style-library-status {
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.5;
}

.home-style-library-open {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--v2-blue) 30%, var(--v2-line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--v2-blue) 9%, transparent);
  color: var(--v2-blue);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.home-style-library-open:disabled {
  opacity: .48;
  cursor: not-allowed;
}

.home-style-library-open svg {
  width: 15px;
  height: 15px;
}

.home-style-library-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.home-style-card,
.home-style-card button,
.home-style-card-preview,
.home-style-card-copy,
.home-style-card-tags,
.home-style-card-foot {
  min-width: 0;
}

.home-style-card button {
  display: grid;
  width: 100%;
  gap: 9px;
  padding: 0 0 11px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--v2-line) 80%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--v2-panel) 84%, transparent);
  color: var(--v2-text);
  text-align: left;
  transition: border-color 160ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.home-style-card button:hover {
  border-color: color-mix(in srgb, var(--v2-blue) 42%, var(--v2-line));
  box-shadow: 0 12px 28px rgb(15 23 42 / 10%);
  transform: translateY(-2px);
}

.home-style-card-preview {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: color-mix(in srgb, var(--v2-blue) 8%, var(--v2-panel));
}

.home-style-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-style-card-copy,
.home-style-card-tags,
.home-style-card-foot {
  padding: 0 10px;
}

.home-style-card-copy {
  display: grid;
  gap: 2px;
}

.home-style-card-copy strong,
.home-style-card-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-style-card-copy strong {
  font-size: 12px;
}

.home-style-card-copy small {
  color: var(--v2-muted);
  font-size: 9px;
}

.home-style-card-tags {
  display: flex;
  min-height: 20px;
  gap: 5px;
  overflow: hidden;
}

.home-style-card-tags em {
  max-width: 100%;
  overflow: hidden;
  padding: 3px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--v2-blue) 8%, transparent);
  color: var(--v2-muted);
  font-size: 8px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-style-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.home-style-card-foot span {
  display: flex;
  gap: 3px;
}

.home-style-card-foot i {
  width: 14px;
  height: 14px;
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgb(15 23 42 / 14%);
}

.home-style-card-foot b {
  color: var(--v2-blue);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.home-style-library-empty {
  display: grid;
  min-height: 150px;
  place-items: center;
  gap: 6px;
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px dashed var(--v2-line);
  border-radius: 7px;
  color: var(--v2-muted);
  text-align: center;
}

.home-style-library-empty svg {
  width: 22px;
  height: 22px;
  color: var(--v2-blue);
}

.home-style-library-empty strong {
  color: var(--v2-text);
  font-size: 13px;
}

.home-style-library-empty span {
  max-width: 360px;
  font-size: 11px;
  line-height: 1.55;
}

.project-recent-heading { display: flex; justify-content: space-between; align-items: end; margin: 42px 0 16px; }
.project-recent-heading h3 { margin: 0 0 4px; font-size: 18px; }
.project-recent-heading span { color: var(--v2-muted); font-size: 11px; }
.project-recent-all { border: 0; background: transparent; color: var(--v2-blue); }
.project-home-content .project-hub-view { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.project-home-content .project-card { min-width: 0; border-radius: 8px !important; background: color-mix(in srgb, var(--v2-panel) 72%, transparent) !important; backdrop-filter: blur(18px); }

#newProjectPanel {
  position: fixed;
  z-index: 12000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0;
  background: var(--v2-panel) !important;
  box-shadow: none;
  transform: translateY(18px);
  opacity: 0;
  transition: transform 180ms ease, opacity 150ms ease;
}
#newProjectPanel:not([open]) { visibility: hidden; pointer-events: none; }
#newProjectPanel[open] { transform: translateY(0); opacity: 1; }
#newProjectPanel > summary { display: none !important; }
.new-document-panel { position: absolute; inset: 0; display: grid; min-height: 0; overflow: hidden; grid-template-rows: auto minmax(0, 1fr); }
.new-document-head { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(480px, 1.4fr) auto; gap: 20px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--v2-line); }
.new-document-head > div { display: grid; gap: 2px; }
.new-document-head span { color: var(--v2-blue); font-size: 11px; font-weight: 700; }
.new-document-head h2 { margin: 0; font-size: 20px; }
.new-document-head p { margin: 2px 0 0; color: var(--v2-muted); font-size: 11px; }
.preproject-workflow-path { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 7px; overflow: hidden; white-space: nowrap; }
.preproject-workflow-path span { color: var(--v2-faint); font-size: 9px; font-weight: 650; }
.preproject-workflow-path span.active { padding: 5px 8px; border-radius: 999px; background: var(--v2-blue-soft); color: var(--v2-blue); }
.preproject-workflow-path i { color: var(--v2-line-strong); font-size: 10px; font-style: normal; }
.preproject-workspace-grid { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.preproject-project-panel { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; background: color-mix(in srgb, var(--v2-panel) 88%, transparent); }
.preproject-project-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 20px; border-bottom: 1px solid var(--v2-line); }
.preproject-project-head > div { display: grid; min-width: 0; gap: 2px; }
.preproject-project-head span { color: var(--v2-blue); font-size: 9px; font-weight: 700; }
.preproject-project-head strong { color: var(--v2-text); font-size: 13px; }
.preproject-project-head small { color: var(--v2-faint); font-size: 9px; }
.preproject-project-actions { display: flex; align-items: center; gap: 8px; }
.preproject-target-control { display: inline-flex; min-height: 30px; align-items: center; gap: 5px; padding: 0 7px; border: 1px solid var(--v2-line); border-radius: 6px; color: var(--v2-muted); }
.preproject-target-control > span { color: var(--v2-blue); font-size: 9px; font-weight: 700; }
.preproject-target-control select { height: 28px; border: 0; background: transparent; color: var(--v2-text); font: inherit; font-size: 9px; }
.preproject-project-panel > .new-document-form { padding: 16px 20px 24px; }
.preproject-project-panel > .new-project-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 10px 20px; border-top: 1px solid var(--v2-line); background: color-mix(in srgb, var(--v2-panel) 88%, transparent); }
.preproject-project-panel > .new-project-actions > span { display: inline-flex; align-items: center; gap: 6px; color: var(--v2-faint); font-size: 9px; }
.preproject-project-panel > .new-project-actions > span svg { width: 13px; height: 13px; color: var(--v2-green); }
.preproject-project-panel > .new-project-actions > button { min-height: 38px; white-space: nowrap; }
.new-document-panel > .creation-mode-grid { margin: 15px 24px 0; }
.creation-mode-segmented { grid-template-columns: 1fr 1fr; gap: 0 !important; padding: 3px; border-radius: 7px; background: color-mix(in srgb, var(--v2-line) 55%, transparent); }
.creation-mode-segmented .mode-card { min-height: 54px !important; padding: 8px 10px !important; border: 0 !important; border-radius: 5px !important; background: transparent !important; box-shadow: none !important; }
.creation-mode-segmented .mode-card.selected { background: var(--v2-panel) !important; box-shadow: 0 3px 12px rgb(15 23 42 / 9%) !important; }
.creation-mode-segmented .mode-card-symbol { display: none; }
.creation-mode-segmented .mode-card > span { padding: 0 !important; }
.creation-mode-segmented strong { font-size: 11px !important; }
.creation-mode-segmented em { font-size: 9px !important; }

.new-document-form { display: grid; min-height: 0; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 16px 24px 26px; overflow: auto; align-content: start; }
.new-document-form > label,
.canvas-size-dialog-body > label,
.document-size-grid label { display: grid; gap: 6px; min-width: 0; }
.new-document-form label > span:first-child,
.canvas-size-dialog-body label > span:first-child,
.document-size-grid label > span:first-child,
.document-orientation-row > span { color: var(--v2-muted); font-size: 10px; font-weight: 650; }
.new-document-form input,
.new-document-form select,
.canvas-size-dialog-body input,
.canvas-size-dialog-body select { height: 34px; min-width: 0; border: 1px solid var(--v2-line); border-radius: 5px; background: color-mix(in srgb, var(--v2-panel) 70%, transparent); color: var(--v2-text); }
.new-document-form .wide,
.canvas-size-dialog-body .wide { grid-column: 1 / -1; }
.document-size-grid { display: grid; grid-template-columns: 1fr 1fr 92px; gap: 10px; }
.document-orientation-row { display: flex; min-height: 40px; gap: 8px; align-items: center; }
.document-orientation-row > span { margin-right: auto; }
.document-orientation-row label { display: inline-flex; gap: 5px; align-items: center; color: var(--v2-muted); cursor: pointer; }
.document-orientation-row input { width: 15px; height: 15px; }
.document-orientation-row svg { width: 17px; height: 17px; color: var(--v2-blue); }
.document-orientation-row em { font-size: 10px; font-style: normal; }
.document-artboard-toggle { margin-left: 6px; }
.field-with-suffix { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.field-with-suffix input { grid-area: 1 / 1 / 2 / 3; padding-right: 40px; }
.field-with-suffix em { z-index: 1; grid-area: 1 / 2; padding-right: 9px; color: var(--v2-muted); font-size: 9px; font-style: normal; }
.new-project-actions { display: flex; justify-content: flex-end; margin: 0; padding: 14px 24px 18px; border-top: 1px solid var(--v2-line); }
.new-project-actions .primary-btn { width: auto; }
body.new-document-open { overflow: hidden !important; }
body.new-document-open::before { display: none !important; content: none; }
body.new-document-open #assistantFloatLauncher { display: none !important; }

@media (max-width: 980px) {
  #newProjectPanel { width: 100vw; height: 100dvh; border-radius: 0; }
  .new-document-head { grid-template-columns: minmax(0, 1fr) auto; }
  .preproject-workflow-path { display: none; }
  .preproject-workspace-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; }
}

.delivery-preflight-panel label input[type="checkbox"] { width: 16px !important; height: 16px !important; min-height: 16px !important; flex: 0 0 16px; margin: 0; }
.editor-delivery-grid button { min-height: 92px; }
.editor-delivery-grid button svg { width: 18px !important; height: 18px !important; }

.canvas-size-dialog { width: min(620px, calc(100vw - 64px)); max-height: calc(100vh - 64px); padding: 0; border: 1px solid color-mix(in srgb, #fff 42%, var(--v2-line)); border-radius: 8px; background: color-mix(in srgb, var(--v2-panel) 88%, transparent); color: var(--v2-text); box-shadow: 0 28px 80px rgb(15 23 42 / 34%); backdrop-filter: blur(30px) saturate(150%); }
.canvas-size-dialog::backdrop { background: rgb(15 23 42 / 45%); backdrop-filter: blur(5px); }
.canvas-size-dialog-shell { display: grid; max-height: inherit; grid-template-rows: auto minmax(0, 1fr) auto; }
.canvas-size-dialog-shell > header,
.canvas-size-dialog-shell > footer { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--v2-line); }
.canvas-size-dialog-shell > footer { justify-content: flex-end; border-top: 1px solid var(--v2-line); border-bottom: 0; }
.canvas-size-dialog-shell > header > div { display: grid; gap: 2px; }
.canvas-size-dialog-shell > header span { color: var(--v2-blue); font-size: 10px; font-weight: 700; }
.canvas-size-dialog-shell > header strong { font-size: 18px; }
.canvas-size-dialog-shell > header small { color: var(--v2-muted); }
.canvas-size-dialog-body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; padding: 20px; overflow: auto; }
.canvas-size-summary { margin: 0; padding: 10px 0 0; border-top: 1px solid var(--v2-line); color: var(--v2-muted); font-size: 11px; line-height: 1.5; }

@media (max-width: 1450px) {
  .project-quick-starts { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  .home-style-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-home-content .project-hub-view { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
  .home-style-library-head {
    align-items: stretch;
    flex-direction: column;
  }

  .home-style-library-open {
    justify-content: center;
  }

  .home-style-library-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Desktop project gallery: image-first cards with stable, uncropped previews. */
.project-card-desktop-only,
.project-card-menu {
  display: none;
}

/* Keep the desktop card contract stable at the 1024px test/desktop viewport.
   Scrollbars can reduce the CSS viewport just below 1024px. */
@media (min-width: 960px) {
  .project-card-legacy-only { display: none !important; }
}

@media (min-width: 1024px) {
  .project-card-legacy-only {
    display: none !important;
  }

  .project-home-content {
    padding: 26px clamp(28px, 3.2vw, 64px) 48px;
  }

  .project-home-heading h2 {
    margin: 4px 0 6px;
    font-size: 30px;
    letter-spacing: 0;
  }

  .project-quick-starts {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
  }

  .project-quick-starts button {
    min-height: 88px;
    grid-template-columns: 22px minmax(0, 1fr);
    align-content: center;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
  }

  .project-quick-starts svg {
    width: 21px;
    height: 21px;
  }

  .project-recent-heading {
    margin: 26px 0 12px;
  }

  .home-style-library {
    margin-top: 16px;
    padding: 13px;
  }

  .home-style-library-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .home-style-card-preview {
    aspect-ratio: 16 / 9;
  }

  .project-recent-all {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 6px;
    padding: 0 5px;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
  }

  .project-recent-all svg {
    width: 15px;
    height: 15px;
  }

  .project-home-content .project-hub-view {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 18px;
  }

  .project-home-content .project-card {
    position: relative;
    display: block;
    min-width: 0;
    padding: 0 !important;
    overflow: visible;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--v2-panel) 78%, transparent) !important;
    box-shadow: 0 1px 2px rgb(15 23 42 / 5%) !important;
    backdrop-filter: blur(18px);
  }

  .project-home-content .project-card:hover {
    border-color: color-mix(in srgb, var(--v2-blue) 34%, var(--v2-line)) !important;
    box-shadow: 0 14px 32px rgb(15 23 42 / 12%) !important;
    transform: translateY(-2px) !important;
  }

  .project-home-content .project-card.current {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--v2-blue) 16%, transparent), 0 12px 30px rgb(15 23 42 / 10%) !important;
  }

  .project-home-content .project-card-main {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
  }

  .project-home-content .project-card-cover {
    position: relative;
    display: block;
    width: 100% !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 0 !important;
    border-bottom: 1px solid var(--v2-line);
    border-radius: 7px 7px 0 0 !important;
    background: #e9edf3;
    box-shadow: none !important;
  }

  :root[data-theme="dark"] .project-home-content .project-card-cover {
    background: #18191c;
  }

  .project-card-cover-image {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: color-mix(in srgb, var(--v2-bg) 86%, #111 14%);
    object-fit: contain;
  }

  .project-card-cover-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    align-items: end;
    gap: 6px 10px;
    padding: 22px;
    background:
      linear-gradient(145deg, rgb(255 255 255 / 70%), transparent 55%),
      linear-gradient(135deg, #dce7f6, #edf1f7 58%, #cdd9e8);
    color: #27384f;
  }

  .project-cover-tone-1 .project-card-cover-fallback { background: linear-gradient(145deg, rgb(255 255 255 / 64%), transparent 55%), linear-gradient(135deg, #e6dff4, #f0edf6 58%, #d5cce9); color: #46365f; }
  .project-cover-tone-2 .project-card-cover-fallback { background: linear-gradient(145deg, rgb(255 255 255 / 64%), transparent 55%), linear-gradient(135deg, #d8ece6, #edf5f1 58%, #c4ddd5); color: #244c42; }
  .project-cover-tone-3 .project-card-cover-fallback { background: linear-gradient(145deg, rgb(255 255 255 / 64%), transparent 55%), linear-gradient(135deg, #f2e3d8, #f7f1ec 58%, #e6d1c2); color: #5e4030; }
  .project-cover-tone-4 .project-card-cover-fallback { background: linear-gradient(145deg, rgb(255 255 255 / 64%), transparent 55%), linear-gradient(135deg, #e4e8d6, #f2f3ec 58%, #d4dac0); color: #414a2c; }
  .project-cover-tone-5 .project-card-cover-fallback { background: linear-gradient(145deg, rgb(255 255 255 / 64%), transparent 55%), linear-gradient(135deg, #eadde2, #f6eef1 58%, #dec8d0); color: #5c3442; }

  .project-card-cover-fallback > svg {
    align-self: start;
    width: 22px;
    height: 22px;
  }

  .project-card-cover-fallback b {
    align-self: center;
    grid-column: 1 / -1;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0;
  }

  .project-card-cover-fallback small {
    grid-column: 1 / -1;
    overflow: hidden;
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .project-card-format {
    position: absolute;
    z-index: 3;
    bottom: 8px;
    left: 8px;
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 0 7px;
    border: 1px solid rgb(255 255 255 / 38%);
    border-radius: 4px;
    background: rgb(20 24 31 / 68%);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    backdrop-filter: blur(10px);
  }

  .project-home-content .project-card-copy {
    display: grid;
    min-height: 108px;
    align-content: start;
    gap: 5px;
    padding: 13px 14px 12px;
  }

  .project-home-content .project-card-copy strong,
  .project-home-content .project-card-copy em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .project-home-content .project-card-copy strong {
    padding-right: 24px;
    color: var(--v2-text);
    font-size: 13px !important;
    line-height: 1.35;
  }

  .project-home-content .project-card-copy em {
    color: var(--v2-muted);
    font-size: 11px !important;
    font-style: normal;
  }

  .project-home-content .project-card-copy em.project-card-desktop-only {
    display: block;
  }

  .project-card-meta,
  .project-card-status {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    color: var(--v2-muted);
    font-size: 11px;
  }

  .project-card-meta small {
    margin-left: auto;
    font-size: 11px;
  }

  .project-card-status {
    min-height: 22px;
    margin-top: auto;
  }

  .project-card-progress-track {
    display: block;
    width: 42px;
    height: 3px;
    overflow: hidden;
    border-radius: 2px;
    background: color-mix(in srgb, var(--v2-muted) 20%, transparent);
  }

  .project-card-progress-track i {
    display: block;
    width: var(--project-completion, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--v2-blue);
  }

  .project-card-status small {
    font-size: 11px;
  }

  .project-card-status b {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    color: var(--v2-blue);
    font-size: 11px;
    font-weight: 650;
  }

  .project-card-status b svg {
    width: 13px;
    height: 13px;
  }

  .project-card-menu {
    position: absolute;
    z-index: 8;
    top: 8px;
    right: 8px;
    display: block;
  }

  .project-card-menu > summary {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 34%);
    border-radius: 5px;
    background: rgb(20 24 31 / 62%);
    color: #fff;
    cursor: pointer;
    list-style: none;
    opacity: .86;
    backdrop-filter: blur(12px);
  }

  .project-card-menu > summary::-webkit-details-marker { display: none; }
  .project-card-menu > summary:hover,
  .project-card-menu[open] > summary { background: rgb(20 24 31 / 82%); opacity: 1; }
  .project-card-menu > summary svg { width: 17px; height: 17px; }

  .project-card-menu-popover {
    position: absolute;
    top: 36px;
    bottom: auto;
    right: 0;
    display: grid;
    width: 154px;
    padding: 5px;
    border: 1px solid color-mix(in srgb, #fff 32%, var(--v2-line));
    border-radius: 7px;
    background: color-mix(in srgb, var(--v2-panel) 91%, transparent);
    box-shadow: 0 18px 44px rgb(15 23 42 / 24%);
    backdrop-filter: blur(24px) saturate(145%);
  }

  .project-card-menu-popover button {
    display: flex;
    min-height: 34px;
    align-items: center;
    gap: 9px;
    padding: 0 9px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--v2-text);
    font: inherit;
    font-size: 12px;
    text-align: left;
  }

  .project-card-menu-popover button:hover { background: color-mix(in srgb, var(--v2-blue) 10%, transparent); }
  .project-card-menu-popover svg { width: 16px; height: 16px; }
  .project-card-menu-popover .project-delete-btn { color: #d13438 !important; }

  .project-home-content .project-list-toggle {
    grid-column: 1 / -1;
    min-height: 36px;
  }
}

@media (max-width: 900px) {
  .technique-detail-hero { grid-template-columns: 1fr; }
  .technique-detail-hero figure img { min-height: 230px; }
  .technique-detail-bottom { grid-template-columns: 1fr; }
  .style-library-capability-matrix > div { grid-template-columns: 1fr; }
  .style-detail-technique-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .style-detail-technique-group > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .style-detail-capabilities > div { grid-template-columns: 1fr; }
  .style-detail-research > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .style-detail-city-body { grid-template-columns: 1fr; }
  .style-detail-city-body dl { grid-template-columns: 1fr; }
  .style-detail-city-standards > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .style-detail-summary-strip { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .style-detail-summary-image { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 560px) {
  .technique-detail-capabilities > div,
  .technique-detail-sources > div,
  .technique-detail-related > div { grid-template-columns: 1fr; }
  .style-library-capability-matrix section > div { grid-template-columns: 1fr; }
  .style-detail-technique-grid { grid-template-columns: 1fr; }
  .style-detail-technique-group > div,
  .style-detail-research > div { grid-template-columns: 1fr; }
  .style-detail-city-tabs button { min-width: 96px; }
  .style-library-card-image-policy { align-items: flex-start; flex-direction: column; gap: 2px; }
  .style-detail-summary-strip { grid-template-columns: 1fr; align-items: start; }
  .style-detail-summary-palette,
  .style-detail-summary-keywords,
  .style-detail-match-score { justify-self: start; }
}

/* Photoshop tool rail, while PPT thumbnails remain the first editor column. */
#step-edit.editor-layout {
  grid-template-columns: var(--v2-thumbnail-width) 46px minmax(0, 1fr) 0 !important;
}
#step-edit > .editor-tool-rail {
  z-index: 4;
  display: flex;
  min-width: 0;
  min-height: 0;
  grid-column: 2;
  grid-row: 2;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  padding: 7px 4px;
  overflow: hidden auto;
  border-right: 1px solid var(--v2-line);
  background: color-mix(in srgb, var(--v2-panel) 86%, transparent);
  backdrop-filter: blur(20px) saturate(135%);
}
#step-edit > .canvas-area { grid-column: 3 !important; }
#step-edit.workflow-panel-open > .editor-tool-rail { display: none !important; }
.editor-tool-rail button {
  position: relative;
  display: grid;
  width: 38px;
  min-height: 42px;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 4px 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--v2-muted);
}
.editor-tool-rail button::before { content: ""; position: absolute; left: -4px; width: 2px; height: 22px; border-radius: 0 2px 2px 0; background: transparent; }
.editor-tool-rail button:hover:not(:disabled) { background: color-mix(in srgb, var(--v2-blue) 8%, transparent); color: var(--v2-text); }
.editor-tool-rail button.active { color: var(--v2-blue); }
.editor-tool-rail button.active::before { background: currentColor; }
.editor-tool-rail button:disabled { opacity: .34; }
.editor-tool-rail svg { width: 18px; height: 18px; }
.editor-tool-rail span { max-width: 36px; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.editor-tool-rail button[data-editor-rail-command] { color: var(--v2-muted); }
.editor-tool-separator { display: block; width: 26px; height: 1px; flex: 0 0 1px; align-self: center; margin: 4px 0; background: var(--v2-line); }

/* Layer rows use direct icon controls and native drag ordering. */
#step-edit .editor-layer-item {
  position: relative;
  display: grid;
  min-height: 40px;
  grid-template-columns: 13px 24px 24px minmax(0, 1fr) auto 76px;
  gap: 4px;
  align-items: center;
  padding: 3px 4px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--v2-line) 62%, transparent);
  border-radius: 0;
  background: transparent;
}
#step-edit .editor-layer-item:hover { background: color-mix(in srgb, var(--v2-blue) 6%, transparent); }
#step-edit .editor-layer-item.active { background: color-mix(in srgb, var(--v2-blue) 12%, transparent); box-shadow: inset 2px 0 var(--v2-blue); }
#step-edit .editor-layer-item.is-hidden { opacity: .52; }
#step-edit .editor-layer-item.is-locked .layer-drag-handle { opacity: .2; cursor: not-allowed; }
.layer-drag-handle { display: grid; height: 100%; place-items: center; color: var(--v2-faint); cursor: grab; }
.editor-layer-item.dragging { opacity: .42; }
.editor-layer-item.drop-before::before,
.editor-layer-item.drop-after::after { content: ""; position: absolute; z-index: 2; right: 2px; left: 2px; height: 2px; background: var(--v2-blue); }
.editor-layer-item.drop-before::before { top: -1px; }
.editor-layer-item.drop-after::after { bottom: -1px; }
.layer-visibility-btn,
.layer-order-actions button { display: grid; width: 24px; height: 24px; min-height: 24px; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--v2-muted); }
.layer-visibility-btn:hover,
.layer-order-actions button:hover { background: color-mix(in srgb, var(--v2-blue) 9%, transparent); color: var(--v2-blue); }
.layer-visibility-btn svg,
.layer-order-actions svg,
.layer-drag-handle svg,
.layer-group-state svg { width: 14px; height: 14px; }
.layer-type-dot { display: grid; width: 24px; height: 24px; place-items: center; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #2878d0; }
.layer-type-dot.text { color: #146c94; }
.layer-type-dot.image { color: #168c72; }
.layer-type-dot.shape { color: #b146c2; }
.layer-type-dot.table { color: #d18b00; }
.layer-type-dot.chart { color: #e14b65; }
.layer-title { min-width: 0; }
.layer-title strong,
.layer-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-title strong { font-size: 10px; font-weight: 600; }
.layer-title small { color: var(--v2-faint); font-size: 8px; }
.layer-group-state { display: grid; width: 18px; place-items: center; color: #6f5bd3; }
.layer-order-actions { display: flex; gap: 1px; justify-content: flex-end; }

/* Chat-style composer controls: per-message web mode and image size. */
.assistant-composer-tools {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.assistant-composer-tools::-webkit-scrollbar { display: none; }
.assistant-composer-mode {
  display: inline-flex;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  padding-left: 4px;
  border-left: 1px solid var(--v2-line);
  color: var(--v2-muted);
}
.assistant-composer-mode svg { width: 13px; height: 13px; flex: 0 0 auto; }
.assistant-web-mode svg { color: #168c72; }
.assistant-size-mode svg { color: #6f5bd3; }
.assistant-composer-tools .assistant-composer-mode select { max-width: 82px; padding-left: 1px !important; }
.assistant-custom-size-fields {
  display: inline-flex;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}
.assistant-custom-size-fields.hidden { display: none !important; }
.assistant-custom-size-fields input {
  width: 44px;
  height: 22px;
  min-height: 22px;
  padding: 0 3px;
  border: 0;
  border-bottom: 1px solid var(--v2-line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--v2-text);
  font-size: 8px;
  text-align: center;
}
.assistant-custom-size-fields b { color: var(--v2-faint); font-size: 8px; font-weight: 500; }
.assistant-generated-image-grid { max-height: none !important; overflow: visible !important; }

@media (min-width: 1024px) {
  #step-edit.editor-layout {
    grid-template-columns: var(--v2-thumbnail-width) 46px minmax(420px, 1fr) var(--editor-right-width, var(--v2-inspector-width)) !important;
  }
  #step-edit.editor-layout.right-panel-collapsed {
    grid-template-columns: var(--v2-thumbnail-width) 46px minmax(420px, 1fr) 0 !important;
  }
  #step-edit > .canvas-area { grid-column: 3 !important; }
  #step-edit > .inspector {
    position: static !important;
    grid-column: 4 !important;
    grid-row: 2 !important;
    width: auto !important;
    height: auto !important;
    overflow: auto !important;
    box-shadow: var(--glass-highlight) !important;
  }
}

/* Social publishing is a full-width output workspace, without editor side panels. */
@media (min-width: 1024px) {
  #step-edit.editor-layout.social-publish-mode.workflow-panel-open {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #step-edit.social-publish-mode.workflow-panel-open > .thumb-panel,
  #step-edit.social-publish-mode.workflow-panel-open > .canvas-area,
  #step-edit.social-publish-mode.workflow-panel-open > .inspector,
  #step-edit.social-publish-mode.workflow-panel-open > .editor-top-ribbon,
  #step-edit.social-publish-mode.workflow-panel-open > .editor-tool-rail,
  #step-edit.social-publish-mode.workflow-panel-open > .editor-panel-resizer {
    display: none !important;
  }

  #step-edit.social-publish-mode.workflow-panel-open > .editor-workflow-workspace {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* Final desktop contract for the design workflow after the shared four-column editor rules. */
@media (min-width: 1024px) {
  #step-edit.editor-layout:not(.workflow-panel-open) {
    grid-template-columns: var(--editor-left-width, var(--v2-thumbnail-width)) 46px minmax(420px, 1fr) var(--editor-right-width, var(--v2-inspector-width)) !important;
  }

  #step-edit.editor-layout.left-panel-collapsed:not(.workflow-panel-open) {
    grid-template-columns: 0 46px minmax(420px, 1fr) var(--editor-right-width, var(--v2-inspector-width)) !important;
  }

  #step-edit.editor-layout.right-panel-collapsed:not(.workflow-panel-open) {
    grid-template-columns: var(--editor-left-width, var(--v2-thumbnail-width)) 46px minmax(420px, 1fr) 0 !important;
  }

  #step-edit.editor-layout.left-panel-collapsed.right-panel-collapsed:not(.workflow-panel-open) {
    grid-template-columns: 0 46px minmax(420px, 1fr) 0 !important;
  }

  #step-edit.left-panel-collapsed:not(.workflow-panel-open) > .thumb-panel {
    display: none !important;
  }

  #step-edit.left-panel-collapsed:not(.workflow-panel-open) > #leftEditorPanelResizer {
    left: 0 !important;
  }

  #step-edit.editor-layout.design-preview-mode {
    grid-template-columns: var(--editor-left-width, var(--v2-thumbnail-width)) minmax(420px, 1fr) var(--editor-right-width, var(--v2-inspector-width)) !important;
  }

  #step-edit.editor-layout.design-preview-mode.left-panel-collapsed {
    grid-template-columns: 0 minmax(420px, 1fr) var(--editor-right-width, var(--v2-inspector-width)) !important;
  }

  #step-edit.design-preview-mode > .editor-tool-rail { display: none !important; }
  #step-edit.design-preview-mode > .canvas-area { grid-column: 2 !important; }
  #step-edit.design-preview-mode > .inspector { grid-column: 3 !important; }
}
.assistant-brief-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:8px 12px; border-top:1px solid var(--border,#e5e7eb); }
.assistant-voice-toggle { margin-left:auto; display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted-text,#6b7280); white-space:nowrap; }
.assistant-voice-toggle input { accent-color:#1677ff; }
#assistantVoiceNoticeBtn[aria-pressed="true"] {
  color: var(--v2-text, #f5f7fa);
  background: color-mix(in srgb, currentColor 12%, transparent);
}
#assistantVoiceNoticeBtn[aria-pressed="false"] {
  color: var(--v2-muted, #8b919b);
  background: transparent;
}
#assistantVoiceNoticeBtn svg { width: 16px; height: 16px; }

.assistant-message-voice-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin-top: 7px;
  white-space: normal;
}

.assistant-message-voice-actions button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--v2-line, #3b3d42);
  border-radius: 5px;
  background: transparent;
  color: var(--v2-muted, #a8adb7);
  cursor: pointer;
}

.assistant-message-voice-actions button:hover {
  border-color: var(--v2-blue, #3b82f6);
  color: var(--v2-text, #f5f7fa);
  background: var(--v2-blue-soft, rgba(59, 130, 246, 0.12));
}

.assistant-message-voice-actions button:disabled {
  opacity: 0.38;
  cursor: default;
}

.assistant-message-voice-actions button.is-speaking {
  border-color: var(--v2-blue, #3b82f6);
  color: var(--v2-text, #f5f7fa);
  background: var(--v2-blue-soft, rgba(59, 130, 246, 0.12));
}

.assistant-message-voice-actions button.is-speaking svg {
  animation: assistant-speech-pulse 1s ease-in-out infinite;
}

.assistant-speech-status {
  margin-left: 3px;
  color: var(--v2-muted, #a8adb7);
  font-size: 11px;
}

.assistant-speech-status.error {
  color: #ef4444;
}

@keyframes assistant-speech-pulse {
  50% { opacity: 0.45; transform: scale(0.9); }
}

.assistant-message-voice-actions svg {
  width: 15px;
  height: 15px;
}

/* Canonical desktop UI contract. Keep mobile behavior in the existing breakpoint rules. */
@media (min-width: 1024px) {
  :root {
    --desktop-body-size: 13px;
    --desktop-control-size: 12px;
    --desktop-meta-size: 11px;
    --desktop-section-size: 14px;
    --desktop-dialog-size: 16px;
    --desktop-icon-size: 16px;
    --desktop-primary-icon-size: 18px;
  }

  #step-edit.editor-layout:not(.workflow-panel-open) {
    grid-template-columns: var(--editor-left-width, 220px) 46px minmax(420px, 1fr) var(--editor-right-width, 300px) !important;
  }

  #step-edit.editor-layout.design-preview-mode {
    grid-template-columns: var(--editor-left-width, 220px) minmax(420px, 1fr) var(--editor-right-width, 300px) !important;
  }

  :where(.topbar, .rail, .editor-top-ribbon, .inspector, .style-library-dialog, .style-library-detail-dialog, .settings-dialog, .assistant-drawer, .assistant-tools-drawer, .editor-delivery-drawer, .generation-progress)
  :where(span, small, em, b, strong, p, li, label, a, dt, dd):not(:where(.slide-canvas, .mini-slide, .workflow-canvas, .style-workflow-canvas, .workflow-thumb) *) {
    font-size: var(--desktop-meta-size) !important;
    letter-spacing: 0 !important;
  }

  :where(.topbar, .rail, .editor-top-ribbon, .inspector, .style-library-dialog, .style-library-detail-dialog, .settings-dialog, .assistant-drawer, .assistant-tools-drawer, .editor-delivery-drawer, .generation-progress)
  :where(button, input, select, textarea) {
    font-size: var(--desktop-control-size) !important;
    letter-spacing: 0 !important;
  }

  :where(.topbar, .rail, .editor-top-ribbon, .inspector, .style-library-dialog, .style-library-detail-dialog, .settings-dialog, .assistant-drawer, .assistant-tools-drawer, .editor-delivery-drawer, .generation-progress)
  button > :where(span, small, em, b) {
    font-size: inherit !important;
  }

  :where(.topbar, .rail, .editor-top-ribbon, .inspector, .style-library-dialog, .style-library-detail-dialog, .settings-dialog, .assistant-drawer, .assistant-tools-drawer, .editor-delivery-drawer, .generation-progress)
  button svg {
    width: var(--desktop-icon-size) !important;
    height: var(--desktop-icon-size) !important;
    flex: 0 0 auto;
  }

  .primary-btn,
  .generation-progress-actions button:not(.assistant-icon-btn) {
    min-height: 36px !important;
    border-radius: 7px !important;
  }

  .primary-btn svg,
  .assistant-send-btn svg,
  .style-library-generate-btn svg {
    width: var(--desktop-primary-icon-size) !important;
    height: var(--desktop-primary-icon-size) !important;
  }

  .assistant-icon-btn {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 6px !important;
  }

  .panel-head h2,
  .workflow-inspector-section h3,
  .assistant-heading h2 {
    font-size: var(--desktop-section-size) !important;
  }

  #projectMeta {
    font-size: var(--desktop-meta-size) !important;
  }

  #step-edit .editor-tool-rail button span {
    font-size: var(--desktop-meta-size) !important;
  }

  .style-library-shell > header strong,
  .style-library-detail-dialog > header strong {
    font-size: var(--desktop-dialog-size) !important;
  }

  .assistant-drawer:not(.embedded) {
    min-width: 400px !important;
    min-height: 520px !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 32px) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    border-radius: 8px !important;
    background-color: rgba(244, 249, 247, .72) !important;
    background-image: var(--glass-sheen) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), inset 1px 0 0 rgba(84, 201, 211, .16), inset -1px 0 0 rgba(215, 121, 190, .12), 0 22px 58px rgba(17, 37, 34, .22) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
    backdrop-filter: blur(28px) saturate(160%) !important;
  }

  :root[data-theme="dark"] .assistant-drawer:not(.embedded) {
    border-color: rgba(255, 255, 255, .16) !important;
    background-color: rgba(23, 31, 29, .78) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 1px 0 0 rgba(77, 190, 210, .12), inset -1px 0 0 rgba(207, 103, 174, .08), 0 24px 64px rgba(0, 0, 0, .42) !important;
  }

  .assistant-header {
    min-height: 48px !important;
    padding: 7px 10px !important;
    border-bottom-color: color-mix(in srgb, var(--v2-line) 72%, transparent) !important;
    background: color-mix(in srgb, var(--glass-surface-strong) 82%, transparent) !important;
  }

  .assistant-header-actions .assistant-icon-btn,
  .assistant-composer-tools .assistant-icon-btn {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }

  .assistant-mark {
    width: 30px !important;
    height: 30px !important;
    border-radius: 7px !important;
  }

  .assistant-mark svg,
  .assistant-drag-grip svg {
    width: 16px !important;
    height: 16px !important;
  }

  .assistant-context,
  .assistant-tasks,
  .assistant-recommendations,
  .assistant-messages,
  .assistant-suggestions,
  .assistant-attachments,
  .assistant-brief-actions {
    background-color: color-mix(in srgb, var(--v2-panel) 88%, transparent) !important;
  }

  .assistant-message-content,
  .assistant-composer textarea,
  .assistant-generated-copy {
    font-size: var(--desktop-body-size) !important;
    line-height: 1.58 !important;
  }

  .assistant-context-chip,
  .assistant-turn-badge,
  .assistant-repeat-count,
  .assistant-task-card :where(p, li, footer span, footer em),
  .assistant-generated-result :where(span, small, em),
  .assistant-artifact-result :where(span, small, em),
  .assistant-sync-prompt span {
    font-size: var(--desktop-meta-size) !important;
  }

  .assistant-task-card > header strong,
  .assistant-generated-result > header strong,
  .assistant-artifact-result > header strong,
  .assistant-sync-prompt strong {
    font-size: var(--desktop-control-size) !important;
  }

  .assistant-drawer strong:not(:where(.assistant-design-preview, .assistant-generated-image-preview, .assistant-moodboard-preview, .mini-slide, .slide-canvas) *) {
    font-size: max(var(--desktop-meta-size), 1em) !important;
  }

  .assistant-task-card {
    min-height: 92px;
    padding: 11px !important;
    border-radius: 7px !important;
  }

  .assistant-task-card.workspace > footer em {
    color: var(--v2-green);
    font-style: normal;
  }

  .assistant-task-progress,
  .generation-progress-bar {
    min-height: 6px;
  }

  .assistant-task-progress.is-indeterminate i {
    animation: desktop-progress-indeterminate 1.25s ease-in-out infinite;
  }

  .assistant-composer {
    min-height: 92px !important;
    grid-template-columns: minmax(0, 1fr) 36px !important;
    grid-template-rows: minmax(38px, auto) 36px !important;
    padding: 8px 9px !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--v2-panel) 92%, transparent) !important;
  }

  .assistant-composer-tools {
    height: 36px !important;
    gap: 6px !important;
  }

  .assistant-composer-tools select {
    min-height: 30px !important;
    font-size: var(--desktop-control-size) !important;
  }

  .assistant-composer .assistant-send-btn {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 7px !important;
  }

  .assistant-new-result {
    position: absolute;
    z-index: 8;
    right: 16px;
    bottom: 120px;
    display: inline-flex;
    width: 38px;
    height: 38px;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--v2-blue) 36%, var(--v2-line));
    border-radius: 50%;
    background: color-mix(in srgb, var(--v2-panel) 92%, transparent);
    color: var(--v2-blue);
    box-shadow: 0 8px 20px rgba(20, 42, 39, .16);
  }

  .assistant-new-result.hidden { display: none !important; }
  .assistant-new-result > span { display: none !important; }
  .assistant-new-result svg { width: 18px !important; height: 18px !important; flex: 0 0 18px; }

  .assistant-load-history {
    display: flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    padding: 0 12px;
    border: 1px solid var(--v2-line);
    border-radius: 6px;
    background: var(--v2-panel-soft);
    color: var(--v2-muted);
  }

  .assistant-history-separator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 10px;
    color: var(--v2-faint);
  }

  .assistant-history-separator::before,
  .assistant-history-separator::after {
    height: 1px;
    flex: 1;
    background: var(--v2-line);
    content: "";
  }

  .assistant-history-task-label {
    margin: 8px 0 6px;
    color: var(--v2-green);
    font-size: var(--desktop-meta-size) !important;
    font-weight: 650;
  }

  .style-library-workspace {
    grid-template-columns: minmax(0, 1fr) 320px !important;
  }

  .style-library-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 14px !important;
    padding: 14px 16px 22px !important;
    overflow-anchor: none;
  }

  .style-library-selection-panel {
    width: 320px;
  }

  .style-library-card {
    min-height: 332px;
    border-radius: 8px !important;
  }

  .style-library-preview {
    aspect-ratio: 16 / 9 !important;
    min-height: 0;
  }

  .style-library-card-copy {
    min-height: 142px;
    align-content: start;
    gap: 9px !important;
    padding: 12px 13px 13px !important;
  }

  .style-library-card-title strong {
    font-size: 13px !important;
    line-height: 1.25;
  }

  .style-library-card-title strong small {
    display: block;
    margin-top: 2px;
    color: var(--v2-muted);
    font-size: var(--desktop-meta-size) !important;
    font-weight: 500;
    line-height: 1.2;
  }

  .style-library-card-title span,
  .style-library-image-source,
  .style-library-card-dimensions em,
  .style-library-card-uses em,
  .style-library-card-uses b {
    font-size: var(--desktop-meta-size) !important;
  }

  .style-library-card-uses {
    gap: 7px !important;
  }

  .style-library-card-uses em {
    min-height: 28px !important;
    padding: 0 8px !important;
  }

  .style-library-card-uses svg,
  .style-library-image-source svg {
    width: 14px !important;
    height: 14px !important;
  }

  .style-library-card-dimensions {
    min-height: 24px;
    overflow: hidden;
  }

  .style-library-card-dimensions em {
    padding: 3px 6px !important;
  }

  .style-library-palette i {
    width: 28px !important;
    height: 10px !important;
  }

  .style-library-zoom,
  .style-library-card-check {
    width: 32px !important;
    height: 32px !important;
  }

  .style-library-zoom svg,
  .style-library-card-check svg {
    width: 16px !important;
    height: 16px !important;
  }

  .style-library-selection-panel > header span,
  .style-library-selection-detail strong,
  .style-library-selection-detail small,
  .style-library-count-setting strong,
  .style-library-count-setting small,
  .style-library-catalog-head span {
    font-size: var(--desktop-meta-size) !important;
  }

  .workflow-stage-inspector {
    padding-bottom: 0 !important;
  }

  body[data-editor-workflow-stage="style"] #step-edit > .inspector {
    overflow: hidden !important;
  }

  #styleStageInspector:has(> .workflow-inspector-footer) {
    display: grid;
    height: calc(100% - 48px);
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
  }

  .workflow-inspector-scroll {
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
    scrollbar-gutter: stable;
  }

  .workflow-inspector-section {
    padding: 0 !important;
  }

  .workflow-inspector-section > summary {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    cursor: pointer;
    list-style: none;
  }

  .workflow-inspector-section > summary::-webkit-details-marker { display: none; }
  .workflow-inspector-section > summary h3 { margin: 0 !important; }
  .workflow-inspector-section > summary span {
    min-width: 0;
    overflow: hidden;
    color: var(--v2-faint);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workflow-inspector-section > summary::after {
    flex: 0 0 auto;
    color: var(--v2-faint);
    content: "+";
    font-size: 16px;
  }

  .workflow-inspector-section[open] > summary::after { content: "−"; }
  .workflow-inspector-section > :not(summary) { margin-right: 0; margin-left: 0; }

  .workflow-inspector-footer {
    z-index: 4;
    margin: 0 -14px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--v2-line);
    background: color-mix(in srgb, var(--v2-panel) 94%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
    backdrop-filter: blur(16px) saturate(145%);
  }

  .workflow-inspector-footer .workflow-wide-action {
    width: 100%;
    margin: 0 !important;
  }

  .generation-progress {
    right: var(--generation-dock-right, 22px) !important;
    bottom: 82px !important;
    z-index: 1495 !important;
    width: 360px !important;
    min-height: 112px;
    padding: 13px 14px !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 8px !important;
    background-color: var(--glass-surface-strong) !important;
    background-image: var(--glass-sheen) !important;
    box-shadow: var(--glass-highlight), 0 18px 42px rgba(20, 42, 39, .18) !important;
    -webkit-backdrop-filter: blur(22px) saturate(155%) !important;
    backdrop-filter: blur(22px) saturate(155%) !important;
    transition: right 160ms ease, opacity 160ms ease !important;
  }

  .generation-progress-head > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
  }

  .generation-progress-head strong { font-size: var(--desktop-section-size) !important; }
  #generationProgressCount { color: var(--v2-green); white-space: nowrap; }
  .generation-progress p { min-height: 34px; margin: 8px 0 10px !important; font-size: var(--desktop-control-size) !important; }
  .generation-progress.is-failed { border-color: color-mix(in srgb, var(--v2-red) 42%, var(--glass-border)) !important; }

  .generation-progress-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 9px;
  }

  .generation-progress-actions.hidden { display: none !important; }
  .generation-progress-actions .assistant-icon-btn { margin-left: auto; }

.generation-progress.is-indeterminate .generation-progress-bar span {
    width: 34% !important;
    animation: desktop-progress-indeterminate 1.25s ease-in-out infinite !important;
  }

  @keyframes desktop-progress-indeterminate {
    0% { transform: translateX(-115%); }
    50% { transform: translateX(95%); }
    100% { transform: translateX(285%); }
  }

  html[data-performance-tier="smooth"] .assistant-drawer:not(.embedded),
  html[data-performance-tier="off"] .assistant-drawer:not(.embedded),
  html[data-performance-tier="smooth"] .generation-progress,
  html[data-performance-tier="off"] .generation-progress,
  html[data-performance-tier="smooth"] .workflow-inspector-footer,
  html[data-performance-tier="off"] .workflow-inspector-footer {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html[data-performance-tier="smooth"] .assistant-task-progress.is-indeterminate i,
  html[data-performance-tier="off"] .assistant-task-progress.is-indeterminate i,
  html[data-performance-tier="smooth"] .generation-progress.is-indeterminate .generation-progress-bar span,
  html[data-performance-tier="off"] .generation-progress.is-indeterminate .generation-progress-bar span {
    animation: none !important;
  }
}

html[data-performance-tier="off"] .generation-mini-game {
  display: none !important;
}

@media (min-width: 1280px) {
  #step-edit.editor-layout:not(.workflow-panel-open) {
    grid-template-columns: var(--editor-left-width, 220px) 46px minmax(640px, 1fr) var(--editor-right-width, 300px) !important;
  }

  #step-edit.editor-layout.design-preview-mode {
    grid-template-columns: var(--editor-left-width, 220px) minmax(640px, 1fr) var(--editor-right-width, 300px) !important;
  }
}

/* Style selection is a preview workflow, so canvas editing tools do not belong here. */
@media (min-width: 1024px) {
  #step-edit.editor-layout.style-preview-mode:not(.workflow-panel-open) {
    grid-template-columns: var(--editor-left-width, 220px) minmax(420px, 1fr) var(--editor-right-width, 300px) !important;
  }

  #step-edit.editor-layout.style-preview-mode.left-panel-collapsed:not(.workflow-panel-open) {
    grid-template-columns: 0 minmax(420px, 1fr) var(--editor-right-width, 300px) !important;
  }

  #step-edit.editor-layout.style-preview-mode.right-panel-collapsed:not(.workflow-panel-open) {
    grid-template-columns: var(--editor-left-width, 220px) minmax(420px, 1fr) 0 !important;
  }

  #step-edit.editor-layout.style-preview-mode.left-panel-collapsed.right-panel-collapsed:not(.workflow-panel-open) {
    grid-template-columns: 0 minmax(420px, 1fr) 0 !important;
  }

  #step-edit.style-preview-mode > .editor-tool-rail {
    display: none !important;
  }

  #step-edit.style-preview-mode > .canvas-area {
    grid-column: 2 !important;
  }

  #step-edit.style-preview-mode > .inspector {
    grid-column: 3 !important;
  }
}

@media (min-width: 1280px) {
  #step-edit.editor-layout.style-preview-mode:not(.workflow-panel-open) {
    grid-template-columns: var(--editor-left-width, 220px) minmax(640px, 1fr) var(--editor-right-width, 300px) !important;
  }

  #step-edit.editor-layout.style-preview-mode.left-panel-collapsed:not(.workflow-panel-open) {
    grid-template-columns: 0 minmax(640px, 1fr) var(--editor-right-width, 300px) !important;
  }

  #step-edit.editor-layout.style-preview-mode.right-panel-collapsed:not(.workflow-panel-open) {
    grid-template-columns: var(--editor-left-width, 220px) minmax(640px, 1fr) 0 !important;
  }

  #step-edit.editor-layout.style-preview-mode.left-panel-collapsed.right-panel-collapsed:not(.workflow-panel-open) {
    grid-template-columns: 0 minmax(640px, 1fr) 0 !important;
  }
}

/* The v3 style detail markup is authored in the desktop contract above. Keep
   its mobile flow explicit so intrinsic preview images cannot widen the dialog. */
@media (max-width: 760px) {
  .style-library-detail-dialog {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    height: calc(100vh - 12px) !important;
    max-height: calc(100vh - 12px) !important;
  }

  .style-library-detail-content {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 0 !important;
    overflow: auto !important;
    box-sizing: border-box;
  }

  .style-library-detail-content > *,
  .style-library-detail-content img,
  .style-library-detail-content section,
  .style-library-detail-content nav,
  .style-library-detail-content aside,
  .style-library-detail-content div,
  .style-library-detail-content dl,
  .style-library-detail-content header {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .style-detail-v3-head {
    display: grid !important;
    width: auto !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center;
    gap: 8px !important;
    padding: 10px 12px !important;
    overflow: hidden;
  }

  .style-detail-mode-switch {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 / -1;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .style-detail-mode-switch::-webkit-scrollbar { display: none; }
  .style-detail-mode-switch button { flex: 0 0 auto; min-width: max-content !important; }
  .style-detail-status { min-width: 0 !important; justify-self: start; overflow: hidden; }
  .style-detail-status > span { min-width: 0; overflow: hidden; }
  .style-detail-status small,
  .style-detail-status strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .style-detail-v3-head > .ghost-btn { min-width: 0; max-width: 100%; }

  .style-detail-summary-strip {
    display: grid !important;
    width: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 9px !important;
    padding: 12px !important;
    overflow: hidden;
  }

  .style-detail-summary-strip > div,
  .style-detail-summary-palette,
  .style-detail-summary-keywords,
  .style-detail-summary-image {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .style-detail-summary-palette,
  .style-detail-summary-keywords { display: flex !important; flex-wrap: wrap; }
  .style-detail-summary-image { display: grid !important; }
  .style-detail-summary-image small,
  .style-detail-summary-keywords em { overflow-wrap: anywhere; white-space: normal; }

  .style-detail-library-workspace,
  .style-detail-project-workspace {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
  }

  .style-detail-series-tabs {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .style-detail-series-tabs button {
    flex: 0 0 auto;
    min-width: 86px !important;
    min-height: 42px !important;
    padding: 0 10px !important;
  }

  .style-detail-layout-browser {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .style-detail-layout-thumbs {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    padding: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden;
  }

  .style-detail-layout-thumb {
    display: grid !important;
    width: 178px !important;
    max-width: none !important;
    min-width: 178px !important;
    flex: 0 0 178px !important;
    grid-template-rows: 98px auto !important;
  }

  .style-detail-layout-thumb img {
    width: 100% !important;
    height: 98px !important;
    max-width: 100% !important;
  }

  .style-detail-library-preview,
  .style-detail-page-preview {
    display: grid !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
  }

  .style-detail-preview-frame {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .style-detail-preview-frame img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }

  .style-detail-grammar-panel,
  .style-detail-assignment-panel {
    display: grid !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    border-top: 1px solid var(--v2-line);
    border-left: 0 !important;
    overflow: visible !important;
  }

  .style-detail-grammar-panel dl > div,
  .style-detail-assignment-panel dl > div {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    min-width: 0 !important;
  }

  .style-detail-grammar-panel dd,
  .style-detail-assignment-panel dd,
  .style-detail-grammar-panel dt,
  .style-detail-assignment-panel dt {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  .style-detail-techniques {
    display: grid !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 16px 12px !important;
  }

  .style-detail-techniques > header { min-width: 0; }
  .style-detail-techniques > header small { overflow-wrap: anywhere; }
  .style-detail-technique-grid { grid-template-columns: 1fr !important; min-width: 0 !important; }
  .style-detail-technique-card { min-width: 0 !important; }

  .style-detail-project-empty {
    display: grid !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 24px 12px !important;
    text-align: center;
  }

  .style-detail-page-rail {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--v2-line);
  }

  .style-detail-page-rail > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .style-detail-page-item { grid-template-columns: 78px minmax(0, 1fr); min-width: 0 !important; }
  .style-detail-comparison { width: auto !important; max-width: 100% !important; min-width: 0 !important; padding: 12px !important; }
  .style-detail-comparison > div { grid-template-columns: 1fr !important; }
}

/* Final desktop overrides for the V3 three-pane catalog. */
@media (min-width: 1000px) {
  .style-library-v3-workspace { grid-template-columns: 232px minmax(0, 1fr) 300px !important; }
  .style-library-v3-workspace > .style-catalog-facet-panel { width: auto !important; min-width: 0 !important; }
  .style-library-v3-workspace > .style-library-catalog { width: auto !important; min-width: 0 !important; grid-template-rows: auto auto auto minmax(0, 1fr) auto !important; }
  .style-library-v3-workspace > .style-library-selection-panel { width: 300px !important; min-width: 0 !important; }
  .style-library-v3-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; padding: 12px !important; }
  .style-library-v3-card { min-height: 0 !important; }
  .style-library-v3-card .style-library-preview { min-height: 0 !important; aspect-ratio: 16 / 9 !important; }
  .style-library-v3-card .style-library-preview img { object-fit: cover !important; }
  .style-library-v3-card .style-library-card-copy { min-height: 93px !important; gap: 7px !important; padding: 9px 10px 10px !important; }
}
@media (min-width: 1700px) {
  .style-library-v3-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 1000px) and (max-width: 1599px) {
  .style-library-v3-workspace { grid-template-columns: 220px minmax(0, 1fr) !important; }
  .style-library-v3-workspace > .style-library-selection-panel { position: absolute !important; z-index: 12; top: 0; right: 0; bottom: 0; left: auto; display: grid; width: 300px !important; box-shadow: -16px 0 28px rgb(15 23 42 / 20%); }
  .style-library-v3-dialog.selection-collapsed .style-library-v3-workspace > .style-library-selection-panel { display: none !important; }
}

/* Keep the desktop assistant conversation-first. Recommendations stay available
   without consuming the message viewport until the user expands them. */
@media (min-width: 1024px) {
  .assistant-recommendations {
    max-height: 104px !important;
    gap: 5px !important;
    padding: 7px 10px !important;
    overflow: hidden !important;
  }

  .assistant-recommendations.expanded {
    max-height: min(32vh, 240px) !important;
    overflow: auto !important;
  }

  .assistant-recommendations > header {
    min-height: 28px;
    align-items: center !important;
  }

  .assistant-recommendations > header strong {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .assistant-recommendations > header strong em {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--v2-green) 14%, transparent);
    color: var(--v2-green);
    font-size: 10px !important;
    font-style: normal;
  }

  .assistant-recommendation-header-actions,
  .assistant-recommendation-settings {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .assistant-recommendation-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .assistant-recommendation-toggle svg {
    width: 14px !important;
    height: 14px !important;
  }

  .assistant-recommendations:not(.expanded) > header small,
  .assistant-recommendations:not(.expanded) .assistant-recommendation-settings,
  .assistant-recommendations:not(.expanded) .assistant-recommendation-list article:not(:first-child),
  .assistant-recommendations:not(.expanded) .assistant-recommendation-list article:first-child > p,
  .assistant-recommendations:not(.expanded) .assistant-recommendation-list article:first-child > div > span,
  .assistant-recommendations:not(.expanded) .assistant-recommendation-list article:first-child footer button:not(.primary) {
    display: none !important;
  }

  .assistant-recommendations:not(.expanded) .assistant-recommendation-list article:first-child {
    min-height: 40px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 5px 7px !important;
  }

  .assistant-recommendations:not(.expanded) .assistant-recommendation-list article:first-child > div {
    min-width: 0;
  }

  .assistant-recommendations:not(.expanded) .assistant-recommendation-list article:first-child > div strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .assistant-recommendations:not(.expanded) .assistant-recommendation-list article:first-child footer {
    flex-wrap: nowrap;
  }

  .assistant-recommendations:not(.expanded) .assistant-recommendation-list article:first-child footer .primary {
    min-height: 28px !important;
    white-space: nowrap;
  }

  .assistant-brief-actions {
    min-height: 42px;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    padding: 5px 10px !important;
  }

  .assistant-brief-actions > button {
    min-height: 30px !important;
    padding-inline: 7px !important;
    white-space: nowrap;
  }

  .assistant-voice-toggle {
    gap: 4px !important;
    font-size: 10px !important;
  }
}

/* Final desktop containment contract for editor side panels and the assistant. */
@media (min-width: 1024px) {
  #step-edit.editor-layout:not(.workflow-panel-open),
  #step-edit.editor-layout.design-preview-mode,
  #step-edit.editor-layout.style-preview-mode:not(.workflow-panel-open) {
    grid-template-columns: var(--editor-left-width, 220px) 46px minmax(420px, 1fr) var(--editor-right-width, 300px) !important;
  }

  #step-edit.editor-layout.design-preview-mode,
  #step-edit.editor-layout.style-preview-mode:not(.workflow-panel-open) {
    grid-template-columns: var(--editor-left-width, 220px) minmax(420px, 1fr) var(--editor-right-width, 300px) !important;
  }

  #step-edit.editor-layout.left-panel-collapsed:not(.workflow-panel-open) {
    grid-template-columns: 0 46px minmax(420px, 1fr) var(--editor-right-width, 300px) !important;
  }

  #step-edit.editor-layout.right-panel-collapsed:not(.workflow-panel-open) {
    grid-template-columns: var(--editor-left-width, 220px) 46px minmax(420px, 1fr) 0 !important;
  }

  #step-edit.editor-layout.left-panel-collapsed.right-panel-collapsed:not(.workflow-panel-open) {
    grid-template-columns: 0 46px minmax(420px, 1fr) 0 !important;
  }

  #step-edit.editor-layout.design-preview-mode.left-panel-collapsed,
  #step-edit.editor-layout.style-preview-mode.left-panel-collapsed:not(.workflow-panel-open) {
    grid-template-columns: 0 minmax(420px, 1fr) var(--editor-right-width, 300px) !important;
  }

  #step-edit.editor-layout.style-preview-mode.right-panel-collapsed:not(.workflow-panel-open) {
    grid-template-columns: var(--editor-left-width, 220px) minmax(420px, 1fr) 0 !important;
  }

  #step-edit.editor-layout.style-preview-mode.left-panel-collapsed.right-panel-collapsed:not(.workflow-panel-open) {
    grid-template-columns: 0 minmax(420px, 1fr) 0 !important;
  }

  #step-edit > .thumb-panel {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #step-edit .thumb-panel #editorPagesView {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #step-edit .thumbnail-list {
    box-sizing: border-box;
    height: auto !important;
    max-height: none !important;
    padding: 0 4px 12px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  #step-edit .thumbnail-list > .thumb {
    display: grid !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto minmax(15px, auto);
    align-content: start;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #step-edit .thumbnail-list > .thumb > .thumb-title {
    position: static !important;
    min-width: 0;
    min-height: 15px;
    margin: 7px 0 0 !important;
    padding: 0 2px;
    line-height: 1.35 !important;
  }

  #step-edit .editor-layer-list {
    box-sizing: border-box;
    width: 100%;
    max-height: min(300px, 38vh);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  #step-edit .editor-layer-head {
    position: sticky;
    z-index: 2;
    top: -10px;
    min-height: 30px;
    padding: 7px 2px 5px;
    background: var(--v2-panel-soft);
  }

  #step-edit .editor-layer-item {
    box-sizing: border-box;
    width: 100%;
    grid-template-columns: 13px 24px 24px minmax(64px, 1fr) 18px 76px;
  }

  #step-edit .editor-layer-item > .layer-drag-handle { grid-column: 1; }
  #step-edit .editor-layer-item > .layer-visibility-btn { grid-column: 2; }
  #step-edit .editor-layer-item > .layer-type-dot { grid-column: 3; }
  #step-edit .editor-layer-item > .layer-title { grid-column: 4; }
  #step-edit .editor-layer-item > .layer-group-state { grid-column: 5; }
  #step-edit .editor-layer-item > .layer-order-actions { grid-column: 6; }

  #step-edit .editor-layer-item .layer-visibility-btn,
  #step-edit .editor-layer-item .layer-order-actions button {
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
  }

  body[data-active-step="edit"]:not([data-editor-workflow-stage="social"]):has(#step-edit:not(.right-panel-collapsed)) .assistant-float-launcher {
    right: calc(var(--editor-active-right-width, 300px) + 18px) !important;
    bottom: 58px !important;
  }

  body[data-active-step="edit"]:has(#step-edit.right-panel-collapsed) .assistant-float-launcher {
    right: 18px !important;
    bottom: 58px !important;
  }
}

/* Final surface clarity: modal layers stay legible and never compete with the AI launcher. */
.project-home-brand strong,
.project-recent-heading h3,
.project-home-heading h2 {
  color: var(--v2-text);
}

.style-library-card-check .fluent-icon-shell { opacity: 0; }
.style-library-card.selected .style-library-card-check .fluent-icon-shell { opacity: 1; }

.assistant-drawer:not(.embedded),
.assistant-tools-drawer,
.editor-delivery-drawer {
  background-color: var(--v2-panel) !important;
  background-image: linear-gradient(180deg, color-mix(in srgb, #fff 4%, transparent), transparent 160px) !important;
}

.editor-delivery-drawer { z-index: 1600 !important; }

.topbar { box-sizing: border-box !important; }

.layout-library-card {
  box-sizing: border-box;
  max-width: 100%;
  padding: 0;
}

.layout-library-card > *,
.layout-library-card-copy {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

#socialRegenerateBtn:not(:disabled),
#socialRegenerateBtn:not(:disabled) .button-label {
  color: #fff !important;
}

body:has(dialog[open]) #assistantFloatLauncher,
body.desktop-modal-open #assistantFloatLauncher,
body:has(#assistantToolsDrawer.open) #assistantFloatLauncher,
body:has(#deliveryDrawer.open) #assistantFloatLauncher {
  display: none !important;
}

/* The project home is a persistent shell, not a transient workflow panel.
   Keep it flush with the workspace viewport so entrance animations from the
   legacy flow panels cannot translate/fade it during theme or route changes. */
#step-create.project-start-screen {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  min-height: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

#step-create.project-start-screen > .project-home-shell {
  min-height: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* The publish workspace has five explicit stages. Keep them on one desktop
   row; the old four-column rule wrapped the last stage at 1280-1440px and
   left a large, confusing gap above the controls. */
@media (min-width: 1024px) {
  #editorWorkflowWorkspace .social-studio-v2 .social-quick-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-quick-strip > div {
    min-width: 0 !important;
  }
}

/* Keep the optional-settings disclosure inside its own grid track. Chromium
   can collapse a closed <details> grid item to its padding height here,
   leaving the 48px summary outside the box and clipped by the scrolling form. */
#newProjectPanel .new-document-form > .project-optional {
  display: block !important;
  min-height: 46px !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--v2-panel-soft) 72%, transparent) !important;
}

#newProjectPanel .new-document-form > .project-optional > summary {
  display: flex !important;
  min-height: 46px !important;
  align-items: center !important;
  gap: 8px;
  padding: 0 10px !important;
  overflow: hidden !important;
  color: var(--v2-text) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.4 !important;
  list-style: none !important;
}

#newProjectPanel .new-document-form > .project-optional > summary::-webkit-details-marker {
  display: none;
}

#newProjectPanel .new-document-form > .project-optional > summary::after {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-left: auto;
  place-items: center;
  color: var(--v2-muted);
  content: "+";
  font-size: 15px;
  font-weight: 500;
}

#newProjectPanel .new-document-form > .project-optional[open] > summary {
  border-bottom: 1px solid var(--v2-line);
}

#newProjectPanel .new-document-form > .project-optional:not([open]) {
  height: 46px !important;
}

#newProjectPanel .new-document-form > .project-optional[open] {
  height: max-content !important;
}

#newProjectPanel .new-document-form > .project-optional[open] > summary::after {
  content: "-";
}

#newProjectPanel .new-document-form > .project-optional > .form-grid {
  margin: 0 !important;
  padding: 12px 10px 10px;
}

/* The JS dock value is measured from the live assistant position. During a
   workflow transition that position can still be animating, so enforce a
   CSS safety floor that always clears the 52px launcher plus a 40px gap. */
.generation-progress {
  right: max(var(--generation-dock-right, 22px), 110px) !important;
}

body[data-active-step="edit"]:not([data-editor-workflow-stage="social"]):has(#step-edit:not(.right-panel-collapsed)) .generation-progress {
  right: max(var(--generation-dock-right, 22px), calc(var(--editor-active-right-width, 300px) + 110px)) !important;
}

/* Editable conversion fills the left workspace with a scrollable page list.
   Keep task status inside the inspector column so it cannot cover page rows. */
body[data-active-step="edit"][data-editor-workflow-stage="editable"]:has(#step-edit:not(.right-panel-collapsed)) .generation-progress {
  right: 12px !important;
  width: min(360px, calc(var(--editor-active-right-width, 300px) - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
}

/* Luxin V1: voice stays inside the existing assistant surface. */
.luxin-voice-launcher {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 3px !important;
  border-radius: 50% !important;
  background: #10191c !important;
  box-shadow: inset 0 0 0 1px rgba(111, 239, 229, .12), 0 6px 18px rgba(8, 38, 39, .2);
}

.luxin-voice-launcher:hover,
.luxin-voice-launcher:focus-visible,
.luxin-voice-launcher.enabled {
  border-color: #35c9bd !important;
  background: #0e1d20 !important;
  box-shadow: inset 0 0 0 1px rgba(111, 239, 229, .2), 0 0 0 3px rgba(28, 178, 166, .1), 0 8px 22px rgba(8, 38, 39, .26);
}

.luxin-avatar {
  position: relative;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(80, 227, 216, .58);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 54%, rgba(49, 212, 201, .22) 0 16%, transparent 17%),
    radial-gradient(circle at 50% 45%, #18383d 0 34%, #102327 55%, #081315 100%);
  box-shadow: inset 0 0 10px rgba(64, 234, 220, .2), 0 0 10px rgba(40, 208, 195, .18);
}

.luxin-avatar::before,
.luxin-avatar::after {
  position: absolute;
  width: 5px;
  height: 2px;
  top: 10px;
  border-radius: 2px;
  background: #75f1e7;
  box-shadow: 0 0 5px rgba(117, 241, 231, .8);
  content: "";
}

.luxin-avatar::before { left: 6px; transform: rotate(10deg); }
.luxin-avatar::after { right: 6px; transform: rotate(-10deg); }

.luxin-avatar-face {
  position: absolute;
  width: 14px;
  height: 12px;
  top: 7px;
  border: 1px solid rgba(77, 223, 212, .66);
  border-top-color: transparent;
  border-radius: 0 0 8px 8px;
}

.luxin-avatar > svg {
  position: absolute;
  bottom: 4px;
  width: 10px !important;
  height: 10px !important;
  color: #e1b86a !important;
  filter: drop-shadow(0 0 3px rgba(225, 184, 106, .55));
}

.luxin-voice-launcher.enabled .luxin-avatar,
.assistant-voice-status[data-state="listening"] .assistant-voice-pulse {
  animation: luxin-avatar-listening 1.4s ease-in-out infinite;
}

@keyframes luxin-avatar-listening {
  50% { transform: scale(1.04); box-shadow: inset 0 0 14px rgba(64, 234, 220, .32), 0 0 16px rgba(40, 208, 195, .34); }
}

.assistant-mark {
  overflow: visible !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: inherit !important;
}

.assistant-mark .luxin-avatar.compact {
  width: 28px;
  height: 28px;
}

.assistant-execution-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--v2-line, #d9dee7);
  background: color-mix(in srgb, #0f8c86 7%, var(--v2-panel, #fff));
}

.assistant-execution-controls.hidden { display: none !important; }
.assistant-execution-controls > div:first-child { display: grid; min-width: 0; gap: 2px; }
.assistant-execution-controls strong { color: var(--v2-text, #17202c); font-size: 11px; }
.assistant-execution-controls small { overflow: hidden; color: var(--v2-muted, #647084); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-execution-actions { display: flex; align-items: center; gap: 4px; }
.assistant-execution-actions button {
  display: inline-flex;
  min-width: 0;
  min-height: 28px;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid var(--v2-line-strong, #b9c2d2);
  border-radius: 5px;
  background: var(--v2-panel, #fff);
  color: var(--v2-text, #17202c);
  font-size: 9px;
  white-space: nowrap;
}
.assistant-execution-actions button.confirm { border-color: #0f8c86; background: #0f8c86; color: #fff; }
.assistant-execution-actions button:hover:not(:disabled) { border-color: #0f8c86; }
.assistant-execution-actions svg { width: 12px; height: 12px; }

.assistant-message.assistant-voice-live .assistant-message-content {
  position: relative;
  border: 1px solid color-mix(in srgb, #0f8c86 40%, transparent);
  background: color-mix(in srgb, #0f8c86 9%, var(--v2-panel, #fff));
}
.assistant-message.assistant-voice-live .assistant-message-content > i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 6px;
  border-radius: 50%;
  background: #0f8c86;
  animation: luxin-live-dot .8s ease-in-out infinite alternate;
}
@keyframes luxin-live-dot { to { opacity: .24; transform: scale(.7); } }

.assistant-drawer:not(.embedded),
.assistant-drawer.embedded {
  grid-template-rows: auto auto auto auto auto auto auto auto minmax(110px, 1fr) auto auto auto auto auto !important;
}
.assistant-drawer:has(> .assistant-pdf-redesign:not(.hidden)) {
  grid-template-rows: auto auto auto minmax(180px, min(44vh, 430px)) auto auto auto auto minmax(120px, 1fr) auto auto auto auto auto !important;
}
.assistant-drawer:has(> .assistant-pdf-redesign:not(.hidden)) > .assistant-brief-actions,
.assistant-drawer:has(> .assistant-pdf-redesign:not(.hidden)) > .assistant-suggestions {
  display: none !important;
}
#assistantDrawer > .assistant-header { grid-row: 1 !important; }
#assistantDrawer > .assistant-context { grid-row: 2 !important; }
#assistantDrawer > .assistant-tasks { grid-row: 3 !important; }
#assistantDrawer > .assistant-pdf-redesign { grid-row: 4 !important; }
#assistantDrawer > .assistant-recommendations { grid-row: 5 !important; }
#assistantDrawer > .assistant-service-notice { grid-row: 6 !important; }
#assistantDrawer > .assistant-voice-status { grid-row: 7 !important; }
#assistantDrawer > .assistant-execution-controls { grid-row: 8 !important; }
#assistantDrawer > .assistant-messages { grid-row: 9 !important; }
#assistantDrawer > .assistant-new-result { grid-row: 9 !important; }
#assistantDrawer > .assistant-brief-actions { grid-row: 10 !important; }
#assistantDrawer > .assistant-suggestions { grid-row: 11 !important; }
#assistantDrawer > .assistant-attachments { grid-row: 12 !important; }
#assistantDrawer > .assistant-composer { grid-row: 13 !important; }
#assistantDrawer > .assistant-composer-hint { grid-row: 14 !important; }

.assistant-pdf-redesign {
  min-width: 0;
  max-height: min(44vh, 430px);
  overflow: auto;
  padding: 9px 10px 10px;
  border-bottom: 1px solid var(--v2-line, #d9dee7);
  background: color-mix(in srgb, #0f8c86 4%, var(--v2-panel, #fff));
  scrollbar-width: thin;
}
.assistant-pdf-redesign.hidden { display: none !important; }
.assistant-pdf-redesign button,
.assistant-pdf-redesign a { font: inherit; letter-spacing: 0; }
.assistant-pdf-redesign > header {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.assistant-pdf-redesign > header > i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid color-mix(in srgb, #0f8c86 28%, var(--v2-line, #d9dee7));
  border-radius: 6px;
  background: var(--v2-panel, #fff);
  color: #0f766e;
}
.assistant-pdf-redesign > header > i svg { width: 15px; height: 15px; }
.assistant-pdf-redesign > header > span { display: grid; min-width: 0; gap: 1px; }
.assistant-pdf-redesign > header strong { overflow-wrap: anywhere; color: var(--v2-text, #17202c); font-size: 11px; }
.assistant-pdf-redesign > header small { overflow: hidden; color: var(--v2-muted, #647084); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-pdf-status {
  padding: 3px 6px;
  border: 1px solid var(--v2-line, #d9dee7);
  border-radius: 4px;
  background: var(--v2-panel, #fff);
  color: var(--v2-muted, #647084);
  font-size: 8px;
  font-style: normal;
  white-space: nowrap;
}
.assistant-pdf-status.running { border-color: color-mix(in srgb, #0f8c86 38%, var(--v2-line)); color: #0f766e; }
.assistant-pdf-status.failed, .assistant-pdf-status.needs_attention { border-color: color-mix(in srgb, #dc2626 35%, var(--v2-line)); color: #b91c1c; }
.assistant-pdf-intro,
.assistant-pdf-stage-summary { margin: 7px 0 0; color: var(--v2-muted, #647084); font-size: 9px; line-height: 1.45; }
.assistant-pdf-source,
.assistant-pdf-provider,
.assistant-pdf-manual-style {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 7px 8px;
  border: 1px solid var(--v2-line, #d9dee7);
  border-radius: 6px;
  background: var(--v2-panel, #fff);
}
.assistant-pdf-provider,
.assistant-pdf-manual-style { margin-top: 5px; }
.assistant-pdf-source svg,
.assistant-pdf-provider svg,
.assistant-pdf-manual-style svg { width: 15px; height: 15px; color: #2563eb; }
.assistant-pdf-provider svg,
.assistant-pdf-manual-style svg { color: #0f766e; }
.assistant-pdf-source span,
.assistant-pdf-provider span,
.assistant-pdf-manual-style span { display: grid; min-width: 0; gap: 1px; }
.assistant-pdf-source strong, .assistant-pdf-source small,
.assistant-pdf-provider strong, .assistant-pdf-provider small,
.assistant-pdf-manual-style strong, .assistant-pdf-manual-style small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assistant-pdf-source strong,
.assistant-pdf-provider strong,
.assistant-pdf-manual-style strong { font-size: 9px; }
.assistant-pdf-source small,
.assistant-pdf-provider small,
.assistant-pdf-manual-style small { color: var(--v2-muted, #647084); font-size: 8px; }
.assistant-pdf-progress { margin-top: 8px; }
.assistant-pdf-progress > div { height: 4px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--v2-line, #d9dee7) 75%, transparent); }
.assistant-pdf-progress > div i { display: block; height: 100%; border-radius: inherit; background: #0f8c86; transition: width .2s ease; }
.assistant-pdf-progress > span { display: flex; min-width: 0; justify-content: space-between; gap: 8px; margin-top: 4px; color: var(--v2-muted, #647084); font-size: 8px; }
.assistant-pdf-progress > span b { overflow: hidden; min-width: 0; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.assistant-pdf-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.assistant-pdf-actions button,
.assistant-pdf-delivery a {
  display: inline-flex;
  min-width: 0;
  min-height: 29px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid var(--v2-line-strong, #b9c2d2);
  border-radius: 5px;
  background: var(--v2-panel, #fff);
  color: var(--v2-text, #17202c);
  font-size: 9px;
  line-height: 1.2;
  text-decoration: none;
}
.assistant-pdf-actions button:hover:not(:disabled), .assistant-pdf-delivery a:hover { border-color: #0f8c86; }
.assistant-pdf-actions button.primary { border-color: #0f8c86; background: #0f8c86; color: #fff; }
.assistant-pdf-actions button.recommended::after { content: "推荐"; padding: 1px 3px; border-radius: 3px; background: rgb(255 255 255 / 22%); font-size: 7px; }
.assistant-pdf-actions button.danger { color: #b91c1c; }
.assistant-pdf-actions button:disabled { cursor: not-allowed; opacity: .48; }
.assistant-pdf-actions svg, .assistant-pdf-delivery svg { width: 12px; height: 12px; flex: 0 0 auto; }
.assistant-pdf-impact { display: block; width: 100%; color: var(--v2-muted, #647084); font-size: 8px; line-height: 1.4; }
.assistant-pdf-error { margin: 7px 0 0; padding: 6px 7px; border-left: 2px solid #dc2626; background: color-mix(in srgb, #dc2626 6%, transparent); color: #b91c1c; font-size: 8px; line-height: 1.45; }
.assistant-pdf-legacy { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 7px; margin-top: 8px; padding: 8px; border: 1px solid var(--v2-line, #d9dee7); border-radius: 5px; background: var(--v2-panel, #fff); }
.assistant-pdf-legacy svg { width: 15px; height: 15px; color: var(--v2-muted, #647084); }
.assistant-pdf-legacy div { display: grid; gap: 2px; }
.assistant-pdf-legacy strong { font-size: 9px; }
.assistant-pdf-legacy span { color: var(--v2-muted, #647084); font-size: 8px; line-height: 1.4; }
.assistant-pdf-review-list, .assistant-pdf-style-list { display: grid; gap: 7px; margin-top: 8px; }
.assistant-pdf-review {
  display: grid;
  grid-template-columns: minmax(88px, 36%) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--v2-line, #d9dee7);
  border-radius: 6px;
  background: var(--v2-panel, #fff);
}
.assistant-pdf-review figure { margin: 0; background: #eef1f5; }
.assistant-pdf-review img { display: block; width: 100%; height: 100%; min-height: 104px; object-fit: contain; }
.assistant-pdf-review > div { display: grid; min-width: 0; align-content: start; gap: 5px; padding: 7px; }
.assistant-pdf-review header { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.assistant-pdf-review header strong { font-size: 9px; }
.assistant-pdf-review header span { color: #b45309; font-size: 7px; }
.assistant-pdf-review.confirmed { border-color: color-mix(in srgb, #0f8c86 55%, var(--v2-line)); }
.assistant-pdf-review.confirmed header span { color: #0f766e; }
.assistant-pdf-review ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: #9a5b08; font-size: 7px; line-height: 1.35; }
.assistant-pdf-review textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  padding: 6px;
  border: 1px solid var(--v2-line-strong, #b9c2d2);
  border-radius: 4px;
  background: var(--v2-panel, #fff);
  color: var(--v2-text, #17202c);
  font: 9px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0;
  white-space: pre-wrap;
}
.assistant-pdf-block-order { display: flex; flex-wrap: wrap; gap: 3px; }
.assistant-pdf-block-order span { padding: 2px 4px; border: 1px solid var(--v2-line, #d9dee7); border-radius: 3px; color: var(--v2-muted, #647084); font-size: 7px; }
.assistant-pdf-block-warning { margin: 0; color: #b45309; font-size: 7px; line-height: 1.35; }
.assistant-pdf-review-check,
.assistant-pdf-risk-confirm { display: flex; align-items: flex-start; gap: 6px; color: var(--v2-text, #17202c); font-size: 8px; line-height: 1.4; cursor: pointer; }
.assistant-pdf-review-check input,
.assistant-pdf-risk-confirm input { width: 14px; height: 14px; flex: 0 0 14px; margin: 0; accent-color: #0f8c86; }
.assistant-pdf-risk-confirm { margin-top: 7px; padding: 7px; border: 1px solid color-mix(in srgb, #b45309 40%, var(--v2-line)); border-radius: 5px; background: color-mix(in srgb, #f59e0b 7%, var(--v2-panel)); color: #8a4b08; }
.assistant-pdf-style-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--v2-line, #d9dee7);
  border-radius: 6px;
  background: var(--v2-panel, #fff);
  cursor: pointer;
}
.assistant-pdf-style-option:has(input:checked) { border-color: #0f8c86; box-shadow: inset 2px 0 #0f8c86; }
.assistant-pdf-style-option input { width: 15px; height: 15px; margin: 1px 0 0; accent-color: #0f8c86; }
.assistant-pdf-style-option > span { display: grid; min-width: 0; gap: 4px; }
.assistant-pdf-style-option strong { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 9px; }
.assistant-pdf-style-option strong em { padding: 1px 4px; border-radius: 3px; background: #fff3c4; color: #8a5a00; font-size: 7px; font-style: normal; }
.assistant-pdf-style-option small { color: var(--v2-muted, #647084); font-size: 8px; line-height: 1.4; overflow-wrap: anywhere; }
.assistant-pdf-style-option .palette { display: flex; align-items: center; gap: 3px; }
.assistant-pdf-style-option .palette i { width: 13px; height: 5px; border: 1px solid rgb(0 0 0 / 10%); border-radius: 1px; }
.assistant-pdf-page-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.assistant-pdf-page-pair { min-width: 0; overflow: hidden; border: 1px solid var(--v2-line, #d9dee7); border-radius: 5px; background: var(--v2-panel, #fff); }
.assistant-pdf-page-pair > header { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 4px 5px; border-bottom: 1px solid var(--v2-line, #d9dee7); font-size: 7px; }
.assistant-pdf-page-pair > header span { overflow: hidden; color: var(--v2-muted, #647084); text-overflow: ellipsis; white-space: nowrap; }
.assistant-pdf-page-pair > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.assistant-pdf-page-variant { position: relative; min-width: 0; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: #edf0f4; }
.assistant-pdf-page-variant + .assistant-pdf-page-variant { border-left: 1px solid var(--v2-line, #d9dee7); }
.assistant-pdf-page-variant img { display: block; width: 100%; height: 100%; object-fit: contain; }
.assistant-pdf-page-variant > svg { position: absolute; top: 50%; left: 50%; width: 15px; height: 15px; color: #98a2b3; transform: translate(-50%, -50%); }
.assistant-pdf-page-variant figcaption { position: absolute; right: 2px; bottom: 2px; left: 2px; display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 3px; padding: 2px 3px; border-radius: 2px; background: rgb(17 24 39 / 82%); color: #fff; font-size: 6px; }
.assistant-pdf-page-variant figcaption strong,
.assistant-pdf-page-variant figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assistant-pdf-page-variant.failed { box-shadow: inset 0 0 0 2px #dc2626; }
.assistant-pdf-page-variant.running,
.assistant-pdf-page-variant.committing { box-shadow: inset 0 0 0 2px #0f8c86; }
.assistant-pdf-page-variant.warning { box-shadow: inset 0 0 0 2px #d97706; }
.assistant-pdf-export-variant { display: grid; gap: 5px; margin: 8px 0 0; padding: 0; border: 0; }
.assistant-pdf-export-variant legend { margin-bottom: 4px; color: var(--v2-text, #17202c); font-size: 9px; font-weight: 700; }
.assistant-pdf-export-variant > label { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px; padding: 7px; border: 1px solid var(--v2-line, #d9dee7); border-radius: 5px; background: var(--v2-panel, #fff); cursor: pointer; }
.assistant-pdf-export-variant > label:has(input:checked) { border-color: #0f8c86; box-shadow: inset 2px 0 #0f8c86; }
.assistant-pdf-export-variant input { width: 14px; height: 14px; margin: 1px 0 0; accent-color: #0f8c86; }
.assistant-pdf-export-variant label > span { display: grid; min-width: 0; gap: 2px; }
.assistant-pdf-export-variant strong { font-size: 9px; }
.assistant-pdf-export-variant small { color: var(--v2-muted, #647084); font-size: 7px; line-height: 1.35; }
.assistant-pdf-export-variant label.recommended strong::after { content: "推荐"; margin-left: 5px; padding: 1px 3px; border-radius: 2px; background: #e6f5f3; color: #0f766e; font-size: 6px; }
.assistant-pdf-delivery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.assistant-pdf-delivery > span.disabled { display: inline-flex; min-height: 29px; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 1px solid var(--v2-line, #d9dee7); border-radius: 5px; color: var(--v2-muted, #647084); font-size: 9px; opacity: .5; }
.assistant-pdf-restart-confirm { margin-top: 8px; padding: 7px; border: 1px solid color-mix(in srgb, #dc2626 25%, var(--v2-line)); border-radius: 6px; background: color-mix(in srgb, #dc2626 5%, var(--v2-panel)); }
.assistant-pdf-restart-confirm strong, .assistant-pdf-restart-confirm span { display: block; }
.assistant-pdf-restart-confirm strong { font-size: 9px; }
.assistant-pdf-restart-confirm span { margin-top: 3px; color: var(--v2-muted, #647084); font-size: 8px; line-height: 1.4; }

@media (max-width: 767.98px) {
  .assistant-drawer:has(> .assistant-pdf-redesign:not(.hidden)) {
    grid-template-rows: auto auto auto minmax(180px, 42vh) auto auto auto auto minmax(80px, 1fr) auto auto auto auto auto !important;
  }
  .assistant-pdf-redesign { max-height: 42vh; padding-inline: 9px; }
  .assistant-pdf-review { grid-template-columns: 1fr; }
  .assistant-pdf-review img { max-height: 180px; }
  .assistant-pdf-page-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .luxin-voice-launcher.enabled .luxin-avatar,
  .assistant-voice-status[data-state="listening"] .assistant-voice-pulse,
  .assistant-message.assistant-voice-live .assistant-message-content > i { animation: none !important; }
}

/* User-selectable application avatar. Clicking the primary mark opens settings. */
.topbar .brand-block {
  overflow: visible !important;
}

.brand-avatar-control {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  overflow: visible;
}

.brand-avatar-control .brand-mark {
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
}

.brand-avatar-control .brand-mark img,
.brand-avatar-menu-head img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.brand-avatar-control .brand-mark[aria-busy="true"] {
  cursor: wait;
  opacity: .68;
}

.brand-avatar-menu {
  position: absolute;
  top: calc(100% + 13px);
  left: 0;
  z-index: 520;
  display: grid;
  width: 224px;
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--v2-line, #d9dee7);
  border-radius: 8px;
  background: color-mix(in srgb, var(--v2-panel, #ffffff) 96%, transparent);
  box-shadow: 0 14px 32px rgba(22, 34, 45, .18);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}

.brand-avatar-menu.hidden {
  display: none !important;
}

.brand-avatar-menu-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 2px 3px 7px;
  border-bottom: 1px solid var(--v2-line, #d9dee7);
}

.brand-avatar-menu-head img {
  width: 38px;
  height: 38px;
  border: 1px solid var(--v2-line, #d9dee7);
  border-radius: 7px;
  background: #f1ecdf;
}

.brand-avatar-menu-head div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.brand-avatar-menu-head strong {
  color: var(--v2-text, #17202c);
  font-size: 12px;
  font-weight: 650;
}

.brand-avatar-menu-head small {
  overflow: hidden;
  color: var(--v2-muted, #647084);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-avatar-menu > button {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 9px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: var(--v2-text, #17202c) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 560;
  text-align: left;
  transform: none !important;
}

.brand-avatar-menu > button:hover:not(:disabled),
.brand-avatar-menu > button:focus-visible {
  background: color-mix(in srgb, #0f8c86 10%, var(--v2-panel, #ffffff)) !important;
  color: #0b746f !important;
}

.brand-avatar-menu > button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.brand-avatar-menu > button svg,
.brand-avatar-menu > button .fluent-icon,
.brand-avatar-menu > button .fluent-icon-shell {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
}

@media (max-width: 520px) {
  .brand-avatar-menu {
    position: fixed;
    top: calc(var(--v2-topbar-height, 64px) - 4px);
    left: 8px;
    width: min(224px, calc(100vw - 16px));
  }
}

/* Keep the voice and send controls in dedicated grid tracks at every density. */
#assistantDrawer > .assistant-composer {
  grid-template-columns: minmax(0, 1fr) 36px 36px !important;
}

.assistant-composer .assistant-composer-tools {
  grid-column: 1;
  grid-row: 2;
}

.assistant-composer .assistant-voice-input-btn {
  position: static;
  z-index: auto;
  display: grid;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  place-items: center;
  padding: 0 !important;
  border-radius: 7px;
  overflow: hidden;
}

.assistant-composer .assistant-voice-input-btn svg {
  width: 16px !important;
  height: 16px !important;
}

.assistant-composer .assistant-send-btn {
  grid-column: 3 !important;
  grid-row: 2;
}

.assistant-composer textarea {
  padding-right: 11px !important;
}

@media (max-width: 560px) {
  #assistantDrawer > .assistant-composer {
    grid-template-columns: minmax(0, 1fr) 34px 34px !important;
  }

  .assistant-composer .assistant-voice-input-btn,
  .assistant-composer .assistant-send-btn {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }
}

/* Design workflow control center. Kept at the end to isolate it from legacy inspector form rules. */
#step-edit.design-preview-mode .design-preview-inspector {
  gap: 14px;
  padding: 16px;
  container-type: inline-size;
}

#step-edit.design-preview-mode .design-preview-inspector > header {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding-bottom: 14px;
}

#step-edit.design-preview-mode .design-preview-inspector-icon {
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--v2-blue) 24%, var(--v2-line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--v2-blue) 10%, var(--v2-panel));
}

#step-edit.design-preview-mode .design-preview-inspector header strong {
  font-size: 13px;
  font-weight: 680;
}

#step-edit.design-preview-mode .design-preview-inspector header p {
  font-size: 10px;
  line-height: 1.45;
}

#step-edit.design-preview-mode .design-status-badge {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--v2-line);
  border-radius: 6px;
  font-size: 9px;
  font-weight: 650;
}

#step-edit.design-preview-mode .design-smart-operations {
  display: grid;
  gap: 12px;
}

#step-edit.design-preview-mode .design-smart-card {
  min-width: 0;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  background: var(--v2-panel);
  box-shadow: 0 4px 14px rgba(20, 29, 40, .05);
}

#step-edit.design-preview-mode .design-command-header,
#step-edit.design-preview-mode .design-output-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--v2-line);
  background: color-mix(in srgb, var(--v2-panel-soft) 64%, var(--v2-panel));
}

#step-edit.design-preview-mode .design-command-heading,
#step-edit.design-preview-mode .design-output-header > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

#step-edit.design-preview-mode .design-command-heading > span:last-child,
#step-edit.design-preview-mode .design-output-header > span > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

#step-edit.design-preview-mode .design-command-heading strong,
#step-edit.design-preview-mode .design-output-header strong {
  color: var(--v2-text);
  font-size: 12px;
  font-weight: 680;
}

#step-edit.design-preview-mode .design-command-heading small,
#step-edit.design-preview-mode .design-output-header small {
  overflow: hidden;
  color: var(--v2-faint);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#step-edit.design-preview-mode .design-command-icon,
#step-edit.design-preview-mode .design-output-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--v2-blue) 20%, var(--v2-line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--v2-blue) 9%, var(--v2-panel));
  color: var(--v2-blue);
}

#step-edit.design-preview-mode .design-command-icon svg,
#step-edit.design-preview-mode .design-output-icon svg {
  width: 15px;
  height: 15px;
}

#step-edit.design-preview-mode .design-command-mode-badge,
#step-edit.design-preview-mode .design-output-header > em {
  flex: 0 0 auto;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--v2-blue) 22%, var(--v2-line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--v2-blue) 7%, var(--v2-panel));
  color: var(--v2-blue);
  font-size: 9px;
  font-style: normal;
  font-weight: 650;
  white-space: nowrap;
}

#step-edit.design-preview-mode .design-reference-quickbar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--v2-line);
  background: color-mix(in srgb, var(--v2-blue) 5%, var(--v2-panel));
}

#step-edit.design-preview-mode .design-reference-quickbar > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

#step-edit.design-preview-mode .design-reference-quickbar > span > svg,
#step-edit.design-preview-mode .design-reference-quickbar > span > .fluent-icon-shell {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px;
  color: var(--v2-blue);
}

#step-edit.design-preview-mode .design-reference-quickbar > span > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

#step-edit.design-preview-mode .design-reference-quickbar strong {
  color: var(--v2-text);
  font-size: 10px;
  font-weight: 680;
}

#step-edit.design-preview-mode .design-reference-quickbar small {
  overflow: hidden;
  color: var(--v2-faint);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#step-edit.design-preview-mode .design-reference-quickbar > button {
  display: inline-flex;
  height: 31px;
  min-height: 31px !important;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid var(--v2-blue);
  border-radius: 6px;
  background: var(--v2-blue);
  color: #fff;
  font-size: 9px !important;
  font-weight: 650;
  cursor: pointer;
}

#step-edit.design-preview-mode .design-reference-quickbar > button:hover:not(:disabled) {
  filter: brightness(.96);
}

#step-edit.design-preview-mode .design-reference-quickbar > button svg {
  width: 13px;
  height: 13px;
}

#step-edit.design-preview-mode .design-control-section {
  display: grid;
  min-width: 0;
  gap: 9px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--v2-line);
}

#step-edit.design-preview-mode .design-section-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#step-edit.design-preview-mode .design-section-heading > span {
  color: var(--v2-text);
  font-size: 10px;
  font-weight: 680;
}

#step-edit.design-preview-mode .design-section-heading > small {
  color: var(--v2-faint);
  font-size: 9px;
  white-space: nowrap;
}

#step-edit.design-preview-mode .design-smart-operations input[type="radio"],
#step-edit.design-preview-mode .design-smart-operations input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

#step-edit.design-preview-mode .design-smart-mode {
  display: grid;
  gap: 6px;
}

#step-edit.design-preview-mode .design-smart-mode .design-strategy-option,
#step-edit.design-preview-mode .design-smart-chips .design-quick-option,
#step-edit.design-preview-mode .design-reference-modes .design-reference-mode-option {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#step-edit.design-preview-mode .design-strategy-option {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

#step-edit.design-preview-mode .design-strategy-content {
  display: grid;
  min-height: 56px;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--v2-line);
  border-radius: 7px;
  background: var(--v2-panel);
  color: var(--v2-muted);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

#step-edit.design-preview-mode .design-strategy-content > svg,
#step-edit.design-preview-mode .design-strategy-content > .fluent-icon-shell {
  width: 28px !important;
  height: 28px !important;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--v2-panel-soft);
  color: var(--v2-muted);
}

#step-edit.design-preview-mode .design-strategy-content > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

#step-edit.design-preview-mode .design-strategy-content strong {
  color: var(--v2-text);
  font-size: 10px;
  font-weight: 660;
}

#step-edit.design-preview-mode .design-strategy-content small {
  overflow: hidden;
  color: var(--v2-faint);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#step-edit.design-preview-mode .design-strategy-content > em {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid var(--v2-line);
  border-radius: 50%;
  color: transparent;
  font-style: normal;
}

#step-edit.design-preview-mode .design-strategy-content > em svg {
  width: 11px;
  height: 11px;
}

#step-edit.design-preview-mode .design-strategy-option:hover .design-strategy-content {
  border-color: color-mix(in srgb, var(--v2-blue) 42%, var(--v2-line));
  background: color-mix(in srgb, var(--v2-blue) 3%, var(--v2-panel));
}

#step-edit.design-preview-mode .design-strategy-option input:checked + .design-strategy-content {
  border-color: color-mix(in srgb, var(--v2-blue) 64%, var(--v2-line));
  background: color-mix(in srgb, var(--v2-blue) 8%, var(--v2-panel));
}

#step-edit.design-preview-mode .design-strategy-option input:checked + .design-strategy-content > svg,
#step-edit.design-preview-mode .design-strategy-option input:checked + .design-strategy-content > .fluent-icon-shell {
  background: color-mix(in srgb, var(--v2-blue) 14%, var(--v2-panel));
  color: var(--v2-blue);
}

#step-edit.design-preview-mode .design-strategy-option input:checked + .design-strategy-content > em {
  border-color: var(--v2-blue);
  background: var(--v2-blue);
  color: #fff;
}

#step-edit.design-preview-mode .design-strategy-option input:focus-visible + .design-strategy-content,
#step-edit.design-preview-mode .design-quick-option input:focus-visible + span,
#step-edit.design-preview-mode .design-reference-mode-option input:focus-visible + span,
#step-edit.design-preview-mode .design-reference-page-option input:focus-visible + .design-reference-page-check,
#step-edit.design-preview-mode .design-switch-row input:focus-visible + .design-switch-control {
  outline: 2px solid color-mix(in srgb, var(--v2-blue) 48%, transparent);
  outline-offset: 2px;
}

#step-edit.design-preview-mode .design-instruction-field {
  gap: 6px;
}

#step-edit.design-preview-mode .design-instruction-field textarea {
  width: 100%;
  min-height: 94px;
  padding: 10px 11px;
  border: 1px solid var(--v2-line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--v2-panel-soft) 36%, var(--v2-panel));
  color: var(--v2-text);
  font-size: 11px !important;
  line-height: 1.55;
  resize: vertical;
}

#step-edit.design-preview-mode .design-instruction-field textarea::placeholder {
  color: var(--v2-faint);
}

#step-edit.design-preview-mode .design-field-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--v2-faint);
  font-size: 9px;
  line-height: 1.4;
}

#step-edit.design-preview-mode .design-field-hint svg {
  width: 12px;
  height: 12px;
  color: var(--v2-blue);
}

#step-edit.design-preview-mode .design-smart-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

#step-edit.design-preview-mode .design-quick-option {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

#step-edit.design-preview-mode .design-quick-option > span {
  display: grid;
  min-height: 38px;
  grid-template-columns: 17px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--v2-line);
  border-radius: 6px;
  background: var(--v2-panel);
  color: var(--v2-muted);
}

#step-edit.design-preview-mode .design-quick-option > span > svg,
#step-edit.design-preview-mode .design-quick-option > span > .fluent-icon-shell {
  width: 15px !important;
  height: 15px !important;
  color: var(--v2-muted);
}

#step-edit.design-preview-mode .design-quick-option strong {
  overflow: hidden;
  color: var(--v2-text);
  font-size: 10px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#step-edit.design-preview-mode .design-quick-option em {
  display: none;
  color: var(--v2-blue);
  font-style: normal;
}

#step-edit.design-preview-mode .design-quick-option em svg {
  width: 13px;
  height: 13px;
}

#step-edit.design-preview-mode .design-quick-option:hover > span {
  border-color: color-mix(in srgb, var(--v2-blue) 36%, var(--v2-line));
}

#step-edit.design-preview-mode .design-quick-option input:checked + span {
  border-color: color-mix(in srgb, var(--v2-blue) 55%, var(--v2-line));
  background: color-mix(in srgb, var(--v2-blue) 8%, var(--v2-panel));
}

#step-edit.design-preview-mode .design-quick-option input:checked + span > svg,
#step-edit.design-preview-mode .design-quick-option input:checked + span > .fluent-icon-shell,
#step-edit.design-preview-mode .design-quick-option input:checked + span em {
  display: grid;
  color: var(--v2-blue);
}

#step-edit.design-preview-mode .design-range-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  gap: 8px;
}

#step-edit.design-preview-mode .design-range-select {
  grid-column: 1 / -1;
}

#step-edit.design-preview-mode .design-control-field {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: var(--v2-muted);
  font-size: 9px;
}

#step-edit.design-preview-mode .design-control-field input,
#step-edit.design-preview-mode .design-control-field select {
  width: 100%;
  min-width: 0;
  height: 36px;
  min-height: 36px !important;
  padding: 0 10px;
  border: 1px solid var(--v2-line);
  border-radius: 6px;
  background: var(--v2-panel);
  color: var(--v2-text);
  font-size: 11px !important;
}

#step-edit.design-preview-mode .design-image-slots-field input {
  text-align: center;
}

#step-edit.design-preview-mode .design-reference-section {
  gap: 12px;
}

#step-edit.design-preview-mode .design-reference-source-heading {
  margin-bottom: -2px;
}

#step-edit.design-preview-mode .design-external-reference-panel {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--v2-blue) 22%, var(--v2-line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--v2-blue) 4%, var(--v2-panel));
}

#step-edit.design-preview-mode .design-external-reference-panel > header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

#step-edit.design-preview-mode .design-external-reference-panel > header > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

#step-edit.design-preview-mode .design-external-reference-panel > header > span > svg,
#step-edit.design-preview-mode .design-external-reference-panel > header > span > .fluent-icon-shell {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px;
  color: var(--v2-blue);
}

#step-edit.design-preview-mode .design-external-reference-panel > header > span > span {
  display: grid;
  min-width: 0;
  gap: 1px;
}

#step-edit.design-preview-mode .design-external-reference-panel strong {
  color: var(--v2-text);
  font-size: 10px;
  font-weight: 660;
}

#step-edit.design-preview-mode .design-external-reference-panel small {
  overflow: hidden;
  color: var(--v2-faint);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#step-edit.design-preview-mode .design-external-reference-panel > header > button {
  display: inline-flex;
  height: 31px;
  min-height: 31px !important;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid var(--v2-blue);
  border-radius: 6px;
  background: var(--v2-blue);
  color: #fff;
  font-size: 9px !important;
  font-weight: 650;
  cursor: pointer;
}

#step-edit.design-preview-mode .design-external-reference-panel > header > button:hover:not(:disabled) {
  filter: brightness(.96);
}

#step-edit.design-preview-mode .design-external-reference-panel > header > button svg {
  width: 13px;
  height: 13px;
}

#step-edit.design-preview-mode .design-uploaded-reference-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

#step-edit.design-preview-mode .design-uploaded-reference {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 4 / 3;
  min-height: 0 !important;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--v2-line);
  border-radius: 6px;
  background: var(--v2-panel-soft);
  cursor: zoom-in;
}

#step-edit.design-preview-mode .design-uploaded-reference img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#step-edit.design-preview-mode .design-uploaded-reference > span {
  position: absolute;
  right: 3px;
  bottom: 3px;
  left: 3px;
  overflow: hidden;
  padding: 3px 4px;
  border-radius: 4px;
  background: rgba(18, 24, 31, .72);
  color: #fff;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#step-edit.design-preview-mode .design-reference-empty {
  display: flex;
  min-height: 54px;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px dashed var(--v2-line);
  border-radius: 6px;
  color: var(--v2-faint);
  font-size: 9px;
}

#step-edit.design-preview-mode .design-reference-empty svg {
  width: 15px;
  height: 15px;
}

#step-edit.design-preview-mode .design-external-reference-panel > p {
  margin: 0;
  color: var(--v2-faint);
  font-size: 8px;
  line-height: 1.45;
}

#step-edit.design-preview-mode .design-reference-pages {
  overflow: hidden;
  border: 1px solid var(--v2-line);
  border-radius: 7px;
  background: var(--v2-panel);
}

#step-edit.design-preview-mode .design-reference-pages > summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}

#step-edit.design-preview-mode .design-reference-pages > summary::-webkit-details-marker {
  display: none;
}

#step-edit.design-preview-mode .design-reference-pages > summary > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

#step-edit.design-preview-mode .design-reference-pages > summary > span > svg,
#step-edit.design-preview-mode .design-reference-pages > summary > span > .fluent-icon-shell {
  width: 18px !important;
  height: 18px !important;
  color: var(--v2-blue);
}

#step-edit.design-preview-mode .design-reference-pages > summary > span > span {
  display: grid;
  min-width: 0;
  gap: 1px;
}

#step-edit.design-preview-mode .design-reference-pages > summary strong {
  color: var(--v2-text);
  font-size: 10px;
  font-weight: 660;
}

#step-edit.design-preview-mode .design-reference-pages > summary small {
  color: var(--v2-faint);
  font-size: 9px;
}

#step-edit.design-preview-mode .design-reference-pages > summary > em {
  min-width: 42px;
  padding: 4px 6px;
  border-radius: 5px;
  background: var(--v2-panel-soft);
  color: var(--v2-muted);
  font-size: 9px;
  font-style: normal;
  text-align: center;
}

#step-edit.design-preview-mode .design-reference-page-list {
  display: grid;
  max-height: 220px;
  gap: 4px;
  padding: 7px;
  overflow: auto;
  border-top: 1px solid var(--v2-line);
  background: color-mix(in srgb, var(--v2-panel-soft) 45%, var(--v2-panel));
}

#step-edit.design-preview-mode .design-reference-page-option {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 36px;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 5px;
  cursor: pointer;
}

#step-edit.design-preview-mode .design-reference-page-option:hover {
  background: color-mix(in srgb, var(--v2-blue) 6%, var(--v2-panel));
}

#step-edit.design-preview-mode .design-reference-page-check {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid var(--v2-line);
  border-radius: 4px;
  background: var(--v2-panel);
  color: transparent;
}

#step-edit.design-preview-mode .design-reference-page-check svg {
  width: 11px;
  height: 11px;
}

#step-edit.design-preview-mode .design-reference-page-option input:checked + .design-reference-page-check {
  border-color: var(--v2-blue);
  background: var(--v2-blue);
  color: #fff;
}

#step-edit.design-preview-mode .design-reference-page-copy {
  display: grid;
  min-width: 0;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}

#step-edit.design-preview-mode .design-reference-page-copy b {
  color: var(--v2-blue);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

#step-edit.design-preview-mode .design-reference-page-copy > span {
  overflow: hidden;
  color: var(--v2-text);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#step-edit.design-preview-mode .design-reference-dimensions {
  display: grid;
  gap: 8px;
}

#step-edit.design-preview-mode .design-reference-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

#step-edit.design-preview-mode .design-reference-mode-option {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

#step-edit.design-preview-mode .design-reference-mode-option > span {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 5px;
  border: 1px solid var(--v2-line);
  border-radius: 6px;
  background: var(--v2-panel);
  color: var(--v2-muted);
}

#step-edit.design-preview-mode .design-reference-mode-option svg,
#step-edit.design-preview-mode .design-reference-mode-option .fluent-icon-shell {
  width: 13px !important;
  height: 13px !important;
}

#step-edit.design-preview-mode .design-reference-mode-option strong {
  overflow: hidden;
  font-size: 9px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#step-edit.design-preview-mode .design-reference-mode-option input:checked + span {
  border-color: color-mix(in srgb, var(--v2-blue) 52%, var(--v2-line));
  background: color-mix(in srgb, var(--v2-blue) 9%, var(--v2-panel));
  color: var(--v2-blue);
}

#step-edit.design-preview-mode .design-style-guard {
  display: grid;
  gap: 6px;
}

#step-edit.design-preview-mode .design-switch-row {
  position: relative;
  display: grid;
  min-height: 46px;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border: 1px solid var(--v2-line);
  border-radius: 7px;
  background: var(--v2-panel);
  cursor: pointer;
}

#step-edit.design-preview-mode .design-switch-control {
  position: relative;
  width: 30px;
  height: 18px;
  border: 1px solid var(--v2-line);
  border-radius: 9px;
  background: var(--v2-panel-strong);
  transition: background-color .15s ease, border-color .15s ease;
}

#step-edit.design-preview-mode .design-switch-control::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--v2-panel);
  box-shadow: 0 1px 3px rgba(20, 29, 40, .2);
  transition: transform .15s ease;
}

#step-edit.design-preview-mode .design-switch-row input:checked + .design-switch-control {
  border-color: var(--v2-blue);
  background: var(--v2-blue);
}

#step-edit.design-preview-mode .design-switch-row input:checked + .design-switch-control::after {
  transform: translateX(12px);
}

#step-edit.design-preview-mode .design-switch-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

#step-edit.design-preview-mode .design-switch-copy strong {
  color: var(--v2-text);
  font-size: 10px;
  font-weight: 640;
}

#step-edit.design-preview-mode .design-switch-copy small {
  overflow: hidden;
  color: var(--v2-faint);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#step-edit.design-preview-mode .design-smart-actions {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr);
  gap: 8px;
  padding: 13px 14px;
}

#step-edit.design-preview-mode .design-secondary-button,
#step-edit.design-preview-mode .design-primary-button {
  display: inline-flex;
  min-width: 0;
  height: 38px;
  min-height: 38px !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 10px !important;
  font-weight: 680;
  cursor: pointer;
}

#step-edit.design-preview-mode .design-secondary-button {
  border: 1px solid var(--v2-line);
  background: var(--v2-panel);
  color: var(--v2-text);
}

#step-edit.design-preview-mode .design-primary-button {
  border: 1px solid var(--v2-blue);
  background: var(--v2-blue);
  color: #fff;
}

#step-edit.design-preview-mode .design-secondary-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--v2-blue) 40%, var(--v2-line));
  background: color-mix(in srgb, var(--v2-blue) 6%, var(--v2-panel));
  color: var(--v2-blue);
}

#step-edit.design-preview-mode .design-primary-button:hover:not(:disabled) {
  filter: brightness(.96);
}

#step-edit.design-preview-mode .design-secondary-button svg,
#step-edit.design-preview-mode .design-primary-button svg {
  width: 14px;
  height: 14px;
}

#step-edit.design-preview-mode .design-secondary-button:disabled,
#step-edit.design-preview-mode .design-primary-button:disabled {
  cursor: not-allowed;
  opacity: .46;
}

#step-edit.design-preview-mode .design-composition-block {
  display: grid;
  gap: 9px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--v2-line);
  background: color-mix(in srgb, var(--v2-panel-soft) 48%, var(--v2-panel));
}

#step-edit.design-preview-mode .design-composition-block > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#step-edit.design-preview-mode .design-composition-block > div:first-child > span {
  display: grid;
  gap: 1px;
}

#step-edit.design-preview-mode .design-composition-block strong {
  color: var(--v2-text);
  font-size: 10px;
  font-weight: 660;
}

#step-edit.design-preview-mode .design-composition-block small {
  color: var(--v2-faint);
  font-size: 9px;
}

#step-edit.design-preview-mode .design-composition-block > div:first-child > svg,
#step-edit.design-preview-mode .design-composition-block > div:first-child > .fluent-icon-shell {
  width: 15px !important;
  height: 15px !important;
  color: var(--v2-muted);
}

#step-edit.design-preview-mode .design-composition-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

#step-edit.design-preview-mode .design-composition-actions button {
  display: inline-flex;
  min-width: 0;
  height: 34px;
  min-height: 34px !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--v2-line);
  border-radius: 6px;
  background: var(--v2-panel);
  color: var(--v2-text);
  font-size: 9px !important;
  font-weight: 630;
}

#step-edit.design-preview-mode .design-composition-actions button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--v2-blue) 38%, var(--v2-line));
  color: var(--v2-blue);
}

#step-edit.design-preview-mode .design-composition-actions svg {
  width: 13px;
  height: 13px;
}

#step-edit.design-preview-mode .editable-shortcuts {
  padding-bottom: 4px;
}

#step-edit.design-preview-mode .design-output-actions {
  display: grid;
  gap: 0;
}

#step-edit.design-preview-mode .design-output-action {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 55px !important;
  grid-template-columns: 28px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--v2-line);
  border-radius: 0;
  background: transparent;
  color: var(--v2-muted);
  text-align: left;
  cursor: pointer;
}

#step-edit.design-preview-mode .design-output-action:last-child {
  border-bottom: 0;
}

#step-edit.design-preview-mode .design-output-action:hover:not(:disabled) {
  background: color-mix(in srgb, var(--v2-blue) 6%, var(--v2-panel));
}

#step-edit.design-preview-mode .design-output-action > svg:first-child,
#step-edit.design-preview-mode .design-output-action > .fluent-icon-shell:first-child {
  display: grid;
  width: 28px !important;
  height: 28px !important;
  place-items: center;
  border-radius: 6px;
  background: var(--v2-panel-soft);
  color: var(--v2-blue);
}

#step-edit.design-preview-mode .design-output-action > .fluent-icon-shell:first-child svg,
#step-edit.design-preview-mode .design-output-action > svg:first-child {
  color: inherit !important;
  stroke: currentColor;
}

#step-edit.design-preview-mode .design-output-action > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

#step-edit.design-preview-mode .design-output-action strong {
  color: var(--v2-text);
  font-size: 10px;
  font-weight: 660;
}

#step-edit.design-preview-mode .design-output-action small {
  overflow: hidden;
  color: var(--v2-faint);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#step-edit.design-preview-mode .design-output-action > svg:last-child,
#step-edit.design-preview-mode .design-output-action > .fluent-icon-shell:last-child {
  width: 13px !important;
  height: 13px !important;
  color: var(--v2-faint);
}

#step-edit.design-preview-mode .design-output-action.danger > svg:first-child,
#step-edit.design-preview-mode .design-output-action.danger > .fluent-icon-shell:first-child {
  background: color-mix(in srgb, var(--v2-red) 9%, var(--v2-panel));
  color: var(--v2-red);
}

#step-edit.design-preview-mode #designCurrentPageActionBtn,
#step-edit.design-preview-mode #applyCurrentPageDesignBtn,
#step-edit.design-preview-mode #designBatchMenu {
  display: none !important;
}

#step-edit.design-preview-mode .design-region-tools {
  gap: 9px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  background: var(--v2-panel);
}

#step-edit.design-preview-mode .design-region-prompt-label textarea {
  min-height: 78px;
  padding: 9px 10px;
  border-radius: 7px;
  font-size: 10px !important;
}

@media (min-width: 1024px) {
  #step-edit.editor-layout.design-preview-mode {
    grid-template-columns: var(--editor-left-width, 176px) minmax(420px, 1fr) max(var(--editor-right-width, 300px), 372px) !important;
  }

  #step-edit.editor-layout.design-preview-mode.left-panel-collapsed {
    grid-template-columns: 0 minmax(420px, 1fr) max(var(--editor-right-width, 300px), 372px) !important;
  }

  body:has(#step-edit.design-preview-mode) .assistant-float-launcher {
    right: calc(max(var(--editor-right-width, 300px), 372px) + 18px) !important;
  }
}

@container (max-width: 330px) {
  #step-edit.design-preview-mode .design-smart-chips,
  #step-edit.design-preview-mode .design-reference-modes,
  #step-edit.design-preview-mode .design-composition-actions,
  #step-edit.design-preview-mode .design-smart-actions {
    grid-template-columns: 1fr;
  }

  #step-edit.design-preview-mode .design-range-layout {
    grid-template-columns: minmax(0, 1fr) 72px;
  }
}

@media (max-width: 1023.98px) {
  body.mobile-inspector-open #step-edit.design-preview-mode > .inspector {
    background: var(--v2-panel) !important;
  }

  body.mobile-inspector-open:has(#step-edit.design-preview-mode) .assistant-float-launcher {
    display: none !important;
  }

  body.mobile-inspector-open #step-edit.design-preview-mode > .thumb-panel {
    display: none !important;
  }

  #step-edit.design-preview-mode .design-preview-inspector {
    width: min(100%, 520px);
    margin: 0 auto;
    padding: 14px 14px 28px;
  }
}

/* V6 desktop cascade authority: keep legacy preproject rules from reopening
   spacing and nested-card treatments later in this stylesheet. */
@media (min-width: 981px) {
  #newProjectPanel[open] {
    background: var(--v2-bg) !important;
  }

  #newProjectPanel .new-document-head {
    min-height: 70px;
    grid-template-columns: minmax(340px, .85fr) minmax(0, 1.15fr) 36px;
    gap: 20px;
    padding: 8px clamp(28px, 3vw, 48px);
    background: var(--v2-panel);
    box-shadow: none;
    backdrop-filter: none;
  }

  #newProjectPanel .preproject-workflow-path span {
    padding: 5px 6px;
    border-radius: 5px;
    font-size: 9px;
  }

  #newProjectPanel .preproject-workflow-path span.active {
    padding: 5px 8px;
    border-radius: 6px;
  }

  #newProjectPanel .preproject-project-head {
    min-height: 58px;
    padding: 9px clamp(28px, 3vw, 48px);
  }

  #newProjectPanel .preproject-project-head > .preproject-project-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
  }

  #newProjectPanel .preproject-project-head > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 9px;
  }

  #newProjectPanel .preproject-project-head > div:first-child > strong {
    font-size: 13px;
    letter-spacing: 0;
  }

  #newProjectPanel .preproject-target-control,
  #newProjectPanel #preprojectAddFilesBtn {
    min-height: 34px !important;
    border-radius: 7px !important;
  }

  #newProjectPanel .preproject-target-control select {
    min-width: 66px;
    height: 32px;
  }

  #newProjectPanel .new-document-form {
    max-width: 1440px;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    gap: 14px;
    padding: 18px clamp(28px, 3vw, 48px) 28px;
  }

  #newProjectPanel .smart-project-brief textarea {
    min-height: 112px;
    padding: 12px 13px;
    border-color: var(--v2-line);
    border-radius: 7px;
    background: color-mix(in srgb, var(--v2-panel) 96%, var(--v2-bg));
    font-size: 12px;
    box-shadow: none;
  }

  #newProjectPanel .smart-project-detection {
    min-height: 112px;
    gap: 10px;
    padding: 14px 16px;
    border-color: var(--v2-line);
    border-radius: 7px;
    background: color-mix(in srgb, var(--v2-panel) 82%, var(--v2-bg));
    box-shadow: none;
  }

  #newProjectPanel .new-project-category-context {
    grid-template-columns: minmax(350px, .88fr) minmax(430px, 1.12fr);
    gap: 0 24px;
    padding: 4px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #newProjectPanel .new-project-category-head {
    margin-bottom: 14px;
    padding: 0 0 11px;
    border-bottom: 1px solid var(--v2-line);
  }

  #newProjectPanel .new-project-category-head h3 {
    font-size: 18px;
  }

  #newProjectPanel .new-project-category-head p {
    font-size: 10px;
  }

  #newProjectPanel .design-workspace-config {
    padding: 0 24px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #newProjectPanel .new-project-category-fields {
    gap: 10px 12px;
    padding: 0 0 0 24px;
    border-left: 1px solid var(--v2-line);
  }

  #newProjectPanel .design-workspace-preset-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  #newProjectPanel .design-workspace-preset {
    min-height: 56px;
    padding: 9px 10px;
    border-radius: 6px;
    box-shadow: none;
  }

  #newProjectPanel .design-workspace-preset.selected {
    box-shadow: inset 3px 0 var(--v2-blue);
  }

  #newProjectPanel .design-workspace-style {
    width: 112px;
    min-width: 112px;
    border-radius: 6px;
  }

  #newProjectPanel .new-project-category-field input,
  #newProjectPanel .new-project-category-field select,
  #newProjectPanel .new-project-category-field textarea {
    min-height: 38px;
    border-radius: 6px !important;
    font-size: 11px;
  }

  #newProjectPanel .design-workspace-readiness,
  #newProjectPanel .design-workspace-summary {
    margin-top: 18px;
    padding: 16px 24px 0 0;
    border-top: 1px solid var(--v2-line);
    border-radius: 0;
    background: transparent;
  }

  #newProjectPanel .design-workspace-summary {
    padding-right: 0;
    padding-left: 24px;
    border-left: 1px solid var(--v2-line);
  }

  #newProjectPanel .new-project-category-output {
    margin-top: 18px;
    border-radius: 6px !important;
  }

  #newProjectPanel .preproject-project-panel > .new-project-actions {
    min-height: 60px;
    padding: 8px clamp(28px, 3vw, 48px);
  }

  #newProjectPanel .preproject-project-panel > .new-project-actions > button {
    min-height: 40px;
    padding-inline: 18px;
    border-radius: 7px;
    font-size: 11px;
  }
}

/* Preproject section anatomy V7: explicit desktop-only business groups. */
@media (min-width: 981px) {
  #newProjectPanel .preproject-section-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
  }

  #newProjectPanel .preproject-section-index {
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--v2-blue) 30%, var(--v2-line));
    border-radius: 6px;
    background: color-mix(in srgb, var(--v2-blue) 9%, var(--v2-panel));
    color: var(--v2-blue);
    font-size: 9px;
    font-weight: 750;
  }

  #newProjectPanel .preproject-section-heading > div {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  #newProjectPanel .preproject-section-heading strong {
    color: var(--v2-text);
    font-size: 11px;
    line-height: 1.25;
  }

  #newProjectPanel .preproject-section-heading small {
    overflow: hidden;
    color: var(--v2-faint);
    font-size: 9px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #newProjectPanel .new-document-form > .preproject-intake-head {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 34px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--v2-line);
  }

  body.design-category-new-project #newProjectPanel .new-document-form > label.smart-project-brief,
  #newProjectPanel .new-document-form > .smart-project-brief {
    grid-column: 1 !important;
    grid-row: 2;
  }

  #newProjectPanel .new-document-form > .smart-project-detection {
    grid-column: 2 !important;
    grid-row: 2;
  }

  #newProjectPanel .new-document-form > .new-project-category-context {
    grid-row: 3;
  }

  #newProjectPanel .new-project-category-head {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #newProjectPanel .preproject-direction-head {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 14px;
    padding: 0 24px 10px 0;
    border-bottom: 1px solid var(--v2-line);
  }

  #newProjectPanel .preproject-spec-head {
    grid-column: 2;
    grid-row: 2;
    margin-bottom: 14px;
    padding: 0 0 10px 24px;
    border-bottom: 1px solid var(--v2-line);
    border-left: 1px solid var(--v2-line);
  }

  #newProjectPanel .preproject-spec-head.full {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
  }

  #newProjectPanel .design-workspace-config {
    grid-column: 1;
    grid-row: 3;
  }

  #newProjectPanel .new-project-category-fields {
    grid-column: 2;
    grid-row: 3;
  }

  body[data-new-design-category="ppt"] #newProjectPanel .new-project-category-fields {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
  }

  #newProjectPanel .preproject-check-head {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--v2-line);
  }

  #newProjectPanel .design-workspace-readiness {
    grid-column: 1;
    grid-row: 5;
    margin-top: 12px;
    padding: 12px 24px 0 0;
    border-top: 0;
  }

  #newProjectPanel .design-workspace-summary {
    grid-column: 2;
    grid-row: 5;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 0;
  }

  #newProjectPanel .new-project-category-output {
    grid-column: 1 / -1;
    grid-row: 6;
  }

  body[data-new-design-category="ppt"] #newProjectPanel .new-project-category-output {
    grid-row: 4;
  }
}

@media (max-width: 980px) {
  #newProjectPanel .preproject-section-heading {
    display: none;
  }
}

/* Glass surfaces establish fixed-position containing blocks. This rule must
   follow the global glass layer so creation dialogs remain viewport-centered. */
#step-create:has(#smartCreateSpecPanel:not(.hidden), #smartCreatePreferencePanel:not(.hidden), #smartCreateColorPanel:not(.hidden), #smartCreateColorPicker:not(.hidden)),
.smart-create-composer:has(#smartCreateSpecPanel:not(.hidden), #smartCreatePreferencePanel:not(.hidden), #smartCreateColorPanel:not(.hidden), #smartCreateColorPicker:not(.hidden)) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.assistant-composer-mode.assistant-output-mode select { max-width: 148px !important; }
@media (max-width: 760px) {
  .assistant-composer-mode.assistant-output-mode select { max-width: 116px !important; }
}

/* Conversation navigation: keep history and projects available without taking over the chat. */
.assistant-drawer:not(.embedded) {
  width: min(720px, calc(100vw - 24px)) !important;
}
.assistant-side-nav {
  position: absolute;
  z-index: 4;
  top: 54px;
  bottom: 0;
  left: 0;
  width: 184px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 10px;
  border-right: 1px solid var(--v2-line, #d9dee7);
  background: color-mix(in srgb, var(--v2-panel-soft, #f7f8fa) 94%, transparent);
}
.assistant-new-conversation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--v2-blue, #2374e1) 35%, var(--v2-line, #d9dee7));
  border-radius: 7px;
  background: var(--v2-panel, #fff);
  color: var(--v2-text, #202124);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}
.assistant-new-conversation:hover { border-color: var(--v2-blue, #2374e1); color: var(--v2-blue, #2374e1); }
.assistant-new-conversation svg { width: 14px; height: 14px; }
.assistant-side-tabs { display: grid; gap: 3px; }
.assistant-side-tabs button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 31px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--v2-muted, #667085);
  font: inherit;
  font-size: 10px;
  text-align: left;
  cursor: pointer;
}
.assistant-side-tabs button:hover { background: var(--v2-panel-strong, #eceff3); color: var(--v2-text, #202124); }
.assistant-side-tabs button.active { background: color-mix(in srgb, var(--v2-blue, #2374e1) 11%, transparent); color: var(--v2-blue, #2374e1); font-weight: 650; }
.assistant-side-tabs svg { width: 14px; height: 14px; }
.assistant-side-panel { min-height: 0; overflow: auto; scrollbar-width: thin; }
.assistant-side-panel.hidden { display: none !important; }
.assistant-side-empty { padding: 14px 7px; color: var(--v2-faint, #98a2b3); font-size: 10px; line-height: 1.55; }
.assistant-side-history-item,
.assistant-side-project-item {
  display: block;
  width: 100%;
  margin: 0 0 3px;
  padding: 8px 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--v2-muted, #667085);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.assistant-side-history-item:hover,
.assistant-side-project-item:hover,
.assistant-side-project-item.current { background: var(--v2-panel-strong, #eceff3); color: var(--v2-text, #202124); }
.assistant-side-history-item strong,
.assistant-side-project-item strong { display: block; overflow: hidden; color: inherit; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.assistant-side-history-item small,
.assistant-side-project-item small { display: block; margin-top: 3px; overflow: hidden; color: var(--v2-faint, #98a2b3); font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
#assistantDrawer > :not(.assistant-header):not(.assistant-side-nav) { margin-left: 184px; }
#assistantDrawer > .assistant-side-nav { margin-left: 0; }
#assistantDrawer > .assistant-context { width: auto; }
#assistantDrawer > .assistant-composer { margin-right: 12px !important; }

@media (max-width: 760px) {
  .assistant-drawer:not(.embedded) { width: calc(100vw - 12px) !important; right: 6px !important; }
  .assistant-side-nav,
  .assistant-drawer.embedded .assistant-side-nav {
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 8px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--v2-line, #d9dee7) !important;
    background: var(--v2-panel-soft, #f7f8fa) !important;
  }
  .assistant-new-conversation { min-height: 30px !important; }
  .assistant-side-tabs { grid-column: 2 !important; grid-row: 1 !important; grid-template-columns: 1fr 1fr !important; gap: 3px !important; }
  .assistant-side-tabs button { justify-content: center !important; min-height: 30px !important; padding-inline: 4px !important; font-size: 9px !important; }
  .assistant-side-tabs button span,
  .assistant-new-conversation span { font-size: 9px; }
  .assistant-side-panel { grid-column: 1 / -1 !important; grid-row: 2 !important; max-height: 128px !important; }
  #assistantDrawer > :not(.assistant-header):not(.assistant-side-nav) { margin-left: 0 !important; }
  #assistantDrawer > .assistant-side-nav { margin-left: 0 !important; }
  #assistantDrawer > .assistant-header { grid-row: 1 !important; }
  #assistantDrawer > .assistant-side-nav { grid-row: 2 !important; }
  #assistantDrawer > .assistant-context { grid-row: 3 !important; }
  #assistantDrawer > .assistant-tasks { grid-row: 4 !important; }
  #assistantDrawer > .assistant-pdf-redesign { grid-row: 5 !important; }
  #assistantDrawer > .assistant-recommendations { grid-row: 6 !important; }
  #assistantDrawer > .assistant-service-notice { grid-row: 7 !important; }
  #assistantDrawer > .assistant-voice-status { grid-row: 8 !important; }
  #assistantDrawer > .assistant-execution-controls { grid-row: 9 !important; }
  #assistantDrawer > .assistant-messages { grid-row: 10 !important; }
  #assistantDrawer > .assistant-new-result { grid-row: 10 !important; }
  #assistantDrawer > .assistant-brief-actions { grid-row: 11 !important; }
  #assistantDrawer > .assistant-suggestions { grid-row: 12 !important; }
  #assistantDrawer > .assistant-attachments { grid-row: 13 !important; }
  #assistantDrawer > .assistant-composer { grid-row: 14 !important; }
  #assistantDrawer > .assistant-composer-hint { grid-row: 15 !important; }
  .assistant-drawer:not(.embedded), .assistant-drawer.embedded { grid-template-rows: auto auto auto auto auto auto auto auto auto minmax(110px, 1fr) auto auto auto auto auto !important; }
}

@media (min-width: 761px) {
  .assistant-drawer.embedded .assistant-side-nav { top: 54px; }
}

/* Embedded assistants live in narrow workbench panes even on a wide monitor. */
.assistant-drawer.embedded {
  grid-template-rows: auto auto auto auto auto auto auto auto auto minmax(110px, 1fr) auto auto auto auto auto !important;
}
.assistant-drawer.embedded .assistant-side-nav {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 6px !important;
  padding: 8px !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--v2-line, #d9dee7) !important;
  background: var(--v2-panel-soft, #f7f8fa) !important;
}
.assistant-drawer.embedded .assistant-side-tabs { grid-column: 2 !important; grid-row: 1 !important; grid-template-columns: 1fr 1fr !important; gap: 3px !important; }
.assistant-drawer.embedded .assistant-side-tabs button { justify-content: center !important; min-height: 30px !important; padding-inline: 4px !important; font-size: 9px !important; }
.assistant-drawer.embedded .assistant-side-panel { grid-column: 1 / -1 !important; grid-row: 2 !important; max-height: 128px !important; }
.assistant-drawer.embedded > :not(.assistant-header):not(.assistant-side-nav) { margin-left: 0 !important; }
.assistant-drawer.embedded > .assistant-header { grid-row: 1 !important; }
.assistant-drawer.embedded > .assistant-side-nav { grid-row: 2 !important; }
.assistant-drawer.embedded > .assistant-context { grid-row: 3 !important; }
.assistant-drawer.embedded > .assistant-tasks { grid-row: 4 !important; }
.assistant-drawer.embedded > .assistant-pdf-redesign { grid-row: 5 !important; }
.assistant-drawer.embedded > .assistant-recommendations { grid-row: 6 !important; }
.assistant-drawer.embedded > .assistant-service-notice { grid-row: 7 !important; }
.assistant-drawer.embedded > .assistant-voice-status { grid-row: 8 !important; }
.assistant-drawer.embedded > .assistant-execution-controls { grid-row: 9 !important; }
.assistant-drawer.embedded > .assistant-messages { grid-row: 10 !important; }
.assistant-drawer.embedded > .assistant-new-result { grid-row: 10 !important; }
.assistant-drawer.embedded > .assistant-brief-actions { grid-row: 11 !important; }
.assistant-drawer.embedded > .assistant-suggestions { grid-row: 12 !important; }
.assistant-drawer.embedded > .assistant-attachments { grid-row: 13 !important; }
.assistant-drawer.embedded > .assistant-composer { grid-row: 14 !important; margin-left: 12px !important; }
.assistant-drawer.embedded > .assistant-composer-hint { grid-row: 15 !important; }

/* Keep every floating-assistant control inside short desktop work areas. */
.assistant-drawer:not(.embedded) > .assistant-tasks:empty,
.assistant-drawer:not(.embedded) > .assistant-composer-hint {
  display: none !important;
}

@media (min-width: 1024px) {
  #assistantDrawer:not(.embedded) > .assistant-composer {
    min-height: 82px !important;
    grid-template-rows: minmax(34px, auto) 32px !important;
    gap: 3px 7px !important;
    padding: 7px 8px 6px !important;
  }

  #assistantDrawer:not(.embedded) .assistant-composer-tools {
    height: 32px !important;
    gap: 5px !important;
  }

  #assistantDrawer:not(.embedded) .assistant-composer .assistant-voice-input-btn,
  #assistantDrawer:not(.embedded) .assistant-composer .assistant-send-btn {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }
}

/* Fixed-height guard for the redesigned conversation surface. */
#assistantPdfRedesignFileInput { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 1px !important; min-height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.assistant-brief-summary { max-height: 112px !important; overflow: auto !important; }
.assistant-brief-summary-details { max-height: 106px !important; }
.assistant-brief-summary-body { max-height: 68px !important; overflow: auto !important; }
.assistant-design-hub { max-height: 154px !important; overflow: auto !important; }
.assistant-design-hub-body { max-height: 126px !important; overflow: auto !important; }
.assistant-copy-mode-btn { min-height: 36px !important; }
.assistant-quick-tools-panel { max-height: 108px; overflow: auto; }
.assistant-messages { min-height: 120px !important; }

/* Final conversation surface overrides. Keep this layer last so legacy glass
   and compact-layout rules cannot make tools transparent or overlap. */
.assistant-drawer:not(.embedded),
.assistant-drawer.embedded {
  grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto minmax(180px, 1fr) auto auto auto auto auto !important;
}
#assistantDrawer > .assistant-header { grid-row: 1 !important; }
#assistantDrawer > .assistant-side-nav { grid-row: 2 !important; }
#assistantDrawer > .assistant-current-taskbar { grid-row: 3 !important; }
#assistantDrawer > .assistant-context { grid-row: 4 !important; }
#assistantDrawer > .assistant-brief-summary { grid-row: 5 !important; }
#assistantDrawer > .assistant-design-hub { grid-row: 6 !important; }
#assistantDrawer > .assistant-tasks { grid-row: 7 !important; }
#assistantDrawer > .assistant-pdf-redesign { grid-row: 8 !important; }
#assistantDrawer > .assistant-recommendations { grid-row: 9 !important; }
#assistantDrawer > .assistant-service-notice { grid-row: 10 !important; }
#assistantDrawer > .assistant-voice-status { grid-row: 11 !important; }
#assistantDrawer > .assistant-execution-controls { grid-row: 12 !important; }
#assistantDrawer > .assistant-image-generation-progress { grid-row: 13 !important; }
#assistantDrawer > .assistant-messages { grid-row: 14 !important; }
#assistantDrawer > .assistant-new-result { grid-row: 14 !important; }
#assistantDrawer > .assistant-new-result:not(.hidden) {
  align-self: end !important;
  justify-self: center !important;
  position: relative !important;
  right: auto !important;
  bottom: 10px !important;
  z-index: 12 !important;
  pointer-events: auto !important;
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  justify-content: center !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 22px rgba(20, 42, 78, .22) !important;
}
#assistantDrawer > .assistant-new-result .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
#assistantDrawer > .assistant-brief-actions { grid-row: 15 !important; }
#assistantDrawer > .assistant-suggestions { grid-row: 16 !important; }
#assistantDrawer > .assistant-attachments { grid-row: 17 !important; }
#assistantDrawer > .assistant-composer { grid-row: 18 !important; }
#assistantDrawer > .assistant-composer-hint { grid-row: 19 !important; }

.assistant-design-hub { min-width: 0; padding: 10px 12px; border-bottom: 1px solid var(--v2-line, #d7dee8); background: var(--v2-panel-soft, #f3f6fa) !important; color: var(--v2-text, #162033); }
.assistant-design-hub-head, .assistant-design-hub-head > div, .assistant-copy-mode, .assistant-design-hub-meta, .assistant-quick-tools-btn { display: flex; min-width: 0; align-items: center; }
.assistant-design-hub-head { justify-content: space-between; gap: 8px; }
.assistant-design-hub-head > div { gap: 8px; }
.assistant-design-hub-head > div > svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--v2-blue, #2563eb); }
.assistant-design-hub-head span { display: grid; min-width: 0; gap: 2px; }
.assistant-design-hub-head strong { color: var(--v2-text, #162033); font-size: 11px; }
.assistant-design-hub-head small { overflow: hidden; color: var(--v2-muted, #64748b); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-design-hub-body { display: grid; gap: 8px; margin-top: 8px; }
.assistant-design-hub-body.hidden { display: none !important; }
.assistant-copy-mode { gap: 6px; }
.assistant-control-label { flex: 0 0 auto; color: var(--v2-muted, #64748b); font-size: 9px; }
.assistant-copy-mode-btn { display: flex; min-width: 0; flex: 1 1 0; align-items: center; gap: 6px; min-height: 42px; padding: 5px 8px; border: 1px solid var(--v2-line, #d7dee8); border-radius: 6px; background: var(--v2-panel, #fff) !important; color: var(--v2-muted, #64748b); cursor: pointer; text-align: left; }
.assistant-copy-mode-btn:hover { border-color: var(--v2-blue, #2563eb); }
.assistant-copy-mode-btn.active { border-color: var(--v2-blue, #2563eb); background: var(--neutral-accent-soft) !important; color: var(--v2-blue, #2563eb); }
.assistant-copy-mode-btn > svg { width: 16px; height: 16px; flex: 0 0 16px; }
.assistant-copy-mode-btn span { display: grid; min-width: 0; gap: 1px; }
.assistant-copy-mode-btn strong { overflow: hidden; color: var(--v2-text, #162033); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-copy-mode-btn small { overflow: hidden; color: var(--v2-faint, #94a3b8); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-design-hub-meta { gap: 5px; overflow: auto hidden; scrollbar-width: none; }
.assistant-design-hub-meta::-webkit-scrollbar { display: none; }
.assistant-design-hub-meta span { flex: 0 0 auto; padding: 3px 6px; border: 1px solid var(--v2-line, #d7dee8); border-radius: 4px; background: var(--v2-panel, #fff) !important; color: var(--v2-muted, #64748b); font-size: 8px; }
.assistant-quick-tools-wrap { position: relative; }
.assistant-quick-tools-btn { width: 100%; justify-content: center; gap: 5px; min-height: 30px; border: 1px solid var(--v2-line, #d7dee8); border-radius: 5px; background: var(--v2-panel, #fff) !important; color: var(--v2-text, #162033); font-size: 9px; cursor: pointer; }
.assistant-quick-tools-btn:hover { border-color: var(--v2-blue, #2563eb); color: var(--v2-blue, #2563eb); }
.assistant-quick-tools-btn > svg { width: 13px; height: 13px; }
.assistant-quick-tools-chevron { transition: transform .16s ease; }
.assistant-quick-tools-btn[aria-expanded="true"] .assistant-quick-tools-chevron { transform: rotate(180deg); }
.assistant-quick-tools-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 5px; padding: 6px; border: 1px solid var(--v2-line, #d7dee8); border-radius: 6px; background: var(--v2-panel, #fff) !important; box-shadow: 0 8px 18px rgba(15, 23, 42, .12); }
.assistant-quick-tools-panel.hidden { display: none !important; }
.assistant-quick-tools-panel button { display: flex; min-width: 0; align-items: center; gap: 5px; min-height: 34px; padding: 4px 5px; border: 1px solid var(--v2-line, #d7dee8); border-radius: 4px; background: var(--v2-panel-soft, #f3f6fa) !important; color: var(--v2-text, #162033); cursor: pointer; text-align: left; }
.assistant-quick-tools-panel button:hover { border-color: var(--v2-blue, #2563eb); background: var(--neutral-accent-soft) !important; }
.assistant-quick-tools-panel button > svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--v2-blue, #2563eb); }
.assistant-quick-tools-panel button span { display: grid; min-width: 0; gap: 1px; }
.assistant-quick-tools-panel button strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-quick-tools-panel button small { overflow: hidden; color: var(--v2-faint, #94a3b8); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }

/* The mascot is a title-bar companion, not a second content column. */
#assistantDrawer > .assistant-messages, #assistantDrawer > .assistant-brief-actions, #assistantDrawer > .assistant-suggestions { padding-right: 12px !important; }
.assistant-composer .assistant-ip-buddy { width: 58px !important; height: 64px !important; top: -58px !important; right: 12px !important; }
.assistant-composer .assistant-ip-buddy-status { width: 18px !important; height: 18px !important; border-width: 2px !important; }
.assistant-composer .assistant-ip-buddy-status svg { width: 10px !important; height: 10px !important; }

/* Ribbon commands stay lightweight in both themes. The global button theme
   may otherwise repaint native selects and AI actions as dark cards, which
   makes the top command row visually inconsistent and hides icon contrast. */
#step-edit > .editor-top-ribbon #editorRibbon :is(#canvasZoomSelect, #addTextBtn, #addImageSelect, #aiDesignCurrentPageBtn, #openBatchDesignBtn) {
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
#step-edit > .editor-top-ribbon #editorRibbon :is(#aiDesignCurrentPageBtn, #openBatchDesignBtn) {
  color: var(--v2-blue, #1677ff) !important;
}

:root[data-theme="dark"] .assistant-design-hub { background: #11151b !important; color: #f8fafc; border-bottom-color: #2a3442; }
:root[data-theme="dark"] .assistant-design-hub-head strong, :root[data-theme="dark"] .assistant-copy-mode-btn strong, :root[data-theme="dark"] .assistant-quick-tools-panel button strong { color: #f8fafc; }
:root[data-theme="dark"] .assistant-design-hub-head small, :root[data-theme="dark"] .assistant-control-label, :root[data-theme="dark"] .assistant-copy-mode-btn small, :root[data-theme="dark"] .assistant-design-hub-meta span, :root[data-theme="dark"] .assistant-quick-tools-panel button small { color: #a8b3c2; }
:root[data-theme="dark"] .assistant-copy-mode-btn, :root[data-theme="dark"] .assistant-design-hub-meta span, :root[data-theme="dark"] .assistant-quick-tools-btn { border-color: #2a3442; background: #1a2029 !important; color: #dbe4ef; }
:root[data-theme="dark"] .assistant-copy-mode-btn.active, :root[data-theme="dark"] .assistant-quick-tools-panel button:hover { background: #172d54 !important; }
:root[data-theme="dark"] .assistant-quick-tools-panel { border-color: #2a3442; background: #171c24 !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .34); }
:root[data-theme="dark"] .assistant-quick-tools-panel button { border-color: #2a3442; background: #202733 !important; color: #f8fafc; }

@media (min-width: 1024px) {
  .assistant-drawer:not(.embedded) { width: min(1040px, calc(100vw - 32px)) !important; }
  .assistant-side-nav { width: 210px !important; }
  #assistantDrawer > :not(.assistant-header):not(.assistant-side-nav) { margin-left: 210px !important; }
  #assistantDrawer > .assistant-side-nav { margin-left: 0 !important; }
  .assistant-design-hub { padding-inline: 14px; }
  .assistant-copy-mode-btn { min-height: 46px; }
}

/* /workflow-v4.css */
/* ==== consolidated from /workflow-v4.css (cascade order preserved) ==== */
/* Final desktop-only workflow overrides. Loaded after the legacy themes. */

.editor-workflow-action[data-workflow-count]::after {
  content: attr(data-workflow-count);
  min-width: 24px;
  margin-left: 3px;
  padding: 1px 5px;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  color: var(--v2-faint);
  background: var(--v2-panel);
  font-size: 9px;
  line-height: 1.35;
}

#step-edit .copy-workflow-actions:not(.hidden) {
  display: flex !important;
  min-width: 0;
  margin-left: auto;
  padding-left: 8px;
  border-left: 1px solid var(--v2-line);
}

#step-edit .copy-workflow-actions.hidden { display: none !important; }

.copy-workflow-action-status {
  max-width: 220px;
  overflow: hidden;
  color: var(--v2-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#step-edit .copy-workflow-actions .compact-btn {
  min-height: 30px !important;
  height: 30px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
}

.style-direction-control {
  display: grid !important;
  grid-template-columns: auto minmax(110px, auto) minmax(220px, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.style-direction-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--v2-line);
  border-radius: 6px;
  background: var(--v2-panel-soft);
}

.style-direction-segmented button {
  min-height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 4px;
  color: var(--v2-muted);
  background: transparent;
}

.style-direction-segmented button.active { color: #fff; background: var(--v2-blue); }
#styleDirectionCountField { display: grid; grid-template-columns: auto 64px; gap: 7px; align-items: center; margin: 0; }
#styleDirectionCountField input { width: 64px; }
.style-direction-summary { display: grid; min-width: 0; gap: 2px; }
.style-direction-summary strong { color: var(--v2-text); font-size: 11px; }
.style-direction-summary span,
.style-direction-summary small { overflow: hidden; color: var(--v2-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.design-candidate-panel:empty { display: none; }
.design-candidate-panel {
  display: grid;
  gap: 8px;
  margin: 8px 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--v2-blue) 38%, var(--v2-line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--v2-blue-soft) 64%, var(--v2-panel));
}

.design-candidate-compare > div,
.design-version-row,
.editable-version-history > div > div { display: flex; gap: 7px; align-items: center; justify-content: space-between; }
.design-candidate-actions,
.editable-candidate-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.design-version-history > div,
.editable-version-history > div { display: grid; gap: 5px; padding-top: 6px; }
.design-candidate-head small,
.design-version-row span,
.design-version-history summary,
.editable-version-history summary { color: var(--v2-faint); font-size: 9px; }

.editable-compare-canvas {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 1280px) !important;
  aspect-ratio: auto !important;
  padding: 12px;
  background: var(--v2-bg) !important;
}

.editable-compare-canvas figure { position: relative; display: grid; min-width: 0; gap: 6px; margin: 0; align-content: start; }
.editable-compare-canvas figcaption { color: var(--v2-muted); font-size: 10px; }
.editable-compare-canvas .editable-canvas-mini { width: 100%; aspect-ratio: var(--slide-aspect, 16 / 9); object-fit: contain; background: #fff; box-shadow: none; }

/* Compare images have an explicit image row. Status text must never change
   the image geometry or leave the two versions on different baselines. */
@layer assistantChrome {
  html:root body #step-edit.design-preview-mode #slideCanvas:has(> .design-compare-canvas) {
    width: var(--design-compare-width, var(--editor-canvas-width, 100%)) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  html:root body #step-edit.design-preview-mode .design-page-canvas.design-compare-canvas {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    align-items: start !important;
    align-content: start !important;
    gap: 16px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  html:root body #step-edit.design-preview-mode .design-compare-canvas > figure {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-items: start !important;
    align-content: start !important;
    gap: 8px !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html:root body #step-edit.design-preview-mode .design-compare-canvas figcaption {
    color: var(--neutral-muted) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  html:root body #step-edit.design-preview-mode .design-compare-image-wrap {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: var(--slide-aspect, 16 / 9) !important;
    border: 1px solid var(--neutral-line-strong) !important;
    border-radius: 4px !important;
    background: var(--neutral-panel) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  html:root body #step-edit.design-preview-mode .design-compare-image-wrap > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html:root body #step-edit.design-preview-mode .design-compare-image-wrap > .canvas-preview-trigger {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 2 !important;
    opacity: 1 !important;
    color: var(--neutral-text) !important;
    background: var(--neutral-panel) !important;
    border: 1px solid var(--neutral-line) !important;
    box-shadow: none !important;
  }
  html:root body #step-edit.design-preview-mode .design-compare-status {
    display: flex !important;
    align-items: flex-start !important;
    min-height: 22px !important;
    min-width: 0 !important;
    color: var(--neutral-muted) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
  html:root body #step-edit.design-preview-mode .design-compare-status > .design-canvas-validation {
    position: static !important;
    display: inline-block !important;
    margin: 0 !important;
    font: inherit !important;
    font-style: normal !important;
    color: var(--neutral-muted) !important;
    overflow-wrap: anywhere !important;
  }
  html:root body #step-edit.design-preview-mode .design-compare-canvas > .design-preview-overlay:is(.stale, .unverified) {
    position: static !important;
    inset: auto !important;
    grid-column: 1 / -1 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid var(--neutral-line) !important;
    border-radius: 6px !important;
    background: var(--neutral-panel-soft) !important;
    color: var(--neutral-muted) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
}

/* Once a version is chosen, the active image returns to a single, full-canvas view. */
.design-page-canvas:not(.design-compare-canvas) {
  padding: 0 !important;
}

.design-page-canvas:not(.design-compare-canvas) > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
}

.design-page-canvas.native-design-preview {
  position: absolute;
  inset: 0;
  display: grid;
  overflow: hidden;
  background: #fff;
}

.design-page-canvas.native-design-preview > .native-design-preview-page {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  pointer-events: none;
}

.social-v4-stages {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1px !important;
  padding: 1px !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 7px !important;
  background: var(--v2-line) !important;
}

.social-v4-stages > div { min-width: 0; border: 0 !important; border-radius: 0 !important; background: var(--v2-panel) !important; }

#editorWorkflowWorkspace .social-publish-layout {
  display: grid !important;
  grid-template-columns: minmax(250px, 300px) minmax(310px, 360px) minmax(440px, 1fr) !important;
  gap: 12px !important;
  align-items: start;
}

#editorWorkflowWorkspace .social-workflow-column { display: contents !important; }
#editorWorkflowWorkspace .social-v4-materials { grid-column: 1 !important; grid-row: 1 / span 20 !important; }
#editorWorkflowWorkspace .social-v4-platforms { grid-column: 2 !important; grid-row: 1 !important; }
#editorWorkflowWorkspace .social-v4-plan-config { grid-column: 2 !important; grid-row: 2 !important; }
#editorWorkflowWorkspace .social-workflow-column > .social-step-card:not(.social-v4-materials):not(.social-v4-platforms):not(.social-v4-plan-config) { grid-column: 2 !important; }
#editorWorkflowWorkspace .social-v4-results { grid-column: 3 !important; grid-row: 1 / span 20 !important; min-width: 0; }

#editorWorkflowWorkspace .social-step-card {
  min-width: 0;
  margin: 0 !important;
  padding: 12px !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 7px !important;
  background: var(--v2-panel) !important;
  box-shadow: none !important;
}

#editorWorkflowWorkspace .social-step-head > span { display: none !important; }
#editorWorkflowWorkspace .social-result-section { padding: 12px 0 !important; border: 0 !important; border-top: 1px solid var(--v2-line) !important; border-radius: 0 !important; background: transparent !important; }
#editorWorkflowWorkspace .social-output-grid { width: 100% !important; max-width: 692px; min-width: 0 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
#editorWorkflowWorkspace .social-output-card,
#editorWorkflowWorkspace .social-output-preview,
#editorWorkflowWorkspace .social-output-card img,
#editorWorkflowWorkspace .social-output-card figcaption { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
#editorWorkflowWorkspace .social-source-pool .social-source-grid { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr) !important; }
#editorWorkflowWorkspace .social-mockup-live-panel { min-width: 0; grid-template-columns: minmax(0, 1fr) !important; gap: 10px; padding: 10px; }
#editorWorkflowWorkspace .social-mockup-live-preview,
#editorWorkflowWorkspace .social-mockup-live-copy { min-width: 0; }
#editorWorkflowWorkspace .social-mockup-live-copy { padding: 4px 2px 2px; }
.social-source-type-field { display: grid; min-width: 142px; gap: 3px; }

.social-platform-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; max-height: 238px; margin-top: 10px; padding-right: 3px; overflow-y: auto; }
.social-platform-choice { position: relative; display: block; min-width: 0; }
.social-platform-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.social-platform-choice > span { display: flex; min-height: 38px; gap: 6px; align-items: center; justify-content: space-between; padding: 7px 8px; border: 1px solid var(--v2-line); border-radius: 6px; color: var(--v2-muted); background: var(--v2-panel-soft); cursor: pointer; }
.social-platform-choice.selected > span { border-color: var(--v2-blue); color: var(--v2-blue); background: var(--v2-blue-soft); }
.social-platform-choice strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.social-platform-choice small { flex: 0 0 auto; color: var(--v2-faint); font-size: 8px; }

.social-publish-plan-list { display: grid; gap: 6px; margin-top: 10px; }
.social-publish-plan { display: grid; gap: 3px; padding: 8px; border-left: 3px solid var(--v2-green); background: var(--v2-panel-soft); }
.social-publish-plan.stale { border-left-color: var(--v2-amber); }
.social-publish-plan header { display: flex; gap: 6px; align-items: center; justify-content: space-between; }
.social-publish-plan p { margin: 0; color: var(--v2-muted); font-size: 9px; line-height: 1.45; }
.social-publish-plan > span,
.social-publish-plan > small { color: var(--v2-faint); font-size: 8px; }

.social-result-platform-tabs { display: flex; gap: 4px; margin: 8px 0 12px; overflow-x: auto; }
.social-result-platform-tabs button { display: grid; flex: 0 0 auto; gap: 1px; min-height: 36px; padding: 5px 9px; border: 1px solid var(--v2-line); border-radius: 6px; color: var(--v2-muted); background: var(--v2-panel-soft); }
.social-result-platform-tabs button.active { border-color: var(--v2-blue); color: var(--v2-blue); background: var(--v2-blue-soft); }
.social-result-platform-tabs span { color: var(--v2-faint); font-size: 8px; }

/* Generated images are direct media, not cards. Controls remain below them. */
.assistant-generated-image-grid { gap: 10px !important; padding: 0 !important; }
.assistant-generated-image-card { gap: 5px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.assistant-generated-image-preview,
.assistant-generated-image-card.selected .assistant-generated-image-preview { overflow: visible !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.assistant-generated-image-preview:hover { border: 0 !important; opacity: .92; }
.assistant-generated-image-preview img { border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.assistant-artifact-variant-select { padding: 4px 0 !important; background: transparent !important; }

.style-stage-direction-control { display: grid; gap: 9px; padding: 10px 0 12px; border-bottom: 1px solid var(--v2-line); }
.style-stage-direction-segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 2px; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-panel-soft); }
.style-stage-direction-segmented button { min-height: 30px; border: 0; border-radius: 4px; color: var(--v2-muted); background: transparent; }
.style-stage-direction-segmented button.active { color: var(--v2-text); background: var(--v2-panel); box-shadow: 0 1px 4px rgba(20, 24, 28, .12); }
.style-stage-direction-control > label { display: grid; grid-template-columns: 1fr 90px; gap: 8px; align-items: center; color: var(--v2-muted); font-size: 10px; }
.style-stage-direction-control select { min-width: 0; }
.style-stage-direction-summary { display: grid; gap: 2px; }
.style-stage-direction-summary strong { color: var(--v2-text); font-size: 11px; }
.style-stage-direction-summary span,
.style-stage-direction-summary small { color: var(--v2-muted); font-size: 9px; line-height: 1.45; }

.social-platform-size-editor { display: grid; gap: 7px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--v2-line); }
.social-platform-size-editor > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.social-platform-size-editor > header strong { color: var(--v2-text); font-size: 10px; }
.social-platform-size-editor > header span { color: var(--v2-muted); font-size: 9px; }
.social-platform-size-editor > div { display: grid; gap: 6px; }
.social-platform-size-row { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(150px, 220px); gap: 6px 8px; align-items: center; padding: 7px 8px; background: var(--v2-panel-soft); }
.social-platform-size-title { display: grid; gap: 1px; min-width: 0; }
.social-platform-size-title { grid-column: 1 / -1; }
.social-platform-size-title strong { overflow: hidden; color: var(--v2-text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.social-platform-size-title small { color: var(--v2-faint); font-size: 8px; }
.social-platform-size-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.social-platform-size-chips > span { display: inline-flex; min-height: 24px; align-items: center; gap: 2px; padding: 3px 5px 3px 7px; border: 1px solid var(--v2-line); border-radius: 5px; color: var(--v2-text); background: var(--v2-panel); font-size: 9px; }
.social-platform-size-chips button { display: grid; width: 18px; height: 18px; padding: 0; border: 0; place-items: center; color: var(--v2-muted); background: transparent; }
.social-platform-size-chips button svg { width: 12px; height: 12px; }
.social-platform-size-add { display: grid; grid-template-columns: minmax(74px, 1fr) auto; gap: 4px; min-width: 0; }
.social-platform-size-add select,
.social-platform-size-add button { min-width: 0; min-height: 28px; }

/* Copy planning is a real workflow surface before any placeholder canvas exists. */
#step-edit.editor-layout.copy-planning-mode {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  background: var(--v2-bg) !important;
}

#step-edit.editor-layout.copy-planning-mode > .editor-top-ribbon,
#step-edit.editor-layout.copy-planning-mode > .thumb-panel,
#step-edit.editor-layout.copy-planning-mode > .canvas-area,
#step-edit.editor-layout.copy-planning-mode > .inspector,
#step-edit.editor-layout.copy-planning-mode > .editor-tool-rail,
#step-edit.editor-layout.copy-planning-mode > .editor-panel-resizer,
#step-edit.editor-layout.copy-planning-mode > #leftEditorPanelResizer,
#step-edit.editor-layout.copy-planning-mode > #rightEditorPanelResizer { display: none !important; }

#step-edit.editor-layout.copy-planning-mode > .copy-planning-workspace {
  display: block !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: var(--v2-bg);
}

#step-edit > .copy-planning-workspace.hidden { display: none !important; }

.copy-plan-shell {
  display: grid;
  width: min(1180px, calc(100% - 40px));
  min-height: calc(100% - 40px);
  margin: 20px auto;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  background: var(--v2-panel);
  box-shadow: 0 14px 40px rgb(15 23 42 / 8%);
}

.copy-plan-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--v2-line);
}

.copy-plan-head > div:first-child { display: grid; min-width: 0; gap: 4px; }
.copy-plan-kicker { color: var(--v2-blue); font-size: 10px; font-weight: 700; }
.copy-plan-head h2 { margin: 0; color: var(--v2-text); font-size: 20px; line-height: 1.3; }
.copy-plan-head p { margin: 0; overflow: hidden; color: var(--v2-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.copy-plan-model {
  display: flex;
  min-width: 210px;
  align-items: center;
  gap: 9px;
  padding-left: 18px;
  border-left: 1px solid var(--v2-line);
}
.copy-plan-model > svg { width: 20px; height: 20px; color: var(--v2-muted); }
.copy-plan-model.gpt > svg { color: var(--v2-green); }
.copy-plan-model.fallback > svg { color: var(--v2-amber); }
.copy-plan-model span { display: grid; gap: 2px; }
.copy-plan-model strong { color: var(--v2-text); font-size: 11px; }
.copy-plan-model small { color: var(--v2-muted); font-size: 9px; }

/* Copy and design now use the same complete-page preview card as editable. */
#step-edit .thumbnail-list > .thumb.page-workflow-thumb {
  position: relative;
  display: grid !important;
  width: 100%;
  height: max-content !important;
  min-height: 0 !important;
  grid-template-rows: auto auto !important;
  align-content: start;
  gap: 7px !important;
  margin: 0 !important;
  padding: 8px 8px 10px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-left: 3px solid transparent !important;
  border-bottom: 1px solid color-mix(in srgb, var(--v2-line) 70%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit;
  text-align: left;
}

#step-edit .thumbnail-list > .thumb.page-workflow-thumb::before {
  content: none !important;
}

#step-edit .thumbnail-list > .thumb.page-workflow-thumb:hover {
  background: color-mix(in srgb, var(--v2-blue-soft) 42%, transparent) !important;
}

#step-edit .thumbnail-list > .thumb.page-workflow-thumb.active {
  border-left-color: var(--v2-blue) !important;
  border-bottom-color: color-mix(in srgb, var(--v2-blue) 36%, var(--v2-line)) !important;
  background: color-mix(in srgb, var(--v2-blue-soft) 54%, transparent) !important;
  box-shadow: none !important;
}

#step-edit .thumbnail-list > .thumb.page-workflow-thumb > .workflow-thumb-image {
  display: block;
  width: 100%;
  aspect-ratio: var(--slide-aspect, 16 / 9);
  overflow: hidden;
  border: 1px solid var(--v2-line-strong);
  border-radius: 4px;
  background: var(--v2-panel-soft);
}

#step-edit .thumbnail-list > .thumb.page-workflow-thumb > .workflow-thumb-image > img,
#step-edit .thumbnail-list > .thumb.page-workflow-thumb > .workflow-thumb-image > .mini-slide {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

#step-edit .thumbnail-list > .thumb.page-workflow-thumb > .workflow-thumb-image > img {
  object-fit: contain;
}

#step-edit .thumbnail-list > .thumb.page-workflow-thumb > .workflow-thumb-image > .mini-slide {
  border: 0;
  border-radius: 0;
}

#step-edit .thumbnail-list > .thumb.page-workflow-thumb > .workflow-thumb-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding-right: 14px;
}

#step-edit .thumbnail-list > .thumb.page-workflow-thumb > .workflow-thumb-copy strong {
  overflow: hidden;
  color: var(--v2-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#step-edit .thumbnail-list > .thumb.page-workflow-thumb > .workflow-thumb-copy small {
  color: var(--v2-muted);
  font-size: 10px;
}

#step-edit .thumbnail-list > .thumb.page-workflow-thumb > .workflow-thumb-state {
  position: absolute;
  right: 8px;
  bottom: 15px;
}

.copy-plan-brief-strip {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, minmax(110px, 1fr));
  border-bottom: 1px solid var(--v2-line);
  background: var(--v2-panel-soft);
}
.copy-plan-brief-strip > span { display: grid; min-width: 0; gap: 2px; padding: 10px 14px; border-right: 1px solid var(--v2-line); }
.copy-plan-brief-strip > span:last-child { border-right: 0; }
.copy-plan-brief-strip small { color: var(--v2-faint); font-size: 8px; }
.copy-plan-brief-strip strong { overflow: hidden; color: var(--v2-text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.copy-plan-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-width: 0; }
.copy-plan-controls { min-width: 0; padding: 18px 20px; }
.copy-plan-analysis { min-width: 0; padding: 18px; border-left: 1px solid var(--v2-line); background: color-mix(in srgb, var(--v2-panel-soft) 58%, var(--v2-panel)); }
.copy-plan-analysis { display: grid; align-content: start; gap: 14px; overflow: auto; }
.copy-plan-section + .copy-plan-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--v2-line); }
.copy-plan-section > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.copy-plan-section > header > div { display: grid; gap: 3px; }
.copy-plan-section > header strong { color: var(--v2-text); font-size: 13px; }
.copy-plan-section > header span { color: var(--v2-muted); font-size: 9px; line-height: 1.45; }
.copy-plan-section > header em { flex: 0 0 auto; color: var(--v2-blue); font-size: 9px; font-style: normal; }

.copy-plan-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.copy-plan-form label { display: grid; min-width: 0; gap: 5px; }
.copy-plan-form label.wide { grid-column: 1 / -1; }
.copy-plan-form label > span { display: flex; min-width: 0; align-items: center; gap: 6px; color: var(--v2-muted); font-size: 9px; font-weight: 650; }
.copy-plan-ai-badge { display: inline-flex; min-height: 18px; align-items: center; padding: 1px 5px; border: 1px solid color-mix(in srgb, var(--v2-blue) 28%, var(--v2-line)); border-radius: 4px; color: var(--v2-blue); background: var(--v2-blue-soft); font-size: 7px; font-style: normal; font-weight: 700; cursor: help; }
.copy-plan-form input,
.copy-plan-form select,
.copy-plan-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  box-sizing: border-box;
  padding: 8px 9px;
  border: 1px solid var(--v2-line);
  border-radius: 6px;
  color: var(--v2-text);
  background: var(--v2-panel-soft);
  font: inherit;
  font-size: 10px;
  letter-spacing: 0;
}
.copy-plan-form textarea { min-height: 72px; resize: vertical; line-height: 1.55; }
.copy-plan-form input:focus,
.copy-plan-form select:focus,
.copy-plan-form textarea:focus { border-color: var(--v2-blue); outline: 2px solid color-mix(in srgb, var(--v2-blue) 15%, transparent); }

.copy-plan-dropzone {
  display: flex;
  width: 100%;
  min-height: 72px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--v2-blue) 52%, var(--v2-line));
  border-radius: 7px;
  color: var(--v2-text);
  background: color-mix(in srgb, var(--v2-blue-soft) 42%, var(--v2-panel));
  text-align: left;
}
.copy-plan-dropzone:hover,
.copy-plan-dropzone.dragging { border-color: var(--v2-blue); background: var(--v2-blue-soft); }
.copy-plan-dropzone > svg { width: 24px; height: 24px; flex: 0 0 24px; color: var(--v2-blue); }
.copy-plan-dropzone > span { display: grid; gap: 3px; }
.copy-plan-dropzone strong { font-size: 11px; }
.copy-plan-dropzone small { color: var(--v2-muted); font-size: 9px; }
.copy-plan-dropzone.uploading > svg { animation: spin 1s linear infinite; }
.copy-plan-file-input { display: none; }
.copy-plan-file-list { display: grid; max-height: 178px; margin-top: 9px; overflow: auto; border-top: 1px solid var(--v2-line); }
.copy-plan-file-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; padding: 8px 3px; border-bottom: 1px solid var(--v2-line); }
.copy-plan-file-icon { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 5px; color: var(--v2-blue); background: var(--v2-blue-soft); }
.copy-plan-file-icon svg { width: 14px; height: 14px; }
.copy-plan-file-row > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.copy-plan-file-row strong { overflow: hidden; color: var(--v2-text); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.copy-plan-file-row small { overflow: hidden; color: var(--v2-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.copy-plan-file-row em { color: var(--v2-green); font-size: 8px; font-style: normal; }
.copy-plan-file-row.warning em { color: var(--v2-amber); }
.copy-plan-file-row.error em,
.copy-plan-upload-error { color: var(--v2-red); }
.copy-plan-file-empty { display: grid; justify-items: center; gap: 3px; padding: 10px; color: var(--v2-muted); font-size: 9px; }
.copy-plan-file-empty svg { width: 18px; }
.copy-plan-upload-error { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 9px; }
.copy-plan-upload-error svg { width: 14px; height: 14px; }

.copy-plan-canvas-overview { display: grid; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--v2-line); }
.copy-plan-canvas-overview > header { display: flex; min-width: 0; align-items: start; justify-content: space-between; gap: 10px; }
.copy-plan-canvas-overview > header > div { display: grid; min-width: 0; gap: 2px; }
.copy-plan-canvas-overview > header strong { color: var(--v2-text); font-size: 11px; }
.copy-plan-canvas-overview > header span { color: var(--v2-muted); font-size: 8px; line-height: 1.45; }
.copy-plan-canvas-overview > header em { flex: 0 0 auto; color: var(--v2-blue); font-size: 8px; font-style: normal; }
.copy-plan-canvas-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.copy-plan-canvas-item { display: grid; min-width: 0; gap: 5px; }
.copy-plan-canvas-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--copy-plan-aspect, 16 / 9);
  overflow: hidden;
  border: 1px solid var(--v2-line-strong);
  border-radius: 4px;
  background: var(--v2-panel);
}
.copy-plan-canvas-item.planned .copy-plan-canvas-frame { border-color: color-mix(in srgb, var(--v2-blue) 48%, var(--v2-line)); background: color-mix(in srgb, var(--v2-blue-soft) 46%, var(--v2-panel)); }
.copy-plan-canvas-frame::before { position: absolute; top: 16%; right: 10%; bottom: 14%; left: 10%; border: 1px dashed color-mix(in srgb, var(--v2-faint) 32%, transparent); content: ""; }
.copy-plan-canvas-frame > b { position: absolute; top: 7px; left: 8px; color: var(--v2-blue); font-size: 8px; }
.copy-plan-canvas-frame > i { position: absolute; left: 10%; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--v2-muted) 24%, transparent); }
.copy-plan-canvas-frame > i:nth-of-type(1) { top: 42%; width: 58%; }
.copy-plan-canvas-frame > i:nth-of-type(2) { top: 54%; width: 74%; }
.copy-plan-canvas-frame > i:nth-of-type(3) { top: 66%; width: 46%; }
.copy-plan-canvas-item > span:last-child { display: grid; min-width: 0; gap: 1px; }
.copy-plan-canvas-item > span:last-child strong { overflow: hidden; color: var(--v2-text); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.copy-plan-canvas-item > span:last-child small { overflow: hidden; color: var(--v2-faint); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }

.copy-plan-analysis-loading,
.copy-plan-analysis-empty { display: grid; min-height: 260px; align-content: center; justify-items: center; gap: 8px; color: var(--v2-muted); text-align: center; }
.copy-plan-analysis-loading strong,
.copy-plan-analysis-empty strong { color: var(--v2-text); font-size: 12px; }
.copy-plan-analysis-loading p,
.copy-plan-analysis-empty p { max-width: 250px; margin: 0; font-size: 9px; line-height: 1.55; }
.copy-plan-analysis-empty > svg { width: 26px; height: 26px; color: var(--v2-blue); }
.copy-plan-analysis-result { display: grid; gap: 10px; }
.copy-plan-analysis-result > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.copy-plan-analysis-result > header span { display: flex; align-items: center; gap: 5px; color: var(--v2-blue); font-size: 9px; font-weight: 700; }
.copy-plan-analysis-result > header svg { width: 14px; height: 14px; }
.copy-plan-analysis-result > header em { color: var(--v2-green); font-size: 8px; font-style: normal; }
.copy-plan-analysis-result.stale > header em { color: var(--v2-amber); }
.copy-plan-analysis-result h3 { margin: 0; color: var(--v2-text); font-size: 13px; line-height: 1.45; }
.copy-plan-analysis-result > p { margin: 0; color: var(--v2-muted); font-size: 9px; line-height: 1.58; }
.copy-plan-analysis-result > section { display: grid; gap: 7px; padding-top: 10px; border-top: 1px solid var(--v2-line); }
.copy-plan-analysis-result > section > strong { color: var(--v2-text); font-size: 10px; }
.copy-plan-analysis-result ol { display: grid; max-height: 250px; gap: 3px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.copy-plan-analysis-result li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 7px; align-items: start; padding: 6px 0; }
.copy-plan-analysis-result li > b { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 4px; color: var(--v2-blue); background: var(--v2-blue-soft); font-size: 8px; }
.copy-plan-analysis-result li > span { display: grid; min-width: 0; gap: 2px; }
.copy-plan-analysis-result li strong { color: var(--v2-text); font-size: 9px; }
.copy-plan-analysis-result li small { color: var(--v2-muted); font-size: 8px; line-height: 1.4; }
.copy-plan-analysis-result li em { color: var(--v2-faint); font-size: 7px; font-style: normal; line-height: 1.45; }
.copy-plan-notes-strategy p,
.copy-plan-page-plan-reason { margin: 0; color: var(--v2-muted); font-size: 8px; line-height: 1.5; }
.copy-plan-warning { display: flex; align-items: start; gap: 7px; padding: 8px; border-left: 3px solid var(--v2-amber); color: var(--v2-muted); background: color-mix(in srgb, var(--v2-amber) 9%, var(--v2-panel)); font-size: 8px; line-height: 1.5; }
.copy-plan-warning svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--v2-amber); }
.copy-plan-risks p { display: flex; align-items: start; gap: 6px; margin: 0; color: var(--v2-muted); font-size: 8px; line-height: 1.45; }
.copy-plan-risks svg { width: 13px; height: 13px; flex: 0 0 13px; color: var(--v2-amber); }

.copy-plan-actions {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--v2-line);
  background: color-mix(in srgb, var(--v2-panel) 96%, transparent);
  backdrop-filter: blur(16px);
}
.copy-plan-actions > div { display: grid; min-width: 0; gap: 2px; }
.copy-plan-actions > div strong { color: var(--v2-text); font-size: 10px; }
.copy-plan-actions > div span { overflow: hidden; color: var(--v2-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.copy-plan-actions button { min-height: 36px; }

/* Complete copy review: all pages stay visible before style generation opens. */
.copy-review-shell {
  display: flex;
  flex-direction: column;
  min-height: max(680px, calc(100% - 40px));
  overflow: hidden;
}

.copy-review-head {
  flex: 0 0 auto;
  align-items: flex-start;
}

.copy-review-head > div:first-child { max-width: 820px; }

.copy-review-head p {
  overflow: visible;
  font-size: 11px;
  line-height: 1.55;
  text-overflow: clip;
  white-space: normal;
}

.copy-review-progress {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: auto minmax(36px, 1fr) auto minmax(36px, 1fr) auto minmax(36px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--v2-line);
  background: var(--v2-panel-soft);
}

.copy-review-progress > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--v2-faint);
}

.copy-review-progress > span > b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--v2-line-strong);
  border-radius: 50%;
  background: var(--v2-panel);
  font-size: 9px;
}

.copy-review-progress > span > em {
  font-size: 9px;
  font-style: normal;
  font-weight: 650;
  white-space: nowrap;
}

.copy-review-progress > span.active { color: var(--v2-text); }
.copy-review-progress > span.active > b { border-color: var(--v2-blue); color: #fff; background: var(--v2-blue); }
.copy-review-progress > i { height: 1px; background: var(--v2-line-strong); }

.copy-review-warning {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 9px 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--v2-amber) 34%, var(--v2-line));
  color: var(--v2-text);
  background: color-mix(in srgb, var(--v2-amber) 10%, var(--v2-panel));
  font-size: 10px;
}

.copy-review-warning svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--v2-amber); }

.copy-review-layout {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 430px;
  grid-template-columns: 300px minmax(0, 1fr);
  overflow: hidden;
}

.copy-review-page-list {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  border-right: 1px solid var(--v2-line);
  background: color-mix(in srgb, var(--v2-panel-soft) 72%, var(--v2-panel));
}

.copy-review-page-list > header {
  display: grid;
  gap: 3px;
  padding: 14px 16px 11px;
  border-bottom: 1px solid var(--v2-line);
}

.copy-review-page-list > header strong { color: var(--v2-text); font-size: 12px; }
.copy-review-page-list > header span { color: var(--v2-muted); font-size: 9px; }
.copy-review-page-list > div { min-height: 0; padding: 7px; overflow: auto; overscroll-behavior: contain; }

.copy-review-page-card {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  padding: 10px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--v2-text);
  background: transparent;
  text-align: left;
}

.copy-review-page-card + .copy-review-page-card { margin-top: 3px; }
.copy-review-page-card:hover { background: var(--v2-panel); }
.copy-review-page-card.active { border-color: color-mix(in srgb, var(--v2-blue) 36%, var(--v2-line)); background: var(--v2-blue-soft); }
.copy-review-page-card > b { color: var(--v2-blue); font-size: 10px; }
.copy-review-page-card > span { display: grid; min-width: 0; gap: 3px; }
.copy-review-page-card strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.copy-review-page-card small { overflow: hidden; color: var(--v2-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.copy-review-page-card svg { width: 14px; height: 14px; color: var(--v2-faint); }

.copy-review-page-detail {
  min-width: 0;
  min-height: 0;
  padding: 18px 20px 22px;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--v2-panel);
}

.copy-review-page-detail > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.copy-review-page-detail > header > div { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.copy-review-page-detail > header > div span { color: var(--v2-blue); font-size: 10px; font-weight: 750; }
.copy-review-page-detail > header > div strong { color: var(--v2-text); font-size: 11px; }
.copy-review-page-detail > header > div em { padding: 3px 6px; border: 1px solid var(--v2-line); border-radius: 4px; color: var(--v2-muted); background: var(--v2-panel-soft); font-size: 8px; font-style: normal; }
.copy-review-page-detail > header button { flex: 0 0 auto; }

.copy-review-visible-copy {
  padding: 20px 22px;
  border: 1px solid var(--v2-line-strong);
  border-radius: 7px;
  background: color-mix(in srgb, var(--v2-panel-soft) 46%, var(--v2-panel));
}

.copy-review-section-kicker { color: var(--v2-blue); font-size: 9px; font-weight: 700; }
.copy-review-visible-copy h3 { margin: 8px 0 0; color: var(--v2-text); font-size: 22px; line-height: 1.35; }
.copy-review-visible-copy h4 { margin: 5px 0 0; color: var(--v2-muted); font-size: 13px; font-weight: 550; line-height: 1.45; }
.copy-review-visible-copy p { margin: 14px 0 0; color: var(--v2-text); font-size: 11px; line-height: 1.75; white-space: pre-wrap; }
.copy-review-visible-copy ol { display: grid; gap: 7px; margin: 14px 0 0; padding-left: 20px; color: var(--v2-text); font-size: 11px; line-height: 1.55; }
.copy-review-visible-copy > small { display: block; margin-top: 13px; padding-top: 9px; border-top: 1px solid var(--v2-line); color: var(--v2-faint); font-size: 8px; }

.copy-review-chart-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.copy-review-chart-labels > span { padding: 4px 7px; border: 1px solid var(--v2-line); border-radius: 4px; color: var(--v2-muted); background: var(--v2-panel); font-size: 8px; }

.copy-review-structure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.copy-review-structure-grid > div {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 6px;
  padding: 12px 13px;
  border: 1px solid var(--v2-line);
  border-radius: 6px;
  background: var(--v2-panel-soft);
}

.copy-review-structure-grid > div > span { color: var(--v2-blue); font-size: 9px; font-weight: 700; }
.copy-review-structure-grid p { margin: 0; color: var(--v2-text); font-size: 9px; line-height: 1.55; white-space: pre-wrap; }
.copy-review-structure-grid ul { display: grid; gap: 5px; margin: 0; padding-left: 17px; color: var(--v2-text); font-size: 9px; line-height: 1.45; }
.copy-review-structure-grid small { color: var(--v2-muted); font-size: 8px; line-height: 1.45; }

.copy-review-actions { flex: 0 0 auto; }
.copy-review-summary { display: grid; gap: 8px; }
.copy-review-summary p { margin: 0; color: var(--v2-muted); font-size: 9px; line-height: 1.55; }

@media (max-width: 1280px) and (min-width: 981px) {
  .copy-review-layout { grid-template-columns: 270px minmax(0, 1fr); }
  .copy-review-page-detail { padding: 15px 16px 18px; }
  .copy-review-visible-copy { padding: 17px 18px; }
  .copy-review-visible-copy h3 { font-size: 19px; }
}

.copy-plan-thumb-summary { display: grid; gap: 3px; padding: 8px 4px 10px; border-bottom: 1px solid var(--v2-line); }
.copy-plan-thumb-summary strong { color: var(--v2-text); font-size: 10px; }
.copy-plan-thumb-summary span { color: var(--v2-muted); font-size: 8px; }
.copy-plan-thumb-placeholder { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; min-height: 48px; padding: 7px; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-panel-soft); }
.copy-plan-thumb-placeholder > b { color: var(--v2-faint); font-size: 9px; }
.copy-plan-thumb-placeholder > span { display: grid; min-width: 0; gap: 2px; }
.copy-plan-thumb-placeholder strong { overflow: hidden; color: var(--v2-text); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.copy-plan-thumb-placeholder small { color: var(--v2-faint); font-size: 7px; }
.copy-plan-thumb-placeholder.planned { border-color: color-mix(in srgb, var(--v2-blue) 32%, var(--v2-line)); }
.thumbnail-window-spacer { flex: 0 0 auto; width: 100%; pointer-events: none; }
.copy-plan-inspector-summary { display: grid; gap: 10px; }
.copy-plan-inspector-summary > strong { color: var(--v2-text); font-size: 12px; }
.copy-plan-inspector-summary dl { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--v2-line); }
.copy-plan-inspector-summary dl > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--v2-line); font-size: 9px; }
.copy-plan-inspector-summary dt { color: var(--v2-muted); }
.copy-plan-inspector-summary dd { margin: 0; color: var(--v2-text); }
.copy-plan-inspector-summary p { margin: 0; color: var(--v2-muted); font-size: 9px; line-height: 1.55; }

@media (max-width: 1440px) and (min-width: 1024px) {
  .topbar > #editorWorkflowNav > .editor-workflow-action { gap: 3px !important; padding-inline: 4px !important; }
}

@media (max-width: 1440px) and (min-width: 1024px) {
  #editorWorkflowWorkspace .social-publish-layout { grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) !important; }
  #editorWorkflowWorkspace .social-v4-materials { grid-column: 1 !important; grid-row: 1 / span 20 !important; }
  #editorWorkflowWorkspace .social-v4-platforms,
  #editorWorkflowWorkspace .social-v4-plan-config,
  #editorWorkflowWorkspace .social-workflow-column > .social-step-card:not(.social-v4-materials) { grid-column: 2 !important; }
  #editorWorkflowWorkspace .social-v4-results { grid-column: 1 / -1 !important; grid-row: 21 !important; }
  .copy-workflow-action-status { display: none; }
  .copy-plan-shell { width: calc(100% - 28px); margin: 14px auto; }
  .copy-plan-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .copy-plan-head { padding: 14px 18px 12px; }
  .copy-plan-controls { padding: 14px 16px; }
  .copy-plan-analysis { padding: 14px; }
  .copy-plan-brief-strip { grid-template-columns: 1.35fr repeat(4, minmax(96px, 1fr)); }
  #step-edit .copy-workflow-actions { margin-left: 0; padding-left: 4px; gap: 3px; }
  #step-edit .copy-workflow-actions .compact-btn { width: 30px; min-width: 30px; padding-inline: 0 !important; justify-content: center; }
  #step-edit .copy-workflow-actions .compact-btn span { display: none; }
}

/* Desktop media publishing workbench. The application UI stays desktop-first;
   social ratios and device scenes remain output choices, not responsive UI modes. */
@media (min-width: 1024px) {
  #editorWorkflowWorkspace > .social-studio-v2 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 20px 24px !important;
    background: var(--v2-bg) !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 > .social-store-hero {
    position: sticky !important;
    top: 0 !important;
    z-index: 8;
    grid-template-columns: minmax(360px, 1fr) auto !important;
    min-height: 74px !important;
    margin: 0 -20px !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid var(--v2-line) !important;
    background: color-mix(in srgb, var(--v2-panel) 97%, transparent) !important;
    backdrop-filter: blur(18px);
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-store-hero h2 {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-store-hero p {
    max-width: 760px !important;
    margin: 3px 0 0 !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-eyebrow {
    margin: 0 0 2px !important;
    font-size: 9px !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-hero-side {
    display: grid !important;
    grid-template-columns: auto auto 34px;
    min-width: 0 !important;
    max-width: none !important;
    align-items: center !important;
    justify-content: end !important;
    justify-items: stretch !important;
    gap: 6px 8px !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-model-status {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-model-status > div {
    min-height: 28px !important;
    padding: 4px 8px !important;
    border-radius: 5px !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-model-status strong,
  #editorWorkflowWorkspace .social-studio-v2 .social-model-status span,
  #editorWorkflowWorkspace .social-studio-v2 .social-no-auto-publish {
    font-size: 8px !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-no-auto-publish {
    grid-column: 1 / -1;
    justify-self: end;
    margin: -2px 0 0 !important;
    color: var(--v2-faint) !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 #socialGenerateAllBtn {
    min-height: 32px !important;
    padding-inline: 12px !important;
    border-radius: 5px !important;
    font-size: 9px !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 #closeSocialWorkspaceBtn {
    width: 32px !important;
    height: 32px !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-v4-stages {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-height: 42px;
    margin: 0 -20px 12px !important;
    padding: 0 20px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--v2-line) !important;
    border-radius: 0 !important;
    background: var(--v2-panel-soft) !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-v4-stages > div {
    min-height: 42px !important;
    align-content: center;
    padding: 6px 12px !important;
    border-right: 1px solid var(--v2-line) !important;
    background: transparent !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-v4-stages > div:last-child { border-right: 0 !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-v4-stages strong { font-size: 9px !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-v4-stages span { font-size: 8px !important; }

  #editorWorkflowWorkspace .social-studio-v2 .social-publish-layout {
    display: grid !important;
    grid-template-columns: 254px minmax(320px, 370px) minmax(420px, 1fr) !important;
    grid-auto-flow: row;
    grid-auto-rows: max-content;
    align-items: start !important;
    justify-content: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-workflow-column { display: contents !important; }

  #editorWorkflowWorkspace .social-studio-v2 .social-v4-materials {
    position: sticky;
    top: 88px;
    grid-column: 1 !important;
    grid-row: 1 / span 7 !important;
    max-height: calc(100vh - 106px);
    overflow: auto;
    scrollbar-gutter: stable;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-v4-platforms { grid-column: 2 !important; grid-row: 1 !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-v4-plan-config { grid-column: 2 !important; grid-row: 2 !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-v4-mockup { grid-column: 2 !important; grid-row: 3 !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-v4-rules { grid-column: 2 !important; grid-row: 4 !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-v4-generate { grid-column: 2 !important; grid-row: 5 !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-v4-advanced { grid-column: 2 !important; grid-row: 6 !important; }

  #editorWorkflowWorkspace .social-studio-v2 .social-v4-results {
    position: sticky !important;
    top: 88px;
    grid-column: 3 !important;
    grid-row: 1 / span 7 !important;
    max-height: calc(100vh - 106px) !important;
    overflow: auto !important;
    scrollbar-gutter: stable;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-step-card,
  #editorWorkflowWorkspace .social-studio-v2 .social-preview-panel,
  #editorWorkflowWorkspace .social-studio-v2 .social-advanced-panel {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid var(--v2-line) !important;
    border-radius: 6px !important;
    background: var(--v2-panel) !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-step-head {
    gap: 0 !important;
    margin-bottom: 10px !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-step-head strong,
  #editorWorkflowWorkspace .social-studio-v2 .social-card-head strong { font-size: 12px !important; }

  #editorWorkflowWorkspace .social-studio-v2 .social-step-head p {
    margin-top: 2px !important;
    font-size: 8px !important;
    line-height: 1.45 !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-primary-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-source-type-field { grid-column: 1 / -1; }
  #editorWorkflowWorkspace .social-studio-v2 .social-primary-actions > button { min-width: 0; min-height: 31px; padding-inline: 7px; font-size: 8px; }
  #editorWorkflowWorkspace .social-studio-v2 #socialSyncDeckBtn { grid-column: 1 / -1; }

  #editorWorkflowWorkspace .social-studio-v2 .social-source-pools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    margin-top: 10px !important;
    border: 0 !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-source-pool,
  #editorWorkflowWorkspace .social-studio-v2 .social-source-pool.wide {
    grid-column: 1 !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--v2-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-pool-head { margin-bottom: 7px !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-pool-head strong { font-size: 9px !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-pool-head span { font-size: 8px !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-source-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; }

  #editorWorkflowWorkspace .social-studio-v2 .social-platform-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: 202px !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-platform-choice > span {
    min-height: 34px !important;
    padding: 5px 7px !important;
    border-radius: 5px !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-platform-size-row { border-radius: 4px; }
  #editorWorkflowWorkspace .social-studio-v2 .social-recommend-box { margin-top: 10px; padding: 9px !important; border-radius: 5px !important; }

  #editorWorkflowWorkspace .social-studio-v2 .social-result-stage-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px !important;
    align-items: center !important;
    padding-bottom: 10px !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-result-stage-head > div:first-child > strong { font-size: 14px !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-result-toolbar { grid-template-columns: 130px auto auto !important; gap: 5px !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-result-toolbar select,
  #editorWorkflowWorkspace .social-studio-v2 .social-result-toolbar button { min-height: 31px !important; font-size: 8px !important; }

  #editorWorkflowWorkspace .social-studio-v2 .social-preview-advice {
    margin: 9px 0 0 !important;
    padding: 8px 9px !important;
    border-radius: 4px !important;
    font-size: 8px !important;
    text-align: left !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-result-section {
    margin-top: 0 !important;
    padding: 11px 0 !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-result-head { justify-content: flex-start !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-result-head strong { font-size: 10px !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-result-head span { font-size: 8px !important; text-align: left !important; }

  #editorWorkflowWorkspace .social-studio-v2 .social-output-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: none !important;
    gap: 10px !important;
    justify-content: start !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-output-preview {
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-output-card figcaption { padding: 9px !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-output-card-title strong { font-size: 10px !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-output-card figcaption > span { font-size: 8px !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-output-card-actions { grid-template-columns: minmax(0, 1fr) minmax(74px, auto) !important; }

  #editorWorkflowWorkspace .social-studio-v2 .social-copy-view,
  #editorWorkflowWorkspace .social-studio-v2 .social-copy-view article { text-align: left !important; }

  #editorWorkflowWorkspace .social-studio-v2 .social-mockup-preset-grid,
  #editorWorkflowWorkspace .social-studio-v2 .social-layout-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  #editorWorkflowWorkspace .social-studio-v2 .social-mockup-live-panel { grid-template-columns: minmax(0, 1fr) !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-layout-controls { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-generate-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-generate-actions button { min-width: 0; min-height: 32px; font-size: 8px; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  #editorWorkflowWorkspace .social-studio-v2 .social-publish-layout {
    grid-template-columns: 250px minmax(0, 1fr) !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-v4-materials { grid-column: 1 !important; grid-row: 1 / span 7 !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-v4-platforms { grid-column: 2 !important; grid-row: 1 !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-v4-plan-config { grid-column: 2 !important; grid-row: 2 !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-v4-mockup { grid-column: 2 !important; grid-row: 3 !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-v4-rules { grid-column: 2 !important; grid-row: 4 !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-v4-generate { grid-column: 2 !important; grid-row: 5 !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-v4-advanced { grid-column: 2 !important; grid-row: 6 !important; }
  #editorWorkflowWorkspace .social-studio-v2 .social-v4-results {
    position: static !important;
    grid-column: 1 / -1 !important;
    grid-row: 8 !important;
    max-height: none !important;
  }
}

@media (min-width: 1680px) {
  #editorWorkflowWorkspace .social-studio-v2 .social-publish-layout {
    grid-template-columns: 286px minmax(360px, 420px) minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #editorWorkflowWorkspace .social-studio-v2 .social-output-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

#step-imageppt .image-to-ppt-panel {
  cursor: pointer;
  outline: 2px dashed transparent;
  outline-offset: -8px;
}

#step-imageppt .image-to-ppt-panel.dragging {
  border-color: color-mix(in srgb, var(--accent, #2563eb) 70%, transparent) !important;
  outline-color: color-mix(in srgb, var(--accent, #2563eb) 42%, transparent);
  background: color-mix(in srgb, var(--accent, #2563eb) 7%, var(--surface, #fff)) !important;
}

/* Final copy-planning containment. Later editor rules can carry persisted
   side-panel widths; this surface owns the full workspace until pages exist. */
@media (min-width: 981px) {
  #step-edit.editor-layout.copy-planning-mode,
  #step-edit.editor-layout.copy-planning-mode.left-panel-collapsed,
  #step-edit.editor-layout.copy-planning-mode.right-panel-collapsed,
  #step-edit.editor-layout.copy-planning-mode.left-panel-collapsed.right-panel-collapsed {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  #step-edit.editor-layout.copy-planning-mode > .copy-planning-workspace {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    padding: 16px !important;
    overflow: auto !important;
    overscroll-behavior: contain;
  }

  #step-edit.editor-layout.copy-planning-mode .copy-plan-shell {
    width: min(1600px, 100%) !important;
    height: auto !important;
    min-height: max(640px, 100%) !important;
    max-height: none !important;
    grid-template-rows: auto auto minmax(360px, 1fr) auto;
    margin: 0 auto !important;
    overflow: hidden;
    box-shadow: none !important;
  }

  #step-edit.editor-layout.copy-planning-mode .copy-review-shell {
    height: 100% !important;
    min-height: 0 !important;
  }

  #step-edit.editor-layout.copy-planning-mode .copy-review-layout {
    min-height: 0;
  }

  #step-edit.editor-layout.copy-planning-mode .copy-plan-layout {
    min-height: 360px;
    overflow: hidden;
  }

  #step-edit.editor-layout.copy-planning-mode :is(.copy-plan-controls, .copy-plan-analysis) {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }

  #step-edit.editor-layout.copy-planning-mode .copy-plan-actions {
    position: static;
    z-index: 2;
  }

body[data-active-step="edit"][data-editor-workflow-stage="copy"]:has(#step-edit.copy-planning-mode) .assistant-float-launcher {
    right: 22px !important;
    bottom: 82px !important;
  }
}

/* A short desktop window must keep the planning controls usable without the
   action bar covering the brief strip or the form. The middle row becomes the
   only scrolling region while the header, specification strip and actions
   retain their own layout space. */
@media (min-width: 981px) and (max-height: 720px) {
  #step-edit.editor-layout.copy-planning-mode > .copy-planning-workspace {
    padding: 8px !important;
  }

  #step-edit.editor-layout.copy-planning-mode .copy-plan-head {
    gap: 12px;
    padding: 10px 16px 9px;
  }

  #step-edit.editor-layout.copy-planning-mode .copy-plan-head h2 {
    font-size: 18px;
  }

  #step-edit.editor-layout.copy-planning-mode .copy-plan-head p {
    display: none;
  }

  #step-edit.editor-layout.copy-planning-mode .copy-plan-model {
    min-width: 190px;
  }

  #step-edit.editor-layout.copy-planning-mode .copy-plan-brief-strip > span {
    padding: 6px 10px;
  }

  #step-edit.editor-layout.copy-planning-mode .copy-plan-controls,
  #step-edit.editor-layout.copy-planning-mode .copy-plan-analysis {
    padding: 12px 14px;
  }

  #step-edit.editor-layout.copy-planning-mode .copy-plan-actions {
    gap: 8px;
    padding: 8px 14px;
  }

  #step-edit.editor-layout.copy-planning-mode .copy-plan-actions button {
    min-height: 34px;
  }
}

#newProjectPanel .new-project-source-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--v2-blue) 24%, var(--v2-line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--v2-blue-soft) 58%, var(--v2-panel-soft));
}

#newProjectPanel .new-project-source-panel.hidden { display: none !important; }

#newProjectPanel .new-project-source-dropzone {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 74px;
  padding: 11px;
  border: 1px dashed color-mix(in srgb, var(--v2-blue) 54%, var(--v2-line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--v2-panel) 68%, transparent);
  cursor: pointer;
}

#newProjectPanel .new-project-source-dropzone.dragging,
#newProjectPanel .new-project-source-panel.dragging .new-project-source-dropzone {
  border-color: var(--v2-blue);
  background: color-mix(in srgb, var(--v2-blue) 10%, var(--v2-panel));
}

#newProjectPanel .new-project-source-dropzone > svg,
#newProjectPanel .new-project-source-dropzone > i {
  width: 24px;
  height: 24px;
  color: var(--v2-blue);
}

#newProjectPanel .new-project-source-dropzone span,
#newProjectPanel .new-project-source-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

#newProjectPanel .new-project-source-dropzone strong { font-size: 12px; }
#newProjectPanel .new-project-source-dropzone small,
#newProjectPanel .new-project-source-copy small,
#newProjectPanel .new-project-source-status span,
#newProjectPanel .new-project-source-empty span { color: var(--v2-muted); font-size: 9px; line-height: 1.45; }
#newProjectPanel #newProjectSourceInput { display: none !important; }

#newProjectPanel .new-project-source-mode {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  align-items: start;
}

#newProjectPanel .new-project-source-choice {
  display: grid;
  min-width: 0;
  cursor: pointer;
}

#newProjectPanel .new-project-source-choice input { display: none; }

#newProjectPanel .new-project-source-choice > span {
  display: grid;
  min-height: 64px;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 7px;
  align-content: start;
  padding: 9px;
  border: 1px solid var(--v2-line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--v2-panel) 68%, transparent);
}

#newProjectPanel .new-project-source-choice.selected > span {
  border-color: color-mix(in srgb, var(--v2-blue) 62%, var(--v2-line));
  background: color-mix(in srgb, var(--v2-blue) 9%, var(--v2-panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v2-blue) 22%, transparent);
}

#newProjectPanel .new-project-source-choice svg { width: 16px; height: 16px; color: var(--v2-blue); }
#newProjectPanel .new-project-source-choice strong { font-size: 10px; line-height: 1.35; }
#newProjectPanel .new-project-source-choice small { grid-column: 2; color: var(--v2-muted); font-size: 8px; line-height: 1.4; }

@media (max-width: 760px) {
  #newProjectPanel .new-project-source-choice > span { min-height: 68px; }
}

#newProjectPanel .new-project-source-list { display: grid; gap: 8px; min-width: 0; }

#newProjectPanel .new-project-source-empty,
#newProjectPanel .new-project-source-status,
#newProjectPanel .new-project-source-item {
  display: grid;
  min-width: 0;
  border: 1px solid var(--v2-line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--v2-panel) 70%, transparent);
}

#newProjectPanel .new-project-source-empty {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
}

#newProjectPanel .new-project-source-empty strong { font-size: 10px; }
#newProjectPanel .new-project-source-empty svg { width: 16px; height: 16px; color: var(--v2-blue); }

#newProjectPanel .new-project-source-status {
  gap: 2px;
  padding: 8px 9px;
}

#newProjectPanel .new-project-source-status strong { font-size: 10px; line-height: 1.35; }
#newProjectPanel .new-project-source-status.warning strong { color: #b45309; }
#newProjectPanel .new-project-source-status.ready strong { color: #047857; }

#newProjectPanel .new-project-source-items {
  display: grid;
  gap: 6px;
  max-height: 142px;
  overflow: auto;
  scrollbar-gutter: stable;
}

#newProjectPanel .new-project-source-item {
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
}

#newProjectPanel .new-project-source-icon {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 5px;
  background: color-mix(in srgb, var(--v2-blue) 12%, var(--v2-panel));
  color: var(--v2-blue);
}

#newProjectPanel .new-project-source-icon svg { width: 14px; height: 14px; }
#newProjectPanel .new-project-source-copy strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
#newProjectPanel .new-project-source-item .compact-btn { min-height: 28px !important; padding: 0 8px !important; font-size: 9px !important; }

/* Representative-page style workflow */
body[data-editor-workflow-stage="copy"] #step-edit > .inspector {
  overflow: auto !important;
  scrollbar-gutter: stable;
}

.copy-representative-dock {
  position: sticky;
  bottom: 0;
  z-index: 12;
  display: grid;
  gap: 10px;
  margin: 12px -2px -8px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--v2-blue) 28%, var(--v2-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--v2-panel) 94%, transparent);
  box-shadow: 0 -10px 30px rgba(15, 23, 42, .12);
  backdrop-filter: blur(18px) saturate(145%);
}

.copy-representative-dock > header,
.copy-representative-dock > header > span,
.copy-representative-dock > header > span > span,
.copy-representative-status,
.copy-representative-next,
.copy-representative-next > span {
  display: flex;
  min-width: 0;
}

.copy-representative-dock > header {
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.copy-representative-dock > header > span { align-items: center; gap: 8px; }
.copy-representative-dock > header > span > svg { width: 17px; height: 17px; color: var(--v2-blue); }
.copy-representative-dock > header > span > span { flex-direction: column; gap: 2px; }
.copy-representative-dock > header strong { font-size: 12px; line-height: 1.35; }
.copy-representative-dock > header small { color: var(--v2-muted); font-size: 9px; }
.copy-representative-dock > header button {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid var(--v2-line);
  border-radius: 5px;
  background: var(--v2-panel-soft);
  color: var(--v2-text);
  font-size: 9px;
}
.copy-representative-dock > header button svg { width: 13px; height: 13px; }

.copy-representative-status {
  align-items: flex-start;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--v2-line);
  border-radius: 6px;
  background: var(--v2-panel-soft);
}
.copy-representative-status > svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: #b45309; }
.copy-representative-status.ready > svg { color: #047857; }
.copy-representative-status.failed > svg { color: #b91c1c; }
.copy-representative-status > span { display: grid; min-width: 0; gap: 3px; }
.copy-representative-status strong { font-size: 10px; line-height: 1.4; }
.copy-representative-status small { color: var(--v2-muted); font-size: 9px; line-height: 1.45; }

.copy-source-influence {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: var(--v2-muted);
  font-size: 10px;
}
.copy-source-influence select { min-width: 0; height: 30px; border-radius: 5px; font-size: 10px; }

.copy-reference-upload {
  display: grid;
  width: 100%;
  min-height: 42px;
  grid-template-columns: 20px minmax(0, 1fr) 15px;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid var(--v2-line);
  border-radius: 6px;
  background: var(--v2-panel-soft);
  color: var(--v2-text);
  text-align: left;
}
.copy-reference-upload > svg { width: 15px; height: 15px; color: var(--v2-blue); }
.copy-reference-upload > svg:last-child { width: 13px; height: 13px; color: var(--v2-faint); }
.copy-reference-upload > span { display: grid; min-width: 0; gap: 2px; }
.copy-reference-upload strong { font-size: 10px; }
.copy-reference-upload small { color: var(--v2-muted); font-size: 8px; }

body[data-editor-workflow-stage="copy"] #step-edit .ribbon-ai-actions,
body[data-editor-workflow-stage="style"] #step-edit .ribbon-ai-actions {
  display: none !important;
}

.copy-representative-next {
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--v2-blue) 56%, var(--v2-line));
  border-radius: 6px;
  background: var(--v2-blue);
  color: #fff;
  text-align: left;
}
.copy-representative-next > span { flex-direction: column; gap: 3px; }
.copy-representative-next strong { font-size: 11px; line-height: 1.3; }
.copy-representative-next small { color: rgba(255,255,255,.78); font-size: 8px; line-height: 1.35; }
.copy-representative-next > svg { width: 17px; height: 17px; flex: 0 0 auto; }
.copy-representative-next:disabled { border-color: var(--v2-line); background: var(--v2-panel-soft); color: var(--v2-muted); opacity: .72; }
.copy-representative-next:disabled small { color: var(--v2-faint); }

.representative-thumb-select {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 5;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 5px;
  background: rgba(18, 24, 32, .68);
  color: #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,.2);
}
.representative-thumb-select svg { width: 14px; height: 14px; }
.representative-thumb-select b { font-size: 11px; }
.representative-thumb-select.selected { border-color: #047857; background: #047857; }
.page-workflow-thumb.selected-representative .workflow-thumb-image { border-color: color-mix(in srgb, #047857 76%, var(--v2-line)); box-shadow: inset 0 0 0 2px #047857; }

.style-recommendation-review { display: grid; gap: 14px; }
.style-recommendation-review > section { display: grid; gap: 8px; }
.style-recommendation-review .workflow-inspector-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.style-recommendation-review .workflow-inspector-head > em { color: var(--v2-muted); font-size: 9px; font-style: normal; white-space: nowrap; }

.style-representative-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.style-representative-strip figure { display: grid; min-width: 0; gap: 3px; margin: 0; }
.style-representative-strip figure > img,
.style-representative-strip figure > span {
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--v2-line);
  border-radius: 4px;
  background: var(--v2-panel-soft);
  object-fit: contain;
  color: var(--v2-muted);
  font-size: 10px;
}
.style-representative-strip figcaption { overflow: hidden; color: var(--v2-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.style-analysis-progress {
  display: grid;
  min-height: 176px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 16px;
  border: 1px dashed color-mix(in srgb, var(--v2-blue) 42%, var(--v2-line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--v2-blue-soft) 34%, var(--v2-panel));
  text-align: center;
}
.style-analysis-progress strong { font-size: 12px; }
.style-analysis-progress small { max-width: 240px; color: var(--v2-muted); font-size: 9px; line-height: 1.5; }

.style-recommendation-routes { display: grid; gap: 8px; }
.style-recommendation-route {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--v2-line);
  border-radius: 7px;
  background: var(--v2-panel);
}
.style-recommendation-route.selected { border-color: color-mix(in srgb, var(--v2-blue) 64%, var(--v2-line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v2-blue) 24%, transparent); }
.style-recommendation-route > button { display: grid; min-width: 0; grid-template-columns: 23px minmax(0, 1fr) 18px; gap: 8px; align-items: center; padding: 0; border: 0; background: transparent; color: var(--v2-text); text-align: left; }
.style-recommendation-route > button > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.style-recommendation-route > button strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.style-recommendation-route > button small { color: var(--v2-muted); font-size: 8px; }
.style-recommendation-route > button > svg { width: 17px; height: 17px; color: var(--v2-blue); }
.style-route-index { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 4px; background: var(--v2-panel-soft); color: var(--v2-muted); font-size: 9px; font-weight: 700; }
.style-recommendation-route.selected .style-route-index { background: var(--v2-blue); color: #fff; }
.style-recommendation-route > p { margin: 0; color: var(--v2-muted); font-size: 9px; line-height: 1.5; }
.style-route-summary { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.style-route-summary > span { display: flex; flex: 0 0 auto; gap: 3px; }
.style-route-summary > span i { display: block; width: 15px; height: 15px; border: 1px solid rgba(127,127,127,.24); border-radius: 3px; }
.style-route-summary > em { overflow: hidden; color: var(--v2-muted); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.style-route-details { display: grid; gap: 4px; margin: 0; padding-top: 7px; border-top: 1px solid var(--v2-line); }
.style-route-details > div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px; font-size: 8px; line-height: 1.45; }
.style-route-details dt { color: var(--v2-faint); }
.style-route-details dd { min-width: 0; margin: 0; color: var(--v2-muted); overflow-wrap: anywhere; }

.style-recommendation-advanced { border-top: 1px solid var(--v2-line); }
.style-recommendation-advanced > summary { display: flex; min-height: 38px; align-items: center; justify-content: space-between; cursor: pointer; color: var(--v2-muted); font-size: 9px; }
.style-recommendation-advanced > summary > span { display: inline-flex; align-items: center; gap: 6px; }
.style-recommendation-advanced > summary svg { width: 13px; height: 13px; }
.style-recommendation-advanced > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding-bottom: 10px; }
.style-recommendation-advanced .style-stage-direction-control { grid-column: 1 / -1; }
.style-recommendation-footer > span { color: var(--v2-text); font-size: 10px; font-weight: 650; }
.style-layout-mode-actions { display: grid; gap: 6px; width: 100%; }
.style-layout-mode-actions .workflow-wide-action { display: inline-flex; width: 100%; min-height: 34px; align-items: center; justify-content: center; gap: 6px; white-space: normal; line-height: 1.35; }
.style-layout-mode-actions .workflow-wide-action svg { width: 14px; height: 14px; flex: 0 0 auto; }
.style-recommendation-footer > small { color: var(--v2-muted); font-size: 8px; line-height: 1.45; }

.style-source-pages-dialog { width: min(920px, calc(100vw - 32px)); }
.style-source-pages-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 16px; }
.style-source-page {
  display: grid;
  min-width: 0;
  min-height: 86px;
  grid-template-columns: 112px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--v2-line);
  border-radius: 6px;
  background: var(--v2-panel);
  cursor: pointer;
}
.style-source-page.selected { border-color: color-mix(in srgb, var(--v2-blue) 60%, var(--v2-line)); background: color-mix(in srgb, var(--v2-blue-soft) 44%, var(--v2-panel)); }
.style-source-page > input { position: absolute; opacity: 0; pointer-events: none; }
.style-source-page-preview { position: relative; display: grid !important; width: 112px; aspect-ratio: 16 / 9; place-items: center; overflow: hidden; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel-soft); }
.style-source-page-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.style-source-page-preview b { color: var(--v2-muted); font-size: 11px; }
.style-source-page-preview em { position: absolute; left: 4px; bottom: 4px; padding: 2px 4px; border-radius: 3px; background: rgba(15,23,42,.76); color: #fff; font-size: 8px; font-style: normal; }
.style-source-page > span:nth-child(3) { display: grid; min-width: 0; gap: 4px; }
.style-source-page > span:nth-child(3) strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.style-source-page > span:nth-child(3) small { display: -webkit-box; overflow: hidden; color: var(--v2-muted); font-size: 8px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.style-source-page > svg { width: 17px; height: 17px; color: var(--v2-blue); }

@media (min-width: 1280px) {
  #step-edit.editor-layout.style-preview-mode:not(.workflow-panel-open) {
    grid-template-columns: var(--editor-left-width, 220px) minmax(600px, 1fr) max(var(--editor-right-width, 300px), 380px) !important;
  }
  #step-edit.editor-layout.style-preview-mode.left-panel-collapsed:not(.workflow-panel-open) {
    grid-template-columns: 0 minmax(600px, 1fr) max(var(--editor-right-width, 300px), 380px) !important;
  }
}

@media (max-width: 1279px) {
  .style-source-pages-list { grid-template-columns: 1fr; }
}

.review-snapshot-summary,
.review-ai-check,
.review-issues-panel,
.review-manual-tools,
.review-next-actions {
  display: grid;
  gap: 9px;
}

.review-snapshot-summary > p,
.review-ai-check > p,
.review-manual-tools > p {
  margin: 0;
  color: var(--v2-muted);
  font-size: 9px;
  line-height: 1.5;
}

.review-snapshot-summary dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.review-snapshot-summary dl > div {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--v2-line);
}

.review-snapshot-summary dt,
.review-snapshot-summary dd {
  margin: 0;
  font-size: 9px;
}

.review-snapshot-summary dt { color: var(--v2-muted); }
.review-snapshot-summary dd { color: var(--v2-text); overflow-wrap: anywhere; }
.review-action-reason { color: #b42318; font-size: 8px; }
.review-issue-list,
.review-candidate-list { display: grid; gap: 7px; }

.review-issue-row {
  overflow: hidden;
  border: 1px solid var(--v2-line);
  border-left: 3px solid #dc6803;
  border-radius: 6px;
  background: var(--v2-panel);
}

.review-issue-row.error { border-left-color: #d92d20; }
.review-issue-row.info { border-left-color: #1570ef; }
.review-issue-row.selected { box-shadow: 0 0 0 2px color-mix(in srgb, var(--v2-blue) 25%, transparent); }
.review-issue-row-main {
  display: grid;
  width: 100%;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: start;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--v2-text);
  text-align: left;
}

.review-issue-row-main > b {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: #dc6803;
  color: #fff;
  font-size: 9px;
}

.review-issue-row.error .review-issue-row-main > b { background: #d92d20; }
.review-issue-row.info .review-issue-row-main > b { background: #1570ef; }
.review-issue-row-main > span { display: grid; min-width: 0; gap: 3px; }
.review-issue-row-main strong { font-size: 10px; }
.review-issue-row-main small { color: var(--v2-muted); font-size: 8px; line-height: 1.4; }
.review-issue-row-main em { color: var(--v2-muted); font-size: 8px; font-style: normal; white-space: nowrap; }
.review-issue-row-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 0 7px 7px; }
.review-issue-row-actions button { display: inline-flex; min-width: 0; min-height: 28px; align-items: center; justify-content: center; gap: 4px; padding: 0 5px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel-soft); color: var(--v2-text); font-size: 8px; }
.review-issue-row-actions svg { width: 12px; height: 12px; }
.review-manual-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.review-selected-detail { display: grid; gap: 5px; padding: 8px; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-panel-soft); }
.review-selected-detail strong { font-size: 9px; }
.review-selected-detail p,
.review-selected-detail small { margin: 0; color: var(--v2-muted); font-size: 8px; line-height: 1.45; }
.review-candidate-divider { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--v2-line); }
.review-candidate-divider span { font-size: 9px; font-weight: 700; }
.review-candidate-divider em { color: var(--v2-muted); font-size: 8px; font-style: normal; }
.review-candidate-card { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; padding: 7px; border: 1px solid var(--v2-line); border-radius: 6px; background: var(--v2-panel-soft); }
.review-candidate-preview { overflow: hidden; padding: 0; border: 1px solid var(--v2-line); border-radius: 4px; background: #fff; aspect-ratio: 16 / 9; }
.review-candidate-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.review-candidate-card > div { display: grid; min-width: 0; align-content: start; gap: 3px; }
.review-candidate-card > div strong { font-size: 9px; }
.review-candidate-card > div small { color: var(--v2-muted); font-size: 8px; }
.review-candidate-card footer { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.review-candidate-card footer button { min-height: 30px; font-size: 8px; }

@media (max-width: 1279px) {
  .review-issue-row-actions,
  .review-manual-actions { grid-template-columns: 1fr; }
}

.reference-redraw-section,
.reference-review-compare,
.reference-review-issues,
.reference-review-editable,
.reference-delivery-gate,
.reference-delivery-exports {
  display: grid;
  gap: 10px;
}

/* Project reference intent: one calm card per image, with plain-language
   multi-select controls. This keeps the frequently used setting visible
   without making the reference stage feel like an advanced form. */
html:root body .reference-guide-section { gap: 10px; border: 1px solid var(--neutral-line); border-radius: 10px; background: var(--neutral-panel); }
html:root body .reference-guide-intro { margin: 0; color: var(--neutral-muted); font-size: 11px; line-height: 1.5; }
html:root body .reference-guide-list { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 10px; }
html:root body .reference-guide-card { display: grid; min-width: 0; box-sizing: border-box; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px; border: 1px solid var(--neutral-line); border-radius: 8px; background: var(--neutral-panel); color: var(--neutral-text); box-shadow: none; }
html:root body .reference-guide-card-head { display: flex; min-width: 0; align-items: center; gap: 7px; }
html:root body .reference-guide-card-head img { width: 42px; height: 30px; object-fit: cover; border-radius: 4px; border: 1px solid var(--neutral-line); background: var(--neutral-panel-soft); flex: 0 0 auto; }
html:root body .reference-guide-card-head > span { display: grid; min-width: 0; flex: 1 1 auto; gap: 3px; }
html:root body .reference-guide-card-head strong { display: block; min-width: 0; overflow: hidden; color: var(--neutral-text); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.4; }
html:root body .reference-guide-card-head small { color: var(--neutral-muted); font-size: 10px; line-height: 1.4; }
html:root body .reference-guide-enabled { display: inline-flex; flex: 0 0 auto; gap: 4px; align-items: center; padding: 3px 0; color: var(--neutral-muted); font-size: 11px; line-height: 1.4; white-space: nowrap; cursor: pointer; }
html:root body .reference-guide-enabled > span { display: inline; flex: none; white-space: nowrap; }
/* These are native checkboxes, not full-width text fields. Reset the shared
   form minimum height/padding in both the header and the reference choices. */
html:root body .reference-guide-card :is(.reference-guide-enabled, .reference-guide-modes) input[type="checkbox"],
html:root body #referenceStageInspector .reference-guide-card :is(.reference-guide-enabled, .reference-guide-modes) input[type="checkbox"] { appearance: auto; display: block; flex: 0 0 14px; width: 14px !important; height: 14px !important; min-width: 14px !important; max-width: 14px !important; min-height: 14px !important; max-height: 14px !important; padding: 0 !important; margin: 0; align-self: center; border: 0 !important; border-radius: 3px !important; accent-color: var(--neutral-accent); box-shadow: none !important; cursor: pointer; }
html:root body .reference-guide-section-label { color: var(--neutral-muted); font-size: 11px; line-height: 1.4; }
html:root body .reference-guide-modes { display: grid; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 6px; }
html:root body .reference-guide-modes label { display: flex; min-width: 0; min-height: 30px; box-sizing: border-box; gap: 6px; align-items: center; padding: 5px 6px; border: 1px solid var(--neutral-line); border-radius: 5px; background: var(--neutral-panel); color: var(--neutral-text); font-size: 11px; line-height: 1.4; cursor: pointer; }
html:root body .reference-guide-modes label > span { min-width: 0; white-space: nowrap; }
html:root body .reference-guide-modes label:has(input:checked) { border-color: color-mix(in srgb, var(--neutral-accent) 48%, var(--neutral-line)); background: var(--neutral-accent-soft); }
html:root body .reference-guide-settings { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html:root body .reference-guide-settings label { display: grid; min-width: 0; align-content: start; gap: 5px; color: var(--neutral-muted); font-size: 11px; line-height: 1.4; }
html:root body .reference-guide-settings label > span { display: block; white-space: nowrap; }
html:root body .reference-guide-settings select { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; height: 32px; min-height: 32px !important; padding: 0 6px !important; border: 1px solid var(--neutral-line); border-radius: 5px !important; background: var(--neutral-panel-soft); color: var(--neutral-text); font-size: 11px; line-height: normal; box-shadow: none; }
html:root body .reference-guide-summary { display: flex; gap: 6px; align-items: flex-start; color: var(--neutral-muted); font-size: 11px; line-height: 1.45; }
html:root body .reference-guide-summary svg { flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--neutral-accent); }
html:root body .reference-guide-save { justify-content: center; width: 100%; }

.reference-redraw-dropzone {
  display: grid;
  min-height: 116px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--v2-blue) 48%, var(--v2-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--v2-blue-soft) 34%, var(--v2-panel));
  color: var(--v2-text);
  text-align: left;
}

.reference-redraw-section.dragging .reference-redraw-dropzone,
.reference-redraw-section.dragging {
  border-color: var(--v2-blue);
  background: color-mix(in srgb, var(--v2-blue-soft) 54%, var(--v2-panel));
}

.reference-redraw-dropzone svg,
.reference-redraw-file-icon svg {
  width: 24px;
  height: 24px;
  color: var(--v2-blue);
}

.reference-redraw-dropzone span,
.reference-redraw-reference > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.reference-redraw-dropzone strong,
.reference-redraw-reference strong {
  font-size: 11px;
}

.reference-redraw-dropzone small,
.reference-redraw-reference small,
.reference-redraw-defaults,
.reference-review-compare small,
.reference-delivery-gate > p {
  margin: 0;
  color: var(--v2-muted);
  font-size: 9px;
  line-height: 1.45;
}

.reference-redraw-reference {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 26px;
  gap: 9px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--v2-line);
  border-radius: 7px;
  background: var(--v2-panel-soft);
}

.reference-redraw-reference img,
.reference-redraw-file-icon {
  display: grid;
  width: 64px;
  aspect-ratio: 16 / 10;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--v2-line);
  border-radius: 5px;
  background: var(--v2-panel);
  object-fit: cover;
}

.reference-redraw-reference > button {
  border: 0;
  background: transparent;
  color: var(--v2-muted);
}

.reference-redraw-analysis,
.reference-redraw-generated,
.reference-redraw-advanced {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--v2-line);
  border-radius: 7px;
  background: var(--v2-panel);
}

.reference-redraw-analysis > strong,
.reference-redraw-generated strong {
  font-size: 10px;
}

.reference-redraw-analysis dl,
.reference-redraw-score {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.reference-redraw-analysis dl > div,
.reference-redraw-score > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px;
  border-radius: 5px;
  background: var(--v2-panel-soft);
}

.reference-redraw-analysis dt,
.reference-redraw-score dt {
  color: var(--v2-faint);
  font-size: 8px;
}

.reference-redraw-analysis dd,
.reference-redraw-score dd {
  min-width: 0;
  margin: 0;
  color: var(--v2-text);
  font-size: 9px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.reference-redraw-modes {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

.reference-redraw-modes legend {
  margin-bottom: 2px;
  color: var(--v2-muted);
  font-size: 9px;
  font-weight: 650;
}

.reference-redraw-modes label {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 7px;
  border: 1px solid var(--v2-line);
  border-radius: 6px;
  background: var(--v2-panel);
}

.reference-redraw-modes label.active {
  border-color: color-mix(in srgb, var(--v2-blue) 58%, var(--v2-line));
  background: color-mix(in srgb, var(--v2-blue-soft) 36%, var(--v2-panel));
}

.reference-redraw-modes label span {
  display: grid;
  gap: 2px;
}

.reference-redraw-modes small,
.reference-review-issue small {
  color: var(--v2-muted);
  font-size: 8px;
  line-height: 1.35;
}

.reference-redraw-advanced {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reference-redraw-advanced label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--v2-muted);
  font-size: 8px;
}

.reference-redraw-advanced select {
  min-width: 0;
}

.reference-redraw-save-target {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--v2-line);
  border-radius: 8px;
  background: var(--v2-panel-soft);
}

.reference-redraw-save-target span {
  font-size: 10px;
  font-weight: 700;
  color: var(--v2-text);
}

.reference-redraw-save-target select {
  min-width: 0;
}

.reference-redraw-save-target small {
  color: var(--v2-muted);
  font-size: 8px;
  line-height: 1.35;
}

.reference-redraw-check {
  grid-column: 1 / -1;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
}

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

.reference-redraw-candidate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.reference-redraw-candidate {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--v2-line);
  border-radius: 6px;
  background: var(--v2-panel-soft);
  color: var(--v2-text);
  text-align: left;
}

.reference-redraw-candidate.selected {
  border-color: var(--v2-blue);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v2-blue) 38%, transparent);
}

.reference-redraw-candidate img,
.reference-redraw-candidate > span:first-child {
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: hidden;
  border-radius: 4px;
  background: var(--v2-panel);
  object-fit: cover;
  color: var(--v2-muted);
  font-size: 9px;
}

.reference-redraw-quality,
.reference-review-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.reference-review-compare-grid > div {
  display: grid;
  gap: 4px;
  min-height: 76px;
  padding: 9px;
  border: 1px solid var(--v2-line);
  border-radius: 7px;
  background: var(--v2-panel-soft);
}

.reference-review-issue {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--v2-line);
  border-radius: 7px;
  background: var(--v2-panel);
}

.reference-review-issue.blocking {
  border-color: color-mix(in srgb, #dc2626 58%, var(--v2-line));
}

.reference-review-issue.warning {
  border-color: color-mix(in srgb, #d97706 50%, var(--v2-line));
}

.reference-review-issue.closed {
  opacity: .62;
}

.reference-review-issue > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.reference-review-issue p {
  margin: 0;
  color: var(--v2-muted);
  font-size: 9px;
  line-height: 1.45;
}

.reference-review-issue footer {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.reference-review-issue footer button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 0 7px;
  border: 1px solid var(--v2-line);
  border-radius: 5px;
  background: var(--v2-panel-soft);
  color: var(--v2-text);
  font-size: 8px;
}

.reference-review-issue footer svg {
  width: 12px;
  height: 12px;
}

@media (max-width: 1279px) {
  .reference-redraw-advanced,
  .reference-redraw-actions,
  .reference-redraw-confirm-actions,
  .reference-review-actions,
  .reference-delivery-export-grid,
  .reference-review-compare-grid,
  .reference-redraw-quality {
    grid-template-columns: 1fr;
  }
}
/* 2026-10 simplified copy planning: keep the first screen understandable. */
.copy-plan-simple .copy-plan-head { padding: 24px 28px 18px; }
.copy-plan-simple .copy-plan-head h2 { font-size: 22px; letter-spacing: -.02em; }
.copy-plan-simple .copy-plan-head p { font-size: 12px; white-space: normal; }
.copy-plan-progress { display:flex; align-items:center; gap:10px; padding:12px 28px; border-bottom:1px solid var(--v2-line); color:var(--v2-faint); }
.copy-plan-progress span { display:flex; align-items:center; gap:7px; font-size:11px; }
.copy-plan-progress b { display:grid; width:22px; height:22px; place-items:center; border:1px solid var(--v2-line-strong); border-radius:50%; color:var(--v2-muted); font-size:10px; font-weight:600; }
.copy-plan-progress span.active { color:var(--v2-text); font-weight:650; }
.copy-plan-progress span.active b { border-color:var(--v2-text); color:var(--v2-text); }
.copy-plan-progress i { width:28px; height:1px; background:var(--v2-line); }
.copy-plan-simple .copy-plan-brief-strip { grid-template-columns:minmax(0,2fr) repeat(3,minmax(110px,1fr)); }
.copy-plan-simple .copy-plan-brief-strip > span { padding:12px 16px; }
.copy-plan-simple .copy-plan-brief-strip small { font-size:10px; }
.copy-plan-simple .copy-plan-brief-strip strong { font-size:12px; }
.copy-plan-simple .copy-plan-controls { padding:24px 28px; }
.copy-plan-simple .copy-plan-analysis { padding:24px; }
.copy-plan-main-section { margin-top:0 !important; padding-top:0 !important; border-top:0 !important; }
.copy-plan-main-section > header { margin-bottom:18px; }
.copy-plan-main-section > header strong { font-size:16px; }
.copy-plan-main-section > header span { font-size:11px; }
.copy-plan-simple .copy-plan-form { display:grid; grid-template-columns:1fr; gap:14px; }
.copy-plan-simple .copy-plan-form label > span { font-size:11px; color:var(--v2-text); }
.copy-plan-simple .copy-plan-form input { min-height:46px; padding:11px 13px; border-radius:8px; background:var(--v2-panel); font-size:13px; }
.copy-plan-more-settings { margin-top:5px; border-top:1px solid var(--v2-line); }
.copy-plan-more-settings summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 2px 8px; color:var(--v2-text); cursor:pointer; list-style:none; font-size:12px; font-weight:650; }
.copy-plan-more-settings summary::-webkit-details-marker { display:none; }
.copy-plan-more-settings summary::after { content:'⌄'; color:var(--v2-muted); font-size:16px; transform:translateY(-2px); }
.copy-plan-more-settings[open] summary::after { transform:rotate(180deg) translateY(-2px); }
.copy-plan-more-settings summary small { margin-left:auto; color:var(--v2-muted); font-size:10px; font-weight:400; }
.copy-plan-advanced-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; padding:9px 0 4px; }
.copy-plan-advanced-grid .copy-plan-form label > span { color:var(--v2-muted); font-size:10px; }
.copy-plan-advanced-grid select, .copy-plan-advanced-grid textarea { min-height:40px; font-size:11px; }
.copy-plan-advanced-grid textarea { min-height:64px; }
.copy-plan-simple .copy-plan-actions { grid-template-columns:minmax(0,1fr) auto auto; padding:14px 28px; }
.copy-plan-simple .copy-plan-actions button { min-height:42px; border-radius:8px; padding-inline:18px; }
.copy-plan-simple .copy-plan-actions > div strong { font-size:12px; }
.copy-plan-simple .copy-plan-actions > div span { font-size:10px; }
.copy-plan-simple .copy-plan-analysis { background:var(--v2-panel); }
@media (max-width: 900px) {
  .copy-plan-simple .copy-plan-layout { grid-template-columns:1fr; }
  .copy-plan-simple .copy-plan-analysis { border-top:1px solid var(--v2-line); border-left:0; }
  .copy-plan-simple .copy-plan-brief-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .copy-plan-simple .copy-plan-head, .copy-plan-simple .copy-plan-controls, .copy-plan-simple .copy-plan-analysis { padding-inline:16px; }
  .copy-plan-progress { padding-inline:16px; gap:6px; }
  .copy-plan-progress span { font-size:10px; }
  .copy-plan-progress span em { display:none; }
  .copy-plan-progress i { flex:1; width:auto; }
  .copy-plan-simple .copy-plan-brief-strip { grid-template-columns:1fr 1fr; }
  .copy-plan-simple .copy-plan-actions { grid-template-columns:1fr; padding-inline:16px; }
  .copy-plan-simple .copy-plan-actions button { width:100%; }
  .copy-plan-advanced-grid { grid-template-columns:1fr; }
  .copy-plan-more-settings summary small { display:none; }
}

/* 2026-10-02 simple workflow layout and neutral palette fix */
.copy-plan-shell.copy-plan-simple {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  min-height: 0;
  height: calc(100% - 40px);
  overflow: hidden;
  background: var(--v2-panel, #fff);
}
.copy-plan-simple .copy-plan-brief-strip {
  min-height: 0;
  height: auto;
  align-self: start;
  background: var(--v2-panel, #fff);
}
.copy-plan-simple .copy-plan-brief-strip > span {
  min-height: 58px;
  background: transparent;
}
.copy-plan-simple .copy-plan-layout {
  min-height: 0;
  overflow: hidden;
}
.copy-plan-simple .copy-plan-controls,
.copy-plan-simple .copy-plan-analysis {
  min-height: 0;
  overflow: auto;
}
.copy-plan-simple .copy-plan-analysis {
  background: var(--v2-panel, #fff);
}
.copy-plan-simple .copy-plan-kicker,
.copy-plan-simple .copy-plan-progress span.active,
.copy-plan-simple .copy-plan-section > header em,
.copy-plan-simple .copy-plan-analysis-result > header span {
  color: var(--v2-muted, #666) !important;
}
.copy-plan-simple .copy-plan-progress b {
  border-color: var(--v2-line-strong, #cfcfcf);
  color: var(--v2-muted, #666);
}
.copy-plan-simple .copy-plan-progress span.active b {
  border-color: var(--v2-text, #222);
  color: var(--v2-text, #222);
}
.copy-plan-simple .copy-plan-progress i,
.copy-plan-simple .copy-plan-brief-strip > span {
  background: transparent;
}
.copy-plan-simple .copy-plan-form input,
.copy-plan-simple .copy-plan-form select,
.copy-plan-simple .copy-plan-form textarea {
  background: var(--v2-panel, #fff);
}
@media (max-width: 900px) {
  .copy-plan-shell.copy-plan-simple { height: calc(100% - 28px); }
}
@media (max-width: 560px) {
  .copy-plan-shell.copy-plan-simple { height: calc(100% - 20px); }
}


/* Fix the five-row simple copy layout inside the editor shell. */
@media (min-width: 981px) {
  #step-edit.editor-layout.copy-planning-mode .copy-plan-shell.copy-plan-simple {
    grid-template-rows: auto auto auto minmax(360px, 1fr) auto !important;
    min-height: 0 !important;
    height: calc(100% - 40px) !important;
  }
}
@media (min-width: 981px) and (max-height: 720px) {
  #step-edit.editor-layout.copy-planning-mode .copy-plan-shell.copy-plan-simple {
    height: calc(100% - 16px) !important;
  }
}

/* /file-center.css */
/* ==== consolidated from /file-center.css (cascade order preserved) ==== */
.file-center-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  margin-left: 8px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
}

.file-center-trigger:hover,
.file-center-trigger:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--line) 42%, transparent);
  border-color: var(--line);
  outline: none;
}

.file-center-trigger svg {
  width: 17px;
  height: 17px;
}

.file-center {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: block;
}

.file-center.hidden {
  display: none;
}

.file-center-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 29, 0.34);
  backdrop-filter: blur(4px);
}

.file-center-shell {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  background: var(--panel);
  box-shadow: 0 28px 80px rgba(18, 30, 54, 0.24);
}

.file-center-nav {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 18px 14px 20px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 90%, var(--bg));
  border-right: 1px solid var(--line);
}

.file-center-nav-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 6px 22px;
}

.file-center-nav-head > div {
  display: grid;
  gap: 3px;
}

.file-center-nav-head strong {
  font-size: 18px;
  line-height: 1.1;
}

.file-center-nav-head span,
.file-center-content-head p,
.file-center-card p,
.file-center-detail p,
.file-center-muted {
  color: var(--muted);
}

.file-center-nav-head span {
  font-size: 11px;
}

.file-center-back,
.file-center-content-actions .assistant-icon-btn {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: transparent;
}

.file-center-back:hover,
.file-center-content-actions .assistant-icon-btn:hover {
  background: color-mix(in srgb, var(--line) 44%, transparent);
}

.file-center-back svg,
.file-center-content-actions .assistant-icon-btn svg {
  width: 17px;
  height: 17px;
}

.file-center-nav-list {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.file-center-nav-label {
  display: block;
  padding: 8px 12px 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.file-center-nav-list button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text);
  background: transparent;
  text-align: left;
  font-size: 14px;
}

.file-center-nav-list button:hover,
.file-center-nav-list button:focus-visible,
.file-center-nav-list button.active {
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
  outline: none;
}

.file-center-nav-list button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.file-center-nav-divider {
  height: 1px;
  margin: 12px 12px;
  background: var(--line);
}

.file-center-nav-spacer {
  flex: 1;
  min-height: 18px;
}

.file-center-content {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  color: #17202c;
  background: var(--panel);
}

.file-center-content-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 34px 48px 25px;
  border-bottom: 1px solid var(--line);
}

.file-center-content-head > div:first-child {
  min-width: 0;
}

.file-center-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.file-center-content-head h2 {
  margin: 0;
  color: #17202c !important;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.12;
}

.file-center-content-head p {
  margin: 8px 0 0;
  font-size: 14px;
}

.file-center-content-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.file-center-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.file-center-status[data-status="busy"] {
  color: var(--primary-strong);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.file-center-status[data-status="error"] {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 32%, var(--line));
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.file-center-body {
  min-height: 0;
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 36px 48px 52px;
}

.file-center-overview-grid,
.file-center-command-grid,
.file-center-fact-grid {
  display: grid;
  gap: 14px;
}

.file-center-overview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 980px;
}

.file-center-command-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 820px;
}

.file-center-card,
.file-center-command,
.file-center-detail,
.file-center-dropzone,
.file-center-recent-row {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 96%, var(--bg));
}

.file-center-card {
  display: grid;
  min-height: 150px;
  gap: 11px;
  padding: 20px;
  text-align: left;
}

button.file-center-card,
button.file-center-command,
button.file-center-recent-row {
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.file-center-card:hover,
.file-center-command:hover,
.file-center-recent-row:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  box-shadow: 0 10px 24px rgba(36, 94, 219, 0.08);
  transform: translateY(-1px);
}

.file-center-card svg,
.file-center-command svg {
  width: 22px;
  height: 22px;
  color: var(--primary);
}

.file-center-card strong,
.file-center-command strong {
  color: #17202c;
  font-size: 15px;
}

.file-center-card p,
.file-center-command p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.file-center-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  max-width: 980px;
  margin: 0 0 15px;
}

.file-center-section-title h3 {
  margin: 0;
  color: #17202c !important;
  font-size: 16px;
}

.file-center-section-title span {
  color: var(--muted);
  font-size: 12px;
}

.file-center-command {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 17px;
}

.file-center-command > span {
  display: grid;
  gap: 5px;
}

.file-center-command + .file-center-command {
  margin-top: 0;
}

.file-center-dropzone {
  display: grid;
  max-width: 980px;
  min-height: 250px;
  place-items: center;
  gap: 12px;
  margin-bottom: 30px;
  padding: 32px;
  border-style: dashed;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}

.file-center-dropzone.dragging,
.file-center-dropzone:hover,
.file-center-dropzone:focus-visible {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, var(--panel));
  outline: none;
}

.file-center-dropzone > svg {
  width: 42px;
  height: 42px;
  color: var(--primary);
}

/* Global glass-button rules do not always carry their foreground color into
   nested spans. Keep the File Center's primary upload action readable in
   both themes and at every desktop size. */
.file-center-dropzone .primary-btn,
.file-center-dropzone .primary-btn > span,
.file-center-dropzone .primary-btn > svg {
  color: #fff !important;
}

.file-center-dropzone strong {
  display: block;
  font-size: 17px;
}

.file-center-dropzone span {
  display: block;
  max-width: 560px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.file-center-import-state {
  display: flex;
  max-width: 980px;
  align-items: center;
  gap: 13px;
  margin: 0 0 30px;
  padding: 13px 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--line));
  border-radius: 8px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 7%, var(--panel));
}

.file-center-import-state svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.file-center-import-state > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.file-center-import-state small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-center-import-state > em {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.file-center-import-progress {
  display: block;
  width: min(520px, 56vw);
  height: 4px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 13%, var(--line));
}

.file-center-import-progress > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width .2s ease;
}

.file-center-import-state.busy > svg,
.file-center-import-state.cancelling > svg {
  animation: file-center-spin 1s linear infinite;
}

@keyframes file-center-spin {
  to { transform: rotate(360deg); }
}

.file-center-role-panel {
  display: grid;
  max-width: 980px;
  gap: 15px;
  margin: 0 0 30px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 96%, var(--bg));
}

.file-center-role-panel > header,
.file-center-role-panel > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.file-center-role-panel > header > div {
  display: grid;
  gap: 4px;
}

.file-center-role-panel > header span,
.file-center-role-panel > header > em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.file-center-role-panel > footer {
  justify-content: flex-end;
  padding-top: 2px;
}

.file-center-role-panel .primary-btn,
.file-center-role-panel .primary-btn > span,
.file-center-role-panel .primary-btn > svg {
  color: #fff !important;
}

.file-center-role-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.file-center-role-row {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: transparent;
  text-align: left;
}

.file-center-role-row:hover,
.file-center-role-row:focus-visible,
.file-center-role-row.primary {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  outline: none;
}

.file-center-role-row > svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.file-center-role-row > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.file-center-role-row strong,
.file-center-role-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-center-role-row small,
.file-center-role-row > em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.file-center-role-row.primary > em {
  color: var(--primary-strong);
  font-weight: 800;
}

/* File Center upload intent selector: keep the common path obvious and tuck
   advanced choices into compact controls so the upload panel stays calm. */
.file-center-intent-panel {
  gap: 13px;
}

.file-center-intent-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  max-width: 860px;
}

.file-center-intent-current,
.file-center-source-summary,
.file-center-role-details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 96%, var(--bg));
}

.file-center-intent-current,
.file-center-source-summary {
  display: grid;
  min-width: 0;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 64px;
  padding: 10px 12px;
}

.file-center-intent-current {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, var(--panel));
}


.file-center-intent-current > svg,
.file-center-source-summary > svg {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.file-center-intent-current > span,
.file-center-source-summary > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.file-center-intent-current strong,
.file-center-source-summary strong {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-center-intent-current small,
.file-center-source-summary small,
.file-center-intent-panel > footer > small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.file-center-intent-current > em,
.file-center-source-summary > em {
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary-strong);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.file-center-intent-more {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 98%, var(--bg));
}

.file-center-intent-more > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  list-style: none;
}

.file-center-intent-more > summary::-webkit-details-marker {
  display: none;
}

.file-center-intent-more > summary > span {
  color: var(--text);
  font-weight: 750;
}

.file-center-intent-more > summary > em {
  color: var(--muted);
  font-style: normal;
}

.file-center-intent-more[open] > summary {
  border-bottom: 1px solid var(--line);
}

.file-center-intent-options {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.file-center-intent-option {
  display: grid;
  width: 100%;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel) 96%, var(--bg));
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.file-center-intent-option:hover,
.file-center-intent-option:focus-visible,
.file-center-intent-option.active {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, var(--panel));
  outline: none;
}

.file-center-intent-option > svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.file-center-intent-option > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.file-center-intent-option strong,
.file-center-intent-option small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-center-intent-option strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
}

.file-center-intent-option small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.file-center-intent-option > em {
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary-strong);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.file-center-role-details {
  padding: 0;
}

.file-center-role-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 50px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
}

.file-center-role-details > summary::-webkit-details-marker {
  display: none;
}

.file-center-role-details > summary > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.file-center-role-details > summary strong {
  color: var(--text);
  font-size: 13px;
}

.file-center-role-details > summary small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-center-role-details > summary em {
  color: var(--primary-strong);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.file-center-role-details[open] > summary {
  border-bottom: 1px solid var(--line);
}

.file-center-role-details > .file-center-role-list {
  padding: 10px;
}

.file-center-intent-panel > footer {
  align-items: center;
  justify-content: space-between;
}

.file-center-intent-panel > footer > small {
  max-width: 560px;
}

.file-center-intent-panel > footer > span {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.file-center-recent-list {
  display: grid;
  max-width: 980px;
  gap: 8px;
}

.file-center-recent-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 64px;
  padding: 9px 13px;
}

.file-center-recent-cover {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 12%, var(--bg));
  font-size: 12px;
  font-weight: 800;
}

.file-center-recent-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-center-recent-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.file-center-recent-copy strong,
.file-center-recent-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-center-recent-copy small {
  color: var(--muted);
  font-size: 12px;
}

.file-center-recent-row > svg {
  width: 17px;
  height: 17px;
  color: var(--muted);
}

.file-center-fact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 980px;
  margin-bottom: 24px;
}

.file-center-detail {
  display: grid;
  gap: 8px;
  padding: 17px;
}

.file-center-detail dt {
  color: var(--muted);
  font-size: 12px;
}

.file-center-detail dd {
  margin: 0;
  color: #17202c !important;
  font-size: 15px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.file-center-detail p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.file-center-pipeline {
  display: grid;
  max-width: 980px;
  gap: 14px;
  margin: 0 0 24px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.file-center-pipeline-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.file-center-pipeline-header div {
  display: grid;
  gap: 4px;
}

.file-center-pipeline-header strong {
  color: var(--text);
  font-size: 14px;
}

.file-center-pipeline-header span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.file-center-pipeline-header > em {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 5px;
  color: #216e39;
  background: #dafbe1;
  font-size: 11px;
  font-style: normal;
}

.file-center-pipeline-header > em[data-status="warning"],
.file-center-pipeline-header > em[data-status="pending"] {
  color: #7d4e00;
  background: #fff1c2;
}

.file-center-pipeline-header > em[data-status="failed"] {
  color: #9a1a24;
  background: #ffebe9;
}

.file-center-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.file-center-pipeline-grid .file-center-detail {
  min-width: 0;
  padding: 13px 14px;
}

.file-center-pipeline-stages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.file-center-pipeline-stage {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  font-size: 10px;
}

.file-center-pipeline-stage b,
.file-center-pipeline-stage em {
  font-size: inherit;
  font-style: normal;
  font-weight: 600;
}

.file-center-pipeline-stage[data-status="completed"] em {
  color: #216e39;
}

.file-center-pipeline-stage[data-status="warning"] em,
.file-center-pipeline-stage[data-status="pending"] em {
  color: #9a6700;
}

.file-center-pipeline-stage[data-status="failed"] em {
  color: #cf222e;
}

.file-center-pipeline-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 11px;
  border-left: 3px solid #d29922;
  color: #6e4b00;
  background: #fff8c5;
  font-size: 11px;
  line-height: 1.5;
}

.file-center-pipeline-warning svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 1px;
}

.file-center-pipeline-technical {
  margin-top: 10px;
  border-top: 1px solid var(--line-subtle, rgba(120, 120, 120, .18));
  padding-top: 8px;
  color: var(--text-secondary, #737373);
  font-size: 11px;
}
.file-center-pipeline-technical summary { cursor: pointer; list-style: none; }
.file-center-pipeline-technical summary::-webkit-details-marker { display: none; }
.file-center-pipeline-technical summary::before { content: "＋"; margin-right: 4px; }
.file-center-pipeline-technical[open] summary::before { content: "－"; }
.file-center-pipeline-technical div { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 7px; }

.file-center-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  max-width: 980px;
}

.file-center-open-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.file-center-note {
  display: flex;
  max-width: 980px;
  align-items: flex-start;
  gap: 9px;
  margin-top: 20px;
  padding: 13px 15px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  font-size: 12px;
  line-height: 1.6;
}

.file-center-note svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--accent);
}

.file-center-empty {
  display: grid;
  max-width: 640px;
  min-height: 180px;
  place-items: center;
  gap: 8px;
  padding: 30px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
}

.file-center-empty svg {
  width: 28px;
  height: 28px;
}

@media (max-width: 980px) {
  .file-center-shell {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .file-center-content-head,
  .file-center-body {
    padding-left: 28px;
    padding-right: 28px;
  }

  .file-center-overview-grid,
  .file-center-fact-grid,
  .file-center-pipeline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .file-center-intent-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .file-center-intent-current,
  .file-center-source-summary,
  .file-center-intent-option {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .file-center-intent-current > em,
  .file-center-source-summary > em,
  .file-center-intent-option > em {
    justify-self: start;
    grid-column: 2;
  }


  .file-center-role-list {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 721px) and (max-height: 800px) {
  .file-center-nav {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .file-center-nav-head {
    padding-bottom: 12px;
  }

  .file-center-nav-label {
    padding-top: 5px;
    padding-bottom: 2px;
  }

  .file-center-nav-list button {
    min-height: 36px;
  }

  .file-center-nav-divider {
    margin-top: 6px;
    margin-bottom: 6px;
  }

  .file-center-nav-spacer {
    min-height: 8px;
  }

  .file-center-content-head {
    padding: 22px 36px 18px;
  }

  .file-center-content-head h2 {
    font-size: 26px;
  }

  .file-center-body {
    padding: 24px 36px 34px;
  }

  .file-center-card {
    min-height: 120px;
    gap: 8px;
    padding: 16px;
  }

  .file-center-section-title {
    margin-bottom: 11px;
  }

  .file-center-detail {
    gap: 5px;
    padding: 12px 14px;
  }

  .file-center-fact-grid {
    gap: 11px;
    margin-bottom: 18px;
  }

  .file-center-dropzone {
    min-height: 210px;
    margin-bottom: 22px;
    padding: 24px;
  }
}

@media (max-width: 720px) {
  .file-center-shell {
    grid-template-columns: 1fr;
  }

  .file-center-nav {
    display: none;
  }

  .file-center-content-head {
    padding: 22px 20px 18px;
  }

  .file-center-body {
    padding: 24px 20px 36px;
  }

  .file-center-overview-grid,
  .file-center-command-grid,
  .file-center-fact-grid,
  .file-center-pipeline-grid {
    grid-template-columns: 1fr;
  }

  .file-center-status {
    display: none;
  }
}

:root[data-theme="dark"] .file-center-trigger,
:root[data-theme="dark"] .file-center-nav-list button,
:root[data-theme="dark"] .file-center-back,
:root[data-theme="dark"] .file-center-content-actions .assistant-icon-btn,
:root[data-theme="dark"] button.file-center-card,
:root[data-theme="dark"] button.file-center-command,
:root[data-theme="dark"] button.file-center-recent-row {
  color: var(--text);
}

:root[data-theme="dark"] .file-center-shell,
:root[data-theme="dark"] .file-center-content {
  background: #111827;
}

:root[data-theme="dark"] .file-center-nav {
  background: #0d1422;
}

:root[data-theme="dark"] .file-center-card,
:root[data-theme="dark"] .file-center-command,
:root[data-theme="dark"] .file-center-detail,
:root[data-theme="dark"] .file-center-dropzone,
:root[data-theme="dark"] .file-center-recent-row,
:root[data-theme="dark"] .file-center-role-panel {
  background: #151f30;
}

:root[data-theme="dark"] .file-center-detail dd {
  color: #f4f7fb;
}

:root[data-theme="dark"] .file-center-content {
  color: #f4f7fb;
}

:root[data-theme="dark"] .file-center-content-head h2,
:root[data-theme="dark"] .file-center-section-title h3,
:root[data-theme="dark"] .file-center-card strong,
:root[data-theme="dark"] .file-center-command strong,
:root[data-theme="dark"] .file-center-detail dd {
  color: #f4f7fb !important;
}

:root[data-theme="dark"] .file-center-nav-list button:hover,
:root[data-theme="dark"] .file-center-nav-list button:focus-visible,
:root[data-theme="dark"] .file-center-nav-list button.active {
  color: #9bc0ff;
  background: rgba(77, 129, 230, .16);
  border-color: rgba(121, 162, 235, .32);
}

:root[data-theme="dark"] .file-center-note {
  background: rgba(190, 124, 44, .13);
}

:root[data-theme="dark"] .file-center-pipeline-header > em[data-status="completed"] {
  color: #8ddb9b;
  background: rgba(46, 160, 67, .18);
}

:root[data-theme="dark"] .file-center-pipeline-header > em[data-status="warning"],
:root[data-theme="dark"] .file-center-pipeline-header > em[data-status="pending"] {
  color: #f2cc60;
  background: rgba(210, 153, 34, .17);
}

:root[data-theme="dark"] .file-center-pipeline-header > em[data-status="failed"] {
  color: #ff9b9b;
  background: rgba(248, 81, 73, .17);
}

:root[data-theme="dark"] .file-center-pipeline-warning {
  color: #f2cc60;
  background: rgba(210, 153, 34, .13);
}

@media print {
  .file-center,
  .file-center-trigger {
    display: none !important;
  }
}

/* The file center is a modal desktop surface; keep the assistant launcher and
   the underlying workbench out of the interaction layer while it is open. */
body.file-center-open #assistantFloatLauncher {
  display: none !important;
}

body.file-center-open {
  overflow: hidden;
}

body.file-center-open > .app-shell > :not(#fileCenter),
body.file-center-open > dialog,
body.file-center-open > .assistant-tools-drawer,
body.file-center-open > .editor-delivery-drawer {
  pointer-events: none !important;
}

/* #fileCenter lives inside .app-shell, so the modal itself must remain in the
   interaction layer while the workbench siblings are inert. */
body.file-center-open > .app-shell > #fileCenter {
  pointer-events: auto !important;
}

#step-edit .thumb-source-status {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  display: inline-flex;
  max-width: calc(100% - 28px);
  align-items: center;
  gap: 3px;
  pointer-events: none;
}

#step-edit .thumb-source-status > em {
  display: inline-flex;
  min-height: 17px;
  align-items: center;
  padding: 0 5px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 4px;
  color: #fff;
  background: rgba(17, 24, 39, .76);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .16);
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

#step-edit .thumb-source-status.failed > em:last-child,
#step-edit .thumb-source-status.partial > em:last-child {
  background: rgba(180, 83, 9, .9);
}

.source-version-dialog {
  width: min(1180px, calc(100vw - 48px));
  height: min(820px, calc(100vh - 48px));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
}

.source-version-dialog::backdrop {
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(4px);
}

.source-version-shell {
  display: grid;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.source-version-head,
.source-version-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}

.source-version-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.source-version-head span,
.source-version-head small,
.source-version-footer > span {
  color: var(--muted);
  font-size: 11px;
}

.source-version-head strong {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-version-workspace {
  display: grid;
  min-height: 0;
  grid-template-columns: 194px minmax(0, 1fr);
}

.source-version-sidebar {
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, var(--bg));
}

.source-version-thumbs {
  display: grid;
  height: 100%;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 10px 14px;
  scrollbar-width: thin;
}

.source-version-thumb {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 6px;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.source-version-thumb:hover,
.source-version-thumb:focus-visible,
.source-version-thumb.active {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  background: color-mix(in srgb, var(--primary) 8%, var(--panel));
  outline: none;
}

.source-version-thumb .mini-slide {
  box-sizing: border-box;
  display: block;
  width: 100% !important;
  min-width: 0;
  height: auto !important;
  max-height: 86px;
  aspect-ratio: var(--slide-aspect, 16 / 9);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 4px;
  background: #fff;
  contain: layout paint;
}

.source-version-thumb .mini-slide > * {
  max-width: 100%;
  max-height: 100%;
}

.source-version-thumb > span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  font-size: 10px;
  line-height: 1.25;
}

.source-version-thumb em {
  overflow: hidden;
  color: var(--muted);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-version-main {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  background: color-mix(in srgb, var(--bg) 78%, #64748b);
}

.source-version-stage {
  display: grid;
  min-height: 0;
  overflow: auto;
  place-items: center;
  padding: 24px;
}

.source-version-canvas {
  display: grid;
  width: min(100%, 880px);
  height: 100%;
  place-items: center;
  container-type: size;
}

.source-version-slide {
  position: relative;
  width: min(100%, calc((100vh - 230px) * var(--source-aspect, 1.7778)));
  width: min(100cqw, calc(100cqh * var(--source-aspect, 1.7778)));
  max-width: 100%;
  max-height: 100cqh;
  overflow: hidden;
  container-type: inline-size;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .22);
}

.source-version-slide .slide-el,
.source-version-thumb .slide-el {
  pointer-events: none !important;
}

.source-version-pager {
  display: grid;
  min-height: 46px;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.source-version-pager > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-version-footer {
  min-height: 58px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.source-version-footer > span,
.source-version-footer > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.source-version-footer > span {
  min-width: 220px;
  flex: 1 1 260px;
}

.source-version-footer > div {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.source-version-footer svg {
  width: 16px;
  height: 16px;
}

:root[data-theme="dark"] .source-version-dialog,
:root[data-theme="dark"] .source-version-head,
:root[data-theme="dark"] .source-version-pager,
:root[data-theme="dark"] .source-version-footer {
  background: #111827;
}

:root[data-theme="dark"] .source-version-sidebar {
  background: #0d1422;
}

@media (max-width: 1365px), (max-height: 760px) {
  .source-version-dialog {
    width: calc(100vw - 28px);
    height: calc(100vh - 28px);
  }

  .source-version-workspace {
    grid-template-columns: 168px minmax(0, 1fr);
  }

  .source-version-thumbs {
    gap: 8px;
    padding: 10px 8px 12px;
  }

  .source-version-thumb {
    gap: 5px;
    padding: 6px;
  }

  .source-version-thumb .mini-slide {
    max-height: 72px;
  }

  .source-version-stage {
    padding: 16px;
  }

}

@media print {
  body.print-preview-mode .topbar,
  body.print-preview-mode .rail,
  body.print-preview-mode #assistantDrawer,
  body.print-preview-mode #assistantToolsDrawer,
  body.print-preview-mode .editor-top-ribbon,
  body.print-preview-mode .thumb-panel,
  body.print-preview-mode .inspector,
  body.print-preview-mode .editor-tool-rail,
  body.print-preview-mode #assistantFloatLauncher {
    display: none !important;
  }

  body.print-preview-mode .workspace {
    grid-column: 1 / -1;
  }
}

/* ==== consolidated from /desktop-unified.css (cascade order preserved) ==== */
/* Phase1 merge: external-editing + desktop-unified (cascade preserved). */
/* ===== merged from /external-editing.css ===== */
#externalEditDialog {
  --external-panel: var(--theme-panel, #ffffff);
  --external-soft: var(--theme-panel-soft, #f5f5f5);
  --external-text: var(--theme-text, #262626);
  --external-muted: var(--theme-muted, #666666);
  --external-line: var(--theme-line, #dedede);
  width: min(660px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 48px));
  padding: 0;
  color: var(--external-text);
  background: var(--external-panel);
  border: 1px solid var(--external-line);
  border-radius: 8px;
  box-shadow: none;
  overflow: auto;
  overscroll-behavior: contain;
  letter-spacing: 0;
}

#externalEditDialog::backdrop {
  background: rgb(0 0 0 / 32%);
  backdrop-filter: none;
}

#externalEditDialog .external-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--external-line);
}

#externalEditDialog .external-edit-header > div {
  min-width: 0;
}

#externalEditDialog h2 {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: 0;
}

#externalEditDialog .external-edit-header p {
  margin: 4px 0 0;
  color: var(--external-muted);
  font-size: 12px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

#externalEditDialog .external-edit-close {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
}

#externalEditDialog .external-edit-body {
  padding: 20px 24px 24px;
  min-width: 0;
}

#externalEditDialog .external-edit-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#externalEditDialog .external-edit-fields label,
#externalEditDialog .external-edit-session-picker {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  font-size: 12px;
}

#externalEditDialog .external-edit-session-picker {
  margin-bottom: 20px;
}

#externalEditDialog select {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  color: var(--external-text);
  background: var(--external-panel);
  border: 1px solid var(--external-line);
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
  box-shadow: none;
}

#externalEditDialog .external-edit-notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
  padding: 12px;
  color: var(--external-text);
  background: var(--external-soft);
  border-left: 2px solid var(--external-muted);
  font-size: 12px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

#externalEditDialog .external-edit-muted,
#externalEditDialog .external-edit-error {
  font-size: 12px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

#externalEditDialog .external-edit-muted {
  color: var(--external-muted);
  margin: 16px 0 0;
}

#externalEditDialog .external-edit-error {
  margin: 0 0 16px;
  color: #b43333;
}

html[data-theme="dark"] #externalEditDialog .external-edit-error {
  color: #f29292;
}

#externalEditDialog .external-edit-footer,
#externalEditDialog .external-edit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#externalEditDialog .external-edit-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--external-line);
}

#externalEditDialog .external-edit-actions {
  justify-content: flex-start;
  margin-top: 18px;
}

#externalEditDialog :is(button, .external-edit-download) {
  min-height: 34px;
  max-width: 100%;
  border-radius: 4px;
  box-shadow: none;
  font-size: 12px;
  letter-spacing: 0;
}

#externalEditDialog :is(button, .external-edit-download) :is(svg.lucide, .fluent-icon-shell) {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: inherit;
}

#externalEditDialog .external-edit-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  color: var(--external-text);
  background: transparent;
  border: 1px solid var(--external-line);
  text-decoration: none;
}

#externalEditDialog .external-edit-file {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#externalEditDialog .external-edit-file > :is(svg, .fluent-icon-shell) {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--external-text);
}

#externalEditDialog .external-edit-file > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

#externalEditDialog .external-edit-file strong {
  font-size: 13px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

#externalEditDialog .external-edit-file span {
  font-size: 12px;
  color: var(--external-muted);
}

#externalEditDialog .external-edit-page-list {
  display: flex;
  flex-direction: column;
  max-height: 360px;
  overflow: auto;
  margin-top: 16px;
}

#externalEditDialog .external-edit-page {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--external-line);
  cursor: pointer;
}

#externalEditDialog .external-edit-page > span:last-child {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

#externalEditDialog .external-edit-page input {
  margin-top: 3px;
}

#externalEditDialog .external-edit-page strong {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  overflow-wrap: anywhere;
}

#externalEditDialog .external-edit-page :is(small, p) {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--external-muted);
  overflow-wrap: anywhere;
}

#externalEditDialog .external-edit-page p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#externalEditDialog .external-edit-page-number {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  min-height: 24px;
  color: var(--external-muted);
  background: var(--external-soft);
  font-size: 12px;
}

#externalEditDialog .external-edit-page img {
  width: 80px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--external-soft);
}

#externalEditDialog .external-edit-image-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

#externalEditDialog figure {
  min-width: 0;
  margin: 0;
}

#externalEditDialog figure img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: contain;
  background: var(--external-soft);
}

#externalEditDialog figcaption {
  margin-top: 7px;
  color: var(--external-muted);
  font-size: 12px;
  line-height: 18px;
}

#externalEditDialog .external-edit-warnings {
  padding-left: 18px;
  margin: 16px 0;
  color: var(--external-muted);
  font-size: 12px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

#externalEditDialog .external-edit-conflict-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 20px;
}

#externalEditDialog input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: #666666;
}

@media (max-width: 520px) {
  #externalEditDialog .external-edit-header {
    padding: 16px;
  }

  #externalEditDialog .external-edit-body {
    padding: 16px;
  }

  #externalEditDialog .external-edit-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  #externalEditDialog .external-edit-page {
    gap: 8px;
  }

  #externalEditDialog .external-edit-page img {
    width: 56px;
    height: 40px;
  }

  #externalEditDialog figure img {
    height: 140px;
  }
}

/* ===== merged from /desktop-unified.css ===== */
/* 2026-10 simple right inspector: keep the first action obvious, hide advanced tools until requested. */
#step-edit.design-preview-mode .design-ai-command-panel-simple {
  gap: 10px;
  padding: 12px;
}
#step-edit.design-preview-mode .design-ai-command-panel-simple > header {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
}
#step-edit.design-preview-mode .design-ai-command-panel-simple .design-ai-command-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}
#step-edit.design-preview-mode .design-ai-target-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--product-muted);
  font-size: 10px;
  line-height: 1.4;
}
#step-edit.design-preview-mode .design-ai-target-hint svg,
#step-edit.design-preview-mode .design-ai-target-hint .fluent-icon-shell {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}
#step-edit.design-preview-mode .design-ai-command-panel-simple .design-ai-primary-actions {
  display: block;
}
#step-edit.design-preview-mode .design-ai-command-panel-simple .design-ai-primary-actions .primary-btn {
  width: 100%;
  min-height: 38px;
  font-size: 11px;
}
#step-edit.design-preview-mode .design-ai-more-actions {
  border-top: 1px solid var(--product-line);
  padding-top: 8px;
}
#step-edit.design-preview-mode .design-ai-more-actions > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
  list-style: none;
  color: var(--product-text);
}
#step-edit.design-preview-mode .design-ai-more-actions > summary::-webkit-details-marker { display: none; }
#step-edit.design-preview-mode .design-ai-more-actions > summary > span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
#step-edit.design-preview-mode .design-ai-more-actions > summary svg,
#step-edit.design-preview-mode .design-ai-more-actions > summary .fluent-icon-shell {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--product-muted);
}
#step-edit.design-preview-mode .design-ai-more-actions > summary span span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
#step-edit.design-preview-mode .design-ai-more-actions > summary strong { font-size: 10px; }
#step-edit.design-preview-mode .design-ai-more-actions > summary small {
  color: var(--product-muted);
  font-size: 9px;
  line-height: 1.4;
}
#step-edit.design-preview-mode .design-ai-more-body {
  display: grid;
  gap: 8px;
  padding-top: 9px;
}
#step-edit.design-preview-mode .design-ai-more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
#step-edit.design-preview-mode .design-ai-more-grid button {
  min-width: 0;
  min-height: 32px;
  padding: 6px 7px;
  font-size: 9px;
  white-space: nowrap;
}
#step-edit.design-preview-mode .design-ai-more-grid button span {
  overflow: hidden;
  text-overflow: ellipsis;
}
#step-edit.design-preview-mode .design-ai-more-grid button svg,
#step-edit.design-preview-mode .design-ai-more-grid button .fluent-icon-shell {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}
#step-edit.design-preview-mode .design-ai-more-body .design-reference-picker {
  margin-top: 0;
}
@container (max-width: 210px) {
  #step-edit.design-preview-mode .design-ai-more-grid { grid-template-columns: 1fr; }
}

/* /design-center.css */
/* ==== consolidated from /design-center.css (cascade order preserved) ==== */
.design-center {
  display: grid;
  gap: 14px;
  padding: 18px 0 8px;
  scroll-margin-top: 16px;
}

.design-center-head,
.design-center-head > div,
.new-project-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.design-center-head > div,
.new-project-category-head > div { align-items: flex-start; flex-direction: column; gap: 3px; }
.design-center-head span,
.new-project-category-head small { color: var(--v2-blue); font-size: 10px; font-weight: 700; }
.design-center-head h3 { margin: 0; font-size: 17px; }
.design-center-head p { margin: 0; color: var(--v2-muted); font-size: 11px; }

.design-category-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.design-category-tabs button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px;
  border: 1px solid var(--v2-border); border-radius: 6px; background: var(--v2-panel); color: var(--v2-muted); white-space: nowrap;
}
.design-category-tabs button svg { width: 14px; height: 14px; }
.design-category-tabs button.active { border-color: color-mix(in srgb, var(--v2-blue) 55%, var(--v2-border)); background: color-mix(in srgb, var(--v2-blue) 9%, var(--v2-panel)); color: var(--v2-text); }

.design-category-grid { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 8px; }
.design-category-card {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 64px; padding: 10px;
  border: 1px solid var(--v2-border); border-radius: 7px; background: var(--v2-panel); color: var(--v2-text); text-align: left;
}
.design-category-card:hover,
.design-category-card:focus-visible { border-color: var(--v2-blue); background: color-mix(in srgb, var(--v2-blue) 6%, var(--v2-panel)); }
.design-category-card > i,
.design-category-card > svg { width: 17px; height: 17px; color: var(--v2-blue); }
.design-category-card > span { min-width: 0; }
.design-category-card strong { display: block; overflow-wrap: anywhere; font-size: 11px; line-height: 1.35; }
.design-category-card small { display: block; margin-top: 3px; color: var(--v2-muted); font-size: 9px; }

.new-project-category-context { display: grid; gap: 10px; padding: 12px; border: 1px solid color-mix(in srgb, var(--v2-blue) 32%, var(--v2-border)); border-radius: 7px; background: color-mix(in srgb, var(--v2-blue) 5%, var(--v2-panel)); }
.new-project-category-head h3 { margin: 0; font-size: 14px; }
.new-project-category-head p { margin: 2px 0 0; color: var(--v2-muted); font-size: 10px; line-height: 1.45; }
.new-project-category-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.new-project-category-field { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 8px; border-left: 2px solid color-mix(in srgb, var(--v2-blue) 65%, transparent); background: color-mix(in srgb, var(--v2-panel) 82%, transparent); }
.new-project-category-field span,
.new-project-category-field strong { display: block; overflow-wrap: anywhere; }
.new-project-category-field span { color: var(--v2-muted); font-size: 9px; }
.new-project-category-field strong { margin-top: 2px; font-size: 10px; line-height: 1.4; }
.new-project-category-field input,
.new-project-category-field select,
.new-project-category-field textarea { width: 100%; min-width: 0; min-height: 30px; padding: 5px 7px; border: 1px solid var(--v2-border); border-radius: 5px; background: var(--v2-panel); color: var(--v2-text); font-size: 10px; }
.new-project-category-field textarea { min-height: 54px; resize: vertical; line-height: 1.45; }
.category-field-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px; }
.category-field-unit { color: var(--v2-muted); font-size: 9px; font-style: normal; }
.new-project-category-output { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.new-project-category-output span { margin-right: 3px; color: var(--v2-muted); font-size: 9px; }
.new-project-category-output b { padding: 3px 6px; border-radius: 4px; background: var(--v2-panel); color: var(--v2-text); font-size: 9px; }

.design-workspace-config,
.design-workspace-summary { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--v2-border); border-radius: 6px; background: var(--v2-panel); }
.design-workspace-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.design-workspace-section-head > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.design-workspace-section-head strong { font-size: 10px; }
.design-workspace-section-head span { color: var(--v2-muted); font-size: 9px; }
.design-workspace-section-head em { color: var(--v2-blue); font-size: 9px; font-style: normal; }
.design-workspace-preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.design-workspace-preset {
  display: flex; min-width: 0; min-height: 54px; align-items: center; justify-content: space-between; gap: 8px; padding: 8px;
  border: 1px solid var(--v2-border); border-radius: 5px; color: var(--v2-text); background: var(--v2-bg); text-align: left;
}
.design-workspace-preset:hover,
.design-workspace-preset:focus-visible { border-color: color-mix(in srgb, var(--v2-blue) 65%, var(--v2-border)); }
.design-workspace-preset.selected { border-color: var(--v2-blue); box-shadow: inset 3px 0 var(--v2-blue); background: color-mix(in srgb, var(--v2-blue) 7%, var(--v2-panel)); }
.design-workspace-preset > span { display: grid; min-width: 0; gap: 3px; }
.design-workspace-preset strong { font-size: 10px; }
.design-workspace-preset small { overflow: hidden; color: var(--v2-muted); font-size: 8px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.design-workspace-preset em { flex: 0 0 auto; color: var(--v2-blue); font-size: 8px; font-style: normal; }
.design-workspace-style-row { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; }
.design-workspace-style { display: grid; width: 92px; min-width: 92px; gap: 4px; padding: 5px; border: 1px solid var(--v2-border); border-radius: 5px; color: var(--v2-text); background: var(--v2-bg); }
.design-workspace-style.selected { border-color: var(--v2-blue); box-shadow: 0 0 0 1px var(--v2-blue); }
.design-workspace-style small { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.design-workspace-style-swatch { position: relative; display: block; height: 28px; overflow: hidden; border-radius: 3px; background: var(--workspace-bg); }
.design-workspace-style-swatch::before { position: absolute; inset: 6px auto 6px 7px; width: 3px; background: var(--workspace-accent); content: ""; }
.design-workspace-style-swatch i { position: absolute; top: 7px; left: 16px; width: 42px; height: 4px; background: var(--workspace-text); }
.design-workspace-style-swatch b { position: absolute; top: 15px; left: 16px; width: 56px; height: 7px; background: color-mix(in srgb, var(--workspace-accent) 22%, var(--workspace-bg)); }
.design-workspace-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.design-workspace-summary > div { display: grid; gap: 5px; min-width: 0; }
.design-workspace-summary > div > strong { color: var(--v2-muted); font-size: 9px; }
.design-workspace-summary > div > span { display: flex; flex-wrap: wrap; gap: 5px; }
.design-workspace-summary b,
.design-workspace-summary button { display: inline-flex; min-height: 25px; align-items: center; gap: 4px; padding: 3px 7px; border: 1px solid var(--v2-border); border-radius: 4px; color: var(--v2-text); background: var(--v2-bg); font-size: 8px; font-weight: 600; }
.design-workspace-summary button:hover { border-color: var(--v2-blue); color: var(--v2-blue); }
.design-workspace-summary button svg { width: 11px; height: 11px; }

.editor-delivery-grid [data-category-export-hidden="true"] { display: none !important; }

body:not([data-design-category-group="presentation"]) #exportPptBtn,
body:not([data-design-category-group="presentation"]) [data-editor-left-view="outline"],
body:not([data-design-category-group="presentation"]) #editorOutlineView,
body:not([data-design-category-group="presentation"]) #copyWorkflowActions { display: none !important; }
body:not([data-design-category-group="presentation"]) #editorLeftPanelTitle::after { content: " · 独立项目画布"; color: var(--v2-muted); font-size: 9px; font-weight: 500; }
body.design-category-new-project #newProjectPanel .document-spec-control { display: none !important; }
body.design-category-new-project #newProjectPanel .new-document-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.design-category-new-project #newProjectPanel .new-project-category-context,
body.design-category-new-project #newProjectPanel .new-project-source-panel,
body.design-category-new-project #newProjectPanel .new-document-form > label.wide { grid-column: 1 / -1; }
body.design-category-new-project #newProjectPanel .new-project-category-context {
  gap: 12px;
  padding: 14px;
  border-color: color-mix(in srgb, var(--v2-blue) 42%, var(--v2-border));
}
body.design-category-new-project #newProjectPanel .new-project-category-output {
  padding: 10px;
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  background: var(--v2-panel);
}
body.design-category-new-project #newProjectPanel .design-workspace-summary {
  grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr);
}
body.design-category-new-project #newProjectPanel .design-workspace-summary > div:last-child > span {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}
body.design-category-new-project #newProjectPanel .design-workspace-summary button {
  justify-content: flex-start;
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 9px;
  line-height: 1.25;
}

body:not([data-design-category-group="presentation"]) #editorToolRail [data-editor-rail-command="table"],
body:not([data-design-category-group="presentation"]) #editorToolRail [data-editor-rail-command="chart"],
body:not([data-design-category-group="presentation"]) #toggleSpeakerNotesBtn,
body:not([data-design-category-group="presentation"]) #slideBrowserBtn,
body:not([data-design-category-group="presentation"]) #startSlideShowBtn,
body:not([data-design-category-group="presentation"]) [data-notes-view="speaker"],
body:not([data-design-category-group="presentation"]) #speakerNotesPanel { display: none !important; }

@media (max-width: 1200px) { .design-category-grid { grid-template-columns: repeat(4, minmax(120px, 1fr)); } }
@media (max-width: 820px) {
  .design-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .new-project-category-fields { grid-template-columns: 1fr; }
  .design-workspace-preset-grid,
  .design-workspace-summary { grid-template-columns: 1fr; }
}

.design-workspace-dialog { width: min(760px, calc(100vw - 32px)); max-height: min(780px, calc(100dvh - 32px)); padding: 0; overflow: hidden; border: 1px solid var(--v2-border); border-radius: 8px; color: var(--v2-text); background: var(--v2-panel); box-shadow: 0 24px 70px rgba(0, 0, 0, .28); }
.design-workspace-dialog::backdrop { background: rgba(12, 18, 22, .48); }
.design-workspace-dialog-shell { display: grid; max-height: inherit; grid-template-rows: auto minmax(0, 1fr) auto; }
.design-workspace-dialog-shell > header,
.design-workspace-dialog-shell > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border-bottom: 1px solid var(--v2-border); }
.design-workspace-dialog-shell > header > div { display: grid; min-width: 0; gap: 2px; }
.design-workspace-dialog-shell > header span { color: var(--v2-blue); font-size: 9px; font-weight: 700; }
.design-workspace-dialog-shell > header strong { font-size: 15px; }
.design-workspace-dialog-shell > header small,
.design-workspace-dialog-shell > footer > span { color: var(--v2-muted); font-size: 9px; }
.design-workspace-dialog-shell > footer { border-top: 1px solid var(--v2-border); border-bottom: 0; }
.design-workspace-dialog-body { min-height: 240px; padding: 14px 16px; overflow: auto; background: var(--v2-bg); }
.design-workspace-dialog-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.design-workspace-dialog-styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.design-workspace-dialog-styles .design-workspace-style { width: auto; min-width: 0; }
.design-workspace-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.design-workspace-tool-grid > button { display: grid; min-height: 76px; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--v2-border); border-radius: 6px; color: var(--v2-text); background: var(--v2-panel); text-align: left; }
.design-workspace-tool-grid > button:hover { border-color: var(--v2-blue); }
.design-workspace-tool-grid > button > svg { width: 20px; height: 20px; color: var(--v2-blue); }
.design-workspace-tool-grid > button > span { display: grid; gap: 3px; }
.design-workspace-tool-grid strong { font-size: 10px; }
.design-workspace-tool-grid small { color: var(--v2-muted); font-size: 9px; line-height: 1.45; }
.design-workspace-tool-report { display: grid; gap: 12px; }
.design-workspace-tool-report > header { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--v2-border); background: var(--v2-panel); }
.design-workspace-tool-report > header > svg { width: 22px; height: 22px; color: var(--v2-blue); }
.design-workspace-tool-report > header > div { display: grid; gap: 3px; }
.design-workspace-tool-report > header strong { font-size: 11px; }
.design-workspace-tool-report > header span { color: var(--v2-muted); font-size: 9px; }
.design-workspace-tool-report > header em { color: var(--v2-blue); font-size: 24px; font-style: normal; font-weight: 700; }
.design-workspace-tool-report > div { display: grid; gap: 6px; }
.design-workspace-tool-report p { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 8px; margin: 0; padding: 9px; border-left: 3px solid var(--v2-border); background: var(--v2-panel); }
.design-workspace-tool-report p.ready { border-left-color: #2f8b62; }
.design-workspace-tool-report p.suggest { border-left-color: var(--v2-blue); }
.design-workspace-tool-report p.blocked { border-left-color: #c43d3d; background: #fff4f2; }
.design-workspace-tool-report p > svg { width: 14px; height: 14px; color: var(--v2-blue); }
.design-workspace-tool-report p.blocked > svg { color: #c43d3d; }
.design-workspace-tool-report p > span { display: grid; gap: 2px; }
.design-workspace-tool-report p strong { font-size: 10px; }
.design-workspace-tool-report p small { color: var(--v2-muted); font-size: 9px; }
.design-workspace-tool-report > aside { display: grid; gap: 6px; }
.design-workspace-tool-report > aside strong { font-size: 10px; }
.design-workspace-tool-report > aside span { display: flex; flex-wrap: wrap; gap: 5px; }
.design-workspace-tool-report > aside b { padding: 5px 8px; border: 1px solid var(--v2-border); border-radius: 4px; background: var(--v2-panel); font-size: 9px; }

body:not([data-design-category-group="presentation"]) #step-edit > .editor-top-ribbon #editorRibbon {
  height: 55px !important;
  max-height: 55px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
body:not([data-design-category-group="presentation"]) #step-edit > .editor-top-ribbon #editorRibbon {
  gap: 4px !important;
  padding-inline: 8px !important;
}
body:not([data-design-category-group="presentation"]) #step-edit > .editor-top-ribbon #editorRibbon .ribbon-group {
  gap: 4px !important;
  padding-inline: 0 6px !important;
}
body:not([data-design-category-group="presentation"]) #step-edit > .editor-top-ribbon #editorRibbon .ribbon-tool,
body:not([data-design-category-group="presentation"]) #step-edit > .editor-top-ribbon #editorRibbon .ribbon-select,
body:not([data-design-category-group="presentation"]) #step-edit > .editor-top-ribbon #editorRibbon .ribbon-number,
body:not([data-design-category-group="presentation"]) #step-edit > .editor-top-ribbon #editorRibbon .ribbon-color {
  padding-inline: 6px !important;
  font-size: 11px !important;
}

/* Design center visual pass: readable density, clearer hierarchy, and a
   stable two-row project toolbar without changing any workflow behavior. */
.design-center {
  width: min(100%, 1480px);
  margin-inline: auto;
  gap: 18px;
  padding: 24px 0 14px;
}

.design-center-head { align-items: flex-end; }
.design-center-head > div { gap: 5px; }
.design-center-head span,
.new-project-category-head small {
  font-size: 11px;
  letter-spacing: 0;
}
.design-center-head h3 { font-size: 20px; line-height: 1.25; }
.design-center-head p { font-size: 12px; line-height: 1.55; }

.design-category-tabs {
  gap: 4px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--v2-border) 82%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--v2-bg) 76%, transparent);
  scrollbar-width: thin;
}
.design-category-tabs button {
  min-height: 38px;
  padding: 0 13px;
  border-color: transparent;
  border-radius: 5px;
  background: transparent;
  font-size: 12px;
  font-weight: 650;
}
.design-category-tabs button:hover { background: color-mix(in srgb, var(--v2-panel) 84%, transparent); color: var(--v2-text); }
.design-category-tabs button.active {
  border-color: color-mix(in srgb, var(--v2-blue) 42%, var(--v2-border));
  background: var(--v2-panel);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
  color: var(--v2-text);
}
.design-category-tabs button svg { width: 16px; height: 16px; }

.design-category-grid {
  grid-template-columns: repeat(5, minmax(190px, 1fr));
  gap: 10px;
}
.design-category-card {
  position: relative;
  min-height: 78px;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 14px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--v2-border) 88%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--v2-panel) 92%, var(--v2-bg));
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.design-category-card::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: transparent;
  content: "";
}
.design-category-card:hover,
.design-category-card:focus-visible {
  border-color: color-mix(in srgb, var(--v2-blue) 58%, var(--v2-border));
  background: color-mix(in srgb, var(--v2-blue) 6%, var(--v2-panel));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  transform: translateY(-1px);
}
.design-category-card:hover::after,
.design-category-card:focus-visible::after { background: var(--v2-blue); }
.design-category-card > i,
.design-category-card > svg,
.design-category-card > .fluent-icon-shell {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--v2-blue) 11%, var(--v2-bg));
  color: var(--v2-blue);
}
.design-category-card > .fluent-icon-shell svg { width: 17px; height: 17px; }
.design-category-card strong { font-size: 13px; line-height: 1.35; }
.design-category-card small { margin-top: 4px; font-size: 11px; line-height: 1.35; }

.new-project-category-context {
  gap: 16px;
  padding: 16px;
  border-color: color-mix(in srgb, var(--v2-border) 92%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--v2-panel) 94%, var(--v2-bg));
  box-shadow: inset 3px 0 color-mix(in srgb, var(--v2-blue) 64%, transparent);
}
.new-project-category-head { align-items: flex-start; }
.new-project-category-head h3 { font-size: 17px; line-height: 1.35; }
.new-project-category-head p { margin-top: 4px; font-size: 12px; line-height: 1.55; }
.new-project-category-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.new-project-category-field {
  gap: 7px;
  padding: 0;
  border-left: 0;
  background: transparent;
}
.new-project-category-field span { font-size: 11px; font-weight: 600; }
.new-project-category-field strong { font-size: 12px; }
.new-project-category-field input,
.new-project-category-field select,
.new-project-category-field textarea {
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 6px !important;
  background: var(--v2-bg) !important;
  font-size: 12px;
}
.new-project-category-field textarea { min-height: 78px; line-height: 1.55; }
.category-field-unit { font-size: 11px; }
.new-project-category-output { gap: 7px; }
.new-project-category-output span { font-size: 11px; }
.new-project-category-output b {
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--v2-border) 84%, transparent);
  border-radius: 4px;
  background: var(--v2-bg);
  font-size: 10px;
}

.design-workspace-config,
.design-workspace-summary {
  gap: 12px;
  padding: 13px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--v2-bg) 72%, var(--v2-panel));
}
.design-workspace-section-head strong { font-size: 12px; }
.design-workspace-section-head span,
.design-workspace-section-head em { font-size: 10px; }
.design-workspace-preset-grid { gap: 8px; }
.design-workspace-preset {
  min-height: 68px;
  padding: 10px 11px;
  border-radius: 6px;
  background: var(--v2-panel);
}
.design-workspace-preset.selected {
  box-shadow: inset 3px 0 var(--v2-blue), 0 2px 8px rgba(0, 0, 0, .08);
}
.design-workspace-preset strong { font-size: 12px; }
.design-workspace-preset small {
  overflow: visible;
  font-size: 10px;
  line-height: 1.45;
  text-overflow: clip;
  white-space: normal;
}
.design-workspace-preset em { font-size: 10px; }
.design-workspace-style-row { gap: 9px; }
.design-workspace-style { width: 112px; min-width: 112px; gap: 7px; padding: 7px; border-radius: 6px; }
.design-workspace-style small { font-size: 10px; }
.design-workspace-style-swatch { height: 36px; }
.design-workspace-summary > div > strong { font-size: 11px; }
.design-workspace-summary b,
.design-workspace-summary button { min-height: 31px; padding: 5px 9px; font-size: 10px; }
.design-workspace-summary button svg { width: 14px; height: 14px; }

.design-workspace-readiness {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--v2-border);
  border-left: 3px solid var(--v2-blue);
  border-radius: 7px;
  background: var(--v2-panel);
}
.design-workspace-readiness.needs-input { border-left-color: #c43d3d; }
.design-workspace-readiness.ready { border-left-color: #2f8b62; }
.design-workspace-readiness > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.design-workspace-readiness > header > div { display: grid; gap: 2px; }
.design-workspace-readiness > header small,
.design-workspace-readiness-missing > small,
.design-workspace-recommended-tools > small { color: var(--v2-muted); font-size: 10px; }
.design-workspace-readiness > header strong { font-size: 13px; }
.design-workspace-readiness > header em { color: var(--v2-blue); font-size: 22px; font-style: normal; font-weight: 700; }
.design-workspace-readiness-meter { height: 5px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--v2-border) 70%, transparent); }
.design-workspace-readiness-meter i { display: block; width: var(--readiness); height: 100%; border-radius: inherit; background: var(--v2-blue); transition: width .18s ease; }
.design-workspace-readiness > p { margin: 0; color: var(--v2-muted); font-size: 10px; }
.design-workspace-readiness-missing,
.design-workspace-recommended-tools { display: grid; gap: 6px; }
.design-workspace-readiness-missing > span,
.design-workspace-recommended-tools > span { display: flex; min-width: 0; flex-wrap: wrap; gap: 6px; }
.design-workspace-readiness-missing button,
.design-workspace-readiness-missing b,
.design-workspace-readiness-missing span > span {
  padding: 5px 8px;
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  background: var(--v2-bg);
  color: var(--v2-text);
  font-size: 10px;
  font-weight: 600;
}
.design-workspace-readiness-missing button:hover { border-color: var(--v2-blue); }
.design-workspace-recommended-tools button {
  display: grid;
  min-width: 0;
  flex: 1 1 112px;
  grid-template-columns: 16px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid var(--v2-border);
  border-radius: 5px;
  background: var(--v2-bg);
  color: var(--v2-text);
  text-align: left;
}
.design-workspace-recommended-tools button:hover { border-color: var(--v2-blue); }
.design-workspace-recommended-tools svg { width: 14px; height: 14px; color: var(--v2-blue); }
.design-workspace-recommended-tools b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.design-workspace-recommended-tools em,
.design-workspace-tool-grid > button > em {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--v2-blue);
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

#newProjectPanel .design-workspace-preset-grid { grid-template-columns: 1fr; }
#newProjectPanel .design-workspace-preset {
  min-height: 58px;
  padding: 9px 11px;
}
#newProjectPanel .design-workspace-preset > span { gap: 2px; }
#newProjectPanel .design-workspace-preset strong { white-space: nowrap; }
#newProjectPanel .design-workspace-preset small { max-width: 100%; }

/* Category workspace dialogs use the same restrained visual hierarchy as the
   compact project toolbar. */
.design-workspace-dialog {
  border-color: color-mix(in srgb, var(--v2-border) 90%, transparent);
  background: color-mix(in srgb, var(--v2-panel) 98%, var(--v2-bg));
  box-shadow: 0 24px 72px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 255, 255, .025);
}
.design-workspace-dialog::backdrop {
  background: rgba(8, 12, 15, .58);
  backdrop-filter: blur(3px);
}
.design-workspace-dialog-shell > header {
  min-height: 76px;
  padding: 16px 18px;
  border-bottom-color: color-mix(in srgb, var(--v2-border) 84%, transparent);
  background: color-mix(in srgb, var(--v2-panel) 96%, var(--v2-bg));
}
.design-workspace-dialog-shell > header > div { gap: 4px; }
.design-workspace-dialog-shell > header span {
  font-size: 9px;
  letter-spacing: .04em;
}
.design-workspace-dialog-shell > header strong {
  font-size: 18px;
  line-height: 1.25;
}
.design-workspace-dialog-shell > header small {
  max-width: 620px;
  color: var(--v2-muted);
  font-size: 10px;
  line-height: 1.45;
}
.design-workspace-dialog-shell > header button {
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 6px;
}
.design-workspace-dialog-shell > header button:hover,
.design-workspace-dialog-shell > header button:focus-visible {
  border-color: var(--v2-border);
  background: color-mix(in srgb, var(--v2-bg) 76%, var(--v2-panel));
  outline: none;
}
.design-workspace-dialog-body {
  padding: 18px;
  background: color-mix(in srgb, var(--v2-bg) 88%, var(--v2-panel));
}
.design-workspace-tools-intro {
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--v2-blue) 28%, var(--v2-border));
  border-left: 3px solid var(--v2-blue);
  border-radius: 6px;
  background: color-mix(in srgb, var(--v2-blue) 7%, var(--v2-panel));
}
.design-workspace-tools-intro strong { font-size: 12px; }
.design-workspace-tools-intro small { font-size: 10px; line-height: 1.45; }
.design-workspace-tool-grid { gap: 10px; }
.design-workspace-tool-grid > button {
  min-height: 92px;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 14px;
  border-color: color-mix(in srgb, var(--v2-border) 88%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--v2-panel) 94%, var(--v2-bg));
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.design-workspace-tool-grid > button:hover,
.design-workspace-tool-grid > button:focus-visible {
  border-color: color-mix(in srgb, var(--v2-blue) 58%, var(--v2-border));
  background: color-mix(in srgb, var(--v2-blue) 7%, var(--v2-panel));
  box-shadow: 0 5px 16px rgba(0, 0, 0, .12);
  outline: none;
  transform: translateY(-1px);
}
.design-workspace-tool-grid > button[data-recommended-rank] {
  border-color: color-mix(in srgb, var(--v2-blue) 46%, var(--v2-border));
  box-shadow: inset 3px 0 color-mix(in srgb, var(--v2-blue) 78%, transparent);
}
.design-workspace-tool-grid > button > svg {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--v2-blue) 11%, var(--v2-bg));
}
.design-workspace-tool-grid > button > span { gap: 5px; }
.design-workspace-tool-grid strong { font-size: 12px; line-height: 1.3; }
.design-workspace-tool-grid small { font-size: 10px; line-height: 1.5; }
.design-workspace-tool-grid > button > em {
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border: 2px solid color-mix(in srgb, var(--v2-panel) 88%, transparent);
  font-size: 9px;
}
.design-workspace-dialog-options { gap: 10px; }
.design-workspace-dialog-options .design-workspace-preset {
  min-height: 78px;
  padding: 12px 13px;
  border-color: color-mix(in srgb, var(--v2-border) 88%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--v2-panel) 94%, var(--v2-bg));
}
.design-workspace-dialog-options .design-workspace-preset:hover,
.design-workspace-dialog-options .design-workspace-preset:focus-visible {
  border-color: color-mix(in srgb, var(--v2-blue) 58%, var(--v2-border));
  outline: none;
}
.design-workspace-dialog-options .design-workspace-preset.selected {
  border-color: var(--v2-blue);
  box-shadow: inset 3px 0 var(--v2-blue), 0 5px 16px rgba(0, 0, 0, .1);
  background: color-mix(in srgb, var(--v2-blue) 7%, var(--v2-panel));
}
.design-workspace-dialog-styles { gap: 10px; }
.design-workspace-dialog-styles .design-workspace-style {
  gap: 8px;
  padding: 8px;
  border-color: color-mix(in srgb, var(--v2-border) 88%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--v2-panel) 94%, var(--v2-bg));
}
.design-workspace-dialog-styles .design-workspace-style:hover,
.design-workspace-dialog-styles .design-workspace-style:focus-visible {
  border-color: color-mix(in srgb, var(--v2-blue) 58%, var(--v2-border));
  outline: none;
}
.design-workspace-dialog-styles .design-workspace-style.selected {
  border-color: var(--v2-blue);
  box-shadow: 0 0 0 1px var(--v2-blue), 0 5px 16px rgba(0, 0, 0, .1);
}
.design-workspace-dialog-styles .design-workspace-style-swatch {
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--v2-border) 72%, transparent);
  border-radius: 5px;
}
.design-workspace-dialog-shell > footer {
  min-height: 58px;
  padding: 11px 18px;
  border-top-color: color-mix(in srgb, var(--v2-border) 84%, transparent);
  background: color-mix(in srgb, var(--v2-panel) 97%, var(--v2-bg));
}
.design-workspace-dialog-shell > footer > span {
  max-width: 560px;
  font-size: 10px;
  line-height: 1.45;
}
.design-workspace-dialog-shell > footer .primary-btn {
  min-height: 34px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.design-workspace-tool-report > header,
.design-workspace-tool-report p,
.design-workspace-tool-report > aside b { border-radius: 6px; }
.design-workspace-tool-report p.blocked {
  background: color-mix(in srgb, #c43d3d 8%, var(--v2-panel));
}

/* Reuse the active theme line token inside design-center surfaces. */
.design-center,
#newProjectPanel .new-project-category-context,
.design-workspace-dialog {
  --v2-border: var(--v2-line);
}

.design-workspace-dialog { width: min(800px, calc(100vw - 32px)); border-radius: 8px; }
.design-workspace-dialog-shell > header,
.design-workspace-dialog-shell > footer { padding: 16px 18px; }
.design-workspace-dialog-shell > header span { font-size: 11px; }
.design-workspace-dialog-shell > header strong { font-size: 18px; }
.design-workspace-dialog-shell > header small,
.design-workspace-dialog-shell > footer > span { font-size: 11px; line-height: 1.45; }
.design-workspace-dialog-body { padding: 18px; }
.design-workspace-dialog-options,
.design-workspace-tool-grid { gap: 10px; }
.design-workspace-tool-grid > button { min-height: 88px; padding: 13px; border-radius: 7px; }
.design-workspace-tool-grid > button { position: relative; }
.design-workspace-tool-grid > button[data-recommended-rank] { border-color: color-mix(in srgb, var(--v2-blue) 58%, var(--v2-border)); background: color-mix(in srgb, var(--v2-blue) 5%, var(--v2-panel)); }
.design-workspace-tool-grid > button > em { position: absolute; top: 8px; right: 8px; }
.design-workspace-tool-grid > button > svg { width: 22px; height: 22px; }
.design-workspace-tool-grid strong { font-size: 12px; }
.design-workspace-tool-grid small { font-size: 11px; line-height: 1.5; }
.design-workspace-tools-intro { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 10px 12px; border-left: 3px solid var(--v2-blue); background: var(--v2-panel); }
.design-workspace-tools-intro > span { display: grid; gap: 3px; }
.design-workspace-tools-intro strong { font-size: 12px; }
.design-workspace-tools-intro small { color: var(--v2-muted); font-size: 10px; }
.design-workspace-tools-intro > button,
.design-workspace-audit > header > button {
  display: inline-flex;
  min-height: 32px;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--v2-blue) 48%, var(--v2-border));
  border-radius: 5px;
  color: var(--v2-blue);
  background: var(--v2-panel);
  font-size: 10px;
  font-weight: 700;
}
.design-workspace-tools-intro > button:hover,
.design-workspace-tools-intro > button:focus-visible,
.design-workspace-audit > header > button:hover,
.design-workspace-audit > header > button:focus-visible { border-color: var(--v2-blue); outline: none; }
.design-workspace-tools-intro > button svg,
.design-workspace-audit > header > button svg { width: 14px; height: 14px; }

.design-workspace-audit { display: grid; gap: 12px; }
.design-workspace-audit > header {
  display: grid;
  grid-template-columns: minmax(120px, .7fr) minmax(300px, 1.5fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--v2-border);
  border-radius: 7px;
  background: var(--v2-panel);
}
.design-workspace-audit > header > div { display: flex; align-items: baseline; gap: 8px; }
.design-workspace-audit > header > div small { color: var(--v2-muted); font-size: 10px; }
.design-workspace-audit > header > div strong { color: var(--v2-blue); font-size: 28px; line-height: 1; }
.design-workspace-audit > header dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.design-workspace-audit > header dl > div { display: grid; gap: 2px; padding: 0 12px; border-left: 1px solid var(--v2-border); }
.design-workspace-audit > header dt { font-size: 14px; font-weight: 700; }
.design-workspace-audit > header dd { margin: 0; color: var(--v2-muted); font-size: 9px; }
.design-workspace-audit > header .ready dt { color: #2f8b62; }
.design-workspace-audit > header .suggest dt { color: var(--v2-blue); }
.design-workspace-audit > header .blocked dt { color: #c43d3d; }
.design-workspace-audit-note { display: flex; align-items: center; gap: 9px; padding: 2px 3px; }
.design-workspace-audit-note > svg { width: 17px; height: 17px; color: var(--v2-blue); }
.design-workspace-audit-note > span { display: grid; gap: 2px; }
.design-workspace-audit-note strong { font-size: 11px; }
.design-workspace-audit-note small { color: var(--v2-muted); font-size: 9px; }
.design-workspace-audit-list { display: grid; gap: 7px; }
.design-workspace-audit-list > button {
  display: grid;
  min-height: 58px;
  grid-template-columns: 28px minmax(0, 1fr) auto 36px 14px;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--v2-border);
  border-left: 3px solid var(--v2-border);
  border-radius: 6px;
  color: var(--v2-text);
  background: var(--v2-panel);
  text-align: left;
}
.design-workspace-audit-list > button:hover,
.design-workspace-audit-list > button:focus-visible { border-color: var(--v2-blue); outline: none; }
.design-workspace-audit-list > button.ready { border-left-color: #2f8b62; }
.design-workspace-audit-list > button.suggest { border-left-color: var(--v2-blue); }
.design-workspace-audit-list > button.blocked { border-left-color: #c43d3d; }
.design-workspace-audit-list > button > svg:first-child { width: 17px; height: 17px; color: var(--v2-blue); }
.design-workspace-audit-list > button > svg:last-child { width: 14px; height: 14px; color: var(--v2-muted); }
.design-workspace-audit-list > button > span { display: grid; min-width: 0; gap: 2px; }
.design-workspace-audit-list > button strong { font-size: 11px; }
.design-workspace-audit-list > button small { overflow: hidden; color: var(--v2-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.design-workspace-audit-list > button b { color: var(--v2-muted); font-size: 9px; font-weight: 600; }
.design-workspace-audit-list > button.blocked b { color: #c43d3d; }
.design-workspace-audit-list > button > em { color: var(--v2-blue); font-size: 14px; font-style: normal; font-weight: 700; text-align: right; }
.design-workspace-audit-more { margin-top: 0; }
.design-workspace-audit-more > .design-workspace-audit-list { padding: 9px; }

.design-workspace-tools-more,
.design-workspace-dialog-settings > details {
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--v2-border) 88%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--v2-panel) 94%, var(--v2-bg));
}
.design-workspace-tools-more > summary,
.design-workspace-dialog-settings > details > summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  color: var(--v2-text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.design-workspace-tools-more > summary::-webkit-details-marker,
.design-workspace-dialog-settings > details > summary::-webkit-details-marker { display: none; }
.design-workspace-tools-more > summary span,
.design-workspace-dialog-settings > details > summary span { flex: 1; font-size: 11px; font-weight: 700; }
.design-workspace-tools-more > summary em,
.design-workspace-dialog-settings > details > summary em { color: var(--v2-muted); font-size: 10px; font-style: normal; }
.design-workspace-tools-more > summary svg,
.design-workspace-dialog-settings > details > summary svg {
  width: 14px;
  height: 14px;
  color: var(--v2-muted);
  transition: transform .16s ease;
}
.design-workspace-tools-more[open] > summary svg,
.design-workspace-dialog-settings > details[open] > summary svg { transform: rotate(180deg); }
.design-workspace-tools-more[open] > summary,
.design-workspace-dialog-settings > details[open] > summary { border-bottom: 1px solid var(--v2-border); }
.design-workspace-tools-more > .design-workspace-tool-grid { padding: 10px; }
.design-workspace-tool-grid-primary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.design-workspace-tool-grid-primary > button { min-height: 104px; }

.design-workspace-dialog-settings { display: grid; gap: 0; }
.design-workspace-dialog-settings > details:first-of-type { margin-top: 0; }
.design-workspace-dialog-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
}
.design-workspace-dialog-field {
  display: grid;
  min-width: 0;
  gap: 6px;
}
.design-workspace-dialog-field.wide { grid-column: 1 / -1; }
.design-workspace-dialog-field > span:first-child { color: var(--v2-muted); font-size: 10px; font-weight: 600; }
.design-workspace-dialog-field input,
.design-workspace-dialog-field select,
.design-workspace-dialog-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--v2-border);
  border-radius: 5px;
  color: var(--v2-text);
  background: var(--v2-bg);
  font: inherit;
  font-size: 11px;
}
.design-workspace-dialog-field textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
.design-workspace-dialog-field input:focus,
.design-workspace-dialog-field select:focus,
.design-workspace-dialog-field textarea:focus {
  border-color: var(--v2-blue);
  outline: 2px solid color-mix(in srgb, var(--v2-blue) 18%, transparent);
  outline-offset: 0;
}
.design-workspace-dialog-field .category-field-control { position: relative; display: block; }
.design-workspace-dialog-field .category-field-control input:has(+ .category-field-unit) { padding-right: 40px; }
.design-workspace-dialog-field .category-field-unit {
  position: absolute;
  top: 50%;
  right: 9px;
  color: var(--v2-muted);
  font-size: 10px;
  font-style: normal;
  transform: translateY(-50%);
  pointer-events: none;
}

.design-workspace-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid var(--v2-border);
}
.design-workspace-report-actions button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--v2-border);
  border-radius: 5px;
  color: var(--v2-text);
  background: var(--v2-panel);
  font-size: 10px;
  font-weight: 600;
}
.design-workspace-report-actions button:hover,
.design-workspace-report-actions button:focus-visible { border-color: var(--v2-blue); outline: none; }
.design-workspace-report-actions button.recommended {
  border-color: color-mix(in srgb, var(--v2-blue) 56%, var(--v2-border));
  color: var(--v2-blue);
  background: color-mix(in srgb, var(--v2-blue) 7%, var(--v2-panel));
}
.design-workspace-report-actions-primary .workspace-direct {
  min-height: 38px;
  flex: 1 1 100%;
  justify-content: center;
}
.design-workspace-report-actions svg { width: 14px; height: 14px; }

.design-workspace-executable-summary {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 10px;
  border-left: 3px solid #2f8b62;
  border-radius: 5px;
  background: color-mix(in srgb, #2f8b62 7%, var(--v2-panel));
}
.design-workspace-executable-summary > svg { width: 16px; height: 16px; flex: 0 0 auto; color: #2f8b62; }
.design-workspace-executable-summary > span { display: grid; min-width: 0; gap: 3px; }
.design-workspace-executable-summary strong { font-size: 10px; }
.design-workspace-executable-summary small { color: var(--v2-muted); font-size: 9px; line-height: 1.5; }
.design-workspace-report-actions-primary { padding-top: 0; border-top: 0; }
.design-workspace-report-more {
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--v2-panel) 94%, var(--v2-bg));
  scroll-margin-bottom: 12px;
}
.design-workspace-report-more > summary {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.design-workspace-report-more > summary::-webkit-details-marker { display: none; }
.design-workspace-report-more > summary span { flex: 1; font-size: 10px; font-weight: 700; }
.design-workspace-report-more > summary em { color: var(--v2-muted); font-size: 9px; font-style: normal; }
.design-workspace-report-more > summary svg { width: 14px; height: 14px; color: var(--v2-muted); transition: transform .16s ease; }
.design-workspace-report-more[open] > summary { border-bottom: 1px solid var(--v2-border); }
.design-workspace-report-more[open] > summary svg { transform: rotate(180deg); }
.design-workspace-report-more > .design-workspace-report-actions { padding: 9px; border-top: 0; }
.design-workspace-report-more > .design-workspace-report-actions > button {
  flex: 1 1 calc(33.333% - 6px);
  justify-content: center;
}

@media (max-width: 1280px) {
  .design-center { width: min(100%, 1160px); }
  .design-category-grid { grid-template-columns: repeat(4, minmax(170px, 1fr)); }
}

@media (max-width: 980px) {
  .design-category-grid { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
}

@media (max-width: 700px) {
  .design-center { padding-top: 16px; }
  .design-center-head { align-items: flex-start; flex-direction: column; }
  .design-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .new-project-category-fields,
  .design-workspace-dialog-options,
  .design-workspace-tool-grid,
  .design-workspace-tool-grid-primary,
  .design-workspace-dialog-field-grid { grid-template-columns: 1fr; }
  .design-workspace-dialog-field.wide { grid-column: auto; }
  .design-workspace-tools-intro { align-items: stretch; flex-direction: column; gap: 9px; }
  .design-workspace-tools-intro > button { justify-content: center; }
  .design-workspace-audit > header { grid-template-columns: 1fr; gap: 12px; }
  .design-workspace-audit > header dl > div:first-child { border-left: 0; padding-left: 0; }
  .design-workspace-audit > header > button { justify-content: center; }
  .design-workspace-audit-list > button { grid-template-columns: 24px minmax(0, 1fr) 34px 14px; }
  .design-workspace-audit-list > button > b { display: none; }
  .design-workspace-report-actions-primary > button { flex: 1 1 calc(50% - 7px); justify-content: center; }
  .design-workspace-report-more > .design-workspace-report-actions > button { flex-basis: 100%; }
  .design-category-card { min-height: 72px; padding: 11px; }
  .design-workspace-recommended-tools button { flex-basis: 100%; }

  html body #newProjectPanel {
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: none;
    box-sizing: border-box;
    border-left: 0 !important;
  }
  #newProjectPanel .new-document-head { padding: 15px 16px 12px; }
  #newProjectPanel .new-document-head h2 { font-size: 18px; }
  #newProjectPanel .new-document-head p { line-height: 1.4; }
  #newProjectPanel .new-document-panel > .creation-mode-grid { margin: 10px 14px 0; }
  #newProjectPanel .creation-mode-segmented .mode-card {
    min-width: 0;
    min-height: 58px !important;
    padding: 7px 8px !important;
  }
  #newProjectPanel .creation-mode-segmented .mode-card > span { min-width: 0; }
  #newProjectPanel .creation-mode-segmented strong,
  #newProjectPanel .creation-mode-segmented em {
    overflow-wrap: anywhere;
    white-space: normal;
  }
  body.design-category-new-project #newProjectPanel .new-document-form,
  #newProjectPanel .new-document-form {
    grid-template-columns: 1fr;
    gap: 11px;
    padding: 12px 14px 18px;
  }
  #newProjectPanel .new-project-category-context { padding: 13px; }
  #newProjectPanel .new-project-category-head h3 { font-size: 16px; }
  #newProjectPanel .new-project-category-head p { font-size: 11px; }
  #newProjectPanel .design-workspace-config,
  #newProjectPanel .design-workspace-summary { padding: 11px; }
  body.design-category-new-project #newProjectPanel .design-workspace-summary {
    grid-template-columns: 1fr;
  }
  body.design-category-new-project #newProjectPanel .design-workspace-summary > div:last-child > span {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.design-category-new-project #newProjectPanel .design-workspace-summary button {
    width: 100%;
    min-width: 0;
  }
  #newProjectPanel .design-workspace-style { width: 84px; min-width: 84px; }
  #newProjectPanel .new-project-actions {
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
    background: var(--v2-panel);
  }
}

/* Tool center: navigation first, preferences second. The drawer remains a
   utility surface, so it uses restrained borders and readable 11-13px type. */
html body #assistantToolsDrawer.assistant-tools-drawer.open {
  width: min(460px, calc(100vw - 24px)) !important;
  border-radius: 8px 0 0 8px !important;
  background: var(--v2-panel) !important;
  box-shadow: -20px 0 48px rgba(0, 0, 0, .22) !important;
}
html body #assistantToolsDrawer.assistant-tools-drawer.open > header {
  min-height: 68px;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--v2-border) !important;
}
#assistantToolsDrawer > header > div { gap: 4px; }
#assistantToolsDrawer > header strong { font-size: 17px !important; line-height: 1.2; }
#assistantToolsDrawer > header span { font-size: 11px !important; line-height: 1.4; }
#assistantToolsDrawer .assistant-tool-search {
  position: relative !important;
  top: auto !important;
  min-height: 42px;
  margin: 14px 18px 6px !important;
  padding: 0 12px;
  border-radius: 7px;
  background: var(--v2-bg) !important;
}
#assistantToolsDrawer .assistant-tool-search input { height: 40px; font-size: 12px !important; }
#assistantToolsDrawer .assistant-tool-nav {
  gap: 0 !important;
  padding: 4px 0 0 !important;
  border-bottom: 1px solid var(--v2-border) !important;
}
#assistantToolsDrawer .assistant-tool-group {
  gap: 10px;
  padding: 14px 18px 16px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--v2-border) 72%, transparent) !important;
}
#assistantToolsDrawer .assistant-tool-group > header { padding: 0 !important; }
#assistantToolsDrawer .assistant-tool-group > header strong { font-size: 12px !important; }
#assistantToolsDrawer .assistant-tool-group > header span { font-size: 10px !important; }
#assistantToolsDrawer .assistant-tool-group-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
  padding: 0 !important;
}
#assistantToolsDrawer .assistant-tool-group-grid > button {
  min-height: 68px !important;
  gap: 10px !important;
  padding: 10px 11px !important;
  border-color: color-mix(in srgb, var(--v2-border) 86%, transparent) !important;
  border-radius: 7px !important;
  background: var(--v2-bg) !important;
  transform: none !important;
}
#assistantToolsDrawer .assistant-tool-group-grid > button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--v2-blue) 58%, var(--v2-border)) !important;
  background: color-mix(in srgb, var(--v2-blue) 7%, var(--v2-panel)) !important;
}
#assistantToolsDrawer .assistant-tool-group-grid > button > svg,
#assistantToolsDrawer .assistant-tool-group-grid > button > .fluent-icon-shell {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px;
  color: var(--v2-blue);
}
#assistantToolsDrawer .assistant-tool-group-grid > button strong { font-size: 12px; line-height: 1.35; }
#assistantToolsDrawer .assistant-tool-group-grid > button small {
  overflow: visible;
  color: var(--v2-muted);
  font-size: 10px;
  line-height: 1.4;
  text-overflow: clip;
  white-space: normal;
}
#assistantToolsDrawer .assistant-preferences-panel {
  gap: 12px;
  margin: 16px 18px !important;
  padding: 14px !important;
  border-radius: 7px !important;
  background: var(--v2-bg) !important;
}
#assistantToolsDrawer .assistant-preferences-panel > header strong { font-size: 13px !important; }
#assistantToolsDrawer .assistant-preferences-panel > header span { font-size: 10px !important; }
#assistantToolsDrawer .assistant-preferences-panel label > span { font-size: 11px !important; font-weight: 600; }
#assistantToolsDrawer .assistant-preferences-panel input,
#assistantToolsDrawer .assistant-preferences-panel select,
#assistantToolsDrawer .assistant-preferences-panel textarea {
  min-height: 38px !important;
  border-radius: 6px !important;
  background: var(--v2-panel) !important;
  font-size: 12px !important;
}
#assistantToolsDrawer .assistant-capability-diagnostics {
  margin: 0 18px 20px !important;
  border-radius: 7px !important;
}

@media (max-width: 520px) {
  #assistantToolsDrawer .assistant-tool-group-grid { grid-template-columns: 1fr; }
  html body #assistantToolsDrawer.assistant-tools-drawer.open { width: calc(100vw - 12px) !important; }
}

/* Category controls share the flat editor chrome and keep secondary
   settings in their existing dialogs. */
@layer assistantChrome {
  html:root[data-theme] body:not([data-design-category-group="presentation"])
    #step-edit.editor-layout:not(.copy-planning-mode) {
    --category-toolbar-height: 56px;
    --category-ribbon-height: 112px;
  }

  html:root[data-theme] body:not([data-design-category-group="presentation"])
    #step-edit.editor-layout:not(.copy-planning-mode) > .editor-top-ribbon {
    height: var(--category-ribbon-height) !important;
    min-height: var(--category-ribbon-height) !important;
    max-height: var(--category-ribbon-height) !important;
    overflow: hidden !important;
  }

  html:root[data-theme] body #step-edit #designCategoryToolbar {
    box-sizing: border-box;
    height: var(--category-toolbar-height, 56px) !important;
    min-height: var(--category-toolbar-height, 56px) !important;
    grid-template-columns: minmax(100px, 156px) minmax(0, 1fr) auto;
    grid-template-areas: "identity controls actions";
    align-items: center;
    gap: 12px !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid var(--neutral-line) !important;
    color: var(--neutral-text) !important;
    background: var(--neutral-panel) !important;
    background-image: none !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar:not(.hidden) {
    display: grid !important;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar.hidden {
    display: none !important;
  }

  html:root[data-theme] body #step-edit #designCategoryToolbar
    :is(.design-category-toolbar-main, .design-category-toolbar-controls,
        .design-category-toolbar-workspace, .design-category-toolbar-actions) {
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    color: var(--neutral-text) !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar .design-category-toolbar-main {
    grid-area: identity;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar .design-category-toolbar-main strong {
    min-width: 0;
    overflow: hidden;
    color: var(--neutral-text) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0 !important;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar .design-category-toolbar-icon {
    display: grid;
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px;
    place-items: center;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--neutral-muted) !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar .design-category-toolbar-icon
    :is(svg, i[data-lucide], .fluent-icon-shell, .fluent-icon) {
    width: 18px !important;
    height: 18px !important;
    color: currentColor !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }

  html:root[data-theme] body #step-edit #designCategoryToolbar .design-category-toolbar-controls {
    grid-area: controls;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, .8fr);
    align-items: center;
    gap: 8px;
    max-width: 720px;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar .design-category-toolbar-workspace {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar .design-category-toolbar-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }

  html:root[data-theme] body #step-edit #designCategoryToolbar button {
    box-sizing: border-box;
    display: inline-flex;
    min-width: 0;
    height: 36px !important;
    min-height: 36px !important;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 0 10px !important;
    border: 1px solid var(--neutral-line) !important;
    border-radius: 6px !important;
    color: var(--neutral-text) !important;
    background: var(--neutral-panel) !important;
    background-image: none !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4;
    text-align: left;
    white-space: nowrap;
    letter-spacing: 0 !important;
    transform: none !important;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar button:hover:not(:disabled) {
    border-color: var(--neutral-line-strong) !important;
    color: var(--neutral-text) !important;
    background: var(--neutral-panel-soft) !important;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar button:focus-visible {
    outline: 2px solid var(--neutral-accent) !important;
    outline-offset: 2px !important;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar button:disabled {
    color: var(--neutral-faint) !important;
    background: var(--neutral-panel-soft) !important;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar button
    :is(svg, i[data-lucide], .fluent-icon-shell, .fluent-icon) {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px;
    color: currentColor !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar
    :is(svg, i[data-lucide], .fluent-icon-shell) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar .fluent-icon {
    display: block !important;
    background: currentColor !important;
    background-color: currentColor !important;
    background-image: none !important;
    -webkit-mask-image: var(--fluent-icon-regular) !important;
    mask-image: var(--fluent-icon-regular) !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    filter: none !important;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar button > :last-child:is(svg, .fluent-icon-shell) {
    width: 12px !important;
    height: 12px !important;
    flex-basis: 12px;
    margin-left: auto;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar .toolbar-choice-label {
    flex: 0 0 auto;
    color: var(--neutral-muted) !important;
    font-size: 12px;
    font-weight: 400;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar
    :is(.design-category-toolbar-workspace strong, .design-category-toolbar-more > span) {
    min-width: 0;
    overflow: hidden;
    color: var(--neutral-text) !important;
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar .workspace-toolbar-swatch {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    overflow: hidden;
    border: 1px solid var(--neutral-line-strong);
    border-radius: 3px;
    background: var(--workspace-bg);
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar .workspace-toolbar-swatch::after {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--workspace-accent);
    content: "";
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar .design-category-toolbar-actions > button {
    justify-content: center;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar [data-category-action="generate"] {
    color: var(--neutral-accent-text) !important;
    border-color: var(--neutral-accent) !important;
    background: var(--neutral-accent) !important;
    font-weight: 600 !important;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar [data-category-action="generate"]:hover:not(:disabled) {
    color: var(--neutral-accent-text) !important;
    border-color: var(--neutral-accent-strong) !important;
    background: var(--neutral-accent-strong) !important;
  }
  html:root[data-theme] body #step-edit #designCategoryToolbar [data-category-action="generate"]:disabled {
    color: var(--neutral-faint) !important;
    border-color: var(--neutral-line) !important;
    background: var(--neutral-panel-soft) !important;
  }

  @media (min-width: 1024px) {
    /* The editor shell sizes the ribbon track from its visible content. A
       fixed first track also captures one-row preview/workflow surfaces and
       leaves an empty track when the user collapses the tools. */
    html:root[data-theme] body:not([data-design-category-group="presentation"])
      #step-edit.editor-layout:not(.copy-planning-mode, .editable-preview-mode, .style-preview-mode, .review-workflow-mode, .delivery-workflow-mode, .social-publish-mode, .workflow-panel-open):has(> .editor-top-ribbon:not(.tools-collapsed)) > :is(.inspector, .editor-panel-resizer) {
      top: var(--category-ribbon-height) !important;
    }
  }

  @media (max-width: 1100px) {
    html:root[data-theme] body:not([data-design-category-group="presentation"])
      #step-edit.editor-layout:not(.copy-planning-mode) {
      --category-toolbar-height: 96px;
      --category-ribbon-height: 152px;
    }
    html:root[data-theme] body #step-edit #designCategoryToolbar {
      height: var(--category-toolbar-height, 96px) !important;
      min-height: var(--category-toolbar-height, 96px) !important;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: 36px 36px;
      grid-template-areas: "identity actions" "controls controls";
      row-gap: 8px !important;
      padding: 8px 12px !important;
    }
    html:root[data-theme] body #step-edit #designCategoryToolbar .design-category-toolbar-controls {
      width: 100%;
      max-width: none;
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
  }

  @media (max-width: 680px) {
    html:root[data-theme] body #step-edit #designCategoryToolbar {
      column-gap: 8px !important;
      padding-inline: 8px !important;
    }
    html:root[data-theme] body #step-edit #designCategoryToolbar .design-category-toolbar-controls {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }
    html:root[data-theme] body #step-edit #designCategoryToolbar .design-category-toolbar-workspace {
      display: contents;
    }
    html:root[data-theme] body #step-edit #designCategoryToolbar
      :is([data-workspace-menu="tools"], [data-category-action="assets"]) {
      width: 36px;
      flex: 0 0 36px;
      padding: 0 !important;
    }
    html:root[data-theme] body #step-edit #designCategoryToolbar
      :is([data-workspace-menu="tools"], [data-category-action="assets"]) > span:not(.fluent-icon-shell) {
      display: none;
    }
    html:root[data-theme] body #step-edit #designCategoryToolbar .design-category-toolbar-controls button {
      gap: 5px;
      padding-inline: 7px !important;
    }
    html:root[data-theme] body #step-edit #designCategoryToolbar .toolbar-choice-label {
      display: none;
    }
  }
}

/* ==== consolidated from /apple-store-v4.css (cascade order preserved) ==== */
/* Apple Store presentation pass V4.
   This file is intentionally loaded last. It changes visual hierarchy and
   spacing only; routes, handlers, editor columns and canvas behavior stay put. */

:root {
  --store-bg: #f5f5f7;
  --store-card: #ffffff;
  --store-card-soft: #fbfbfd;
  --store-text: #1d1d1f;
  --store-secondary: #6e6e73;
  --store-tertiary: #86868b;
  --store-line: rgb(29 29 31 / 10%);
  --store-line-strong: rgb(29 29 31 / 16%);
  --store-blue: #0071e3;
  --store-blue-hover: #0077ed;
  --store-blue-soft: rgb(0 113 227 / 9%);
  --store-ai: var(--store-blue);
  --store-ai-hover: var(--store-blue-hover);
  --store-radius-control: 10px;
  --store-radius-card: 18px;
  --store-radius-hero: 22px;
  --store-shadow-card: 0 10px 30px rgb(0 0 0 / 6%);
  --store-shadow-raised: 0 18px 48px rgb(0 0 0 / 9%);

  --product-bg: var(--store-bg);
  --product-card: var(--store-card);
  --product-card-soft: var(--store-card-soft);
  --product-text: var(--store-text);
  --product-muted: var(--store-secondary);
  --product-faint: var(--store-tertiary);
  --product-line: var(--store-line);
  --product-line-strong: var(--store-line-strong);
  --product-accent: var(--store-blue);
  --product-accent-hover: var(--store-blue-hover);
  --product-radius-sm: var(--store-radius-control);
  --product-radius-md: 14px;
  --product-radius-lg: var(--store-radius-card);

  --du-bg: var(--store-bg);
  --du-panel: var(--store-card);
  --du-surface: var(--store-card-soft);
  --du-surface-strong: #f0f0f2;
  --du-line: var(--store-line);
  --du-line-strong: var(--store-line-strong);
  --du-text: var(--store-text);
  --du-muted: var(--store-secondary);
  --du-faint: var(--store-tertiary);
  --du-primary: var(--store-blue);
  --du-primary-hover: var(--store-blue-hover);
  --du-primary-soft: var(--store-blue-soft);

  --apple-ui-bg: var(--store-bg);
  --apple-ui-surface: rgb(255 255 255 / 88%);
  --apple-ui-surface-solid: var(--store-card);
  --apple-ui-surface-raised: rgb(255 255 255 / 98%);
  --apple-ui-line: var(--store-line);
  --apple-ui-line-strong: var(--store-line-strong);
  --apple-ui-text: var(--store-text);
  --apple-ui-muted: var(--store-secondary);
  --apple-ui-faint: var(--store-tertiary);
  --apple-ui-blue: var(--store-blue);
  --apple-ui-blue-strong: var(--store-blue-hover);
  --apple-ui-blue-soft: var(--store-blue-soft);
  --apple-ui-radius-sm: var(--store-radius-control);
  --apple-ui-radius-md: 14px;
  --apple-ui-radius-lg: var(--store-radius-card);
  --apple-ui-radius-xl: var(--store-radius-hero);
  --apple-ui-shadow: var(--store-shadow-raised);
  --apple-ui-shadow-soft: var(--store-shadow-card);
  --apple-ui-focus: 0 0 0 3px rgb(0 113 227 / 18%);

  /* One cool accent system: AI, pending and warning surfaces stay blue/neutral. */
  --aw-orange: var(--store-blue);
  --aw-orange-soft: var(--store-blue-soft);
  --ui-amber: var(--store-blue);
  --v2-amber: var(--store-blue);
  --ms-orange: var(--store-blue);
  --du-warning: var(--store-blue);
}

html[data-theme="dark"] {
  --store-bg: #101012;
  --store-card: #1d1d1f;
  --store-card-soft: #242426;
  --store-text: #f5f5f7;
  --store-secondary: #a1a1a6;
  --store-tertiary: #86868b;
  --store-line: rgb(255 255 255 / 11%);
  --store-line-strong: rgb(255 255 255 / 18%);
  --store-blue: #2997ff;
  --store-blue-hover: #409cff;
  --store-blue-soft: rgb(41 151 255 / 17%);
  --store-ai: var(--store-blue);
  --store-ai-hover: var(--store-blue-hover);
  --store-shadow-card: 0 12px 34px rgb(0 0 0 / 28%);
  --store-shadow-raised: 0 22px 56px rgb(0 0 0 / 42%);
  --apple-ui-surface: rgb(29 29 31 / 88%);
  --apple-ui-surface-raised: rgb(36 36 38 / 98%);
  --du-surface-strong: #2c2c2e;
}

html body {
  color: var(--store-text);
  background: var(--store-bg) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

html body :is(button, summary, input, textarea, select):focus-visible {
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgb(0 113 227 / 18%) !important;
}

html body .primary-btn,
html body .design-primary-button,
html body .delivery-package-btn,
html body .workflow-primary-footer .primary-btn,
html body .delivery-stage-primary-action {
  border-color: transparent !important;
  background: var(--store-blue) !important;
  color: #fff !important;
  box-shadow: none !important;
}

html body .primary-btn:hover:not(:disabled),
html body .design-primary-button:hover:not(:disabled),
html body .delivery-package-btn:hover:not(:disabled),
html body .workflow-primary-footer .primary-btn:hover:not(:disabled),
html body .delivery-stage-primary-action:hover:not(:disabled) {
  background: var(--store-blue-hover) !important;
}

/* Top navigation: retain the 56px geometry contract, but remove the admin-bar feel. */
@media (min-width: 1024px) {
  html body .app-shell > .topbar {
    gap: 20px !important;
    padding-inline: 18px !important;
    border-bottom-color: var(--store-line) !important;
    background: color-mix(in srgb, var(--store-card) 86%, transparent) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
  }

  html body .topbar #projectHomeBtn,
  html body .topbar #fileCenterBtn {
    height: 34px !important;
    min-width: 66px !important;
    padding-inline: 11px !important;
    border: 0 !important;
    border-radius: 9px !important;
    color: var(--store-secondary) !important;
    background: transparent !important;
    font-weight: 560 !important;
  }

  html body .topbar #projectHomeBtn:hover,
  html body .topbar #fileCenterBtn:hover {
    color: var(--store-text) !important;
    background: rgb(29 29 31 / 5%) !important;
  }

  html[data-theme="dark"] body .topbar #projectHomeBtn:hover,
  html[data-theme="dark"] body .topbar #fileCenterBtn:hover {
    background: rgb(255 255 255 / 8%) !important;
  }

  html body .topbar > #editorWorkflowNav {
    width: min(100%, 600px) !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 3px !important;
    border: 1px solid var(--store-line) !important;
    border-radius: 12px !important;
    background: rgb(29 29 31 / 4%) !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] body .topbar > #editorWorkflowNav {
    background: rgb(255 255 255 / 7%) !important;
  }

  html body .topbar > #editorWorkflowNav > .editor-workflow-action,
  html body .topbar > #editorWorkflowNav > .editor-workflow-action:hover:not(:disabled),
  html body .topbar > #editorWorkflowNav > .editor-workflow-action.active,
  html body .topbar > #editorWorkflowNav[data-active-workflow] > .editor-workflow-action.active {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    border: 0 !important;
    border-radius: 9px !important;
    color: var(--store-secondary) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 560 !important;
  }

  html body .topbar > #editorWorkflowNav > .editor-workflow-action:hover:not(:disabled) {
    color: var(--store-text) !important;
    background: rgb(255 255 255 / 62%) !important;
  }

  html body .topbar > #editorWorkflowNav > .editor-workflow-action.active,
  html body .topbar > #editorWorkflowNav[data-active-workflow] > .editor-workflow-action.active {
    color: var(--store-text) !important;
    background: var(--store-card) !important;
    box-shadow: 0 1px 4px rgb(0 0 0 / 10%) !important;
    font-weight: 650 !important;
  }

  html[data-theme="dark"] body .topbar > #editorWorkflowNav > .editor-workflow-action:hover:not(:disabled) {
    background: rgb(255 255 255 / 7%) !important;
  }

  html[data-theme="dark"] body .topbar > #editorWorkflowNav > .editor-workflow-action.active,
  html[data-theme="dark"] body .topbar > #editorWorkflowNav[data-active-workflow] > .editor-workflow-action.active {
    background: #363638 !important;
  }

  html body .topbar #advancedToolsBtn,
  html body .topbar #creditsControl #licensePoints,
  html body .topbar #appAvatarMenuBtn {
    border-color: transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
  }

  html body .topbar #advancedToolsBtn:hover,
  html body .topbar #creditsControl #licensePoints:hover,
  html body .topbar #appAvatarMenuBtn:hover {
    background: rgb(29 29 31 / 6%) !important;
  }

  html body .app-shell {
    grid-template-rows: var(--v2-topbar-height, 56px) 38px minmax(0, 1fr) !important;
  }
}

html body .document-tabs-bar {
  border-bottom-color: var(--store-line) !important;
  background: color-mix(in srgb, var(--store-bg) 88%, var(--store-card)) !important;
}

html body :is(.document-home-tab, .document-tab) {
  border-right-color: var(--store-line) !important;
  color: var(--store-secondary) !important;
}

html body :is(.document-home-tab, .document-tab):hover {
  background: rgb(255 255 255 / 58%) !important;
}

html body :is(.document-home-tab, .document-tab).active {
  color: var(--store-text) !important;
  background: var(--store-card) !important;
}

html body :is(.document-home-tab, .document-tab).active::after {
  right: 12px !important;
  left: 12px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: var(--store-blue) !important;
}

/* Home and project shelf: a large promise followed by calm, image-led cards. */
#step-create.project-start-screen > .project-home-shell {
  background: var(--store-bg) !important;
}

.project-home-nav {
  padding: 28px 16px 20px !important;
  border-right-color: var(--store-line) !important;
  background: color-mix(in srgb, var(--store-card) 90%, var(--store-bg)) !important;
}

.project-home-primary {
  min-height: 44px !important;
  border-radius: 12px !important;
  border-color: var(--store-blue) !important;
  background: var(--store-blue) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.project-home-primary:hover:not(:disabled) {
  border-color: var(--store-blue-hover) !important;
  background: var(--store-blue-hover) !important;
}

.project-home-nav-item {
  min-height: 42px !important;
  border-radius: 10px !important;
}

.project-home-nav-item:hover,
.project-home-nav-item.active {
  color: var(--store-text) !important;
  background: rgb(29 29 31 / 6%) !important;
}

html[data-theme="dark"] .project-home-nav-item:hover,
html[data-theme="dark"] .project-home-nav-item.active {
  background: rgb(255 255 255 / 8%) !important;
}

.project-home-content {
  padding: 34px clamp(32px, 5vw, 76px) 72px !important;
}

.project-home-heading {
  max-width: 980px !important;
}

.project-home-heading span,
.home-style-library-head span,
.project-recent-heading > div > span {
  color: var(--store-secondary) !important;
}

.project-home-heading h2 {
  margin-block: 5px 8px !important;
  color: var(--store-text) !important;
  font-size: clamp(34px, 3.4vw, 48px) !important;
  font-weight: 720 !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
}

.project-home-heading p {
  color: var(--store-secondary) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.smart-create {
  max-width: 1180px !important;
  margin-top: 22px !important;
}

.smart-create-composer {
  padding: 14px !important;
  border: 0 !important;
  border-radius: var(--store-radius-card) !important;
  background: var(--store-card) !important;
  box-shadow: var(--store-shadow-card) !important;
}

.smart-create-composer:focus-within {
  border: 0 !important;
  box-shadow: 0 0 0 3px rgb(0 113 227 / 14%), var(--store-shadow-raised) !important;
}

.smart-create-submit {
  min-width: 118px !important;
  min-height: 42px !important;
  border-radius: 12px !important;
  background: var(--store-blue) !important;
}

.smart-create-submit:hover:not(:disabled) {
  background: var(--store-blue-hover) !important;
}

.project-home-recent {
  max-width: 1440px !important;
  margin-top: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.project-recent-heading {
  margin-bottom: 18px !important;
}

.project-recent-heading h3 {
  font-size: 23px !important;
  letter-spacing: -.025em !important;
}

.project-home-content .project-hub-view {
  gap: 18px !important;
}

.project-home-content .project-card {
  overflow: hidden !important;
  border: 0 !important;
  border-radius: var(--store-radius-card) !important;
  background: var(--store-card) !important;
  box-shadow: var(--store-shadow-card) !important;
}

.project-home-content .project-card:hover {
  border: 0 !important;
  box-shadow: var(--store-shadow-raised) !important;
  transform: translateY(-2px) !important;
}

.project-home-content .project-card.current {
  box-shadow: 0 0 0 2px rgb(0 113 227 / 42%), var(--store-shadow-card) !important;
}

.smart-create-manual,
.home-style-library {
  border: 0 !important;
  border-radius: var(--store-radius-card) !important;
  background: var(--store-card) !important;
  box-shadow: var(--store-shadow-card) !important;
}

/* Editor chrome: keep the workbench grid, use fewer visual boxes. */
@media (min-width: 1024px) {
  #step-edit.editor-layout {
    background: var(--store-bg) !important;
  }

  #step-edit > .editor-top-ribbon,
  #step-edit .editor-top-ribbon {
    border-bottom-color: var(--store-line) !important;
    background: color-mix(in srgb, var(--store-card) 92%, transparent) !important;
    box-shadow: none !important;
  }

  #editorRibbon {
    gap: 2px !important;
    padding-inline: 10px !important;
  }

  #editorRibbon .ribbon-group {
    gap: 5px !important;
    padding-inline: 9px !important;
  }

  #editorRibbon .ribbon-group + .ribbon-group {
    border-left-color: var(--store-line) !important;
  }

  #editorRibbon button,
  #editorRibbon .ribbon-tool,
  #editorRibbon .compact-btn,
  #editorRibbon select,
  #editorRibbon input[type="number"] {
    border-radius: 9px !important;
    color: var(--store-secondary) !important;
  }

  #editorRibbon button:hover:not(:disabled),
  #editorRibbon select:hover:not(:disabled),
  #editorRibbon input:hover:not(:disabled) {
    color: var(--store-text) !important;
    background: rgb(29 29 31 / 5%) !important;
  }

  #editorRibbon button.active {
    color: var(--store-blue) !important;
    background: var(--store-blue-soft) !important;
  }

  #step-edit > :is(.thumb-panel, .inspector),
  #step-edit > .panel,
  #step-edit .panel {
    border-color: var(--store-line) !important;
    background: var(--store-card) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  #step-edit .panel-head {
    min-height: 48px !important;
    padding-inline: 14px !important;
    border-bottom-color: var(--store-line) !important;
  }

  #step-edit .panel-head h2,
  #step-edit > .inspector > .panel-head h2,
  .workflow-inspector-head strong,
  .design-preview-inspector > header strong {
    color: var(--store-text) !important;
    font-size: 14px !important;
    font-weight: 680 !important;
  }

  #step-edit > .thumb-panel > .panel-head h2 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 12px !important;
    letter-spacing: -.01em !important;
  }

  .inspector-view-tabs {
    margin: 9px 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--store-bg) !important;
  }

  .inspector-view-tabs button {
    border-radius: 8px !important;
  }

  .inspector-view-tabs button.active {
    color: var(--store-text) !important;
    background: var(--store-card) !important;
    box-shadow: 0 1px 4px rgb(0 0 0 / 9%) !important;
  }

  #step-edit > .inspector :is(.inspector-tool-section, .workflow-inspector-section) {
    margin-inline: 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--store-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #step-edit > .inspector .workflow-inspector-section > summary,
  #step-edit > .inspector .inspector-tool-section > header {
    min-height: 44px !important;
    padding-inline: 2px !important;
    background: transparent !important;
  }

  #step-edit > .inspector :is(.design-smart-card, .design-control-section, .design-candidate-panel, .design-control-disclosure, .delivery-preflight-panel, .project-copy-lock-control) {
    border: 1px solid var(--store-line) !important;
    border-radius: 14px !important;
    background: var(--store-card-soft) !important;
    box-shadow: none !important;
  }

  .canvas-area {
    background: var(--store-bg) !important;
  }

  .slide-canvas,
  .style-workflow-canvas,
  .editable-workflow-canvas {
    box-shadow: 0 24px 64px rgb(0 0 0 / 12%) !important;
  }

  #step-edit > #editorToolRail.editor-tool-rail {
    border-color: var(--store-line) !important;
    background: color-mix(in srgb, var(--store-card) 92%, transparent) !important;
    box-shadow: 0 8px 26px rgb(0 0 0 / 8%) !important;
  }
}


/* AI generation uses the same cool Apple-blue accent as navigation and state. */
html body :is(
  #autoGenerateBtn,
  #generateOutlineBtn,
  #generateStyleMoodboardsBtn,
  #aiDesignCurrentPageBtn,
  #layoutAnalyzeBtn,
  #batchDesignBtn,
  #socialGenerateAllBtn,
  #styleLibraryGenerateBtn,
  #styleLibraryDetailGenerateBtn
) {
  border-color: transparent !important;
  background: var(--store-ai) !important;
  color: #fff !important;
}

html body :is(
  #autoGenerateBtn,
  #generateOutlineBtn,
  #generateStyleMoodboardsBtn,
  #aiDesignCurrentPageBtn,
  #layoutAnalyzeBtn,
  #batchDesignBtn,
  #socialGenerateAllBtn,
  #styleLibraryGenerateBtn,
  #styleLibraryDetailGenerateBtn
):hover:not(:disabled) {
  background: var(--store-ai-hover) !important;
}

/* Style workspace: large title, generous shelf spacing, image-led choices. */
#step-style {
  color: var(--store-text) !important;
  background: var(--store-bg) !important;
}

#step-style .panel-head {
  min-height: 96px !important;
  padding: 24px 32px 20px !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

#step-style .panel-head h2 {
  color: var(--store-text) !important;
  font-size: clamp(28px, 2.6vw, 38px) !important;
  font-weight: 720 !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
}

#step-style .panel-head p {
  max-width: 720px !important;
  margin-top: 8px !important;
  color: var(--store-secondary) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

#step-style .panel-head .button-row {
  gap: 7px !important;
}

#step-style .panel-head .button-row > button:not(.assistant-icon-btn) {
  min-height: 38px !important;
  border-radius: 10px !important;
}

#step-style .style-controls {
  gap: 28px !important;
  margin: 6px 32px 18px !important;
  padding: 20px 22px !important;
  border: 0 !important;
  border-radius: var(--store-radius-card) !important;
  background: var(--store-card) !important;
  box-shadow: var(--store-shadow-card) !important;
}

#step-style .style-direction-segmented {
  padding: 3px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: var(--store-bg) !important;
}

#step-style .style-direction-segmented button {
  border: 0 !important;
  border-radius: 8px !important;
}

#step-style .style-direction-segmented button.active {
  color: var(--store-text) !important;
  background: var(--store-card) !important;
  box-shadow: 0 1px 4px rgb(0 0 0 / 10%) !important;
}

#step-style .style-recommendation-panel {
  border-left-color: var(--store-line) !important;
}

#step-style .style-recommendation-badge,
#step-style .style-moodboard-route-pill,
#step-style .style-moodboard-status.is-selected {
  color: var(--store-blue) !important;
  background: var(--store-blue-soft) !important;
}

#step-style .style-recommendation-routes span {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--store-bg) !important;
}

/* Style decision board: keep the recommendation readable, then make the
   advanced count control a quiet secondary row instead of an empty column. */
#step-style .style-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  margin: 8px 32px 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#step-style .style-recommendation-panel {
  order: -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  grid-template-areas:
    "head details"
    "routes details" !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  border: 1px solid var(--store-line) !important;
  border-left: 3px solid var(--store-blue) !important;
  border-radius: 14px !important;
  background: var(--store-card) !important;
  box-shadow: var(--store-shadow-card) !important;
}

#step-style .style-recommendation-head {
  grid-area: head !important;
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 12px !important;
}

#step-style .style-recommendation-badge {
  flex: 0 0 auto !important;
  padding: 6px 9px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 720 !important;
}

#step-style #styleRecommendationTitle {
  min-width: 0 !important;
  color: var(--store-text) !important;
  font-size: 16px !important;
  font-weight: 720 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

#step-style .style-recommendation-routes {
  grid-area: routes !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#step-style .style-recommendation-routes span {
  padding: 7px 10px !important;
  border: 1px solid var(--store-line) !important;
  border-radius: 8px !important;
  background: var(--store-bg) !important;
  color: var(--store-secondary) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

#step-style .style-recommendation-details {
  grid-area: details !important;
  align-self: center !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 !important;
}

#step-style .style-recommendation-details > summary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 0 !important;
  color: var(--store-blue) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  cursor: pointer !important;
}

#step-style .style-recommendation-details[open] {
  grid-area: auto !important;
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  align-self: start !important;
  width: 100% !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--store-line) !important;
}

#step-style .style-recommendation-details p {
  max-width: 920px !important;
  margin: 8px 0 0 !important;
  color: var(--store-secondary) !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
}

#step-style .style-direction-advanced {
  order: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--store-line) !important;
  border-radius: 10px !important;
  background: var(--store-card) !important;
}

#step-style .style-direction-advanced > summary {
  min-height: 42px !important;
  padding: 0 14px !important;
  color: var(--store-secondary) !important;
}

#step-style .style-direction-advanced-body {
  padding: 0 14px 14px !important;
}

/* Give the AI adjustment area enough width to read like the primary action
   surface, while keeping the shared command component reusable elsewhere. */
#step-style #styleSmartCommandPanel {
  width: min(100%, 1280px) !important;
  margin: 0 auto !important;
  padding: 0 32px 22px !important;
}

#step-style #styleSmartCommandPanel .workflow-smart-command {
  display: grid !important;
  grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr) !important;
  grid-template-areas:
    "header input"
    "hint actions" !important;
  gap: 12px 20px !important;
  margin: 0 !important;
  padding: 18px !important;
  border: 1px solid #2f4057 !important;
  border-radius: 14px !important;
  background: #171d26 !important;
  box-shadow: 0 12px 28px rgb(0 0 0 / 18%) !important;
}

#step-style #styleSmartCommandPanel .workflow-smart-command > header {
  grid-area: header !important;
  align-items: flex-start !important;
  padding-top: 2px !important;
}

#step-style #styleSmartCommandPanel .workflow-smart-command textarea {
  grid-area: input !important;
  min-height: 86px !important;
  padding: 12px 13px !important;
  border: 1px solid #35445b !important;
  border-radius: 10px !important;
  color: #e7edf7 !important;
  background: #10161f !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

#step-style #styleSmartCommandPanel .workflow-smart-command-actions {
  grid-area: actions !important;
  gap: 8px !important;
}

#step-style #styleSmartCommandPanel .workflow-smart-command-actions button {
  min-height: 36px !important;
  border-radius: 9px !important;
  font-size: 11px !important;
}

#step-style #styleSmartCommandPanel .workflow-smart-command-hint {
  grid-area: hint !important;
  align-self: center !important;
  color: #91a0b5 !important;
  font-size: 10px !important;
}

#step-style #styleLockSummary {
  margin: 0 32px 20px !important;
  padding: 15px 18px !important;
  border: 0 !important;
  border-left: 3px solid var(--store-blue) !important;
  border-radius: 12px !important;
  background: var(--store-card) !important;
  box-shadow: 0 4px 16px rgb(0 0 0 / 4%) !important;
}

#step-style #styleMoodboardView {
  gap: 20px !important;
  margin: 0 32px 26px !important;
}

/* A single recommendation should use the whole shelf instead of leaving an
   empty second column beside it. Multiple recommendations keep the compact
   two-column comparison layout. */
#step-style #styleMoodboardView.is-single {
  grid-template-columns: minmax(0, 1fr) !important;
}

#step-style #styleMoodboardView.is-single > .style-moodboard,
#step-style #styleMoodboardView.is-single > .style-moodboard-actionbar {
  width: 100% !important;
  min-width: 0 !important;
}

/* The integrated style workspace is a desktop surface, so it must not inherit
   a narrower centered shell from the editor canvas. Keep it edge-to-edge in
   the available browser viewport while the page content retains its gutters. */
@media (min-width: 1024px) {
  html body.style-moodboard-workspace-open,
  html body.style-moodboard-workspace-open .app-shell,
  html body.style-moodboard-workspace-open .workspace,
  html body.style-moodboard-workspace-open #step-edit.workflow-panel-open,
  html body.style-moodboard-workspace-open #step-edit.workflow-panel-open > .editor-workflow-workspace {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* The shared workflow shell caps every flow panel at 1440px. The style
     workspace is a full-width desktop surface, so remove that cap here while
     keeping the panel's own inner padding and card gutters. */
  html body.style-moodboard-workspace-open #editorWorkflowWorkspace > #step-style {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  html body.style-moodboard-workspace-open .workspace,
  html body.style-moodboard-workspace-open #step-edit.workflow-panel-open > .editor-workflow-workspace {
    margin-inline: 0 !important;
  }
}

#step-style #styleMoodboardView .style-moodboard {
  border: 0 !important;
  border-radius: var(--store-radius-card) !important;
  background: var(--store-card) !important;
  box-shadow: var(--store-shadow-card) !important;
}

#step-style #styleMoodboardView .style-moodboard:hover {
  box-shadow: var(--store-shadow-raised) !important;
  transform: translateY(-3px) !important;
}

#step-style #styleMoodboardView .style-moodboard.selected {
  border: 0 !important;
  box-shadow: 0 0 0 3px rgb(0 113 227 / 52%), var(--store-shadow-raised) !important;
}

#step-style .style-moodboard-head {
  min-height: 70px !important;
  padding: 17px 18px 14px !important;
}

#step-style .style-moodboard-title strong {
  font-size: 16px !important;
  letter-spacing: -.015em !important;
}

#step-style .style-moodboard-plan-label {
  color: var(--store-blue) !important;
}

#step-style .style-moodboard-image-btn {
  margin-inline: 14px !important;
  border-radius: 14px !important;
  background: var(--store-bg) !important;
}

#step-style .style-moodboard-image-btn img {
  aspect-ratio: 4 / 3 !important;
  border-radius: 14px !important;
}

#step-style .style-moodboard-keywords span {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--store-bg) !important;
}

#step-style .style-moodboard-card-actions {
  margin: 18px !important;
  padding-top: 15px !important;
  border-top-color: var(--store-line) !important;
}

#step-style .style-moodboard-actionbar {
  padding: 17px 20px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--store-card) !important;
  box-shadow: var(--store-shadow-card) !important;
}

#step-style .style-library-details {
  margin: 0 32px 32px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: var(--store-radius-card) !important;
  background: var(--store-card) !important;
  box-shadow: var(--store-shadow-card) !important;
}

#step-style .style-library-details > summary {
  min-height: 54px !important;
  padding-inline: 18px !important;
  color: var(--store-text) !important;
}

#step-style .style-option {
  border-color: var(--store-line) !important;
  border-radius: 14px !important;
}

#step-style .style-option.recommended {
  border-color: rgb(0 113 227 / 28%) !important;
  background: var(--store-blue-soft) !important;
}

/* Tool center: two prominent tools, then a quiet navigation list. */
html body #assistantToolsDrawer.assistant-tools-drawer.open {
  width: min(480px, calc(100vw - 24px)) !important;
  border: 0 !important;
  border-radius: 22px 0 0 22px !important;
  background: var(--store-card) !important;
  box-shadow: -18px 0 52px rgb(0 0 0 / 14%) !important;
}

.assistant-tools-drawer > header {
  min-height: 82px !important;
  padding: 20px 22px 14px !important;
  border-bottom: 0 !important;
}

.assistant-tools-drawer > header strong {
  color: var(--store-text) !important;
  font-size: 24px !important;
  font-weight: 720 !important;
  letter-spacing: -.035em !important;
}

.assistant-tools-drawer > header span {
  margin-top: 4px !important;
  color: var(--store-secondary) !important;
  font-size: 12px !important;
}

.assistant-tool-search {
  min-height: 42px !important;
  margin: 0 22px 16px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--store-bg) !important;
}

.assistant-tool-group {
  margin: 0 22px !important;
  padding-block: 16px !important;
  border-top: 1px solid var(--store-line) !important;
}

.assistant-tool-group:first-child {
  padding-top: 8px !important;
  border-top: 0 !important;
}

.assistant-tool-group > header {
  padding: 0 0 11px !important;
}

.assistant-tool-group > header strong {
  color: var(--store-text) !important;
  font-size: 14px !important;
  font-weight: 680 !important;
}

.assistant-tool-group > header span {
  color: var(--store-secondary) !important;
  font-size: 10px !important;
}

.assistant-tool-group-grid {
  padding: 0 !important;
}

.assistant-tool-group-primary .assistant-tool-group-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.assistant-tool-group-primary .assistant-tool-group-grid button {
  min-height: 112px !important;
  align-content: start !important;
  padding: 16px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--store-bg) !important;
  box-shadow: none !important;
}

.assistant-tool-group-primary .assistant-tool-group-grid button > svg,
.assistant-tool-group-primary .assistant-tool-group-grid button > .fluent-icon-shell {
  color: var(--store-blue) !important;
}

.assistant-tool-group-primary .assistant-tool-group-grid button strong {
  color: var(--store-text) !important;
  font-size: 13px !important;
}

.assistant-tool-group-primary .assistant-tool-group-grid button:hover:not(:disabled) {
  background: var(--store-blue-soft) !important;
  transform: translateY(-2px) !important;
}

.assistant-tool-group-secondary .assistant-tool-group-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

.assistant-tool-group-secondary .assistant-tool-group-grid button {
  min-height: 56px !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  padding: 8px 4px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--store-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
}

.assistant-tool-group-secondary .assistant-tool-group-grid button:last-child {
  border-bottom: 0 !important;
}

.assistant-tool-group-secondary .assistant-tool-group-grid button:hover:not(:disabled) {
  color: var(--store-text) !important;
  background: var(--store-blue-soft) !important;
  transform: none !important;
}

.assistant-tool-group-secondary .assistant-tool-group-grid button > svg,
.assistant-tool-group-secondary .assistant-tool-group-grid button > .fluent-icon-shell {
  color: var(--store-blue) !important;
}

.assistant-preferences-panel,
.assistant-capability-diagnostics {
  margin: 14px 22px !important;
  border: 0 !important;
  border-radius: var(--store-radius-card) !important;
  background: var(--store-bg) !important;
  box-shadow: none !important;
}

/* Project panel and dialogs follow the same surface hierarchy. */
.file-center-shell,
.canvas-size-dialog-shell,
.assistant-redaction-dialog,
.editor-delivery-drawer {
  border: 0 !important;
  border-radius: var(--store-radius-hero) !important;
  background: var(--store-card) !important;
  box-shadow: var(--store-shadow-raised) !important;
}

.file-center-nav {
  border-right-color: var(--store-line) !important;
  background: var(--store-bg) !important;
}

.file-center-nav-list button.active,
.file-center-nav-list button:hover:not(:disabled) {
  color: var(--store-text) !important;
  background: rgb(29 29 31 / 6%) !important;
}

.file-center-recent-row,
.file-center-command,
.file-center-info-card,
.file-center-detail {
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--store-bg) !important;
}

@media (max-width: 1279px) {
  .project-home-content {
    padding-inline: 32px !important;
  }

  #step-style .panel-head {
    padding-inline: 24px !important;
  }

  #step-style .style-controls,
  #step-style #styleLockSummary,
  #step-style #styleMoodboardView,
  #step-style .style-library-details {
    margin-inline: 24px !important;
  }
}

@media (min-width: 1024px) and (max-height: 760px) {
  .project-home-content {
    padding-top: 18px !important;
  }

  .smart-create {
    margin-top: 12px !important;
  }

  .project-home-recent {
    margin-top: 18px !important;
  }
}

@media (max-width: 900px) {
  #step-style .panel-head {
    align-items: flex-start !important;
    gap: 16px !important;
  }

  #step-style .panel-head .button-row {
    justify-content: flex-start !important;
  }

  #step-style .style-moodboard-image-btn img {
    aspect-ratio: 16 / 10 !important;
  }
}

/* Generated moodboards can be portrait composites (for example 1024x1536).
   Let the image frame follow the source ratio so the full board remains
   visible instead of being clipped by the default landscape slot. */
#step-style .style-moodboard-image-btn,
#step-style .style-moodboard-image-btn img {
  height: auto !important;
  aspect-ratio: auto !important;
}

#step-style .style-moodboard-image-btn img {
  object-fit: contain !important;
}

@media (prefers-reduced-motion: reduce) {
  .project-card,
  .style-moodboard,
  .assistant-tool-group-grid button {
    transition: none !important;
  }
}

/* Apple Store V4.2: secondary product surfaces.
   High-density tools keep their capacity, while navigation, cards and
   selection states share the same quiet hierarchy as the primary workbench. */

/* Project panel: stronger page title and a continuous, low-noise project list. */
.file-center-shell {
  grid-template-columns: 236px minmax(0, 1fr) !important;
}

.file-center-nav {
  padding: 22px 14px 22px !important;
  background: var(--store-bg) !important;
}

.file-center-nav-head {
  padding: 0 8px 24px !important;
}

.file-center-nav-head strong {
  color: var(--store-text) !important;
  font-size: 21px !important;
  font-weight: 720 !important;
  letter-spacing: -.025em !important;
}

.file-center-nav-list {
  gap: 4px !important;
}

.file-center-nav-label {
  padding: 12px 12px 5px !important;
  color: var(--store-tertiary) !important;
  letter-spacing: .08em !important;
}

.file-center-nav-list button {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: var(--store-secondary) !important;
  font-size: 13px !important;
}

.file-center-nav-list button:hover,
.file-center-nav-list button:focus-visible,
.file-center-nav-list button.active {
  border: 0 !important;
  color: var(--store-text) !important;
  background: rgb(29 29 31 / 6%) !important;
}

.file-center-content {
  color: var(--store-text) !important;
  background: var(--store-card) !important;
}

.file-center-content-head {
  align-items: center !important;
  padding: 30px 36px 25px !important;
  border-bottom-color: var(--store-line) !important;
}

.file-center-kicker {
  margin-bottom: 8px !important;
  color: var(--store-blue) !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
}

.file-center-content-head h2 {
  color: var(--store-text) !important;
  font-size: clamp(30px, 2.6vw, 40px) !important;
  font-weight: 720 !important;
  letter-spacing: -.04em !important;
}

.file-center-content-head p {
  color: var(--store-secondary) !important;
  font-size: 13px !important;
}

.file-center-status {
  border: 0 !important;
  background: var(--store-blue-soft) !important;
  color: var(--store-blue) !important;
}

.file-center-recent-list {
  max-width: 1120px !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: var(--store-bg) !important;
}

.file-center-recent-row {
  min-height: 70px !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--store-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.file-center-recent-row:last-child {
  border-bottom: 0 !important;
}

.file-center-recent-row:hover {
  background: rgb(255 255 255 / 72%) !important;
  transform: none !important;
}

.file-center-recent-cover {
  width: 48px !important;
  height: 48px !important;
  border-radius: 10px !important;
  background: var(--store-card) !important;
}

.file-center-recent-copy strong {
  color: var(--store-text) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

.file-center-recent-copy small {
  color: var(--store-secondary) !important;
  font-size: 11px !important;
}

/* Smart-create specification and preference pickers: three calm shelves. */
.smart-create-spec-panel,
.smart-create-preference-panel {
  border: 0 !important;
  border-radius: var(--store-radius-hero) !important;
  background: var(--store-card) !important;
  box-shadow: var(--store-shadow-raised) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.smart-create-spec-panel {
  width: min(820px, calc(100vw - 72px)) !important;
}

.smart-create-spec-panel > header,
.smart-create-preference-panel > header {
  min-height: 72px !important;
  padding: 14px 18px !important;
  border-bottom-color: var(--store-line) !important;
}

.smart-create-spec-panel > header small,
.smart-create-preference-panel > header small {
  color: var(--store-blue) !important;
  font-size: 10px !important;
}

.smart-create-spec-panel > header strong,
.smart-create-preference-panel > header strong {
  color: var(--store-text) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}

.smart-create-spec-panel > header button,
.smart-create-preference-panel > header button {
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: var(--store-blue) !important;
  background: var(--store-blue-soft) !important;
}

.smart-create-spec-columns {
  grid-template-columns: 180px minmax(230px, .95fr) minmax(300px, 1.25fr) !important;
  background: var(--store-card) !important;
}

.smart-create-spec-columns > section + section {
  border-left-color: var(--store-line) !important;
}

.smart-create-spec-columns h3 {
  min-height: 46px !important;
  border-bottom-color: var(--store-line) !important;
  color: var(--store-tertiary) !important;
  font-size: 10px !important;
  letter-spacing: .03em !important;
}

.smart-create-spec-list {
  gap: 5px !important;
  padding: 10px !important;
}

.smart-create-spec-list button {
  min-height: 52px !important;
  border: 0 !important;
  border-radius: 11px !important;
  color: var(--store-text) !important;
  background: transparent !important;
}

.smart-create-spec-list button:hover {
  background: var(--store-bg) !important;
}

.smart-create-spec-list button.active {
  border: 0 !important;
  color: var(--store-text) !important;
  background: var(--store-blue-soft) !important;
  box-shadow: inset 0 0 0 1px rgb(0 113 227 / 18%) !important;
}

.smart-create-spec-list button.active > svg,
.smart-create-spec-list button.active .smart-create-spec-size-icon {
  color: var(--store-blue) !important;
}

.smart-create-spec-size-icon {
  border-color: var(--store-line) !important;
  border-radius: 7px !important;
  background: var(--store-card) !important;
}

.smart-create-spec-panel > footer,
.smart-create-preference-panel > footer {
  min-height: 56px !important;
  padding: 10px 18px !important;
  border-top-color: var(--store-line) !important;
}

.smart-create-spec-panel > footer button {
  min-height: 36px !important;
  padding-inline: 16px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--store-blue) !important;
}

/* Settings: a quieter system-preferences window. */
.settings-window {
  width: min(980px, calc(100vw - 64px)) !important;
  height: min(720px, calc(100vh - 64px)) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: var(--store-radius-hero) !important;
  background: var(--store-card) !important;
  box-shadow: var(--store-shadow-raised) !important;
}

.settings-header {
  height: 82px !important;
  padding-inline: 26px !important;
  border-bottom-color: var(--store-line) !important;
}

.settings-header h2 {
  color: var(--store-text) !important;
  font-size: 24px !important;
  font-weight: 720 !important;
  letter-spacing: -.035em !important;
}

.settings-header p {
  color: var(--store-secondary) !important;
}

.settings-header #closeSettingsBtn {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--store-bg) !important;
  color: transparent !important;
  font-size: 0 !important;
}

.settings-header #closeSettingsBtn::before {
  content: "×";
  color: var(--store-secondary);
  font-size: 18px;
  line-height: 1;
}

.settings-layout {
  height: calc(100% - 82px) !important;
  grid-template-columns: 200px minmax(0, 1fr) !important;
}

.settings-nav {
  padding: 18px 12px !important;
  border-right-color: var(--store-line) !important;
  background: var(--store-bg) !important;
}

.settings-nav button {
  height: 42px !important;
  padding-inline: 13px !important;
  border-radius: 10px !important;
  color: var(--store-secondary) !important;
  font-size: 12px !important;
}

.settings-nav button:hover,
.settings-nav button.active {
  color: var(--store-text) !important;
  background: rgb(29 29 31 / 6%) !important;
}

.settings-content {
  padding: 34px 38px 48px !important;
}

.settings-pane h3 {
  margin-bottom: 26px !important;
  color: var(--store-text) !important;
  font-size: 25px !important;
  font-weight: 720 !important;
  letter-spacing: -.035em !important;
}

.settings-facts {
  overflow: hidden !important;
  border-radius: 14px !important;
  background: var(--store-bg) !important;
}

.settings-facts > div {
  min-height: 48px !important;
  padding-inline: 14px !important;
  border-bottom-color: var(--store-line) !important;
}

.settings-facts > div:last-child {
  border-bottom: 0 !important;
}

.settings-segmented {
  padding: 3px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: var(--store-bg) !important;
}

.settings-segmented span {
  min-height: 32px !important;
  border-radius: 8px !important;
}

.settings-segmented input:checked + span {
  color: var(--store-text) !important;
  background: var(--store-card) !important;
  box-shadow: 0 1px 4px rgb(0 0 0 / 10%) !important;
}

/* Layout library: large card shelf and quieter preview well. */
.layout-library-dialog {
  border: 0 !important;
  border-radius: var(--store-radius-hero) !important;
  background: var(--store-card) !important;
  box-shadow: var(--store-shadow-raised) !important;
}

.layout-library-dialog::backdrop,
.style-library-dialog::backdrop {
  background: rgb(0 0 0 / 34%) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

.layout-library-shell > header,
.layout-library-shell > footer {
  padding: 18px 22px !important;
  border-color: var(--store-line) !important;
}

.layout-library-shell > header strong {
  color: var(--store-text) !important;
  font-size: 22px !important;
  font-weight: 720 !important;
  letter-spacing: -.03em !important;
}

.layout-library-shell > header span {
  color: var(--store-secondary) !important;
}

.layout-library-toolbar {
  gap: 18px !important;
  padding: 12px 22px !important;
  border-bottom-color: var(--store-line) !important;
  background: var(--store-card) !important;
}

.layout-library-search {
  height: 40px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: var(--store-bg) !important;
}

.layout-library-filters {
  gap: 3px !important;
}

.layout-library-filters button {
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 9px !important;
}

.layout-library-filters button:hover {
  background: var(--store-bg) !important;
}

.layout-library-filters button.active {
  border: 0 !important;
  color: var(--store-blue) !important;
  background: var(--store-blue-soft) !important;
}

.layout-library-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 390px) !important;
}

.layout-library-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 18px !important;
  padding: 22px 22px 30px !important;
  background: var(--store-bg) !important;
}

.layout-library-card {
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--store-card) !important;
  box-shadow: var(--store-shadow-card) !important;
}

.layout-library-card:hover {
  border: 0 !important;
  box-shadow: var(--store-shadow-raised) !important;
  transform: translateY(-2px) !important;
}

.layout-library-card.selected {
  border: 0 !important;
  box-shadow: 0 0 0 3px rgb(0 113 227 / 48%), var(--store-shadow-card) !important;
}

.layout-library-card-preview {
  height: 158px !important;
  border-bottom: 0 !important;
  background: #eef0f4 !important;
}

.layout-library-card-copy {
  gap: 8px !important;
  padding: 13px 14px 15px !important;
}

.layout-library-card-copy > strong {
  color: var(--store-text) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

.layout-library-card-tags i {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--store-bg) !important;
}

.layout-library-preview-panel {
  gap: 16px !important;
  padding: 22px !important;
  border-left-color: var(--store-line) !important;
  background: var(--store-card) !important;
}

.layout-library-live-preview {
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--store-bg) !important;
  box-shadow: inset 0 0 0 1px var(--store-line) !important;
}

/* Style library: retain powerful filtering, but turn it into an image-led store. */
.style-library-dialog {
  border: 0 !important;
  border-radius: var(--store-radius-hero) !important;
  background: var(--store-card) !important;
  box-shadow: var(--store-shadow-raised) !important;
}

.style-library-shell > header {
  min-height: 72px !important;
  padding: 16px 22px !important;
  border-bottom-color: var(--store-line) !important;
}

.style-library-shell > header strong {
  color: var(--store-text) !important;
  font-size: 22px !important;
  font-weight: 720 !important;
  letter-spacing: -.03em !important;
}

.style-library-shell > header span {
  color: var(--store-secondary) !important;
}

.style-catalog-views {
  min-height: 52px !important;
  padding-inline: 20px !important;
  border-bottom-color: var(--store-line) !important;
}

.style-catalog-views button {
  min-height: 52px !important;
  color: var(--store-secondary) !important;
}

.style-catalog-views button.active {
  color: var(--store-text) !important;
}

.style-catalog-views button.active::after {
  background: var(--store-blue) !important;
}

.style-catalog-context {
  min-height: 48px !important;
  padding-inline: 20px !important;
  border-bottom-color: var(--store-line) !important;
  background: var(--store-bg) !important;
}

.style-library-v3-workspace {
  background: var(--store-bg) !important;
}

.style-catalog-facet-panel,
.style-library-selection-panel {
  border-color: var(--store-line) !important;
  background: var(--store-card) !important;
}

.style-catalog-facet-panel > .style-library-search {
  min-height: 40px !important;
  margin: 14px 14px 10px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: var(--store-bg) !important;
}

.style-catalog-facet-panel .style-library-filters {
  padding-inline: 14px !important;
}

.style-catalog-facet-panel .style-library-filters section button {
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
}

.style-catalog-facet-panel .style-library-filters section button:hover {
  color: var(--store-text) !important;
  background: var(--store-bg) !important;
}

.style-catalog-facet-panel .style-library-filters section button.active {
  border: 0 !important;
  color: var(--store-blue) !important;
  background: var(--store-blue-soft) !important;
}

.style-match-panel {
  gap: 12px !important;
  padding: 16px 20px 18px !important;
  border-bottom-color: var(--store-line) !important;
  background: var(--store-card) !important;
}

.style-match-head strong {
  color: var(--store-text) !important;
  font-size: 16px !important;
  font-weight: 680 !important;
}

.style-match-controls textarea {
  min-height: 64px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--store-bg) !important;
}

.style-library-catalog-head {
  min-height: 50px !important;
  padding: 9px 20px !important;
  border-bottom-color: var(--store-line) !important;
  background: var(--store-card) !important;
}

.style-library-catalog-head strong {
  color: var(--store-text) !important;
  font-size: 14px !important;
}

.style-library-grid {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
  gap: 18px !important;
  padding: 20px 20px 30px !important;
  background: var(--store-bg) !important;
}

.style-library-card {
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--store-card) !important;
  box-shadow: var(--store-shadow-card) !important;
}

.style-library-card:hover {
  border: 0 !important;
  box-shadow: var(--store-shadow-raised) !important;
  transform: translateY(-2px) !important;
}

.style-library-card.selected {
  border: 0 !important;
  box-shadow: 0 0 0 3px rgb(0 113 227 / 48%), var(--store-shadow-card) !important;
}

.style-library-card.recommended::before,
.style-library-card.matched::before {
  border-radius: 999px !important;
  background: rgb(29 29 31 / 76%) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

.style-library-card-copy {
  gap: 9px !important;
  padding: 13px 14px 15px !important;
}

.style-library-card-title strong {
  color: var(--store-text) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

.style-library-card-dimensions em,
.style-library-card-uses em {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--store-bg) !important;
}

.style-library-selection-panel > header {
  min-height: 54px !important;
  padding: 10px 14px !important;
  border-bottom-color: var(--store-line) !important;
}

.style-library-selection-tray {
  padding-inline: 14px !important;
}

@media (max-width: 1100px) {
  .file-center-shell {
    grid-template-columns: 210px minmax(0, 1fr) !important;
  }

  .layout-library-workspace {
    grid-template-columns: minmax(0, 1fr) 330px !important;
  }

  .style-library-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  }
}

/* Apple Store V4.3: remove warm orange UI accents across legacy surfaces.
   Errors remain red and success remains green; AI, pending, warning and stale
   states now use blue or blue-gray so the product has one restrained accent. */
html body :is(
  .layer-type-dot.shape,
  .layout-diagnosis-item.warning::before,
  .thumb-design-status.unverified,
  .workflow-thumb-state.unverified,
  .workflow-graph-legend i.status-pending,
  .workflow-graph-legend i.status-stale,
  .workflow-graph-node.status-pending .workflow-graph-status i,
  .workflow-graph-node.status-stale .workflow-graph-status i,
  .workflow-graph-inspector-status.status-pending > i,
  .workflow-graph-canvas-status i.status-pending,
  .workflow-graph-canvas-status i.status-stale,
  .save-state[data-status="dirty"]::before,
  .save-state[data-status="saving"]::before,
  .review-issue-row:not(.error):not(.info) .review-issue-row-main > b
) {
  background: var(--store-blue) !important;
}

html body :is(
  .image-preview-trigger:hover,
  .image-preview-trigger:focus-visible,
  .asset-replacement-list article em,
  .semantic-slide-list article em,
  .new-project-source-status.warning strong,
  .copy-representative-status > svg,
  .file-center-pipeline-stage[data-status="warning"] em,
  .file-center-pipeline-stage[data-status="pending"] em,
  .editor-asset-item .asset-favorite,
  .preflight-result li.warning,
  .scene-mockup-empty svg,
  .scene-model-status .not-ready svg,
  .scene-mockup-recommendation em,
  .scene-mockup-result-copy em,
  .license-points.warning strong,
  .composition-candidate p,
  .style-contrast-status,
  .technique-library-card .avoid dd,
  .technique-detail-hero .avoid dd,
  .style-route-risk svg,
  .layout-library-diagnostic.warning,
  .style-detail-status,
  .style-detail-status.stale,
  .assistant-pdf-review header span,
  .assistant-pdf-review ul,
  .assistant-pdf-block-warning,
  .assistant-action-warning,
  .assistant-action-cost,
  .workflow-graph-node.status-pending .workflow-graph-status,
  .workflow-graph-node.status-stale .workflow-graph-status,
  .workflow-graph-queue article.pause > svg,
  .workflow-graph-queue article.warning > svg
) {
  color: var(--store-blue) !important;
}

html body :is(
  .editable-layer-hotspot,
  .assistant-pdf-page-variant.warning
) {
  border-color: var(--store-blue) !important;
  box-shadow: none !important;
}

html body :is(
  .social-model-status .not-ready,
  .export-readiness li:not(.done),
  .editable-generation-mode button:first-child.active,
  .design-status-badge.stale,
  .design-status-badge.unverified,
  .composition-candidate.stale,
  .assistant-pdf-risk-confirm,
  .workflow-graph-preflight-summary.pause,
  .review-status-pill.warning
) {
  border-color: rgb(0 113 227 / 24%) !important;
  background: var(--store-blue-soft) !important;
  color: var(--store-blue) !important;
}

html body .review-issue-row:not(.error):not(.info) {
  border-left-color: var(--store-blue) !important;
}

html body .reference-review-issue.warning {
  border-color: rgb(0 113 227 / 32%) !important;
}

html body :is(
  .layout-library-diagnostic.warning,
  .style-detail-brand-system > p,
  .style-detail-city-tourism > p,
  .style-detail-research > p,
  .assistant-warning-card,
  .review-issue-card.warning
) {
  border-left-color: var(--store-blue) !important;
  background: var(--store-blue-soft) !important;
}

html body :is(
  .style-detail-brand-system > p svg,
  .style-detail-city-tourism > p svg
) {
  color: var(--store-blue) !important;
}

html body .editable-layer-hotspot {
  background: rgb(0 113 227 / 10%) !important;
}

html body #step-edit .native-chart-pie {
  background: conic-gradient(#0071e3 0 35%, #34aadc 35% 65%, #5856d6 65% 100%) !important;
}

html body .workflow-graph-node.status-pending::before,
html body .workflow-graph-node.status-stale::before {
  border-left-color: var(--store-blue) !important;
}

html body #apiStatus:not([data-status="online"]):not(.hidden) {
  border-color: rgb(0 113 227 / 24%) !important;
  background: var(--store-blue-soft) !important;
  color: var(--store-blue) !important;
}

/* Home CTAs: explicit IDs protect the blue action color from older dark-theme
   product-accent rules and from long-lived tabs with mixed stylesheet state. */
html body #newProjectBtn.project-home-primary,
html body #smartCreateSubmitBtn.smart-create-submit {
  border-color: #0071e3 !important;
  background: #0071e3 !important;
  color: #fff !important;
}

html body #newProjectBtn.project-home-primary:hover:not(:disabled),
html body #smartCreateSubmitBtn.smart-create-submit:hover:not(:disabled) {
  border-color: #0077ed !important;
  background: #0077ed !important;
}

html[data-theme="dark"] body #newProjectBtn.project-home-primary,
html[data-theme="dark"] body #smartCreateSubmitBtn.smart-create-submit {
  border-color: #2997ff !important;
  background: #2997ff !important;
}

html[data-theme="dark"] body #newProjectBtn.project-home-primary:hover:not(:disabled),
html[data-theme="dark"] body #smartCreateSubmitBtn.smart-create-submit:hover:not(:disabled) {
  border-color: #409cff !important;
  background: #409cff !important;
}

html body #newProjectBtn.project-home-primary :is(span, svg),
html body #smartCreateSubmitBtn.smart-create-submit :is(span, svg) {
  color: #fff !important;
  stroke: currentColor !important;
}

/* Final accessibility and responsive guards for the editor workflow shell. */
html:not([data-theme="dark"]) body .workflow-smart-command strong {
  color: #172033 !important;
}

@media (min-width: 1024px) {
  html:not([data-theme="dark"]) body #step-style #styleSmartCommandPanel .workflow-smart-command strong {
    color: #eef4ff !important;
  }

  html[data-theme="dark"] body #step-edit .delivery-prepare-action,
  html[data-theme="dark"] body #step-edit .delivery-prepare-action :is(span, svg) {
    color: #07151c !important;
    stroke: currentColor !important;
  }
}

html:not([data-theme="dark"]) body .workflow-smart-command textarea::placeholder {
  color: #667085 !important;
  opacity: 1 !important;
}

html:not([data-theme="dark"]) body .workflow-smart-command-actions .ghost-btn {
  border-color: #c9d1dc !important;
  background: #fff !important;
  color: #344054 !important;
}

html:not([data-theme="dark"]) body .workflow-smart-command-actions .primary-btn,
html:not([data-theme="dark"]) body #step-edit .delivery-prepare-action {
  border-color: #0068d1 !important;
  background: #0068d1 !important;
  color: #fff !important;
}

html:not([data-theme="dark"]) body :is(
  .workflow-smart-command-actions .primary-btn,
  #step-edit .delivery-prepare-action
) :is(span, svg) {
  color: #fff !important;
  stroke: currentColor !important;
}

/* Keep the desktop content-stage primary action inside short laptop
   viewports. The properties region owns scrolling; the inspector header and
   tabs remain fixed, and the action dock can stick to the region bottom. */
@media (min-width: 1024px) {
  body[data-editor-workflow-stage="copy"] #step-edit > .inspector {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body[data-editor-workflow-stage="copy"] #step-edit > .inspector > :is(.panel-head, .inspector-view-tabs) {
    flex: 0 0 auto !important;
  }

  body[data-editor-workflow-stage="copy"] #inspectorPropertiesView {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body[data-editor-workflow-stage="copy"] #copyRepresentativeDock {
    position: sticky !important;
    bottom: 0 !important;
  }

  #step-edit.review-workflow-mode .review-stage-scroll > .workflow-status-head {
    order: -2;
  }

  #step-edit.review-workflow-mode .review-stage-scroll > .workflow-smart-command {
    order: -1;
  }

  #step-edit.delivery-workflow-mode .delivery-stage-scroll > .workflow-status-head {
    order: -3;
  }

  #step-edit.delivery-workflow-mode .delivery-stage-scroll > .delivery-readiness {
    order: -2;
  }

  #step-edit.delivery-workflow-mode .delivery-stage-scroll > .workflow-smart-command {
    order: -1;
  }
}

@media (min-width: 1024px) and (max-height: 800px) {
  body[data-editor-workflow-stage="copy"] #copySmartCommandPanel {
    padding-bottom: 6px !important;
  }

  body[data-editor-workflow-stage="copy"] #copySmartCommandPanel .workflow-smart-command {
    gap: 6px !important;
    padding: 8px !important;
  }

  body[data-editor-workflow-stage="copy"] #copySmartCommandPanel .workflow-smart-command textarea {
    height: 48px !important;
    min-height: 48px !important;
    resize: none !important;
  }

  body[data-editor-workflow-stage="copy"] #copySmartCommandPanel .workflow-smart-command-hint,
  body[data-editor-workflow-stage="copy"] #copyRepresentativeDock .copy-source-details {
    display: none !important;
  }

  body[data-editor-workflow-stage="copy"] #copyRepresentativeDock .copy-source-panel {
    padding-bottom: 8px !important;
  }

  #step-edit :is(.review-stage-scroll, .delivery-stage-scroll) > .workflow-smart-command {
    gap: 6px !important;
    padding: 8px !important;
  }

  #step-edit :is(.review-stage-scroll, .delivery-stage-scroll) > .workflow-smart-command textarea {
    height: 48px !important;
    min-height: 48px !important;
    resize: none !important;
  }

  #step-edit :is(.review-stage-scroll, .delivery-stage-scroll) > .workflow-smart-command-hint {
    display: none !important;
  }
}

@media (max-width: 1023.98px) {
  html body .topbar {
    min-width: 0 !important;
  }

  html body #editorWorkflowNav.topbar-workflow-nav {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  html body #editorWorkflowNav .editor-workflow-action,
  html body #editorWorkflowNav :is(
    #copyWorkflowBtn,
    #styleWorkflowBtn,
    #designWorkflowBtn,
    #editableWorkflowBtn,
    #reviewWorkflowBtn,
    #deliveryWorkflowBtn
  ) {
    min-width: 92px !important;
    flex: 0 0 92px !important;
    padding-inline: 8px !important;
  }
}

@media (max-width: 767.98px) {
  html body .topbar .brand-block {
    display: none !important;
  }

  html body #editorWorkflowNav.topbar-workflow-nav {
    max-width: calc(100vw - 64px) !important;
  }

  html body #editorWorkflowNav .editor-workflow-action,
  html body #editorWorkflowNav :is(
    #copyWorkflowBtn,
    #styleWorkflowBtn,
    #designWorkflowBtn,
    #editableWorkflowBtn,
    #reviewWorkflowBtn,
    #deliveryWorkflowBtn
  ) {
    min-width: 84px !important;
    flex-basis: 84px !important;
  }
}

/* Desktop home: one Luxin session shared between conversation and project work. */
@media (min-width: 1024px) {
  .project-home-content {
    position: relative;
  }

  .project-home-mode-switch {
    position: absolute;
    z-index: 30;
    top: 18px;
    right: 32px;
    display: grid;
    width: 208px;
    height: 40px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--store-line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--store-card) 92%, transparent);
    box-shadow: 0 6px 18px rgb(0 0 0 / 7%);
    backdrop-filter: blur(18px) saturate(135%);
  }

  .project-home-mode-switch button {
    display: inline-flex;
    min-width: 0;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--store-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 620;
  }

  .project-home-mode-switch button svg {
    width: 15px;
    height: 15px;
  }

  .project-home-mode-switch button:hover {
    color: var(--store-text);
  }

  .project-home-mode-switch button.active {
    background: var(--store-card);
    color: var(--store-text);
    box-shadow: 0 2px 7px rgb(0 0 0 / 10%);
  }

  body[data-project-home-mode="chat"] .project-home-content {
    padding: 0 !important;
    overflow: hidden !important;
  }

  body[data-project-home-mode="chat"] .project-home-mode-switch {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .project-home-work {
    min-width: 0;
  }

  .project-home-chat {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    padding: 70px clamp(24px, 5vw, 72px) 18px;
    overflow: hidden;
  }

  .project-home-chat-intro {
    display: grid;
    flex: 0 0 min(31%, 190px);
    place-content: end center;
    justify-items: center;
    gap: 12px;
    padding-bottom: 24px;
    text-align: center;
  }

  .project-home-chat-intro .luxin-avatar {
    width: 42px;
    height: 42px;
  }

  .project-home-chat-intro .luxin-avatar > svg {
    width: 17px;
    height: 17px;
  }

  .project-home-chat-intro h2 {
    margin: 0;
    color: var(--store-text);
    font-size: 28px;
    font-weight: 680;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .project-home-chat:has(#assistantMessages .assistant-message) .project-home-chat-intro {
    display: none;
  }

  .project-home-assistant-host {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex-direction: column;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #projectHomeAssistantHost > #assistantDrawer > :is(
    .assistant-header,
    .assistant-context,
    .assistant-brief-actions,
    .assistant-composer-hint,
    .assistant-resize-handle
  ),
  #projectHomeAssistantHost #assistantVoiceStatus[data-state="idle"] {
    display: none !important;
  }

  #projectHomeAssistantHost .assistant-messages {
    width: min(100%, 900px);
    min-height: 0 !important;
    flex: 1 1 auto;
    margin: 0 auto;
    padding: 10px 8px 8px !important;
    overflow-x: hidden;
    overflow-y: auto;
    background: transparent !important;
  }

  #projectHomeAssistantHost .assistant-empty {
    display: none !important;
  }

  #projectHomeAssistantHost :is(
    .assistant-tasks,
    .assistant-pdf-redesign,
    .assistant-recommendations,
    .assistant-service-notice,
    .assistant-voice-status,
    .assistant-execution-controls,
    .assistant-suggestions,
    .assistant-attachments
  ) {
    width: min(100%, 900px);
    flex: 0 0 auto;
    margin-inline: auto;
  }

  #projectHomeAssistantHost .assistant-suggestions {
    border: 0 !important;
    background: transparent !important;
  }

  #projectHomeAssistantHost .assistant-composer {
    width: min(calc(100% - 16px), 900px);
    min-height: 96px !important;
    flex: 0 0 auto;
    margin: 6px auto 0 !important;
    padding: 10px 10px 8px 12px !important;
    border-color: color-mix(in srgb, var(--store-blue) 34%, var(--store-line)) !important;
    border-radius: 8px !important;
    background: var(--store-card) !important;
    box-shadow: 0 12px 30px rgb(0 0 0 / 10%) !important;
  }

  #projectHomeAssistantHost .assistant-composer textarea {
    min-height: 40px !important;
    font-size: 13px !important;
  }

  #projectHomeAssistantHost .assistant-suggestion {
    background: color-mix(in srgb, var(--store-card) 88%, var(--store-bg)) !important;
  }

  #projectHomeAssistantHost .assistant-new-result {
    align-self: center !important;
    flex: 0 0 38px;
    margin-top: -48px;
    margin-bottom: 10px;
    z-index: 12;
  }
}

@media (min-width: 1024px) and (max-height: 760px) {
  .project-home-chat {
    padding-top: 60px;
    padding-bottom: 10px;
  }

  .project-home-chat-intro {
    flex-basis: 112px;
    gap: 8px;
    padding-bottom: 14px;
  }

  .project-home-chat-intro .luxin-avatar {
    width: 34px;
    height: 34px;
  }

  .project-home-chat-intro h2 {
    font-size: 24px;
  }

  #projectHomeAssistantHost .assistant-composer {
    min-height: 86px !important;
  }
}

@media (max-width: 1023.98px) {
  .project-home-mode-switch,
  .project-home-chat {
    display: none !important;
  }

  #projectHomeWork {
    display: block !important;
  }
}

/* design-ux: mobile category density */
@media (max-width: 560px) {
  .design-category-grid {
    grid-template-columns: 1fr !important;
    gap: 6px;
  }
  .design-category-card {
    min-height: 56px;
    padding: 9px 10px;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
  }
  .design-category-card strong { font-size: 12px; }
  .design-category-card small { display: none; }
  .design-center-head h3 { font-size: 17px; }
  .design-center-head p { font-size: 11px; }
  .new-project-category-context { padding: 10px; gap: 8px; }
}

/* /workmate-ai.css */
/* ==== consolidated from /workmate-ai.css (cascade order preserved) ==== */
/* WORKMATE AI · Chinese professional creative workspace theme */
:root {
  --wm-ink: #11172d;
  --wm-muted: #667085;
  --wm-faint: #98a2b3;
  --wm-bg: #f1f3f8;
  --wm-panel: #ffffff;
  --wm-panel-soft: #f8f9fc;
  --wm-line: rgba(35, 43, 79, .11);
  --wm-line-strong: rgba(35, 43, 79, .18);
  --wm-brand: #1677ff;
  --wm-brand-strong: #0b55d4;
  --wm-brand-soft: rgba(22 119 255, .1);
  --wm-navy: #101735;
  --wm-navy-soft: #171f45;
  --wm-cyan: #12bfc9;
  --wm-success: #079455;
  --wm-warning: #d97706;
  --wm-radius-sm: 8px;
  --wm-radius-md: 12px;
  --wm-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 4px rgba(16, 24, 40, .03);
  --wm-shadow-md: 0 16px 38px rgba(27, 34, 71, .11);
  --v2-blue: var(--wm-brand);
  --v2-blue-hover: var(--wm-brand-strong);
  --v2-blue-soft: var(--wm-brand-soft);
  --af-accent: var(--wm-brand);
  --af-accent-hover: var(--wm-brand-strong);
  --af-accent-soft: var(--wm-brand-soft);
  --du-primary: var(--wm-brand);
  --du-primary-soft: var(--wm-brand-soft);
}

/* Doubao-inspired dark theme: neutral charcoal surfaces, restrained blue.
   The light theme and the artwork rendered inside slide canvases are untouched. */
html:root[data-theme="dark"] {
  --theme-bg: #181818;
  --theme-chrome: #1d1d1d;
  --theme-panel: #202020;
  --theme-panel-soft: #272727;
  --theme-panel-raised: #2d2d2d;
  --theme-text: #f2f2f2;
  --theme-muted: #b3b3b3;
  --theme-faint: #7f7f7f;
  --theme-line: rgb(255 255 255 / 9%);
  --theme-line-strong: rgb(255 255 255 / 16%);

  --ref-blue: #3b82f6;
  --ref-blue-hover: #5b95f5;
  --ref-blue-deep: #2f6fd6;
  --ref-blue-soft: rgb(59 130 246 / 14%);
  --ref-blue-glow: rgb(59 130 246 / 18%);

  --du-bg: var(--theme-bg);
  --du-panel: var(--theme-panel);
  --du-surface: var(--theme-panel-soft);
  --du-surface-strong: var(--theme-panel-raised);
  --du-line: var(--theme-line);
  --du-line-strong: var(--theme-line-strong);
  --du-text: var(--theme-text);
  --du-muted: var(--theme-muted);
  --du-faint: var(--theme-faint);
  --du-primary: var(--ref-blue);
  --du-primary-hover: var(--ref-blue-hover);
  --du-primary-soft: var(--ref-blue-soft);

  --aw-bg: var(--theme-bg);
  --aw-sidebar: var(--theme-panel);
  --aw-chrome: var(--theme-chrome);
  --aw-surface: var(--theme-panel);
  --aw-surface-raised: var(--theme-panel-soft);
  --aw-surface-soft: #252525;
  --aw-surface-strong: var(--theme-panel-raised);
  --aw-text: var(--theme-text);
  --aw-text-secondary: var(--theme-muted);
  --aw-text-tertiary: var(--theme-faint);
  --aw-line: var(--theme-line);
  --aw-line-strong: var(--theme-line-strong);
  --aw-blue: var(--ref-blue);
  --aw-blue-hover: var(--ref-blue-hover);
  --aw-blue-soft: var(--ref-blue-soft);

  --af-bg: var(--theme-bg);
  --af-chrome: var(--theme-chrome);
  --af-panel: var(--theme-panel);
  --af-panel-soft: var(--theme-panel-soft);
  --af-panel-strong: var(--theme-panel-raised);
  --af-text: var(--theme-text);
  --af-muted: var(--theme-muted);
  --af-faint: var(--theme-faint);
  --af-line: var(--theme-line);
  --af-line-strong: var(--theme-line-strong);
  --af-accent: var(--ref-blue);
  --af-accent-hover: var(--ref-blue-hover);
  --af-accent-soft: var(--ref-blue-soft);

  --v2-bg: var(--theme-bg);
  --v2-panel: var(--theme-panel);
  --v2-panel-soft: var(--theme-panel-soft);
  --v2-panel-strong: var(--theme-panel-raised);
  --v2-text: var(--theme-text);
  --v2-muted: var(--theme-muted);
  --v2-faint: var(--theme-faint);
  --v2-line: var(--theme-line);
  --v2-line-strong: var(--theme-line-strong);
  --v2-blue: var(--ref-blue);
  --v2-blue-hover: var(--ref-blue-hover);
  --v2-blue-soft: var(--ref-blue-soft);

  --store-bg: var(--theme-bg);
  --store-card: var(--theme-panel);
  --store-card-soft: var(--theme-panel-soft);
  --store-text: var(--theme-text);
  --store-secondary: var(--theme-muted);
  --store-tertiary: var(--theme-faint);
  --store-line: var(--theme-line);
  --store-line-strong: var(--theme-line-strong);

  --bg: var(--theme-bg);
  --panel: var(--theme-panel);
  --surface: var(--theme-panel-soft);
  --text: var(--theme-text);
  --muted: var(--theme-muted);
  --line: var(--theme-line);
  --line-strong: var(--theme-line-strong);
  --primary: var(--ref-blue);
  --primary-strong: var(--ref-blue-deep);

  --product-bg: var(--theme-bg);
  --product-panel: var(--theme-panel);
  --product-card: var(--theme-panel-soft);
  --product-text: var(--theme-text);
  --product-muted: var(--theme-muted);
  --product-line: var(--theme-line);
  --product-accent: var(--ref-blue);
}

html:root[data-theme="dark"] body,
html:root[data-theme="dark"] body #appShell,
html:root[data-theme="dark"] body #appShell > .workspace,
html:root[data-theme="dark"] body #step-create,
html:root[data-theme="dark"] body #step-edit.editor-layout,
html:root[data-theme="dark"] body #step-edit > .canvas-area {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-bg) !important;
  background-color: var(--theme-bg) !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body :is(
  .app-shell > .topbar,
  #documentTabsBar,
  #step-edit > .editor-top-ribbon,
  #step-edit .office-status-bar,
  .project-home-nav
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-chrome) !important;
  background-color: var(--theme-chrome) !important;
  background-image: none !important;
  box-shadow: inset 0 -1px var(--theme-line) !important;
}

html:root[data-theme="dark"] body :is(
  #step-edit > .thumb-panel,
  #step-edit > .inspector,
  #step-edit > .editor-tool-rail,
  .assistant-drawer,
  .assistant-messages,
  .assistant-side-panel,
  .project-home-shell,
  .project-home-content,
  .settings-window
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-panel) !important;
  background-color: var(--theme-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body #step-edit :is(
  .office-canvas-shell,
  .office-canvas-body,
  .slide-stage,
  .slide-pasteboard
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: #151515 !important;
  background-color: #151515 !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body #step-edit :is(
  #designCategoryToolbar,
  #editorRibbon,
  #editorRibbon > .ribbon-group,
  #editorRibbon .canvas-view-switch,
  .design-category-toolbar-main,
  .design-category-toolbar-workspace,
  .design-category-toolbar-settings,
  .design-category-toolbar-actions,
  .panel-head,
  .editor-left-tabs,
  .editor-left-actions,
  .inspector-view-tabs
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-chrome) !important;
  background-color: var(--theme-chrome) !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body #step-edit :is(
  .design-page-empty,
  .design-candidate-panel,
  .design-candidate-disclosure,
  .design-candidate-head,
  .design-candidate-body,
  .design-smart-card,
  .design-control-disclosure,
  .inspector-tool-section,
  .design-page-context,
  .workflow-inspector-section,
  .workflow-inspector-card
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-panel-soft) !important;
  background-color: var(--theme-panel-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body #step-edit :is(
  .editor-top-ribbon button,
  .editor-top-ribbon input,
  .editor-top-ribbon select,
  .inspector button,
  .inspector input,
  .inspector select,
  .inspector textarea,
  .office-status-bar button
) {
  color: #e3e3e3 !important;
  border-color: var(--theme-line-strong) !important;
  background: #292929 !important;
  background-color: #292929 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body :is(
  #editorWorkflowNav,
  #editorWorkflowNav > .editor-workflow-action,
  .document-tabs-bar .document-tab,
  #step-edit .editor-left-tabs button,
  #step-edit .inspector-view-tabs button,
  #step-edit #canvasViewSwitch > button,
  #step-edit .ribbon-tool,
  #step-edit #editorToolRail > button
) {
  color: var(--theme-muted) !important;
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body :is(
  #editorWorkflowNav > .editor-workflow-action.active,
  #editorWorkflowNav > .editor-workflow-action[aria-selected="true"],
  .document-tabs-bar .document-tab.active,
  #step-edit .editor-left-tabs button.active,
  #step-edit .inspector-view-tabs button.active,
  #step-edit #canvasViewSwitch > button.active,
  #step-edit .ribbon-tool.active,
  #step-edit #editorToolRail > button.active
) {
  color: #ffffff !important;
  border-color: #454545 !important;
  background: #333333 !important;
  background-color: #333333 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body .document-tabs-bar .document-tab.active {
  box-shadow: inset 0 -2px #686868 !important;
}

html:root[data-theme="dark"] body #step-edit .editor-left-tabs button.active::after {
  background: #8a8a8a !important;
}

html:root[data-theme="dark"] body :is(
  .primary-btn,
  button.primary,
  button.recommended,
  .assistant-send-btn,
  .project-home-primary,
  [data-category-action="generate"],
  [data-design-smart-action="generate-range"]
) {
  color: #ffffff !important;
  border-color: var(--ref-blue) !important;
  background: var(--ref-blue) !important;
  background-color: var(--ref-blue) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body #step-edit #addSlideBtn {
  color: #f0f0f0 !important;
  border-color: #464646 !important;
  background: #262626 !important;
  background-color: #262626 !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel,
html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel.panel,
html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel #editorPagesView,
html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .thumbnail-list,
html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel :is(.panel-head, .editor-left-tabs, .editor-left-actions, .slide-page-actions),
html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb,
html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb:is(.active, .selected) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-panel) !important;
  background-color: var(--theme-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb:is(.active, .selected) > .workflow-thumb-image {
  border-color: var(--ref-blue) !important;
  box-shadow: 0 0 0 1px rgb(59 130 246 / 44%) !important;
}

html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel :is(.workflow-thumb-copy strong, .panel-head h2) {
  color: var(--theme-text) !important;
}

html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel :is(.workflow-thumb-copy small, .editor-left-tabs button:not(.active)) {
  color: var(--theme-muted) !important;
}

html:root[data-theme="dark"] body :is(
  .assistant-composer,
  .assistant-message-content,
  .assistant-task-card,
  .assistant-generated-result,
  .assistant-generated-image-card,
  .assistant-suggestion,
  .assistant-context-chip
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-panel-soft) !important;
  background-color: var(--theme-panel-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body:not(#appShell) :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: #dedede !important;
}

html:root[data-theme="dark"] body:not(#appShell) :is(
  .primary-btn,
  button.primary,
  button.recommended,
  .assistant-send-btn,
  .editor-workflow-action.active
) :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: #ffffff !important;
}

html:root[data-theme="dark"] body:not(#appShell) :is(.project-delete-btn, .customer-account-logout) :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: #ff6b6b !important;
}


/* Specificity bridge for the legacy performance-tier theme. */
html:root[data-theme="dark"][data-performance-tier] body #appShell.app-shell > header.topbar {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-chrome) !important;
  background-color: var(--theme-chrome) !important;
  background-image: none !important;
  box-shadow: inset 0 -1px var(--theme-line) !important;
}

html:root[data-theme="dark"] body #appShell > header.topbar .workmate-wordmark-copy > small {
  color: #ffffff !important;
}

html:root[data-theme="dark"] body #appShell > header.topbar > #editorWorkflowNav,
html:root[data-theme="dark"] body #appShell > header.topbar > #editorWorkflowNav > button.editor-workflow-action {
  color: var(--theme-muted) !important;
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body #appShell > header.topbar > #editorWorkflowNav > button.editor-workflow-action.active,
html:root[data-theme="dark"] body #appShell > header.topbar > #editorWorkflowNav[data-active-workflow] > button.editor-workflow-action.active,
html:root[data-theme="dark"] body #appShell > header.topbar > #editorWorkflowNav > button.editor-workflow-action[aria-selected="true"] {
  color: #ffffff !important;
  border-color: #454545 !important;
  background: #333333 !important;
  background-color: #333333 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body #appShell > #documentTabsBar.document-tabs-bar .document-tab.active,
html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .editor-left-tabs > button.active,
html:root[data-theme="dark"] body #appShell #step-edit > .inspector .inspector-view-tabs > button.active,
html:root[data-theme="dark"] body #appShell #step-edit #canvasViewSwitch > button.active,
html:root[data-theme="dark"] body #appShell #step-edit #editorRibbon .ribbon-tool.active,
html:root[data-theme="dark"] body #appShell #step-edit #editorToolRail > button.active {
  color: #ffffff !important;
  border-color: #454545 !important;
  background: #333333 !important;
  background-color: #333333 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body #appShell > #documentTabsBar.document-tabs-bar .document-tab.active {
  box-shadow: inset 0 -2px #686868 !important;
}

html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel #addSlideBtn {
  color: #f0f0f0 !important;
  border-color: #464646 !important;
  background: #262626 !important;
  background-color: #262626 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body #appShell #step-edit > .inspector #designCandidatePanel.design-candidate-panel,
html:root[data-theme="dark"] body #appShell #step-edit > .inspector #designCandidatePanel :is(.design-candidate-disclosure, .design-candidate-head, .design-candidate-body) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-panel-soft) !important;
  background-color: var(--theme-panel-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body #appShell #step-edit :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: #dedede !important;
}

html:root[data-theme="dark"] body #appShell #step-edit :is(
  .primary-btn,
  button.primary,
  button.recommended,
  .assistant-send-btn
) :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: #ffffff !important;
}

/* In chat mode the conversation controls occupy the existing left rail.
   The right side stays focused on the conversation and generated work. */
@media (min-width: 981px) {
  body[data-project-home-mode="chat"] .project-home-nav {
    width: 220px !important;
    min-width: 220px !important;
    box-sizing: border-box !important;
    gap: 0 !important;
    padding: 26px 16px 20px !important;
  }

  body[data-project-home-mode="chat"] .project-home-nav > :not(.project-home-brand):not(#projectHomeConversationNav):not(.project-home-account-slot) {
    display: none !important;
  }

  body[data-project-home-mode="chat"] .project-home-nav > .project-home-brand {
    margin: 0 8px 22px !important;
  }

  body[data-project-home-mode="chat"] .project-home-conversation-nav {
    display: block !important;
    min-width: 0 !important;
  }

  body[data-project-home-mode="chat"] .project-home-conversation-nav > .assistant-side-nav.in-project-sidebar {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body[data-project-home-mode="chat"] .project-home-conversation-nav .assistant-new-conversation {
    min-height: 42px !important;
    border-radius: 8px !important;
    background: var(--store-blue, #2d8cf0) !important;
    color: #fff !important;
  }

  body[data-project-home-mode="chat"] .project-home-conversation-nav .assistant-side-tabs {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  body[data-project-home-mode="chat"] .project-home-conversation-nav .assistant-side-tabs button {
    justify-content: flex-start !important;
    min-height: 38px !important;
    padding-inline: 12px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
  }

  body[data-project-home-mode="chat"] .project-home-conversation-nav .assistant-side-panel {
    position: static !important;
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 4px 0 0 !important;
    overflow: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-project-home-mode="chat"] .project-home-conversation-nav .assistant-side-panel.hidden {
    display: none !important;
  }

  body[data-project-home-mode="chat"] .project-home-account-slot {
    display: grid !important;
  }
}

/* Desktop-first product: preserve the reference composition below the normal
   desktop breakpoint instead of introducing a separate mobile redesign. */
@media (max-width: 980px) {
  html,
  body,
  body .app-shell {
    min-width: 1024px !important;
  }

  body {
    overflow-x: auto !important;
  }
}

@media (min-width: 981px) {
  html:root body[data-active-step="create"] .project-home-nav > .project-home-brand {
    display: grid !important;
    margin: 0 8px 22px !important;
  }

  html:root body[data-active-step="create"] .project-home-nav {
    padding-top: 24px !important;
  }

  /* On the home route the left rail owns the product identity. The editor
     keeps the compact wordmark in the global header. */
  html:root body[data-active-step="create"] .topbar > .brand-block {
    display: none !important;
  }

  html:root body[data-active-step="create"] .app-shell > .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
}

@media (max-width: 980px) {
  body[data-project-home-mode="chat"] .project-home-nav {
    display: none !important;
  }
}

html,
body,
button,
input,
select,
textarea {
  font-family: Inter, "SF Pro Display", "Segoe UI", "Noto Sans SC", sans-serif !important;
}

html:not([data-theme="dark"]) body,
html:not([data-theme="dark"]) .app-shell {
  background: var(--wm-bg) !important;
  color: var(--wm-ink) !important;
}

button,
input,
select,
textarea {
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease !important;
}

/* Primary brand header */
@media (min-width: 981px) {
  html body .app-shell > .topbar {
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    background: #061423 !important;
    color: #eef1ff !important;
    box-shadow: 0 8px 26px rgba(8, 12, 32, .2) !important;
  }

  html body .topbar .brand-block {
    min-width: 270px !important;
    gap: 6px !important;
  }

  .workmate-wordmark.file-center-trigger {
    width: 176px !important;
    min-width: 176px !important;
    height: 46px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 0 12px 0 4px !important;
    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  .workmate-wordmark img {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    border-radius: 12px !important;
    box-shadow: 0 7px 20px rgba(11 85 212, .34) !important;
  }

  .workmate-wordmark-copy {
    display: grid !important;
    min-width: 0 !important;
    gap: 3px !important;
    text-align: left !important;
    line-height: 1 !important;
  }

  .workmate-wordmark-copy strong {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .095em !important;
    white-space: nowrap !important;
  }

  .workmate-wordmark-copy small {
    color: #88e5ef !important;
    font-size: 8px !important;
    font-weight: 650 !important;
    letter-spacing: .03em !important;
    white-space: nowrap !important;
  }

  #fileCenterBtn.file-center-trigger {
    height: 34px !important;
    padding: 0 9px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #a9b3d0 !important;
  }

  #fileCenterBtn.file-center-trigger:hover {
    border-color: rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
  }

  .topbar .brand-copy { display: none !important; }

  html body .app-shell > .topbar > #editorWorkflowNav {
    height: 44px !important;
    gap: 3px !important;
    padding: 4px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.055) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.04) !important;
  }

  html body .app-shell > .topbar > #editorWorkflowNav > .editor-workflow-action {
    min-width: 68px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #909abc !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    box-shadow: none !important;
  }

  html body .app-shell > .topbar > #editorWorkflowNav > .editor-workflow-action:hover:not(:disabled) {
    background: rgba(255,255,255,.075) !important;
    color: #f6f7ff !important;
  }

  html body .app-shell > .topbar > #editorWorkflowNav > .editor-workflow-action.active {
    background: linear-gradient(135deg, #3d96ff 0%, #0b55d4 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(11 85 212, .38), inset 0 1px rgba(255,255,255,.2) !important;
  }

  html body .app-shell > .topbar > #editorWorkflowNav > .editor-workflow-action::before,
  html body .app-shell > .topbar > #editorWorkflowNav > .editor-workflow-action::after {
    display: none !important;
  }

  html body .topbar .top-actions { gap: 6px !important; }

  html body .topbar .top-actions button,
  html body .topbar .license-points {
    border-color: rgba(255,255,255,.1) !important;
    background: rgba(255,255,255,.055) !important;
    color: #b6bfdc !important;
    box-shadow: none !important;
  }

  html body .topbar .top-actions button:hover:not(:disabled),
  html body .topbar .license-points:hover {
    border-color: rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.1) !important;
    color: #fff !important;
  }

  .brand-avatar-control .brand-mark {
    width: 36px !important;
    height: 36px !important;
    padding: 2px !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.06) !important;
  }

  .brand-avatar-control .brand-mark img { border-radius: 8px !important; }
}

/* Document strip */
html:not([data-theme="dark"]) body .document-tabs-bar {
  min-height: 42px !important;
  padding-inline: 10px !important;
  border-bottom: 1px solid var(--wm-line) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: var(--wm-shadow-sm) !important;
  backdrop-filter: blur(16px) !important;
}

html:not([data-theme="dark"]) .document-tab,
html:not([data-theme="dark"]) .document-tabs-open,
html:not([data-theme="dark"]) .document-tabs-scroll {
  border-radius: 8px !important;
}

html:not([data-theme="dark"]) .document-tab.active {
  border-color: rgba(22 119 255,.18) !important;
  background: var(--wm-brand-soft) !important;
  color: var(--wm-brand-strong) !important;
}

/* Canvas category toolbar and ribbons */
html:not([data-theme="dark"]) #step-edit > .editor-top-ribbon,
html:not([data-theme="dark"]) #step-edit > .editor-left-panel,
html:not([data-theme="dark"]) #step-edit > .inspector,
html:not([data-theme="dark"]) #step-edit > #editorToolRail.editor-tool-rail {
  border-color: var(--wm-line) !important;
  background: rgba(255,255,255,.97) !important;
}

html:not([data-theme="dark"]) #step-edit > .editor-top-ribbon {
  box-shadow: 0 1px 0 var(--wm-line), 0 7px 18px rgba(27, 34, 71, .035) !important;
}

html:not([data-theme="dark"]) .design-category-toolbar,
html:not([data-theme="dark"]) .editor-ribbon {
  background: transparent !important;
}

html:not([data-theme="dark"]) .design-category-toolbar button,
html:not([data-theme="dark"]) .editor-ribbon button,
html:not([data-theme="dark"]) .editor-ribbon select,
html:not([data-theme="dark"]) .editor-ribbon input {
  border-color: var(--wm-line) !important;
  border-radius: var(--wm-radius-sm) !important;
  background: var(--wm-panel-soft) !important;
  color: var(--wm-ink) !important;
  box-shadow: none !important;
}

html:not([data-theme="dark"]) .design-category-toolbar button:hover:not(:disabled),
html:not([data-theme="dark"]) .editor-ribbon button:hover:not(:disabled) {
  border-color: rgba(22 119 255,.25) !important;
  background: var(--wm-brand-soft) !important;
  color: var(--wm-brand-strong) !important;
}

html:not([data-theme="dark"]) .primary-btn,
html:not([data-theme="dark"]) button.recommended,
html:not([data-theme="dark"]) [data-design-smart-action="generate-range"],
html:not([data-theme="dark"]) #designCategoryToolbar [data-design-category-action="ai"] {
  border-color: transparent !important;
  background: linear-gradient(135deg, #3d96ff 0%, #0b55d4 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 15px rgba(11 85 212,.23) !important;
}

html:not([data-theme="dark"]) .primary-btn:hover:not(:disabled),
html:not([data-theme="dark"]) button.recommended:hover:not(:disabled),
html:not([data-theme="dark"]) [data-design-smart-action="generate-range"]:hover:not(:disabled) {
  background: linear-gradient(135deg, #3d96ff 0%, #0b55d4 100%) !important;
  box-shadow: 0 8px 19px rgba(11 85 212,.3) !important;
  transform: translateY(-1px) !important;
}

/* Work area */
html:not([data-theme="dark"]) #step-edit > .canvas-area {
  background-color: #e9ecf3 !important;
  background-image: radial-gradient(circle at 1px 1px, rgba(76, 83, 124, .1) 1px, transparent 0) !important;
  background-size: 22px 22px !important;
}

html:not([data-theme="dark"]) #step-edit .office-canvas-shell { background: transparent !important; }

html:not([data-theme="dark"]) .slide-canvas,
html:not([data-theme="dark"]) .design-page-preview img,
html:not([data-theme="dark"]) .design-canvas-image {
  box-shadow: 0 28px 68px rgba(31, 38, 76, .17), 0 0 0 1px rgba(43, 51, 91, .1) !important;
}

html:not([data-theme="dark"]) .office-status-bar {
  border-top: 1px solid var(--wm-line) !important;
  background: rgba(255,255,255,.94) !important;
  color: var(--wm-muted) !important;
  backdrop-filter: blur(16px) !important;
}

html:not([data-theme="dark"]) #step-edit > #editorToolRail.editor-tool-rail {
  padding: 8px 6px !important;
}

html:not([data-theme="dark"]) #step-edit > #editorToolRail.editor-tool-rail > button {
  border-radius: 10px !important;
  color: #747d96 !important;
}

html:not([data-theme="dark"]) #step-edit > #editorToolRail.editor-tool-rail > button:hover:not(:disabled) {
  background: var(--wm-brand-soft) !important;
  color: var(--wm-brand) !important;
}

html:not([data-theme="dark"]) #step-edit > #editorToolRail.editor-tool-rail > button.active {
  background: linear-gradient(135deg, #3d96ff, #0b55d4) !important;
  color: #fff !important;
  box-shadow: 0 7px 17px rgba(11 85 212,.25) !important;
}

/* Left pages and assets */
html:not([data-theme="dark"]) .editor-left-panel .panel-head,
html:not([data-theme="dark"]) .editor-left-tabs,
html:not([data-theme="dark"]) .editor-left-actions {
  border-color: var(--wm-line) !important;
}

html:not([data-theme="dark"]) .editor-left-tabs button {
  border-radius: 8px !important;
  color: var(--wm-muted) !important;
}

html:not([data-theme="dark"]) .editor-left-tabs button.active {
  background: var(--wm-brand-soft) !important;
  color: var(--wm-brand-strong) !important;
}

html:not([data-theme="dark"]) .thumb,
html:not([data-theme="dark"]) .editor-page-card,
html:not([data-theme="dark"]) [class*="thumbnail-card"] {
  border-radius: 10px !important;
}

html:not([data-theme="dark"]) .thumb.active,
html:not([data-theme="dark"]) .editor-page-card.active,
html:not([data-theme="dark"]) [class*="thumbnail-card"].active {
  border-color: var(--wm-brand) !important;
  box-shadow: 0 0 0 2px rgba(22 119 255,.13) !important;
}

/* Right AI inspector */
html:not([data-theme="dark"]) #step-edit > .inspector {
  color: var(--wm-ink) !important;
  box-shadow: -9px 0 24px rgba(28, 35, 73, .035) !important;
}

html:not([data-theme="dark"]) .inspector .panel-head,
html:not([data-theme="dark"]) .inspector-view-tabs,
html:not([data-theme="dark"]) .design-preview-inspector > header,
html:not([data-theme="dark"]) .design-candidate-panel,
html:not([data-theme="dark"]) .design-smart-operations,
html:not([data-theme="dark"]) .design-control-disclosure,
html:not([data-theme="dark"]) .inspector-tool-section {
  border-color: var(--wm-line) !important;
}

html:not([data-theme="dark"]) .inspector button,
html:not([data-theme="dark"]) .inspector input,
html:not([data-theme="dark"]) .inspector textarea,
html:not([data-theme="dark"]) .inspector select,
html:not([data-theme="dark"]) .design-smart-operations button {
  border-radius: var(--wm-radius-sm) !important;
}

html:not([data-theme="dark"]) .inspector textarea,
html:not([data-theme="dark"]) .inspector input,
html:not([data-theme="dark"]) .inspector select {
  border-color: var(--wm-line-strong) !important;
  background: var(--wm-panel-soft) !important;
}

html:not([data-theme="dark"]) .inspector textarea:focus,
html:not([data-theme="dark"]) .inspector input:focus,
html:not([data-theme="dark"]) .inspector select:focus {
  border-color: var(--wm-brand) !important;
  box-shadow: 0 0 0 3px rgba(22 119 255,.11) !important;
  outline: 0 !important;
}

html:not([data-theme="dark"]) .design-status-badge,
html:not([data-theme="dark"]) .design-page-context-meta > * {
  border-radius: 999px !important;
}

html:not([data-theme="dark"]) .design-region-quick-action button,
html:not([data-theme="dark"]) .design-control-disclosure,
html:not([data-theme="dark"]) .design-candidate-panel {
  border-radius: var(--wm-radius-md) !important;
  background: var(--wm-panel) !important;
  box-shadow: var(--wm-shadow-sm) !important;
}

/* Home and product surfaces */
html:not([data-theme="dark"]) .project-home-nav {
  border-color: rgba(255,255,255,.08) !important;
  background: linear-gradient(180deg, #111937 0%, #0b1129 100%) !important;
  color: #c6cde4 !important;
}

.project-home-brand img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  box-shadow: 0 9px 24px rgba(11 85 212,.3) !important;
}

.project-home-brand strong {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}

.project-home-brand span {
  color: #78dfe8 !important;
  font-size: 8px !important;
}

html:not([data-theme="dark"]) .project-home-nav-item,
html:not([data-theme="dark"]) .project-home-nav p { color: #949ebd !important; }

html:not([data-theme="dark"]) .project-home-nav-item:hover,
html:not([data-theme="dark"]) .project-home-nav-item.active {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

html:not([data-theme="dark"]) .project-home-primary,
html:not([data-theme="dark"]) .smart-create-submit {
  background: linear-gradient(135deg, #3d96ff, #0b55d4) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(11 85 212,.3) !important;
}

html:not([data-theme="dark"]) .project-home-content {
  background:
    radial-gradient(circle at 84% 8%, rgba(61 150 255,.09), transparent 29%),
    radial-gradient(circle at 54% 0%, rgba(18,191,201,.07), transparent 24%),
    var(--wm-bg) !important;
}

html:not([data-theme="dark"]) .smart-create-composer,
html:not([data-theme="dark"]) .project-home-mode-switch,
html:not([data-theme="dark"]) .project-card,
html:not([data-theme="dark"]) .project-home-card {
  border-color: rgba(22 119 255,.13) !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: var(--wm-shadow-md) !important;
}

html:not([data-theme="dark"]) .project-home-heading > div > span {
  color: var(--wm-brand) !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
}

html:not([data-theme="dark"]) .project-home-heading h2 {
  color: #11162d !important;
  letter-spacing: -.035em !important;
}

/* Dialogs and popovers */
html:not([data-theme="dark"]) :where(.settings-dialog, .style-library-dialog, .style-library-detail-dialog, .assistant-drawer, .assistant-tools-drawer, .brand-avatar-menu, .credits-popover) {
  border-color: var(--wm-line) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 24px 70px rgba(20,27,61,.18) !important;
}

/* Dark mode keeps the same brand, with denser pro-tool contrast. */
:root[data-theme="dark"] {
  --v2-blue: #3d96ff;
  --af-accent: #3d96ff;
  --du-primary: #3d96ff;
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .app-shell { background: #080c1d !important; }

:root[data-theme="dark"] #step-edit > .canvas-area {
  background-color: #0b1022 !important;
  background-image: radial-gradient(circle at 1px 1px, rgba(142,149,194,.13) 1px, transparent 0) !important;
  background-size: 22px 22px !important;
}

/* Conversation layout: navigation is a compact utility bar, while chat keeps
   the full working width. This late workbench rule wins over the legacy flex
   layout used by the project-home chat shell. */
html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto !important;
  align-content: stretch !important;
  overflow: visible !important;
}

html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded > * {
  grid-row: auto !important;
  grid-column: 1 !important;
  min-width: 0 !important;
}

html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded .assistant-side-nav {
  position: relative !important;
  inset: auto !important;
  z-index: 20 !important;
  display: grid !important;
  grid-template-columns: minmax(132px, 190px) minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 50px !important;
  max-height: none !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--store-line, rgba(255,255,255,.12)) !important;
  background: color-mix(in srgb, var(--store-card, #171a2a) 96%, transparent) !important;
}

html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded .assistant-new-conversation {
  grid-column: 1 !important;
  width: 100% !important;
  min-height: 34px !important;
  margin: 0 !important;
}

html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded .assistant-side-tabs {
  grid-column: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px !important;
  min-width: 0 !important;
}

html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded .assistant-side-tabs button {
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding-inline: 8px !important;
  white-space: nowrap !important;
}

html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded .assistant-side-panel {
  position: absolute !important;
  z-index: 30 !important;
  top: calc(100% + 6px) !important;
  right: 12px !important;
  left: 12px !important;
  width: auto !important;
  max-height: min(220px, 32vh) !important;
  margin: 0 !important;
  padding: 8px !important;
  overflow: auto !important;
  border: 1px solid var(--store-line, rgba(255,255,255,.12)) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--store-card, #171a2a) 98%, transparent) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.28) !important;
}

html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded .assistant-tasks,
html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded .assistant-pdf-redesign {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded .assistant-tasks {
  max-height: min(118px, 16vh) !important;
  overflow: auto !important;
}

html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded .assistant-pdf-redesign {
  max-height: min(260px, 30vh) !important;
  overflow: auto !important;
}

html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded .assistant-messages {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded .assistant-composer {
  width: calc(100% - 28px) !important;
  max-width: none !important;
  margin: 8px 14px 0 !important;
  box-sizing: border-box !important;
}

/* A drawer can be narrower than the browser viewport (for example inside the
   editor inspector), so viewport media queries alone are insufficient. */
.assistant-drawer.assistant-compact .assistant-side-nav {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--v2-line, #d9dee7) !important;
}

.assistant-drawer.assistant-compact .assistant-new-conversation,
.assistant-drawer.assistant-compact .assistant-side-tabs {
  grid-column: 1 !important;
  width: 100% !important;
}

.assistant-drawer.assistant-compact .assistant-side-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* In a floating compact assistant the navigation is a top toolbar, so keep
   the new-conversation action and history/project tabs on one row. */
#assistantDrawer.assistant-compact > .assistant-side-nav {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 6px !important;
}
#assistantDrawer.assistant-compact .assistant-new-conversation { grid-column: 1 !important; }
#assistantDrawer.assistant-compact .assistant-side-tabs { grid-column: 2 !important; }
#assistantDrawer.assistant-compact .assistant-side-panel { grid-column: 1 / -1 !important; grid-row: 2 !important; }

.assistant-drawer.assistant-compact .assistant-side-panel {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 3 !important;
  max-height: 132px !important;
  margin: 0 !important;
  padding: 6px 0 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.assistant-drawer.assistant-compact > :not(.assistant-header):not(.assistant-side-nav):not(.assistant-context):not(.assistant-tasks):not(.assistant-pdf-redesign):not(.assistant-recommendations):not(.assistant-service-notice):not(.assistant-voice-status):not(.assistant-execution-controls):not(.assistant-messages):not(.assistant-new-result):not(.assistant-brief-actions):not(.assistant-suggestions):not(.assistant-attachments):not(.assistant-composer):not(.assistant-composer-hint),
#assistantDrawer.assistant-compact > :not(.assistant-header):not(.assistant-side-nav):not(.assistant-context):not(.assistant-tasks):not(.assistant-pdf-redesign):not(.assistant-recommendations):not(.assistant-service-notice):not(.assistant-voice-status):not(.assistant-execution-controls):not(.assistant-messages):not(.assistant-new-result):not(.assistant-brief-actions):not(.assistant-suggestions):not(.assistant-attachments):not(.assistant-composer):not(.assistant-composer-hint) {
  grid-row: auto !important;
  margin-left: 0 !important;
}

#assistantDrawer.assistant-compact > .assistant-context,
#assistantDrawer.assistant-compact > .assistant-tasks,
#assistantDrawer.assistant-compact > .assistant-pdf-redesign,
#assistantDrawer.assistant-compact > .assistant-recommendations,
#assistantDrawer.assistant-compact > .assistant-service-notice,
#assistantDrawer.assistant-compact > .assistant-voice-status,
#assistantDrawer.assistant-compact > .assistant-execution-controls,
#assistantDrawer.assistant-compact > .assistant-messages,
#assistantDrawer.assistant-compact > .assistant-new-result,
#assistantDrawer.assistant-compact > .assistant-brief-actions,
#assistantDrawer.assistant-compact > .assistant-suggestions,
#assistantDrawer.assistant-compact > .assistant-attachments {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* Compact floating assistants still need the full vertical workflow. The
   generic compact reset above intentionally removes row placement, but that
   leaves the message viewport at its min-content height when the PDF panel
   or voice status is present. Keep every surface in a stable track so the
   newest conversation result remains visible and scrollable. */
#assistantDrawer.assistant-compact {
  grid-template-rows: auto auto auto auto minmax(92px, 110px) auto auto minmax(42px, 56px) auto minmax(170px, 1fr) auto auto auto auto auto !important;
}
#assistantDrawer.assistant-compact > .assistant-header { grid-row: 1 !important; }
#assistantDrawer.assistant-compact > .assistant-side-nav { grid-row: 2 !important; }
#assistantDrawer.assistant-compact > .assistant-context { grid-row: 3 !important; }
#assistantDrawer.assistant-compact > .assistant-tasks { grid-row: 4 !important; }
#assistantDrawer.assistant-compact > .assistant-pdf-redesign { grid-row: 5 !important; }
#assistantDrawer.assistant-compact > .assistant-pdf-redesign {
  min-height: 0 !important;
  max-height: 110px !important;
  overflow: auto !important;
}
#assistantDrawer.assistant-compact > .assistant-recommendations { grid-row: 6 !important; }
#assistantDrawer.assistant-compact > .assistant-service-notice { grid-row: 7 !important; }
#assistantDrawer.assistant-compact > .assistant-voice-status { grid-row: 8 !important; }
#assistantDrawer.assistant-compact > .assistant-voice-status {
  min-height: 0 !important;
  max-height: 56px !important;
  overflow: hidden !important;
}
#assistantDrawer.assistant-compact > .assistant-execution-controls { grid-row: 9 !important; }
#assistantDrawer.assistant-compact > .assistant-messages {
  grid-row: 10 !important;
  min-height: 0 !important;
  overflow: auto !important;
}
#assistantDrawer.assistant-compact > .assistant-new-result { grid-row: 10 !important; }
#assistantDrawer.assistant-compact > .assistant-brief-actions { grid-row: 11 !important; }
#assistantDrawer.assistant-compact > .assistant-suggestions { grid-row: 12 !important; }
#assistantDrawer.assistant-compact > .assistant-attachments { grid-row: 13 !important; }
#assistantDrawer.assistant-compact > .assistant-composer { grid-row: 14 !important; }
#assistantDrawer.assistant-compact > .assistant-composer-hint { grid-row: 15 !important; }

@media (max-width: 760px) {
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded .assistant-side-nav {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded .assistant-side-tabs {
    grid-column: 1 !important;
  }
}

@media (max-width: 1220px) and (min-width: 981px) {
  html body .topbar .brand-block { min-width: 210px !important; }
  .workmate-wordmark.file-center-trigger { width: 136px !important; min-width: 136px !important; }
  .workmate-wordmark-copy small { display: none !important; }
  html body .app-shell > .topbar > #editorWorkflowNav > .editor-workflow-action { min-width: 58px !important; padding-inline: 7px !important; }
}

@media (max-width: 980px) {
  .workmate-wordmark img { width: 32px !important; height: 32px !important; border-radius: 10px !important; }
  .workmate-wordmark-copy { display: none !important; }
}

/* V2 authority layer: approved midnight navigation plus a light pro workspace. */
@media (min-width: 981px) {
  html:root[data-performance-tier] body .app-shell {
    grid-template-rows: 56px 38px minmax(0, 1fr) !important;
  }

  html:root[data-performance-tier] body .app-shell > .topbar {
    grid-template-columns: 218px minmax(0, 1fr) 120px !important;
    gap: 10px !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 16px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(157, 168, 218, .14) !important;
    background: #061423 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  html:root[data-performance-tier] body .topbar > .brand-block {
    display: flex !important;
    align-items: center !important;
    width: 218px !important;
    min-width: 218px !important;
    height: 48px !important;
    gap: 6px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html:root[data-performance-tier] body .topbar .brand-block > #projectHomeBtn.workmate-wordmark {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 146px !important;
    min-width: 146px !important;
    max-width: 146px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 9px 0 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  html:root[data-performance-tier] body .topbar #projectHomeBtn.workmate-wordmark > .workmate-logo-icon {
    display: flex !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: 0 8px 22px rgba(11 85 212, .35) !important;
  }

  html:root[data-performance-tier] body .topbar #projectHomeBtn.workmate-wordmark > .workmate-logo-icon > img {
    display: block !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    object-fit: contain !important;
    border-radius: 10px !important;
  }

  html:root[data-performance-tier] body .topbar #projectHomeBtn.workmate-wordmark > .workmate-wordmark-copy {
    display: grid !important;
    min-width: 0 !important;
    gap: 4px !important;
    overflow: visible !important;
    text-align: left !important;
  }

  html:root[data-performance-tier] body .topbar #projectHomeBtn.workmate-wordmark > .workmate-wordmark-copy > strong {
    display: block !important;
    overflow: visible !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .085em !important;
    white-space: nowrap !important;
  }

  html:root[data-performance-tier] body .topbar #projectHomeBtn.workmate-wordmark > .workmate-wordmark-copy > small {
    display: block !important;
    overflow: visible !important;
    color: #7de2ec !important;
    font-size: 7px !important;
    font-weight: 680 !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
  }

  html:root[data-performance-tier] body .topbar .brand-block > #fileCenterBtn.file-center-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    gap: 6px !important;
    padding: 0 8px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #aab4d2 !important;
  }

  html:root[data-performance-tier] body .topbar .brand-block > #fileCenterBtn.file-center-trigger .button-label {
    display: inline !important;
    overflow: visible !important;
    color: inherit !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  html:root[data-performance-tier] body .topbar .brand-block > #fileCenterBtn.file-center-trigger:hover {
    border-color: rgba(255, 255, 255, .12) !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
  }

  html:root[data-performance-tier] body .topbar > #editorWorkflowNav {
    justify-self: center !important;
    width: min(100%, 600px) !important;
    height: 44px !important;
    min-height: 44px !important;
    gap: 3px !important;
    padding: 4px !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .055) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .045) !important;
  }

  html:root[data-performance-tier] body .topbar > #editorWorkflowNav > .editor-workflow-action,
  html:root[data-performance-tier] body .topbar > #editorWorkflowNav > .editor-workflow-action:hover:not(:disabled) {
    min-width: 58px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 7px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #99a4c7 !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 650 !important;
  }

  html:root[data-performance-tier] body .topbar > #editorWorkflowNav > .editor-workflow-action:hover:not(:disabled) {
    background: rgba(255, 255, 255, .075) !important;
    color: #fff !important;
  }

  html:root[data-performance-tier] body .topbar > #editorWorkflowNav > .editor-workflow-action.active,
  html:root[data-performance-tier] body .topbar > #editorWorkflowNav[data-active-workflow] > .editor-workflow-action.active,
  html:root[data-performance-tier] body .topbar > #editorWorkflowNav > .editor-workflow-action[aria-selected="true"],
  html:root[data-performance-tier] body .topbar > #editorWorkflowNav > .editor-workflow-action[aria-current="step"] {
    background-color: #1677ff !important;
    background-image: linear-gradient(135deg, #3d96ff 0%, #0b55d4 100%) !important;
    color: #fff !important;
    box-shadow: 0 7px 18px rgba(11 85 212, .38), inset 0 1px rgba(255, 255, 255, .22) !important;
  }

  html:root[data-performance-tier] body .topbar > .top-actions {
    justify-content: flex-end !important;
    width: 120px !important;
    min-width: 120px !important;
    gap: 6px !important;
  }
}

html:root[data-theme] body .document-tabs-bar {
  min-height: 38px !important;
  border: 0 !important;
  border-bottom: 1px solid #dfe3ee !important;
  background: #f8f9fc !important;
  color: #4b5570 !important;
  box-shadow: 0 1px 3px rgba(24, 31, 66, .045) !important;
}

html:root[data-theme] body .document-tabs-bar :is(.document-home-tab, .document-tab, .document-tabs-open, .document-tabs-scroll) {
  border-color: #e0e4ef !important;
  background: transparent !important;
  color: #68728a !important;
}

html:root[data-theme] body .document-tabs-bar :is(.document-home-tab, .document-tab):hover {
  background: #fff !important;
  color: #242b45 !important;
}

html:root[data-theme] body .document-tabs-bar .document-tab.active {
  border-color: var(--neutral-line) !important;
  background: var(--neutral-panel) !important;
  color: var(--neutral-text) !important;
  box-shadow: inset 0 -2px var(--neutral-accent) !important;
}

/* Professional light editing surfaces, independent of the saved app theme. */
html:root[data-theme] body #step-edit.editor-layout {
  background: #edf0f6 !important;
  color: #151b31 !important;
}

html:root[data-theme] body #step-edit > #editorToolRail.editor-tool-rail > button.active {
  border-color: transparent !important;
  background: #1677ff !important;
  color: #fff !important;
  box-shadow: 0 7px 17px rgba(11 85 212, .28) !important;
}

html:root[data-theme] body #step-edit > .editor-top-ribbon {
  border: 0 !important;
  border-bottom: 1px solid #dfe3ec !important;
  background: #fff !important;
  color: #171d33 !important;
  box-shadow: 0 4px 14px rgba(22, 29, 61, .045) !important;
}

html:root[data-theme] body #step-edit > .editor-top-ribbon #editorRibbon {
  border-color: #e2e5ee !important;
  background: #fff !important;
  color: #151b31 !important;
}

html:root[data-theme] body #step-edit #editorRibbon > .ribbon-group,
html:root[data-theme] body #step-edit #editorRibbon .canvas-view-switch {
  border-color: #dde2ec !important;
  background: #f8f9fc !important;
  color: #30384f !important;
}

html:root[data-theme] body #step-edit .ribbon-group {
  border-color: #e3e6ef !important;
  color: #151b31 !important;
}

html:root[data-theme] body #step-edit .editor-ribbon :is(small, p, .ribbon-title) {
  color: #758097 !important;
}

html:root[data-theme] body #step-edit > .editor-top-ribbon :is(button, input, select),
html:root[data-theme] body #step-edit .editor-ribbon :is(button, input, select) {
  border-color: #dde2ec !important;
  border-radius: 8px !important;
  background: #f8f9fc !important;
  color: #30384f !important;
  box-shadow: none !important;
}

html:root[data-theme] body #step-edit > .editor-top-ribbon :is(button, input, select):hover:not(:disabled),
html:root[data-theme] body #step-edit .editor-ribbon :is(button, input, select):hover:not(:disabled) {
  border-color: rgba(22 119 255, .28) !important;
  background: rgba(22 119 255, .08) !important;
  color: #0b55d4 !important;
}

html:root[data-theme] body #step-edit > .editor-top-ribbon :is(.primary-btn, button.recommended, [data-category-action="generate"]),
html:root[data-theme] body #step-edit :is(.primary-btn, button.recommended, [data-design-smart-action="generate-range"]) {
  border-color: var(--neutral-accent) !important;
  background: var(--neutral-accent) !important;
  color: var(--neutral-accent-text) !important;
  box-shadow: none !important;
}
html:root[data-theme] body #step-edit > .editor-top-ribbon :is(.primary-btn, button.recommended, [data-category-action="generate"]):disabled,
html:root[data-theme] body #step-edit :is(.primary-btn, button.recommended, [data-design-smart-action="generate-range"]):disabled {
  border-color: var(--neutral-line) !important;
  background: var(--neutral-panel-soft) !important;
  color: var(--neutral-faint) !important;
  box-shadow: none !important;
}

html:root[data-theme] body #step-edit > .thumb-panel {
  border: 0 !important;
  border-right: 1px solid #222d58 !important;
  background: linear-gradient(180deg, #121a38 0%, #0d1531 100%) !important;
  color: #eef1ff !important;
  box-shadow: 8px 0 22px rgba(17, 24, 54, .08) !important;
}

html:root[data-theme] body #step-edit > .thumb-panel :is(.panel-head, .editor-left-tabs, .editor-left-actions) {
  border-color: rgba(162, 173, 222, .13) !important;
  background: transparent !important;
  color: #eef1ff !important;
}

html:root[data-theme] body #step-edit > .thumb-panel .panel-head h2 {
  color: #f4f6ff !important;
  font-weight: 700 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  letter-spacing: -.02em !important;
}

html:root[data-theme] body #step-edit > .thumb-panel .editor-panel-new-project,
html:root[data-theme] body #step-edit > .thumb-panel .editor-left-tabs button {
  border-color: transparent !important;
  background: transparent !important;
  color: #95a1c4 !important;
}

html:root[data-theme] body #step-edit > .thumb-panel .editor-left-tabs button:hover,
html:root[data-theme] body #step-edit > .thumb-panel .editor-left-tabs button.active {
  background: rgba(61 150 255, .16) !important;
  color: #fff !important;
}

html:root[data-theme] body #step-edit > .thumb-panel #addSlideBtn {
  border-color: var(--neutral-accent) !important;
  border-radius: 9px !important;
  background: var(--neutral-accent) !important;
  color: var(--neutral-accent-text) !important;
  box-shadow: none !important;
}

html:root[data-theme] body #step-edit > .thumb-panel .thumbnail-list {
  scrollbar-color: #4d5880 transparent !important;
}

html:root[data-theme] body #step-edit > .thumb-panel .thumb {
  border-color: rgba(171, 182, 230, .18) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .045) !important;
  color: #c7cee6 !important;
  box-shadow: none !important;
}

html:root[data-theme] body #step-edit > .thumb-panel .thumb:hover {
  border-color: rgba(61 150 255, .48) !important;
  background: rgba(255, 255, 255, .075) !important;
}

html:root[data-theme] body #step-edit > .thumb-panel .thumb.active {
  border-color: #3d96ff !important;
  background: rgba(61 150 255, .10) !important;
  box-shadow: 0 0 0 2px rgba(61 150 255, .24) !important;
}

html:root[data-theme] body #step-edit > .canvas-area,
html:root[data-theme] body #step-edit .office-canvas-shell,
html:root[data-theme] body #step-edit .office-canvas-body,
html:root[data-theme] body #step-edit .slide-stage {
  background-color: #e9ecf3 !important;
  color: #4f5970 !important;
}

html:root[data-theme] body #step-edit > .canvas-area {
  background-image: radial-gradient(circle at 1px 1px, rgba(82, 90, 132, .10) 1px, transparent 0) !important;
  background-size: 22px 22px !important;
}

html:root[data-theme] body #step-edit .slide-stage {
  background-image: radial-gradient(circle at 1px 1px, rgba(82, 90, 132, .07) 1px, transparent 0) !important;
  background-size: 22px 22px !important;
}

html:root[data-theme] body #step-edit .slide-canvas {
  border-radius: 1px !important;
  background: #fff !important;
  box-shadow: 0 28px 62px rgba(31, 38, 77, .20), 0 0 0 1px rgba(47, 55, 94, .12) !important;
}

html:root[data-theme] body #step-edit .office-status-bar {
  border-color: #dce1eb !important;
  background: rgba(255, 255, 255, .96) !important;
  color: #69738b !important;
  box-shadow: 0 -1px rgba(39, 47, 84, .035) !important;
}

html:root[data-theme] body #step-edit .office-status-bar :is(button, select, input) {
  border-color: #dfe3ec !important;
  background: #f7f8fb !important;
  color: #5c6680 !important;
}

html:root[data-theme] body #step-edit > .inspector {
  border: 0 !important;
  border-left: 1px solid #dde2eb !important;
  background: #fff !important;
  color: #171d33 !important;
  box-shadow: -8px 0 22px rgba(25, 32, 67, .045) !important;
}

html:root[data-theme] body #step-edit > .inspector > .panel-head {
  border-color: #e1e5ee !important;
  background: #fff !important;
  color: #1b2239 !important;
}

html:root[data-theme] body #step-edit > .inspector > .panel-head h2 {
  color: #1b2239 !important;
  font-weight: 720 !important;
}

html:root[data-theme] body #step-edit .design-preview-inspector {
  background: #fff !important;
  color: #171d33 !important;
}

html:root[data-theme] body #step-edit .design-preview-inspector > header {
  border-color: #e2e6ef !important;
  background: linear-gradient(180deg, #fafbfe 0%, #fff 100%) !important;
  color: #1c233a !important;
}

html:root[data-theme] body #step-edit .design-page-context > strong {
  color: #1c233a !important;
}

html:root[data-theme] body #step-edit .design-page-context > p {
  color: #737d93 !important;
}

html:root[data-theme] body #step-edit .design-page-context-meta > span {
  color: #59647d !important;
}

html:root[data-theme] body #step-edit .design-preview-inspector :is(p, small) {
  color: #737d93 !important;
}

html:root[data-theme] body #step-edit .design-preview-inspector-icon {
  border-color: rgb(22 119 255 / 15%) !important;
  background: rgb(22 119 255 / 9%) !important;
  color: #1677ff !important;
}

html:root[data-theme] body #step-edit .design-page-context-meta > * {
  border-color: #e2e5ee !important;
  background: #f5f7fb !important;
  color: #59647d !important;
}

html:root[data-theme] body #step-edit :is(.design-candidate-panel, .design-control-disclosure, .design-smart-card, .design-region-quick-action, .inspector-tool-section) {
  border-color: #e1e5ee !important;
  border-radius: 11px !important;
  background: #fff !important;
  color: #1c233a !important;
  box-shadow: 0 1px 2px rgba(20, 27, 60, .035) !important;
}

html:root[data-theme] body #step-edit #designCandidatePanel.design-candidate-panel,
html:root[data-theme] body #step-edit .design-candidate-panel > details,
html:root[data-theme] body #step-edit .design-candidate-panel .design-candidate-head,
html:root[data-theme] body #step-edit .design-ai-command-panel,
html:root[data-theme] body #step-edit .design-control-disclosure > summary {
  border-color: #e1e5ee !important;
  background: #fff !important;
  color: #1c233a !important;
}

html:root[data-theme] body #step-edit #designCandidatePanel .design-candidate-item,
html:root[data-theme] body #step-edit #designCandidatePanel .design-candidate-empty {
  border-color: #e1e5ee !important;
  background: #f8f9fc !important;
  color: #293149 !important;
}

html:root[data-theme] body #step-edit #designCandidatePanel .design-candidate-item.selected {
  border-color: rgb(22 119 255 / 42%) !important;
  background: rgb(22 119 255 / 5.5%) !important;
}

html:root[data-theme] body #step-edit .design-candidate-issue-box {
  border-color: rgba(220, 73, 73, .22) !important;
  background: #fff7f6 !important;
  color: #a73c3c !important;
}

html:root[data-theme] body #step-edit .design-reference-picker,
html:root[data-theme] body #step-edit .design-reference-picker :is(button, .design-reference-open-board),
html:root[data-theme] body #step-edit .design-smart-operations :is(.ghost-btn, button:not(.primary-btn)),
html:root[data-theme] body #step-edit .design-more-operations-body button {
  border-color: #dfe3ec !important;
  background: #f8f9fc !important;
  color: #3d4760 !important;
}

html:root[data-theme] body #step-edit .design-reference-picker {
  border-radius: 10px !important;
  background: #f6f8fc !important;
}

html:root[data-theme] body #step-edit .design-reference-picker button.active {
  border-color: #1677ff !important;
  background: rgb(22 119 255 / 9%) !important;
  color: #0b55d4 !important;
}

html:root[data-theme] body #step-edit .design-smart-operations .primary-btn,
html:root[data-theme] body #step-edit .design-candidate-panel .primary-btn {
  border-color: transparent !important;
  background: linear-gradient(135deg, #3d96ff, #0b55d4) !important;
  color: #fff !important;
}

html:root[data-theme] body #step-edit .design-ai-command-panel {
  border-radius: 11px !important;
  box-shadow: 0 5px 16px rgba(28, 36, 72, .06) !important;
}

html:root[data-theme] body #step-edit .design-stage-footer {
  border-color: #e1e5ee !important;
  background: rgba(255, 255, 255, .96) !important;
  color: #202740 !important;
  box-shadow: 0 -5px 16px rgba(28, 36, 72, .055) !important;
}

html:root[data-theme] body #step-edit :is(.design-candidate-head, .design-candidate-body, .design-preview-scroll) {
  border-color: #e3e6ef !important;
  background: #fff !important;
  color: #1c233a !important;
}

html:root[data-theme] body #step-edit .design-preview-scroll {
  scrollbar-color: #c4cada transparent !important;
}

html:root[data-theme] body #step-edit > .inspector :is(input, textarea, select) {
  border-color: #dce1eb !important;
  border-radius: 9px !important;
  background: #f8f9fc !important;
  color: #242b43 !important;
  box-shadow: none !important;
}

html:root[data-theme] body #step-edit > .inspector :is(input, textarea, select):focus {
  border-color: #1677ff !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgb(22 119 255 / 11%) !important;
  outline: 0 !important;
}

html:root[data-theme] body #step-edit > .inspector :is(button, summary) {
  border-color: #dfe3ec !important;
  color: #414b64 !important;
}

html:root[data-theme] body #step-edit > .inspector :is(button, summary):hover:not(:disabled) {
  border-color: rgba(22 119 255, .24) !important;
  background: rgb(22 119 255 / 6.5%) !important;
  color: #0b55d4 !important;
}

html:root[data-theme] body #step-edit > .inspector :is(.primary-btn, button.recommended) {
  border-color: transparent !important;
  background: linear-gradient(135deg, #3d96ff, #0b55d4) !important;
  color: #fff !important;
  box-shadow: 0 7px 17px rgb(22 119 255 / 23%) !important;
}

@media (max-width: 1120px) and (min-width: 981px) {
  html:root[data-performance-tier] body .app-shell > .topbar {
    grid-template-columns: 206px minmax(0, 1fr) 112px !important;
    gap: 8px !important;
  }

  html:root[data-performance-tier] body .topbar > .brand-block {
    width: 206px !important;
    min-width: 206px !important;
  }

  html:root[data-performance-tier] body .topbar .brand-block > #projectHomeBtn.workmate-wordmark {
    width: 146px !important;
    min-width: 146px !important;
    max-width: 146px !important;
    gap: 7px !important;
  }

  html:root[data-performance-tier] body .topbar #projectHomeBtn.workmate-wordmark > .workmate-wordmark-copy > strong {
    font-size: 11px !important;
  }

  html:root[data-performance-tier] body .topbar #projectHomeBtn.workmate-wordmark > .workmate-wordmark-copy > small {
    font-size: 7px !important;
  }

  html:root[data-performance-tier] body .topbar > .top-actions {
    width: 112px !important;
    min-width: 112px !important;
  }
}

/* V3 refinement: denser tool chrome and calmer, more deliberate surfaces. */
html:root[data-theme] body #step-edit #editorRibbon {
  scrollbar-width: none !important;
}

html:root[data-theme] body #step-edit #editorRibbon::-webkit-scrollbar {
  display: none !important;
}

html:root[data-theme] body #step-edit #editorRibbon > .ribbon-group {
  border-right: 1px solid #e7eaf1 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html:root[data-theme] body #step-edit #editorRibbon > .ribbon-group:last-child {
  border-right: 0 !important;
}

html:root[data-theme] body #step-edit #editorRibbon button.active {
  border-color: rgba(22 119 255, .16) !important;
  background: rgb(22 119 255 / 11%) !important;
  color: #0b55d4 !important;
}

html:root[data-theme] body #step-edit > .thumb-panel .workflow-thumb-copy strong {
  color: #f7f8ff !important;
  font-weight: 720 !important;
}

html:root[data-theme] body #step-edit > .thumb-panel .workflow-thumb-copy small {
  color: #aeb8d8 !important;
  font-weight: 560 !important;
}

html:root[data-theme] body #step-edit > .thumb-panel .workflow-thumb-image {
  border-color: rgba(183, 193, 234, .22) !important;
  background: rgba(255, 255, 255, .055) !important;
  box-shadow: 0 8px 20px rgba(4, 8, 28, .18) !important;
}

html:root[data-theme] body #step-edit > .thumb-panel .thumb.active .workflow-thumb-image {
  border-color: rgba(61 150 255, .78) !important;
  box-shadow: 0 0 0 2px rgba(61 150 255, .22), 0 10px 24px rgba(4, 8, 28, .22) !important;
}

html:root[data-theme] body #step-edit .design-status-badge {
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 720 !important;
  letter-spacing: .01em !important;
}

html:root[data-theme] body #step-edit .design-ai-command-panel > header {
  padding-bottom: 2px !important;
}

html:root[data-theme] body #step-edit .design-ai-command-icon {
  border-radius: 9px !important;
  background: #111936 !important;
  color: #fff !important;
  box-shadow: 0 5px 12px rgba(17, 25, 54, .16) !important;
}

html:root[data-theme] body #step-edit .design-ai-command-panel textarea {
  min-height: 84px !important;
  line-height: 1.6 !important;
  resize: vertical !important;
}

html:root[data-theme] body #step-edit .design-ai-primary-actions {
  gap: 8px !important;
}

html:root[data-theme] body #step-edit .design-ai-primary-actions > button {
  min-height: 36px !important;
}

html:root[data-theme] body #step-edit .design-reference-picker-list > button {
  border-radius: 8px !important;
}

html:root[data-theme] body #step-edit .design-reference-picker-list > button > img {
  border-radius: 5px !important;
}

html:root[data-theme] body #step-edit .design-preview-inspector:has(> .design-stage-footer:empty) {
  grid-template-rows: auto auto auto minmax(0, 1fr) 3px !important;
}

html:root[data-theme] body #step-edit .design-stage-footer:empty {
  display: block !important;
  min-height: 3px !important;
  height: 3px !important;
  border: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

html:root[data-theme] body #step-edit .design-preview-scroll {
  padding-bottom: 18px !important;
  scrollbar-width: thin !important;
}

html:root[data-theme] body #step-edit :is(.thumbnail-list, .design-preview-scroll, .inspector-properties-view)::-webkit-scrollbar {
  width: 7px !important;
  height: 7px !important;
}

html:root[data-theme] body #step-edit :is(.thumbnail-list, .design-preview-scroll, .inspector-properties-view)::-webkit-scrollbar-thumb {
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background: #aeb6c8 !important;
  background-clip: padding-box !important;
}

html:root[data-theme] body #step-edit > .thumb-panel .thumbnail-list::-webkit-scrollbar-thumb {
  background: #35506f !important;
  background-clip: padding-box !important;
}

@media (max-width: 1120px) and (min-width: 981px) {
  body:not([data-design-category-group="presentation"]) #step-edit.editor-layout {
    grid-template-rows: 118px minmax(0, 1fr) !important;
  }

  body:not([data-design-category-group="presentation"]) #step-edit > .editor-top-ribbon {
    height: 118px !important;
    max-height: 118px !important;
  }

  body:not([data-design-category-group="presentation"]) #step-edit > .editor-top-ribbon #designCategoryToolbar {
    height: 72px !important;
    min-height: 72px !important;
    gap: 10px !important;
    padding-block: 6px !important;
  }

  body:not([data-design-category-group="presentation"]) #step-edit > .editor-top-ribbon #editorRibbon {
    height: 45px !important;
    max-height: 45px !important;
    padding-block: 5px !important;
  }

  body:not([data-design-category-group="presentation"]) #step-edit > .inspector,
  body:not([data-design-category-group="presentation"]) #step-edit > .editor-panel-resizer {
    top: 118px !important;
  }

  html:root[data-theme] body #step-edit .design-category-toolbar-main p {
    display: none !important;
  }

  html:root[data-theme] body #step-edit .design-preview-inspector > header {
    padding: 10px 12px !important;
  }
}

/* Conversation workspace fills the area below the persistent app header and
   document tabs. “工作” restores the regular home. */
@media (min-width: 1024px) {
  html:root[data-theme] body[data-project-home-mode="chat"] #step-create.project-start-screen {
    position: relative !important;
    z-index: auto !important;
    inset: 94px 0 0 !important;
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: none !important;
    height: calc(100vh - 94px) !important;
    height: calc(100dvh - 94px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #0c0d12 !important;
    box-shadow: none !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #step-create > .project-home-shell {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-nav {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    width: 220px !important;
    min-width: 220px !important;
    height: 100% !important;
    padding: 28px 16px 20px !important;
    overflow: hidden !important;
    visibility: visible !important;
    pointer-events: auto !important;
    border-right: 1px solid rgba(255, 255, 255, .08) !important;
    background: #191a1e !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] .project-home-content {
    position: relative !important;
    z-index: auto !important;
    inset: 0 0 0 220px !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 50% -18%, rgba(22 119 255, .13), transparent 37%),
      #0c0d12 !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] .project-home-mode-switch {
    position: absolute !important;
    z-index: 40 !important;
    top: 12px !important;
    right: auto !important;
    left: 50% !important;
    width: 216px !important;
    height: 44px !important;
    transform: translateX(-50%) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    border-radius: 11px !important;
    background: rgba(28, 29, 35, .92) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28) !important;
    backdrop-filter: blur(20px) saturate(130%) !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] .project-home-mode-switch button {
    min-height: 36px !important;
    border-radius: 8px !important;
    color: #9ea3b1 !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] .project-home-mode-switch button.active {
    background: #11131a !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .28) !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] .project-home-chat {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    display: flex !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 66px 18px 10px !important;
    overflow: hidden !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] .project-home-chat-intro {
    flex-basis: min(28%, 180px) !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost :is(
    .assistant-messages,
    .assistant-tasks,
    .assistant-pdf-redesign,
    .assistant-recommendations,
    .assistant-service-notice,
    .assistant-voice-status,
    .assistant-execution-controls,
    .assistant-suggestions,
    .assistant-attachments
  ) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-messages {
    padding: 12px 14px 10px !important;
    scrollbar-gutter: stable !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-composer {
    box-sizing: border-box !important;
    width: calc(100% - 28px) !important;
    max-width: none !important;
    min-height: 104px !important;
    margin: 8px 14px 0 !important;
    border-color: rgba(105, 140, 202, .52) !important;
    border-radius: 12px !important;
    background: rgba(27, 28, 34, .97) !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .32) !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-composer textarea {
    min-height: 48px !important;
    font-size: 14px !important;
  }

  html:root[data-theme] body[data-active-step="create"][data-project-home-mode="chat"] :is(#assistantFloatLauncher, #luxinVoiceLauncher) {
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* The home route owns the second shell row, so conversation mode must begin
   directly below the 56px product header. The former 94px offset assumed an
   editor document-tab row and left a visible empty strip (black in light
   mode) under the header. */
@media (min-width: 1024px) {
  html:root[data-theme] body[data-project-home-mode="chat"] #step-create.project-start-screen {
    inset: 56px 0 0 !important;
    height: calc(100vh - 56px) !important;
    height: calc(100dvh - 56px) !important;
  }

  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create.project-start-screen,
  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] .project-home-content {
    background: #ffffff !important;
    background-image: none !important;
  }

  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] .project-home-nav {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-right-color: rgb(17 55 105 / 12%) !important;
  }

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] .project-home-chat {
    background: #ffffff !important;
    background-image: none !important;
  }

  /* Home and conversation modes are a separate product surface from the
     editor. Keep editor-only rows and controls out of the composition so the
     left navigation, primary content, and assistant have a predictable grid. */
  html:root[data-theme] body[data-active-step="create"] #editorWorkflowNav,
  html:root[data-theme] body[data-active-step="create"] #documentTabsBar,
  html:root[data-theme] body[data-active-step="create"] #fileCenterBtn {
    display: none !important;
  }

  html:root[data-theme] body[data-active-step="create"] .app-shell {
    grid-template-rows: 56px 0 minmax(0, 1fr) !important;
  }

  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create.project-start-screen,
  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create > .project-home-shell,
  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] .project-home-content,
  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] .project-home-chat,
  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #projectHomeAssistantHost,
  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded,
  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-messages {
    color: var(--theme-text) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
  }

  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] .project-home-mode-switch {
    border-color: var(--theme-line) !important;
    background: var(--theme-panel-soft) !important;
    box-shadow: 0 10px 24px rgb(31 91 161 / 10%) !important;
  }

  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] .project-home-mode-switch button.active {
    border-color: #1677ff !important;
    background: #ffffff !important;
    color: #1677ff !important;
    box-shadow: 0 3px 10px rgb(31 91 161 / 12%) !important;
  }

  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-composer {
    color: var(--theme-text) !important;
    border-color: var(--theme-line-strong) !important;
    background: var(--theme-panel-soft) !important;
    background-color: var(--theme-panel-soft) !important;
    background-image: none !important;
    box-shadow: 0 12px 28px rgb(31 91 161 / 10%) !important;
  }

  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-composer-hint,
  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-composer :is(select, button) {
    color: var(--theme-muted) !important;
  }
}

@media (min-width: 1440px) {
  html:root[data-theme] body[data-project-home-mode="chat"] .project-home-chat {
    padding-inline: 26px !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-messages {
    padding-inline: 20px !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-composer {
    width: calc(100% - 40px) !important;
    margin-inline: 20px !important;
  }
}

/* Wide conversation task cards: the assistant originally rendered these for
   a narrow drawer. Reflow the task details so a full-width workspace does not
   leave all useful information crowded into the first column. */
@media (min-width: 1024px) {
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-tasks {
    display: block !important;
    max-height: min(52vh, 460px) !important;
    min-height: 0 !important;
    padding: 10px 14px 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-task-overview {
    margin-bottom: 10px !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-task-card + .assistant-task-card {
    margin-top: 10px !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-task-card {
    position: relative !important;
    display: flex !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 16px 18px !important;
    overflow: visible !important;
    border-radius: 12px !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-task-card > * {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-task-card > header,
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-task-card > footer {
    gap: 16px !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-task-card > header strong {
    white-space: normal !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-task-card > p {
    max-width: none !important;
    line-height: 1.6 !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-task-card > ol {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px 18px !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-task-card > ol > li {
    min-height: 30px !important;
    align-items: center !important;
    padding: 6px 8px !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, .025) !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-stage-strip {
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 4px 2px !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-stage-strip > span {
    justify-content: center !important;
    gap: 7px !important;
    font-size: 11px !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-stage-strip > span > b {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-stage-preview {
    display: flex !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-top: 4px !important;
    overflow: visible !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-copy-mode {
    width: min(100%, 680px) !important;
    justify-self: center !important;
    gap: 8px !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-copy-mode button {
    min-height: 38px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-stage-preview > ul {
    display: grid !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-stage-preview > ul > li {
    position: relative !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 58px !important;
    max-height: none !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, .065) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .025) !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-stage-preview li strong,
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-stage-preview li small {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-stage-preview li strong {
    font-size: 11px !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-stage-preview li small,
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-stage-preview > small {
    font-size: 10px !important;
    line-height: 1.6 !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-stage-actions {
    gap: 8px !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-stage-actions > button {
    min-height: 34px !important;
    padding-inline: 12px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost .assistant-task-card > footer {
    min-height: 38px !important;
    margin-top: 2px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, .07) !important;
  }
}

/* Final monochrome-blue theme contract. Keep both themes on the same visual
   system: black/blue in dark mode, white/blue in light mode. */
:root {
  --wm-brand: #1677ff;
  --wm-brand-strong: #0b5ed7;
  --wm-brand-soft: rgb(22 119 255 / 14%);
  --wm-cyan: #3d96ff;
  --wm-success: #1677ff;
  --wm-warning: #1677ff;
  --v2-blue: #1677ff;
  --v2-blue-hover: #3d96ff;
  --v2-blue-soft: rgb(22 119 255 / 14%);
  --af-accent: #1677ff;
  --af-accent-hover: #3d96ff;
  --af-accent-soft: rgb(22 119 255 / 14%);
  --du-primary: #1677ff;
  --du-primary-hover: #3d96ff;
  --du-primary-soft: rgb(22 119 255 / 14%);
  --store-blue: #1677ff;
  --store-blue-hover: #3d96ff;
  --store-blue-soft: rgb(22 119 255 / 14%);
  --apple-ui-blue: #1677ff;
  --apple-ui-blue-strong: #3d96ff;
  --apple-ui-blue-soft: rgb(22 119 255 / 14%);
  --ms-orange: #1677ff;
  --ui-amber: #1677ff;
  --v2-amber: #1677ff;
  --aw-orange: #1677ff;
  --aw-orange-soft: rgb(22 119 255 / 14%);
}

:root:not([data-theme="dark"]) {
  --theme-bg: #f7f9fc;
  --theme-chrome: #ffffff;
  --theme-panel: #ffffff;
  --theme-panel-soft: #f3f7ff;
  --theme-panel-raised: #ffffff;
  --theme-text: #101828;
  --theme-muted: #52627a;
  --theme-faint: #7d8da6;
  --theme-line: rgb(31 91 161 / 16%);
  --theme-line-strong: rgb(31 91 161 / 26%);
  --store-bg: #f7f9fc;
  --store-card: #ffffff;
  --store-card-soft: #f3f7ff;
  --store-text: #101828;
  --store-secondary: #52627a;
  --store-tertiary: #7d8da6;
  --store-line: rgb(31 91 161 / 16%);
  --store-line-strong: rgb(31 91 161 / 26%);
}

:root[data-theme="dark"] {
  --theme-bg: #05070b;
  --theme-chrome: #070b12;
  --theme-panel: #0b0f16;
  --theme-panel-soft: #101722;
  --theme-panel-raised: #141c29;
  --theme-text: #f4f7ff;
  --theme-muted: #a5b4cc;
  --theme-faint: #71809a;
  --theme-line: rgb(132 166 214 / 18%);
  --theme-line-strong: rgb(132 166 214 / 30%);
  --store-bg: #05070b;
  --store-card: #0b0f16;
  --store-card-soft: #101722;
  --store-text: #f4f7ff;
  --store-secondary: #a5b4cc;
  --store-tertiary: #71809a;
  --store-line: rgb(132 166 214 / 18%);
  --store-line-strong: rgb(132 166 214 / 30%);
}

html,
body,
body .app-shell,
body .workspace,
body .project-home-content,
body .project-home-chat {
  color: var(--theme-text) !important;
  background: var(--theme-bg) !important;
  background-image: none !important;
}

body .topbar,
body .project-home-nav,
body .assistant-workspace,
body .assistant-drawer,
body .assistant-messages,
body .assistant-composer,
body .assistant-tasks,
body .assistant-pdf-redesign,
body .assistant-context,
body .assistant-service-notice,
body .assistant-voice-status,
body .assistant-execution-controls,
body .project-home-mode-switch,
body .project-home-mode-switch button {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background-color: var(--theme-panel) !important;
  background-image: none !important;
}

body .project-home-nav,
body .topbar {
  background-color: var(--theme-chrome) !important;
}

body :is(.project-home-primary, .primary-btn, .assistant-new-conversation,
  .assistant-send-btn, .assistant-execution-actions button.confirm,
  .project-home-mode-switch button.active) {
  border-color: #1677ff !important;
  background: #1677ff !important;
  color: #ffffff !important;
}

body :is(.project-home-nav-item.active, .assistant-side-tabs button.active,
  .assistant-context-chip.active, .assistant-suggestion:hover,
  .assistant-mode-toggle.active) {
  border-color: rgb(22 119 255 / 42%) !important;
  background: rgb(22 119 255 / 14%) !important;
  color: #1677ff !important;
}

body :is(.project-home-nav-item, .assistant-side-tabs button,
  .assistant-suggestion, .assistant-context-chip, .assistant-composer select,
  .assistant-composer button) {
  color: var(--theme-muted) !important;
  border-color: var(--theme-line) !important;
}

body :is(.project-home-heading h2, .project-home-heading p,
  .assistant-heading h2, .assistant-message-content, .assistant-pdf-redesign strong,
  .assistant-task-card strong, .assistant-composer textarea) {
  color: var(--theme-text) !important;
}

body :is(.project-home-shell, .assistant-generated-result,
  .assistant-generated-image-card, .assistant-message-content,
  .assistant-task-card, .assistant-side-panel) {
  border-color: var(--theme-line) !important;
  background-color: var(--theme-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body :is(.assistant-message.user .assistant-message-content,
  .assistant-message.result .assistant-message-content,
  .assistant-message.assistant .assistant-message-content) {
  border-color: var(--theme-line-strong) !important;
  border-left-color: #1677ff !important;
  background: var(--theme-panel-soft) !important;
}

body :is(.assistant-task-card.completed, .assistant-task-card.failed,
  .assistant-status.success, .assistant-status.warning, .assistant-status.error,
  .assistant-error, .error, .warning, .success) {
  border-color: var(--theme-line-strong) !important;
  background-color: var(--theme-panel-soft) !important;
  color: var(--theme-text) !important;
}

body :is(.assistant-task-progress i, .assistant-task-card.completed .assistant-task-progress i,
  .assistant-task-card.failed .assistant-task-progress i, .assistant-pdf-progress i) {
  background: #1677ff !important;
}

/* Attachments belong to the message that sent them, so the conversation stays
   understandable after the composer is cleared or the history is reloaded. */
.assistant-message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: min(100%, 520px);
  margin-top: 9px;
  white-space: normal;
}

.assistant-message-attachment-image {
  display: block;
  width: min(260px, 100%);
  max-height: 220px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 8px;
  background: rgb(0 0 0 / 12%);
}

.assistant-message-attachment-image img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  background: #ffffff;
}

.assistant-message-attachment-file {
  display: flex;
  min-width: 190px;
  max-width: 320px;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 8px;
  color: inherit;
  background: rgb(0 0 0 / 12%);
  text-decoration: none;
  white-space: normal;
}

.assistant-message-attachment-file > svg,
.assistant-message-attachment-file > i {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.assistant-message-attachment-file span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.assistant-message-attachment-file strong,
.assistant-message-attachment-file small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-message-attachment-file strong { font-size: 11px; }
.assistant-message-attachment-file small { opacity: .72; font-size: 9px; }

.assistant-message.user .assistant-message-attachment-file,
.assistant-message.user .assistant-message-attachment-image { border-color: rgb(255 255 255 / 36%); }

/* The editor has its own surface rules, so theme the full edit workspace
   explicitly instead of relying only on shared color variables. */
:root[data-theme="dark"] body :is(.document-tabs-bar, .editor-top-ribbon,
  #step-edit, #step-edit .editor-top-ribbon, #step-edit .inspector,
  #step-edit .inspector-assistant-view, #step-edit .inspector-panel,
  #step-edit .inspector-section, #step-edit .editor-notes-dock,
  #step-edit .speaker-notes-panel, #step-edit .office-status-bar) {
  color: #f4f7ff !important;
  border-color: rgb(132 166 214 / 22%) !important;
  background: #0b0f16 !important;
  background-image: none !important;
}

:root[data-theme="dark"] body :is(#step-edit .canvas-area,
  #step-edit .office-canvas-shell, #step-edit .office-canvas-body,
  #step-edit .slide-stage, #step-edit .slide-pasteboard) {
  color: #f4f7ff !important;
  background-color: #05070b !important;
  background-image: linear-gradient(rgb(36 82 145 / 12%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(36 82 145 / 12%) 1px, transparent 1px) !important;
}

:root[data-theme="dark"] body :is(#step-edit .editor-top-ribbon button,
  #step-edit .editor-top-ribbon select, #step-edit .editor-top-ribbon input,
  #step-edit .inspector button, #step-edit .inspector select,
  #step-edit .inspector input, #step-edit .inspector textarea,
  #step-edit .office-status-bar button) {
  color: #dbe8ff !important;
  border-color: rgb(132 166 214 / 24%) !important;
  background: #101722 !important;
}

:root[data-theme="dark"] body :is(#step-edit .editor-top-ribbon button.active,
  #step-edit .editor-top-ribbon button[aria-pressed="true"],
  #step-edit .inspector .active, #step-edit .inspector [aria-selected="true"],
  #step-edit .inspector .primary-btn) {
  border-color: #1677ff !important;
  background: rgb(22 119 255 / 18%) !important;
  color: #5da4ff !important;
}

:root[data-theme="dark"] body :is(#step-edit .thumb-panel,
  #step-edit .thumb-panel .panel-head, #step-edit .thumbnail-list,
  #step-edit .thumb, #step-edit .slide-page-actions) {
  color: #dbe8ff !important;
  border-color: rgb(132 166 214 / 22%) !important;
  background: #0b0f16 !important;
  background-image: none !important;
}

:root[data-theme="dark"] body :is(#step-edit .thumb.selected,
  #step-edit .thumb.active, #step-edit .thumbnail-item.selected) {
  border-color: #1677ff !important;
  box-shadow: inset 0 0 0 1px #1677ff, 0 0 0 2px rgb(22 119 255 / 18%) !important;
}

:root:not([data-theme="dark"]) body :is(.document-tabs-bar, .editor-top-ribbon,
  #step-edit, #step-edit .editor-top-ribbon, #step-edit .inspector,
  #step-edit .inspector-assistant-view, #step-edit .inspector-panel,
  #step-edit .inspector-section, #step-edit .editor-notes-dock,
  #step-edit .speaker-notes-panel, #step-edit .office-status-bar,
  #step-edit .canvas-area, #step-edit .office-canvas-shell,
  #step-edit .office-canvas-body, #step-edit .slide-stage,
  #step-edit .slide-pasteboard, #step-edit .thumb-panel,
  #step-edit .thumb-panel .panel-head, #step-edit .thumbnail-list,
  #step-edit .thumb, #step-edit .slide-page-actions) {
  color: #101828 !important;
  border-color: rgb(31 91 161 / 16%) !important;
  background: #ffffff !important;
  background-image: none !important;
}

:root:not([data-theme="dark"]) body :is(#step-edit .canvas-area,
  #step-edit .office-canvas-shell, #step-edit .office-canvas-body,
  #step-edit .slide-stage, #step-edit .slide-pasteboard) {
  background-color: #f3f7ff !important;
  background-image: linear-gradient(rgb(22 119 255 / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(22 119 255 / 8%) 1px, transparent 1px) !important;
}

:root:not([data-theme="dark"]) body :is(#step-edit .editor-top-ribbon button,
  #step-edit .editor-top-ribbon select, #step-edit .editor-top-ribbon input,
  #step-edit .inspector button, #step-edit .inspector select,
  #step-edit .inspector input, #step-edit .inspector textarea,
  #step-edit .office-status-bar button) {
  color: #20314b !important;
  border-color: rgb(31 91 161 / 18%) !important;
  background: #f3f7ff !important;
}

:root:not([data-theme="dark"]) body :is(#step-edit .editor-top-ribbon button.active,
  #step-edit .editor-top-ribbon button[aria-pressed="true"],
  #step-edit .inspector .active, #step-edit .inspector [aria-selected="true"],
  #step-edit .inspector .primary-btn, #step-edit .thumb.selected,
  #step-edit .thumb.active, #step-edit .thumbnail-item.selected) {
  border-color: #1677ff !important;
  background: rgb(22 119 255 / 12%) !important;
  color: #0b5ed7 !important;
}

/* Workflow tabs and legacy state badges use purple/green literals. */
body :is(#editorWorkflowNav .active, #editorWorkflowNav [aria-selected="true"],
  .editor-workflow-action.active, .preproject-workflow-path .active,
  .preproject-workflow-path span.active) {
  border-color: #1677ff !important;
  background: #1677ff !important;
  color: #ffffff !important;
}

body :is(.assistant-turn-badge, .assistant-history-task-label,
  .assistant-status, .assistant-mark, .assistant-voice-pulse) {
  border-color: rgb(22 119 255 / 34%) !important;
  background: rgb(22 119 255 / 14%) !important;
  color: #4d9bff !important;
}

/* Final theme lock: these selectors intentionally mirror the legacy editor
   rules so the requested black/blue and white/blue palettes win reliably. */
html:root[data-theme="dark"] body,
html:root[data-theme="dark"] body .app-shell,
html:root[data-theme="dark"] body .workspace,
html:root[data-theme="dark"] body #step-edit.editor-layout {
  color: #f4f7ff !important;
  background: #05070b !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body .app-shell > .topbar,
html:root[data-theme="dark"] body #documentTabsBar.document-tabs-bar,
html:root[data-theme="dark"] body #step-edit > .editor-top-ribbon,
html:root[data-theme="dark"] body #step-edit > .thumb-panel,
html:root[data-theme="dark"] body #step-edit > .inspector,
html:root[data-theme="dark"] body #step-edit .office-status-bar {
  color: #f4f7ff !important;
  border-color: rgb(75 139 214 / 30%) !important;
  background: #071a33 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body #step-edit > .canvas-area,
html:root[data-theme="dark"] body #step-edit .office-canvas-shell,
html:root[data-theme="dark"] body #step-edit .office-canvas-body,
html:root[data-theme="dark"] body #step-edit .slide-stage,
html:root[data-theme="dark"] body #step-edit .slide-pasteboard {
  color: #dbe8ff !important;
  background: #05070b !important;
  background-image: linear-gradient(rgb(22 119 255 / 12%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(22 119 255 / 12%) 1px, transparent 1px) !important;
}

html:root[data-theme="dark"] body #step-edit > .editor-top-ribbon #editorRibbon,
html:root[data-theme="dark"] body #step-edit #editorRibbon > .ribbon-group,
html:root[data-theme="dark"] body #step-edit #editorRibbon .canvas-view-switch,
html:root[data-theme="dark"] body #step-edit .ribbon-group {
  color: #dbe8ff !important;
  border-color: rgb(75 139 214 / 28%) !important;
  background: #0b2a4f !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body #step-edit > .editor-top-ribbon :is(button, input, select):not(#designCategoryToolbar *),
html:root[data-theme="dark"] body #step-edit .editor-ribbon :is(button, input, select),
html:root[data-theme="dark"] body #step-edit > .inspector :is(button, input, select, textarea),
html:root[data-theme="dark"] body #step-edit .office-status-bar :is(button, input, select) {
  color: #dbe8ff !important;
  border-color: rgb(75 139 214 / 34%) !important;
  background: #0b2a4f !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body #step-edit > .editor-top-ribbon :is(button.active, button[aria-pressed="true"]),
html:root[data-theme="dark"] body #step-edit .inspector :is(.active, [aria-selected="true"]),
html:root[data-theme="dark"] body #step-edit :is(.primary-btn, button.recommended, [data-category-action="generate"], [data-design-smart-action="generate-range"]),
html:root[data-theme="dark"] body .topbar #editorWorkflowNav > .editor-workflow-action.active {
  color: #ffffff !important;
  border-color: #1677ff !important;
  background: #1677ff !important;
  background-image: none !important;
  box-shadow: 0 6px 18px rgb(22 119 255 / 28%) !important;
}

html:root[data-theme="dark"] body #step-edit > .thumb-panel :is(.panel-head, .editor-left-tabs, .editor-left-actions),
html:root[data-theme="dark"] body #step-edit > .thumb-panel :is(.thumbnail-list, .thumb, .slide-page-actions),
html:root[data-theme="dark"] body #step-edit > .inspector :is(.panel-head, .inspector-view-tabs, .design-preview-inspector, .design-candidate-panel, .design-smart-operations, .design-control-disclosure, .inspector-tool-section) {
  color: #dbe8ff !important;
  border-color: rgb(75 139 214 / 28%) !important;
  background: #071a33 !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body #step-edit > .thumb-panel :is(.thumb.active, .thumb.selected, .thumbnail-item.selected),
html:root[data-theme="dark"] body #step-edit > .thumb-panel #addSlideBtn {
  color: #ffffff !important;
  border-color: #1677ff !important;
  background: rgb(22 119 255 / 20%) !important;
}

html:root:not([data-theme="dark"]) body,
html:root:not([data-theme="dark"]) body .app-shell,
html:root:not([data-theme="dark"]) body .workspace,
html:root:not([data-theme="dark"]) body #step-edit.editor-layout {
  color: #10213b !important;
  background: #ffffff !important;
  background-image: none !important;
}

html:root:not([data-theme="dark"]) body .app-shell > .topbar,
html:root:not([data-theme="dark"]) body #documentTabsBar.document-tabs-bar,
html:root:not([data-theme="dark"]) body #step-edit > .editor-top-ribbon,
html:root:not([data-theme="dark"]) body #step-edit > .thumb-panel,
html:root:not([data-theme="dark"]) body #step-edit > .inspector,
html:root:not([data-theme="dark"]) body #step-edit .office-status-bar {
  color: #10213b !important;
  border-color: rgb(22 119 255 / 20%) !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root:not([data-theme="dark"]) body #step-edit > .canvas-area,
html:root:not([data-theme="dark"]) body #step-edit .office-canvas-shell,
html:root:not([data-theme="dark"]) body #step-edit .office-canvas-body,
html:root:not([data-theme="dark"]) body #step-edit .slide-stage,
html:root:not([data-theme="dark"]) body #step-edit .slide-pasteboard {
  color: #20314b !important;
  background: #f3f7ff !important;
  background-image: linear-gradient(rgb(22 119 255 / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(22 119 255 / 8%) 1px, transparent 1px) !important;
}

html:root:not([data-theme="dark"]) body #step-edit > .editor-top-ribbon #editorRibbon,
html:root:not([data-theme="dark"]) body #step-edit #editorRibbon > .ribbon-group,
html:root:not([data-theme="dark"]) body #step-edit #editorRibbon .canvas-view-switch,
html:root:not([data-theme="dark"]) body #step-edit .ribbon-group {
  color: #20314b !important;
  border-color: rgb(22 119 255 / 18%) !important;
  background: #eef6ff !important;
  background-image: none !important;
}

html:root:not([data-theme="dark"]) body #step-edit > .editor-top-ribbon :is(button, input, select):not(#designCategoryToolbar *),
html:root:not([data-theme="dark"]) body #step-edit .editor-ribbon :is(button, input, select),
html:root:not([data-theme="dark"]) body #step-edit > .inspector :is(button, input, select, textarea),
html:root:not([data-theme="dark"]) body #step-edit .office-status-bar :is(button, input, select) {
  color: #20314b !important;
  border-color: rgb(22 119 255 / 22%) !important;
  background: #eef6ff !important;
  background-image: none !important;
}

html:root:not([data-theme="dark"]) body #step-edit > .editor-top-ribbon :is(button.active, button[aria-pressed="true"]),
html:root:not([data-theme="dark"]) body #step-edit .inspector :is(.active, [aria-selected="true"]),
html:root:not([data-theme="dark"]) body #step-edit :is(.primary-btn, button.recommended, [data-category-action="generate"], [data-design-smart-action="generate-range"]),
html:root:not([data-theme="dark"]) body .topbar #editorWorkflowNav > .editor-workflow-action.active {
  color: #ffffff !important;
  border-color: #1677ff !important;
  background: #1677ff !important;
  background-image: none !important;
  box-shadow: 0 6px 18px rgb(22 119 255 / 22%) !important;
}

html:root:not([data-theme="dark"]) body #step-edit > .canvas-area,
html:root:not([data-theme="dark"]) body #step-edit > .canvas-area.canvas-area,
html:root:not([data-theme="dark"]) body #step-edit .office-canvas-shell,
html:root:not([data-theme="dark"]) body #step-edit .office-canvas-body,
html:root:not([data-theme="dark"]) body #step-edit .slide-stage,
html:root:not([data-theme="dark"]) body #step-edit .slide-pasteboard {
  background-color: #f3f7ff !important;
  background-image: linear-gradient(rgb(22 119 255 / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(22 119 255 / 8%) 1px, transparent 1px) !important;
}

html:root[data-theme="dark"] body :is(.document-tab.active, .design-category-toolbar-icon,
  .design-preview-inspector-icon, .fluent-icon-shell, .fluent-icon,
  #step-edit .ribbon-tool.active, #step-edit .editor-ribbon button.active) {
  border-color: var(--neutral-accent) !important;
  color: var(--neutral-text) !important;
  background-color: var(--neutral-accent-soft) !important;
  background-image: none !important;
}

html:root:not([data-theme="dark"]) body :is(.document-tab.active, .design-category-toolbar-icon,
  .design-preview-inspector-icon, .fluent-icon-shell, .fluent-icon,
  #step-edit .ribbon-tool.active, #step-edit .editor-ribbon button.active) {
  border-color: var(--neutral-accent) !important;
  color: var(--neutral-text) !important;
  background-color: var(--neutral-accent-soft) !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body :is(.project-card, .smart-create-composer),
html:root:not([data-theme="dark"]) body :is(.project-card, .smart-create-composer) {
  border-color: rgb(22 119 255 / 22%) !important;
}

html:root[data-theme="dark"] body #step-edit > .thumb-panel :is(.thumb, .thumb.active, .thumb.selected),
html:root:not([data-theme="dark"]) body #step-edit > .thumb-panel :is(.thumb, .thumb.active, .thumb.selected) {
  border-color: #1677ff !important;
}

html:root[data-theme="dark"] body #step-edit .ribbon-tool.active,
html:root[data-theme="dark"] body #step-edit .thumb.active,
html:root[data-theme="dark"] body #step-edit .thumb.selected {
  color: #ffffff !important;
  border-color: #1677ff !important;
  background: rgb(22 119 255 / 20%) !important;
  background-image: none !important;
}

html:root:not([data-theme="dark"]) body #step-edit .ribbon-tool.active,
html:root:not([data-theme="dark"]) body #step-edit .thumb.active,
html:root:not([data-theme="dark"]) body #step-edit .thumb.selected {
  color: #0b5ed7 !important;
  border-color: #1677ff !important;
  background: rgb(22 119 255 / 12%) !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body #step-edit > .thumb-panel .thumb.active,
html:root[data-theme="dark"] body #step-edit > .thumb-panel .thumb.selected,
html:root:not([data-theme="dark"]) body #step-edit > .thumb-panel .thumb.active,
html:root:not([data-theme="dark"]) body #step-edit > .thumb-panel .thumb.selected {
  color: #0b5ed7 !important;
  border-color: #1677ff !important;
  background: rgb(22 119 255 / 12%) !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body #step-edit > .editor-top-ribbon #editorRibbon .ribbon-tool.active,
html:root:not([data-theme="dark"]) body #step-edit > .editor-top-ribbon #editorRibbon .ribbon-tool.active {
  color: var(--neutral-text) !important;
  border-color: var(--neutral-accent) !important;
  background: var(--neutral-accent-soft) !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body .topbar > #editorWorkflowNav > #designWorkflowBtn.editor-workflow-action.active,
html:root:not([data-theme="dark"]) body .topbar > #editorWorkflowNav > #designWorkflowBtn.editor-workflow-action.active,
html:root[data-theme="dark"] body #step-edit > .thumb-panel .editor-left-tabs button.active,
html:root:not([data-theme="dark"]) body #step-edit > .thumb-panel .editor-left-tabs button.active,
html:root[data-theme="dark"] body #step-edit > .editor-top-ribbon #editorRibbon #canvasViewSwitch > button.active,
html:root:not([data-theme="dark"]) body #step-edit > .editor-top-ribbon #editorRibbon #canvasViewSwitch > button.active,
html:root[data-theme="dark"] body #step-edit > #editorToolRail.editor-tool-rail > button.active,
html:root:not([data-theme="dark"]) body #step-edit > #editorToolRail.editor-tool-rail > button.active {
  color: #ffffff !important;
  border-color: #1677ff !important;
  background: #1677ff !important;
  background-image: none !important;
  box-shadow: 0 6px 18px rgb(22 119 255 / 24%) !important;
}

html:root[data-theme="dark"] body :is(button.primary-btn, button.primary, #createProjectBtn,
  .assistant-generated-result button.primary, .smart-create-target-menu button.active,
  .editable-workflow-filters button.active, .style-catalog-solution-switch button.active),
html:root:not([data-theme="dark"]) body :is(button.primary-btn, button.primary, #createProjectBtn,
  .assistant-generated-result button.primary, .smart-create-target-menu button.active,
  .editable-workflow-filters button.active, .style-catalog-solution-switch button.active) {
  color: #ffffff !important;
  border-color: #1677ff !important;
  background: #1677ff !important;
  background-image: none !important;
  box-shadow: 0 6px 18px rgb(22 119 255 / 24%) !important;
}

html:root[data-theme="dark"] body :is(.brand-copy span, #luxinVoiceLauncher, #licensePoints,
  .topbar-utility-action, .assistant-generated-result button, .assistant-new-result),
html:root:not([data-theme="dark"]) body :is(.brand-copy span, #luxinVoiceLauncher, #licensePoints,
  .topbar-utility-action, .assistant-generated-result button, .assistant-new-result) {
  color: #4d9bff !important;
  border-color: rgb(22 119 255 / 32%) !important;
}

html:root[data-theme="dark"] body .smart-create-preference-panel footer button,
html:root:not([data-theme="dark"]) body .smart-create-preference-panel footer button {
  color: #ffffff !important;
  border-color: #1677ff !important;
  background: #1677ff !important;
  background-image: none !important;
}

/* Reference theme v1: deep navy workspace and clean blue-white light mode.
   This layer intentionally supersedes the temporary monochrome treatment. */
:root {
  --ref-blue: #1677ff;
  --ref-blue-hover: #3d96ff;
  --ref-blue-deep: #0b55d4;
  --ref-blue-soft: rgb(22 119 255 / 16%);
  --ref-blue-glow: rgb(22 119 255 / 26%);
}

:root:not([data-theme="dark"]) {
  --theme-bg: #f4f8ff;
  --theme-chrome: #ffffff;
  --theme-panel: #ffffff;
  --theme-panel-soft: #eef5ff;
  --theme-panel-raised: #f8fbff;
  --theme-text: #0b1830;
  --theme-muted: #5f708a;
  --theme-faint: #8493aa;
  --theme-line: rgb(22 119 255 / 14%);
  --theme-line-strong: rgb(22 119 255 / 28%);
  --wm-brand: var(--ref-blue);
  --wm-brand-strong: var(--ref-blue-deep);
  --wm-brand-soft: var(--ref-blue-soft);
  --v2-blue: var(--ref-blue);
  --v2-blue-hover: var(--ref-blue-hover);
  --v2-blue-soft: var(--ref-blue-soft);
  --v2-bg: var(--theme-bg);
  --v2-panel: var(--theme-panel);
  --v2-panel-soft: var(--theme-panel-soft);
  --v2-panel-strong: var(--theme-panel-raised);
  --v2-text: var(--theme-text);
  --v2-muted: var(--theme-muted);
  --v2-line: var(--theme-line);
  --v2-line-strong: var(--theme-line-strong);
}

:root[data-theme="dark"] {
  --theme-bg: #04101e;
  --theme-chrome: #061423;
  --theme-panel: #0b192a;
  --theme-panel-soft: #101f32;
  --theme-panel-raised: #142740;
  --theme-text: #f3f7ff;
  --theme-muted: #a8b8ce;
  --theme-faint: #74869f;
  --theme-line: rgb(104 155 219 / 18%);
  --theme-line-strong: rgb(104 155 219 / 32%);
  --wm-brand: var(--ref-blue);
  --wm-brand-strong: var(--ref-blue-hover);
  --wm-brand-soft: var(--ref-blue-soft);
  --wm-cyan: #45b5ff;
  --wm-success: #2cc9a6;
  --wm-warning: #f2b84b;
  --v2-blue: var(--ref-blue);
  --v2-blue-hover: var(--ref-blue-hover);
  --v2-blue-soft: var(--ref-blue-soft);
  --v2-bg: var(--theme-bg);
  --v2-panel: var(--theme-panel);
  --v2-panel-soft: var(--theme-panel-soft);
  --v2-panel-strong: var(--theme-panel-raised);
  --v2-text: var(--theme-text);
  --v2-muted: var(--theme-muted);
  --v2-line: var(--theme-line);
  --v2-line-strong: var(--theme-line-strong);
  --af-accent: var(--ref-blue);
  --af-accent-hover: var(--ref-blue-hover);
  --af-accent-soft: var(--ref-blue-soft);
  --du-primary: var(--ref-blue);
  --du-primary-hover: var(--ref-blue-hover);
  --du-primary-soft: var(--ref-blue-soft);
  --store-blue: var(--ref-blue);
  --store-blue-hover: var(--ref-blue-hover);
  --store-blue-soft: var(--ref-blue-soft);
  --glass-border: var(--theme-line);
  --glass-surface: var(--theme-panel);
  --glass-surface-strong: var(--theme-panel-raised);
  --glass-highlight: inset 0 1px rgb(255 255 255 / 4%);
  --glass-sheen: none;
}

html:root[data-theme="dark"] body,
html:root[data-theme="dark"] body .app-shell,
html:root[data-theme="dark"] body .workspace,
html:root[data-theme="dark"] body #step-edit.editor-layout,
html:root[data-theme="dark"] body #step-edit > .canvas-area {
  color: var(--theme-text) !important;
  background: var(--theme-bg) !important;
  background-color: var(--theme-bg) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
}

html:root:not([data-theme="dark"]) body,
html:root:not([data-theme="dark"]) body .app-shell,
html:root:not([data-theme="dark"]) body .workspace,
html:root:not([data-theme="dark"]) body #step-edit.editor-layout,
html:root:not([data-theme="dark"]) body #step-edit > .canvas-area {
  color: var(--theme-text) !important;
  background: var(--theme-bg) !important;
  background-color: var(--theme-bg) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
}

html:root[data-theme="dark"] body :is(
  .topbar,
  #documentTabsBar,
  #step-edit > .editor-top-ribbon,
  #step-edit > .canvas-area .office-status-bar,
  #step-edit > .canvas-area .editor-notes-dock
) {
  color: var(--theme-text) !important;
  background: var(--theme-chrome) !important;
  background-color: var(--theme-chrome) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
  box-shadow: inset 0 -1px var(--theme-line) !important;
}

html:root:not([data-theme="dark"]) body :is(
  .topbar,
  #documentTabsBar,
  #step-edit > .editor-top-ribbon,
  #step-edit > .canvas-area .office-status-bar,
  #step-edit > .canvas-area .editor-notes-dock
) {
  color: var(--theme-text) !important;
  background: var(--theme-chrome) !important;
  background-color: var(--theme-chrome) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
  box-shadow: inset 0 -1px var(--theme-line) !important;
}

html:root[data-theme="dark"] body :is(
  #step-edit > .thumb-panel,
  #step-edit > .inspector,
  #step-edit > .editor-tool-rail,
  #projectHomeAssistantHost,
  #projectHubView,
  #fileCenterView,
  #projectHomeConversationNav,
  .panel,
  .assistant-drawer,
  .assistant-workspace,
  .file-center-shell,
  .file-center-content,
  .project-home-card,
  .project-card,
  .smart-create-composer,
  .smart-create-spec-panel,
  .smart-create-preference-panel,
  .style-library-dialog,
  .layout-library-dialog,
  .settings-window
) {
  color: var(--theme-text) !important;
  background: var(--theme-panel) !important;
  background-color: var(--theme-panel) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
  box-shadow: 0 12px 34px rgb(0 5 14 / 22%) !important;
}

html:root:not([data-theme="dark"]) body :is(
  #step-edit > .thumb-panel,
  #step-edit > .inspector,
  #step-edit > .editor-tool-rail,
  #projectHomeAssistantHost,
  #projectHubView,
  #fileCenterView,
  #projectHomeConversationNav,
  .panel,
  .assistant-drawer,
  .assistant-workspace,
  .file-center-shell,
  .file-center-content,
  .project-home-card,
  .project-card,
  .smart-create-composer,
  .smart-create-spec-panel,
  .smart-create-preference-panel,
  .style-library-dialog,
  .layout-library-dialog,
  .settings-window
) {
  color: var(--theme-text) !important;
  background: var(--theme-panel) !important;
  background-color: var(--theme-panel) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
  box-shadow: 0 12px 34px rgb(31 78 145 / 8%) !important;
}

html:root[data-theme="dark"] body :is(
  .topbar *,
  #documentTabsBar *,
  #step-edit > .editor-top-ribbon *,
  #step-edit > .thumb-panel *:not(:where(.mini-slide, .mini-slide *)),
  #step-edit > .inspector *,
  #step-edit > .editor-tool-rail *,
  #step-edit > .canvas-area .office-status-bar *,
  #step-edit > .canvas-area .editor-notes-dock *,
  #projectHomeAssistantHost *,
  #projectHubView *,
  #fileCenterView *,
  #projectHomeConversationNav *
) {
  color: inherit;
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body :is(
  input,
  textarea,
  select,
  .assistant-context,
  .assistant-tasks,
  .assistant-service-notice,
  .assistant-voice-status,
  .assistant-execution-controls,
  .assistant-task-card,
  .assistant-generated-result,
  .design-preview-inspector,
  .design-candidate-panel,
  .design-smart-operations,
  .inspector-tool-section,
  .thumbnail-list .thumb,
  .smart-create-manual,
  .home-style-library,
  .editor-notes-dock .speaker-notes-panel
) {
  color: var(--theme-text) !important;
  background: var(--theme-panel-soft) !important;
  background-color: var(--theme-panel-soft) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
}

html:root:not([data-theme="dark"]) body :is(
  input,
  textarea,
  select,
  .assistant-context,
  .assistant-tasks,
  .assistant-service-notice,
  .assistant-voice-status,
  .assistant-execution-controls,
  .assistant-task-card,
  .assistant-generated-result,
  .design-preview-inspector,
  .design-candidate-panel,
  .design-smart-operations,
  .inspector-tool-section,
  .thumbnail-list .thumb,
  .smart-create-manual,
  .home-style-library,
  .editor-notes-dock .speaker-notes-panel
) {
  color: var(--theme-text) !important;
  background: var(--theme-panel-soft) !important;
  background-color: var(--theme-panel-soft) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
}

html:root[data-theme="dark"] body :is(
  small,
  .muted,
  .helper-text,
  .project-card-meta,
  .project-card-status,
  .assistant-context-meta
) {
  color: var(--theme-muted) !important;
}

html:root:not([data-theme="dark"]) body :is(
  small,
  .muted,
  .helper-text,
  .project-card-meta,
  .project-card-status,
  .assistant-context-meta
) {
  color: var(--theme-muted) !important;
}

html:root[data-theme="dark"] body :is(
  button,
  .ghost-btn,
  .icon-btn,
  .theme-toggle-btn,
  .editor-workflow-action,
  .ribbon-tool,
  .status-bar-btn
) {
  color: var(--theme-muted) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
  box-shadow: none !important;
}

html:root:not([data-theme="dark"]) body :is(
  button,
  .ghost-btn,
  .icon-btn,
  .theme-toggle-btn,
  .editor-workflow-action,
  .ribbon-tool,
  .status-bar-btn
) {
  color: var(--theme-muted) !important;
  background: var(--theme-panel) !important;
  background-color: var(--theme-panel) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body :is(
  button:hover,
  .ghost-btn:hover,
  .icon-btn:hover,
  .ribbon-tool:hover
) {
  color: var(--theme-text) !important;
  background: var(--theme-panel-raised) !important;
  background-color: var(--theme-panel-raised) !important;
  border-color: var(--theme-line-strong) !important;
}

html:root:not([data-theme="dark"]) body :is(
  button:hover,
  .ghost-btn:hover,
  .icon-btn:hover,
  .ribbon-tool:hover
) {
  color: var(--ref-blue-deep) !important;
  background: var(--theme-panel-soft) !important;
  background-color: var(--theme-panel-soft) !important;
  border-color: var(--theme-line-strong) !important;
}

html:root[data-theme="dark"] body :is(
  .primary-btn,
  button.primary,
  button.recommended,
  #createProjectBtn,
  #addSlideBtn,
  .assistant-new-conversation,
  .assistant-send-btn,
  .assistant-execution-controls .confirm,
  [data-category-action="generate"],
  [data-design-smart-action="generate-range"]
),
html:root:not([data-theme="dark"]) body :is(
  .primary-btn,
  button.primary,
  button.recommended,
  #createProjectBtn,
  #addSlideBtn,
  .assistant-new-conversation,
  .assistant-send-btn,
  .assistant-execution-controls .confirm,
  [data-category-action="generate"],
  [data-design-smart-action="generate-range"]
) {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--ref-blue-hover), var(--ref-blue-deep)) !important;
  background-color: var(--ref-blue) !important;
  border-color: var(--ref-blue) !important;
  box-shadow: 0 8px 20px var(--ref-blue-glow) !important;
}

html:root[data-theme="dark"] body :is(
  #editorWorkflowNav .editor-workflow-action.active,
  .editor-workflow-action.active,
  .ribbon-tool.active,
  .editor-left-tabs button.active,
  #canvasViewSwitch > button.active,
  #editorToolRail > button.active,
  .assistant-side-tabs button.active,
  .project-home-nav-item.active,
  .document-tab.active,
  .thumb.active,
  .thumb.selected
),
html:root:not([data-theme="dark"]) body :is(
  #editorWorkflowNav .editor-workflow-action.active,
  .editor-workflow-action.active,
  .ribbon-tool.active,
  .editor-left-tabs button.active,
  #canvasViewSwitch > button.active,
  #editorToolRail > button.active,
  .assistant-side-tabs button.active,
  .project-home-nav-item.active,
  .document-tab.active,
  .thumb.active,
  .thumb.selected
) {
  color: var(--neutral-accent-text) !important;
  background: linear-gradient(135deg, var(--ref-blue-hover), var(--ref-blue-deep)) !important;
  background-color: var(--ref-blue) !important;
  border-color: var(--ref-blue) !important;
  box-shadow: 0 6px 18px var(--ref-blue-glow) !important;
}

html:root[data-theme="dark"] body :is(
  .assistant-turn-badge,
  .assistant-mark,
  .assistant-voice-pulse,
  .smart-create-preference-panel em,
  .smart-create-manual em,
  .home-style-library em,
  .preproject-section-index
),
html:root:not([data-theme="dark"]) body :is(
  .assistant-turn-badge,
  .assistant-mark,
  .assistant-voice-pulse,
  .smart-create-preference-panel em,
  .smart-create-manual em,
  .home-style-library em,
  .preproject-section-index
) {
  color: var(--ref-blue) !important;
  background: var(--ref-blue-soft) !important;
  background-color: var(--ref-blue-soft) !important;
  border-color: rgb(22 119 255 / 34%) !important;
}

html:root[data-theme="dark"] body :is(
  .fluent-icon-shell,
  .fluent-icon,
  svg
) {
  color: currentColor !important;
  background-color: transparent !important;
  background-image: none !important;
  filter: none !important;
}

html:root[data-theme="dark"] body .fluent-icon {
  background-color: currentColor !important;
}

html:root[data-theme="dark"] body :is(
  #workmateLogo,
  .workmate-logo-icon img,
  .brand-logo img,
  .brand-mark img,
  .about-brand img
) {
  filter: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

html:root[data-theme="dark"] body .workmate-wordmark,
html:root:not([data-theme="dark"]) body .workmate-wordmark {
  display: flex !important;
  min-width: 152px !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 4px 10px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body .workmate-logo-icon,
html:root:not([data-theme="dark"]) body .workmate-logo-icon {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
}

html:root[data-theme="dark"] body .workmate-logo-icon img,
html:root:not([data-theme="dark"]) body .workmate-logo-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

html:root[data-theme="dark"] body .workmate-wordmark-copy strong {
  color: #ffffff !important;
}

html:root:not([data-theme="dark"]) body .workmate-wordmark-copy strong {
  color: #081a34 !important;
}

html:root[data-theme="dark"] body .workmate-wordmark-copy small,
html:root:not([data-theme="dark"]) body .workmate-wordmark-copy small {
  color: var(--theme-muted) !important;
}

html:root[data-theme="dark"] body #appShell > header.topbar #projectHomeBtn.workmate-wordmark .workmate-wordmark-copy > small {
  color: #ffffff !important;
}

html:root[data-theme="dark"] body .slide-stage,
html:root[data-theme="dark"] body .slide-pasteboard,
html:root:not([data-theme="dark"]) body .slide-stage,
html:root:not([data-theme="dark"]) body .slide-pasteboard {
  background: var(--theme-bg) !important;
  background-color: var(--theme-bg) !important;
  background-image: none !important;
}

/* The editable artwork keeps its own colors in both themes. */
html:root[data-theme="dark"] body #slideCanvas,
html:root:not([data-theme="dark"]) body #slideCanvas {
  color: initial;
  background-color: #ffffff !important;
  border-color: var(--theme-line-strong) !important;
}

/* Exact selectors for legacy rules with ID-level specificity. */
html:root[data-theme="dark"] body .app-shell > .topbar {
  color: var(--theme-text) !important;
  background: var(--theme-chrome) !important;
  background-color: var(--theme-chrome) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
  box-shadow: 0 1px 0 var(--theme-line) !important;
}

html:root:not([data-theme="dark"]) body .app-shell > .topbar {
  color: var(--theme-text) !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
  box-shadow: 0 1px 0 var(--theme-line) !important;
}

html:root[data-theme="dark"] body .app-shell > .topbar > #editorWorkflowNav,
html:root[data-theme="dark"] body .app-shell > .topbar #editorWorkflowNav {
  background: var(--theme-panel) !important;
  background-color: var(--theme-panel) !important;
  border-color: var(--theme-line) !important;
  box-shadow: inset 0 1px rgb(255 255 255 / 4%) !important;
}

html:root:not([data-theme="dark"]) body .app-shell > .topbar > #editorWorkflowNav,
html:root:not([data-theme="dark"]) body .app-shell > .topbar #editorWorkflowNav {
  background: var(--theme-panel-soft) !important;
  background-color: var(--theme-panel-soft) !important;
  border-color: var(--theme-line) !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body .app-shell > .topbar #editorWorkflowNav > button.editor-workflow-action.active,
html:root:not([data-theme="dark"]) body .app-shell > .topbar #editorWorkflowNav > button.editor-workflow-action.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--ref-blue-hover), var(--ref-blue-deep)) !important;
  background-color: var(--ref-blue) !important;
  border-color: var(--ref-blue) !important;
  box-shadow: 0 6px 18px var(--ref-blue-glow) !important;
}

html:root[data-theme="dark"] body .app-shell > .topbar .workmate-logo-icon,
html:root[data-theme="dark"] body .app-shell > .topbar .workmate-logo-icon img,
html:root:not([data-theme="dark"]) body .app-shell > .topbar .workmate-logo-icon,
html:root:not([data-theme="dark"]) body .app-shell > .topbar .workmate-logo-icon img {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  filter: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] .project-home-nav {
  color: var(--theme-text) !important;
  background: var(--theme-chrome) !important;
  background-color: var(--theme-chrome) !important;
  border-color: var(--theme-line) !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] .project-home-nav {
  color: var(--theme-text) !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: var(--theme-line) !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeAssistantHost,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeConversationNav {
  color: var(--theme-text) !important;
  background: var(--theme-panel) !important;
  background-color: var(--theme-panel) !important;
  border-color: var(--theme-line) !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #projectHomeAssistantHost,
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #projectHomeConversationNav {
  color: var(--theme-text) !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: var(--theme-line) !important;
}

html:root[data-theme="dark"] body .project-home-nav .project-home-brand,
html:root:not([data-theme="dark"]) body .project-home-nav .project-home-brand {
  display: grid !important;
  min-height: 82px !important;
  place-items: center !important;
  padding: 8px !important;
  background: transparent !important;
  border: 0 !important;
}

html:root[data-theme="dark"] body .project-home-nav .project-home-brand > img,
html:root:not([data-theme="dark"]) body .project-home-nav .project-home-brand > img {
  display: block !important;
  width: 148px !important;
  height: 74px !important;
  object-fit: contain !important;
  background: transparent !important;
  filter: none !important;
}

html:root[data-theme="dark"] body .project-home-nav .project-home-brand > div,
html:root:not([data-theme="dark"]) body .project-home-nav .project-home-brand > div {
  display: none !important;
}

html:root[data-theme="dark"] body .fluent-icon,
html:root:not([data-theme="dark"]) body .fluent-icon {
  color: currentColor !important;
  background: currentColor !important;
  background-color: currentColor !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body :is(.primary-btn, button.primary, button.recommended) .fluent-icon,
html:root:not([data-theme="dark"]) body :is(.primary-btn, button.primary, button.recommended) .fluent-icon,
html:root[data-theme="dark"] body #editorWorkflowNav > button.active .fluent-icon,
html:root:not([data-theme="dark"]) body #editorWorkflowNav > button.active .fluent-icon {
  color: #ffffff !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Reference theme final lock. Keep this after every legacy monochrome rule. */
html:root[data-theme="dark"] body .app-shell > .topbar {
  color: var(--theme-text) !important;
  background: var(--theme-chrome) !important;
  background-color: var(--theme-chrome) !important;
  border-color: var(--theme-line) !important;
  box-shadow: 0 1px 0 var(--theme-line) !important;
}

html:root[data-theme="dark"] body :is(
  #documentTabsBar,
  #step-edit > .editor-top-ribbon,
  #step-edit .panel-head,
  #step-edit .style-moodboard-actionbar,
  #step-edit .style-library-details,
  #step-edit .office-status-bar,
  #step-edit .editor-notes-dock
) {
  color: var(--theme-text) !important;
  background: var(--theme-chrome) !important;
  background-color: var(--theme-chrome) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body :is(
  #step-edit > .thumb-panel,
  #step-edit > .inspector,
  #step-edit > .editor-tool-rail,
  #step-edit .style-recommendation-panel,
  #step-edit .style-lock-summary,
  #step-edit .style-option,
  #step-edit .style-direction-control,
  #step-edit .workflow-smart-command,
  #step-edit .style-library-catalog-head,
  #step-edit .style-library-selection-panel,
  #projectHomeAssistantHost,
  #projectHomeConversationNav,
  .project-home-nav,
  .project-home-card,
  .project-card,
  .assistant-drawer,
  .assistant-workspace,
  .assistant-messages,
  .assistant-composer,
  .file-center-shell,
  .file-center-content,
  .smart-create-composer,
  .smart-create-spec-panel,
  .smart-create-preference-panel
) {
  color: var(--theme-text) !important;
  background: var(--theme-panel) !important;
  background-color: var(--theme-panel) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
  box-shadow: inset 0 1px rgb(255 255 255 / 3%) !important;
}

html:root[data-theme="dark"] body :is(
  input,
  textarea,
  select,
  .assistant-context,
  .assistant-service-notice,
  .assistant-voice-status,
  .assistant-execution-controls,
  .assistant-task-card,
  .assistant-generated-result,
  .speaker-notes-panel,
  .design-preview-inspector,
  .design-candidate-panel,
  .design-smart-operations,
  .inspector-tool-section
) {
  color: var(--theme-text) !important;
  background: var(--theme-panel-soft) !important;
  background-color: var(--theme-panel-soft) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
}

html:root[data-theme="dark"] body .app-shell > .topbar #editorWorkflowNav,
html:root[data-theme="dark"] body .app-shell > .topbar #editorWorkflowNav > button {
  color: var(--theme-muted) !important;
  background: var(--theme-panel) !important;
  background-color: var(--theme-panel) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body .app-shell > .topbar #editorWorkflowNav > button.editor-workflow-action.active,
html:root[data-theme="dark"] body :is(
  #step-edit .ribbon-tool.active,
  #step-edit .editor-left-tabs button.active,
  #step-edit #canvasViewSwitch > button.active,
  #step-edit #editorToolRail > button.active,
  .assistant-side-tabs button.active,
  .project-home-nav-item.active,
  .document-tab.active,
  .thumb.active,
  .thumb.selected
) {
  color: var(--neutral-accent-text) !important;
  background: linear-gradient(135deg, var(--ref-blue-hover), var(--ref-blue-deep)) !important;
  background-color: var(--ref-blue) !important;
  background-image: linear-gradient(135deg, var(--ref-blue-hover), var(--ref-blue-deep)) !important;
  border-color: var(--ref-blue) !important;
  box-shadow: 0 6px 18px var(--ref-blue-glow) !important;
}

html:root[data-theme="dark"] body :is(
  .primary-btn,
  button.primary,
  button.recommended,
  #createProjectBtn,
  #addSlideBtn,
  .assistant-new-conversation,
  .assistant-send-btn,
  .assistant-execution-controls .confirm,
  [data-category-action="generate"],
  [data-design-smart-action="generate-range"]
) {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--ref-blue-hover), var(--ref-blue-deep)) !important;
  background-color: var(--ref-blue) !important;
  background-image: linear-gradient(135deg, var(--ref-blue-hover), var(--ref-blue-deep)) !important;
  border-color: var(--ref-blue) !important;
  box-shadow: 0 8px 20px var(--ref-blue-glow) !important;
}

html:root[data-theme="dark"] body :is(
  .assistant-turn-badge,
  .assistant-mark,
  .assistant-voice-pulse,
  .smart-create-preference-panel em,
  .smart-create-manual em,
  .home-style-library em,
  .preproject-section-index
) {
  color: #78b3ff !important;
  background: var(--ref-blue-soft) !important;
  background-color: var(--ref-blue-soft) !important;
  border-color: rgb(22 119 255 / 38%) !important;
}

html:root[data-theme="dark"] body .fluent-icon {
  color: currentColor !important;
  background: currentColor !important;
  background-color: currentColor !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body :is(
  button > svg,
  button > svg *,
  .fluent-icon-shell > svg,
  .fluent-icon-shell > svg *
) {
  color: currentColor !important;
  background: transparent !important;
  background-color: transparent !important;
  stroke: currentColor !important;
}

html:root[data-theme="dark"] body :is(
  button > svg,
  .fluent-icon-shell > svg
) [fill]:not([fill="none"]) {
  fill: currentColor !important;
}

html:root[data-theme="dark"] body .app-shell > .topbar :is(
  .workmate-logo-icon,
  .workmate-logo-icon img
),
html:root[data-theme="dark"] body :is(
  .project-home-brand img,
  .brand-logo img,
  .brand-mark img,
  .about-brand img
) {
  background: transparent !important;
  background-color: transparent !important;
  filter: none !important;
  border-color: transparent !important;
}

/* Literal high-specificity fallbacks for the oldest desktop selectors. */
html:root[data-theme="dark"] body .app-shell > header.topbar.topbar:has(#projectHomeBtn) {
  color: #f3f7ff !important;
  background: #061423 !important;
  background-color: #061423 !important;
  background-image: none !important;
  border-color: rgb(104 155 219 / 18%) !important;
}

html:root[data-theme="dark"] body #projectHomeBtn.workmate-wordmark .workmate-logo-icon,
html:root[data-theme="dark"] body #projectHomeBtn.workmate-wordmark .workmate-logo-icon img {
  background: transparent !important;
  background-color: transparent !important;
  filter: none !important;
  border-color: transparent !important;
}

html:root[data-theme="dark"] body #step-edit #step-style.panel.flow-panel {
  color: #f3f7ff !important;
  background: #0b192a !important;
  background-color: #0b192a !important;
  background-image: none !important;
  border-color: rgb(104 155 219 / 18%) !important;
}

html:root[data-theme="dark"] body #step-edit #step-style :is(
  #styleLockSummary,
  #styleMoodboardView > .style-moodboard,
  .style-recommendation-panel,
  .workflow-smart-command,
  .style-moodboard-actionbar,
  .style-library-details,
  .style-option
) {
  color: #f3f7ff !important;
  background: #101f32 !important;
  background-color: #101f32 !important;
  background-image: none !important;
  border-color: rgb(104 155 219 / 18%) !important;
}

html:root[data-theme="dark"] body #step-edit #step-style .workflow-smart-command :is(
  input,
  textarea,
  select
) {
  color: var(--theme-text) !important;
  background: var(--theme-panel-raised) !important;
  background-color: var(--theme-panel-raised) !important;
  background-image: none !important;
  border-color: var(--theme-line-strong) !important;
}

html:root[data-theme="dark"] body #step-edit #step-style :is(
  button.primary-btn,
  button.primary,
  button.recommended,
  button.active
) {
  color: #ffffff !important;
  background: linear-gradient(135deg, #3d96ff, #0b55d4) !important;
  background-color: #1677ff !important;
  border-color: #1677ff !important;
  box-shadow: 0 8px 20px rgb(22 119 255 / 26%) !important;
}

/* Light reference lock: white work surfaces, pale-blue secondary surfaces,
   and brand blue only for actions and selected states. */
html:root:not([data-theme="dark"]) body #step-edit #step-style :is(
  #styleLockSummary,
  #styleMoodboardView > .style-moodboard,
  .style-recommendation-panel,
  .workflow-smart-command,
  .style-moodboard-actionbar,
  .style-library-details,
  .style-option,
  .style-direction-control,
  .style-library-catalog-head,
  .style-library-selection-panel
) {
  color: var(--theme-text) !important;
  background: var(--theme-panel) !important;
  background-color: var(--theme-panel) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
  box-shadow: 0 10px 28px rgb(31 78 145 / 7%) !important;
}

html:root:not([data-theme="dark"]) body #step-edit #step-style .workflow-smart-command :is(
  input,
  textarea,
  select
) {
  color: var(--theme-text) !important;
  background: var(--theme-panel-soft) !important;
  background-color: var(--theme-panel-soft) !important;
  background-image: none !important;
  border-color: var(--theme-line-strong) !important;
}

html:root:not([data-theme="dark"]) body #step-edit #step-style .workflow-smart-command :is(
  header,
  strong,
  .workflow-smart-command-heading
) {
  color: var(--theme-text) !important;
}

html:root:not([data-theme="dark"]) body #step-edit #step-style .workflow-smart-command :is(
  small,
  .workflow-smart-command-hint
) {
  color: var(--theme-muted) !important;
}

html:root:not([data-theme="dark"]) body #step-edit #step-style .workflow-smart-command em {
  color: var(--ref-blue-deep) !important;
}

html:root:not([data-theme="dark"]) body #step-edit #step-style :is(
  button.primary-btn,
  button.primary,
  button.recommended,
  button.active
) {
  color: #ffffff !important;
  background: linear-gradient(135deg, #3d96ff, #0b55d4) !important;
  background-color: #1677ff !important;
  border-color: #1677ff !important;
  box-shadow: 0 8px 20px rgb(22 119 255 / 22%) !important;
}

/* Editor reference surfaces: keep the three-column workspace calm and
   layered like the supplied product reference. */
html:root[data-theme="dark"] body #step-edit > .thumb-panel,
html:root[data-theme="dark"] body #step-edit > .inspector {
  color: var(--theme-text) !important;
  background: var(--theme-panel) !important;
  background-color: var(--theme-panel) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
}

html:root[data-theme="dark"] body #step-edit > .thumb-panel :is(
  .panel-head,
  .editor-left-tabs,
  .editor-left-actions,
  .thumbnail-list,
  .slide-page-actions
),
html:root[data-theme="dark"] body #step-edit > .inspector :is(
  .panel-head,
  .inspector-view-tabs,
  .design-preview-inspector,
  .design-candidate-panel,
  .design-smart-operations,
  .design-control-disclosure,
  .inspector-tool-section
) {
  color: var(--theme-text) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
}

html:root[data-theme="dark"] body #step-edit > .thumb-panel .thumb:not(.active):not(.selected),
html:root[data-theme="dark"] body #step-edit > .thumb-panel .thumbnail-item:not(.active):not(.selected) {
  color: var(--theme-text) !important;
  background: var(--theme-panel-soft) !important;
  background-color: var(--theme-panel-soft) !important;
  border-color: var(--theme-line) !important;
}

html:root[data-theme="dark"] body #step-edit > .inspector .design-preview-inspector *,
html:root[data-theme="dark"] body #step-edit > .inspector .design-smart-operations * {
  color: inherit;
}

html:root[data-theme="dark"] body #step-edit > .inspector .design-preview-inspector :is(p, small),
html:root[data-theme="dark"] body #step-edit > .inspector .design-smart-operations :is(p, small),
html:root[data-theme="dark"] body #step-edit > .inspector .design-page-context > p,
html:root[data-theme="dark"] body #step-edit > .inspector .design-page-context-meta {
  color: var(--theme-muted) !important;
}

html:root[data-theme="dark"] body #step-edit > .inspector :is(
  .design-preview-inspector textarea,
  .design-smart-operations textarea,
  .design-preview-inspector input,
  .design-smart-operations input,
  .design-preview-inspector select,
  .design-smart-operations select
) {
  color: var(--theme-text) !important;
  background: var(--theme-panel-soft) !important;
  background-color: var(--theme-panel-soft) !important;
  border-color: var(--theme-line-strong) !important;
}

html:root[data-theme="dark"] body #step-edit > .inspector :is(
  .design-smart-operations .primary-btn,
  .design-candidate-panel .primary-btn,
  .design-preview-inspector .primary-btn
) {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--ref-blue-hover), var(--ref-blue-deep)) !important;
  background-color: var(--ref-blue) !important;
  border-color: var(--ref-blue) !important;
  box-shadow: 0 8px 20px var(--ref-blue-glow) !important;
}

html:root:not([data-theme="dark"]) body #step-edit > .thumb-panel,
html:root:not([data-theme="dark"]) body #step-edit > .inspector {
  color: var(--theme-text) !important;
  background: var(--theme-panel) !important;
  background-color: var(--theme-panel) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
}

html:root:not([data-theme="dark"]) body #step-edit > .thumb-panel .thumb:not(.active):not(.selected),
html:root:not([data-theme="dark"]) body #step-edit > .thumb-panel .thumbnail-item:not(.active):not(.selected) {
  color: var(--theme-text) !important;
  background: var(--theme-panel-soft) !important;
  background-color: var(--theme-panel-soft) !important;
  border-color: var(--theme-line) !important;
}

/* Literal fallbacks keep legacy glass rules from resolving to the old near-black
   surface when the editor is mounted inside the desktop shell. */
html:root[data-theme="dark"] body #step-edit > .thumb-panel {
  background: #0b192a !important;
  background-color: #0b192a !important;
}

html:root[data-theme="dark"] body #step-edit > .thumb-panel.panel {
  background-color: rgb(11 25 42) !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body #step-edit > .thumb-panel :is(
  .panel-head,
  .editor-left-tabs,
  .editor-left-actions,
  .thumbnail-list,
  .slide-page-actions
) {
  background-color: transparent !important;
}

html:root[data-theme="dark"] body #step-edit > .inspector .design-preview-inspector > header,
html:root[data-theme="dark"] body #step-edit > .inspector .design-preview-inspector > header strong,
html:root[data-theme="dark"] body #step-edit > .inspector .design-preview-inspector > header span,
html:root[data-theme="dark"] body #step-edit > .inspector .design-preview-inspector > header h3 {
  color: var(--theme-text) !important;
}

html:root[data-theme="dark"] body #step-edit > .inspector .design-preview-inspector > header :is(p, small) {
  color: var(--theme-muted) !important;
}

html:root[data-theme="dark"] body #step-edit > .inspector #designCandidatePanel.design-candidate-panel,
html:root[data-theme="dark"] body #step-edit > .inspector #designCandidatePanel .design-candidate-disclosure,
html:root[data-theme="dark"] body #step-edit > .inspector #designCandidatePanel .design-candidate-head,
html:root[data-theme="dark"] body #step-edit > .inspector #designCandidatePanel .design-candidate-body {
  color: var(--theme-text) !important;
  background: #101f32 !important;
  background-color: #101f32 !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
}

/* Ribbon groups are secondary chrome, not a full-width accent band. */
html:root[data-theme="dark"] body #step-edit > .editor-top-ribbon :is(
  #editorRibbon,
  #editorRibbon > .ribbon-group,
  #editorRibbon .canvas-view-switch,
  #designCategoryToolbar
) {
  color: var(--theme-text) !important;
  background: var(--theme-chrome) !important;
  background-color: var(--theme-chrome) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
  box-shadow: none !important;
}

html:root:not([data-theme="dark"]) body #step-edit > .editor-top-ribbon :is(
  #editorRibbon,
  #editorRibbon > .ribbon-group,
  #editorRibbon .canvas-view-switch,
  #designCategoryToolbar
) {
  color: var(--theme-text) !important;
  background: var(--theme-panel) !important;
  background-color: var(--theme-panel) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
  box-shadow: none !important;
}

/* The copy-lock control previously only received its layout above 1280px,
   which made it collapse inside the common 300px inspector. */
html:root body #step-edit .project-copy-lock-control {
  position: relative !important;
  display: grid !important;
  min-width: 0 !important;
  min-height: 48px !important;
  grid-template-columns: 30px minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--theme-line) !important;
  border-radius: 8px !important;
  background: var(--theme-panel-soft) !important;
  color: var(--theme-text) !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

html:root body #step-edit .project-copy-lock-control.compact {
  grid-template-columns: minmax(0, 1fr) 34px !important;
}

html:root body #step-edit .project-copy-lock-control > input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html:root body #step-edit .project-copy-lock-icon {
  display: inline-flex !important;
  width: 28px !important;
  height: 28px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--theme-line) !important;
  border-radius: 6px !important;
  background: var(--theme-panel-raised) !important;
  color: var(--theme-muted) !important;
}

html:root body #step-edit .project-copy-lock-control.compact .project-copy-lock-icon {
  display: none !important;
}

html:root body #step-edit .project-copy-lock-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
}

html:root body #step-edit .project-copy-lock-copy strong {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--theme-text) !important;
  font-size: 11px !important;
  line-height: 16px !important;
  white-space: nowrap !important;
}

html:root body #step-edit .project-copy-lock-copy strong em {
  padding: 1px 5px !important;
  border-radius: 4px !important;
  background: var(--ref-blue-soft) !important;
  color: var(--ref-blue) !important;
  font-size: 8px !important;
  font-style: normal !important;
}

html:root body #step-edit .project-copy-lock-copy small {
  overflow: hidden !important;
  color: var(--theme-muted) !important;
  font-size: 9px !important;
  line-height: 14px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:root body #step-edit .project-copy-lock-control.compact .project-copy-lock-copy small {
  display: none !important;
}

html:root body #step-edit .project-copy-lock-switch {
  position: relative !important;
  display: block !important;
  width: 34px !important;
  height: 20px !important;
  border-radius: 10px !important;
  background: var(--theme-line-strong) !important;
}

html:root body #step-edit .project-copy-lock-switch::after {
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgb(0 0 0 / 24%) !important;
  content: "" !important;
  transition: transform 160ms ease !important;
}

html:root body #step-edit .project-copy-lock-control.active,
html:root body #step-edit .project-copy-lock-control:has(input:checked) {
  border-color: var(--theme-line-strong) !important;
  background: var(--ref-blue-soft) !important;
}

html:root body #step-edit .project-copy-lock-control.active .project-copy-lock-switch,
html:root body #step-edit .project-copy-lock-control:has(input:checked) .project-copy-lock-switch {
  background: var(--ref-blue) !important;
}

html:root body #step-edit .project-copy-lock-control.active .project-copy-lock-switch::after,
html:root body #step-edit .project-copy-lock-control:has(input:checked) .project-copy-lock-switch::after {
  transform: translateX(14px) !important;
}

/* Conversation home follows the same navy/white product shell as the editor. */
html:root[data-theme="dark"] body[data-project-home-mode="chat"] .project-home-nav {
  color: var(--theme-text) !important;
  background: #061423 !important;
  background-color: #061423 !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] .project-home-nav {
  color: var(--theme-text) !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] .project-home-mode-switch {
  color: var(--theme-text) !important;
  background: var(--theme-panel-soft) !important;
  background-color: var(--theme-panel-soft) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
  box-shadow: inset 0 1px rgb(255 255 255 / 4%) !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] .project-home-mode-switch {
  color: var(--theme-text) !important;
  background: var(--theme-panel-soft) !important;
  background-color: var(--theme-panel-soft) !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body :is(.brand-logo-light),
html:root:not([data-theme="dark"]) body :is(.brand-logo-dark) {
  display: none !important;
}

html:root[data-theme="dark"] body :is(.brand-logo-dark),
html:root:not([data-theme="dark"]) body :is(.brand-logo-light) {
  display: block !important;
  filter: none !important;
}

html:root[data-theme="dark"] body #step-create .project-home-shell > .project-home-nav {
  background: rgb(6 20 35) !important;
  background-color: rgb(6 20 35) !important;
  background-image: none !important;
  border-color: rgb(104 155 219 / 18%) !important;
}

html:root:not([data-theme="dark"]) body #step-create .project-home-shell > .project-home-nav {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: rgb(22 119 255 / 14%) !important;
}

html:root body #step-create .project-home-shell > .project-home-nav #projectHomeConversationNav {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
}

html:root[data-theme="dark"] body #step-create .project-home-brand > img.brand-logo-light,
html:root:not([data-theme="dark"]) body #step-create .project-home-brand > img.brand-logo-dark,
html:root[data-theme="dark"] body .onboarding-brand > img.brand-logo-light,
html:root:not([data-theme="dark"]) body .onboarding-brand > img.brand-logo-dark {
  display: none !important;
}

html:root[data-theme="dark"] body #step-create .project-home-brand > img.brand-logo-dark,
html:root:not([data-theme="dark"]) body #step-create .project-home-brand > img.brand-logo-light,
html:root[data-theme="dark"] body .onboarding-brand > img.brand-logo-dark,
html:root:not([data-theme="dark"]) body .onboarding-brand > img.brand-logo-light {
  display: block !important;
  filter: none !important;
}

/* Customer identity belongs to the signed-in workspace, while the product
   wordmark remains on the left. Keep both identities visually distinct. */
@media (min-width: 981px) {
  html:root body .app-shell > header.topbar .top-actions {
    width: auto !important;
    min-width: 112px !important;
    max-width: none !important;
    justify-self: end !important;
    overflow: visible !important;
  }

  html body .topbar .customer-account-control {
    display: block !important;
    width: 188px !important;
    min-width: 188px !important;
    max-width: 188px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    flex: 0 0 188px !important;
    overflow: visible !important;
  }

  html body .topbar #appAvatarMenuBtn.customer-account-trigger {
    display: grid !important;
    width: 188px !important;
    min-width: 188px !important;
    max-width: 188px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    grid-template-columns: 30px minmax(0, 1fr) 14px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 3px 8px 3px 4px !important;
    overflow: visible !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  html body .topbar #appAvatarMenuBtn .customer-account-avatar {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    overflow: hidden !important;
    border-radius: 7px !important;
  }

  html body .topbar #appAvatarMenuBtn .customer-account-avatar img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 7px !important;
    object-fit: cover !important;
  }

  html body .topbar #appAvatarMenuBtn .customer-account-copy {
    display: grid !important;
    min-width: 0 !important;
    gap: 2px !important;
    line-height: 1 !important;
  }

  html body .topbar #appAvatarMenuBtn .customer-account-copy strong,
  html body .topbar #appAvatarMenuBtn .customer-account-copy small {
    display: block !important;
    overflow: hidden !important;
    letter-spacing: 0 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .topbar #appAvatarMenuBtn .customer-account-copy strong {
    color: inherit !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  html body .topbar #appAvatarMenuBtn .customer-account-copy small {
    color: var(--theme-faint) !important;
    font-size: 8px !important;
    font-weight: 560 !important;
  }

  html body .topbar #appAvatarMenuBtn .customer-account-chevron {
    display: block !important;
    width: 13px !important;
    height: 13px !important;
    color: var(--theme-faint) !important;
    transition: transform 150ms ease !important;
  }

  html body .topbar #appAvatarMenuBtn[aria-expanded="true"] .customer-account-chevron {
    transform: rotate(180deg) !important;
  }

  html body .topbar .customer-account-menu {
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    width: 276px !important;
    min-width: 276px !important;
    padding: 10px !important;
    border-radius: 10px !important;
  }
}

.customer-account-menu .brand-avatar-menu-head {
  min-height: 58px !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 10px !important;
  margin: 0 0 5px !important;
  padding: 3px 4px 9px !important;
  border-color: var(--theme-line) !important;
}

.customer-account-menu .brand-avatar-menu-head img {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid var(--theme-line) !important;
  border-radius: 9px !important;
  background: var(--theme-panel-soft) !important;
}

.customer-account-menu .brand-avatar-menu-head strong {
  color: var(--theme-text) !important;
  font-size: 12px !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
}

.customer-account-menu .brand-avatar-menu-head small {
  color: var(--theme-muted) !important;
  font-size: 9px !important;
  letter-spacing: 0 !important;
}

html body .customer-account-menu > button {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
  color: var(--theme-muted) !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
}

html body .customer-account-menu > button:hover:not(:disabled),
html body .customer-account-menu > button:focus-visible {
  color: var(--ref-blue) !important;
  background: var(--ref-blue-soft) !important;
}

.customer-account-menu-separator {
  height: 1px !important;
  margin: 5px 2px !important;
  background: var(--theme-line) !important;
}

html body .customer-account-menu > .customer-account-logout {
  color: var(--theme-muted) !important;
}

html body .customer-account-menu > .customer-account-logout:hover,
html body .customer-account-menu > .customer-account-logout:focus-visible {
  color: var(--ref-blue) !important;
}

html:root[data-theme="dark"] body .customer-account-menu {
  border-color: var(--theme-line) !important;
  background: #0b192a !important;
  box-shadow: 0 18px 46px rgb(0 5 14 / 42%) !important;
}

html:root:not([data-theme="dark"]) body .customer-account-menu {
  border-color: var(--theme-line) !important;
  background: #ffffff !important;
  box-shadow: 0 18px 46px rgb(31 78 145 / 18%) !important;
}

/* The reference uses navy chrome in dark mode and clean white chrome in light mode. */
html:root[data-theme="dark"] body .app-shell > header.topbar.topbar {
  position: relative !important;
  z-index: 3200 !important;
  color: #f3f7ff !important;
  background: #061423 !important;
  background-color: #061423 !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
}

html:root:not([data-theme="dark"]) body .app-shell > header.topbar.topbar {
  position: relative !important;
  z-index: 3200 !important;
  color: #0b1830 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: var(--theme-line) !important;
  box-shadow: 0 1px 0 var(--theme-line), 0 8px 20px rgb(31 78 145 / 5%) !important;
}

html:root:not([data-theme="dark"]) body .topbar .workmate-wordmark.file-center-trigger,
html:root:not([data-theme="dark"]) body .topbar #fileCenterBtn.file-center-trigger,
html:root:not([data-theme="dark"]) body .topbar .top-actions button,
html:root:not([data-theme="dark"]) body .topbar .license-points {
  color: var(--theme-muted) !important;
  border-color: var(--theme-line) !important;
  background: #ffffff !important;
  background-image: none !important;
}

html:root:not([data-theme="dark"]) body .topbar .workmate-wordmark-copy strong,
html:root:not([data-theme="dark"]) body .topbar #appAvatarMenuBtn .customer-account-copy strong {
  color: var(--theme-text) !important;
}

html:root:not([data-theme="dark"]) body .topbar .workmate-wordmark-copy small {
  color: var(--ref-blue) !important;
}

html:root:not([data-theme="dark"]) body .topbar .top-actions button:hover:not(:disabled),
html:root:not([data-theme="dark"]) body .topbar #fileCenterBtn.file-center-trigger:hover,
html:root:not([data-theme="dark"]) body .topbar .license-points:hover {
  color: var(--ref-blue-deep) !important;
  border-color: var(--theme-line-strong) !important;
  background: var(--theme-panel-soft) !important;
}

/* Final desktop composition lock. The home route has one product header and
   one full-height workspace; editor-only chrome returns when #step-edit is
   active. The embedded assistant keeps its message stream and composer in
   explicit rows so the composer can never fall below the viewport. */
@media (min-width: 1024px) {
  html:root[data-theme] body[data-active-step="create"] #editorWorkflowNav,
  html:root[data-theme] body[data-active-step="create"] #documentTabsBar,
  html:root[data-theme] body[data-active-step="create"] #fileCenterBtn {
    display: none !important;
  }

  html:root[data-theme] body[data-active-step="create"] .app-shell {
    grid-template-rows: 56px 0 minmax(0, 1fr) !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto auto auto auto auto minmax(110px, 1fr) auto auto auto auto auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded > .assistant-header { grid-row: 1 !important; }
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded > .assistant-side-nav { grid-row: 2 !important; }
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded > .assistant-context { grid-row: 3 !important; }
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded > .assistant-tasks { grid-row: 4 !important; }
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded > .assistant-pdf-redesign { grid-row: 5 !important; }
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded > .assistant-recommendations { grid-row: 6 !important; }
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded > .assistant-service-notice { grid-row: 7 !important; }
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded > .assistant-voice-status { grid-row: 8 !important; }
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded > .assistant-execution-controls { grid-row: 9 !important; }
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded > .assistant-messages {
    grid-row: 10 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded > .assistant-new-result { grid-row: 10 !important; }
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded > .assistant-brief-actions { grid-row: 11 !important; }
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded > .assistant-suggestions { grid-row: 12 !important; }
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded > .assistant-attachments { grid-row: 13 !important; }
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded > .assistant-composer {
    grid-row: 14 !important;
    align-self: end !important;
    margin-bottom: 8px !important;
  }
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded > .assistant-composer-hint { grid-row: 15 !important; }

  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded,
  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded .assistant-messages {
    color: var(--theme-text) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
  }

  html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded,
  html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded .assistant-messages {
    color: #f3f7ff !important;
    background: #0b192a !important;
    background-color: #0b192a !important;
    background-image: none !important;
  }

  html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded .assistant-composer {
    color: #f3f7ff !important;
    border-color: rgb(104 155 219 / 32%) !important;
    background: #101f32 !important;
    background-color: #101f32 !important;
    background-image: none !important;
  }

  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded .assistant-composer {
    color: var(--theme-text) !important;
    border-color: var(--theme-line-strong) !important;
    background: var(--theme-panel-soft) !important;
    background-color: var(--theme-panel-soft) !important;
    background-image: none !important;
    box-shadow: 0 12px 28px rgb(31 91 161 / 10%) !important;
  }

  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] .project-home-mode-switch {
    border-color: var(--theme-line) !important;
    background: var(--theme-panel-soft) !important;
  }

  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] .project-home-mode-switch button.active {
    border-color: #1677ff !important;
    background: #ffffff !important;
    color: #1677ff !important;
  }
}

html:root:not([data-theme="dark"]) body .app-shell > .topbar > #editorWorkflowNav {
  border-color: var(--theme-line) !important;
  background: var(--theme-panel-soft) !important;
  box-shadow: none !important;
}

html:root:not([data-theme="dark"]) body .app-shell > .topbar > #editorWorkflowNav > .editor-workflow-action {
  color: var(--theme-muted) !important;
}

html:root:not([data-theme="dark"]) body .app-shell > .topbar > #editorWorkflowNav > .editor-workflow-action:hover:not(:disabled) {
  color: var(--theme-text) !important;
  background: #ffffff !important;
}

html:root:not([data-theme="dark"]) body .app-shell > .topbar > #editorWorkflowNav > .editor-workflow-action.active {
  color: #ffffff !important;
  background: #1677ff !important;
  box-shadow: 0 5px 14px rgb(22 119 255 / 24%) !important;
}

body.browser-settings-mode .settings-nav [data-settings-view]:not([data-settings-view="performance"]):not([data-settings-view="about"]) {
  display: none !important;
}

body.browser-settings-mode .settings-window {
  color: var(--theme-text) !important;
  background: var(--theme-panel) !important;
  border-color: var(--theme-line) !important;
}

html body .topbar .customer-account-menu {
  z-index: 3600 !important;
}

@media (max-width: 980px) {
  html body .topbar .customer-account-control,
  html body .topbar #appAvatarMenuBtn.customer-account-trigger {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
  }

  html body .topbar #appAvatarMenuBtn.customer-account-trigger {
    display: grid !important;
    grid-template-columns: 30px !important;
    padding: 3px !important;
  }

  html body .topbar #appAvatarMenuBtn .customer-account-copy,
  html body .topbar #appAvatarMenuBtn .customer-account-chevron {
    display: none !important;
  }

  html body .topbar .customer-account-menu {
    position: fixed !important;
    top: 54px !important;
    right: 8px !important;
    left: auto !important;
    width: min(276px, calc(100vw - 16px)) !important;
  }
}

@media (max-width: 1120px) and (min-width: 981px) {
  html:root body .app-shell > header.topbar .top-actions {
    min-width: 112px !important;
  }

  html body .topbar .customer-account-control,
  html body .topbar #appAvatarMenuBtn.customer-account-trigger {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
  }

  html body .topbar #appAvatarMenuBtn.customer-account-trigger {
    grid-template-columns: 30px !important;
    padding: 3px !important;
  }

  html body .topbar #appAvatarMenuBtn .customer-account-copy,
  html body .topbar #appAvatarMenuBtn .customer-account-chevron {
    display: none !important;
  }
}

/* Customer account lives at the bottom of the project-home rail, matching
   the supplied reference composition. */
html body #step-create .project-home-nav .project-home-account-slot {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 72px !important;
  margin: auto 0 0 !important;
  padding: 10px 0 0 !important;
  align-content: end !important;
  gap: 7px !important;
  overflow: visible !important;
  border-top: 1px solid var(--theme-line) !important;
}

html body #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  grid-template-columns: 34px minmax(0, 1fr) 14px !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 5px 8px 5px 5px !important;
  border: 1px solid var(--theme-line) !important;
  border-radius: 9px !important;
  background: var(--theme-panel-soft) !important;
  color: var(--theme-text) !important;
  text-align: left !important;
}

html body #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger:hover,
html body #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger[aria-expanded="true"] {
  border-color: var(--theme-line-strong) !important;
  background: color-mix(in srgb, var(--ref-blue) 9%, var(--theme-panel-soft)) !important;
}

html body #step-create .project-home-account-slot .customer-account-avatar {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}

html body #step-create .project-home-account-slot .customer-account-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

html body #step-create .project-home-account-slot .customer-account-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
  line-height: 1 !important;
}

html body #step-create .project-home-account-slot .customer-account-copy strong,
html body #step-create .project-home-account-slot .customer-account-copy small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}

html body #step-create .project-home-account-slot .customer-account-copy strong {
  color: var(--theme-text) !important;
  font-size: 11px !important;
  font-weight: 720 !important;
}

html body #step-create .project-home-account-slot .customer-account-copy small {
  color: var(--theme-muted) !important;
  font-size: 9px !important;
  font-weight: 560 !important;
}

html body #step-create .project-home-account-slot .customer-account-chevron {
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  color: var(--theme-faint) !important;
  transition: transform 150ms ease !important;
}

html body #step-create .project-home-account-slot #appAvatarMenuBtn[aria-expanded="true"] .customer-account-chevron {
  transform: rotate(180deg) !important;
}

html body #step-create .project-home-account-slot > p {
  margin: 0 4px !important;
  color: var(--theme-faint) !important;
  font-size: 8px !important;
  line-height: 14px !important;
  text-align: left !important;
}

html body #step-create .project-home-account-slot .customer-account-menu {
  top: auto !important;
  right: auto !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  width: 276px !important;
  min-width: 276px !important;
  z-index: 3600 !important;
}

/* Reference-home composition: airy hero, compact quick actions, and a quiet
   information rail on the right. The rail only belongs to the Work home mode. */
@media (min-width: 1280px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 332px !important;
    grid-template-rows: auto auto auto auto auto auto auto !important;
    align-content: start !important;
    column-gap: 28px !important;
    padding: 36px clamp(28px, 3.6vw, 64px) 72px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create #smartCreate,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .smart-create-assist,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .smart-create-manual,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .home-style-library {
    grid-column: 1;
    min-width: 0;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading {
    grid-row: 1;
    position: relative !important;
    display: grid !important;
    min-height: 126px !important;
    grid-template-columns: minmax(0, 1fr) 250px !important;
    align-items: center !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-copy {
    position: relative !important;
    z-index: 2 !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-copy > span {
    display: block !important;
    color: var(--theme-muted) !important;
    font-size: 12px !important;
    font-weight: 560 !important;
    letter-spacing: 0 !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-copy > span b {
    font-size: 13px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading h2 {
    margin: 8px 0 6px !important;
    color: var(--theme-text) !important;
    font-size: clamp(30px, 3vw, 44px) !important;
    font-weight: 760 !important;
    letter-spacing: -.045em !important;
    line-height: 1.08 !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading p {
    margin: 0 !important;
    color: var(--theme-muted) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art {
    position: relative !important;
    display: grid !important;
    width: 250px !important;
    height: 126px !important;
    place-items: center !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art img {
    position: relative !important;
    z-index: 3 !important;
    width: 88px !important;
    height: 88px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 13px 18px rgb(22 119 255 / 34%)) !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .heading-art-glow {
    position: absolute !important;
    inset: 17px 18px !important;
    z-index: 1 !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgb(22 119 255 / 26%) 0%, transparent 68%) !important;
    filter: blur(2px) !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .heading-art-grid {
    position: absolute !important;
    inset: 18px 0 3px !important;
    z-index: 2 !important;
    opacity: .42 !important;
    background-image: linear-gradient(rgb(22 119 255 / 18%) 1px, transparent 1px), linear-gradient(90deg, rgb(22 119 255 / 18%) 1px, transparent 1px) !important;
    background-size: 22px 22px !important;
    transform: perspective(110px) rotateX(58deg) scale(1.28) !important;
    transform-origin: center bottom !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions {
    grid-row: 2;
    display: grid !important;
    min-height: 76px !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 1px !important;
    margin: 10px 0 20px !important;
    padding: 0 !important;
    border: 1px solid var(--theme-line) !important;
    border-radius: 12px !important;
    background: var(--theme-line) !important;
    overflow: hidden !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions button {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    padding: 12px 13px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--theme-panel) !important;
    color: var(--theme-text) !important;
    text-align: left !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions button:hover {
    background: color-mix(in srgb, var(--ref-blue) 7%, var(--theme-panel)) !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions button > span:last-child {
    display: grid !important;
    min-width: 0 !important;
    gap: 3px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .quick-action-icon {
    display: grid !important;
    width: 32px !important;
    height: 32px !important;
    place-items: center !important;
    border-radius: 9px !important;
    color: #fff !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .quick-action-icon.is-blue { background: var(--neutral-accent, #a86f25) !important; }
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .quick-action-icon.is-cyan { background: var(--neutral-accent, #a86f25) !important; }
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .quick-action-icon.is-violet { background: var(--neutral-accent, #a86f25) !important; }
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .quick-action-icon.is-pink { background: var(--neutral-accent, #a86f25) !important; }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions strong {
    color: var(--theme-text) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions small {
    color: var(--theme-muted) !important;
    font-size: 9px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-dashboard-rail {
    grid-column: 2;
    grid-row: 1 / span 5;
    display: grid !important;
    align-content: start !important;
    gap: 16px !important;
    min-width: 0 !important;
    padding-top: 0 !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create #smartCreate,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .smart-create-assist,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .smart-create-manual,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .home-style-library {
    max-width: none !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent {
    grid-row: 3;
    margin-top: 0 !important;
  }
}

@media (max-width: 1279px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-dashboard-rail {
    display: none !important;
  }
}

/* Keep the workbench hero proportional on medium desktop widths. The base
   home stylesheet gives the decorative mark an intrinsic 512px size when the
   wide dashboard grid is not active, which pushes the composer below the
   fold around 1024-1279px. */
@media (min-width: 981px) and (max-width: 1279px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-content {
    display: block !important;
    min-width: 0 !important;
    padding: 30px clamp(24px, 4vw, 48px) 56px !important;
    overflow: auto !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 168px !important;
    align-items: center !important;
    min-height: 104px !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art {
    position: relative !important;
    display: grid !important;
    width: 168px !important;
    height: 104px !important;
    place-items: center !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art img {
    position: relative !important;
    z-index: 3 !important;
    display: block !important;
    width: 76px !important;
    height: 76px !important;
    max-width: 76px !important;
    max-height: 76px !important;
    object-fit: contain !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .heading-art-glow {
    inset: 13px 12px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .heading-art-grid {
    inset: 14px 0 2px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading h2 {
    font-size: clamp(26px, 3vw, 36px) !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    min-width: 0 !important;
    margin: 10px 0 18px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions button {
    min-width: 0 !important;
    padding-inline: 10px !important;
  }
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-panel {
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid var(--theme-line) !important;
  border-radius: 13px !important;
  background: var(--theme-panel) !important;
  box-shadow: 0 10px 26px rgb(0 5 14 / 11%) !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="work"] #step-create .dashboard-panel {
  box-shadow: 0 10px 26px rgb(31 78 145 / 8%) !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-panel-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-panel-head > div {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-panel-head span {
  color: var(--theme-muted) !important;
  font-size: 9px !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-panel-head h3 {
  margin: 0 !important;
  color: var(--theme-text) !important;
  font-size: 15px !important;
  font-weight: 720 !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-icon-action,
html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-text-action {
  display: inline-flex !important;
  min-height: 26px !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 7px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--ref-blue-soft) !important;
  color: var(--ref-blue) !important;
  font-size: 9px !important;
  font-weight: 650 !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-icon-action {
  width: 28px !important;
  justify-content: center !important;
  padding: 0 !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-calendar-head,
html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-week {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 4px !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-calendar-head {
  grid-template-columns: minmax(0, 1fr) 26px !important;
  margin-bottom: 8px !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-calendar-head strong {
  color: var(--theme-muted) !important;
  font-size: 10px !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-calendar-head button {
  display: grid !important;
  width: 26px !important;
  height: 26px !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--theme-muted) !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-week button {
  display: grid !important;
  min-width: 0 !important;
  min-height: 38px !important;
  place-items: center !important;
  gap: 3px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--theme-muted) !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-week button[aria-selected="true"] {
  background: var(--ref-blue) !important;
  color: #fff !important;
  box-shadow: 0 5px 13px rgb(22 119 255 / 24%) !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-week small {
  font-size: 8px !important;
  opacity: .8 !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-week strong {
  font-size: 11px !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-schedule-list {
  display: grid !important;
  gap: 0 !important;
  margin-top: 8px !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-schedule-item {
  display: grid !important;
  grid-template-columns: 63px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 9px 0 !important;
  border-top: 1px solid var(--theme-line) !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-schedule-item > div,
html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-notice-row > div {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-time,
html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-schedule-item small,
html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-notice-row small,
html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-notice-row time {
  color: var(--theme-muted) !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-schedule-item strong,
html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-notice-row strong {
  overflow: hidden !important;
  color: var(--theme-text) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-schedule-item em {
  padding: 3px 6px !important;
  border-radius: 5px !important;
  font-size: 8px !important;
  font-style: normal !important;
  white-space: nowrap !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-schedule-item em.is-blue { color: var(--ref-blue) !important; background: var(--ref-blue-soft) !important; }
html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-schedule-item em.is-orange { color: #d97706 !important; background: rgb(217 119 6 / 12%) !important; }
html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-schedule-item em.is-green { color: #079455 !important; background: rgb(7 148 85 / 12%) !important; }

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-task-tabs {
  display: flex !important;
  gap: 13px !important;
  margin-bottom: 5px !important;
  border-bottom: 1px solid var(--theme-line) !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-task-tabs button {
  position: relative !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--theme-muted) !important;
  font-size: 9px !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-task-tabs button.active {
  color: var(--ref-blue) !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-task-tabs button.active::after {
  position: absolute !important;
  right: 0 !important;
  bottom: -1px !important;
  left: 0 !important;
  height: 2px !important;
  background: var(--ref-blue) !important;
  content: "" !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-task-row {
  display: grid !important;
  grid-template-columns: 17px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  min-height: 31px !important;
  border-bottom: 1px solid var(--theme-line) !important;
  color: var(--theme-text) !important;
  font-size: 9px !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-task-row input {
  accent-color: var(--ref-blue) !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-task-row time {
  color: var(--theme-muted) !important;
  font-size: 8px !important;
  white-space: nowrap !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-task-row time.is-red {
  color: #e05252 !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-task-row.is-done {
  color: var(--theme-muted) !important;
  opacity: .72 !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-notice-row {
  display: grid !important;
  grid-template-columns: 8px minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 9px 0 !important;
  border-top: 1px solid var(--theme-line) !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-notice-dot {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  margin-top: 4px !important;
  border-radius: 50% !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-notice-dot.is-red { background: #ef4444 !important; }
html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-notice-dot.is-blue { background: var(--ref-blue) !important; }

html:root:not([data-theme="dark"]) body #step-create .project-home-nav {
  background: #ffffff !important;
  color: var(--theme-text) !important;
}

html:root:not([data-theme="dark"]) body #step-create .project-home-account-slot {
  border-color: var(--theme-line) !important;
}

html:root:not([data-theme="dark"]) body #step-create .project-home-account-slot > p {
  color: var(--theme-faint) !important;
}

/* Blue-only utility accents. Older editor modules used purple and pink for
   secondary actions; keep their meaning while matching the approved palette. */
html:root body {
  --ms-purple: #1677ff !important;
  --ms-pink: #3d96ff !important;
}

html:root body[data-project-home-mode="work"] #step-create .quick-action-icon.is-cyan,
html:root body[data-project-home-mode="work"] #step-create .quick-action-icon.is-violet,
html:root body[data-project-home-mode="work"] #step-create .quick-action-icon.is-pink {
  background: var(--neutral-accent, #a86f25) !important;
}

html:root body :is(
  .design-region-tools-head > span svg,
  .design-region-select svg,
  .design-region-select.active,
  .design-region-prompt-label textarea:focus,
  .design-region-selection,
  .design-region-selection > span,
  #step-edit .ribbon-history-actions .fluent-icon-shell,
  #step-edit .ribbon-ai-actions .fluent-icon-shell,
  #step-edit .inspector-tool-section:nth-child(2) .fluent-icon-shell
) {
  color: var(--neutral-accent) !important;
  border-color: var(--ref-blue) !important;
}

html:root body .design-region-selection,
html:root body .design-region-selection > span {
  background: var(--ref-blue) !important;
}

@media (max-width: 980px) {
  html body #step-create .project-home-account-slot {
    display: none !important;
  }
}

/* Final home-route chrome override. This selector intentionally carries the
   performance-tier attribute because the legacy header layer has a stronger
   desktop rule for the global brand block. */
@media (min-width: 981px) {
  html:root[data-performance-tier] body[data-active-step="create"] .app-shell > .topbar > .brand-block {
    display: none !important;
  }

  html:root[data-performance-tier] body[data-active-step="create"] .app-shell > .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  html:root[data-performance-tier] body[data-active-step="create"] .app-shell > .topbar > #editorWorkflowNav {
    display: none !important;
  }

  html:root[data-performance-tier] body[data-active-step="create"] .project-home-nav > .project-home-brand {
    display: grid !important;
  }
}

/* The right-hand information rail is part of the desktop composition even at
   1024-1279px. The old breakpoint hid it and left a large empty area. */
@media (min-width: 981px) and (max-width: 1279px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-content {
    display: block !important;
    min-width: 0 !important;
    padding: 26px 22px 58px !important;
    overflow: auto !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-work {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 280px !important;
    grid-template-rows: auto auto auto auto auto auto auto !important;
    align-content: start !important;
    column-gap: 18px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create #smartCreate,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .smart-create-assist,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .smart-create-manual,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .home-style-library {
    grid-column: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading {
    grid-row: 1 !important;
    min-height: 104px !important;
    grid-template-columns: minmax(0, 1fr) 140px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art {
    width: 140px !important;
    height: 104px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions {
    grid-row: 2 !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    min-height: 64px !important;
    margin: 10px 0 18px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions button {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding: 9px 8px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions .quick-action-icon {
    width: 28px !important;
    height: 28px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions strong {
    font-size: 10px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions small {
    font-size: 8px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-dashboard-rail {
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 1 / span 7 !important;
    align-content: start !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding-top: 58px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-work > .project-home-dashboard-rail {
    width: auto !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-panel {
    padding: 12px !important;
    border-radius: 11px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-panel-head {
    margin-bottom: 9px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-panel-head h3 {
    font-size: 14px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-schedule-item {
    grid-template-columns: 55px minmax(0, 1fr) auto !important;
    gap: 5px !important;
    padding: 8px 0 !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-schedule-item em {
    padding-inline: 4px !important;
    font-size: 7px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-task-row {
    grid-template-columns: 16px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 5px 0 !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-task-row time {
    grid-column: 2 !important;
    margin-top: -3px !important;
  }
}

/* The reference home is a focused dashboard, not an editor tab stack. Keep
   document tabs and workflow chrome available in the editor, but remove them
   from the project-home route so the rail and dashboard use the full height. */
@media (min-width: 981px) {
  html:root[data-theme] body .app-shell > .topbar > .project-home-global-search {
    display: grid !important;
    grid-template-columns: 15px minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-self: center !important;
    gap: 8px !important;
    width: min(100%, 360px) !important;
    min-width: 220px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
    border: 1px solid var(--theme-line) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--theme-panel) 92%, transparent) !important;
    color: var(--theme-muted) !important;
    overflow: hidden !important;
  }

  html:root[data-theme] body .app-shell > .topbar > .project-home-global-search > svg {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    color: var(--theme-faint) !important;
    stroke: currentColor !important;
  }

  html:root[data-theme] body .app-shell > .topbar > .project-home-global-search > input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--theme-text) !important;
    font-size: 11px !important;
    line-height: 30px !important;
  }

  html:root[data-theme] body .app-shell > .topbar > .project-home-global-search > input::placeholder {
    color: var(--theme-faint) !important;
    opacity: 1 !important;
  }

  html:root[data-theme] body .app-shell > .topbar > .project-home-global-search > kbd {
    display: block !important;
    min-width: 30px !important;
    padding: 2px 4px !important;
    border: 1px solid var(--theme-line) !important;
    border-radius: 4px !important;
    color: var(--theme-faint) !important;
    background: var(--theme-panel-soft) !important;
    font: 9px/1.2 Inter, "Noto Sans SC", sans-serif !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html:root:not([data-theme="dark"]) body .app-shell > .topbar > .project-home-global-search {
    background: #f7faff !important;
  }

  html:root[data-theme] body[data-active-step="create"] .app-shell {
    grid-template-rows: 56px 0 minmax(0, 1fr) !important;
  }

  html:root[data-theme] body[data-active-step="create"] #documentTabsBar {
    display: none !important;
  }

  html:root[data-theme] body[data-active-step="create"] .project-home-nav {
    min-height: 0 !important;
  }

  html:root[data-theme] body[data-active-step="create"] #step-create.project-start-screen {
    min-height: 0 !important;
  }
}

/* The work dashboard itself owns the two-column layout. Keeping this grid on
   the inner wrapper prevents the right rail from collapsing into the content
   column when the chat/work tabs share the outer shell. */
@media (min-width: 1280px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-content {
    display: block !important;
    min-width: 0 !important;
    overflow: auto !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-work {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 332px !important;
    grid-template-rows: auto auto auto auto auto auto auto !important;
    align-content: start !important;
    column-gap: 28px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-work > .project-home-dashboard-rail {
    width: auto !important;
    grid-column: 2 !important;
    grid-row: 1 / span 7 !important;
    padding-top: 58px !important;
  }
}

/* Keep every workbench section in the main column. The rail spans the full
   composition, so relying on implicit grid placement pushes the composer and
   recent projects far below the fold. */
@media (min-width: 981px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading { grid-column: 1 !important; grid-row: 1 !important; }
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions { grid-column: 1 !important; grid-row: 2 !important; }
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-work > #smartCreate { grid-column: 1 !important; grid-row: 3 !important; }
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent { grid-column: 1 !important; grid-row: 4 !important; }
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .smart-create-assist { grid-column: 1 !important; grid-row: 5 !important; }
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .smart-create-manual { grid-column: 1 !important; grid-row: 6 !important; }
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .home-style-library { grid-column: 1 !important; grid-row: 7 !important; }
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-work > .project-home-dashboard-rail { grid-column: 2 !important; grid-row: 1 / span 7 !important; }
}

/* The home dashboard is layered over the editor shell while a project is
   remembered. Remove that editor-only document strip when the work dashboard
   is actually visible; editor tabs remain available as soon as the dashboard
   is hidden and the edit surface is active again.
   IMPORTANT: JS only adds .hidden to #projectHomeWork in chat mode. In the
   live editor, #step-create is display:none but .project-home-work stays
   without .hidden �� so exclude .workbench-editor-active or the workflow
   module switcher (#editorWorkflowNav) and document tabs stay hidden. */
@media (min-width: 981px) {
  html:root[data-theme] body[data-project-home-mode="work"]:not(.workbench-editor-active):has(.project-home-work:not(.hidden)) .app-shell {
    grid-template-rows: 56px 0 minmax(0, 1fr) !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"]:not(.workbench-editor-active):has(.project-home-work:not(.hidden)) #documentTabsBar {
    display: none !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"]:not(.workbench-editor-active):has(.project-home-work:not(.hidden)) #editorWorkflowNav {
    display: none !important;
  }
}

/* Fluent icons are background glyphs. Older theme rules turned them into a
   solid currentColor square, which made several quick actions look missing. */
html:root[data-theme] body[data-project-home-mode="work"] #step-create .quick-action-icon .fluent-icon-shell,
html:root[data-theme] body[data-project-home-mode="work"] #step-create .quick-action-icon .fluent-icon {
  display: grid !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  place-items: center !important;
  color: #ffffff !important;
  filter: none !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .quick-action-icon .fluent-icon-shell {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .quick-action-icon .fluent-icon {
  display: block !important;
  background: currentColor !important;
  background-color: currentColor !important;
  background-image: none !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .quick-action-icon .fluent-icon-shell > svg,
html:root[data-theme] body[data-project-home-mode="work"] #step-create .quick-action-icon .fluent-icon > svg {
  display: none !important;
}

/* Final palette pass: legacy per-action colors must not reintroduce purple,
   pink, or cyan after the workbench theme is applied. */
html:root[data-theme="dark"] body[data-project-home-mode="work"] #step-create .project-home-quick-actions .quick-action-icon.is-blue,
html:root[data-theme="dark"] body[data-project-home-mode="work"] #step-create .project-home-quick-actions .quick-action-icon.is-cyan,
html:root[data-theme="dark"] body[data-project-home-mode="work"] #step-create .project-home-quick-actions .quick-action-icon.is-violet,
html:root[data-theme="dark"] body[data-project-home-mode="work"] #step-create .project-home-quick-actions .quick-action-icon.is-pink,
html:root:not([data-theme="dark"]) body[data-project-home-mode="work"] #step-create .project-home-quick-actions .quick-action-icon.is-blue,
html:root:not([data-theme="dark"]) body[data-project-home-mode="work"] #step-create .project-home-quick-actions .quick-action-icon.is-cyan,
html:root:not([data-theme="dark"]) body[data-project-home-mode="work"] #step-create .project-home-quick-actions .quick-action-icon.is-violet,
html:root:not([data-theme="dark"]) body[data-project-home-mode="work"] #step-create .project-home-quick-actions .quick-action-icon.is-pink {
  background: var(--neutral-accent) !important;
  background-color: var(--neutral-accent) !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="work"] #step-create .project-home-nav-item > svg,
html:root[data-theme="dark"] body[data-project-home-mode="work"] #step-create .project-home-nav-item > .fluent-icon-shell,
html:root[data-theme="dark"] body[data-project-home-mode="work"] #step-create .project-home-nav-item > i {
  color: var(--neutral-accent-strong, #88551a) !important;
  opacity: 1 !important;
  filter: none !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="work"] #step-create .project-home-nav-item > svg,
html:root:not([data-theme="dark"]) body[data-project-home-mode="work"] #step-create .project-home-nav-item > .fluent-icon-shell,
html:root:not([data-theme="dark"]) body[data-project-home-mode="work"] #step-create .project-home-nav-item > i {
  color: var(--neutral-accent-strong, #88551a) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Highest-specificity home cleanup: the compact project trigger belongs in
   the left navigation on the home route; keep it available in editor chrome. */
@media (min-width: 1024px) {
  html:root[data-theme] body[data-active-step="create"] .app-shell > .topbar .brand-block > #fileCenterBtn.file-center-trigger {
    display: none !important;
  }

  /* At compact desktop widths the legacy responsive layer hides these
     controls. They are part of the editor contract, so restore them only
     while the actual edit surface is active. */
  html:root[data-theme] body[data-active-step="edit"] #appShell.app-shell {
    grid-template-rows: 56px 38px minmax(0, 1fr) !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html:root[data-theme] body[data-active-step="edit"] #appShell.app-shell > .topbar {
    grid-template-columns: 218px minmax(260px, 1fr) minmax(390px, 520px) max-content !important;
  }

  html:root[data-theme] body[data-active-step="edit"] #appShell.app-shell > .topbar > #editorWorkflowNav {
    display: grid !important;
    width: 100% !important;
    visibility: visible !important;
  }

  html:root[data-theme] body[data-active-step="edit"] #appShell.app-shell > #documentTabsBar {
    display: grid !important;
    visibility: visible !important;
  }
}

/* Bottom information band: schedule, tasks, and notices belong after the
   creation workflow and recent work, rather than competing with the primary
   content in a narrow right rail. Keep the three cards balanced across the
   available desktop width. */
@media (min-width: 981px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-work {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto auto auto auto !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-work > .project-home-dashboard-rail {
    grid-column: 1 !important;
    grid-row: 8 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    align-items: start !important;
    gap: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-top: 18px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-work > .project-home-dashboard-rail > .dashboard-panel {
    min-width: 0 !important;
    height: 100% !important;
    align-self: stretch !important;
  }
}

@media (min-width: 981px) and (max-width: 1279px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-work > .project-home-dashboard-rail {
    grid-column: 1 !important;
    grid-row: 8 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding-top: 18px !important;
  }
}

/* Keep the workbench hero mark visually secondary to the headline. The art
   frame stays the same size so the heading alignment and surrounding rhythm
   do not shift when the logo is reduced. */
@media (min-width: 1280px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art img {
    width: 68px !important;
    height: 68px !important;
  }
}

@media (min-width: 981px) and (max-width: 1279px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art img {
    width: 58px !important;
    height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
  }
}

/* Align the work-home hero mark toward the right edge of its visual frame,
   matching the reference composition without changing the heading grid. */
@media (min-width: 1280px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art {
    transform: translateX(clamp(80px, 5vw, 132px)) !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art img {
    transform: translate(0, 24px) !important;
  }
}

@media (min-width: 981px) and (max-width: 1279px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art {
    transform: translateX(56px) !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art img {
    transform: translate(0, 14px) !important;
  }
}

/* Final project-card containment pass. Portrait covers use object-fit: contain;
   their fallback title must never remain visible around the image. Keep the
   cover, metadata, and action row in separate, predictable boxes. */
@media (min-width: 960px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent .project-hub-view {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    align-items: start !important;
    gap: 18px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent .project-card {
    position: relative !important;
    display: block !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent .project-card-main {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent .project-card-cover {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent .project-card-cover.has-image .project-card-cover-fallback {
    display: none !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent .project-card-cover-image {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent .project-card-copy {
    display: grid !important;
    min-width: 0 !important;
    min-height: 108px !important;
    align-content: start !important;
    gap: 5px !important;
    padding: 13px 14px 12px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent .project-card-copy strong {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: var(--theme-text) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent .project-card-copy em,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent .project-card-meta,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent .project-card-status {
    min-width: 0 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent .project-card-copy em,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent .project-card-meta > span {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent .project-card-legacy-only {
    display: none !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent .project-card-meta > span {
    flex: 1 1 auto !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent .project-card-meta > small,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent .project-card-status > small,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent .project-card-status > b {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}

/* Global icon clarity lock. A legacy theme selector applied the accent-tint
   background to every Fluent glyph, turning its mask into a dim square. The
   shell stays transparent; only the masked inner element receives the icon
   color. This covers the app shell and body-level dialogs/popovers. */
html:root[data-theme] body:not(#appShell) .fluent-icon-shell {
  color: inherit !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
}

html:root[data-theme] body:not(#appShell) .fluent-icon {
  display: block !important;
  color: inherit !important;
  background: currentColor !important;
  background-color: currentColor !important;
  background-image: none !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  opacity: 1 !important;
  filter: none !important;
}

html:root[data-theme] body:not(#appShell) svg.lucide {
  color: inherit !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  filter: none !important;
}

html:root[data-theme] body:not(#appShell) svg.lucide * {
  stroke: currentColor !important;
}

html:root[data-theme="dark"] body:not(#appShell) :is(
  button:not(:disabled):not([aria-disabled="true"]),
  a,
  summary,
  [role="button"]:not([aria-disabled="true"]),
  [role="tab"]:not([aria-disabled="true"])
) :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: #f4f8ff !important;
}

html:root:not([data-theme="dark"]) body:not(#appShell) :is(
  button:not(:disabled):not([aria-disabled="true"]),
  a,
  summary,
  [role="button"]:not([aria-disabled="true"]),
  [role="tab"]:not([aria-disabled="true"])
) :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: var(--neutral-muted) !important;
}

html:root[data-theme] body:not(#appShell) :is(
  .project-home-primary,
  .primary-btn,
  button.primary,
  button.recommended,
  button.active,
  button[aria-selected="true"],
  button[aria-pressed="true"],
  .project-home-nav-item.active,
  .editor-workflow-action.active,
  .ribbon-tool.active
) :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: #ffffff !important;
}

html:root[data-theme="dark"] body:not(#appShell) .project-home-nav-item :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: #ffffff !important;
}

html:root:not([data-theme="dark"]) body:not(#appShell) .project-home-nav-item :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: var(--neutral-accent) !important;
}

html:root[data-theme] body:not(#appShell) :is(button:disabled, [aria-disabled="true"]) :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  opacity: .46 !important;
}

html:root[data-theme] body:not(#appShell) :is(.project-delete-btn, .customer-account-logout) :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: #e5484d !important;
}

/* Two ID-level components are intentional here: the old :is() theme rule
   inherits ID specificity from editor selectors and otherwise wins even when
   declared earlier. Every app surface is a direct child of body. */
html:root[data-theme] body:not(#appShell) > :is(#appShell, *) .fluent-icon-shell {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html:root[data-theme] body:not(#appShell) > :is(#appShell, *) .fluent-icon {
  background: currentColor !important;
  background-color: currentColor !important;
  background-image: none !important;
}

html:root[data-theme] body:not(#appShell) :is(
  .project-home-nav-item.active,
  .quick-action-icon,
  .project-home-primary,
  .smart-create-submit,
  .primary-btn,
  button.primary,
  button.recommended,
  button.active,
  button[aria-selected="true"],
  button[aria-pressed="true"]
) :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: #ffffff !important;
}

html:root[data-theme] body:not(#appShell) > :is(#appShell, *) :is(
  .project-home-nav-item.active,
  .quick-action-icon,
  .project-home-primary,
  .smart-create-submit,
  .primary-btn,
  button.primary,
  button.recommended,
  button.active,
  button[aria-selected="true"],
  button[aria-pressed="true"]
) :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: #ffffff !important;
}

/* Home dashboard resize guard. The workbench can be resized while the work
   mode is mounted; keep the hero and its action strip inside the measured
   content column after the window grows again. A translated decorative mark
   used to expand the heading's scroll width and leave the right edge clipped. */
@media (min-width: 981px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-content,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-work,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-copy,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading {
    overflow: hidden !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art {
    max-width: 100% !important;
    transform: none !important;
    overflow: hidden !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art img {
    transform: translateY(24px) !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions {
    width: 100% !important;
    overflow: hidden !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions > button,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions > button > span:last-child {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions strong,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* At laptop widths two compact rows preserve readable action labels and stop
   seven narrow cards from turning into a clipped horizontal strip. */
@media (min-width: 981px) and (max-width: 1199px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    min-height: 0 !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions > button {
    min-height: 64px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art img {
    transform: translateY(14px) !important;
  }
}

/* PowerPoint-style page navigator: a white work surface with a stable page
   number gutter. Keep the real slide preview and its controls intact. */
@media (min-width: 981px) {
  html:root[data-theme] body #appShell #step-edit > .thumb-panel,
  html:root[data-theme] body #appShell #step-edit > .thumb-panel.panel,
  html:root[data-theme] body #appShell #step-edit > .thumb-panel #editorPagesView,
  html:root[data-theme] body #appShell #step-edit > .thumb-panel .thumbnail-list,
  html:root[data-theme] body #appShell #step-edit > .thumb-panel :is(.panel-head, .editor-left-tabs, .editor-left-actions, .slide-page-actions) {
    color: #17233a !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
  }

  html:root[data-theme] body #appShell #step-edit > .thumb-panel {
    border-right: 1px solid #d9e5f5 !important;
    box-shadow: 5px 0 18px rgb(31 78 145 / 7%) !important;
  }

  html:root[data-theme] body #appShell #step-edit > .thumb-panel .panel-head h2 {
    color: #17233a !important;
  }

  html:root[data-theme] body #appShell #step-edit > .thumb-panel .editor-left-tabs button:not(.active) {
    color: #52647d !important;
    background: transparent !important;
  }

  html:root[data-theme] body #appShell #step-edit > .thumb-panel .thumbnail-list {
    padding: 4px 4px 14px 0 !important;
    gap: 10px !important;
    scrollbar-color: #b9c9dd transparent !important;
  }

  html:root[data-theme] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb {
    position: relative !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    height: max-content !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    column-gap: 8px !important;
    row-gap: 7px !important;
    padding: 7px 4px 9px 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #17233a !important;
    box-shadow: none !important;
  }

  html:root[data-theme] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb::before {
    content: attr(data-page-number) !important;
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
    justify-self: stretch !important;
    padding-top: 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #17233a !important;
    box-shadow: none !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html:root[data-theme] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb > .workflow-thumb-image {
    grid-column: 2 !important;
    grid-row: 1 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border: 1px solid #d5dbe5 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 7px rgb(24 47 82 / 9%) !important;
  }

  html:root[data-theme] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb > .workflow-thumb-copy {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    padding: 0 12px 0 1px !important;
  }

  html:root[data-theme] body #appShell #step-edit > .thumb-panel .workflow-thumb-copy strong {
    color: #17233a !important;
  }

  html:root[data-theme] body #appShell #step-edit > .thumb-panel .workflow-thumb-copy small {
    color: #64748b !important;
  }

  html:root[data-theme] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb:is(.active, .selected) {
    background: #ffffff !important;
    box-shadow: none !important;
  }

  html:root[data-theme] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb:is(.active, .selected) > .workflow-thumb-image {
    border-color: var(--neutral-accent) !important;
    box-shadow: 0 0 0 2px var(--neutral-accent-soft) !important;
  }

  html:root[data-theme] body #appShell #step-edit > .thumb-panel .page-workflow-thumb > :is(.design-thumb-select, .representative-thumb-select) {
    left: 40px !important;
  }

  html:root[data-theme] body #appShell #step-edit > .thumb-panel .page-workflow-thumb > .workflow-thumb-state {
    right: 5px !important;
    bottom: 17px !important;
  }
}

/* In dark mode only the slide paper is white. The surrounding navigator
   remains part of the dark editor chrome, matching the reference layout. */
@media (min-width: 981px) {
  html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel,
  html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel.panel,
  html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel #editorPagesView,
  html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .thumbnail-list,
  html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel :is(.panel-head, .editor-left-tabs, .editor-left-actions, .slide-page-actions) {
    color: #f4f8ff !important;
    background: #0b192a !important;
    background-color: #0b192a !important;
    background-image: none !important;
  }

  html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel {
    border-right-color: rgb(104 155 219 / 22%) !important;
    box-shadow: none !important;
  }

  html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .panel-head h2,
  html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .workflow-thumb-copy strong {
    color: #f4f8ff !important;
  }

  html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .editor-left-tabs button:not(.active),
  html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .workflow-thumb-copy small {
    color: #a8b8ce !important;
  }

  html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .thumbnail-list {
    scrollbar-color: #516780 transparent !important;
  }

  html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb,
  html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb:is(.active, .selected) {
    color: #f4f8ff !important;
    background: #0b192a !important;
    background-color: #0b192a !important;
  }

  html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb::before {
    color: #ffffff !important;
  }

  html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb > .workflow-thumb-image {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
}

/* Final neutral-dark cascade lock. Legacy editor layers above contain
   high-specificity navy literals, so these desktop selectors must stay last. */
html:root[data-theme="dark"] {
  --theme-bg: #181818;
  --theme-chrome: #1d1d1d;
  --theme-panel: #202020;
  --theme-panel-soft: #272727;
  --theme-panel-raised: #2d2d2d;
  --theme-text: #f2f2f2;
  --theme-muted: #b3b3b3;
  --theme-faint: #7f7f7f;
  --theme-line: rgb(255 255 255 / 9%);
  --theme-line-strong: rgb(255 255 255 / 16%);
  --ref-blue: #3b82f6;
  --ref-blue-hover: #5b95f5;
  --ref-blue-deep: #2f6fd6;
  --ref-blue-soft: rgb(59 130 246 / 14%);
  --ref-blue-glow: rgb(59 130 246 / 18%);
  --du-bg: var(--theme-bg);
  --du-panel: var(--theme-panel);
  --du-surface: var(--theme-panel-soft);
  --du-surface-strong: var(--theme-panel-raised);
  --du-line: var(--theme-line);
  --du-line-strong: var(--theme-line-strong);
  --du-text: var(--theme-text);
  --du-muted: var(--theme-muted);
  --du-faint: var(--theme-faint);
  --du-primary: var(--ref-blue);
  --du-primary-hover: var(--ref-blue-hover);
  --du-primary-soft: var(--ref-blue-soft);
  --aw-bg: var(--theme-bg);
  --aw-sidebar: var(--theme-panel);
  --aw-chrome: var(--theme-chrome);
  --aw-surface: var(--theme-panel);
  --aw-surface-raised: var(--theme-panel-soft);
  --aw-surface-soft: #252525;
  --aw-surface-strong: var(--theme-panel-raised);
  --aw-text: var(--theme-text);
  --aw-text-secondary: var(--theme-muted);
  --aw-text-tertiary: var(--theme-faint);
  --aw-line: var(--theme-line);
  --aw-line-strong: var(--theme-line-strong);
  --aw-blue: var(--ref-blue);
  --aw-blue-hover: var(--ref-blue-hover);
  --aw-blue-soft: var(--ref-blue-soft);
  --af-bg: var(--theme-bg);
  --af-chrome: var(--theme-chrome);
  --af-panel: var(--theme-panel);
  --af-panel-soft: var(--theme-panel-soft);
  --af-panel-strong: var(--theme-panel-raised);
  --af-text: var(--theme-text);
  --af-muted: var(--theme-muted);
  --af-faint: var(--theme-faint);
  --af-line: var(--theme-line);
  --af-line-strong: var(--theme-line-strong);
  --af-accent: var(--ref-blue);
  --af-accent-hover: var(--ref-blue-hover);
  --af-accent-soft: var(--ref-blue-soft);
  --v2-bg: var(--theme-bg);
  --v2-panel: var(--theme-panel);
  --v2-panel-soft: var(--theme-panel-soft);
  --v2-panel-strong: var(--theme-panel-raised);
  --v2-text: var(--theme-text);
  --v2-muted: var(--theme-muted);
  --v2-faint: var(--theme-faint);
  --v2-line: var(--theme-line);
  --v2-line-strong: var(--theme-line-strong);
  --v2-blue: var(--ref-blue);
  --v2-blue-hover: var(--ref-blue-hover);
  --v2-blue-soft: var(--ref-blue-soft);
}

html:root[data-theme="dark"] body .app-shell > .topbar,
html:root[data-theme="dark"] body #documentTabsBar.document-tabs-bar,
html:root[data-theme="dark"] body #step-edit > .editor-top-ribbon,
html:root[data-theme="dark"] body #step-edit .office-status-bar {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-chrome) !important;
  background-color: var(--theme-chrome) !important;
  background-image: none !important;
  box-shadow: inset 0 -1px var(--theme-line) !important;
}

html:root[data-theme="dark"] body #step-edit :is(
  .office-canvas-shell,
  .office-canvas-body,
  .slide-stage,
  .slide-pasteboard
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: #151515 !important;
  background-color: #151515 !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body #step-edit > .inspector,
html:root[data-theme="dark"] body #step-edit > .editor-tool-rail {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-panel) !important;
  background-color: var(--theme-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body #step-edit > .inspector :is(
  .design-candidate-panel,
  .design-candidate-disclosure,
  .design-candidate-head,
  .design-candidate-body,
  .design-smart-card,
  .design-control-disclosure,
  .inspector-tool-section,
  .workflow-inspector-section,
  .workflow-inspector-card
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-panel-soft) !important;
  background-color: var(--theme-panel-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body .app-shell > .topbar > #editorWorkflowNav,
html:root[data-theme="dark"] body .app-shell > .topbar > #editorWorkflowNav > .editor-workflow-action {
  color: var(--theme-muted) !important;
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body .app-shell > .topbar > #editorWorkflowNav > .editor-workflow-action.active,
html:root[data-theme="dark"] body .app-shell > .topbar > #editorWorkflowNav[data-active-workflow] > .editor-workflow-action.active,
html:root[data-theme="dark"] body .app-shell > .topbar > #editorWorkflowNav > .editor-workflow-action[aria-selected="true"] {
  color: #ffffff !important;
  border-color: #454545 !important;
  background: #333333 !important;
  background-color: #333333 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body .document-tabs-bar .document-tab.active,
html:root[data-theme="dark"] body #step-edit > .thumb-panel .editor-left-tabs button.active,
html:root[data-theme="dark"] body #step-edit > .inspector .inspector-view-tabs button.active,
html:root[data-theme="dark"] body #step-edit #canvasViewSwitch > button.active,
html:root[data-theme="dark"] body #step-edit .ribbon-tool.active,
html:root[data-theme="dark"] body #step-edit #editorToolRail > button.active {
  color: #ffffff !important;
  border-color: #454545 !important;
  background: #333333 !important;
  background-color: #333333 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body .document-tabs-bar .document-tab.active {
  box-shadow: inset 0 -2px #686868 !important;
}

html:root[data-theme="dark"] body #step-edit > .thumb-panel .editor-left-tabs button.active::after {
  background: #8a8a8a !important;
}

html:root[data-theme="dark"] body #step-edit #addSlideBtn {
  color: #f0f0f0 !important;
  border-color: #464646 !important;
  background: #262626 !important;
  background-color: #262626 !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel,
html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel.panel,
html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel #editorPagesView,
html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .thumbnail-list,
html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel :is(.panel-head, .editor-left-tabs, .editor-left-actions, .slide-page-actions),
html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb,
html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb:is(.active, .selected) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-panel) !important;
  background-color: var(--theme-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb:is(.active, .selected) > .workflow-thumb-image {
  border-color: var(--neutral-accent) !important;
  box-shadow: 0 0 0 1px var(--neutral-accent-soft) !important;
}

html:root[data-theme="dark"] body :is(
  .primary-btn,
  button.primary,
  button.recommended,
  .assistant-send-btn,
  .project-home-primary,
  [data-category-action="generate"],
  [data-design-smart-action="generate-range"]
) {
  color: #ffffff !important;
  border-color: var(--ref-blue) !important;
  background: var(--ref-blue) !important;
  background-color: var(--ref-blue) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body:not(#appShell) :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: #dedede !important;
}

html:root[data-theme="dark"] body:not(#appShell) :is(
  .primary-btn,
  button.primary,
  button.recommended,
  .assistant-send-btn
) :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: #ffffff !important;
}

html:root[data-theme="dark"] body:not(#appShell) :is(.project-delete-btn, .customer-account-logout) :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: #ff6b6b !important;
}

/* Resize containment hardening: transformed hero artwork must not contribute
   to the workbench's measured width after a window is restored. The visual
   grid stays inside its art frame; intrinsic content remains available. */
@media (min-width: 981px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art {
    contain: layout paint !important;
    overflow: clip !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art .heading-art-grid,
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art .heading-art-glow {
    max-width: 100% !important;
    overflow: clip !important;
  }
}

/* /release-polish.css */
/* ==== consolidated from /doubao-dark.css (cascade order preserved) ==== */
/* Phase1 merge: doubao-dark + dashboard-interactions (cascade preserved). */
/* ===== merged from /doubao-dark.css ===== */
/* Neutral charcoal dark theme inspired by Doubao's desktop hierarchy. */
:root[data-theme="dark"] {
  --theme-bg: #181818;
  --theme-chrome: #1d1d1d;
  --theme-panel: #202020;
  --theme-panel-soft: #272727;
  --theme-panel-raised: #2d2d2d;
  --theme-text: #f2f2f2;
  --theme-muted: #b3b3b3;
  --theme-faint: #7f7f7f;
  --theme-line: rgb(255 255 255 / 9%);
  --theme-line-strong: rgb(255 255 255 / 16%);
  --ref-blue: #3b82f6;
  --ref-blue-hover: #5b95f5;
  --ref-blue-deep: #2f6fd6;
  --ref-blue-soft: rgb(59 130 246 / 14%);
  --ref-blue-glow: rgb(59 130 246 / 18%);

  --du-bg: var(--theme-bg);
  --du-panel: var(--theme-panel);
  --du-surface: var(--theme-panel-soft);
  --du-surface-strong: var(--theme-panel-raised);
  --du-line: var(--theme-line);
  --du-line-strong: var(--theme-line-strong);
  --du-text: var(--theme-text);
  --du-muted: var(--theme-muted);
  --du-faint: var(--theme-faint);
  --du-primary: var(--ref-blue);
  --du-primary-hover: var(--ref-blue-hover);
  --du-primary-soft: var(--ref-blue-soft);

  --aw-bg: var(--theme-bg);
  --aw-sidebar: var(--theme-panel);
  --aw-chrome: var(--theme-chrome);
  --aw-surface: var(--theme-panel);
  --aw-surface-raised: var(--theme-panel-soft);
  --aw-surface-soft: #252525;
  --aw-surface-strong: var(--theme-panel-raised);
  --aw-text: var(--theme-text);
  --aw-text-secondary: var(--theme-muted);
  --aw-text-tertiary: var(--theme-faint);
  --aw-line: var(--theme-line);
  --aw-line-strong: var(--theme-line-strong);
  --aw-blue: var(--ref-blue);
  --aw-blue-hover: var(--ref-blue-hover);
  --aw-blue-soft: var(--ref-blue-soft);

  --af-bg: var(--theme-bg);
  --af-chrome: var(--theme-chrome);
  --af-panel: var(--theme-panel);
  --af-panel-soft: var(--theme-panel-soft);
  --af-panel-strong: var(--theme-panel-raised);
  --af-text: var(--theme-text);
  --af-muted: var(--theme-muted);
  --af-faint: var(--theme-faint);
  --af-line: var(--theme-line);
  --af-line-strong: var(--theme-line-strong);
  --af-accent: var(--ref-blue);
  --af-accent-hover: var(--ref-blue-hover);
  --af-accent-soft: var(--ref-blue-soft);

  --v2-bg: var(--theme-bg);
  --v2-panel: var(--theme-panel);
  --v2-panel-soft: var(--theme-panel-soft);
  --v2-panel-strong: var(--theme-panel-raised);
  --v2-text: var(--theme-text);
  --v2-muted: var(--theme-muted);
  --v2-faint: var(--theme-faint);
  --v2-line: var(--theme-line);
  --v2-line-strong: var(--theme-line-strong);
  --v2-blue: var(--ref-blue);
  --v2-blue-hover: var(--ref-blue-hover);
  --v2-blue-soft: var(--ref-blue-soft);
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] body #appShell,
:root[data-theme="dark"] body #appShell > .workspace,
:root[data-theme="dark"] body #step-create,
:root[data-theme="dark"] body #step-edit.editor-layout,
:root[data-theme="dark"] body #step-edit > .canvas-area {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-bg) !important;
  background-color: var(--theme-bg) !important;
  background-image: none !important;
}

:root[data-theme="dark"] body #appShell.app-shell > header.topbar,
:root[data-theme="dark"] body #appShell > #documentTabsBar.document-tabs-bar,
:root[data-theme="dark"] body #appShell #step-edit > .editor-top-ribbon,
:root[data-theme="dark"] body #appShell #step-edit .office-status-bar {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-chrome) !important;
  background-color: var(--theme-chrome) !important;
  background-image: none !important;
  box-shadow: inset 0 -1px var(--theme-line) !important;
}

/* The legacy brand selector is deliberately very specific. Mirror it so the
   shell itself follows the neutral palette too. */
:root[data-theme="dark"] body #appShell.app-shell > header.topbar.topbar:has(#projectHomeBtn),
:root[data-theme="dark"] body #appShell.app-shell > header.topbar.topbar,
:root[data-theme="dark"][data-performance-tier] body #appShell.app-shell > header.topbar.topbar {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-chrome) !important;
  background-color: var(--theme-chrome) !important;
  background-image: none !important;
  box-shadow: inset 0 -1px var(--theme-line) !important;
}

:root[data-theme="dark"] body #appShell :is(
  #step-edit > .thumb-panel,
  #step-edit > .inspector,
  #step-edit > .editor-tool-rail,
  .assistant-drawer,
  .assistant-messages,
  .assistant-side-panel,
  .project-home-nav,
  .project-home-shell,
  .project-home-content
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-panel) !important;
  background-color: var(--theme-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] body #appShell #step-edit > .inspector :is(
  .design-candidate-panel .primary-btn,
  .design-smart-card .primary-btn,
  button[data-design-smart-action="generate-range"],
  button[data-category-action="generate"]
) {
  color: #ffffff !important;
  border-color: var(--ref-blue) !important;
  background: var(--ref-blue) !important;
  background-color: var(--ref-blue) !important;
  background-image: none !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] body #appShell #step-edit :is(
  .office-canvas-shell,
  .office-canvas-body,
  .slide-stage,
  .slide-pasteboard
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: #151515 !important;
  background-color: #151515 !important;
  background-image: none !important;
}

:root[data-theme="dark"] body #appShell #step-edit :is(
  #designCategoryToolbar,
  #editorRibbon,
  #editorRibbon > .ribbon-group,
  #editorRibbon .canvas-view-switch,
  .design-category-toolbar-main,
  .design-category-toolbar-workspace,
  .design-category-toolbar-settings,
  .design-category-toolbar-actions,
  .panel-head,
  .editor-left-tabs,
  .editor-left-actions,
  .inspector-view-tabs
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-chrome) !important;
  background-color: var(--theme-chrome) !important;
  background-image: none !important;
}

:root[data-theme="dark"] body #appShell #step-edit > .inspector :is(
  .design-candidate-panel,
  .design-candidate-disclosure,
  .design-candidate-head,
  .design-candidate-body,
  .design-smart-card,
  .design-control-disclosure,
  .inspector-tool-section,
  .workflow-inspector-section,
  .workflow-inspector-card
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-panel-soft) !important;
  background-color: var(--theme-panel-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] body #appShell #step-edit :is(
  .editor-top-ribbon button,
  .editor-top-ribbon input,
  .editor-top-ribbon select,
  .inspector button,
  .inspector input,
  .inspector select,
  .inspector textarea,
  .office-status-bar button
) {
  color: #e3e3e3 !important;
  border-color: var(--theme-line-strong) !important;
  background: #292929 !important;
  background-color: #292929 !important;
  background-image: none !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] body #appShell > header.topbar > #editorWorkflowNav,
:root[data-theme="dark"] body #appShell > header.topbar > #editorWorkflowNav > button.editor-workflow-action {
  color: var(--theme-muted) !important;
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] body #appShell > header.topbar > #editorWorkflowNav > button.editor-workflow-action.active,
:root[data-theme="dark"] body #appShell > header.topbar > #editorWorkflowNav[data-active-workflow] > button.editor-workflow-action.active,
:root[data-theme="dark"] body #appShell > #documentTabsBar.document-tabs-bar .document-tab.active,
:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .editor-left-tabs > button.active,
:root[data-theme="dark"] body #appShell #step-edit > .inspector .inspector-view-tabs > button.active,
:root[data-theme="dark"] body #appShell #step-edit #canvasViewSwitch > button.active,
:root[data-theme="dark"] body #appShell #step-edit #editorRibbon .ribbon-tool.active,
:root[data-theme="dark"] body #appShell #step-edit #editorToolRail > button.active {
  color: #ffffff !important;
  border-color: #454545 !important;
  background: #333333 !important;
  background-color: #333333 !important;
  background-image: none !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] body #appShell > #documentTabsBar.document-tabs-bar .document-tab.active {
  box-shadow: inset 0 -2px #686868 !important;
}

:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .editor-left-tabs > button.active::after {
  background: #8a8a8a !important;
}

:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel,
:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel.panel,
:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel #editorPagesView,
:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .thumbnail-list,
:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel :is(.panel-head, .editor-left-tabs, .editor-left-actions, .slide-page-actions),
:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb,
:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb:is(.active, .selected) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: var(--theme-panel) !important;
  background-color: var(--theme-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel #addSlideBtn {
  color: #f0f0f0 !important;
  border-color: #464646 !important;
  background: #262626 !important;
  background-color: #262626 !important;
  background-image: none !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb:is(.active, .selected) > .workflow-thumb-image {
  border-color: var(--ref-blue) !important;
  box-shadow: 0 0 0 1px rgb(59 130 246 / 44%) !important;
}

:root[data-theme="dark"] body #appShell :is(
  .primary-btn,
  button.primary,
  button.recommended,
  .assistant-send-btn,
  .project-home-primary,
  [data-category-action="generate"],
  [data-design-smart-action="generate-range"]
) {
  color: #ffffff !important;
  border-color: var(--ref-blue) !important;
  background: var(--ref-blue) !important;
  background-color: var(--ref-blue) !important;
  background-image: none !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] body #appShell .workmate-wordmark-copy > small {
  color: #ffffff !important;
}

:root[data-theme="dark"] body #appShell :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: #dedede !important;
}

:root[data-theme="dark"] body #appShell :is(
  .primary-btn,
  button.primary,
  button.recommended,
  .assistant-send-btn
) :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: #ffffff !important;
}

:root[data-theme="dark"] body #appShell :is(.project-delete-btn, .customer-account-logout) :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: #ff6b6b !important;
}

/* Review is a dark work surface around two white document pages.  The
   document pages stay white so the original and editable artwork remain
   faithful, while all chrome, gutters, labels, and empty states follow the
   charcoal desktop theme. */
:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode :is(
  .review-workflow-canvas,
  .review-workflow-compare,
  .review-workflow-preview,
  .review-dual-workspace,
  .review-dual-canvases,
  .review-canvas-pane,
  .review-canvas-stage,
  #slideCanvas
) {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background-color: #181818 !important;
  background-image: none !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .review-dual-workspace {
  background: #181818 !important;
}

:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode #slideCanvas {
  background: #181818 !important;
  background-color: #181818 !important;
}

:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .review-dual-toolbar {
  color: var(--theme-text) !important;
  border-color: var(--theme-line) !important;
  background: #202020 !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgb(255 255 255 / 2%), 0 8px 20px rgb(0 0 0 / 18%) !important;
}

:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode :is(
  .review-dual-title strong,
  .review-canvas-pane-head b,
  .review-zoom-controls output,
  .review-workflow-empty strong
) {
  color: #f2f2f2 !important;
}

:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode :is(
  .review-dual-title small,
  .review-canvas-pane-head em,
  .review-sync-note,
  .review-workflow-empty,
  .review-selected-issue span
) {
  color: #b3b3b3 !important;
}

:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode :is(
  .review-dual-actions,
  .review-sync-note,
  .review-zoom-controls,
  .review-selected-issue
) {
  border-color: var(--theme-line) !important;
}

:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .review-sync-note {
  background: #272727 !important;
}

:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .review-zoom-controls {
  background: #272727 !important;
}

:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .review-zoom-controls button {
  color: #f2f2f2 !important;
}

:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .review-zoom-controls button:hover {
  background: rgb(59 130 246 / 16%) !important;
  color: #70a7ff !important;
}

:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .review-canvas-pane-head {
  color: #f2f2f2 !important;
}

:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .review-canvas-pane-head svg,
:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .review-sync-note svg {
  color: #70a7ff !important;
}

:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .review-canvas-stage {
  outline-color: rgb(255 255 255 / 14%) !important;
  background: #151515 !important;
  box-shadow: 0 14px 34px rgb(0 0 0 / 32%) !important;
}

/* The paper and its image are intentionally excluded from the dark surface. */
:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .review-canvas-stage > .review-canvas-document,
:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode :is(
  .review-original-image,
  .review-design-image,
  .review-overlay-viewport
) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .review-selected-issue {
  color: #f2f2f2 !important;
  background: #2b2020 !important;
}

:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .review-workflow-empty {
  background: #202020 !important;
  border-color: var(--theme-line) !important;
}

/* ===== merged from /dashboard-interactions.css ===== */
/* Workbench dashboard interactions: compact desktop dialogs for schedule,
   tasks, and notices. The dashboard itself keeps the existing theme tokens. */
.dashboard-empty-row {
  display: grid;
  min-height: 48px;
  place-items: center;
  padding: 8px;
  color: var(--theme-muted, #667085);
  font-size: 10px;
  text-align: center;
}

.dashboard-calendar-nav {
  display: inline-flex;
  gap: 2px;
}

.dashboard-calendar-nav button {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--theme-muted, #667085);
  cursor: pointer;
}

.dashboard-calendar-nav button:hover,
.dashboard-icon-action:hover,
.dashboard-text-action:hover {
  background: var(--ref-blue-soft, rgb(59 130 246 / 14%)) !important;
  color: var(--ref-blue, #3b82f6) !important;
}

.dashboard-schedule-item,
.dashboard-notice-row {
  cursor: pointer;
}

.dashboard-schedule-item:hover,
.dashboard-notice-row:hover {
  background: var(--theme-panel-soft, #f7f8fa);
}

.dashboard-schedule-item:focus-visible,
.dashboard-notice-row:focus-visible,
.dashboard-task-tabs button:focus-visible,
.dashboard-task-delete:focus-visible {
  outline: 2px solid var(--ref-blue, #3b82f6);
  outline-offset: -2px;
}

.dashboard-task-empty {
  border-bottom: 1px solid var(--theme-line, #e5e7eb);
}

.dashboard-task-delete {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--theme-faint, #98a2b3);
  cursor: pointer;
  opacity: .72;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-task-row {
  grid-template-columns: 17px minmax(0, 1fr) auto 22px !important;
}

.dashboard-task-row:hover .dashboard-task-delete,
.dashboard-task-delete:focus-visible {
  opacity: 1;
}

.dashboard-task-delete:hover {
  background: rgb(217 45 32 / 10%);
  color: #d92d20;
}

html:root[data-theme="dark"] .dashboard-task-delete {
  color: var(--theme-faint) !important;
}

.dashboard-notice-row.is-read {
  opacity: .62;
}

.dashboard-dialog {
  width: min(560px, calc(100vw - 48px));
  max-width: 560px;
  padding: 0;
  border: 1px solid var(--theme-line-strong, rgb(16 24 40 / 16%));
  border-radius: 12px;
  background: var(--theme-panel, #fff);
  color: var(--theme-text, #1f2937);
  box-shadow: 0 24px 80px rgb(0 0 0 / 32%);
}

.dashboard-dialog::backdrop {
  background: rgb(15 23 42 / 46%);
  backdrop-filter: blur(3px);
}

.dashboard-dialog-card {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.dashboard-dialog-card > header,
.dashboard-dialog-card > footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-dialog-card > header {
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--theme-line, #e5e7eb);
}

.dashboard-dialog-card > header > div {
  display: grid;
  gap: 3px;
}

.dashboard-dialog-card > header span {
  color: var(--theme-muted, #667085);
  font-size: 10px;
}

.dashboard-dialog-card h2 {
  margin: 0;
  color: var(--theme-text, #1f2937);
  font-size: 18px;
}

.dashboard-dialog-close {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--theme-muted, #667085);
  cursor: pointer;
}

.dashboard-dialog-close:hover {
  background: var(--theme-panel-soft, #f7f8fa);
  color: var(--theme-text, #1f2937);
}

.dashboard-dialog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.dashboard-dialog-grid label {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.dashboard-dialog-grid label.wide {
  grid-column: 1 / -1;
}

.dashboard-dialog-grid label > span {
  color: var(--theme-muted, #667085);
  font-size: 10px;
  font-weight: 600;
}

.dashboard-dialog-grid input,
.dashboard-dialog-grid select,
.dashboard-dialog-grid textarea {
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid var(--theme-line-strong, #d0d5dd);
  border-radius: 7px;
  outline: 0;
  background: var(--theme-panel-soft, #f7f8fa);
  color: var(--theme-text, #1f2937);
  font: inherit;
  font-size: 12px;
}

.dashboard-dialog-grid textarea {
  resize: vertical;
}

.dashboard-dialog-grid input:focus,
.dashboard-dialog-grid select:focus,
.dashboard-dialog-grid textarea:focus {
  border-color: var(--ref-blue, #3b82f6);
  box-shadow: 0 0 0 3px var(--ref-blue-soft, rgb(59 130 246 / 14%));
}

.dashboard-dialog-card > footer {
  justify-content: flex-end;
  padding-top: 3px;
}

.dashboard-dialog-card > footer > span {
  flex: 1;
}

.dashboard-dialog-primary,
.dashboard-dialog-secondary,
.dashboard-dialog-danger,
.dashboard-dialog-link {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 7px;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.dashboard-dialog-primary {
  border: 1px solid var(--ref-blue, #3b82f6);
  background: var(--ref-blue, #3b82f6);
  color: #fff;
}

.dashboard-dialog-secondary,
.dashboard-dialog-danger,
.dashboard-dialog-link {
  border: 1px solid var(--theme-line-strong, #d0d5dd);
  background: transparent;
  color: var(--theme-text, #1f2937);
}

.dashboard-dialog-danger {
  border-color: rgb(217 45 32 / 30%);
  color: #d92d20;
}

.dashboard-dialog-link {
  min-height: 27px;
  padding-inline: 8px;
  color: var(--ref-blue, #3b82f6);
}

.dashboard-dialog-primary:hover { filter: brightness(1.08); }
.dashboard-dialog-secondary:hover,
.dashboard-dialog-danger:hover,
.dashboard-dialog-link:hover { background: var(--theme-panel-soft, #f7f8fa); }

.dashboard-notice-dialog-list {
  display: grid;
  gap: 0;
  max-height: 420px;
  overflow: auto;
}

.dashboard-notice-dialog-list article {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--theme-line, #e5e7eb);
}

.dashboard-notice-dialog-list article.is-read {
  opacity: .6;
}

.dashboard-notice-dialog-list article > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.dashboard-notice-dialog-list article strong {
  color: var(--theme-text, #1f2937);
  font-size: 12px;
}

.dashboard-notice-dialog-list article p {
  margin: 0;
  color: var(--theme-muted, #667085);
  font-size: 11px;
  line-height: 1.55;
}

.dashboard-notice-dialog-list article time {
  color: var(--theme-faint, #98a2b3);
  font-size: 10px;
  white-space: nowrap;
}

.dashboard-dialog-empty {
  margin: 0;
  padding: 28px 0;
  color: var(--theme-muted, #667085);
  font-size: 12px;
  text-align: center;
}

html:root[data-theme="dark"] .dashboard-dialog {
  border-color: var(--theme-line-strong) !important;
  background: var(--theme-panel) !important;
}

html:root[data-theme="dark"] .dashboard-dialog-grid input,
html:root[data-theme="dark"] .dashboard-dialog-grid select,
html:root[data-theme="dark"] .dashboard-dialog-grid textarea {
  border-color: var(--theme-line-strong) !important;
  background: #292929 !important;
  color: var(--theme-text) !important;
}

@media (max-width: 720px) {
  .dashboard-dialog-grid { grid-template-columns: 1fr; }
  .dashboard-dialog-grid label.wide { grid-column: auto; }
}

/* ==== consolidated from /release-polish.css (cascade order preserved) ==== */
/* Phase1 merge: release-polish + assistant-taskbar-layout (cascade preserved). */
/* ===== merged from /release-polish.css ===== */
/* Final cross-theme accessibility guards. This file intentionally loads last
   so old theme layers cannot erase readable foreground/background pairs. */

/* The editor ribbon is a frameless command strip. A legacy active-state rule
   used to add a border only to the Select command, making the first tool look
   like a different control from the rest of the strip. Keep selection visible
   through the blue surface, while the whole ribbon stays visually consistent. */
html body #step-edit #editorRibbon :is(button.ribbon-tool, button.ribbon-tool.active) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Image 2.0 progress belongs to the conversation itself. The placeholder is
   the future image canvas: it keeps the requested output ratio and is replaced
   by the completed artifact in the same latest-result position. */
html body #assistantDrawer .assistant-messages > .assistant-image-generation-progress {
  position: relative !important;
  z-index: 1 !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  margin: 8px 0 18px !important;
  pointer-events: auto !important;
}

html body #assistantDrawer .assistant-messages > .assistant-image-generation-progress.hidden { display: none !important; }

html body #assistantDrawer .assistant-image-generation-progress-card {
  width: min(100%, var(--assistant-generation-card-width, 540px)) !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body #assistantDrawer .assistant-image-generation-progress-canvases {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100%;
}

html body #assistantDrawer .assistant-image-generation-progress[data-count="2"] .assistant-image-generation-progress-card,
html body #assistantDrawer .assistant-image-generation-progress[data-count="3"] .assistant-image-generation-progress-card,
html body #assistantDrawer .assistant-image-generation-progress[data-count="4"] .assistant-image-generation-progress-card { width: 100% !important; }

html body #assistantDrawer .assistant-image-generation-progress[data-count="2"] .assistant-image-generation-progress-canvases,
html body #assistantDrawer .assistant-image-generation-progress[data-count="3"] .assistant-image-generation-progress-canvases,
html body #assistantDrawer .assistant-image-generation-progress[data-count="4"] .assistant-image-generation-progress-canvases { grid-template-columns: repeat(2, minmax(0, 1fr)); }

html body #assistantDrawer .assistant-image-generation-progress-visual {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: var(--assistant-generation-ratio, 1 / 1) !important;
  max-height: var(--assistant-generation-visual-max-height, 420px) !important;
  margin-inline: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  isolation: isolate;
  border: 0 !important;
  border-radius: 16px !important;
  background: #25282d !important;
  box-shadow: none !important;
}

html body #assistantDrawer .assistant-image-generation-progress-visual::before {
  position: absolute;
  inset: -30%;
  z-index: -2;
  content: "";
  background:
    radial-gradient(circle at 18% 18%, rgb(73 92 116 / 92%) 0 13%, transparent 43%),
    radial-gradient(circle at 83% 26%, rgb(49 63 92 / 90%) 0 15%, transparent 45%),
    radial-gradient(circle at 66% 82%, rgb(91 65 80 / 88%) 0 14%, transparent 48%),
    radial-gradient(circle at 18% 76%, rgb(51 77 84 / 82%) 0 12%, transparent 45%),
    linear-gradient(135deg, #252a30 0%, #313641 48%, #28272f 100%) !important;
  background-size: 145% 145%, 155% 155%, 150% 150%, 160% 160%, 100% 100% !important;
  animation: assistant-image-generation-canvas-gradient 6.8s ease-in-out infinite alternate !important;
}

html body #assistantDrawer .assistant-image-generation-progress-visual::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(180deg, rgb(0 0 0 / 4%) 0%, transparent 48%, rgb(0 0 0 / 26%) 100%),
    radial-gradient(circle at 50% 42%, transparent 0 32%, rgb(8 10 14 / 18%) 100%) !important;
}

@keyframes assistant-image-generation-canvas-gradient {
  0% { transform: translate3d(-5%, -4%, 0) scale(1.04); background-position: 0% 20%, 90% 10%, 70% 90%, 10% 80%, 50% 50%; }
  50% { transform: translate3d(3%, 1%, 0) scale(1.08); background-position: 24% 4%, 70% 42%, 95% 66%, 34% 98%, 50% 50%; }
  100% { transform: translate3d(-1%, 5%, 0) scale(1.05); background-position: 12% 45%, 100% 24%, 55% 100%, 0% 62%, 50% 50%; }
}

html body #assistantDrawer .assistant-image-generation-progress-percent {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  z-index: 2;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 12px rgb(0 0 0 / 48%);
  font-variant-numeric: tabular-nums;
}

html body #assistantDrawer .assistant-image-generation-progress-visual-label {
  top: auto !important;
  bottom: 22px !important;
  left: 18px !important;
  z-index: 2;
  color: rgb(255 255 255 / 74%) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: .04em;
}

html body #assistantDrawer .assistant-image-generation-progress-track {
  right: 18px !important;
  bottom: 12px !important;
  left: 18px !important;
  z-index: 2;
  height: 3px !important;
  border-radius: 99px;
  background: rgb(255 255 255 / 20%) !important;
}

html body #assistantDrawer .assistant-image-generation-progress-track > i {
  background: #ffffff !important;
  box-shadow: 0 0 12px rgb(255 255 255 / 46%) !important;
  transition: width .4s ease !important;
}

html body #assistantDrawer .assistant-image-generation-progress-visual.is-completed .assistant-image-generation-progress-track > i {
  background: #2fc787 !important;
  box-shadow: 0 0 12px rgb(47 199 135 / 62%) !important;
}

html body #assistantDrawer .assistant-image-generation-progress-visual.is-completed::before {
  animation-play-state: paused !important;
}

/* A completed progress canvas shows its actual page, with all labels outside
   the image so no percentage badge covers the design or its text. */
html body #assistantDrawer .assistant-image-generation-progress-visual.has-image {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-content: start !important;
  aspect-ratio: auto !important;
  max-height: none !important;
  border-radius: 0 !important;
  background: #f5f7fb !important;
  box-shadow: inset 0 0 0 1px #cfdae9 !important;
}

html body #assistantDrawer .assistant-image-generation-progress-visual.has-image::before,
html body #assistantDrawer .assistant-image-generation-progress-visual.has-image::after { display: none !important; }

html body #assistantDrawer .assistant-image-generation-preview {
  position: relative !important;
  display: block !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #e9eef5 !important;
  cursor: zoom-in !important;
}

html body #assistantDrawer .assistant-image-generation-preview img {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

html body #assistantDrawer .assistant-image-generation-preview:hover,
html body #assistantDrawer .assistant-image-generation-preview:focus-visible {
  outline: 2px solid #3974d1 !important;
  outline-offset: -2px !important;
}

html body #assistantDrawer .has-image .assistant-image-generation-progress-percent,
html body #assistantDrawer .has-image .assistant-image-generation-progress-visual-label {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  color: #34475f !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  text-shadow: none !important;
}

html body #assistantDrawer .has-image .assistant-image-generation-progress-percent { grid-column: 2 !important; grid-row: 2 !important; color: #147448 !important; }
html body #assistantDrawer .has-image .assistant-image-generation-progress-visual-label { grid-column: 1 !important; grid-row: 2 !important; }
html body #assistantDrawer .has-image .assistant-image-generation-progress-track { display: none !important; }
html body #assistantDrawer .assistant-image-generation-page-error {
  position: static;
  min-height: 0;
  overflow-wrap: anywhere;
  color: #fff0eb;
  font-size: 12px;
  line-height: 1.5;
}

html body #assistantDrawer .assistant-image-generation-progress-visual.has-error {
  display: flex !important;
  flex-direction: column !important;
  aspect-ratio: auto !important;
  max-height: none !important;
  min-height: 210px !important;
  padding: 16px !important;
  overflow: visible !important;
  background: #283244 !important;
}

html body #assistantDrawer .assistant-image-generation-progress-visual.has-error::before,
html body #assistantDrawer .assistant-image-generation-progress-visual.has-error::after,
html body #assistantDrawer .has-error .assistant-image-generation-progress-track { display: none !important; }

html body #assistantDrawer .has-error .assistant-image-generation-progress-percent,
html body #assistantDrawer .has-error .assistant-image-generation-progress-visual-label {
  position: static !important;
  margin: 0 0 10px !important;
  line-height: 1.4 !important;
}

html body #assistantDrawer .assistant-image-generation-page-error p { margin: 0 0 7px !important; }
html body #assistantDrawer .assistant-image-generation-page-error details { margin: 0 !important; }
html body #assistantDrawer .assistant-image-generation-page-error summary { cursor: pointer; color: #b8d8ff !important; font-size: 11px; }
html body #assistantDrawer .assistant-image-generation-page-error details > div { max-height: 180px; overflow: auto; white-space: pre-wrap; padding: 8px 0; }
html body #assistantDrawer .assistant-failed-page-actions {
  position: relative;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}

html body #assistantDrawer .assistant-failed-page-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border: 1px solid #81b6ff !important;
  border-radius: 7px !important;
  color: #fff !important;
  background: #236bd3 !important;
  box-shadow: none !important;
  cursor: pointer;
}

html body #assistantDrawer .assistant-failed-page-icon svg { width: 18px !important; height: 18px !important; display: block !important; }
html body #assistantDrawer .assistant-failed-page-icon:hover { background: #1355b6 !important; }
html body #assistantDrawer .assistant-failed-page-icon:disabled { opacity: .45; cursor: wait; }
html body #assistantDrawer .assistant-failed-page-icon:focus-visible { outline: 2px solid #b8d8ff; outline-offset: 2px; }
html body #assistantDrawer .assistant-failed-page-model-menu {
  position: absolute;
  right: 0;
  bottom: 42px;
  z-index: 20;
  display: grid;
  width: min(270px, 78vw);
  gap: 3px;
  padding: 9px;
  border: 1px solid #b5c9e5;
  border-radius: 10px;
  color: #23354e;
  background: #f7faff;
  box-shadow: 0 8px 24px #0b142c55;
}

html body #assistantDrawer .assistant-image-generation-progress-visual:has(.assistant-failed-page-model-menu) { z-index: 5 !important; }

html body #assistantDrawer .assistant-failed-page-model-menu strong { padding: 5px 7px; font-size: 11px; }
html body #assistantDrawer .assistant-failed-page-model-menu button {
  min-height: 32px;
  padding: 7px;
  border: 0;
  border-radius: 5px;
  text-align: left;
  font-size: 11px;
  color: #23354e;
  background: transparent;
  cursor: pointer;
}

html body #assistantDrawer .assistant-failed-page-model-menu button:hover,
html body #assistantDrawer .assistant-failed-page-model-menu button:focus-visible { background: #dfedff; outline: none; }

html body #assistantDrawer .assistant-image-generation-progress-card > footer {
  display: flex !important;
  min-height: 42px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body #assistantDrawer .assistant-image-generation-progress-card > footer > span {
  display: grid;
  min-width: 0;
  gap: 2px;
  overflow: visible !important;
  white-space: normal !important;
}

html body #assistantDrawer .assistant-image-generation-progress-card > footer strong {
  overflow: hidden;
  color: var(--v2-text, #ececec);
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #assistantDrawer .assistant-image-generation-progress-card > footer small {
  color: var(--v2-muted, #9b9b9b);
  font-size: 9px;
  line-height: 1.35;
}

html body #assistantDrawer .assistant-image-generation-progress-card > footer > button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgb(255 255 255 / 14%) !important;
  border-radius: 7px;
  background: #272727 !important;
  color: #dedede !important;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

html:root:not([data-theme="dark"]) body #assistantDrawer .assistant-image-generation-progress-card > footer strong { color: #202124; }
html:root:not([data-theme="dark"]) body #assistantDrawer .assistant-image-generation-progress-card > footer small { color: #687386; }
html:root:not([data-theme="dark"]) body #assistantDrawer .assistant-image-generation-progress-card > footer > button {
  border-color: #d6dce5 !important;
  background: #ffffff !important;
  color: #334155 !important;
}

@media (prefers-reduced-motion: reduce) {
  html body #assistantDrawer .assistant-image-generation-progress-visual::before { animation: none !important; }
}

html body #assistantDrawer #assistantImageGenerationProgress .assistant-image-generation-progress-card {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body .assistant-delivery-preview {
  margin-top: 12px;
  border-top: 1px solid var(--theme-line, #d8dde6);
  background: var(--theme-panel, #fff);
}

html body .assistant-delivery-preview > summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  cursor: pointer;
  list-style: none;
}

html body .assistant-delivery-preview > summary::-webkit-details-marker { display: none; }

html body .assistant-delivery-preview > summary > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 2px 8px;
}

html body .assistant-delivery-preview > summary > span > i {
  grid-row: 1 / 3;
  width: 18px;
  height: 18px;
  color: var(--theme-accent, #146ef5);
}

html body .assistant-delivery-preview > summary strong,
html body .assistant-delivery-preview > summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .assistant-delivery-preview > summary small { color: var(--theme-muted, #697386); }

html body .assistant-delivery-preview > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-bottom: 12px;
}

html body .assistant-delivery-preview figure { min-width: 0; margin: 0; }

html body .assistant-delivery-preview figure button {
  width: 100%;
  padding: 0;
  border: 0;
  background: #e9ecef;
  cursor: zoom-in;
}

html body .assistant-delivery-preview figure img {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

html body .assistant-delivery-preview figcaption {
  padding-top: 6px;
  color: var(--theme-muted, #697386);
  font-size: 12px;
}

html body .assistant-delivery-preview > footer,
html body .assistant-delivery-preview-prompt > footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 2px 12px;
}

html body .assistant-delivery-preview > footer button,
html body .assistant-delivery-preview-prompt button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--theme-line, #d8dde6);
  border-radius: 8px;
  background: var(--theme-panel, #fff);
  color: var(--theme-muted, #697386);
  font-size: 12px;
  cursor: pointer;
}

html body .assistant-delivery-preview > footer button.primary,
html body .assistant-delivery-preview-prompt button.primary {
  border-color: var(--theme-accent, #146ef5);
  background: var(--theme-accent, #146ef5);
  color: #fff;
}

html body .assistant-delivery-preview > footer button:disabled,
html body .assistant-delivery-preview-prompt button:disabled {
  opacity: .65;
  cursor: default;
}

html body .assistant-delivery-preview > footer svg,
html body .assistant-delivery-preview-prompt svg {
  width: 14px;
  height: 14px;
}

html body .assistant-delivery-preview-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--theme-accent, #146ef5) 38%, var(--theme-line, #d8dde6));
  border-radius: 12px;
  background: color-mix(in srgb, var(--theme-accent, #146ef5) 6%, var(--theme-panel, #fff));
}

html body .assistant-delivery-preview-prompt > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

html body .assistant-delivery-preview-prompt strong {
  color: var(--theme-text, #172033);
  font-size: 13px;
}

html body .assistant-delivery-preview-prompt span {
  color: var(--theme-muted, #697386);
  font-size: 12px;
  line-height: 1.5;
}

html[data-theme="dark"] body .assistant-delivery-preview {
  border-color: #31343a;
  background: #141518;
}

html[data-theme="dark"] body .assistant-delivery-preview figure button { background: #202228; }
html[data-theme="dark"] body .assistant-delivery-preview-prompt {
  border-color: rgb(77 155 255 / 38%);
  background: rgb(77 155 255 / 8%);
}

html[data-theme="dark"] body .assistant-delivery-preview-prompt button:not(.primary),
html[data-theme="dark"] body .assistant-delivery-preview > footer button:not(.primary) {
  background: #1b1d22;
  color: var(--neutral-line);
}
html body #step-edit #editorRibbon button.ribbon-tool:hover:not(:disabled) {
  background: color-mix(in srgb, var(--apple-ui-blue, #0a84ff) 7%, var(--apple-ui-surface, #fff)) !important;
}
html body #step-edit #editorRibbon button.ribbon-tool.active,
html body #step-edit #editorRibbon button.ribbon-tool.active:hover:not(:disabled) {
  border: 0 !important;
  background: var(--apple-ui-blue-soft, rgba(10, 132, 255, .12)) !important;
  color: var(--apple-ui-blue-strong, #0071e3) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body #step-edit #editorRibbon button.ribbon-tool.active,
html[data-theme="dark"] body #step-edit #editorRibbon button.ribbon-tool.active:hover:not(:disabled) {
  background: rgba(41, 151, 255, .16) !important;
  color: #6db7ff !important;
}
/* Match the specificity of the legacy theme's active selector so its border
   cannot win the cascade on the Select command. */
html:root:not([data-theme="dark"]) body #step-edit > .editor-top-ribbon #editorRibbon button.ribbon-tool.active,
html:root[data-theme="dark"] body #step-edit > .editor-top-ribbon #editorRibbon button.ribbon-tool.active {
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html:root:not([data-theme="dark"]) body #appShell #step-edit > .editor-top-ribbon #editorRibbon button.ribbon-tool,
html:root[data-theme="dark"] body #appShell #step-edit > .editor-top-ribbon #editorRibbon button.ribbon-tool {
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:not([data-theme="dark"]) body #step-edit :is(
  #addSlideBtn,
  .primary-btn,
  button.primary,
  button.recommended,
  [data-category-action="generate"],
  [data-design-smart-action="generate-range"]
):not(:disabled) {
  background-color: var(--neutral-accent, #a86f25) !important;
  color: var(--neutral-accent-text, #ffffff) !important;
}

/* Delivery preflight surfaces the category contract and the generated-image
   gate next to the ordinary export checks. Keep both opaque and compact so
   the result remains legible in either theme. */
.delivery-preflight-panel .preflight-standard,
.delivery-preflight-panel .preflight-quality-gate {
  display: grid;
  gap: 3px;
  margin-top: 7px;
  border: 1px solid var(--theme-line, var(--store-line));
  border-left: 3px solid var(--theme-accent, #1677ff);
  padding: 7px 8px;
  background: var(--theme-panel-raised, var(--theme-panel, var(--store-card)));
}

.delivery-preflight-panel .preflight-standard > span,
.delivery-preflight-panel .preflight-quality-gate > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  color: var(--theme-text, var(--store-text));
  font-size: 10px;
}

.delivery-preflight-panel .preflight-standard svg,
.delivery-preflight-panel .preflight-quality-gate svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--theme-accent, #1677ff);
}

.delivery-preflight-panel .preflight-standard b,
.delivery-preflight-panel .preflight-quality-gate b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-preflight-panel .preflight-standard small,
.delivery-preflight-panel .preflight-quality-gate small,
.delivery-preflight-panel .preflight-standard em {
  overflow: hidden;
  color: var(--theme-muted, var(--store-secondary));
  font-size: 8px;
  font-style: normal;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-preflight-panel .preflight-quality-gate.blocked {
  border-left-color: #dc2626;
}

.delivery-preflight-panel .preflight-quality-gate.blocked svg,
.delivery-preflight-panel .preflight-quality-gate.blocked small {
  color: #dc2626;
}

.delivery-preflight-panel .preflight-quality-gate.ready {
  border-left-color: #1677ff;
}

/* The professional tool grid has legacy button rules with higher cascade
   priority. Keep the safe repair action visibly actionable in dark mode too. */
html body #safeCanvasRepairBtn {
  background-color: #1677ff !important;
  border-color: #1677ff !important;
  color: #ffffff !important;
}

/* Explainable style-route scoring: compact enough for the inspector while
   retaining a readable visual comparison for desktop route cards. */
.style-professional-score {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--v2-blue) 24%, var(--v2-line));
  border-radius: 5px;
  background: color-mix(in srgb, var(--v2-blue) 5%, var(--v2-panel));
}
.style-professional-score.compact { gap: 5px; padding: 6px 7px; }
.style-professional-score-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.style-professional-score-head strong { color: var(--v2-text); font-size: 10px; }
.style-professional-score-head small { color: var(--v2-faint); font-size: 8px; }
.style-professional-score-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 8px; }
.style-professional-score-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) 20px; align-items: center; gap: 4px; min-width: 0; }
.style-professional-score-item b { overflow: hidden; color: var(--v2-muted); font-size: 8px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.style-professional-score-item i { display: block; height: 4px; overflow: hidden; border-radius: 99px; background: var(--v2-panel-soft); }
.style-professional-score-item i em { display: block; height: 100%; border-radius: inherit; background: var(--v2-blue); }
.style-professional-score-item small { color: var(--v2-text); font-size: 8px; font-variant-numeric: tabular-nums; text-align: right; }
.style-professional-score-rationale { display: block; margin: 0; color: var(--v2-muted); font-size: 8px; line-height: 1.45; }
.style-professional-score-risks { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--v2-faint); font-size: 8px; line-height: 1.35; }
.style-professional-score-risks svg { width: 11px; height: 11px; flex: 0 0 auto; color: #d97706; }
.style-professional-score-risks span { padding: 2px 4px; border: 1px solid var(--v2-line); border-radius: 3px; }
@media (max-width: 900px) {
  .style-professional-score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html body #safeCanvasRepairBtn:hover,
html body #safeCanvasRepairBtn:focus-visible {
  background-color: #0b55d4 !important;
  border-color: #0b55d4 !important;
  color: #ffffff !important;
}
html:root[data-theme="dark"] body #appShell #step-edit #safeCanvasRepairBtn,
html:root:not([data-theme="dark"]) body #appShell #step-edit #safeCanvasRepairBtn {
  background: #1677ff !important;
  border-color: #1677ff !important;
  color: #ffffff !important;
}

/* Design director report: keep the score actionable and legible in both themes. */
.design-director-report-panel {
  display: grid;
  gap: 9px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--aw-line);
  border-radius: 6px;
  background: var(--aw-surface-raised, var(--aw-surface));
  color: var(--aw-text, #17202c);
}
.design-director-report-panel.hidden { display: none; }
.design-director-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.design-director-head > span { display: grid; grid-template-columns: 15px minmax(0, 1fr); align-items: center; column-gap: 5px; row-gap: 2px; min-width: 0; }
.design-director-head > span svg { grid-row: span 2; width: 14px; height: 14px; color: var(--neutral-accent, #a86f25); }
.design-director-head strong { min-width: 0; font-size: 11px; }
.design-director-head small { grid-column: 2; overflow: hidden; color: var(--aw-text-tertiary, #687386); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.design-director-head > b { color: var(--neutral-accent, #a86f25); font-size: 20px; line-height: 1; }
.design-director-head > b em { margin-left: 2px; color: var(--aw-text-tertiary, #687386); font-size: 9px; font-style: normal; font-weight: 500; }
.design-director-profile { display: grid; gap: 4px; border: 1px solid var(--aw-line); border-left: 3px solid var(--aw-blue); padding: 7px 8px; background: var(--aw-surface-soft); }
.design-director-profile-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.design-director-profile-head span { color: var(--aw-text-tertiary); font-size: 8px; }
.design-director-profile-head strong { min-width: 0; overflow: hidden; color: var(--aw-text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.design-director-profile-meta { display: flex; align-items: center; gap: 8px; color: var(--aw-text-secondary); font-size: 8px; }
.design-director-profile-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.design-director-profile-focus, .design-director-profile-missing { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 5px; color: var(--aw-text-secondary); font-size: 8px; line-height: 1.35; }
.design-director-profile-focus b, .design-director-profile-missing b { color: var(--aw-blue); font-size: 8px; }
.design-director-profile-focus span, .design-director-profile-missing span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.design-director-profile-missing { color: #b45309; }
.design-director-profile-missing b { color: #b45309; }
.design-director-output { display: grid; gap: 5px; border-top: 1px solid var(--aw-line); padding-top: 7px; }
.design-director-output-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.design-director-output-head span { color: var(--aw-text-tertiary); font-size: 8px; }
.design-director-output-head strong { color: var(--aw-text); font-size: 10px; }
.design-director-output-counts { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--aw-text-tertiary); font-size: 8px; }
.design-director-output-counts span { white-space: nowrap; }
.design-director-output-counts .ready { color: var(--aw-blue); }
.design-director-output-counts .review { color: #b45309; }
.design-director-output-counts .attention { color: #dc2626; }
.design-director-output-counts .missing { color: var(--aw-text-tertiary); }
.design-director-output-pages { display: flex; flex-wrap: wrap; gap: 4px; }
.design-director-output-pages span { display: inline-flex; min-width: 41px; align-items: center; justify-content: center; border: 1px solid var(--aw-line); border-radius: 3px; padding: 3px 4px; color: var(--aw-text-secondary); background: var(--aw-surface-soft); font-size: 8px; line-height: 1; }
.design-director-output-pages span.ready { border-color: color-mix(in srgb, var(--aw-blue) 45%, var(--aw-line)); color: var(--aw-blue); }
.design-director-output-pages span.review { border-color: #d97706; color: #b45309; }
.design-director-output-pages span.attention { border-color: #dc2626; color: #dc2626; }
.design-director-dimensions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 9px; }
.design-director-dimension { display: grid; gap: 3px; min-width: 0; }
.design-director-dimension > span { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 9px; }
.design-director-dimension > span strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.design-director-dimension > span em { color: var(--neutral-accent, #a86f25); font-size: 9px; font-style: normal; font-weight: 700; }
.design-director-dimension > div { height: 4px; overflow: hidden; border-radius: 2px; background: var(--aw-surface-strong); }
.design-director-dimension > div i { display: block; height: 100%; border-radius: inherit; background: var(--aw-blue); }
.design-director-dimension small { overflow: hidden; color: var(--aw-text-tertiary); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.design-director-summary { color: var(--aw-text-secondary); font-size: 9px; line-height: 1.45; }
.design-director-stale { display: flex; align-items: center; gap: 5px; padding: 6px 7px; border-left: 2px solid #d97706; color: var(--aw-text-secondary); background: var(--aw-surface-soft); font-size: 8px; line-height: 1.35; }
.design-director-stale svg { flex: 0 0 auto; width: 12px; height: 12px; color: #d97706; }
.design-director-issues { display: grid; gap: 5px; max-height: 170px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.design-director-issues li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 5px; padding: 6px; border-left: 2px solid var(--aw-blue); background: var(--aw-surface-soft); }
.design-director-issues li.error { border-left-color: #dc2626; }
.design-director-issues li > span { color: var(--neutral-accent, #a86f25); }
.design-director-issues li.error > span { color: #dc2626; }
.design-director-issues svg { width: 13px; height: 13px; }
.design-director-issues div { display: grid; gap: 2px; min-width: 0; }
.design-director-issues strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.design-director-issues small { color: var(--aw-text-tertiary); font-size: 8px; line-height: 1.35; }
.design-director-empty { display: flex; align-items: center; gap: 6px; padding: 7px; color: var(--aw-blue); background: var(--aw-surface-soft); font-size: 9px; }
.design-director-empty svg { width: 14px; height: 14px; }
.design-director-next { border-top: 1px solid var(--aw-line); padding-top: 6px; }
.design-director-next summary { display: flex; align-items: center; justify-content: space-between; color: var(--aw-text-secondary); cursor: pointer; font-size: 9px; font-weight: 700; list-style: none; }
.design-director-next summary::-webkit-details-marker { display: none; }
.design-director-next summary span { display: grid; width: 16px; height: 16px; place-items: center; border-radius: 4px; color: var(--aw-blue); background: var(--aw-surface-strong); font-size: 8px; }
.design-director-next ol { display: grid; gap: 3px; margin: 6px 0 0; padding-left: 17px; color: var(--aw-text-tertiary); font-size: 8px; line-height: 1.4; }
.design-director-report-actions { display: grid; gap: 5px; border-top: 1px solid var(--aw-line); padding-top: 7px; }
.design-director-report-actions .primary-btn { display: inline-flex; width: 100%; min-height: 28px; align-items: center; justify-content: center; gap: 5px; border: 1px solid #1677ff; border-radius: 5px; background: #1677ff; color: #fff; font-size: 9px; font-weight: 700; cursor: pointer; }
.design-director-report-actions .primary-btn:hover, .design-director-report-actions .primary-btn:focus-visible { background: #0b55d4; border-color: #0b55d4; outline: none; }
.design-director-report-actions .primary-btn svg { width: 13px; height: 13px; }
.design-director-report-actions small { color: var(--aw-text-tertiary); font-size: 8px; line-height: 1.35; }

/* Project-level version history: opaque, compact and usable in the fixed
   desktop inspector. It records all three project documents rather than only
   the legacy design deck. */
.version-history-timeline { display: grid; gap: 7px; min-width: 0; }
.version-history-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--aw-text-secondary); }
.version-history-head > span { display: flex; align-items: center; gap: 5px; min-width: 0; }
.version-history-head svg { width: 13px; height: 13px; color: var(--v2-blue); }
.version-history-head strong { font-size: 10px; }
.version-history-head small { color: var(--aw-text-tertiary); font-size: 8px; }
.version-history-list { display: grid; gap: 6px; max-height: 390px; overflow: auto; padding-right: 2px; }
.version-history-item { position: relative; display: grid; gap: 5px; padding: 8px; border: 1px solid var(--aw-line); border-radius: 6px; background: var(--aw-surface); color: var(--aw-text); }
.version-history-item.selected { border-color: color-mix(in srgb, var(--v2-blue) 55%, var(--aw-line)); box-shadow: inset 2px 0 0 var(--v2-blue); }
.version-history-main { display: grid; width: 100%; min-width: 0; grid-template-columns: 9px minmax(0, 1fr); align-items: start; gap: 6px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.version-history-main > span:last-child { display: grid; gap: 2px; min-width: 0; }
.version-history-main strong { overflow: hidden; font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.version-history-main small { color: var(--aw-text-tertiary); font-size: 8px; line-height: 1.35; }
.version-history-dot { width: 7px; height: 7px; margin-top: 3px; border: 2px solid var(--aw-surface); border-radius: 50%; background: var(--v2-blue); box-shadow: 0 0 0 1px var(--v2-blue); }
.version-history-item p { margin: 0 0 0 15px; color: var(--aw-text-secondary); font-size: 8px; line-height: 1.45; overflow-wrap: anywhere; }
.version-history-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-left: 15px; }
.version-history-chips span, .version-compare-facts span { padding: 2px 5px; border: 1px solid color-mix(in srgb, var(--v2-blue) 26%, var(--aw-line)); border-radius: 4px; background: color-mix(in srgb, var(--v2-blue) 8%, var(--aw-surface)); color: var(--aw-text-secondary); font-size: 7px; }
.version-history-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-left: 15px; }
.version-history-actions button { display: inline-flex; width: 100%; min-width: 0; min-height: 25px; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; border: 1px solid var(--aw-line); border-radius: 5px; background: var(--aw-surface-strong); color: var(--aw-text-secondary); font-size: 8px; white-space: nowrap; cursor: pointer; }
.version-history-actions button:hover, .version-history-actions button:focus-visible { border-color: var(--v2-blue); color: var(--v2-blue); outline: none; }
.version-history-actions svg { width: 11px; height: 11px; }
.version-history-empty, .version-compare-result.loading, .version-compare-result.error { display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 8px; border: 1px solid var(--aw-line); border-radius: 6px; background: var(--aw-surface); color: var(--aw-text-tertiary); font-size: 8px; line-height: 1.45; }
.version-history-empty svg, .version-compare-result > svg { width: 13px; height: 13px; flex: 0 0 auto; }
.version-compare-result.loading svg { animation: spin 1s linear infinite; }
.version-compare-result.error { color: #ef4444; }
.version-compare-result { display: grid; gap: 7px; padding: 8px; border: 1px solid color-mix(in srgb, var(--v2-blue) 34%, var(--aw-line)); border-radius: 6px; background: var(--aw-surface-strong); }
.version-compare-result header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.version-compare-result header > span { display: flex; align-items: center; gap: 5px; }
.version-compare-result header svg { width: 12px; height: 12px; color: var(--v2-blue); }
.version-compare-result header strong { font-size: 9px; }
.version-compare-result header small { overflow: hidden; max-width: 48%; color: var(--aw-text-tertiary); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.version-compare-result > p { margin: 0; color: var(--aw-text-secondary); font-size: 8px; line-height: 1.45; }
.version-compare-facts { display: flex; flex-wrap: wrap; gap: 3px; }
.version-compare-documents { display: grid; gap: 4px; }
.version-compare-documents > div { display: grid; grid-template-columns: minmax(52px, .6fr) minmax(0, 1fr); gap: 2px 6px; padding-top: 5px; border-top: 1px solid var(--aw-line); font-size: 8px; }
.version-compare-documents span { color: var(--aw-text-secondary); }
.version-compare-documents b { justify-self: end; color: var(--aw-text); font-weight: 700; }
.version-compare-documents small { grid-column: 1 / -1; color: var(--aw-text-tertiary); font-size: 7px; }

/* Conversation design results expose the same local-edit affordance as the
   design workspace. Keep it in normal flow so it cannot overlap the image or
   the page title, and use the existing theme tokens for both themes. */
html body .assistant-generated-image-card .assistant-generated-image-edit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 7px !important;
  border: 1px solid var(--neutral-accent, #a86f25) !important;
  border-radius: 4px !important;
  background: var(--v2-panel, #111827) !important;
  color: var(--neutral-accent, #a86f25) !important;
  font-size: 8px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

html body .assistant-generated-image-card .assistant-generated-image-edit:hover,
html body .assistant-generated-image-card .assistant-generated-image-edit:focus-visible {
  background: var(--neutral-accent, #a86f25) !important;
  color: #fff !important;
  outline: none !important;
}

html body .assistant-generated-image-card .assistant-generated-image-edit svg {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 auto !important;
}

html body .assistant-generated-image-card .assistant-generated-image-edit span {
  display: inline !important;
  min-width: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  white-space: nowrap !important;
}

/* The conversation can invoke the same work-mode operations without leaving
   the generated result. Keep this menu in normal flow and use solid surfaces
   so compact desktop panels remain readable in either theme. */
html body .assistant-work-tools {
  display: grid !important;
  gap: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  border: 1px solid #d7e0ea !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #142033 !important;
}
html body .assistant-work-tools > summary {
  display: flex !important;
  min-height: 36px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  cursor: pointer !important;
  list-style: none !important;
}
html body .assistant-work-tools > summary::-webkit-details-marker { display: none !important; }
html body .assistant-work-tools > summary > span {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: 15px minmax(0, auto) !important;
  align-items: center !important;
  column-gap: 5px !important;
}
html body .assistant-work-tools > summary > span > i { grid-row: span 2; color: #0b55d4 !important; }
html body .assistant-work-tools > summary strong { color: #142033 !important; font-size: 10px !important; line-height: 1.2 !important; }
html body .assistant-work-tools > summary small { grid-column: 2; color: #607086 !important; font-size: 8px !important; line-height: 1.3 !important; }
html body .assistant-work-tools > summary > i { width: 13px !important; color: #607086 !important; transition: transform .16s ease; }
html body .assistant-work-tools[open] > summary > i { transform: rotate(180deg); }
html body .assistant-work-tools-body {
  display: grid !important;
  gap: 8px !important;
  padding: 7px 8px 8px !important;
  border-top: 1px solid #d7e0ea !important;
  background: #f5f8fc !important;
}
html body .assistant-work-tools-group { display: grid !important; gap: 4px !important; }
html body .assistant-work-tools-group h4 {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  color: #43526a !important;
  font-size: 8px !important;
  font-weight: 700 !important;
}
html body .assistant-work-tools-group h4 svg { width: 12px !important; height: 12px !important; color: #0b55d4 !important; }
html body .assistant-work-tools-group > div { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px !important; }
html body .assistant-work-tools-group button {
  display: inline-flex !important;
  min-width: 0 !important;
  min-height: 27px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 0 6px !important;
  overflow: hidden !important;
  border: 1px solid #d7e0ea !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #17304f !important;
  font-size: 8px !important;
  line-height: 1 !important;
  text-align: left !important;
  cursor: pointer !important;
}
html body .assistant-work-tools-group button:hover,
html body .assistant-work-tools-group button:focus-visible {
  border-color: #0b55d4 !important;
  background: #e8f1ff !important;
  color: #0b55d4 !important;
  outline: none !important;
}
html body .assistant-work-tools-group button svg { flex: 0 0 auto !important; width: 12px !important; height: 12px !important; color: #0b55d4 !important; }
html body .assistant-work-tools-group button span { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

html[data-theme="dark"] body .assistant-work-tools {
  border-color: #2b3746 !important;
  background: #10151c !important;
  color: #f5f7fa !important;
}
html[data-theme="dark"] body .assistant-work-tools > summary strong { color: #f5f7fa !important; }
html[data-theme="dark"] body .assistant-work-tools > summary small,
html[data-theme="dark"] body .assistant-work-tools > summary > i { color: #a8b6c7 !important; }
html[data-theme="dark"] body .assistant-work-tools-body { border-top-color: #2b3746 !important; background: #171e27 !important; }
html[data-theme="dark"] body .assistant-work-tools-group h4 { color: #b9c6d6 !important; }
html[data-theme="dark"] body .assistant-work-tools-group button { border-color: #2b3746 !important; background: #111820 !important; color: #edf3fb !important; }
html[data-theme="dark"] body .assistant-work-tools-group button:hover,
html[data-theme="dark"] body .assistant-work-tools-group button:focus-visible { border-color: #3989ff !important; background: #17345e !important; color: #ffffff !important; }

/* Assistant composer modes: a compact desktop-only switch with a focused
   Image 2.0 settings popover. The existing attachment, capture, output and
   voice controls stay in the same toolbar and remain available in both modes. */
.assistant-mode-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  height: 26px;
  padding: 2px;
  border: 1px solid var(--theme-line, var(--v2-line));
  border-radius: 7px;
  background: var(--theme-panel, var(--v2-panel));
}
.assistant-mode-switch[data-open="true"] {
  border-color: color-mix(in srgb, #1677ff 52%, var(--theme-line, var(--v2-line)));
  background: color-mix(in srgb, #1677ff 7%, var(--theme-panel, var(--v2-panel)));
}
.assistant-mode-trigger {
  display: inline-flex;
  min-width: 116px;
  height: 22px;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 0 7px;
  border: 0;
  border-radius: 5px;
  background: var(--theme-panel-raised, var(--v2-panel));
  color: var(--theme-text, var(--v2-text));
  font: inherit;
  font-size: 10px;
  font-weight: 680;
  white-space: nowrap;
  cursor: pointer;
}
.assistant-mode-trigger:hover,
.assistant-mode-trigger:focus-visible { background: var(--theme-panel-soft, var(--v2-panel-soft)); }
.assistant-mode-trigger > :first-child { width: 13px; height: 13px; flex: 0 0 auto; color: #4ea0ff; }
.assistant-mode-trigger-icon { display: inline-flex; width: 14px; height: 14px; flex: 0 0 auto; align-items: center; justify-content: center; }
.assistant-mode-trigger-icon.mode-image { display: none; }
.assistant-mode-trigger[data-current-mode="image"] .assistant-mode-trigger-icon.mode-site { display: none; }
.assistant-mode-trigger[data-current-mode="image"] .assistant-mode-trigger-icon.mode-image { display: inline-flex; }
.assistant-mode-trigger-icon svg { width: 13px; height: 13px; }
.assistant-mode-trigger > span { overflow: hidden; min-width: 0; text-overflow: ellipsis; }
.assistant-mode-trigger-chevron { width: 12px; height: 12px; margin-left: auto; flex: 0 0 auto; color: var(--theme-muted, var(--v2-muted)); transition: transform .18s ease; }
.assistant-mode-switch[data-open="true"] .assistant-mode-trigger-chevron { transform: rotate(180deg); }
.assistant-mode-options {
  position: fixed;
  z-index: 31;
  left: 0;
  top: 0;
  display: grid;
  width: 176px;
  gap: 3px;
  padding: 5px;
  border: 1px solid var(--theme-line-strong, var(--v2-line-strong));
  border-radius: 8px;
  background: var(--theme-panel-raised, var(--v2-panel));
  box-shadow: 0 14px 32px rgb(0 0 0 / 28%);
}
.assistant-mode-options.hidden { display: none !important; }
.assistant-mode-toggle {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  height: 30px;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--theme-muted, var(--v2-muted));
  font: inherit;
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}
.assistant-mode-toggle svg { width: 13px; height: 13px; flex: 0 0 auto; }
.assistant-mode-toggle:hover { color: var(--theme-text, var(--v2-text)); background: var(--theme-panel-soft, var(--v2-panel-soft)); }
.assistant-mode-toggle.active {
  border: 1px solid color-mix(in srgb, #1677ff 48%, var(--theme-line, var(--v2-line)));
  background: color-mix(in srgb, #1677ff 15%, var(--theme-panel, var(--v2-panel)));
  color: #4ea0ff;
}
.assistant-mode-toggle > :first-child { width: 14px; height: 14px; flex: 0 0 auto; }
.assistant-mode-toggle span { overflow: hidden; min-width: 0; text-overflow: ellipsis; }
.assistant-mode-option-check { width: 13px; height: 13px; margin-left: auto; flex: 0 0 auto; opacity: 0 !important; }
html:root body #assistantModeOptions .assistant-mode-option-check { opacity: 0 !important; }
html:root body #assistantModeOptions .assistant-mode-toggle.active .assistant-mode-option-check { opacity: 1 !important; }
html:root[data-theme] body:not(#appShell) #assistantModeOptions .assistant-mode-option-check { opacity: 0 !important; }
html:root[data-theme] body:not(#appShell) #assistantModeOptions .assistant-mode-toggle.active .assistant-mode-option-check { opacity: 1 !important; }
.assistant-image-settings-btn {
  display: inline-flex;
  flex: 0 0 auto;
  height: 26px;
  align-items: center;
  gap: 4px;
  padding: 0 7px;
  border: 1px solid var(--theme-line, var(--v2-line));
  border-radius: 5px;
  background: var(--theme-panel, var(--v2-panel));
  color: var(--theme-muted, var(--v2-muted));
  font: inherit;
  font-size: 9px;
  white-space: nowrap;
  cursor: pointer;
}
.assistant-image-settings-btn:hover,
.assistant-image-settings-btn[aria-expanded="true"] { border-color: #1677ff; color: #4ea0ff; background: color-mix(in srgb, #1677ff 12%, var(--theme-panel, var(--v2-panel))); }
.assistant-image-settings-btn svg { width: 13px; height: 13px; }
.assistant-image-mode-panel {
  position: absolute;
  z-index: 25;
  left: 8px;
  bottom: calc(100% + 8px);
  display: grid;
  width: min(330px, calc(100% - 16px));
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--theme-line-strong, var(--v2-line-strong));
  border-radius: 9px;
  background: var(--theme-panel-raised, var(--v2-panel));
  color: var(--theme-text, var(--v2-text));
  box-shadow: 0 16px 38px rgb(0 0 0 / 28%);
}
.assistant-image-mode-panel.hidden { display: none !important; }
.assistant-image-mode-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.assistant-image-mode-panel-head strong { font-size: 12px; }
.assistant-image-mode-panel-head span { color: #4ea0ff; font-size: 10px; font-weight: 700; }
.assistant-image-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.assistant-image-mode-grid label { display: grid; gap: 4px; min-width: 0; }
.assistant-image-mode-grid .assistant-image-model-field { grid-column: 1 / -1; }
.assistant-image-mode-grid label > span { color: var(--theme-muted, var(--v2-muted)); font-size: 9px; }
.assistant-image-mode-grid select { box-sizing: border-box; width: 100% !important; max-width: none !important; height: 30px !important; min-height: 30px !important; padding: 0 24px 0 8px !important; border: 1px solid var(--theme-line, var(--v2-line)) !important; border-radius: 5px; background: var(--theme-panel-soft, var(--v2-panel-soft)) !important; color: var(--theme-text, var(--v2-text)) !important; font-size: 10px !important; }
.assistant-image-flow-note {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, #1677ff 28%, var(--theme-line, var(--v2-line)));
  border-radius: 6px;
  background: color-mix(in srgb, #1677ff 8%, var(--theme-panel-soft, var(--v2-panel-soft)));
  color: var(--theme-muted, var(--v2-muted));
  font-size: 9px;
  line-height: 1.35;
}
.assistant-image-flow-note span:first-child {
  color: var(--theme-text, var(--v2-text));
  font-weight: 700;
}
.assistant-image-flow-note i {
  color: #4ea0ff;
  font-style: normal;
}
.assistant-image-mode-toggle {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--theme-line, var(--v2-line));
  border-radius: 6px;
  background: var(--theme-panel-soft, var(--v2-panel-soft));
}
.assistant-image-mode-toggle input {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  accent-color: #1677ff;
}
.assistant-image-mode-toggle span {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.assistant-image-mode-toggle strong {
  color: var(--theme-text, var(--v2-text));
  font-size: 10px;
  line-height: 1.25;
}
.assistant-image-mode-toggle small {
  color: var(--theme-muted, var(--v2-muted));
  font-size: 9px;
  line-height: 1.35;
}
.assistant-image-model-test {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, #1677ff 24%, var(--theme-line, var(--v2-line)));
  border-radius: 6px;
  background: color-mix(in srgb, #1677ff 7%, var(--theme-panel-soft, var(--v2-panel-soft)));
}
.assistant-image-model-test button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #1677ff;
  border-radius: 6px;
  background: #1677ff;
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}
.assistant-image-model-test button:disabled { opacity: .62; cursor: progress; }
.assistant-image-model-test button svg { width: 13px; height: 13px; }
.assistant-image-model-test span {
  min-width: 0;
  color: var(--theme-muted, var(--v2-muted));
  font-size: 9px;
  line-height: 1.45;
}
.assistant-image-model-test span[data-status="ok"] { color: #12b981; }
.assistant-image-model-test span[data-status="failed"] { color: #f59e0b; }
.assistant-image-model-test span[data-status="running"] { color: #4ea0ff; }
.assistant-image-mode-panel > small { color: var(--theme-muted, var(--v2-muted)); font-size: 9px; line-height: 1.45; }

/* Explainable design brief: keep the source-of-truth visible without taking
   over the conversation. The details body is collapsed by default and uses
   opaque theme surfaces so requirements remain legible in dark mode. */
.assistant-brief-summary {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0 14px 8px;
}
.assistant-brief-summary.hidden { display: none !important; }
.assistant-brief-summary-details {
  overflow: hidden;
  border: 1px solid var(--aw-line, #d7dce5);
  border-radius: 6px;
  background: var(--aw-surface-raised, #fff);
  color: var(--aw-text, #17202c);
}
.assistant-brief-summary-details > summary {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  cursor: pointer;
  list-style: none;
}
.assistant-brief-summary-details > summary::-webkit-details-marker { display: none; }
.assistant-brief-summary-details > summary > span {
  display: grid;
  min-width: 0;
  grid-template-columns: 15px minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}
.assistant-brief-summary-details > summary svg { width: 13px; height: 13px; color: var(--neutral-accent, #a86f25); }
.assistant-brief-summary-details > summary strong { font-size: 10px; white-space: nowrap; }
.assistant-brief-summary-details > summary small {
  min-width: 0;
  overflow: hidden;
  color: var(--aw-text-tertiary, #687386);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assistant-brief-summary-details > summary em {
  flex: 0 0 auto;
  border: 1px solid var(--aw-line, #d7dce5);
  border-radius: 3px;
  padding: 2px 5px;
  color: var(--aw-text-secondary, #475467);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
}
.assistant-brief-summary-details > summary em.ready { border-color: color-mix(in srgb, var(--neutral-accent, #a86f25) 42%, var(--aw-line, #d7dce5)); color: var(--neutral-accent, #a86f25); }
.assistant-brief-summary-details > summary em.stale { border-color: #d97706; color: #b45309; }
.assistant-brief-summary-body { display: grid; gap: 7px; border-top: 1px solid var(--aw-line, #d7dce5); padding: 7px 8px; }
.assistant-brief-summary-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.assistant-brief-summary-chips span { max-width: 100%; overflow: hidden; border: 1px solid var(--aw-line, #d7dce5); border-radius: 3px; padding: 3px 5px; color: var(--aw-text-secondary, #475467); font-size: 8px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.assistant-brief-summary-body footer { display: grid; gap: 2px; border-top: 1px solid var(--aw-line, #d7dce5); padding-top: 6px; }
.assistant-brief-summary-body footer span { display: flex; min-width: 0; align-items: center; gap: 4px; color: var(--neutral-accent, #a86f25); font-size: 8px; }
.assistant-brief-summary-body footer span svg { width: 11px; height: 11px; flex: 0 0 auto; }
.assistant-brief-summary-body footer small { color: var(--aw-text-tertiary, #687386); font-size: 8px; line-height: 1.35; }
html[data-theme="dark"] body .assistant-brief-summary-details { border-color: #303944; background: #151a21; color: #f5f7fa; }
html[data-theme="dark"] body .assistant-brief-summary-details > summary small,
html[data-theme="dark"] body .assistant-brief-summary-body footer small { color: #9aa7b7; }
html[data-theme="dark"] body .assistant-brief-summary-chips span { border-color: #303944; color: #d5deea; background: #1d2530; }
html[data-theme="dark"] body .assistant-brief-summary-body,
html[data-theme="dark"] body .assistant-brief-summary-body footer { border-color: #303944; }
html[data-theme="dark"] body .assistant-brief-summary-details > summary em { border-color: #3a4655; color: #c8d3e0; }
html[data-theme="dark"] body .assistant-brief-summary-details > summary em.ready { border-color: #2d75c9; color: #78b9ff; }

.assistant-composer-tools { position: relative; overflow-x: auto; overflow-y: hidden; }
.assistant-composer[data-assistant-mode="image"] .assistant-image-settings-btn { display: inline-flex; }
.assistant-composer[data-assistant-mode="site"] .assistant-image-settings-btn { display: inline-flex; }
.assistant-composer[data-assistant-mode="site"] .assistant-image-mode-panel:not(.hidden) { display: grid; }

/* Native select popups must follow the active theme on Windows/Electron. */
:root:not([data-theme="dark"]) select {
  color-scheme: light;
}

:root:not([data-theme="dark"]) select option {
  color: #111827 !important;
  background: #ffffff !important;
}

/* Keep every composer dropdown opaque in the desktop app. Native Windows /
   Electron select popups inherit the control color-scheme, so set both the
   closed control and its option surface explicitly instead of relying on the
   host OS default (which otherwise falls back to a white popup in dark mode).
 */
:root:not([data-theme="dark"]) body #assistantComposer .assistant-composer-tools :is(select, option, optgroup) {
  color-scheme: light !important;
}

:root:not([data-theme="dark"]) body #assistantComposer .assistant-composer-tools select {
  border-color: #d7deea !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #172033 !important;
}

:root:not([data-theme="dark"]) body #assistantComposer .assistant-composer-tools select option,
:root:not([data-theme="dark"]) body #assistantComposer .assistant-composer-tools select optgroup {
  background-color: #ffffff !important;
  color: #172033 !important;
}

:root[data-theme="dark"] select {
  color-scheme: dark !important;
}

:root[data-theme="dark"] select option {
  color: #f5f7fa !important;
  background: #17191d !important;
}

:root[data-theme="dark"] select option:disabled {
  color: #7d8590 !important;
}

html:root[data-theme="dark"] body #assistantComposer .assistant-composer-tools :is(select, option, optgroup) {
  color-scheme: dark !important;
}

html:root[data-theme="dark"] body #assistantComposer .assistant-composer-tools select {
  border-color: #2b466a !important;
  background-color: #101b2d !important;
  background-image: none !important;
  color: #f5f7fa !important;
}

html:root[data-theme="dark"] body #assistantComposer .assistant-composer-tools select option,
html:root[data-theme="dark"] body #assistantComposer .assistant-composer-tools select optgroup {
  background-color: #101b2d !important;
  color: #f5f7fa !important;
}

/* The mode menu is rendered outside the drawer so it cannot be clipped;
   each row still gets its own solid surface for clear separation. */
html:root[data-theme="dark"] body #assistantModeOptions .assistant-mode-toggle {
  background: #17191d !important;
  color: var(--neutral-line) !important;
}

html:root[data-theme="dark"] body #assistantModeOptions .assistant-mode-toggle:hover,
html:root[data-theme="dark"] body #assistantModeOptions .assistant-mode-toggle.active {
  background: #20314a !important;
  color: #f5f7fa !important;
}

html:not([data-theme="dark"]) body #assistantModeOptions .assistant-mode-toggle {
  background: #ffffff !important;
  color: #334155 !important;
}

html:not([data-theme="dark"]) body #assistantModeOptions .assistant-mode-toggle:hover,
html:not([data-theme="dark"]) body #assistantModeOptions .assistant-mode-toggle.active {
  background: #edf4ff !important;
  color: #0b55d4 !important;
}

/* Assistant-owned select menus replace the Windows native popup, whose
   surface cannot be themed reliably. Menus live on document.body so they are
   never clipped by the assistant's filtered or scrollable containers. */
.assistant-native-select { display: none !important; }

.assistant-select-shell {
  display: inline-flex;
  min-width: 0;
  flex: 0 1 auto;
  align-items: center;
}

.assistant-composer-tools > .assistant-select-shell { flex: 0 1 122px; }
.assistant-composer-mode .assistant-select-shell { max-width: 148px; }
.assistant-image-mode-grid .assistant-select-shell { width: 100%; max-width: none; }

.assistant-select-trigger {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 0 8px;
  border: 1px solid var(--theme-line, var(--v2-line));
  border-radius: 6px;
  background: var(--theme-panel-raised, var(--v2-panel));
  color: var(--theme-text, var(--v2-text));
  font: inherit;
  font-size: 10px;
  white-space: nowrap;
  cursor: pointer;
}

.assistant-select-trigger > span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
}

.assistant-select-trigger > .assistant-select-trigger-visual {
  display: inline-flex;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  align-items: center;
  justify-content: center;
  overflow: visible;
  color: currentColor;
}

.assistant-select-trigger > .assistant-select-trigger-visual[hidden] { display: none; }
.assistant-select-trigger > .assistant-select-trigger-visual .assistant-select-option-visual { width: 21px; height: 21px; }
.assistant-select-trigger > .assistant-select-trigger-visual .assistant-size-preview > span { max-width: 17px; max-height: 17px; }
.assistant-select-trigger > .assistant-select-trigger-visual .assistant-select-option-icon > svg { width: 15px; height: 15px; }

.assistant-select-trigger > .assistant-select-trigger-label {
  flex: 1 1 auto;
}

.assistant-select-trigger > svg { width: 13px; height: 13px; flex: 0 0 auto; transition: transform .18s ease; }
.assistant-select-shell.open .assistant-select-trigger > svg { transform: rotate(180deg); }
.assistant-select-trigger:focus-visible,
.assistant-select-trigger:hover { border-color: #4ea0ff; }

.assistant-select-menu {
  position: fixed;
  z-index: 2147483000;
  display: grid;
  max-height: min(380px, calc(100vh - 16px));
  gap: 3px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid #314661;
  border-radius: 8px;
  background: #101b2d !important;
  background-color: #101b2d !important;
  background-image: none !important;
  color: #f5f7fa !important;
  opacity: 1 !important;
  box-shadow: 0 16px 38px rgb(0 0 0 / 42%);
}

.assistant-select-menu.hidden { display: none !important; }

.assistant-select-option {
  display: flex;
  width: 100%;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: #172538 !important;
  background-color: #172538 !important;
  color: #d9e2ef !important;
  font: inherit;
  font-size: 11px;
  text-align: left;
  white-space: nowrap;
  opacity: 1 !important;
  cursor: pointer;
}

.assistant-select-option-visual {
  display: inline-flex;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.assistant-size-preview > span {
  display: block;
  max-width: 21px;
  max-height: 21px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  background: transparent;
}

.assistant-select-option-icon > svg {
  width: 17px;
  height: 17px;
}

.assistant-select-option-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assistant-select-option > svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: 0; }
.assistant-select-option:hover,
.assistant-select-option:focus-visible { border-color: #3e5b7d; background: #203451 !important; color: #ffffff !important; }
.assistant-select-option.active { border-color: #3789ec; background: #173b66 !important; color: #ffffff !important; }
.assistant-select-option.active > svg { opacity: 1; color: #6db2ff !important; }
.assistant-select-option:disabled { color: #68788d !important; cursor: not-allowed; }

/* Theme layers also contain broad button rules with equal specificity. Keep
   this final component-specific selector stronger so its opaque surface and
   readable label always win, including Fluent icon wrapper spans. */
html:root[data-theme="dark"] body .assistant-select-menu button.assistant-select-option,
html:root[data-theme="dark"] body .assistant-select-menu button.assistant-select-option.active {
  background: #173b66 !important;
  background-color: #173b66 !important;
  color: #ffffff !important;
}

html:root[data-theme="dark"] body .assistant-select-menu button.assistant-select-option:not(.active) {
  background: #172538 !important;
  background-color: #172538 !important;
  color: #d9e2ef !important;
}

html:root[data-theme="dark"] body .assistant-select-menu button.assistant-select-option :is(span, i, svg) {
  color: inherit !important;
}

html:not([data-theme="dark"]) body .assistant-select-menu button.assistant-select-option,
html:not([data-theme="dark"]) body .assistant-select-menu button.assistant-select-option.active {
  background: #f8faff !important;
  background-color: #f8faff !important;
  color: #334155 !important;
}

html:not([data-theme="dark"]) body .assistant-select-menu button.assistant-select-option.active {
  background: #e5f0ff !important;
  background-color: #e5f0ff !important;
  color: #0b55d4 !important;
}

html:not([data-theme="dark"]) body .assistant-select-trigger {
  border-color: #d7deea;
  background: #ffffff !important;
  color: #172033 !important;
}

html:not([data-theme="dark"]) body .assistant-select-menu {
  border-color: #d4dce8;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #172033 !important;
  box-shadow: 0 16px 34px rgb(23 32 51 / 18%);
}

html:not([data-theme="dark"]) body .assistant-select-option {
  background: #f8faff !important;
  background-color: #f8faff !important;
  color: #334155 !important;
}

html:not([data-theme="dark"]) body .assistant-select-option:hover,
html:not([data-theme="dark"]) body .assistant-select-option:focus-visible { background: #edf4ff !important; color: #0b55d4 !important; }
html:not([data-theme="dark"]) body .assistant-select-option.active { border-color: #5ca2f4; background: #e5f0ff !important; color: #0b55d4 !important; }

/* Format pickers in both the dialogue composer and work mode use the same
   compact outline preview. The select itself stays hidden and authoritative,
   while this shell fills the original form field without changing layout. */
.document-spec-control .assistant-select-shell,
.canvas-size-dialog-body .assistant-select-shell {
  width: 100%;
  max-width: none;
}

.document-spec-control .assistant-select-trigger,
.canvas-size-dialog-body .assistant-select-trigger {
  min-height: 36px;
  height: 36px;
  padding-inline: 10px;
  border-radius: 6px;
  font-size: 11px;
}


/* Final assistant surface lock. Older store/glass layers are loaded before
   this file but can still win with a background shorthand containing
   `transparent`. These assistant-owned surfaces must remain opaque so text
   and controls stay legible in the desktop dark theme. */
html:root[data-theme="dark"] body :is(
  #assistantModeOptions,
  #assistantImageModePanel,
  #assistantExecutionControls,
  #assistantDrawer .assistant-mode-switch,
  #assistantDrawer .assistant-image-settings-btn,
  #assistantDrawer .assistant-select-trigger
) {
  background: #0b192a !important;
  background-color: #0b192a !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

html:root[data-theme="dark"] body #assistantModeOptions {
  border-color: #355579 !important;
  box-shadow: 0 16px 38px rgb(0 0 0 / 58%) !important;
}

html:root[data-theme="dark"] body #assistantModeOptions .assistant-mode-toggle {
  background: #142740 !important;
  background-color: #142740 !important;
  color: #d9e7f7 !important;
}

html:root[data-theme="dark"] body #assistantModeOptions .assistant-mode-toggle:hover,
html:root[data-theme="dark"] body #assistantModeOptions .assistant-mode-toggle.active {
  background: #173b66 !important;
  background-color: #173b66 !important;
  color: #ffffff !important;
}

html:root[data-theme="dark"] body .assistant-select-menu {
  background: #0b192a !important;
  background-color: #0b192a !important;
  background-image: none !important;
  border-color: #355579 !important;
  opacity: 1 !important;
}

html:root[data-theme="dark"] body .assistant-select-menu .assistant-select-option {
  background: #142740 !important;
  background-color: #142740 !important;
  color: #d9e7f7 !important;
  opacity: 1 !important;
}

html:root[data-theme="dark"] body .assistant-select-menu .assistant-select-option:hover,
html:root[data-theme="dark"] body .assistant-select-menu .assistant-select-option:focus-visible,
html:root[data-theme="dark"] body .assistant-select-menu .assistant-select-option.active {
  background: #173b66 !important;
  background-color: #173b66 !important;
  color: #ffffff !important;
}

html:not([data-theme="dark"]) body :is(
  #assistantModeOptions,
  #assistantImageModePanel,
  #assistantExecutionControls,
  #assistantDrawer .assistant-mode-switch,
  #assistantDrawer .assistant-image-settings-btn,
  #assistantDrawer .assistant-select-trigger
) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

html:not([data-theme="dark"]) body #assistantModeOptions,
html:not([data-theme="dark"]) body .assistant-select-menu {
  border-color: #c8d7ea !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  opacity: 1 !important;
}

html:not([data-theme="dark"]) body #assistantModeOptions .assistant-mode-toggle,
html:not([data-theme="dark"]) body .assistant-select-menu .assistant-select-option {
  background: color-mix(in srgb, var(--neutral-accent) 5%, var(--neutral-panel)) !important;
  background-color: color-mix(in srgb, var(--neutral-accent) 5%, var(--neutral-panel)) !important;
  color: #243b5a !important;
  opacity: 1 !important;
}

html:not([data-theme="dark"]) body #assistantModeOptions .assistant-mode-toggle:hover,
html:not([data-theme="dark"]) body #assistantModeOptions .assistant-mode-toggle.active,
html:not([data-theme="dark"]) body .assistant-select-menu .assistant-select-option:hover,
html:not([data-theme="dark"]) body .assistant-select-menu .assistant-select-option:focus-visible,
html:not([data-theme="dark"]) body .assistant-select-menu .assistant-select-option.active {
  background: #e5f0ff !important;
  background-color: #e5f0ff !important;
  color: #0b55d4 !important;
}

/* All assistant confirmations use the same blue primary action. This also
   covers staged copy/style/layout confirmations and task-card confirmations. */
html body #assistantDrawer :is(
  #assistantExecutionConfirmBtn,
  .assistant-execution-actions button.confirm,
  .assistant-stage-actions button.confirm,
  .assistant-task-card button.confirm,
  #assistantImageModelTestBtn,
  [data-assistant-plan-action="confirm"],
  [data-assistant-task-action="stage-confirm"]
) {
  border-color: #1677ff !important;
  background: #1677ff !important;
  background-color: #1677ff !important;
  background-image: none !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

html body #assistantDrawer :is(
  #assistantExecutionConfirmBtn,
  .assistant-execution-actions button.confirm,
  .assistant-stage-actions button.confirm,
  .assistant-task-card button.confirm,
  #assistantImageModelTestBtn,
  [data-assistant-plan-action="confirm"],
  [data-assistant-task-action="stage-confirm"]
):hover:not(:disabled),
html body #assistantDrawer :is(
  #assistantExecutionConfirmBtn,
  .assistant-execution-actions button.confirm,
  .assistant-stage-actions button.confirm,
  .assistant-task-card button.confirm,
  #assistantImageModelTestBtn,
  [data-assistant-plan-action="confirm"],
  [data-assistant-task-action="stage-confirm"]
):focus-visible {
  border-color: #3d96ff !important;
  background: #3d96ff !important;
  background-color: #3d96ff !important;
  color: #ffffff !important;
}

html body #assistantDrawer :is(
  #assistantExecutionConfirmBtn,
  .assistant-execution-actions button.confirm,
  .assistant-stage-actions button.confirm,
  .assistant-task-card button.confirm,
  #assistantImageModelTestBtn,
  [data-assistant-plan-action="confirm"],
  [data-assistant-task-action="stage-confirm"]
) :is(span, i, svg, .fluent-icon-shell, .fluent-icon) {
  color: #ffffff !important;
  stroke: currentColor !important;
}

html body #assistantDrawer .assistant-image-model-error {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, #f59e0b 45%, var(--theme-line, var(--v2-line)));
  border-radius: 8px;
  background: color-mix(in srgb, #f59e0b 10%, var(--theme-panel-soft, var(--v2-panel-soft)));
  color: var(--theme-text, var(--v2-text));
}

html body #assistantDrawer .assistant-image-model-error > span {
  display: grid;
  min-width: 0;
  gap: 2px;
  color: var(--theme-muted, var(--v2-muted));
  font-size: 10px;
  line-height: 1.45;
}

html body #assistantDrawer .assistant-image-model-error > span strong {
  color: #f59e0b;
  font-size: 11px;
}

html body #assistantDrawer .assistant-image-model-error > button {
  white-space: nowrap;
}

/* Image mode progress popup. It is an opaque, functional preview surface:
   the animated gradient communicates that Image 2.0 is still rendering while
   the percentage, stage text, and cancel action remain readable above it. */
.assistant-image-generation-progress {
  position: absolute;
  z-index: 60;
  inset: 70px 12px 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.assistant-image-generation-progress.hidden { display: none !important; }

.assistant-image-generation-progress-card {
  width: min(420px, 100%);
  overflow: hidden;
  border: 1px solid #355579 !important;
  border-radius: 10px;
  background: #0b192a !important;
  background-color: #0b192a !important;
  background-image: none !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 58%);
  pointer-events: auto;
}

.assistant-image-generation-progress-head,
.assistant-image-generation-progress-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  color: #d9e7f7;
}

.assistant-image-generation-progress-head {
  border-bottom: 1px solid #294766;
}

.assistant-image-generation-progress-head > span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.assistant-image-generation-progress-head svg {
  width: 15px;
  height: 15px;
  color: var(--neutral-accent);
}

.assistant-image-generation-progress-head strong {
  overflow: hidden;
  color: var(--neutral-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-image-generation-progress-head b {
  flex: 0 0 auto;
  min-width: 43px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #20314a;
  color: #ffffff;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.assistant-image-generation-progress-visual {
  position: relative;
  height: 122px;
  overflow: hidden;
  isolation: isolate;
  background: #101f32;
}

.assistant-image-generation-progress-visual::before {
  position: absolute;
  inset: -24%;
  z-index: -2;
  content: "";
  background: linear-gradient(125deg, #121820 0%, #233f73 27%, #6b4c72 48%, #2a8e9b 70%, #132a64 100%);
  background-size: 240% 240%;
  animation: assistant-image-generation-gradient 5.8s ease-in-out infinite alternate;
}

.assistant-image-generation-progress-visual::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(180deg, rgb(4 10 18 / 4%), rgb(4 10 18 / 54%));
}

@keyframes assistant-image-generation-gradient {
  0% { transform: translate3d(-7%, -5%, 0) scale(1.05); background-position: 0% 30%; }
  50% { transform: translate3d(4%, 2%, 0) scale(1.1); background-position: 70% 55%; }
  100% { transform: translate3d(-2%, 5%, 0) scale(1.06); background-position: 100% 80%; }
}

.assistant-image-generation-progress-visual-label,
.assistant-image-generation-progress-visual-stage {
  position: absolute;
  left: 13px;
  color: #ffffff;
  text-shadow: 0 1px 4px rgb(0 0 0 / 42%);
}

.assistant-image-generation-progress-visual-label {
  top: 12px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .04em;
}

.assistant-image-generation-progress-visual-stage {
  bottom: 28px;
  font-size: 10px;
  opacity: .9;
}

.assistant-image-generation-progress-track {
  position: absolute;
  right: 13px;
  bottom: 13px;
  left: 13px;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: rgb(255 255 255 / 28%);
}

.assistant-image-generation-progress-track i {
  display: block;
  width: 3%;
  height: 100%;
  border-radius: inherit;
  background: #4ea0ff;
  box-shadow: 0 0 12px rgb(78 160 255 / 72%);
  transition: width .35s ease;
}

.assistant-image-generation-progress-card > footer {
  min-height: 42px;
  border-top: 1px solid #294766;
  padding-block: 8px;
}

.assistant-image-generation-progress-card > footer > span {
  overflow: hidden;
  color: #a9bdd6;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-image-generation-progress-card > footer > button {
  flex: 0 0 auto;
  min-height: 27px;
  padding: 0 9px;
  border: 1px solid #41658f;
  border-radius: 5px;
  background: #142740 !important;
  color: #e5effb;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.assistant-image-generation-progress-card > footer > button:hover:not(:disabled) {
  border-color: #4ea0ff;
  background: #173b66 !important;
  color: #ffffff;
}

.assistant-image-generation-progress-card > footer > button:disabled {
  cursor: not-allowed;
  opacity: .58;
}

html:not([data-theme="dark"]) body .assistant-image-generation-progress-card {
  border-color: #c8d7ea !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #243b5a;
  box-shadow: 0 18px 48px rgb(56 86 124 / 20%);
}

html:not([data-theme="dark"]) body .assistant-image-generation-progress-head,
html:not([data-theme="dark"]) body .assistant-image-generation-progress-card > footer {
  color: #243b5a;
  border-color: #dbe7f5;
}

html:not([data-theme="dark"]) body .assistant-image-generation-progress-head strong {
  color: #102747;
}

html:not([data-theme="dark"]) body .assistant-image-generation-progress-head b {
  background: #e5f0ff;
  color: #0b55d4;
}

html:not([data-theme="dark"]) body .assistant-image-generation-progress-card > footer > span {
  color: #5f7594;
}

html:not([data-theme="dark"]) body .assistant-image-generation-progress-card > footer > button {
  border-color: #b6c9e2;
  background: color-mix(in srgb, var(--neutral-accent) 5%, var(--neutral-panel)) !important;
  color: #24476e;
}

html:not([data-theme="dark"]) body .assistant-image-generation-progress-card > footer > button:hover:not(:disabled) {
  background: #e5f0ff !important;
  color: #0b55d4;
}

/* Standalone Image 2.0 results are shown as the generated canvas itself.
   Keep the count-driven grid, but remove card framing, captions, and extra
   padding so one image can use the full dialogue width and multiple images
   share the same canvas-sized ratio in a clean row. */
html body .assistant-generated-result.image-output {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body .assistant-generated-result.image-output > header {
  padding-inline: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body .assistant-generated-result.image-output .image-output-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-height: none !important;
  gap: 8px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

html body .assistant-generated-result.image-output .image-output-card {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .assistant-generated-result.image-output .image-output-card .assistant-generated-image-preview {
  display: block !important;
  width: min(100%, var(--assistant-artifact-fit-width, 100%)) !important;
  min-width: 0 !important;
  aspect-ratio: var(--assistant-artifact-aspect, 16 / 9) !important;
  max-height: min(62vh, 620px) !important;
  margin-inline: auto !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .assistant-generated-result.image-output .image-output-card .assistant-generated-image-preview:hover,
html body .assistant-generated-result.image-output .image-output-card.selected .assistant-generated-image-preview {
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html body .assistant-generated-result.image-output .image-output-card .assistant-generated-image-preview img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
  object-position: center !important;
}

html[data-theme="dark"] body .assistant-generated-result.image-output,
html[data-theme="dark"] body .assistant-generated-result.image-output .image-output-grid,
html[data-theme="dark"] body .assistant-generated-result.image-output .image-output-card,
html[data-theme="dark"] body .assistant-generated-result.image-output .image-output-card .assistant-generated-image-preview,
html[data-theme="dark"] body .assistant-generated-result.image-output .image-output-card .assistant-generated-image-preview img {
  background: transparent !important;
}

html body .assistant-generated-result.image-output .image-output-card .assistant-artifact-variant-select,
html body .assistant-generated-result.image-output > .assistant-generated-copy {
  display: none !important;
}

html body .assistant-generated-result:not(.assistant-artifact-history-expired) .assistant-generated-image-card .assistant-generated-image-preview img {
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

html body .assistant-generated-result.image-output > footer {
  padding-inline: 0 !important;
  border: 0 !important;
}

html body #assistantDrawer .assistant-messages {
  overflow-anchor: none !important;
  scroll-behavior: auto !important;
}

html body #assistantDrawer .assistant-messages :is(
  .assistant-message,
  .assistant-generated-result,
  .assistant-image-generation-progress,
  .assistant-stage-conversation-result,
  .assistant-sync-prompt
) {
  overflow-anchor: none !important;
}

html body .assistant-generated-result.assistant-design-image-output .assistant-generated-image-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  width: 100% !important;
  max-height: none !important;
  gap: 10px !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body .assistant-generated-result.assistant-design-image-output .assistant-generated-image-grid[data-image-count="1"],
html body .assistant-generated-result.image-output .image-output-grid[data-image-count="1"] {
  grid-template-columns: minmax(0, 1fr) !important;
}

html body .assistant-generated-result.assistant-design-image-output .assistant-generated-image-card {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .assistant-generated-result.assistant-design-image-output .assistant-generated-image-preview {
  width: min(100%, var(--assistant-artifact-fit-width, 100%)) !important;
  aspect-ratio: var(--assistant-artifact-aspect, 16 / 9) !important;
  max-height: min(62vh, 620px) !important;
  margin-inline: auto !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .assistant-generated-result.assistant-design-image-output .assistant-generated-image-preview img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

/* Keep reference-based design pages intact in both the staged result and the
   conversation result. The base stylesheet forced a 4:3 `cover` crop, so a
   portrait or wide Image 2.0 page could lose half of its visible content. */
html body .assistant-stage-preview.images li.assistant-stage-image-page > img,
html body .assistant-stage-conversation-list li.assistant-stage-image-page > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 320px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  overflow: visible !important;
  background: var(--v2-panel-soft, #f4f6f8) !important;
}

/* The central editor and page thumbnails should show the whole generated
   canvas too. Letterboxing is preferable to hiding the user's artwork. */
html body .design-page-canvas > img,
html body .design-thumb-image img {
  object-fit: contain !important;
  object-position: center !important;
  background: #fff !important;
}

/* Candidate previews are authored by the legacy light-theme layer. Keep the
   result cards and their empty preview state on the charcoal surface. */
html[data-theme="dark"] body #appShell #step-edit #designCandidatePanel :is(
  .design-candidate-item,
  .design-candidate-item.current,
  .design-candidate-empty
) {
  border-color: var(--theme-line-strong, rgb(255 255 255 / 16%)) !important;
  background: var(--theme-panel-soft, #272727) !important;
  background-color: var(--theme-panel-soft, #272727) !important;
  background-image: none !important;
  color: var(--theme-text, #f2f2f2) !important;
}

html[data-theme="dark"] body #appShell #step-edit #designCandidatePanel .design-candidate-item.selected {
  border-color: var(--neutral-accent, #a86f25) !important;
  background: color-mix(in srgb, var(--neutral-accent, #a86f25) 12%, var(--theme-panel-soft, #272727)) !important;
  background-color: color-mix(in srgb, var(--neutral-accent, #a86f25) 12%, var(--theme-panel-soft, #272727)) !important;
}

html[data-theme="dark"] body #appShell #step-edit #designCandidatePanel .design-candidate-empty svg {
  color: var(--theme-muted, #b3b3b3) !important;
}

/* Prevent the fallback mark from flashing a light block if the logo asset is
   unavailable while the shell is loading. */
html[data-theme="dark"] body #appShell .brand-mark {
  background: var(--theme-panel-raised, #2d2d2d) !important;
  color: var(--theme-text, #f2f2f2) !important;
}

/* Keep expired general-session artifacts compact and distinguishable from a
   real generation failure. Every surface is opaque so the notice stays
   readable over both the charcoal assistant and the light workspace. */
html body .assistant-artifact-history-expired {
  display: block !important;
  width: 100% !important;
  margin: 12px 0 !important;
  padding: 14px !important;
  border: 1px solid var(--theme-line, #d9e2ef) !important;
  border-radius: 8px !important;
  background-color: var(--theme-panel-soft, #f6f9fd) !important;
  color: var(--theme-text, #17304f) !important;
  box-shadow: none !important;
}

html body .assistant-artifact-history-expired .assistant-artifact-error {
  display: grid !important;
  gap: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body .assistant-artifact-history-expired .assistant-artifact-error strong {
  color: var(--theme-text, #17304f) !important;
  font-size: 13px !important;
}

html body .assistant-artifact-history-expired .assistant-artifact-error span {
  color: var(--theme-muted, #617594) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

html body .assistant-artifact-history-expired > footer {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 10px !important;
  padding: 0 !important;
  border: 0 !important;
}

html body .assistant-artifact-history-expired > footer button {
  min-height: 28px !important;
  padding: 4px 10px !important;
  border: 1px solid var(--theme-line-strong, #b9c8dc) !important;
  border-radius: 6px !important;
  background-color: var(--theme-panel-raised, #ffffff) !important;
  color: var(--theme-text, #17304f) !important;
}

html body .assistant-artifact-history-expired > footer button.primary {
  border-color: var(--ref-blue, #2f73d9) !important;
  background-color: var(--ref-blue, #2f73d9) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] body .assistant-artifact-history-expired {
  border-color: var(--theme-line-strong, #3b4656) !important;
  background-color: var(--theme-panel-soft, #20252d) !important;
  color: var(--theme-text, #f1f5fa) !important;
}

html[data-theme="dark"] body .assistant-artifact-history-expired .assistant-artifact-error strong {
  color: var(--theme-text, #f1f5fa) !important;
}

html[data-theme="dark"] body .assistant-artifact-history-expired .assistant-artifact-error span {
  color: var(--theme-muted, #aeb8c6) !important;
}

html[data-theme="dark"] body .assistant-artifact-history-expired > footer button {
  border-color: var(--theme-line-strong, #475365) !important;
  background-color: var(--theme-panel-raised, #2b313b) !important;
  color: var(--theme-text, #f1f5fa) !important;
}

/* Quality metadata makes the assistant result auditable at a glance: the user
   can verify category, output dimensions, standard version and Image 2.0
   route without opening another panel. */
html body .assistant-artifact-quality-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  background-color: var(--theme-panel-soft, #f6f9fd) !important;
}

html body .assistant-artifact-quality-meta span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 2px 7px !important;
  border: 1px solid var(--theme-line, #d9e2ef) !important;
  border-radius: 5px !important;
  color: var(--theme-muted, #617594) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

html[data-theme="dark"] body .assistant-artifact-quality-meta {
  background-color: var(--theme-panel-soft, #20252d) !important;
}

html[data-theme="dark"] body .assistant-artifact-quality-meta span {
  border-color: var(--theme-line-strong, #3b4656) !important;
  color: var(--theme-muted, #aeb8c6) !important;
}

html body .assistant-attachment-chip {
  align-items: center !important;
  gap: 5px !important;
}

html body .assistant-attachment-chip.reference-image em {
  color: var(--theme-accent, #146ef5) !important;
}

html body .assistant-attachment-role-controls {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 1px !important;
  border: 1px solid var(--theme-line, #d9e2ef) !important;
  border-radius: 5px !important;
  background: var(--theme-panel, #ffffff) !important;
}

html body .assistant-attachment-role-controls button {
  min-height: 18px !important;
  padding: 0 5px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--theme-muted, #617594) !important;
  font-size: 8px !important;
  cursor: pointer !important;
}

html body .assistant-attachment-role-controls button.active {
  background: var(--theme-accent, #146ef5) !important;
  color: #ffffff !important;
}

html body .assistant-attachment-role-controls button:disabled {
  opacity: .55 !important;
  cursor: default !important;
}

html[data-theme="dark"] body .assistant-attachment-role-controls {
  border-color: var(--theme-line-strong, #3b4656) !important;
  background: var(--theme-panel-soft, #20252d) !important;
}

html[data-theme="dark"] body .assistant-attachment-role-controls button {
  color: var(--theme-muted, #aeb8c6) !important;
}

/* The pre-generation quality gate is deliberately opaque and compact. It
   keeps the assistant's assumptions inspectable without covering the actual
   generated canvas or inheriting the old translucent popover treatment. */
html body .assistant-quality-gate {
  display: block !important;
  width: auto !important;
  margin: 8px 14px 10px !important;
  border: 1px solid #c9d9ec !important;
  border-left: 3px solid #1677ff !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #172b46 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body .assistant-quality-gate > summary {
  display: flex !important;
  min-height: 42px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 11px !important;
  cursor: pointer !important;
  list-style: none !important;
  background: #f4f8fd !important;
  color: #17304f !important;
}

html body .assistant-quality-gate > summary::-webkit-details-marker {
  display: none !important;
}

html body .assistant-quality-gate > summary > span {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: 17px minmax(0, auto) !important;
  align-items: center !important;
  column-gap: 7px !important;
}

html body .assistant-quality-gate > summary > span > svg,
html body .assistant-quality-gate > summary > span > i {
  grid-row: span 2 !important;
  width: 16px !important;
  height: 16px !important;
  color: #1677ff !important;
}

html body .assistant-quality-gate > summary strong {
  min-width: 0 !important;
  color: #17304f !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

html body .assistant-quality-gate > summary small {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #617594 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .assistant-quality-gate > summary em {
  flex: 0 0 auto !important;
  padding: 3px 7px !important;
  border: 1px solid #b9d3f5 !important;
  border-radius: 4px !important;
  background: #eaf3ff !important;
  color: #0b55d4 !important;
  font-size: 10px !important;
  font-style: normal !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

html body .assistant-quality-gate > .assistant-quality-gate-body {
  padding: 9px 11px 10px !important;
  border-top: 1px solid #dbe7f5 !important;
  background: #ffffff !important;
}

html body .assistant-quality-gate-body > ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body .assistant-quality-gate-body > ul > li {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: 14px minmax(0, 1fr) !important;
  gap: 6px !important;
  align-items: start !important;
  padding: 6px 7px !important;
  border: 1px solid #dce8f6 !important;
  border-radius: 4px !important;
  background: #f7faff !important;
}

html body .assistant-quality-gate-body > ul > li > svg,
html body .assistant-quality-gate-body > ul > li > i {
  width: 13px !important;
  height: 13px !important;
  margin-top: 1px !important;
  color: #1677ff !important;
}

html body .assistant-quality-gate-body > ul > li.warning > svg,
html body .assistant-quality-gate-body > ul > li.warning > i {
  color: #8a6500 !important;
}

html body .assistant-quality-gate-body > ul > li.blocked > svg,
html body .assistant-quality-gate-body > ul > li.blocked > i {
  color: #bd2c2c !important;
}

html body .assistant-quality-gate-body li span {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
}

html body .assistant-quality-gate-body li strong {
  color: #243b5a !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

html body .assistant-quality-gate-body li small {
  overflow: hidden !important;
  color: #617594 !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .assistant-quality-gate-body > footer {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  gap: 6px 12px !important;
  margin-top: 8px !important;
  padding-top: 7px !important;
  border-top: 1px solid #e1eaf4 !important;
  color: #617594 !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}

html body .assistant-quality-gate.warning {
  border-left-color: #8a6500 !important;
}

html body .assistant-quality-gate.warning > summary > em {
  border-color: #e6d39b !important;
  background: #fff8df !important;
  color: #765700 !important;
}

html body .assistant-quality-gate.blocked {
  border-left-color: #bd2c2c !important;
}

html body .assistant-quality-gate.blocked > summary > em {
  border-color: #efbcbc !important;
  background: #fff0f0 !important;
  color: #a02222 !important;
}

html[data-theme="dark"] body .assistant-quality-gate {
  border-color: #3f4c5e !important;
  border-left-color: #4b9bff !important;
  background: #171a1f !important;
  background-color: #171a1f !important;
  color: #f2f5f9 !important;
}

html[data-theme="dark"] body .assistant-quality-gate > summary {
  background: #20252d !important;
  color: #f2f5f9 !important;
}

html[data-theme="dark"] body .assistant-quality-gate > summary strong,
html[data-theme="dark"] body .assistant-quality-gate-body li strong {
  color: #f2f5f9 !important;
}

html[data-theme="dark"] body .assistant-quality-gate > summary small,
html[data-theme="dark"] body .assistant-quality-gate-body li small,
html[data-theme="dark"] body .assistant-quality-gate-body > footer {
  color: #aeb8c6 !important;
}

html[data-theme="dark"] body .assistant-quality-gate > summary > em {
  border-color: #38699f !important;
  background: #1f416b !important;
  color: #b9d9ff !important;
}

html[data-theme="dark"] body .assistant-quality-gate > .assistant-quality-gate-body {
  border-top-color: #333d4a !important;
  background: #171a1f !important;
}

html[data-theme="dark"] body .assistant-quality-gate-body > ul > li {
  border-color: #3a4655 !important;
  background: #252b34 !important;
}

html[data-theme="dark"] body .assistant-quality-gate-body > footer {
  border-top-color: #333d4a !important;
}

html[data-theme="dark"] body .assistant-quality-gate.warning {
  border-left-color: #c49a2c !important;
}

html[data-theme="dark"] body .assistant-quality-gate.warning > summary > em {
  border-color: #6b5726 !important;
  background: #40371f !important;
  color: #f1d889 !important;
}

html[data-theme="dark"] body .assistant-quality-gate.blocked {
  border-left-color: #e35d5d !important;
}

html[data-theme="dark"] body .assistant-quality-gate.blocked > summary > em {
  border-color: #713b3b !important;
  background: #452525 !important;
  color: #ffb4b4 !important;
}

html body .assistant-production-checks,
html body .assistant-artifact-quick-retry {
  margin: 10px 14px !important;
  padding: 10px !important;
  border: 1px solid var(--theme-line, #d9e2ef) !important;
  border-radius: 9px !important;
  background: var(--theme-panel-soft, #f6f9fd) !important;
  color: var(--theme-text, #172033) !important;
}

html body .assistant-production-checks > header,
html body .assistant-artifact-quick-retry > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}

html body .assistant-production-checks > header strong,
html body .assistant-artifact-quick-retry > header strong {
  font-size: 11px !important;
  line-height: 1.25 !important;
}

html body .assistant-production-checks > header span,
html body .assistant-artifact-quick-retry > header span {
  color: var(--theme-muted, #617594) !important;
  font-size: 9px !important;
  white-space: nowrap !important;
}

html body .assistant-production-checks ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body .assistant-production-checks li {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: 14px minmax(0, 1fr) !important;
  gap: 6px !important;
  padding: 7px !important;
  border: 1px solid #dce8f6 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
}

html body .assistant-production-checks li > svg,
html body .assistant-production-checks li > i {
  width: 13px !important;
  height: 13px !important;
  margin-top: 1px !important;
  color: #1677ff !important;
}

html body .assistant-production-checks li.warning > svg,
html body .assistant-production-checks li.warning > i {
  color: #8a6500 !important;
}

html body .assistant-production-checks li span {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
}

html body .assistant-production-checks li strong {
  color: #243b5a !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}

html body .assistant-production-checks li small {
  overflow: hidden !important;
  color: #617594 !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .assistant-artifact-quick-retry > div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

html body .assistant-artifact-quick-retry button {
  min-height: 28px !important;
  padding: 0 9px !important;
  border: 1px solid var(--theme-line, #d9e2ef) !important;
  border-radius: 7px !important;
  background: var(--theme-panel, #ffffff) !important;
  color: var(--theme-muted, #617594) !important;
  font-size: 10px !important;
  cursor: pointer !important;
}

html body .assistant-artifact-quick-retry button:hover {
  border-color: var(--theme-accent, #146ef5) !important;
  color: var(--theme-accent, #146ef5) !important;
}

html[data-theme="dark"] body .assistant-production-checks,
html[data-theme="dark"] body .assistant-artifact-quick-retry {
  border-color: #3f4c5e !important;
  background: #20252d !important;
  color: #f2f5f9 !important;
}

html[data-theme="dark"] body .assistant-production-checks li,
html[data-theme="dark"] body .assistant-artifact-quick-retry button {
  border-color: #3a4655 !important;
  background: #171a1f !important;
}

html[data-theme="dark"] body .assistant-production-checks li strong {
  color: #f2f5f9 !important;
}

html[data-theme="dark"] body .assistant-production-checks li small,
html[data-theme="dark"] body .assistant-production-checks > header span,
html[data-theme="dark"] body .assistant-artifact-quick-retry > header span,
html[data-theme="dark"] body .assistant-artifact-quick-retry button {
  color: #aeb8c6 !important;
}

/* Explain the exact category standard before credits are spent. This is a
   production brief, not a decorative card: dense, opaque and easy to scan. */
html body .assistant-design-strategy {
  display: block !important;
  width: auto !important;
  margin: 8px 14px 10px !important;
  overflow: hidden !important;
  border: 1px solid #bfd2ea !important;
  border-left: 3px solid #1677ff !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #172b46 !important;
  box-shadow: none !important;
}

html body .assistant-design-strategy > summary {
  display: flex !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 11px !important;
  cursor: pointer !important;
  list-style: none !important;
  background: #edf5ff !important;
  color: #17304f !important;
}

html body .assistant-design-strategy > summary::-webkit-details-marker {
  display: none !important;
}

html body .assistant-design-strategy > summary > span {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: 18px minmax(0, auto) !important;
  column-gap: 7px !important;
  align-items: center !important;
}

html body .assistant-design-strategy > summary svg {
  grid-row: span 2 !important;
  width: 16px !important;
  height: 16px !important;
  color: #1677ff !important;
}

html body .assistant-design-strategy > summary strong {
  color: #17304f !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

html body .assistant-design-strategy > summary small {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #58708f !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .assistant-design-strategy > summary em {
  flex: 0 0 auto !important;
  padding: 3px 7px !important;
  border: 1px solid #b6cff0 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #0b55d4 !important;
  font-size: 10px !important;
  font-style: normal !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

html body .assistant-design-strategy-body {
  display: grid !important;
  gap: 9px !important;
  padding: 10px 11px 11px !important;
  border-top: 1px solid #d7e5f5 !important;
  background: #ffffff !important;
}

html body .assistant-design-strategy-meta {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html body .assistant-design-strategy-meta > span {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
  padding: 6px 7px !important;
  border: 1px solid #dce8f6 !important;
  border-radius: 4px !important;
  background: #f7faff !important;
  color: #28405f !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

html body .assistant-design-strategy-meta b,
html body .assistant-design-strategy-body h4 {
  margin: 0 !important;
  color: #17304f !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

html body .assistant-design-strategy-workflow {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

html body .assistant-design-strategy-workflow > span {
  padding: 3px 6px !important;
  border: 1px solid #cfe0f3 !important;
  border-radius: 4px !important;
  background: #f1f7ff !important;
  color: #31567f !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
}

html body .assistant-design-strategy-body > section,
html body .assistant-design-strategy-columns > section {
  display: grid !important;
  min-width: 0 !important;
  gap: 6px !important;
  margin: 0 !important;
}

html body .assistant-design-strategy-pages {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body .assistant-design-strategy-pages > li {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  gap: 6px !important;
  align-items: start !important;
  padding: 6px !important;
  border: 1px solid #e0e9f4 !important;
  border-radius: 4px !important;
  background: #fafcff !important;
}

html body .assistant-design-strategy-pages > li > b {
  display: grid !important;
  width: 24px !important;
  height: 22px !important;
  place-items: center !important;
  border-radius: 3px !important;
  background: #1677ff !important;
  color: #ffffff !important;
  font-size: 9px !important;
  line-height: 1 !important;
}

html body .assistant-design-strategy-pages > li > span {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
}

html body .assistant-design-strategy-pages strong {
  color: #243b5a !important;
  font-size: 9px !important;
  line-height: 1.3 !important;
}

html body .assistant-design-strategy-pages small {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: #637894 !important;
  font-size: 8px !important;
  line-height: 1.35 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html body .assistant-design-strategy-pages > .assistant-design-strategy-more {
  display: block !important;
  grid-column: 1 / -1 !important;
  color: #637894 !important;
  font-size: 9px !important;
  text-align: center !important;
}

html body .assistant-design-strategy-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

html body .assistant-design-strategy-columns > section {
  padding: 7px 8px !important;
  border: 1px solid #dce8f6 !important;
  border-radius: 4px !important;
  background: #f7faff !important;
}

html body .assistant-design-strategy-columns ul {
  display: grid !important;
  gap: 4px !important;
  margin: 0 !important;
  padding-left: 14px !important;
  color: #4e6380 !important;
  font-size: 9px !important;
  line-height: 1.45 !important;
}

html body .assistant-design-strategy-route > div,
html body .assistant-design-strategy-locks > div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html body .assistant-design-strategy-route span,
html body .assistant-design-strategy-locks span {
  display: flex !important;
  min-width: 0 !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding: 6px 7px !important;
  border: 1px solid #dce8f6 !important;
  border-radius: 4px !important;
  background: #f7faff !important;
  color: #405a78 !important;
  font-size: 9px !important;
  line-height: 1.4 !important;
}

html body .assistant-design-strategy-locks > div {
  display: flex !important;
  flex-wrap: wrap !important;
}

html body .assistant-design-strategy-locks span {
  flex: 0 0 auto !important;
  padding: 4px 6px !important;
}

html body .assistant-design-strategy-route svg,
html body .assistant-design-strategy-locks svg,
html body .assistant-design-strategy-missing svg,
html body .assistant-design-strategy-ready svg {
  flex: 0 0 auto !important;
  width: 13px !important;
  height: 13px !important;
  color: #1677ff !important;
}

html body .assistant-design-strategy-missing,
html body .assistant-design-strategy-ready {
  display: flex !important;
  align-items: flex-start !important;
  gap: 7px !important;
  padding: 7px 8px !important;
  border: 1px solid #e4d5a3 !important;
  border-radius: 4px !important;
  background: #fff9e7 !important;
  color: #675213 !important;
}

html body .assistant-design-strategy-missing > span {
  display: grid !important;
  gap: 2px !important;
}

html body .assistant-design-strategy-missing strong,
html body .assistant-design-strategy-ready span {
  font-size: 9px !important;
  line-height: 1.35 !important;
}

html body .assistant-design-strategy-missing small {
  color: #786526 !important;
  font-size: 9px !important;
  line-height: 1.4 !important;
}

html body .assistant-design-strategy-ready {
  border-color: #b9ddc8 !important;
  background: #f1fbf5 !important;
  color: #1d6b3b !important;
}

html body .assistant-design-strategy-ready svg {
  color: #21844a !important;
}

html[data-theme="dark"] body .assistant-design-strategy {
  border-color: #3f4c5e !important;
  border-left-color: #4b9bff !important;
  background: #171a1f !important;
  background-color: #171a1f !important;
  color: #f2f5f9 !important;
}

html[data-theme="dark"] body .assistant-design-strategy > summary {
  background: #20252d !important;
  color: #f2f5f9 !important;
}

html[data-theme="dark"] body .assistant-design-strategy > summary strong,
html[data-theme="dark"] body .assistant-design-strategy-meta b,
html[data-theme="dark"] body .assistant-design-strategy-body h4,
html[data-theme="dark"] body .assistant-design-strategy-pages strong {
  color: #f2f5f9 !important;
}

html[data-theme="dark"] body .assistant-design-strategy > summary small,
html[data-theme="dark"] body .assistant-design-strategy-pages small {
  color: #aeb8c6 !important;
}

html[data-theme="dark"] body .assistant-design-strategy > summary em {
  border-color: #38699f !important;
  background: #1f416b !important;
  color: #b9d9ff !important;
}

html[data-theme="dark"] body .assistant-design-strategy-body {
  border-top-color: #333d4a !important;
  background: #171a1f !important;
}

html[data-theme="dark"] body .assistant-design-strategy-meta > span,
html[data-theme="dark"] body .assistant-design-strategy-columns > section,
html[data-theme="dark"] body .assistant-design-strategy-route span,
html[data-theme="dark"] body .assistant-design-strategy-locks span,
html[data-theme="dark"] body .assistant-design-strategy-pages > li {
  border-color: #3a4655 !important;
  background: #252b34 !important;
  color: #c4cbd5 !important;
}

html[data-theme="dark"] body .assistant-design-strategy-workflow > span {
  border-color: #39516f !important;
  background: #202f43 !important;
  color: #b9d9ff !important;
}

html[data-theme="dark"] body .assistant-design-strategy-columns ul {
  color: #b4beca !important;
}

html[data-theme="dark"] body .assistant-design-strategy-missing {
  border-color: #6b5726 !important;
  background: #40371f !important;
  color: #f1d889 !important;
}

html[data-theme="dark"] body .assistant-design-strategy-missing small {
  color: #dfca8b !important;
}

html[data-theme="dark"] body .assistant-design-strategy-ready {
  border-color: #315c41 !important;
  background: #1d3427 !important;
  color: #b8e5c8 !important;
}

/* Finished and failed jobs must remain recoverable without obscuring the
   canvas. Active generation keeps the larger dock; passive states collapse
   into an opaque status strip at the lower-right edge. */
html body #generationProgress.is-passive {
  right: 12px !important;
  bottom: 12px !important;
  z-index: 1495 !important;
  width: 300px !important;
  max-width: calc(100vw - 24px) !important;
  min-height: 0 !important;
  max-height: 178px !important;
  padding: 10px 11px !important;
  overflow: hidden !important;
  border-color: #c8d6e6 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 10px 28px rgba(30, 52, 78, .16) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body:has(#step-edit) #generationProgress.is-passive {
  right: 12px !important;
}

html body #generationProgress.is-passive.is-failed {
  border-color: #dba9a9 !important;
  border-left: 3px solid #c64242 !important;
}

html body #generationProgress.is-passive.is-completed {
  border-left: 3px solid #1677ff !important;
}

html body #generationProgress.is-passive .generation-progress-head {
  gap: 8px !important;
}

html body #generationProgress.is-passive .generation-progress-head strong {
  color: #1d3049 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

html body #generationProgress.is-passive .generation-progress-head span {
  color: #64758a !important;
  font-size: 9px !important;
  white-space: nowrap !important;
}

html body #generationProgress.is-passive p {
  display: -webkit-box !important;
  min-height: 0 !important;
  max-height: 48px !important;
  margin: 7px 0 0 !important;
  overflow: hidden !important;
  color: #53677f !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
}

html body #generationProgress.is-passive .generation-progress-bar {
  display: none !important;
}

html body #generationProgress.is-passive .generation-progress-actions {
  margin-top: 8px !important;
}

html body #generationProgress.is-passive .generation-progress-actions button:not(.assistant-icon-btn) {
  min-height: 26px !important;
  padding: 4px 9px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
}

html[data-theme="dark"] body #generationProgress.is-passive {
  border-color: #3b4655 !important;
  background: #171a1f !important;
  background-color: #171a1f !important;
  color: #f3f5f8 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .38) !important;
}

html[data-theme="dark"] body #generationProgress.is-passive.is-failed {
  border-color: #694141 !important;
  border-left-color: #e35d5d !important;
}

html[data-theme="dark"] body #generationProgress.is-passive .generation-progress-head strong {
  color: #f3f5f8 !important;
}

html[data-theme="dark"] body #generationProgress.is-passive .generation-progress-head span,
html[data-theme="dark"] body #generationProgress.is-passive p {
  color: #aeb8c6 !important;
}

/* Professional preflight is a second, post-generation layer. Keep it
   visually distinct from the input quality gate while using the same opaque
   surfaces and compact two-column rhythm. */
html body .assistant-professional-review {
  display: block !important;
  width: auto !important;
  margin: 8px 14px 10px !important;
  border: 1px solid #c9d9ec !important;
  border-left: 3px solid #1677ff !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #172b46 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Keep the generation record visible without competing with the preview. It
   is deliberately collapsible so long-lived conversations stay scannable. */
html body .assistant-artifact-evidence {
  display: block !important;
  margin: 7px 14px 8px !important;
  border: 1px solid #dce8f6 !important;
  border-radius: 5px !important;
  background: #f7faff !important;
  color: #243b5a !important;
  overflow: hidden !important;
}

html body .assistant-artifact-evidence > summary {
  display: flex !important;
  min-height: 36px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 6px 9px !important;
  cursor: pointer !important;
  list-style: none !important;
  background: #eef5fd !important;
}

html body .assistant-artifact-evidence > summary::-webkit-details-marker {
  display: none !important;
}

html body .assistant-artifact-evidence > summary > span {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: 15px minmax(0, auto) !important;
  align-items: center !important;
  column-gap: 6px !important;
}

html body .assistant-artifact-evidence > summary svg,
html body .assistant-artifact-evidence > summary i {
  grid-row: span 2 !important;
  width: 14px !important;
  height: 14px !important;
  color: #1677ff !important;
}

html body .assistant-artifact-evidence > summary strong {
  color: #243b5a !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

html body .assistant-artifact-evidence > summary small {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #617594 !important;
  font-size: 9px !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .assistant-artifact-evidence-lock {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 4px !important;
  color: #1677ff !important;
  font-size: 9px !important;
  white-space: nowrap !important;
}

html body .assistant-artifact-evidence-lock svg,
html body .assistant-artifact-evidence-lock i {
  width: 12px !important;
  height: 12px !important;
}

html body .assistant-artifact-evidence > dl {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px 9px !important;
  margin: 0 !important;
  padding: 8px 9px 9px !important;
  border-top: 1px solid #dce8f6 !important;
  background: #ffffff !important;
}

html body .assistant-artifact-evidence > dl > div {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  gap: 5px !important;
  align-items: baseline !important;
}

html body .assistant-artifact-evidence dt {
  color: #617594 !important;
  font-size: 8px !important;
  white-space: nowrap !important;
}

html body .assistant-artifact-evidence dd {
  min-width: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  color: #243b5a !important;
  font-size: 9px !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme="dark"] body .assistant-artifact-evidence {
  border-color: #3a4655 !important;
  background: #252b34 !important;
  color: #f2f5f9 !important;
}

html[data-theme="dark"] body .assistant-artifact-evidence > summary {
  background: #20252d !important;
}

html[data-theme="dark"] body .assistant-artifact-evidence > summary strong,
html[data-theme="dark"] body .assistant-artifact-evidence dd {
  color: #f2f5f9 !important;
}

html[data-theme="dark"] body .assistant-artifact-evidence > summary small,
html[data-theme="dark"] body .assistant-artifact-evidence dt {
  color: #aeb8c6 !important;
}

html[data-theme="dark"] body .assistant-artifact-evidence > dl {
  border-top-color: #3a4655 !important;
  background: #171a1f !important;
}

/* Final-image design director review: opaque on both themes and driven by the
   actual generated bitmap, not by the pre-generation style prediction. */
html body .assistant-design-director-review {
  margin: 8px 0;
  border: 1px solid color-mix(in srgb, var(--v2-blue) 32%, var(--v2-line));
  border-radius: 6px;
  background: var(--v2-panel);
  color: var(--v2-text);
}

html body .assistant-design-director-review > summary {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}

html body .assistant-design-director-review > summary::-webkit-details-marker { display: none; }
html body .assistant-design-director-review > summary > span { display: grid; grid-template-columns: 18px minmax(0, 1fr); min-width: 0; align-items: center; column-gap: 6px; }
html body .assistant-design-director-review > summary svg { grid-row: 1 / 3; width: 16px; height: 16px; color: var(--v2-blue); }
html body .assistant-design-director-review > summary strong { font-size: 10px; }
html body .assistant-design-director-review > summary small { color: var(--v2-faint); font-size: 8px; }
html body .assistant-design-director-review > summary > em { flex: 0 0 auto; color: var(--v2-muted); font-size: 8px; font-style: normal; }
html body .assistant-design-director-review > summary > em b { color: var(--v2-blue); font-size: 17px; }
html body .assistant-design-director-review-body { display: grid; gap: 7px; padding: 0 10px 10px; border-top: 1px solid var(--v2-line); }
html body .assistant-design-director-ranking { display: flex; gap: 5px; padding-top: 8px; overflow-x: auto; }
html body .assistant-design-director-ranking span { flex: 0 0 auto; padding: 4px 6px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel-soft); color: var(--v2-muted); font-size: 8px; }
html body .assistant-design-director-ranking span.recommended { border-color: var(--v2-blue); color: var(--v2-blue); }
html body .assistant-design-director-dimensions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
html body .assistant-design-director-dimensions span { display: grid; min-width: 0; gap: 1px; padding: 5px; border: 1px solid var(--v2-line); background: var(--v2-panel-soft); }
html body .assistant-design-director-dimensions b { overflow: hidden; color: var(--v2-faint); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
html body .assistant-design-director-dimensions em { color: var(--v2-text); font-size: 10px; font-style: normal; }
html body .assistant-design-director-review-body p,
html body .assistant-design-director-review-body li,
html body .assistant-design-director-review-body footer { color: var(--v2-muted); font-size: 8px; line-height: 1.5; }
html body .assistant-design-director-review-body ul { display: grid; gap: 3px; margin: 0; padding-left: 16px; }
html body .assistant-design-director-review-body footer { padding-top: 6px; border-top: 1px solid var(--v2-line); }

html body .assistant-generated-image-card,
html body .assistant-moodboard-card { position: relative; }
html body .assistant-design-director-badge { position: absolute; z-index: 4; top: 6px; left: 6px; display: inline-flex; max-width: calc(100% - 12px); min-height: 22px; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-panel); color: var(--v2-muted); font-size: 8px; box-shadow: 0 2px 8px rgb(0 0 0 / 16%); }
html body .assistant-design-director-badge svg { width: 12px; height: 12px; }
html body .assistant-design-director-badge.recommended { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; }

html body .style-director-review { display: grid; gap: 7px; margin: 8px 0; padding: 9px; border: 1px solid color-mix(in srgb, var(--v2-blue) 34%, var(--v2-line)); border-radius: 6px; background: var(--v2-panel); }
html body .style-director-review > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html body .style-director-review > header > span { display: inline-flex; align-items: center; gap: 5px; }
html body .style-director-review > header svg { width: 15px; height: 15px; color: var(--v2-blue); }
html body .style-director-review > header strong { font-size: 10px; }
html body .style-director-review > header em { color: var(--v2-muted); font-size: 8px; font-style: normal; }
html body .style-director-review > header em b { color: var(--v2-blue); font-size: 15px; }
html body .style-director-review > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
html body .style-director-review > div span { display: grid; min-width: 0; padding: 4px; border: 1px solid var(--v2-line); background: var(--v2-panel-soft); }
html body .style-director-review > div b { overflow: hidden; color: var(--v2-faint); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
html body .style-director-review > div em { color: var(--v2-text); font-size: 9px; font-style: normal; }
html body .style-director-review > p { margin: 0; color: var(--v2-muted); font-size: 8px; line-height: 1.5; }
html body .style-director-recommended-badge { position: absolute; top: 4px; left: 4px; display: inline-flex; min-height: 19px; align-items: center; gap: 3px; padding: 2px 5px; border-radius: 3px; background: var(--v2-blue); color: #fff; font-size: 7px; font-style: normal; box-shadow: 0 2px 7px rgb(0 0 0 / 18%); }
html body .style-director-recommended-badge svg { width: 10px; height: 10px; }
html body .workflow-thumb-image { position: relative; }

html[data-theme="dark"] body .assistant-design-director-review,
html[data-theme="dark"] body .assistant-design-director-ranking span,
html[data-theme="dark"] body .assistant-design-director-dimensions span,
html[data-theme="dark"] body .assistant-design-director-badge,
html[data-theme="dark"] body .style-director-review,
html[data-theme="dark"] body .style-director-review > div span {
  background-color: #101318;
  background-image: none;
}

html body .assistant-professional-review > summary {
  display: flex !important;
  min-height: 42px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 11px !important;
  cursor: pointer !important;
  list-style: none !important;
  background: #f4f8fd !important;
  color: #17304f !important;
}

html body .assistant-professional-review > summary::-webkit-details-marker {
  display: none !important;
}

html body .assistant-professional-review > summary > span {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: 17px minmax(0, auto) !important;
  align-items: center !important;
  column-gap: 7px !important;
}

html body .assistant-professional-review > summary > span > svg,
html body .assistant-professional-review > summary > span > i {
  grid-row: span 2 !important;
  width: 16px !important;
  height: 16px !important;
  color: #1677ff !important;
}

html body .assistant-professional-review > summary strong {
  min-width: 0 !important;
  color: #17304f !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

html body .assistant-professional-review > summary small {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #617594 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .assistant-professional-review > summary em {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: baseline !important;
  gap: 4px !important;
  padding: 3px 7px !important;
  border: 1px solid #b9d3f5 !important;
  border-radius: 4px !important;
  background: #eaf3ff !important;
  color: #0b55d4 !important;
  font-size: 10px !important;
  font-style: normal !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

html body .assistant-professional-review > summary em b {
  font-size: 12px !important;
}

html body .assistant-professional-review-body {
  padding: 10px 11px 11px !important;
  border-top: 1px solid #dbe7f5 !important;
  background: #ffffff !important;
}

html body .assistant-professional-review-score {
  display: flex !important;
  min-height: 40px !important;
  align-items: center !important;
  gap: 9px !important;
  margin-bottom: 9px !important;
  padding: 7px 9px !important;
  border: 1px solid #dce8f6 !important;
  border-radius: 5px !important;
  background: #f7faff !important;
}

html body .assistant-professional-review-score strong {
  color: #0b55d4 !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

html body .assistant-professional-review-score span {
  color: #617594 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

html body .assistant-professional-review-checks {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body .assistant-professional-review-checks > li {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: 14px minmax(0, 1fr) !important;
  gap: 6px !important;
  align-items: start !important;
  padding: 6px 7px !important;
  border: 1px solid #dce8f6 !important;
  border-radius: 4px !important;
  background: #f7faff !important;
}

html body .assistant-professional-review-checks > li > svg,
html body .assistant-professional-review-checks > li > i {
  width: 13px !important;
  height: 13px !important;
  margin-top: 1px !important;
  color: #1677ff !important;
}

html body .assistant-professional-review-checks > li.warning > svg,
html body .assistant-professional-review-checks > li.warning > i {
  color: #8a6500 !important;
}

html body .assistant-professional-review-checks > li.blocked > svg,
html body .assistant-professional-review-checks > li.blocked > i {
  color: #bd2c2c !important;
}

html body .assistant-professional-review-checks li span {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
}

html body .assistant-professional-review-checks li strong {
  color: #243b5a !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

html body .assistant-professional-review-checks li small {
  overflow: hidden !important;
  color: #617594 !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .assistant-professional-review-body > section {
  margin-top: 9px !important;
}

html body .assistant-professional-review-body > section h4 {
  margin: 0 0 5px !important;
  color: #243b5a !important;
  font-size: 10px !important;
}

html body .assistant-professional-review-issues,
html body .assistant-professional-review-suggestions {
  display: grid !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body .assistant-professional-review-issues li {
  display: flex !important;
  gap: 5px !important;
  align-items: flex-start !important;
  color: #617594 !important;
  font-size: 9px !important;
  line-height: 1.4 !important;
}

html body .assistant-professional-review-issues li svg,
html body .assistant-professional-review-issues li i {
  width: 12px !important;
  height: 12px !important;
  flex: 0 0 auto !important;
  margin-top: 1px !important;
  color: #bd2c2c !important;
}

html body .assistant-professional-review-issues li.warning svg,
html body .assistant-professional-review-issues li.warning i {
  color: #8a6500 !important;
}

html body .assistant-professional-review-suggestions li {
  padding-left: 11px !important;
  color: #617594 !important;
  font-size: 9px !important;
  line-height: 1.4 !important;
}

html body .assistant-professional-review-body > footer {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: 9px !important;
  padding-top: 8px !important;
  border-top: 1px solid #e1eaf4 !important;
  color: #617594 !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}

html body .assistant-professional-review-body > footer > button {
  display: inline-flex !important;
  min-height: 28px !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 9px !important;
  border: 1px solid #0b55d4 !important;
  border-radius: 5px !important;
  background: #0b55d4 !important;
  color: #ffffff !important;
  font-size: 10px !important;
}

html body .assistant-professional-review-body > footer > button svg,
html body .assistant-professional-review-body > footer > button i {
  width: 13px !important;
  height: 13px !important;
}

html body .assistant-professional-review-repair-note {
  flex: 1 1 100% !important;
  color: #617594 !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}

html body .assistant-professional-review-body > footer > button:disabled {
  cursor: wait !important;
  opacity: .62 !important;
}

html[data-theme="dark"] body .assistant-professional-review {
  border-color: #3f4c5e !important;
  border-left-color: #4b9bff !important;
  background: #171a1f !important;
  background-color: #171a1f !important;
  color: #f2f5f9 !important;
}

html[data-theme="dark"] body .assistant-professional-review > summary {
  background: #20252d !important;
  color: #f2f5f9 !important;
}

html[data-theme="dark"] body .assistant-professional-review > summary strong,
html[data-theme="dark"] body .assistant-professional-review-body > section h4,
html[data-theme="dark"] body .assistant-professional-review-checks li strong {
  color: #f2f5f9 !important;
}

html[data-theme="dark"] body .assistant-professional-review > summary small,
html[data-theme="dark"] body .assistant-professional-review-score span,
html[data-theme="dark"] body .assistant-professional-review-checks li small,
html[data-theme="dark"] body .assistant-professional-review-issues li,
html[data-theme="dark"] body .assistant-professional-review-suggestions li,
html[data-theme="dark"] body .assistant-professional-review-body > footer {
  color: #aeb8c6 !important;
}

html[data-theme="dark"] body .assistant-professional-review > summary em {
  border-color: #38699f !important;
  background: #1f416b !important;
  color: #b9d9ff !important;
}

html[data-theme="dark"] body .assistant-professional-review-body {
  border-top-color: #333d4a !important;
  background: #171a1f !important;
}

html[data-theme="dark"] body .assistant-professional-review-score,
html[data-theme="dark"] body .assistant-professional-review-checks > li {
  border-color: #3a4655 !important;
  background: #252b34 !important;
}

html[data-theme="dark"] body .assistant-professional-review-score strong {
  color: #8fc6ff !important;
}

html[data-theme="dark"] body .assistant-professional-review-body > section h4,
html[data-theme="dark"] body .assistant-professional-review-body > footer {
  border-top-color: #333d4a !important;
}

html[data-theme="dark"] body .assistant-professional-review-body > footer > button {
  border-color: #2f81e8 !important;
  background: #216dcc !important;
  color: #ffffff !important;
}

html[data-theme="dark"] body .assistant-professional-review-repair-note {
  color: #aeb8c6 !important;
}

html:not([data-theme="dark"]) body #appShell #step-edit > .thumb-panel #addSlideBtn {
  background-color: var(--neutral-accent, #a86f25) !important;
  color: var(--neutral-accent-text, #ffffff) !important;
}

html:not([data-theme="dark"]) body #step-edit :is(
  #addSlideBtn,
  .primary-btn,
  button.primary,
  button.recommended,
  [data-category-action="generate"],
  [data-design-smart-action="generate-range"]
):not(:disabled) :is(.button-label, span) {
  color: var(--neutral-accent-text, #ffffff) !important;
}

html:not([data-theme="dark"]) body .smart-create-preference-options button.active {
  background-color: #1677ff !important;
}

html:not([data-theme="dark"]) body .smart-create-preference-options button.active > em {
  background: rgb(255 255 255 / 18%) !important;
  color: #ffffff !important;
}

html:not([data-theme="dark"]) body .file-center-role-row.primary {
  background-color: #1677ff !important;
  color: #ffffff !important;
}

html:not([data-theme="dark"]) body .file-center-role-row.primary :is(strong, small),
html:not([data-theme="dark"]) body .file-center-role-row.primary > em {
  color: #ffffff !important;
}

html:not([data-theme="dark"]) body #appShell #step-edit .project-copy-lock-control.active .project-copy-lock-copy strong em,
html:not([data-theme="dark"]) body #appShell #step-edit .project-copy-lock-control:has(input:checked) .project-copy-lock-copy strong em {
  background: rgb(255 255 255 / 18%) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] body .smart-create-preference-options button.active {
  background-color: var(--neutral-accent, #a86f25) !important;
}

html[data-theme="dark"] body .smart-create-preference-options button.active > em {
  background: rgb(255 255 255 / 18%) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] body .file-center-role-row.primary {
  background-color: var(--neutral-accent, #a86f25) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] body .file-center-role-row.primary :is(strong, small),
html[data-theme="dark"] body .file-center-role-row.primary > em {
  color: #ffffff !important;
}

html[data-theme="dark"] body #appShell #step-edit .design-category-toolbar-main strong {
  color: #f2f2f2 !important;
}

html[data-theme="dark"] body #appShell #step-edit .delivery-prepare-action {
  background: var(--neutral-accent, #a86f25) !important;
  background-color: var(--neutral-accent, #a86f25) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] body #appShell #step-edit .delivery-prepare-action :is(span, svg, .fluent-icon-shell, .fluent-icon) {
  color: #ffffff !important;
  stroke: currentColor !important;
}

/* The calendar renders two week-navigation buttons at runtime. Keep both
   buttons inside the header grid instead of reserving room for only one. */
html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-calendar-head {
  grid-template-columns: minmax(0, 1fr) 56px !important;
  min-width: 0 !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-calendar-nav {
  display: inline-flex !important;
  width: 56px !important;
  min-width: 56px !important;
  justify-content: flex-end !important;
  gap: 4px !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .dashboard-calendar-nav button {
  flex: 0 0 26px !important;
}

/* Compact 1024px desktop home so project continuation stays in the first
   viewport while preserving every creation tool and the right information rail. */
@media (min-width: 981px) and (max-width: 1100px) and (max-height: 820px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-content {
    padding-top: 14px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading {
    min-height: 72px !important;
    grid-template-columns: minmax(0, 1fr) 104px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading h2 {
    font-size: 26px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art {
    width: 104px !important;
    height: 72px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art img {
    width: 50px !important;
    height: 50px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions {
    min-height: 52px !important;
    margin: 6px 0 10px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions button {
    min-height: 52px !important;
    padding: 6px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions .quick-action-icon {
    width: 25px !important;
    height: 25px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .smart-create {
    margin-top: 8px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .smart-create-composer {
    padding: 9px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .smart-create-composer textarea {
    min-height: 44px !important;
    height: 44px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent {
    margin-top: 10px !important;
    padding-top: 10px !important;
  }
}

@media (min-width: 1101px) and (max-width: 1360px) and (max-height: 760px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-content {
    padding-top: 12px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading {
    min-height: 64px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading h2 {
    font-size: 27px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions {
    min-height: 48px !important;
    margin: 4px 0 6px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions button {
    min-height: 48px !important;
    padding-block: 4px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .smart-create {
    margin-top: 8px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .smart-create-composer textarea {
    min-height: 36px !important;
    height: 36px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-recent {
    margin-top: 4px !important;
  }
}

/* Final desktop containment and contrast pass. Decorative artwork may glow
   outside its own content box, so expose that effect instead of reporting it
   as clipped content. Toolbar labels must retain a readable single-line box
   when the 1024px desktop layout becomes dense. */
html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art {
  overflow: visible !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading {
  overflow: visible !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .smart-create-toolbar-left {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .smart-create-preference-wrap {
  min-width: 0 !important;
  flex: 0 1 auto !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .smart-create-preference-btn {
  min-width: 0 !important;
  max-width: 174px !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create #smartCreatePreferenceLabel {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (min-width: 981px) and (max-width: 1100px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .smart-create-toolbar-left {
    gap: 6px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .smart-create-tool {
    padding-inline: 9px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .smart-create-preference-btn {
    max-width: 126px !important;
  }
}

html[data-theme="dark"] body #appShell #step-edit .delivery-other-formats > summary em,
html[data-theme="dark"] body #appShell #step-edit .delivery-single-page-export > summary em {
  color: #b8c0cc !important;
}

/* Windows display scaling can place a desktop window between 981px and
   1023.98px in CSS pixels. Keep the document-tabs row explicit in that range
   so the workspace does not inherit the zero-height mobile grid row. */
@media (min-width: 981px) and (max-width: 1023.98px) {
  html body[data-active-step="edit"] #appShell.app-shell {
    grid-template-areas: "topbar" "document-tabs" "workspace" !important;
    grid-template-rows: 56px 38px minmax(0, 1fr) !important;
  }

  html body[data-active-step="edit"] #documentTabsBar {
    display: flex !important;
    grid-area: document-tabs !important;
  }

  html body[data-active-step="edit"] .workspace {
    grid-area: workspace !important;
    min-height: 0 !important;
  }
}

/* Desktop credit balance: keep the account affordance explicit instead of
   hiding the text behind a notification dot. The owner build uses the same
   account UI and exposes its local 3,000-point balance with normal deductions. */
@media (min-width: 981px) {
  /* Keep the balance as a readable account chip. Earlier desktop utility
     rules compress both the control and its parent to a 36px icon button;
     that leaves the text in the DOM but forces it to overlap. */
  html body .topbar #creditsControl {
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    height: auto !important;
    min-height: 34px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body .topbar #creditsControl #licensePoints {
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: 100px !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 11px !important;
    overflow: visible !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  html body .topbar #creditsControl #licensePoints > svg,
  html body .topbar #creditsControl #licensePoints > .fluent-icon-shell {
    display: inline-flex !important;
    flex: 0 0 16px !important;
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
  }

  html body .topbar #creditsControl #licensePoints > span,
  html body .topbar #creditsControl #licensePoints > strong {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    line-height: 1 !important;
  }

  html body .topbar #creditsControl #licensePoints > span {
    font-size: 11px !important;
  }

  html body .topbar #creditsControl #licensePoints > strong {
    font-size: 12px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
  }

  html body .topbar #creditsControl #licensePoints.local::after {
    background: #2fbf71 !important;
  }

  /* The full balance chip already exposes its state; do not leave the old
     icon-only notification dot floating over the number. */
  html body .topbar #creditsControl #licensePoints::after {
    display: none !important;
    content: none !important;
  }
}

/* GPT-style message actions. Keep the bar compact, opaque, and anchored to
   the message so every response can be copied, heard, rated, shared, or
   regenerated without shifting the conversation layout. */
.assistant-message-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-height: 28px !important;
  margin-top: 9px !important;
  color: var(--v2-muted, #8b919c) !important;
}

.assistant-message.user .assistant-message-actions {
  justify-content: flex-end !important;
}

.assistant-message-action-btn,
.assistant-message-more-menu > summary {
  display: inline-grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  flex: 0 0 28px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--v2-muted, #8b919c) !important;
  cursor: pointer !important;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease !important;
}

.assistant-message-action-btn:hover:not(:disabled),
.assistant-message-action-btn:focus-visible,
.assistant-message-more-menu[open] > summary {
  border-color: var(--v2-line-strong, #4b5563) !important;
  background: var(--v2-panel-soft, #20242a) !important;
  color: var(--v2-text, #f5f7fa) !important;
}

.assistant-message-action-btn:disabled {
  cursor: default !important;
  opacity: .46 !important;
}

.assistant-message-action-btn.is-selected,
.assistant-message-action-btn.is-speaking {
  border-color: var(--neutral-accent, #a86f25) !important;
  background: var(--v2-blue-soft, #172d4a) !important;
  color: var(--neutral-accent, #a86f25) !important;
}

.assistant-message-action-btn svg,
.assistant-message-action-btn .fluent-icon-shell,
.assistant-message-action-btn .fluent-icon,
.assistant-message-more-menu > summary svg,
.assistant-message-more-menu > summary .fluent-icon-shell,
.assistant-message-more-menu > summary .fluent-icon {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  flex: 0 0 16px !important;
  stroke-width: 1.8 !important;
}

.assistant-message-actions .assistant-speech-status {
  margin-inline: 1px 2px !important;
  color: var(--v2-muted, #8b919c) !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}

.assistant-message-actions .assistant-speech-status.error { color: #f87171 !important; }
.assistant-message-legacy-stop { display: none !important; }

.assistant-message-more-menu {
  position: relative !important;
  display: inline-block !important;
  margin: 0 !important;
}

.assistant-message-more-menu > summary {
  list-style: none !important;
}

.assistant-message-more-menu > summary::-webkit-details-marker { display: none !important; }

.assistant-message-more-popover {
  position: absolute !important;
  z-index: 30 !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: max-content !important;
  min-width: 0 !important;
  gap: 4px !important;
  padding: 6px !important;
  border: 1px solid var(--v2-line-strong, #4b5563) !important;
  border-radius: 8px !important;
  background: var(--v2-panel, #171a1f) !important;
  box-shadow: 0 12px 28px rgb(0 0 0 / 30%) !important;
}
html body .assistant-reference-settings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  flex: 1 1 100%;
  min-width: 180px;
  padding: 6px 0 1px;
  color: var(--v2-text-secondary, #7a746b);
  font-size: 10px;
}
html body .assistant-reference-settings-title { color: var(--v2-text-primary, #292722); font-weight: 700; }
html body .assistant-reference-mode-list { display: flex; flex-wrap: wrap; gap: 4px; }
html body .assistant-reference-mode-list label { display: inline-flex; align-items: center; gap: 3px; padding: 2px 5px; border: 1px solid var(--v2-line, #ddd7cd); border-radius: 999px; background: var(--v2-surface-soft, #f6f2eb); }
html body .assistant-reference-mode-list input { accent-color: #ad8a4b; }
html body .assistant-reference-select { display: inline-flex; align-items: center; gap: 5px; }
html body .assistant-reference-select select { min-height: 22px; border: 1px solid var(--v2-line, #ddd7cd); border-radius: 4px; background: var(--v2-surface, #fff); color: inherit; font-size: 10px; }
html body .assistant-reference-settings small { color: var(--v2-text-tertiary, #999187); line-height: 1.35; }

.assistant-message-more-popover button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  gap: 9px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: var(--v2-text, #f5f7fa) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;
  cursor: pointer !important;
}

.assistant-message-more-popover button:hover,
.assistant-message-more-popover button:focus-visible {
  background: var(--v2-panel-soft, #20242a) !important;
  color: var(--neutral-accent, #a86f25) !important;
}

.assistant-message-more-popover button.danger { color: #f87171 !important; }
.assistant-message-more-popover button.danger:hover,
.assistant-message-more-popover button.danger:focus-visible { color: #fca5a5 !important; }
.assistant-message-more-popover button svg { width: 16px !important; height: 16px !important; flex: 0 0 auto !important; }

html:not([data-theme="dark"]) .assistant-message-action-btn,
html:not([data-theme="dark"]) .assistant-message-more-menu > summary { color: #64748b !important; }
html:not([data-theme="dark"]) .assistant-message-action-btn:hover:not(:disabled),
html:not([data-theme="dark"]) .assistant-message-action-btn:focus-visible,
html:not([data-theme="dark"]) .assistant-message-more-menu[open] > summary {
  border-color: var(--neutral-accent-strong) !important;
  background: var(--neutral-accent-soft) !important;
  color: var(--neutral-accent-strong, #88551a) !important;
}
html:not([data-theme="dark"]) .assistant-message-more-popover {
  border-color: var(--neutral-line) !important;
  background: #ffffff !important;
  box-shadow: 0 12px 28px rgb(15 23 42 / 16%) !important;
}
html:not([data-theme="dark"]) .assistant-message-more-popover button { color: #1e293b !important; }
html:not([data-theme="dark"]) .assistant-message-more-popover button:hover,
html:not([data-theme="dark"]) .assistant-message-more-popover button:focus-visible { background: var(--neutral-accent-soft) !important; color: var(--neutral-accent-strong, #88551a) !important; }

/* Preserve global search on roomy desktops. Compact desktop windows give
   the six-step workflow the full middle track and keep every tool available. */
@media (min-width: 981px) and (max-width: 1199px) {
  html:root[data-theme] body[data-active-step="edit"] #appShell.app-shell > .topbar {
    grid-template-columns: 218px minmax(390px, 1fr) max-content !important;
  }

  html:root[data-theme] body[data-active-step="edit"] #appShell.app-shell > .topbar > .project-home-global-search {
    display: none !important;
  }
}

/* Keep every desktop toolbar action visible in compact 1024px windows. The
   currency icon and balance already identify this control, so its repeated
   text label can yield space without hiding the user's points. */
@media (min-width: 981px) and (max-width: 1100px) {
  html body .app-shell > .topbar {
    gap: 8px !important;
  }

  html body .topbar .top-actions {
    gap: 5px !important;
  }

  html body .topbar #creditsControl #licensePoints {
    min-width: 74px !important;
    gap: 5px !important;
    padding-inline: 8px !important;
  }

  html body .topbar #creditsControl #licensePoints > span {
    display: none !important;
  }
}

/* The copy confirmation dock is a sibling of the scrolling properties view.
   Keep it in normal flow so it never covers canvas and element tools at
   desktop display scaling. */
@media (min-width: 981px) {
  html body[data-editor-workflow-stage="copy"] #step-edit > .inspector {
    overflow: hidden !important;
  }

  html body[data-editor-workflow-stage="copy"] #inspectorPropertiesView {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
  }

  html body[data-editor-workflow-stage="copy"] #copyRepresentativeDock {
    position: static !important;
    display: grid !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-rows: auto auto !important;
    gap: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid var(--theme-line, var(--v2-line)) !important;
    border-radius: 0 !important;
    background: var(--theme-panel, var(--v2-panel)) !important;
    box-shadow: none !important;
  }

  html body[data-editor-workflow-stage="copy"] #copyRepresentativeDock .copy-source-panel {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body[data-editor-workflow-stage="copy"] #copyRepresentativeDock .copy-source-compact-bar {
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) minmax(104px, 112px) !important;
    gap: 8px !important;
  }

  html body[data-editor-workflow-stage="copy"] #copyRepresentativeDock .copy-source-page-state,
  html body[data-editor-workflow-stage="copy"] #copyRepresentativeDock .project-copy-lock-control.compact {
    min-width: 0 !important;
  }

  html body[data-editor-workflow-stage="copy"] #copyRepresentativeDock .project-copy-lock-control.compact {
    min-height: 42px !important;
    grid-template-columns: minmax(0, 1fr) 28px !important;
    gap: 6px !important;
    padding: 5px 7px !important;
  }

  html body[data-editor-workflow-stage="copy"] #copyRepresentativeDock .project-copy-lock-copy strong {
    gap: 4px !important;
    font-size: 9px !important;
    line-height: 13px !important;
  }

  html body[data-editor-workflow-stage="copy"] #copyRepresentativeDock .project-copy-lock-copy strong em {
    padding: 0 3px !important;
    font-size: 7px !important;
  }

  html body[data-editor-workflow-stage="copy"] #copyRepresentativeDock .project-copy-lock-switch {
    width: 28px !important;
    height: 16px !important;
  }

  html body[data-editor-workflow-stage="copy"] #copyRepresentativeDock .project-copy-lock-switch::after {
    top: 2px !important;
    left: 2px !important;
  }

  html body[data-editor-workflow-stage="copy"] #copyRepresentativeDock .project-copy-lock-control.active .project-copy-lock-switch::after,
  html body[data-editor-workflow-stage="copy"] #copyRepresentativeDock .project-copy-lock-control:has(input:checked) .project-copy-lock-switch::after {
    transform: translateX(12px) !important;
  }

  html body[data-editor-workflow-stage="copy"] #copyRepresentativeDock .copy-source-page-state > em {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Content planning owns the full editor workspace. This final-loaded rule
   prevents category toolbars from collapsing it back to a short first row. */
@media (min-width: 981px) {
  html body #step-edit.editor-layout.copy-planning-mode {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  html body #step-edit.editor-layout.copy-planning-mode > .copy-planning-workspace {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }
}

/* Style workspace alignment: every decision surface shares one desktop
   content rail. Keep the command form full-width while its internal grid
   preserves a readable information column and a flexible action column. */
@media (min-width: 981px) {
  html body #step-edit #step-style {
    --style-stage-gutter: clamp(24px, 2vw, 36px);
    --style-stage-gap: 16px;
  }

  html body #step-edit #step-style .panel-head {
    padding-inline: var(--style-stage-gutter) !important;
  }

  html body #step-edit #step-style .style-controls {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    margin: 8px var(--style-stage-gutter) var(--style-stage-gap) !important;
    gap: 12px !important;
  }

  html body #step-edit #step-style :is(
    .style-recommendation-panel,
    .style-direction-advanced,
    #styleLockSummary,
    .workflow-smart-command,
    .style-library-details
  ) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: none !important;
    border: 1px solid var(--theme-line, var(--store-line)) !important;
    border-radius: 10px !important;
    background: var(--theme-panel, var(--store-card)) !important;
    background-image: none !important;
    box-shadow: 0 8px 24px rgb(0 0 0 / 7%) !important;
  }

  html body #step-edit #step-style .style-recommendation-panel {
    width: 100% !important;
    min-height: 142px !important;
    padding: 20px 22px !important;
  }

  html body #step-edit #step-style .style-direction-advanced {
    width: 100% !important;
  }

  html body #step-edit #step-style .style-direction-advanced > summary {
    min-height: 54px !important;
    padding-inline: 18px !important;
  }

  html body #step-edit #step-style .style-direction-advanced-body {
    padding: 0 18px 16px !important;
  }

  html body #step-edit #step-style #styleSmartCommandPanel {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 var(--style-stage-gutter) var(--style-stage-gap) !important;
  }

  html body #step-edit #step-style #styleSmartCommandPanel .workflow-smart-command {
    width: 100% !important;
    min-height: 178px !important;
    grid-template-columns: minmax(260px, .54fr) minmax(520px, 1.46fr) !important;
    grid-template-areas:
      "header input"
      "hint actions" !important;
    align-items: stretch !important;
    gap: 14px 24px !important;
    margin: 0 !important;
    padding: 20px 22px !important;
  }

  html body #step-edit #step-style #styleSmartCommandPanel .workflow-smart-command > header {
    align-self: start !important;
    padding-top: 3px !important;
  }

  html body #step-edit #step-style #styleSmartCommandPanel .workflow-smart-command textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 160px !important;
    padding: 13px 14px !important;
    resize: vertical !important;
    border-color: var(--theme-line-strong, var(--theme-line)) !important;
    color: var(--theme-text, var(--store-text)) !important;
    background: var(--theme-panel-raised, var(--theme-panel-soft)) !important;
  }

  html body #step-edit #step-style #styleSmartCommandPanel .workflow-smart-command-actions {
    grid-template-columns: minmax(160px, 1fr) minmax(96px, .56fr) minmax(180px, 1fr) !important;
    gap: 10px !important;
  }

  html body #step-edit #step-style #styleSmartCommandPanel .workflow-smart-command-actions button {
    min-height: 40px !important;
  }

  html body #step-edit #step-style #styleSmartCommandPanel .workflow-smart-command-hint {
    align-self: center !important;
    max-width: 360px !important;
    color: var(--theme-muted, var(--store-secondary)) !important;
    font-size: 10px !important;
    line-height: 1.55 !important;
  }

  html body #step-edit #step-style #styleLockSummary {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    min-height: 78px !important;
    margin: 0 var(--style-stage-gutter) var(--style-stage-gap) !important;
    padding: 18px 20px !important;
    text-align: left !important;
  }

  html body #step-edit #step-style #styleLockSummary.empty-state {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 78px !important;
  }

  html body #step-edit #step-style #styleMoodboardView {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 var(--style-stage-gutter) 24px !important;
  }

  html body #step-edit #step-style #styleMoodboardView.empty-state {
    min-height: 184px !important;
    border: 1px dashed var(--theme-line-strong, var(--theme-line)) !important;
    border-radius: 10px !important;
    color: var(--theme-muted, var(--store-secondary)) !important;
    background: var(--theme-panel-soft, var(--theme-panel)) !important;
  }

  html body #step-edit #step-style .style-library-details {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 var(--style-stage-gutter) 32px !important;
  }
}

/* Final neutral assistant palette. Keep the conversation surface aligned
   with the charcoal desktop shell; blue is reserved for selection, progress,
   and primary actions. All floating menus stay fully opaque. */
html:root[data-theme="dark"] body #appShell #assistantDrawer,
html:root[data-theme="dark"] body #appShell #assistantDrawer .assistant-messages {
  color: #f2f2f2 !important;
  border-color: rgb(255 255 255 / 9%) !important;
  background: #181818 !important;
  background-color: #181818 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body #appShell #assistantDrawer .assistant-composer {
  color: #f2f2f2 !important;
  border-color: rgb(255 255 255 / 16%) !important;
  background: #646464 !important;
  background-color: #202020 !important;
  background-image: none !important;
  box-shadow: 0 10px 28px rgb(0 0 0 / 20%) !important;
}

html:root[data-theme="dark"] body :is(
  #assistantModeOptions,
  #assistantImageModePanel,
  #assistantExecutionControls,
  #assistantDrawer .assistant-mode-switch,
  #assistantDrawer .assistant-image-settings-btn,
  #assistantDrawer .assistant-select-trigger,
  .assistant-select-menu,
  .assistant-image-generation-progress-card
) {
  color: #f2f2f2 !important;
  border-color: rgb(255 255 255 / 16%) !important;
  background: #646464 !important;
  background-color: #202020 !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

html:root[data-theme="dark"] body :is(
  #assistantModeOptions .assistant-mode-toggle,
  .assistant-select-menu .assistant-select-option,
  .assistant-image-generation-progress-card > footer > button
) {
  color: #dedede !important;
  border-color: rgb(255 255 255 / 12%) !important;
  background: #272727 !important;
  background-color: #272727 !important;
  background-image: none !important;
  opacity: 1 !important;
}

html:root[data-theme="dark"] body :is(
  #assistantModeOptions .assistant-mode-toggle:hover,
  #assistantModeOptions .assistant-mode-toggle:focus-visible,
  .assistant-select-menu .assistant-select-option:hover,
  .assistant-select-menu .assistant-select-option:focus-visible,
  .assistant-image-generation-progress-card > footer > button:hover:not(:disabled)
) {
  color: #ffffff !important;
  border-color: var(--neutral-accent) !important;
  background: #303030 !important;
  background-color: #303030 !important;
}

html:root[data-theme="dark"] body :is(
  #assistantModeOptions .assistant-mode-toggle.active,
  .assistant-select-menu .assistant-select-option.active
) {
  color: #ffffff !important;
  border-color: var(--neutral-accent, #a86f25) !important;
  background: var(--neutral-accent, #a86f25) !important;
  background-color: var(--neutral-accent, #a86f25) !important;
}

html:root[data-theme="dark"] body .assistant-image-generation-progress-head,
html:root[data-theme="dark"] body .assistant-image-generation-progress-card > footer {
  color: #dedede !important;
  border-color: rgb(255 255 255 / 9%) !important;
  background: #646464 !important;
}

html:root[data-theme="dark"] body .assistant-image-generation-progress-head strong {
  color: #f2f2f2 !important;
}

html:root[data-theme="dark"] body .assistant-image-generation-progress-head b {
  color: #ffffff !important;
  background: #2d2d2d !important;
}

/* Conversation layout v2: navigation and durable project state live in the
   left rail; high-frequency controls stay next to the composer. The large
   design hub and PDF starter card no longer consume the message viewport. */
@media (min-width: 768px) {
  html body #assistantDrawer:not(.embedded),
  html body #assistantDrawer.embedded {
    --assistant-rail-width: 220px;
  }

  html body #assistantDrawer:not(.embedded) {
    width: min(1120px, calc(100vw - 32px)) !important;
  }

  html body #assistantDrawer > .assistant-side-nav {
    position: absolute !important;
    z-index: 6 !important;
    top: 54px !important;
    bottom: 0 !important;
    left: 0 !important;
    width: var(--assistant-rail-width) !important;
    box-sizing: border-box !important;
    gap: 10px !important;
    padding: 12px 10px !important;
    overflow: hidden !important;
    border-right: 1px solid var(--theme-line, #d7dce5) !important;
    border-bottom: 0 !important;
    background: var(--theme-panel-soft, #f5f7fa) !important;
  }

  html body #assistantDrawer > :not(.assistant-header):not(.assistant-side-nav) {
    margin-left: var(--assistant-rail-width) !important;
  }

  html body #assistantDrawer > .assistant-design-hub {
    display: none !important;
  }

  html body #assistantDrawer > .assistant-pdf-redesign:not(.hidden) {
    max-height: 238px !important;
    overflow: auto !important;
    padding: 8px 12px !important;
    border-top: 1px solid var(--theme-line, #d7dce5) !important;
    border-bottom: 1px solid var(--theme-line, #d7dce5) !important;
  }

  html body #assistantDrawer:not(.embedded) > .assistant-composer {
    left: calc(var(--assistant-rail-width) + 12px) !important;
    margin-left: 0 !important;
  }

  html body #assistantDrawer:not(.embedded) > .assistant-composer-hint {
    left: calc(var(--assistant-rail-width) + 12px) !important;
  }

  /* The current task is conversation context, so keep it in the main column
     after the navigation rail instead of making the rail carry a second job. */
  html body #assistantSideWorkspace {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    margin-left: var(--assistant-rail-width) !important;
    padding: 10px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--theme-line, #d7dce5) !important;
    border-radius: 0 !important;
    background: var(--theme-panel, #ffffff) !important;
    box-shadow: none !important;
  }

  html body #assistantSideWorkspace > header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
    color: var(--theme-text-secondary, #475467) !important;
    font-size: 10px !important;
    font-weight: 650 !important;
  }

  html body #assistantSideWorkspace > header > span {
    display: inline-flex !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 7px !important;
  }

  html body #assistantSideWorkspace > header svg {
    width: 14px !important;
    height: 14px !important;
    color: var(--neutral-accent, #a86f25) !important;
  }

  html body .assistant-side-workspace-status {
    flex: 0 0 auto !important;
    padding: 3px 7px !important;
    border: 1px solid color-mix(in srgb, var(--neutral-accent, #a86f25) 24%, var(--theme-line, #d7dce5)) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--neutral-accent, #a86f25) 9%, transparent) !important;
    color: var(--neutral-accent, #a86f25) !important;
    font-size: 9px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body .assistant-side-workspace-status.is-running {
    border-color: color-mix(in srgb, var(--neutral-accent, #a86f25) 44%, var(--theme-line, #d7dce5)) !important;
    background: color-mix(in srgb, var(--neutral-accent, #a86f25) 16%, transparent) !important;
  }

  html body .assistant-side-workspace-status.is-completed {
    border-color: color-mix(in srgb, #16a34a 34%, var(--theme-line, #d7dce5)) !important;
    background: color-mix(in srgb, #16a34a 10%, transparent) !important;
    color: #15803d !important;
  }

  html body .assistant-side-workspace-summary {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    color: var(--theme-text-tertiary, #667085) !important;
    font-size: 9px !important;
  }

  html body .assistant-side-workspace-summary > strong {
    flex: 0 1 180px !important;
    min-width: 92px !important;
    overflow: hidden !important;
    color: var(--theme-text, #17202c) !important;
    font-size: 11px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .assistant-side-workspace-summary > span {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 5px !important;
    overflow: hidden !important;
    padding: 5px 7px !important;
    border: 1px solid color-mix(in srgb, var(--theme-line, #d7dce5) 82%, transparent) !important;
    border-radius: 999px !important;
    background: var(--theme-panel-soft, #f5f7fa) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .assistant-side-workspace-summary > span svg {
    width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px !important;
    color: var(--neutral-accent, #a86f25) !important;
  }

  html body #assistantSidePdfBtn {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    padding: 6px 10px !important;
    border: 1px solid var(--neutral-accent, #a86f25) !important;
    border-radius: 8px !important;
    background: var(--neutral-accent, #a86f25) !important;
    background-image: none !important;
    color: var(--neutral-accent-text, #ffffff) !important;
    cursor: pointer !important;
    text-align: left !important;
    box-shadow: none !important;
  }

  html body #assistantSidePdfBtn:hover,
  html body #assistantSidePdfBtn:focus-visible {
    border-color: var(--neutral-accent-strong, #88551a) !important;
    background: var(--neutral-accent-strong, #88551a) !important;
    color: var(--neutral-accent-text, #ffffff) !important;
    transform: translateY(-1px) !important;
  }

  html body #assistantSidePdfBtn > svg {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
    color: inherit !important;
    stroke: currentColor !important;
  }

  html body #assistantSidePdfBtn > span {
    display: grid !important;
    min-width: 0 !important;
    gap: 2px !important;
  }

  html body #assistantSidePdfBtn strong,
  html body #assistantSidePdfBtn small {
    color: inherit !important;
  }

  html body #assistantSidePdfBtn small {
    display: none !important;
    opacity: 0.82 !important;
  }

  html body #assistantSidePdfBtn strong {
    overflow: hidden !important;
    font-size: 10px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #assistantSidePdfBtn small {
    color: inherit !important;
    font-size: 8px !important;
  }

  html body #assistantSideHistory,
  html body #assistantSideProjects {
    flex: 1 1 auto !important;
    min-height: 80px !important;
    overflow: auto !important;
  }

  html body #assistantComposer .assistant-composer-tools {
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  html body #assistantComposer .assistant-composer-copy-tools {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 3px !important;
    padding-right: 5px !important;
    border-right: 1px solid var(--theme-line, #d7dce5) !important;
  }

  html body #assistantComposer .assistant-composer-tool-label {
    flex: 0 0 auto !important;
    color: var(--theme-text-tertiary, #667085) !important;
    font-size: 8px !important;
  }

  html body #assistantComposer .assistant-composer-copy-tools .assistant-copy-mode-btn {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 24px !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 6px !important;
    border: 1px solid var(--theme-line, #d7dce5) !important;
    border-radius: 4px !important;
    background: var(--theme-panel, #ffffff) !important;
    color: var(--theme-text-secondary, #475467) !important;
    font-size: 8px !important;
    text-align: center !important;
  }

  html body #assistantComposer .assistant-composer-copy-tools .assistant-copy-mode-btn > svg {
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
  }

  html body #assistantComposer .assistant-composer-copy-tools .assistant-copy-mode-btn > span {
    display: inline !important;
    white-space: nowrap !important;
  }

  html body #assistantComposer .assistant-composer-copy-tools .assistant-copy-mode-btn.active {
    border-color: var(--neutral-accent, #a86f25) !important;
    background: var(--neutral-accent-soft) !important;
    color: var(--neutral-accent, #a86f25) !important;
  }

  html body #assistantComposer .assistant-quick-tools-wrap {
    position: relative !important;
    flex: 0 0 auto !important;
  }

  html body #assistantComposer .assistant-quick-tools-btn {
    width: auto !important;
    min-height: 24px !important;
    padding: 0 6px !important;
    border-color: var(--theme-line, #d7dce5) !important;
    border-radius: 4px !important;
    background: var(--theme-panel, #ffffff) !important;
    color: var(--theme-text-secondary, #475467) !important;
    font-size: 8px !important;
  }

  html body #assistantComposer .assistant-quick-tools-panel {
    position: fixed !important;
    z-index: 30 !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: min(620px, calc(100vw - var(--assistant-rail-width) - 48px)) !important;
    max-height: 220px !important;
    margin: 0 !important;
    overflow: auto !important;
    background: var(--theme-panel, #ffffff) !important;
  }
}

html:root[data-theme="dark"] body #assistantDrawer > .assistant-side-nav {
  border-right-color: #2d333b !important;
  background: #141414 !important;
}
html:root[data-theme="dark"] body #assistantSideWorkspace {
  border-color: #303030 !important;
  background: #646464 !important;
}
html:root[data-theme="dark"] body #assistantSideWorkspace > header,
html:root[data-theme="dark"] body .assistant-side-workspace-summary {
  color: #d6d6d6 !important;
}
html:root[data-theme="dark"] body .assistant-side-workspace-summary > strong { color: #f2f2f2 !important; }
html:root[data-theme="dark"] body .assistant-side-workspace-summary > span {
  border-color: #333333 !important;
  background: #252525 !important;
}
html:root[data-theme="dark"] body .assistant-side-workspace-status {
  border-color: rgba(59, 130, 246, 0.46) !important;
  background: rgba(59, 130, 246, 0.14) !important;
  color: #78b9ff !important;
}
html:root[data-theme="dark"] body .assistant-side-workspace-status.is-completed {
  border-color: rgba(34, 197, 94, 0.42) !important;
  background: rgba(34, 197, 94, 0.14) !important;
  color: #86efac !important;
}
html:root[data-theme="dark"] body #assistantSidePdfBtn {
  border-color: var(--neutral-accent, #d5a15c) !important;
  background: var(--neutral-accent, #d5a15c) !important;
  color: var(--neutral-accent-text, #181715) !important;
}
html:root[data-theme="dark"] body #assistantSidePdfBtn small { color: inherit !important; opacity: 0.82 !important; }
html:root[data-theme="dark"] body #assistantComposer .assistant-composer-copy-tools { border-right-color: #373737 !important; }
html:root[data-theme="dark"] body #assistantComposer .assistant-composer-tool-label { color: #999999 !important; }
html:root[data-theme="dark"] body #assistantComposer .assistant-composer-copy-tools .assistant-copy-mode-btn,
html:root[data-theme="dark"] body #assistantComposer .assistant-quick-tools-btn,
html:root[data-theme="dark"] body #assistantComposer .assistant-quick-tools-panel {
  border-color: #373737 !important;
  background: #292929 !important;
  color: #d6d6d6 !important;
}
html:root[data-theme="dark"] body #assistantComposer .assistant-composer-copy-tools .assistant-copy-mode-btn.active {
  border-color: var(--neutral-accent, #a86f25) !important;
  background: var(--neutral-accent-soft) !important;
  color: #ffffff !important;
}

html:root[data-theme="dark"] body .assistant-image-generation-progress-card > footer > span {
  color: #b3b3b3 !important;
}

/* Generated image actions stay beside the image, in normal flow. The blue
   editable control is intentionally prominent while copy remains quiet. */
html body .assistant-generated-image-actions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 5px !important;
  width: 100% !important;
  margin: 0 !important;
}
html body .assistant-generated-image-actions > button,
html body .assistant-generated-image-actions > .assistant-generated-image-editable-menu {
  min-width: 0 !important;
  flex: 1 1 0 !important;
}
html body .assistant-generated-image-actions > .assistant-generated-image-editable-menu > summary {
  box-sizing: border-box !important;
  width: 100% !important;
}
html body .assistant-generated-image-actions > button,
html body .assistant-generated-image-actions > .assistant-generated-image-editable-menu {
  width: 100% !important;
  min-width: 0 !important;
}
html body .assistant-generated-image-actions button,
html body .assistant-generated-image-actions summary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  border: 1px solid var(--v2-line, #334155) !important;
  border-radius: 6px !important;
  background: var(--v2-panel, #111827) !important;
  color: var(--v2-text, #e5e7eb) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  list-style: none !important;
  user-select: none !important;
}
html body .assistant-generated-image-actions button:hover,
html body .assistant-generated-image-actions button:focus-visible {
  border-color: var(--neutral-accent, #a86f25) !important;
  color: var(--neutral-accent, #a86f25) !important;
  outline: none !important;
}
html body .assistant-generated-image-actions .assistant-generated-image-editable {
  border-color: var(--neutral-accent, #a86f25) !important;
  background: var(--neutral-accent, #a86f25) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
html body .assistant-generated-image-actions .assistant-generated-image-editable:hover,
html body .assistant-generated-image-actions .assistant-generated-image-editable:focus-visible {
  border-color: var(--neutral-accent-strong, #88551a) !important;
  background: var(--neutral-accent-strong, #88551a) !important;
  color: #fff !important;
}
html body .assistant-generated-image-editable-menu { position: relative !important; }
html body .assistant-generated-image-editable-menu > summary::-webkit-details-marker { display: none !important; }
html body .assistant-generated-image-editable-options {
  position: absolute !important;
  z-index: 12 !important;
  right: 0 !important;
  bottom: calc(100% + 5px) !important;
  display: grid !important;
  min-width: 142px !important;
  gap: 4px !important;
  padding: 6px !important;
  border: 1px solid var(--v2-line, #334155) !important;
  border-radius: 7px !important;
  background: var(--v2-panel-strong, #0f172a) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.28) !important;
}
html body .assistant-generated-image-editable-options .assistant-editable-mode-field,
html body .assistant-generated-image-editable-options .assistant-editable-mode-field select {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  background: var(--v2-panel-strong, #0f172a) !important;
  color: var(--v2-text, #e5e7eb) !important;
  opacity: 1 !important;
}
html body .assistant-generated-image-editable-options .assistant-editable-mode-field select {
  min-height: 30px !important;
  border: 1px solid var(--v2-line, #334155) !important;
  border-radius: 5px !important;
  color-scheme: dark;
}
html[data-theme="light"] body .assistant-generated-image-editable-options,
html[data-theme="light"] body .assistant-generated-image-editable-options .assistant-editable-mode-field,
html[data-theme="light"] body .assistant-generated-image-editable-options .assistant-editable-mode-field select {
  background: #ffffff !important;
  color: #172033 !important;
  color-scheme: light;
}
html[data-theme="light"] body .assistant-generated-image-editable-options .assistant-editable-mode-field select {
  border-color: var(--neutral-line) !important;
}
html body .assistant-generated-image-editable-options button { width: 100% !important; justify-content: flex-start !important; }
html body .assistant-generated-image-actions svg { width: 13px !important; height: 13px !important; flex: 0 0 13px !important; }
html body .assistant-generated-image-actions span { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* Stage previews use a three-column list. Keep the new action row below the
   thumbnail instead of creating an implicit fourth grid column. */
html body .assistant-stage-conversation-list li.assistant-stage-image-page > .assistant-generated-image-actions {
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: 100% !important;
}
html body .assistant-stage-conversation-list li.assistant-stage-image-page > span {
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
}

/* The workmate dark reset makes every home-assistant descendant transparent.
   Match the component hierarchy so both the track and its fill beat that
   reset, including task progress at a real 0%. */
html:root[data-theme="dark"] body #assistantImageGenerationProgress .assistant-image-generation-progress-card .assistant-image-generation-progress-visual:not(.has-image):not(.has-error) {
  background: #25282d !important;
  opacity: 1 !important;
}

html:root[data-theme="dark"] body #assistantImageGenerationProgress .assistant-image-generation-progress-card .assistant-image-generation-progress-track,
html:root[data-theme="dark"] body #assistantDrawer .assistant-task-card .assistant-task-progress,
html:root[data-theme="dark"] body #generationProgress.generation-progress.image-generation-progress .generation-progress-bar {
  min-height: 6px !important;
  background: #41536b !important;
  background-color: #41536b !important;
  border: 1px solid #7186a2 !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), 0 0 0 1px rgb(0 0 0 / 40%) !important;
  opacity: 1 !important;
}

html:root[data-theme="dark"] body #assistantImageGenerationProgress .assistant-image-generation-progress-card .assistant-image-generation-progress-track > i,
html:root[data-theme="dark"] body #assistantDrawer .assistant-task-card .assistant-task-progress > i,
html:root[data-theme="dark"] body #generationProgress.generation-progress.image-generation-progress .generation-progress-bar > span {
  min-width: 0 !important;
  min-height: 100% !important;
  background: #7bc4ff !important;
  background-color: #7bc4ff !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html:root[data-theme="dark"] body #assistantDrawer .assistant-task-card.completed .assistant-task-progress > i { background: #63dfa8 !important; }
html:root[data-theme="dark"] body #assistantDrawer .assistant-task-card.failed .assistant-task-progress > i { background: #ffaaaa !important; }

/* Running pages do not have a measured percentage. Show activity separately
   from the zero-width completed portion and retain the existing ARIA state. */
html body #assistantDrawer .assistant-image-generation-progress-visual[role="progressbar"]:not([aria-valuenow]):not(.has-image):not(.has-error) .assistant-image-generation-progress-track::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  border-radius: inherit;
  content: "";
  background: #ffffff;
  animation: assistant-image-progress-activity 1.25s ease-in-out infinite;
}
html:root[data-theme="dark"] body #assistantDrawer .assistant-image-generation-progress-visual[role="progressbar"]:not([aria-valuenow]) .assistant-image-generation-progress-track::after { background: #7bc4ff; }
@keyframes assistant-image-progress-activity {
  0% { transform: translateX(-115%); }
  50% { transform: translateX(95%); }
  100% { transform: translateX(295%); }
}
@media (prefers-reduced-motion: reduce) {
  html body #assistantDrawer .assistant-image-generation-progress-visual[role="progressbar"]:not([aria-valuenow]) .assistant-image-generation-progress-track::after,
  html body #assistantDrawer .assistant-task-progress.is-indeterminate > i {
    animation: none !important;
    transform: translateX(95%);
  }
}
html[data-performance-tier="off"] body #assistantDrawer .assistant-image-generation-progress-track::after,
html[data-performance-tier="smooth"] body #assistantDrawer .assistant-image-generation-progress-track::after {
  animation: none !important;
  transform: translateX(95%);
}

html:root[data-theme="dark"] body :is(
  #assistantDrawer .assistant-image-generation-progress-head b,
  #assistantImageGenerationProgress .assistant-image-generation-progress-head b,
  .generation-progress.image-generation-progress .generation-progress-head strong
) {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgb(59 156 255 / 45%) !important;
}

@media (min-width: 1024px) {
  html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded,
  html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded .assistant-messages {
    color: #f2f2f2 !important;
    border-color: rgb(255 255 255 / 9%) !important;
    background: #181818 !important;
    background-color: #181818 !important;
    background-image: none !important;
  }

  html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded .assistant-composer {
    color: #f2f2f2 !important;
    border-color: rgb(255 255 255 / 16%) !important;
    background: #646464 !important;
    background-color: #202020 !important;
    background-image: none !important;
    box-shadow: 0 10px 28px rgb(0 0 0 / 20%) !important;
  }

  html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeAssistantHost #assistantImageGenerationProgress .assistant-image-generation-progress-card {
    color: #f2f2f2 !important;
    border-color: rgb(255 255 255 / 16%) !important;
    background: #646464 !important;
    background-color: #202020 !important;
    background-image: none !important;
    opacity: 1 !important;
  }
}

.assistant-design-benchmark {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--theme-line, rgb(127 127 127 / 18%));
}

.assistant-design-benchmark b {
  color: var(--theme-text, currentColor);
  font-size: 11px;
}

.assistant-design-benchmark span {
  min-width: 0;
  overflow: hidden;
  color: var(--theme-muted, #667085);
  font-size: 10px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editable-layer-inventory {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 10px;
}

.editable-layer-inventory > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line, rgba(127, 127, 127, 0.28));
  border-radius: 6px;
  background: var(--panel-soft, rgba(127, 127, 127, 0.1));
  color: var(--text, currentColor);
}

.editable-layer-inventory svg {
  width: 14px;
  height: 14px;
}

.editable-layer-inventory b,
.editable-layer-inventory em {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.design-director-brand {
  display: grid;
  gap: 7px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--line, rgba(127, 127, 127, 0.28));
  border-radius: 6px;
  background: var(--panel-soft, rgba(127, 127, 127, 0.1));
}

.design-director-brand > div:first-child,
.design-director-brand > div:last-child,
.design-director-brand > div:first-child > span,
.design-director-brand > div:last-child > span {
  display: flex;
  align-items: center;
}

.design-director-brand > div:first-child { justify-content: space-between; gap: 10px; }
.design-director-brand > div:first-child > span { gap: 6px; font-weight: 700; }
.design-director-brand > div:first-child svg { width: 15px; height: 15px; }
.design-director-brand p { margin: 0; color: var(--muted, currentColor); font-size: 12px; line-height: 1.5; }
.design-director-brand > div:last-child { flex-wrap: wrap; gap: 5px; }
.design-director-brand > div:last-child > span { gap: 4px; padding: 3px 6px; border-radius: 4px; background: var(--panel, rgba(127, 127, 127, 0.12)); font-size: 11px; }
.design-director-brand > div:last-child i { width: 10px; height: 10px; border: 1px solid rgba(127, 127, 127, 0.35); border-radius: 2px; }

.editable-layer-inventory em {
  min-width: 18px;
  color: var(--muted, currentColor);
  text-align: right;
}

/* Image-mode popover and pending action cards must be true opaque desktop
   surfaces. These selectors intentionally live at the end of the cascade:
   older assistant theme layers used transparent cards, causing the message
   underneath to show through and visually overlap the settings controls. */
html:root[data-theme="dark"] body #assistantDrawer #assistantComposer #assistantImageModePanel {
  box-sizing: border-box !important;
  width: calc(100% - 24px) !important;
  max-width: 500px !important;
  min-width: 0 !important;
  min-height: 190px !important;
  left: 12px !important;
  bottom: calc(100% + 12px) !important;
  gap: 16px !important;
  padding: 18px !important;
  overflow: hidden !important;
  border: 1px solid #444444 !important;
  border-radius: 12px !important;
  color: #f2f2f2 !important;
  background: #646464 !important;
  background-color: #202020 !important;
  background-image: none !important;
  box-shadow: 0 18px 44px rgb(0 0 0 / 58%) !important;
  opacity: 1 !important;
  isolation: isolate !important;
}

html:root:not([data-theme="dark"]) body #assistantDrawer #assistantComposer #assistantImageModePanel {
  box-sizing: border-box !important;
  width: calc(100% - 24px) !important;
  max-width: 500px !important;
  min-width: 0 !important;
  min-height: 190px !important;
  left: 12px !important;
  bottom: calc(100% + 12px) !important;
  gap: 16px !important;
  padding: 18px !important;
  overflow: hidden !important;
  border: 1px solid var(--neutral-line) !important;
  border-radius: 12px !important;
  color: #172033 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 18px 40px rgb(15 23 42 / 22%) !important;
  opacity: 1 !important;
  isolation: isolate !important;
}

html:root body #assistantDrawer #assistantImageModePanel .assistant-image-mode-panel-head {
  min-height: 28px !important;
}

html:root body #assistantDrawer #assistantImageModePanel .assistant-image-mode-panel-head strong {
  font-size: 16px !important;
  line-height: 1.3 !important;
}

html:root body #assistantDrawer #assistantImageModePanel .assistant-image-mode-panel-head span {
  font-size: 12px !important;
}

html:root body #assistantDrawer #assistantImageModePanel .assistant-image-mode-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html:root body #assistantDrawer #assistantImageModePanel .assistant-image-model-field {
  grid-column: 1 / -1 !important;
}

html:root body #assistantDrawer #assistantImageModePanel .assistant-image-mode-grid label {
  gap: 7px !important;
}

html:root body #assistantDrawer #assistantImageModePanel .assistant-image-mode-grid label > span,
html:root body #assistantDrawer #assistantImageModePanel > small {
  font-size: 12px !important;
  line-height: 1.5 !important;
}

html:root body #assistantDrawer #assistantImageModePanel .assistant-select-shell,
html:root body #assistantDrawer #assistantImageModePanel .assistant-select-trigger {
  width: 100% !important;
  min-height: 42px !important;
}

html:root[data-theme="dark"] body #assistantDrawer #assistantImageModePanel .assistant-select-trigger {
  border-color: #444444 !important;
  color: #f2f2f2 !important;
  background: #2b2b2b !important;
  background-color: #2b2b2b !important;
  background-image: none !important;
}

html:root:not([data-theme="dark"]) body #assistantDrawer #assistantImageModePanel .assistant-select-trigger {
  border-color: var(--neutral-line) !important;
  color: #172033 !important;
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  background-image: none !important;
}

html:root body #assistantDrawer #assistantImageModePanel .assistant-image-model-test {
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 10px !important;
}

html:root body #assistantDrawer #assistantImageModePanel .assistant-image-model-test button {
  min-height: 36px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
}

html:root body #assistantDrawer #assistantImageModePanel .assistant-image-model-test span {
  font-size: 12px !important;
  line-height: 1.5 !important;
}

html:root[data-theme="dark"] body #assistantDrawer .assistant-action-preview {
  overflow: hidden !important;
  border-color: #3f3f3f !important;
  color: #f2f2f2 !important;
  background: #646464 !important;
  background-color: #202020 !important;
  background-image: none !important;
  box-shadow: 0 8px 22px rgb(0 0 0 / 24%) !important;
  opacity: 1 !important;
  isolation: isolate !important;
}

html:root:not([data-theme="dark"]) body #assistantDrawer .assistant-action-preview {
  overflow: hidden !important;
  border-color: var(--neutral-line) !important;
  color: #172033 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 8px 20px rgb(15 23 42 / 10%) !important;
  opacity: 1 !important;
  isolation: isolate !important;
}

/* Resolve legacy drawer offsets after all theme layers have loaded. */
@media (min-width: 768px) {
  html body #assistantDrawer:not(.embedded) > .assistant-composer,
  html body #assistantDrawer:not(.embedded) > .assistant-composer-hint {
    margin-left: 0 !important;
    left: calc(var(--assistant-rail-width, 220px) + 12px) !important;
  }

  html body #assistantDrawer:not(.embedded) > .assistant-composer {
    right: 12px !important;
    width: auto !important;
  }

  html body #assistantDrawer:not(.embedded) > .assistant-composer-hint {
    right: 12px !important;
    width: auto !important;
  }

  html body #assistantDrawer .assistant-composer-tools {
    scrollbar-width: none !important;
  }

  html body #assistantDrawer .assistant-composer-tools::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}


/* Toolbar v32: desktop composer controls remain aligned after all legacy layers. */
@media (min-width: 900px) {
  html body #assistantDrawer #assistantComposer,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 36px 42px !important;
    grid-template-rows: minmax(64px, auto) 40px !important;
    gap: 8px !important;
    align-items: end !important;
  }

  html body #assistantDrawer #assistantComposer > textarea {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  html body #assistantDrawer #assistantComposer > .assistant-composer-tools {
    display: flex !important;
    flex-flow: row nowrap !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  /* Toolbar v32: undo grid placement leaked from older mobile/drawer layers. */
  html body #assistantDrawer #assistantComposer > .assistant-composer-tools > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  html body #assistantDrawer #assistantComposer #assistantImageSettingsBtn.hidden {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    flex-basis: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-composer-tools:has(#assistantImageSettingsBtn:not(.hidden)) {
    width: max-content !important;
    max-width: 100% !important;
  }

  html body #assistantDrawer #assistantComposer > #assistantVoiceInputBtn {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
  }

  html body #assistantDrawer #assistantComposer > #assistantSendBtn {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: end !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-output-mode {
    width: 188px !important;
    flex: 0 0 188px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-size-mode {
    width: 138px !important;
    flex: 0 0 138px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-web-mode {
    width: 132px !important;
    flex: 0 0 132px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-composer-mode .assistant-select-shell {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body #assistantDrawer #assistantComposer > .assistant-composer-tools > .assistant-select-shell:has(#assistantAttachmentRole) {
    width: 112px !important;
    flex: 0 0 112px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-select-trigger {
    min-width: 0 !important;
    padding-right: 7px !important;
    padding-left: 8px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-select-trigger > .assistant-select-trigger-label {
    min-width: max-content !important;
    flex: 1 0 auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  html body #assistantDrawer #assistantModeTriggerLabel {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  html body .assistant-design-director-review > summary > span,
  html body .assistant-delivery-preview > summary > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  html body .assistant-design-director-review > summary strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded > .assistant-design-hub {
  min-height: 154px !important;
  max-height: none !important;
}


@media (min-width: 900px) {
  html body #assistantDrawer #assistantComposer .assistant-secondary-tools {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 4px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-secondary-tools > .assistant-icon-btn {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
  }
}

/* UI polish v4: keep the desktop assistant composer stable at every supported
   desktop width. The toolbar can wrap into two rows instead of pushing output,
   image-size and model controls outside the visible conversation area. */
@media (min-width: 900px) {
  html body #assistantDrawer #assistantComposer,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer {
    grid-template-rows: minmax(64px, auto) auto !important;
    align-items: end !important;
  }

  html body #assistantDrawer #assistantComposer > .assistant-composer-tools {
    flex-flow: row wrap !important;
    align-content: flex-start !important;
    row-gap: 6px !important;
    column-gap: 6px !important;
    height: auto !important;
    min-height: 40px !important;
    max-height: 88px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
  }

  html body #assistantDrawer #assistantComposer > .assistant-composer-tools::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-composer-tools:has(#assistantImageSettingsBtn:not(.hidden)) {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-composer-copy-tools {
    flex: 0 1 auto !important;
    max-width: min(148px, 100%) !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-quick-tools-wrap {
    flex: 0 0 88px !important;
    width: 88px !important;
  }

  html body #assistantDrawer #assistantComposer #assistantModeSwitch {
    flex: 0 0 122px !important;
    width: 122px !important;
  }

  html body #assistantDrawer #assistantComposer #assistantImageSettingsBtn:not(.hidden) {
    flex: 0 0 auto !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-secondary-tools {
    flex: 0 0 auto !important;
  }

  html body #assistantDrawer #assistantComposer > .assistant-composer-tools > .assistant-select-shell:has(#assistantAttachmentRole) {
    flex: 0 1 112px !important;
    width: 112px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-web-mode {
    flex: 0 1 132px !important;
    width: 132px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-output-mode {
    flex: 1 1 188px !important;
    width: 188px !important;
    max-width: 188px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-size-mode {
    flex: 0 1 138px !important;
    width: 138px !important;
  }

  html body #assistantDrawer #assistantComposer > .assistant-composer-tools > #assistantAttachmentInput.visually-hidden-file {
    position: absolute !important;
    inset: auto auto 0 0 !important;
    display: block !important;
    width: 1px !important;
    height: 1px !important;
    flex: 0 0 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
  }

  html body #assistantDrawer .assistant-messages {
    overflow-anchor: none !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
  }
}

@media (min-width: 900px) and (max-width: 1399.98px) {
  html body #assistantDrawer #assistantComposer,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer {
    min-height: 164px !important;
  }

  html body #assistantDrawer #assistantComposer > textarea {
    min-height: 48px !important;
  }
}

html body .assistant-message-attachment-image.is-missing {
  display: inline-flex !important;
  min-height: 72px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 12px !important;
  border-style: dashed !important;
  color: var(--v2-faint, #7a8491) !important;
  background: var(--v2-panel-soft, rgb(244 246 248 / 84%)) !important;
  cursor: default !important;
  pointer-events: none !important;
  text-decoration: none !important;
}

html body .assistant-message-attachment-image.is-missing img {
  display: none !important;
}

html body .assistant-message-attachment-missing-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}


/* Xiao Pei welcomes users above the title, leaving the composer clear. */
html body #projectHomeChat .project-home-chat-intro > #assistantIpVoiceToggle.assistant-ip-buddy {
  position: relative !important;
  display: block !important;
  width: clamp(64px, 10vh, 80px) !important;
  height: clamp(70px, 11vh, 88px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  cursor: pointer;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: isolate !important;
  filter: drop-shadow(0 10px 14px rgba(15, 23, 42, .20)) !important;
}

html body #projectHomeChat .project-home-chat-intro > #assistantIpVoiceToggle.assistant-ip-buddy:hover {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 12px 16px rgba(15, 23, 42, .24)) !important;
}

html body #projectHomeChat .project-home-chat-intro > #assistantIpVoiceToggle.assistant-ip-buddy:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body #projectHomeChat .project-home-chat-intro > #assistantIpVoiceToggle.assistant-ip-buddy:focus-visible {
  outline: 2px solid #1677ff !important;
  outline-offset: 4px !important;
}

html body #projectHomeChat #assistantIpVoiceToggle .assistant-ip-buddy-status {
  width: 18px;
  height: 18px;
  top: auto;
  bottom: 0;
  right: 0;
  border-width: 2px;
}

html body #projectHomeChat #assistantIpVoiceToggle .assistant-ip-buddy-status svg {
  width: 10px;
  height: 10px;
}

html body #projectHomeChat .project-home-chat-intro > #assistantIpVoiceToggle.assistant-ip-buddy .assistant-ip-buddy-art {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  overflow: visible !important;
}

html body #projectHomeChat .project-home-chat-intro > #assistantIpVoiceToggle.assistant-ip-buddy .assistant-ip-buddy-art img {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* UI polish v6: desktop layout pass.
   Keep the conversation area primary, make controls predictable, and preserve
   every existing action while reducing visual weight around the composer. */
@media (min-width: 900px) {
  html body #assistantDrawer > #assistantSideWorkspace {
    min-height: 42px !important;
    height: 42px !important;
    padding: 5px 12px !important;
    gap: 8px !important;
  }

  html body #assistantDrawer > #assistantTasks:empty {
    display: none !important;
  }

  html body #assistantDrawer > #assistantRecommendations:not(.hidden) {
    min-height: 0 !important;
    height: 58px !important;
    max-height: 58px !important;
    padding: 6px 12px !important;
    overflow: hidden !important;
  }

  html body #assistantDrawer > #assistantRecommendations:not(.expanded)
    .assistant-recommendation-list {
    max-height: 24px !important;
    overflow: hidden !important;
  }

  html body #assistantDrawer > #assistantRecommendations:not(.hidden) > header {
    min-height: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  html body #assistantDrawer > #assistantRecommendations:not(.hidden) > header > :first-child {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

html body #assistantDrawer > #assistantRecommendations:not(.hidden) > header button {
    flex: 0 0 auto !important;
  }
}

/* Expanded recommendations need room for the first card and its actions. The
   compact 58px row is useful while collapsed, but clipping an expanded card
   makes its title look hidden behind the next panel. */
@media (min-width: 900px) {
  html body #assistantDrawer > #assistantRecommendations:not(.hidden).expanded {
    height: auto !important;
    min-height: 104px !important;
    max-height: min(32vh, 240px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  html body #assistantDrawer > #assistantRecommendations:not(.hidden).expanded .assistant-recommendation-list {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Final composer alignment: keep the primary controls on one stable row and
   keep the latest-result arrow visible above the composer. */
@media (min-width: 900px) {
  html:root body #assistantDrawer #assistantComposer > .assistant-composer-tools,
  html:root body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > .assistant-composer-tools {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-template-rows: 36px !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
    gap: 6px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    overflow: visible !important;
    flex-flow: initial !important;
  }

  html:root body #assistantDrawer #assistantComposer > .assistant-composer-tools
    > :is(.assistant-composer-copy-tools, .assistant-quick-tools-wrap, #assistantModeSwitch, #assistantImageSettingsBtn, #assistantSkillsWrap, #assistantAdvancedOptionsBtn, .assistant-secondary-tools),
  html:root body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > .assistant-composer-tools
    > :is(.assistant-composer-copy-tools, .assistant-quick-tools-wrap, #assistantModeSwitch, #assistantImageSettingsBtn, #assistantSkillsWrap, #assistantAdvancedOptionsBtn, .assistant-secondary-tools) {
    grid-column: auto !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    overflow: hidden !important;
  }

  html:root body #assistantDrawer #assistantComposer > .assistant-composer-tools
    > :is(.assistant-composer-copy-tools, .assistant-quick-tools-wrap, #assistantModeSwitch, #assistantImageSettingsBtn, #assistantSkillsWrap, #assistantAdvancedOptionsBtn, .assistant-secondary-tools) > :is(button, .assistant-mode-trigger),
  html:root body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > .assistant-composer-tools
    > :is(.assistant-composer-copy-tools, .assistant-quick-tools-wrap, #assistantModeSwitch, #assistantImageSettingsBtn, #assistantSkillsWrap, #assistantAdvancedOptionsBtn, .assistant-secondary-tools) > :is(button, .assistant-mode-trigger) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root body #assistantDrawer #assistantComposer .assistant-secondary-tools {
    justify-content: stretch !important;
    gap: 0 !important;
    opacity: 1 !important;
  }
  html:root body #assistantDrawer #assistantComposer #assistantSkillsWrap {
    overflow: hidden !important;
  }
  html:root body #assistantDrawer #assistantComposer .assistant-secondary-tools > :is(#assistantPromptRestoreBtn, #assistantPromptEnhanceBtn) {
    display: inline-flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
  }
}

html:root body #assistantDrawer > #assistantNewResultBtn,
html:root body #assistantDrawer > .assistant-new-result {
  position: absolute !important;
  z-index: 100 !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 116px !important;
  transform: translateX(-50%) !important;
  display: inline-flex !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  pointer-events: auto !important;
}
html:root body #assistantDrawer > #assistantNewResultBtn.hidden,
html:root body #assistantDrawer > .assistant-new-result.hidden { display: none !important; }
html:root body #assistantDrawer > #assistantNewResultBtn > svg,
html:root body #assistantDrawer > .assistant-new-result > svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
}

/* Keep the @目标 label readable when the project header is narrowed. */
@media (min-width: 701px) {
  html body #newProjectPanel .preproject-project-actions {
    flex: 0 0 auto !important;
    min-width: max-content !important;
  }

  html body #newProjectPanel .preproject-target-control {
    flex: 0 0 auto !important;
    min-width: 132px !important;
    white-space: nowrap !important;
  }

  html body #newProjectPanel .preproject-target-control > span {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  html body #newProjectPanel .preproject-target-control select {
    flex: 1 1 auto !important;
    min-width: 74px !important;
  }
}

@media (max-width: 700px) {
  html body #newProjectPanel .preproject-target-control {
    width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  html body #newProjectPanel .preproject-target-control > span {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  html body #newProjectPanel .preproject-target-control select {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }
}

html body .assistant-artifact-history-expired {
  margin: 8px 0 !important;
  padding: 9px 12px !important;
  min-height: 0 !important;
}

html body .assistant-artifact-history-expired .assistant-artifact-error span {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.35 !important;
}

html body .assistant-artifact-history-expired > footer {
  margin-top: 7px !important;
  gap: 5px !important;
  max-height: 29px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  scrollbar-width: none !important;
}

html body .assistant-artifact-history-expired > footer::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body .assistant-artifact-history-expired > footer button {
  min-height: 25px !important;
  height: 25px !important;
  flex: 0 0 auto !important;
  padding: 3px 8px !important;
  font-size: 10px !important;
}

html body #assistantDrawer > #assistantMessages,
html body #assistantDrawer .assistant-messages {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-anchor: none !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  padding: 10px 20px !important;
}

html body #assistantDrawer #assistantMessages :is(
  .assistant-message,
  .assistant-message-content,
  .assistant-generated-image-card,
  .assistant-message-attachment-image
) {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (min-width: 900px) {
  html body #assistantDrawer #assistantComposer,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer {
    grid-template-columns: minmax(0, 1fr) 42px 46px !important;
    grid-template-rows: minmax(72px, auto) 40px !important;
    min-height: 126px !important;
    padding: 10px 12px 8px !important;
    align-items: end !important;
  }

  html body #assistantDrawer #assistantComposer > #assistantInput,
  html body #assistantDrawer #assistantComposer > textarea {
    min-height: 64px !important;
    max-height: 96px !important;
    padding: 13px 14px !important;
    font-size: 13px !important;
  }

  html body #assistantDrawer #assistantComposer > #assistantVoiceInputBtn {
    width: 40px !important;
    height: 40px !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body #assistantDrawer #assistantComposer > #assistantSendBtn {
    width: 44px !important;
    height: 44px !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    border-radius: 12px !important;
    opacity: .86 !important;
    background: #1677ff !important;
    color: #fff !important;
    box-shadow: 0 8px 16px rgb(22 119 255 / 24%) !important;
  }

  html body #assistantDrawer #assistantComposer > #assistantSendBtn:disabled {
    opacity: .5 !important;
    background: #9bbbe8 !important;
  }

  html body #assistantDrawer #assistantComposer > .assistant-composer-tools {
    flex-flow: row nowrap !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    scrollbar-width: none !important;
  }

  html body #assistantDrawer #assistantComposer > .assistant-composer-tools::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-select-trigger {
    height: 30px !important;
    font-size: 10px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-composer-copy-tools {
    flex: 0 0 auto !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-output-mode {
    width: 174px !important;
    flex-basis: 174px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-size-mode {
    width: 126px !important;
    flex-basis: 126px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-web-mode {
    width: 120px !important;
    flex-basis: 120px !important;
  }
}

html:root[data-theme="dark"] body #assistantDrawer #assistantComposer > #assistantSendBtn {
  background: var(--neutral-accent, #a86f25) !important;
  color: #fff !important;
}

html:root[data-theme="dark"] body #assistantDrawer #assistantComposer > #assistantVoiceInputBtn {
  background: #272727 !important;
  color: #d7e2f1 !important;
  border-color: #475365 !important;
}

/* UI polish v7: final desktop composer, artifact and history pass. */
@media (min-width: 900px) {
  html body #assistantDrawer #assistantComposer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px 44px !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: end !important;
  }

  html body #assistantDrawer #assistantComposer > #assistantInput,
  html body #assistantDrawer #assistantComposer > textarea {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  html body #assistantDrawer #assistantComposer > #assistantVoiceInputBtn {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body #assistantDrawer #assistantComposer > #assistantSendBtn {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  html body #assistantDrawer #assistantComposer > .assistant-composer-tools {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-flow: row wrap !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 32px !important;
    max-height: none !important;
    overflow: visible !important;
    align-items: center !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-select-trigger {
    height: 30px !important;
    min-width: 0 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-mode-select {
    width: 118px !important;
    flex: 0 1 118px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-attachment-mode {
    width: 110px !important;
    flex: 0 1 110px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-web-mode {
    width: 116px !important;
    flex: 0 1 116px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-output-mode {
    width: 180px !important;
    flex: 0 1 180px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-size-mode {
    width: 132px !important;
    flex: 0 1 132px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-composer-copy-tools {
    flex: 0 0 auto !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-composer-tools button {
    flex: 0 0 auto !important;
  }
}

html body .assistant-artifact-history-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style-position: inside;
}

html body .assistant-artifact-history-details > summary small {
  display: block;
  min-width: 0;
}

html body .assistant-artifact-history-details > summary em {
  flex: 0 0 auto;
  font-style: normal;
}

html body .assistant-artifact-history-details .assistant-artifact-error {
  margin-top: 8px;
}

html body .assistant-generated-image-preview,
html body .assistant-artifact-preview {
  overflow: hidden;
  background: transparent !important;
  border-color: transparent !important;
}

html body .assistant-generated-image-preview img,
html body .assistant-artifact-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent !important;
}

html body .assistant-artifact-preview[style*="--assistant-artifact-aspect"],
html body .assistant-generated-image-preview[style*="--assistant-artifact-aspect"] {
  aspect-ratio: var(--assistant-artifact-aspect);
}

html:root[data-theme="dark"] body .assistant-artifact-history-details > summary {
  color: #e6edf7;
}

html:root[data-theme="dark"] body .assistant-artifact-history-details > summary small,
html:root[data-theme="dark"] body .assistant-artifact-history-details > summary em {
  color: #aebbd0;
}

/* UI polish v8: desktop assistant stability, embedded composer and compact history. */
@media (min-width: 900px) {
  html body #assistantDrawer #assistantComposer,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px 44px !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: end !important;
    overflow: visible !important;
  }

  html body #assistantDrawer #assistantComposer > #assistantInput,
  html body #assistantDrawer #assistantComposer > textarea,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > #assistantInput,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > textarea {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  html body #assistantDrawer #assistantComposer > #assistantVoiceInputBtn,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > #assistantVoiceInputBtn {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 40px !important;
    min-width: 40px !important;
  }

  html body #assistantDrawer #assistantComposer > #assistantSendBtn,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > #assistantSendBtn {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 44px !important;
    min-width: 44px !important;
    background: var(--neutral-accent, #a86f25) !important;
    border-color: var(--neutral-accent, #a86f25) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--neutral-accent) 28%, transparent) !important;
  }

  html body #assistantDrawer #assistantComposer > .assistant-composer-tools,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > .assistant-composer-tools {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-flow: row wrap !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 32px !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-x: visible !important;
    padding-bottom: 0 !important;
  }

  html body #assistantDrawer #assistantComposer > .assistant-composer-tools::-webkit-scrollbar,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > .assistant-composer-tools::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  html body #assistantDrawer #assistantComposer #assistantModeSwitch,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer #assistantModeSwitch {
    flex: 0 1 118px !important;
    width: 118px !important;
    min-width: 108px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-select-shell:has(#assistantAttachmentRole),
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-select-shell:has(#assistantAttachmentRole) {
    flex: 0 1 116px !important;
    width: 116px !important;
    min-width: 106px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-web-mode,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-web-mode {
    flex: 0 1 116px !important;
    width: 116px !important;
    min-width: 106px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-output-mode,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-output-mode {
    flex: 1 1 176px !important;
    width: 176px !important;
    min-width: 156px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-size-mode,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-size-mode {
    flex: 0 1 132px !important;
    width: 132px !important;
    min-width: 116px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-composer-copy-tools,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-composer-copy-tools,
  html body #assistantDrawer #assistantComposer .assistant-composer-tools > button,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-composer-tools > button {
    flex: 0 0 auto !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-select-trigger,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-select-trigger {
    height: 30px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
}

html body #assistantDrawer .assistant-messages {
  overflow-anchor: none !important;
  scroll-behavior: auto !important;
}

html body #assistantDrawer .assistant-generated-result:not(.assistant-artifact-history-expired),
html body #assistantDrawer .assistant-artifact-result:not(.assistant-artifact-history-expired) {
  max-width: 100% !important;
}

html body #assistantDrawer .assistant-generated-image-preview,
html body #assistantDrawer .assistant-artifact-preview {
  width: min(100%, var(--assistant-artifact-fit-width, 100%)) !important;
  max-width: 100% !important;
  overflow: hidden !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body #assistantDrawer .assistant-generated-image-preview img,
html body #assistantDrawer .assistant-artifact-preview img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

html body #assistantDrawer .assistant-artifact-preview[style*="--assistant-artifact-aspect"],
html body #assistantDrawer .assistant-generated-image-preview[style*="--assistant-artifact-aspect"] {
  aspect-ratio: var(--assistant-artifact-aspect) !important;
}

html body #assistantDrawer .assistant-artifact-history-expired {
  padding: 8px 10px !important;
  border-radius: 12px !important;
  min-height: 0 !important;
}

html body #assistantDrawer .assistant-artifact-history-expired .assistant-artifact-error {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  gap: 6px !important;
}

html body #assistantDrawer .assistant-artifact-history-details > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  cursor: pointer !important;
  list-style-position: inside !important;
}

html body #assistantDrawer .assistant-artifact-history-details > summary span {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

html body #assistantDrawer .assistant-artifact-history-details > summary small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #assistantDrawer .assistant-artifact-history-details > summary em {
  flex: 0 0 auto !important;
  font-style: normal !important;
  font-size: 12px !important;
}

html body #assistantDrawer .assistant-artifact-history-details footer {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 8px !important;
}


/* UI polish v9: reduce desktop conversation noise and make the composer read as a clear workflow. */
@media (min-width: 900px) {
  html body #assistantDrawer .assistant-message-actions {
    opacity: .58 !important;
    transition: opacity .16s ease, transform .16s ease !important;
  }

  html body #assistantDrawer .assistant-message:hover .assistant-message-actions,
  html body #assistantDrawer .assistant-message:focus-within .assistant-message-actions,
  html body #assistantDrawer .assistant-message:has(.assistant-generated-result) .assistant-message-actions,
  html body #assistantDrawer .assistant-message:has(.assistant-stage-conversation-result) .assistant-message-actions {
    opacity: 1 !important;
  }

  html body #assistantDrawer .assistant-message-actions .assistant-message-action-btn,
  html body #assistantDrawer .assistant-message-actions .assistant-message-more-menu > summary {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    flex-basis: 26px !important;
  }

  html body #assistantDrawer .assistant-message-actions svg,
  html body #assistantDrawer .assistant-message-actions .fluent-icon-shell,
  html body #assistantDrawer .assistant-message-actions .fluent-icon {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }

  html body #assistantDrawer .assistant-design-strategy > summary,
  html body #assistantDrawer .assistant-design-director-review > summary,
  html body #assistantDrawer .assistant-professional-review > summary {
    min-height: 38px !important;
    padding: 8px 10px !important;
  }

  html body #assistantDrawer .assistant-design-strategy > summary em,
  html body #assistantDrawer .assistant-design-director-review > summary em,
  html body #assistantDrawer .assistant-professional-review > summary em {
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  html body #assistantDrawer .assistant-design-strategy-body,
  html body #assistantDrawer .assistant-design-director-review-body,
  html body #assistantDrawer .assistant-professional-review-body {
    max-height: min(52vh, 520px) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
  }

  html body #assistantDrawer #assistantComposer > .assistant-composer-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) auto auto auto minmax(0, 1.2fr) auto !important;
    grid-template-rows: 32px 32px !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 2px 0 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-composer-copy-tools {
    grid-column: 1 !important;
    grid-row: 1 !important;
    max-width: none !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-quick-tools-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 86px !important;
  }

  html body #assistantDrawer #assistantComposer #assistantModeSwitch {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 122px !important;
    min-width: 122px !important;
  }

  html body #assistantDrawer #assistantComposer #assistantImageSettingsBtn:not(.hidden) {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-secondary-tools {
    grid-column: 6 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }

  html body #assistantDrawer #assistantComposer > .assistant-select-shell:has(#assistantAttachmentRole),
  html body #assistantDrawer #assistantComposer .assistant-web-mode,
  html body #assistantDrawer #assistantComposer .assistant-output-mode,
  html body #assistantDrawer #assistantComposer .assistant-size-mode,
  html body #assistantDrawer #assistantComposer .assistant-custom-size-fields {
    grid-row: 2 !important;
  }

  html body #assistantDrawer #assistantComposer > .assistant-select-shell:has(#assistantAttachmentRole) {
    grid-column: 1 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-web-mode {
    grid-column: 2 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-output-mode {
    grid-column: 3 / span 2 !important;
    width: auto !important;
    max-width: none !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-size-mode {
    grid-column: 5 !important;
    width: auto !important;
    min-width: 124px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-custom-size-fields {
    grid-column: 6 !important;
    justify-self: end !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-composer-tools > #assistantAttachmentInput.visually-hidden-file {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-composer-tools > :is(.assistant-composer-copy-tools, .assistant-quick-tools-wrap, #assistantModeSwitch, #assistantImageSettingsBtn, .assistant-secondary-tools, .assistant-select-shell, .assistant-composer-mode, .assistant-custom-size-fields) {
    min-width: 0 !important;
  }

  html body #assistantDrawer #assistantComposer :is(.assistant-composer-copy-tools, .assistant-quick-tools-wrap, #assistantModeSwitch, #assistantImageSettingsBtn) {
    border-radius: 8px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-quick-tools-wrap {
    background: color-mix(in srgb, var(--neutral-accent, #a86f25) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--neutral-accent, #a86f25) 28%, transparent) !important;
  }

  html body #assistantDrawer #assistantComposer #assistantModeSwitch {
    border: 1px solid color-mix(in srgb, var(--neutral-accent, #a86f25) 34%, transparent) !important;
    background: color-mix(in srgb, var(--neutral-accent, #a86f25) 12%, transparent) !important;
  }

  html body #assistantDrawer #assistantComposer #assistantImageSettingsBtn:not(.hidden) {
    min-height: 30px !important;
    padding-inline: 10px !important;
    color: #fff !important;
    background: var(--neutral-accent, #a86f25) !important;
    border-color: var(--neutral-accent, #a86f25) !important;
    box-shadow: 0 5px 14px rgb(37 99 235 / 22%) !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-secondary-tools {
    opacity: .72 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-secondary-tools:hover,
  html body #assistantDrawer #assistantComposer .assistant-secondary-tools:focus-within {
    opacity: 1 !important;
  }
}

html body #assistantDrawer .assistant-design-strategy > summary,
html body #assistantDrawer .assistant-design-director-review > summary,
html body #assistantDrawer .assistant-professional-review > summary {
  cursor: pointer !important;
  list-style-position: inside !important;
}

html body #assistantDrawer .assistant-design-strategy > summary small,
html body #assistantDrawer .assistant-design-director-review > summary small,
html body #assistantDrawer .assistant-professional-review > summary small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:root[data-theme="dark"] body #assistantDrawer #assistantComposer .assistant-quick-tools-wrap {
  background: rgb(37 99 235 / 18%) !important;
  border-color: rgb(96 165 250 / 35%) !important;
}

html:root[data-theme="dark"] body #assistantDrawer #assistantComposer #assistantModeSwitch {
  background: rgb(37 99 235 / 16%) !important;
  border-color: rgb(96 165 250 / 40%) !important;
}

html:root[data-theme="dark"] body #assistantDrawer #assistantComposer #assistantImageSettingsBtn:not(.hidden) {
  background: var(--neutral-accent, #a86f25) !important;
  border-color: var(--neutral-accent, #a86f25) !important;
}

/* UI polish v10: make the desktop composer toolbar a predictable two-row
   workflow. Older layers intentionally keep the toolbar as flex, so use
   explicit flex ordering and a real line break instead of relying on a
   competing grid declaration. The first row contains the primary choices;
   the second row contains message/output details. */
@media (min-width: 900px) {
  html body #assistantDrawer #assistantComposer > .assistant-composer-tools,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > .assistant-composer-tools {
    display: flex !important;
    flex-flow: row wrap !important;
    align-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 32px !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-x: visible !important;
    padding: 2px 0 !important;
  }

  html body #assistantDrawer #assistantComposer > .assistant-composer-tools:has(.assistant-advanced-options-panel:not(.hidden)),
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > .assistant-composer-tools:has(.assistant-advanced-options-panel:not(.hidden)) {
    min-height: 70px !important;
  }

  /* Primary choices stay together on the compact line. */
  html body #assistantDrawer #assistantComposer > .assistant-composer-tools
    > :is(.assistant-composer-copy-tools, .assistant-quick-tools-wrap, #assistantModeSwitch, #assistantImageSettingsBtn, #assistantAdvancedOptionsBtn, .assistant-secondary-tools) {
    order: 1 !important;
  }

  /* The file input remains available without taking visible space. */
  html body #assistantDrawer #assistantComposer > .assistant-composer-tools > #assistantAttachmentInput.visually-hidden-file,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > .assistant-composer-tools > #assistantAttachmentInput.visually-hidden-file {
    order: 4 !important;
    position: absolute !important;
    inset: auto auto 0 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    pointer-events: none !important;
  }

  html body #assistantDrawer #assistantComposer #assistantAdvancedOptionsBtn,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer #assistantAdvancedOptionsBtn {
    display: inline-flex !important;
    min-height: 30px !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 10px !important;
    border: 1px solid color-mix(in srgb, var(--neutral-accent, #a86f25) 30%, transparent) !important;
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--neutral-accent, #a86f25) 9%, transparent) !important;
    color: var(--neutral-accent, #a86f25) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }

  html body #assistantDrawer #assistantComposer #assistantAdvancedOptionsBtn > svg,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer #assistantAdvancedOptionsBtn > svg {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
  }

  html body #assistantDrawer #assistantComposer #assistantAdvancedOptionsBtn small,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer #assistantAdvancedOptionsBtn small {
    max-width: 120px !important;
    overflow: hidden !important;
    color: inherit !important;
    font-size: 9px !important;
    opacity: .72 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-composer-tool-label,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-composer-tool-label {
    white-space: nowrap !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-quick-tools-btn,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-quick-tools-btn,
  html body #assistantDrawer #assistantComposer .assistant-copy-mode-btn,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-btn,
  html body #assistantDrawer #assistantComposer .assistant-mode-trigger,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-mode-trigger {
    white-space: nowrap !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-quick-tools-btn > span,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-quick-tools-btn > span {
    display: inline-block !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }

  html body #assistantDrawer #assistantComposer #assistantAdvancedOptionsBtn.is-open,
  html body #assistantDrawer #assistantComposer #assistantAdvancedOptionsBtn:hover,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer #assistantAdvancedOptionsBtn.is-open,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer #assistantAdvancedOptionsBtn:hover {
    border-color: var(--neutral-accent, #a86f25) !important;
    background: var(--neutral-accent, #a86f25) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgb(37 99 235 / 20%) !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel {
    order: 2 !important;
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 130px 132px minmax(180px, 1fr) 142px auto !important;
    align-items: end !important;
    gap: 6px !important;
    margin-top: 2px !important;
    padding: 8px !important;
    border: 1px solid color-mix(in srgb, var(--neutral-accent, #a86f25) 16%, transparent) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--neutral-accent, #a86f25) 5%, var(--theme-panel, #ffffff)) !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel.hidden,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel.hidden {
    display: none !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-field,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-field {
    display: grid !important;
    min-width: 0 !important;
    gap: 4px !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-field > span,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-field > span {
    grid-column: 2 !important;
    color: var(--theme-text-tertiary, #667085) !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-field .assistant-select-shell,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-field .assistant-select-shell,
  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel > .assistant-select-shell:has(#assistantAttachmentRole),
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel > .assistant-select-shell:has(#assistantAttachmentRole) {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    grid-column: 1 / -1 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel .assistant-composer-mode,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel .assistant-composer-mode {
    display: grid !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 4px !important;
    align-content: end !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel .assistant-composer-mode > span,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel .assistant-composer-mode > span {
    grid-column: 2 !important;
    color: var(--theme-text-tertiary, #667085) !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel .assistant-composer-mode > .assistant-select-shell,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel .assistant-composer-mode > .assistant-select-shell {
    grid-column: 1 / -1 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel .assistant-custom-size-fields,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel .assistant-custom-size-fields {
    align-self: end !important;
    justify-self: end !important;
  }

  html body #assistantDrawer .assistant-message-actions {
    opacity: 1 !important;
  }

  html body #assistantDrawer .assistant-message:hover .assistant-message-actions,
  html body #assistantDrawer .assistant-message:focus-within .assistant-message-actions,
  html body #assistantDrawer .assistant-message:has(.assistant-generated-result) .assistant-message-actions,
  html body #assistantDrawer .assistant-message:has(.assistant-stage-conversation-result) .assistant-message-actions {
    opacity: .9 !important;
  }

  html body #assistantDrawer .assistant-message-actions .assistant-message-action-btn,
  html body #assistantDrawer .assistant-message-actions .assistant-message-more-menu > summary {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    flex-basis: 24px !important;
    border-radius: 6px !important;
  }

  html body #assistantDrawer .assistant-message-actions svg,
  html body #assistantDrawer .assistant-message-actions .fluent-icon-shell,
  html body #assistantDrawer .assistant-message-actions .fluent-icon {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    min-height: 13px !important;
    max-width: 13px !important;
    max-height: 13px !important;
  }
}

/* UI polish v11: normalize the desktop toolbar and isolate the advanced
   parameter row from legacy placement rules.  The advanced controls are one
   compact, aligned row; every visible action keeps the same hit area and icon
   scale so faint or stretched controls cannot reappear at narrower desktop
   widths. */
@media (min-width: 900px) {
  html body #assistantDrawer #assistantComposer > .assistant-composer-tools,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > .assistant-composer-tools {
    box-sizing: border-box !important;
    align-items: center !important;
    align-content: flex-start !important;
    gap: 6px !important;
  }

  html body #assistantDrawer #assistantComposer > .assistant-composer-tools
    > :is(.assistant-composer-copy-tools, .assistant-quick-tools-wrap, #assistantModeSwitch, #assistantImageSettingsBtn, #assistantAdvancedOptionsBtn, .assistant-secondary-tools),
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > .assistant-composer-tools
    > :is(.assistant-composer-copy-tools, .assistant-quick-tools-wrap, #assistantModeSwitch, #assistantImageSettingsBtn, #assistantAdvancedOptionsBtn, .assistant-secondary-tools) {
    box-sizing: border-box !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    align-self: center !important;
    line-height: 1 !important;
  }

  html body #assistantDrawer #assistantComposer
    :is(.assistant-copy-mode-btn, .assistant-quick-tools-btn, .assistant-mode-trigger, #assistantImageSettingsBtn, #assistantAdvancedOptionsBtn),
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer
    :is(.assistant-copy-mode-btn, .assistant-quick-tools-btn, .assistant-mode-trigger, #assistantImageSettingsBtn, #assistantAdvancedOptionsBtn) {
    box-sizing: border-box !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    line-height: 1 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-secondary-tools,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-secondary-tools {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    align-items: center !important;
    gap: 4px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-secondary-tools > .assistant-icon-btn,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-secondary-tools > .assistant-icon-btn {
    box-sizing: border-box !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    line-height: 1 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body #assistantDrawer #assistantComposer
    :is(.assistant-composer-copy-tools, .assistant-quick-tools-wrap, #assistantModeSwitch, #assistantImageSettingsBtn, #assistantAdvancedOptionsBtn, .assistant-secondary-tools)
    :is(svg, i, .fluent-icon-shell, .fluent-icon) ,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer
    :is(.assistant-composer-copy-tools, .assistant-quick-tools-wrap, #assistantModeSwitch, #assistantImageSettingsBtn, #assistantAdvancedOptionsBtn, .assistant-secondary-tools)
    :is(svg, i, .fluent-icon-shell, .fluent-icon) {
    flex: 0 0 15px !important;
    width: 15px !important;
    min-width: 15px !important;
    max-width: 15px !important;
    height: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html body #assistantDrawer #assistantComposer
    :is(.assistant-composer-copy-tools, .assistant-quick-tools-wrap, #assistantModeSwitch, #assistantImageSettingsBtn, #assistantAdvancedOptionsBtn, .assistant-secondary-tools) svg,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer
    :is(.assistant-composer-copy-tools, .assistant-quick-tools-wrap, #assistantModeSwitch, #assistantImageSettingsBtn, #assistantAdvancedOptionsBtn, .assistant-secondary-tools) svg {
    stroke-width: 2 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel {
    box-sizing: border-box !important;
    grid-template-columns:
      minmax(132px, .9fr)
      minmax(138px, .95fr)
      minmax(190px, 1.25fr)
      minmax(142px, .95fr)
      auto !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
    gap: 7px !important;
    min-height: 62px !important;
    padding: 8px !important;
  }

  /* Reset every old row/column/width declaration on the controls that now
     belong to the advanced panel. */
  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel
    > :is(.assistant-output-mode, .assistant-size-mode, .assistant-web-mode, .assistant-attachment-role-field, .assistant-custom-size-fields),
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel
    > :is(.assistant-output-mode, .assistant-size-mode, .assistant-web-mode, .assistant-attachment-role-field, .assistant-custom-size-fields) {
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
    justify-self: stretch !important;
    align-self: stretch !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel
    > :is(.assistant-advanced-field, .assistant-composer-mode),
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel
    > :is(.assistant-advanced-field, .assistant-composer-mode) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 4px !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: auto !important;
    align-items: stretch !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel
    > :is(.assistant-advanced-field, .assistant-composer-mode) > :is(span, i),
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel
    > :is(.assistant-advanced-field, .assistant-composer-mode) > :is(span, i) {
    display: inline-flex !important;
    flex: 0 0 14px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 14px !important;
    min-height: 14px !important;
    align-items: center !important;
    gap: 4px !important;
    color: var(--theme-text-tertiary, #667085) !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel
    > :is(.assistant-advanced-field, .assistant-composer-mode) > i,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel
    > :is(.assistant-advanced-field, .assistant-composer-mode) > i {
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    height: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
    flex: 0 0 14px !important;
    color: #6b86aa !important;
    opacity: 1 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel select,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel select {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 26px 0 9px !important;
    border-radius: 7px !important;
    line-height: 30px !important;
    font-size: 10px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel
    .assistant-custom-size-fields,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel
    .assistant-custom-size-fields {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    align-self: end !important;
    gap: 4px !important;
    height: 30px !important;
    min-height: 30px !important;
    white-space: nowrap !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel
    .assistant-custom-size-fields.hidden,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel
    .assistant-custom-size-fields.hidden {
    display: none !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel
    .assistant-custom-size-fields input,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel
    .assistant-custom-size-fields input {
    box-sizing: border-box !important;
    width: 58px !important;
    min-width: 58px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 6px !important;
    border-radius: 7px !important;
    text-align: center !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel
    .assistant-custom-size-fields b,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel
    .assistant-custom-size-fields b {
    font-size: 11px !important;
    line-height: 1 !important;
  }

  html body #assistantDrawer #assistantComposer > #assistantVoiceInputBtn,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > #assistantVoiceInputBtn {
    box-sizing: border-box !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body #assistantDrawer #assistantComposer > #assistantVoiceInputBtn svg,
  html body #assistantDrawer #assistantComposer > #assistantVoiceInputBtn .fluent-icon-shell,
  html body #assistantDrawer #assistantComposer > #assistantVoiceInputBtn .fluent-icon,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > #assistantVoiceInputBtn svg,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > #assistantVoiceInputBtn .fluent-icon-shell,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > #assistantVoiceInputBtn .fluent-icon {
    width: 17px !important;
    min-width: 17px !important;
    max-width: 17px !important;
    height: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;
    opacity: 1 !important;
  }

  html body #assistantDrawer #assistantComposer > #assistantSendBtn,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > #assistantSendBtn {
    box-sizing: border-box !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  html body #assistantDrawer #assistantComposer > #assistantSendBtn svg,
  html body #assistantDrawer #assistantComposer > #assistantSendBtn .fluent-icon-shell,
  html body #assistantDrawer #assistantComposer > #assistantSendBtn .fluent-icon,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > #assistantSendBtn svg,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > #assistantSendBtn .fluent-icon-shell,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > #assistantSendBtn .fluent-icon {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    opacity: 1 !important;
    color: #eef5ff !important;
  }

  html body #assistantDrawer #assistantComposer > #assistantSendBtn:disabled,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > #assistantSendBtn:disabled {
    opacity: .62 !important;
  }
}

/* UI polish v12: the visible controls inside the advanced panel are custom
   select triggers, not the native selects.  Lock the custom shell/trigger
   layer as well so old toolbar widths cannot make individual fields stretch,
   shrink, or drift out of alignment. */
@media (min-width: 900px) {
  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel
    :is(.assistant-select-shell, .assistant-select-trigger),
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel
    :is(.assistant-select-shell, .assistant-select-trigger) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel
    .assistant-select-trigger,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel
    .assistant-select-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 0 8px !important;
    line-height: 1 !important;
    overflow: hidden !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel
    .assistant-select-trigger > .assistant-select-trigger-label,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel
    .assistant-select-trigger > .assistant-select-trigger-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel
    .assistant-select-trigger > .assistant-select-trigger-visual,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel
    .assistant-select-trigger > .assistant-select-trigger-visual {
    flex: 0 0 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    opacity: 1 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel
    .assistant-select-trigger > svg,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel
    .assistant-select-trigger > svg {
    flex: 0 0 14px !important;
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    height: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
    opacity: 1 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel
    > :is(.assistant-advanced-field, .assistant-composer-mode) > :is(span, i, .assistant-select-shell, select),
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel
    > :is(.assistant-advanced-field, .assistant-composer-mode) > :is(span, i, .assistant-select-shell, select) {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-advanced-options-panel
    > :is(.assistant-advanced-field, .assistant-composer-mode) > span,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-advanced-options-panel
    > :is(.assistant-advanced-field, .assistant-composer-mode) > span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 14px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* UI polish v13: correct the last inherited toolbar/field conflicts measured
   on desktop.  Icon buttons are buttons again, while parameter labels use a
   fixed title row and a fixed 30px control row. */
@media (min-width: 900px) {
  html body #assistantDrawer #assistantComposer .assistant-secondary-tools > .assistant-icon-btn,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-secondary-tools > .assistant-icon-btn {
    display: inline-flex !important;
    box-sizing: border-box !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-secondary-tools > .assistant-icon-btn :is(svg, i, .fluent-icon-shell, .fluent-icon),
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-secondary-tools > .assistant-icon-btn :is(svg, i, .fluent-icon-shell, .fluent-icon) {
    flex: 0 0 15px !important;
    width: 15px !important;
    min-width: 15px !important;
    max-width: 15px !important;
    height: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
    opacity: 1 !important;
  }

  html body #assistantDrawer #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > :is(.assistant-advanced-field, .assistant-composer-mode),
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > :is(.assistant-advanced-field, .assistant-composer-mode) {
    display: grid !important;
    grid-template-rows: 14px 30px !important;
    min-height: 48px !important;
    height: 48px !important;
    align-content: start !important;
    align-items: center !important;
    row-gap: 4px !important;
  }

  html body #assistantDrawer #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > .assistant-attachment-role-field,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > .assistant-attachment-role-field {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #assistantDrawer #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > .assistant-attachment-role-field > span,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > .assistant-attachment-role-field > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body #assistantDrawer #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > .assistant-composer-mode,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > .assistant-composer-mode {
    grid-template-columns: 16px minmax(0, 1fr) !important;
  }

  html body #assistantDrawer #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > .assistant-composer-mode > :is(i, svg),
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > .assistant-composer-mode > :is(i, svg) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    display: inline-flex !important;
    flex: 0 0 14px !important;
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    height: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
    color: #6b86aa !important;
    opacity: 1 !important;
  }

  html body #assistantDrawer #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > .assistant-composer-mode > span,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > .assistant-composer-mode > span {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
  }

  html body #assistantDrawer #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > :is(.assistant-advanced-field, .assistant-composer-mode) > .assistant-select-shell,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > :is(.assistant-advanced-field, .assistant-composer-mode) > .assistant-select-shell {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    align-self: end !important;
    justify-self: stretch !important;
  }

  html body #assistantDrawer #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    .assistant-select-shell:has(#assistantAttachmentRole),
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    .assistant-select-shell:has(#assistantAttachmentRole) {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* UI polish v14: after icon decoration, some parameter icons are Fluent
   icon-shell spans.  Treat those spans as icons, the plain spans as labels,
   and select-shell spans as controls so the row cannot collapse or stretch
   individual icons again. */
@media (min-width: 900px) {
  html body #assistantDrawer #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > .assistant-composer-mode > :is(i, svg, .fluent-icon-shell),
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > .assistant-composer-mode > :is(i, svg, .fluent-icon-shell) {
    display: inline-flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    flex: 0 0 14px !important;
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    height: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
    color: #6b86aa !important;
    opacity: 1 !important;
  }

  html body #assistantDrawer #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > .assistant-composer-mode > .fluent-icon-shell > .fluent-icon,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > .assistant-composer-mode > .fluent-icon-shell > .fluent-icon {
    display: block !important;
    flex: 0 0 14px !important;
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    height: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
    opacity: 1 !important;
  }

  html body #assistantDrawer #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > .assistant-composer-mode > span:not(.fluent-icon-shell):not(.assistant-select-shell),
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > .assistant-composer-mode > span:not(.fluent-icon-shell):not(.assistant-select-shell) {
    display: inline-flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #assistantDrawer #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > .assistant-attachment-role-field > span:not(.assistant-select-shell),
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > .assistant-attachment-role-field > span:not(.assistant-select-shell) {
    display: inline-flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
  }

  html body #assistantDrawer #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > :is(.assistant-advanced-field, .assistant-composer-mode) > .assistant-select-shell,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > :is(.assistant-advanced-field, .assistant-composer-mode) > .assistant-select-shell {
    display: inline-flex !important;
    box-sizing: border-box !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    align-self: end !important;
    justify-self: stretch !important;
    flex: 0 0 30px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    align-items: stretch !important;
  }

  html body #assistantDrawer #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > :is(.assistant-advanced-field, .assistant-composer-mode) > .assistant-select-shell > .assistant-select-trigger,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel
    > :is(.assistant-advanced-field, .assistant-composer-mode) > .assistant-select-shell > .assistant-select-trigger {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
  }
}


/* UI polish v15: desktop blank-canvas creation entry. */
.project-home-secondary,
.smart-create-blank,
.new-project-action-buttons {
  box-sizing: border-box;
}

.project-home-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  margin: -4px 0 12px;
  border: 1px solid color-mix(in srgb, var(--neutral-accent, #a86f25) 28%, var(--v2-line, #dbe4f0));
  border-radius: 12px;
  background: color-mix(in srgb, var(--neutral-accent, #a86f25) 8%, var(--v2-panel, #fff));
  color: var(--neutral-accent, #a86f25);
  font-weight: 650;
  cursor: pointer;
}

.project-home-secondary:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--neutral-accent, #a86f25) 58%, var(--v2-line, #dbe4f0));
  background: color-mix(in srgb, var(--neutral-accent, #a86f25) 13%, var(--v2-panel, #fff));
  transform: translateY(-1px);
}

.project-home-secondary svg,
.smart-create-blank svg,
#createBlankCanvasFromPanelBtn svg {
  width: 16px;
  height: 16px;
}

.smart-create-blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--neutral-accent, #a86f25) 32%, var(--v2-line, #dbe4f0));
  border-radius: 999px;
  background: color-mix(in srgb, var(--neutral-accent, #a86f25) 7%, var(--v2-panel, #fff));
  color: var(--neutral-accent, #a86f25);
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.smart-create-blank:hover:not(:disabled) {
  background: color-mix(in srgb, var(--neutral-accent, #a86f25) 12%, var(--v2-panel, #fff));
}

.new-project-action-buttons {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

#createBlankCanvasFromPanelBtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border-color: color-mix(in srgb, var(--neutral-accent, #a86f25) 25%, var(--v2-line, #dbe4f0));
  color: var(--neutral-accent, #a86f25);
  font-weight: 650;
}

html[data-theme="dark"] .project-home-secondary,
html[data-theme="dark"] .smart-create-blank,
html[data-theme="dark"] #createBlankCanvasFromPanelBtn {
  background: color-mix(in srgb, var(--neutral-accent, #a86f25) 13%, var(--v2-panel, #0f172a));
  border-color: color-mix(in srgb, var(--neutral-accent, #a86f25) 42%, var(--v2-line, #334155));
  color: color-mix(in srgb, var(--neutral-accent) 35%, var(--neutral-line));
}

/* Keep imported-source labels out of the PowerPoint-style page-number gutter. */
@media (min-width: 981px) {
  body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
  }

  body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb.has-source-badge,
  body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb:has(> .thumb-source-status) {
    grid-template-rows: auto auto auto !important;
  }

  body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb::before {
    grid-column: 1 !important;
    grid-row: 1 / -1 !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    padding: 2px 0 0 !important;
    text-align: center !important;
  }

  body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb > .workflow-thumb-image {
    position: relative !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb > .thumb-source-status {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    z-index: 2 !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: -1px 0 0 1px !important;
    align-self: start !important;
    justify-self: start !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    pointer-events: none !important;
  }

  body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb > .thumb-source-status > em {
    min-height: 16px !important;
    padding: 0 5px !important;
    border-color: color-mix(in srgb, var(--neutral-accent, #a86f25) 22%, rgba(148, 163, 184, .5)) !important;
    color: var(--neutral-accent, #a86f25) !important;
    background: color-mix(in srgb, var(--neutral-accent, #a86f25) 9%, #ffffff) !important;
    box-shadow: none !important;
    font-size: 9px !important;
  }

  body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb > .workflow-thumb-copy {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb.has-source-badge > .workflow-thumb-copy,
  body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb:has(> .thumb-source-status) > .workflow-thumb-copy {
    grid-row: 3 !important;
  }

  html[data-theme="dark"] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb > .thumb-source-status > em {
    border-color: color-mix(in srgb, var(--neutral-accent, #a86f25) 34%, rgba(148, 163, 184, .45)) !important;
    color: var(--neutral-accent-strong) !important;
    background: color-mix(in srgb, var(--neutral-accent, #a86f25) 18%, #0b192a) !important;
  }

  html:root[data-theme] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb.has-source-badge,
  html:root[data-theme] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb:has(> .thumb-source-status) {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
  }

  html:root[data-theme] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb.has-source-badge::before,
  html:root[data-theme] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb:has(> .thumb-source-status)::before {
    grid-column: 1 !important;
    grid-row: 1 / -1 !important;
    z-index: 1 !important;
    width: 100% !important;
    padding: 2px 0 0 !important;
    text-align: center !important;
  }

  html:root[data-theme] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb.has-source-badge > .workflow-thumb-image,
  html:root[data-theme] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb:has(> .thumb-source-status) > .workflow-thumb-image {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html:root[data-theme] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb.has-source-badge > .thumb-source-status,
  html:root[data-theme] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb:has(> .thumb-source-status) > .thumb-source-status {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: -1px 0 0 1px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  html:root[data-theme] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb.has-source-badge > .workflow-thumb-copy,
  html:root[data-theme] body #appShell #step-edit > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb:has(> .thumb-source-status) > .workflow-thumb-copy {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }
}

/* PPT 源文件画布：保留原页底图，同时让导入的文字层在内容模块可编辑。 */
html:root body #appShell #step-edit .slide-el.text.source-canvas-copy-layer:not(.source-text-live):not(.editing):not(.selected):not(.has-copy-edit) {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  background: transparent !important;
}

html:root body #appShell #step-edit .slide-el.text.source-canvas-copy-layer:not(.source-text-live).selected:not(.editing):not(.has-copy-edit),
html:root body #appShell #step-edit .slide-el.text.source-canvas-copy-layer:not(.source-text-live).multi-selected:not(.editing):not(.has-copy-edit) {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  background: color-mix(in srgb, var(--neutral-accent) 4%, transparent) !important;
}

html:root body #appShell #step-edit .slide-el.text.source-canvas-copy-layer:not(.source-text-live):not(.editing):not(.has-copy-edit) .slide-text-content {
  opacity: 0 !important;
}

html:root body #appShell #step-edit .slide-el.text.source-canvas-copy-layer:not(.source-text-live):not(.editing):not(.selected):not(.has-copy-edit):hover {
  outline: 1px dashed color-mix(in srgb, var(--neutral-accent) 55%, transparent) !important;
  outline-offset: 2px !important;
  background: color-mix(in srgb, var(--neutral-accent) 5%, transparent) !important;
}

html:root body #appShell #step-edit .slide-el.text.source-canvas-copy-layer.editing {
  /* Editing begins only after the original glyphs have been removed by the
     native renderer. The input itself must remain visible. */
  background: transparent !important;
  background-clip: border-box !important;
  color: var(--canvas-text-color, #1f2937) !important;
  -webkit-text-fill-color: var(--canvas-text-color, #1f2937) !important;
  text-shadow: none !important;
  caret-color: var(--neutral-accent, #a86f25) !important;
  opacity: 1 !important;
}


/* UI polish v12: collapse copy strategy into one desktop dropdown so the composer stays clean while keeping every strategy available. */
@media (min-width: 900px) {
  html body #assistantDrawer #assistantComposer .assistant-composer-copy-tools,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-composer-copy-tools {
    position: relative !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 128px !important;
    max-width: 156px !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    overflow: visible !important;
    padding: 0 !important;
    border-right: 0 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-copy-mode-trigger,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-trigger {
    box-sizing: border-box !important;
    display: inline-flex !important;
    width: 100% !important;
    min-width: 128px !important;
    max-width: 156px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 0 8px !important;
    border: 1px solid color-mix(in srgb, var(--neutral-accent, #a86f25) 34%, var(--theme-line, #d7dce5)) !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--neutral-accent, #a86f25) 11%, #ffffff) 0%, var(--theme-panel, #ffffff) 100%) !important;
    color: var(--neutral-accent, #a86f25) !important;
    box-shadow: 0 5px 14px rgb(37 99 235 / 9%) !important;
    cursor: pointer !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-copy-mode-trigger:hover,
  html body #assistantDrawer #assistantComposer .assistant-copy-mode-trigger.is-open,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-trigger:hover,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-trigger.is-open {
    border-color: var(--neutral-accent, #a86f25) !important;
    background: var(--neutral-accent, #a86f25) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgb(37 99 235 / 22%) !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-copy-mode-trigger > :is(i, svg),
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-trigger > :is(i, svg) {
    flex: 0 0 15px !important;
    width: 15px !important;
    min-width: 15px !important;
    max-width: 15px !important;
    height: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
    opacity: 1 !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-copy-mode-trigger > span,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-trigger > span {
    display: grid !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    gap: 1px !important;
    text-align: left !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-copy-mode-trigger small,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-trigger small {
    display: block !important;
    overflow: hidden !important;
    color: inherit !important;
    font-size: 8px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    opacity: .62 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-copy-mode-trigger strong,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-trigger strong {
    display: block !important;
    overflow: hidden !important;
    color: inherit !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-copy-mode-trigger .assistant-copy-mode-chevron,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-trigger .assistant-copy-mode-chevron {
    flex-basis: 13px !important;
    width: 13px !important;
    min-width: 13px !important;
    max-width: 13px !important;
    height: 13px !important;
    min-height: 13px !important;
    max-height: 13px !important;
    transition: transform .16s ease !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-copy-mode-trigger.is-open .assistant-copy-mode-chevron,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-trigger.is-open .assistant-copy-mode-chevron {
    transform: rotate(180deg) !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-copy-mode-menu,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-menu {
    position: absolute !important;
    left: 0 !important;
    bottom: calc(100% + 8px) !important;
    z-index: 1200 !important;
    display: grid !important;
    width: min(300px, calc(100vw - 32px)) !important;
    gap: 6px !important;
    padding: 8px !important;
    border: 1px solid color-mix(in srgb, var(--neutral-accent, #a86f25) 20%, var(--theme-line, #d7dce5)) !important;
    border-radius: 12px !important;
    background: var(--theme-panel, #ffffff) !important;
    box-shadow: 0 18px 46px rgb(15 23 42 / 18%) !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-copy-mode-menu.hidden,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-menu.hidden {
    display: none !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-copy-mode-option,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-option {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 8px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--theme-text, #101828) !important;
    cursor: pointer !important;
    text-align: left !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-copy-mode-option:hover,
  html body #assistantDrawer #assistantComposer .assistant-copy-mode-option:focus-visible,
  html body #assistantDrawer #assistantComposer .assistant-copy-mode-option.active,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-option:hover,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-option:focus-visible,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-option.active {
    border-color: color-mix(in srgb, var(--neutral-accent, #a86f25) 26%, transparent) !important;
    background: color-mix(in srgb, var(--neutral-accent, #a86f25) 9%, var(--theme-panel, #ffffff)) !important;
    color: var(--neutral-accent, #a86f25) !important;
    outline: none !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-copy-mode-option > :is(i, svg),
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-option > :is(i, svg) {
    box-sizing: border-box !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 6px !important;
    border-radius: 9px !important;
    background: color-mix(in srgb, currentColor 11%, transparent) !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-copy-mode-option span,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-option span {
    display: grid !important;
    min-width: 0 !important;
    gap: 3px !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-copy-mode-option strong,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-option strong {
    overflow: hidden !important;
    color: inherit !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #assistantDrawer #assistantComposer .assistant-copy-mode-option small,
  html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-option small {
    display: block !important;
    overflow: hidden !important;
    color: var(--theme-text-tertiary, #667085) !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }
}

html:root[data-theme="dark"] body #assistantDrawer #assistantComposer .assistant-copy-mode-trigger,
html:root[data-theme="dark"] body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-trigger {
  border-color: color-mix(in srgb, var(--neutral-accent, #a86f25) 35%, #2a3442) !important;
  background: var(--neutral-panel-soft) !important;
  color: var(--neutral-accent-strong) !important;
  box-shadow: 0 7px 18px rgb(0 0 0 / 22%) !important;
}

html:root[data-theme="dark"] body #assistantDrawer #assistantComposer .assistant-copy-mode-trigger:hover,
html:root[data-theme="dark"] body #assistantDrawer #assistantComposer .assistant-copy-mode-trigger.is-open,
html:root[data-theme="dark"] body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-trigger:hover,
html:root[data-theme="dark"] body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-trigger.is-open {
  background: var(--neutral-accent, #a86f25) !important;
  color: #ffffff !important;
}

html:root[data-theme="dark"] body #assistantDrawer #assistantComposer .assistant-copy-mode-menu,
html:root[data-theme="dark"] body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-menu {
  border-color: #2a3442 !important;
  background: #161b23 !important;
  box-shadow: 0 18px 46px rgb(0 0 0 / 44%) !important;
}

html:root[data-theme="dark"] body #assistantDrawer #assistantComposer .assistant-copy-mode-option,
html:root[data-theme="dark"] body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-option {
  color: #e5edf8 !important;
}

html:root[data-theme="dark"] body #assistantDrawer #assistantComposer .assistant-copy-mode-option:hover,
html:root[data-theme="dark"] body #assistantDrawer #assistantComposer .assistant-copy-mode-option:focus-visible,
html:root[data-theme="dark"] body #assistantDrawer #assistantComposer .assistant-copy-mode-option.active,
html:root[data-theme="dark"] body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-option:hover,
html:root[data-theme="dark"] body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-option:focus-visible,
html:root[data-theme="dark"] body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-option.active {
  border-color: color-mix(in srgb, var(--neutral-accent) 35%, transparent) !important;
  background: color-mix(in srgb, var(--neutral-accent) 19%, transparent) !important;
  color: var(--neutral-accent-strong) !important;
}

html:root[data-theme="dark"] body #assistantDrawer #assistantComposer .assistant-copy-mode-option small,
html:root[data-theme="dark"] body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-copy-mode-option small {
  color: #a8b3c2 !important;
}

/* UI polish v13: PowerPoint-like single selection frame for desktop editing. */
html body #appShell #step-edit #slideCanvas .slide-el.selected,
html body #appShell #step-edit #slideCanvas .slide-el.multi-selected {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

html body #appShell #step-edit #slideCanvas .selection-overlay {
  border: 1px dashed #5f6368 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #appShell #step-edit #slideCanvas .selection-overlay.multi {
  border: 1px dashed var(--neutral-accent, #a86f25) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #appShell #step-edit #slideCanvas .selection-overlay.locked {
  border-color: #b45309 !important;
}

html body #appShell #step-edit #slideCanvas .selection-overlay .element-resize-handle {
  box-sizing: border-box !important;
  width: 12px !important;
  height: 12px !important;
  border: 2px solid #6b7280 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html body #appShell #step-edit #slideCanvas .selection-overlay .element-resize-handle.nw {
  left: -7px !important;
  top: -7px !important;
}

html body #appShell #step-edit #slideCanvas .selection-overlay .element-resize-handle.n {
  top: -7px !important;
}

html body #appShell #step-edit #slideCanvas .selection-overlay .element-resize-handle.ne {
  right: -7px !important;
  top: -7px !important;
}

html body #appShell #step-edit #slideCanvas .selection-overlay .element-resize-handle.e {
  right: -7px !important;
}

html body #appShell #step-edit #slideCanvas .selection-overlay .element-resize-handle.se {
  right: -7px !important;
  bottom: -7px !important;
}

html body #appShell #step-edit #slideCanvas .selection-overlay .element-resize-handle.s {
  bottom: -7px !important;
}

html body #appShell #step-edit #slideCanvas .selection-overlay .element-resize-handle.sw {
  left: -7px !important;
  bottom: -7px !important;
}

html body #appShell #step-edit #slideCanvas .selection-overlay .element-resize-handle.w {
  left: -7px !important;
}

html body #appShell #step-edit #slideCanvas .selection-overlay .element-rotate-stem {
  top: -20px !important;
  width: 1px !important;
  height: 20px !important;
  background: #6b7280 !important;
  box-shadow: none !important;
}

html body #appShell #step-edit #slideCanvas .selection-overlay .element-rotate-handle {
  top: -48px !important;
  display: flex !important;
  width: 28px !important;
  height: 28px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #5f6368 !important;
  box-shadow: none !important;
  font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif !important;
}

html body #appShell #step-edit #slideCanvas .selection-overlay .element-rotate-handle::before {
  content: "⟳";
  display: block;
  font-size: 28px;
  line-height: 1;
}

html body #appShell #step-edit #slideCanvas .slide-el.text.editing {
  outline: 1px dashed #5f6368 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

html body #appShell #step-edit #slideCanvas .slide-el.text.editing:focus {
  box-shadow: none !important;
}

/* UI polish v14: keep canvas text editing faithful to the selected PPT/design object. */
html body #appShell #step-edit #slideCanvas textarea.slide-el.text.editing {
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--canvas-text-color, #1f2937) !important;
  -webkit-text-fill-color: var(--canvas-text-color, #1f2937) !important;
  font-family: var(--canvas-text-font-family, "Microsoft YaHei") !important;
  font-size: var(--canvas-text-font-size, inherit) !important;
  font-style: var(--canvas-text-font-style, normal) !important;
  font-weight: var(--canvas-text-font-weight, 400) !important;
  letter-spacing: var(--canvas-text-letter-spacing, 0px) !important;
  line-height: var(--canvas-text-line-height, 1.2) !important;
  padding: var(--canvas-text-padding, .4px) !important;
  text-align: var(--canvas-text-align, left) !important;
  text-decoration: var(--canvas-text-decoration, none) !important;
  white-space: pre-wrap !important;
}

html body #appShell #step-edit #slideCanvas textarea.slide-el.text.source-canvas-copy-layer.editing {
  background: transparent !important;
  background-clip: border-box !important;
  color: var(--canvas-text-color, #1f2937) !important;
  -webkit-text-fill-color: var(--canvas-text-color, #1f2937) !important;
  text-shadow: none !important;
  caret-color: var(--neutral-accent, #a86f25) !important;
  opacity: 1 !important;
}

/* Native PPT text replaces removed glyphs; no painted masks or duplicate rows. */
html:root body #appShell #step-edit .slide-el.text.source-canvas-copy-layer.source-text-live {
  color: var(--canvas-text-color, #1f2937) !important;
  -webkit-text-fill-color: var(--canvas-text-color, #1f2937) !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html:root body #appShell #step-edit .slide-el.text.source-canvas-copy-layer.source-text-live .slide-text-content {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  white-space: pre-wrap !important;
}

html:root body #appShell #step-edit .slide-el.text.source-canvas-copy-layer:not(.source-text-live):not(.editing) {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: transparent !important;
}

html:root body #appShell #step-edit .slide-el.text.source-canvas-copy-layer:not(.source-text-live):not(.editing) .slide-text-content {
  opacity: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

html:root body #appShell #step-edit #slideCanvas[aria-busy="true"] {
  cursor: progress;
}

/* Source text has its own transparent native artwork, never a baked duplicate. */
html:root body #appShell #step-edit .slide-el.text.source-native-object:not(.editing) {
  overflow: visible !important;
  opacity: 1 !important;
  background: transparent !important;
}

html:root body #appShell #step-edit .source-native-sprite {
  position: absolute !important;
  display: block !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  pointer-events: none !important;
  user-select: none;
  opacity: 1 !important;
}

html:root body #appShell #step-edit .slide-el.text.source-native-object.has-native-sprite:not(.editing) .slide-text-content {
  visibility: hidden !important;
  opacity: 0 !important;
}

html:root body #appShell #step-edit .source-native-edit-fill {
  overflow: visible;
  pointer-events: none;
  background: transparent !important;
}

.source-native-load-status {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 10000;
  padding: 9px 16px;
  border: 1px solid color-mix(in srgb, var(--neutral-accent) 35%, var(--neutral-line));
  border-radius: 8px;
  background: var(--neutral-accent-soft);
  color: var(--neutral-accent-strong, #88551a);
  font: 13px/1.4 "Microsoft YaHei", sans-serif;
  pointer-events: none;
}

#inspectorBody .native-object-controls {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px 0;
  border-bottom: 1px solid #e2e8f0;
}

#inspectorBody .native-object-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#inspectorBody .native-object-controls label {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

#inspectorBody .native-object-controls :is(input, select, textarea) {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

#inspectorBody .native-color-control {
  display: flex;
  align-items: center;
  gap: 6px;
}

#inspectorBody .native-color-control input[type="color"] {
  flex: 0 0 36px;
  width: 36px;
  height: 32px;
  padding: 2px;
}

#inspectorBody .native-color-control button {
  min-height: 32px;
  padding: 4px 7px;
  white-space: nowrap;
}

#inspectorBody .native-control-hint {
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
}

#inspectorBody .native-table-scroll {
  max-width: 100%;
  max-height: 360px;
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

#inspectorBody .native-cell-editor {
  border-collapse: collapse;
  width: 100%;
}

#inspectorBody .native-cell-editor td {
  padding: 4px;
  border: 1px solid #e2e8f0;
  vertical-align: top;
}

#inspectorBody .native-cell-editor textarea {
  min-width: 105px;
  resize: vertical;
}

#inspectorBody .native-cell-editor textarea:disabled {
  background: #f1f5f9;
  color: #64748b;
  cursor: default;
}

html:root body #appShell #step-edit .slide-el.source-native-artwork {
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html:root body #appShell #step-edit .source-native-artwork > .source-native-sprite {
  transform: none !important;
  filter: none !important;
  border-radius: 0 !important;
}

.assistant-stage-conversation-result .assistant-design-download-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 16px 0 8px;
}

/* Export is a primary next step: keep it visibly actionable even when the
   editor's broad link/theme rules are loaded after the assistant styles. */
html:root body #assistantDrawer #assistantMessages .assistant-stage-conversation-result a.assistant-design-pptx-download {
  display: inline-flex !important;
  flex: 0 0 auto;
  min-height: 38px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 1px solid var(--neutral-accent, #a86f25) !important;
  border-radius: 8px !important;
  background: var(--neutral-accent, #a86f25) !important;
  color: #fff !important;
  font-weight: 650;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

html:root body #assistantDrawer #assistantMessages .assistant-stage-conversation-result a.assistant-design-pptx-download:hover,
html:root body #assistantDrawer #assistantMessages .assistant-stage-conversation-result a.assistant-design-pptx-download:focus-visible {
  border-color: var(--neutral-accent-strong, #88551a) !important;
  background: var(--neutral-accent-strong, #88551a) !important;
  color: #fff !important;
  outline: none;
  transform: translateY(-1px);
}

html:root body #assistantDrawer #assistantMessages .assistant-stage-conversation-result a.assistant-design-pptx-download:active {
  transform: translateY(0);
}

html:root body #assistantDrawer #assistantMessages .assistant-stage-conversation-result a.assistant-design-pptx-download:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 3px;
}

html:root body #assistantDrawer #assistantMessages .assistant-stage-conversation-result a.assistant-design-pptx-download svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke-width: 2;
}

.assistant-stage-conversation-result .assistant-design-download-actions + small {
  display: block;
  color: #94a3b8;
}

.assistant-design-repair-form { margin-top: 16px; padding: 12px; border: 1px solid #334155; border-radius: 8px; }
.assistant-design-repair-form summary { cursor: pointer; }
.assistant-design-repair-form label { display: grid; gap: 6px; margin-top: 12px; }
.assistant-design-repair-form input, .assistant-design-repair-form textarea { width: 100%; box-sizing: border-box; padding: 10px; color: inherit; background: transparent; border: 1px solid #475569; border-radius: 6px; }
.assistant-design-repair-form textarea { min-height: 90px; resize: vertical; }
.assistant-design-repair-form button { margin-top: 10px; padding: 9px 16px; border: 0; border-radius: 6px; background: var(--neutral-accent, #a86f25); color: #fff; cursor: pointer; }

html:root body #assistantDrawer #assistantMessages .assistant-design-repair-form button.primary {
  background: var(--neutral-accent, #a86f25) !important;
  border: 1px solid var(--neutral-accent, #a86f25) !important;
  color: #fff !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-repair-form button.primary:hover:not(:disabled),
html:root body #assistantDrawer #assistantMessages .assistant-design-repair-form button.primary:focus-visible {
  background: var(--neutral-accent-strong, #88551a) !important;
  border-color: var(--neutral-accent-strong, #88551a) !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-repair-form button.primary:disabled {
  opacity: .5;
  cursor: not-allowed;
}

html body #assistantDrawer #assistantComposer .assistant-secondary-tools > #assistantPromptEnhanceBtn,
html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-secondary-tools > #assistantPromptEnhanceBtn {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 118px !important;
  max-width: none !important;
  height: 30px !important;
  padding: 0 8px !important;
  gap: 5px !important;
  border-radius: 6px !important;
  color: var(--neutral-accent, #a86f25) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html body #assistantDrawer #assistantComposer #assistantPromptEnhanceBtn > span {
  display: inline !important;
  color: inherit !important;
}

html body #assistantDrawer #assistantComposer .assistant-secondary-tools > #assistantPromptRestoreBtn.hidden,
html body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-secondary-tools > #assistantPromptRestoreBtn.hidden {
  display: none !important;
}

html body #assistantPromptEnhanceDialog {
  position: fixed;
  box-sizing: border-box;
  width: min(620px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 20px;
  overflow: auto;
  border: 1px solid var(--theme-line, #d7dce5);
  border-radius: 8px;
  background: var(--theme-panel, #ffffff);
  color: var(--theme-text, #20242b);
  box-shadow: 0 18px 60px rgb(0 0 0 / 24%);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
}

html body #assistantPromptEnhanceDialog[open] { display: grid; gap: 14px; }
html body #assistantPromptEnhanceDialog::backdrop { background: rgb(0 0 0 / 38%); }
html body #assistantPromptEnhanceDialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html body #assistantPromptEnhanceDialog header strong { font-size: 16px; }
html body #assistantPromptEnhanceDialog header button { flex: 0 0 30px; width: 30px; height: 30px; }
html body #assistantPromptEnhanceDialog .assistant-prompt-enhance-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
html body #assistantPromptEnhanceDialog .assistant-prompt-enhance-modes button {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 38px;
  gap: 7px;
  padding: 6px;
  border: 1px solid var(--theme-line, #d7dce5);
  border-radius: 0;
  color: inherit;
  background: transparent;
  font: inherit;
}
html body #assistantPromptEnhanceDialog .assistant-prompt-enhance-modes button:first-child { border-radius: 6px 0 0 6px; }
html body #assistantPromptEnhanceDialog .assistant-prompt-enhance-modes button:last-child { border-radius: 0 6px 6px 0; }
html body #assistantPromptEnhanceDialog .assistant-prompt-enhance-modes button[aria-pressed="true"] { color: var(--neutral-accent, #a86f25); background: var(--neutral-accent-soft); border-color: var(--neutral-accent, #a86f25); }
html body #assistantPromptEnhanceDialog svg { width: 16px; height: 16px; flex-shrink: 0; }
html body #assistantPromptEnhanceDialog summary { cursor: pointer; }
html body #assistantPromptEnhanceDialog pre { max-height: 130px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
html body #assistantPromptEnhanceDialog .assistant-prompt-enhance-result { display: grid; min-width: 0; gap: 6px; }
html body #assistantPromptEnhanceResult {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 230px;
  min-height: 120px;
  max-height: 40dvh;
  padding: 12px;
  resize: vertical;
  border: 1px solid var(--theme-line, #d7dce5);
  border-radius: 6px;
  color: inherit;
  background: var(--theme-panel, #ffffff);
  font: inherit;
  line-height: 1.65;
}
html body #assistantPromptEnhanceStatus { min-height: 20px; margin: 0; color: var(--theme-text-secondary, #606873); white-space: pre-wrap; overflow-wrap: anywhere; }
html body #assistantPromptEnhanceStatus.is-error { color: #c24135; }
html body #assistantPromptEnhanceDialog footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 0; }
html body #assistantPromptEnhanceDialog footer button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; gap: 6px; padding: 7px 13px; border-radius: 6px; font-size: 13px; }
html body #assistantPromptEnhanceDialog button:disabled { opacity: .5; cursor: not-allowed; }
html body #assistantPromptEnhanceDialog :is(button, textarea):focus-visible { outline: 2px solid var(--neutral-accent, #a86f25); outline-offset: 2px; }
html:root[data-theme="dark"] body #assistantPromptEnhanceDialog { background: #202124; color: #f1f2f4; border-color: #484a50; }
html:root[data-theme="dark"] body #assistantPromptEnhanceResult { background: #17181b; border-color: #484a50; }
html:root[data-theme="dark"] body #assistantPromptEnhanceDialog .assistant-prompt-enhance-modes button[aria-pressed="true"] { background: #22354c; color: #9ccaff; border-color: #5899e8; }
html:root[data-theme="dark"] body #assistantPromptEnhanceStatus.is-error { color: #ffaaa1; }

@media (max-width: 480px) {
  html body #assistantPromptEnhanceDialog { padding: 14px; }
  html body #assistantPromptEnhanceDialog[open] { gap: 10px; }
  html body #assistantPromptEnhanceResult { height: 180px; }
}

/* The assistant's global transparent-surface rules also reach nested native
   dialogs. Pin this modal's own surface and viewport placement explicitly. */
html:root body #assistantDrawer #assistantPromptEnhanceDialog {
  position: fixed !important;
  inset: 0 !important;
  width: min(620px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  height: fit-content !important;
  max-height: calc(100dvh - 32px) !important;
  margin: auto !important;
  padding: 20px !important;
  overflow: auto !important;
  transform: none !important;
  border: 1px solid #cbd2dc !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #20242b !important;
  opacity: 1 !important;
  box-shadow: 0 18px 60px rgb(0 0 0 / 30%) !important;
}
html:root body #assistantDrawer #assistantPromptEnhanceDialog[open] { display: grid !important; gap: 14px !important; }
html:root body #assistantDrawer #assistantPromptEnhanceDialog:not([open]) { display: none !important; }
html:root body #assistantDrawer #assistantPromptEnhanceDialog::backdrop { background: rgb(0 0 0 / 48%) !important; }
html:root body #assistantDrawer #assistantPromptEnhanceDialog > header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 0 !important; background: transparent !important; }
html:root body #assistantDrawer #assistantPromptEnhanceDialog header strong { font-size: 16px !important; line-height: 1.5 !important; color: inherit !important; }
html:root body #assistantDrawer #assistantPromptEnhanceDialog .assistant-prompt-enhance-hint { margin: 0 !important; color: inherit !important; font-size: 13px !important; line-height: 1.6 !important; opacity: .85; }
html:root body #assistantDrawer #assistantPromptEnhanceDialog :is(pre, summary, label, label > span) { color: inherit !important; font-size: 13px !important; line-height: 1.5 !important; }
html:root body #assistantDrawer #assistantPromptEnhanceResult {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 230px !important;
  min-height: 120px !important;
  max-height: 40dvh !important;
  padding: 12px !important;
  border: 1px solid #cbd2dc !important;
  border-radius: 6px !important;
  color: #20242b !important;
  background: #f8fafc !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  opacity: 1 !important;
}
html:root body #assistantDrawer #assistantPromptEnhanceDialog .assistant-prompt-enhance-modes button {
  min-height: 38px !important;
  padding: 6px !important;
  border: 1px solid #cbd2dc !important;
  background: #f8fafc !important;
  color: #344054 !important;
  font-size: 13px !important;
}
html:root body #assistantDrawer #assistantPromptEnhanceDialog .assistant-prompt-enhance-modes button[aria-pressed="true"] { background: var(--neutral-accent-soft) !important; color: var(--neutral-accent-strong, #88551a) !important; border-color: var(--neutral-accent-strong, #88551a) !important; }
html:root body #assistantDrawer #assistantPromptEnhanceDialog footer { display: flex !important; justify-content: flex-end !important; gap: 8px !important; padding: 0 !important; background: transparent !important; }
html:root body #assistantDrawer #assistantPromptEnhanceDialog footer button { min-height: 36px !important; padding: 7px 13px !important; border: 1px solid #cbd2dc !important; border-radius: 6px !important; background: #f8fafc !important; color: #344054 !important; font-size: 13px !important; }
html:root body #assistantDrawer #assistantPromptEnhanceDialog footer #assistantPromptEnhanceAdoptBtn { background: var(--neutral-accent, #a86f25) !important; border-color: var(--neutral-accent, #a86f25) !important; color: #ffffff !important; }
html:root[data-theme="dark"] body #assistantDrawer #assistantPromptEnhanceDialog { background: #202124 !important; color: #f1f2f4 !important; border-color: #484a50 !important; }
html:root[data-theme="dark"] body #assistantDrawer #assistantPromptEnhanceResult { background: #17181b !important; color: #f1f2f4 !important; border-color: #484a50 !important; }
html:root[data-theme="dark"] body #assistantDrawer #assistantPromptEnhanceDialog .assistant-prompt-enhance-modes button,
html:root[data-theme="dark"] body #assistantDrawer #assistantPromptEnhanceDialog footer button { background: #303238 !important; color: #e7eaf0 !important; border-color: #51545c !important; }
html:root[data-theme="dark"] body #assistantDrawer #assistantPromptEnhanceDialog .assistant-prompt-enhance-modes button[aria-pressed="true"] { background: #223b5c !important; color: #a8d3ff !important; border-color: #5899e8 !important; }
html:root[data-theme="dark"] body #assistantDrawer #assistantPromptEnhanceDialog footer #assistantPromptEnhanceAdoptBtn { background: var(--neutral-accent, #a86f25) !important; border-color: var(--neutral-accent-strong, #88551a) !important; color: #ffffff !important; }
html:root body #assistantDrawer #assistantComposer .assistant-secondary-tools { opacity: 1 !important; }
html:root body #assistantDrawer #assistantComposer .assistant-secondary-tools > #assistantPromptEnhanceBtn,
html:root body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer .assistant-secondary-tools > #assistantPromptEnhanceBtn {
  order: 9 !important;
  background: var(--neutral-accent, #a86f25) !important;
  color: #ffffff !important;
  border: 1px solid var(--neutral-accent-strong, #88551a) !important;
  opacity: 1 !important;
}
html:root body #assistantDrawer #assistantComposer #assistantPromptEnhanceBtn:hover { background: var(--neutral-accent-strong, #88551a) !important; }
html:root body #assistantDrawer #assistantMessages #assistantImageGenerationProgressCanvases .assistant-failed-page-actions {
  position: relative !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: auto !important;
  padding-top: 12px !important;
  background: transparent !important;
}
html:root body #assistantDrawer #assistantMessages #assistantImageGenerationProgressCanvases .assistant-failed-page-actions > .assistant-failed-page-icon {
  display: inline-flex !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #77adff !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  background: var(--neutral-accent, #a86f25) !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
html:root body #assistantDrawer #assistantMessages #assistantImageGenerationProgressCanvases .assistant-failed-page-icon svg {
  display: block !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  color: #ffffff !important;
  stroke: currentColor !important;
  background: transparent !important;
  opacity: 1 !important;
}
html:root body #assistantDrawer #assistantMessages #assistantImageGenerationProgressCanvases .assistant-failed-page-actions > .assistant-failed-page-icon:hover:not(:disabled) { background: var(--neutral-accent-strong, #88551a) !important; }
html:root body #assistantDrawer #assistantMessages #assistantImageGenerationProgressCanvases .assistant-failed-page-actions > .assistant-failed-page-icon:disabled { opacity: .45 !important; }
html:root body #assistantDrawer #assistantMessages #assistantImageGenerationProgressCanvases .assistant-failed-page-model-menu {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  flex: 1 0 100% !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: min(240px, 35dvh) !important;
  overflow: auto !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 1px solid #bdcde5 !important;
  border-radius: 6px !important;
  background: #f7faff !important;
  background-image: none !important;
  color: #24364f !important;
  opacity: 1 !important;
  box-shadow: none !important;
  isolation: isolate !important;
}
html:root body #assistantDrawer #assistantMessages #assistantImageGenerationProgressCanvases .assistant-failed-page-model-menu strong { padding: 5px 7px !important; color: inherit !important; font-size: 11px !important; }
html:root body #assistantDrawer #assistantMessages #assistantImageGenerationProgressCanvases .assistant-failed-page-model-menu button {
  display: block !important;
  min-width: 0 !important;
  min-height: 34px !important;
  width: 100% !important;
  padding: 7px !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: #24364f !important;
  background: #f7faff !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  text-align: left !important;
  white-space: normal !important;
  opacity: 1 !important;
}
html:root body #assistantDrawer #assistantMessages #assistantImageGenerationProgressCanvases .assistant-failed-page-model-menu button:is(:hover, :focus-visible) { background: #e0edff !important; }
html:root[data-theme="dark"] body #assistantDrawer #assistantMessages #assistantImageGenerationProgressCanvases .assistant-failed-page-model-menu { background: #252830 !important; color: #e5edf9 !important; border-color: #586477 !important; }
html:root[data-theme="dark"] body #assistantDrawer #assistantMessages #assistantImageGenerationProgressCanvases .assistant-failed-page-model-menu button { background: #252830 !important; color: #e5edf9 !important; }
html:root[data-theme="dark"] body #assistantDrawer #assistantMessages #assistantImageGenerationProgressCanvases .assistant-failed-page-model-menu button:is(:hover, :focus-visible) { background: #344a6d !important; }
@media (max-width: 480px) {
  html:root body #assistantDrawer #assistantPromptEnhanceDialog { padding: 14px !important; }
  html:root body #assistantDrawer #assistantPromptEnhanceResult { height: 180px !important; }
}

/* One clear next step per task; secondary actions remain discoverable. */
html:root body #assistantDrawer .assistant-task-card > footer {
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
html:root body #assistantDrawer .assistant-task-card .assistant-task-progress-caption {
  flex: 0 1 auto !important;
  padding-top: 8px !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  white-space: normal !important;
}
html:root body #assistantDrawer .assistant-task-card .assistant-stage-actions {
  display: flex !important;
  flex: 1 1 230px !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
}
html:root body #assistantDrawer .assistant-task-card .assistant-primary-next-action {
  min-height: 36px !important;
  padding: 8px 14px !important;
  border: 1px solid var(--neutral-accent-strong, #88551a) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  background: var(--neutral-accent, #a86f25) !important;
  background-image: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  opacity: 1 !important;
}
html:root body #assistantDrawer .assistant-task-card .assistant-primary-next-action:hover:not(:disabled) { background: var(--neutral-accent-strong, #88551a) !important; }
html:root body #assistantDrawer .assistant-task-card .assistant-primary-next-action:disabled { opacity: .5 !important; cursor: wait !important; }
html:root body #assistantDrawer .assistant-task-card .assistant-task-more-actions {
  display: block !important;
  position: relative !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html:root body #assistantDrawer .assistant-task-card .assistant-task-more-actions > summary {
  min-height: 36px !important;
  box-sizing: border-box !important;
  padding: 8px 10px !important;
  border: 1px solid var(--v2-line, #cbd2dc) !important;
  border-radius: 6px !important;
  background: var(--v2-panel-soft, #f8fafc) !important;
  color: var(--v2-text, #344054) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
}
html:root body #assistantDrawer .assistant-task-card .assistant-task-more-actions > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  margin-top: 6px !important;
  padding: 6px !important;
  border: 1px solid var(--v2-line, #cbd2dc) !important;
  border-radius: 6px !important;
  background: var(--v2-panel-soft, #f8fafc) !important;
}
html:root body #assistantDrawer .assistant-task-card .assistant-task-more-actions:not([open]) > div { display: none !important; }
html:root body #assistantDrawer .assistant-task-card .assistant-secondary-task-action {
  min-height: 34px !important;
  padding: 7px 10px !important;
  color: var(--v2-text, #344054) !important;
  background: var(--v2-panel-soft, #f8fafc) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  white-space: normal !important;
}
html:root body #assistantDrawer .assistant-task-card :is(.assistant-task-more-actions > summary, .assistant-primary-next-action, .assistant-secondary-task-action):focus-visible {
  outline: 2px solid #70a5ff !important;
  outline-offset: 2px !important;
}

/* Desktop assistant entry: circular icon, separate from canvas zoom. */
html:root body #assistantFloatLauncher.assistant-float-launcher {
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  right: 20px !important;
  bottom: var(--assistant-launcher-bottom, 20px) !important;
  z-index: 1490 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  aspect-ratio: 1 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid #4385ef !important;
  border-radius: 50% !important;
  background: var(--neutral-accent, #a86f25) !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 5px 16px rgb(0 0 0 / 18%) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  transform: none !important;
  animation: none !important;
  transition: background-color .15s ease !important;
}
html:root body #assistantFloatLauncher.assistant-float-launcher::after { display: none !important; }
html:root body #assistantFloatLauncher.assistant-float-launcher:hover { background: var(--neutral-accent-strong, #88551a) !important; transform: none !important; }
html:root body #assistantFloatLauncher.assistant-float-launcher:focus-visible { outline: 2px solid #8ab6ff !important; outline-offset: 3px !important; }
html:root body #assistantFloatLauncher.assistant-float-launcher :is(svg, .fluent-icon-shell) { flex: 0 0 24px !important; width: 24px !important; height: 24px !important; color: #ffffff !important; }
html:root body #assistantFloatLauncher .assistant-launcher-label { display: none !important; }
html:root body #assistantFloatLauncher .assistant-launcher-notice {
  position: absolute !important;
  right: 0 !important;
  bottom: calc(100% + 8px) !important;
  display: block !important;
  width: max-content !important;
  max-width: 180px !important;
  padding: 6px 9px !important;
  border: 1px solid var(--neutral-line-strong) !important;
  border-radius: 6px !important;
  background: var(--neutral-accent-soft) !important;
  color: var(--neutral-accent-strong) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  animation: none !important;
}
html:root body #assistantFloatLauncher .assistant-launcher-notice[hidden],
html:root body #assistantFloatLauncher.assistant-float-launcher.hidden,
html:root body[data-active-step="create"][data-project-home-mode="chat"] #assistantFloatLauncher.assistant-float-launcher,
html:root body:has(dialog[open]) #assistantFloatLauncher.assistant-float-launcher,
html:root body.desktop-modal-open #assistantFloatLauncher.assistant-float-launcher,
html:root body.new-document-open #assistantFloatLauncher.assistant-float-launcher,
html:root body:has(#assistantToolsDrawer.open, #deliveryDrawer.open) #assistantFloatLauncher.assistant-float-launcher { display: none !important; }

/* Current editing scope stays concise alongside the assistant context. */
html:root body #assistantDrawer #assistantEditContext.assistant-edit-context {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 8px 12px !important;
  color: var(--v2-text, #24364f) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}
html:root body #assistantDrawer #assistantEditContext :is(select, .assistant-select-trigger) { min-height: 30px !important; max-width: 220px !important; font-size: 12px !important; }
html:root body #assistantDrawer #assistantContextActions.assistant-context-actions { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding: 0 12px 8px !important; }
html:root body #assistantDrawer #assistantContextActions button { min-height: 30px !important; padding: 6px 9px !important; border: 1px solid var(--v2-line, #cbd2dc) !important; border-radius: 6px !important; background: var(--v2-panel-soft, #f8fafc) !important; color: var(--v2-text, #24364f) !important; font-size: 12px !important; }
html:root body #assistantDrawer #assistantContextActions button:hover:not(:disabled) { border-color: var(--neutral-accent) !important; color: var(--neutral-accent) !important; }
html:root body #assistantDrawer :is(#assistantEditContext, #assistantContextActions).hidden { display: none !important; }
/* The fixed entry opens a right sidebar while the canvas remains usable. */
html:root body #assistantDrawer.assistant-drawer.assistant-sidebar-entry:not(.embedded) {
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 88px) !important;
  margin: 0 !important;
  transform: none !important;
  border-radius: 8px !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry .assistant-resize-handle,
html:root body #assistantDrawer.assistant-sidebar-entry .assistant-drag-grip { display: none !important; }
html:root body #assistantDrawer.assistant-sidebar-entry #assistantDragHandle { cursor: default !important; }
html:root body:has(#assistantDrawer.assistant-sidebar-entry) #assistantBackdrop {
  display: none !important;
  pointer-events: none !important;
  background: transparent !important;
}
/* Keep edit scope alongside context instead of letting legacy grid auto-place it. */
html:root body #assistantDrawer > .assistant-context-block { grid-row: 4 !important; min-width: 0 !important; }
html:root body #assistantDrawer.embedded > .assistant-context-block { grid-row: 3 !important; margin-left: 0 !important; }
html:root body #assistantDrawer .assistant-context-block > .assistant-context { margin: 0 !important; width: 100% !important; box-sizing: border-box !important; }
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) {
  --assistant-rail-width: 0px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > * {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  grid-row: auto !important;
  order: 0 !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > .assistant-side-nav { display: none !important; }
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > .assistant-header { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; width: 100% !important; min-height: 52px !important; height: 52px !important; padding: 8px 10px !important; }
html:root body #assistantDrawer.assistant-sidebar-entry .assistant-heading { display: flex !important; align-items: center !important; flex: 1 1 auto !important; min-width: 0 !important; gap: 8px !important; }
html:root body #assistantDrawer.assistant-sidebar-entry .assistant-heading > div { min-width: 0 !important; }
html:root body #assistantDrawer.assistant-sidebar-entry .assistant-heading h2 { font-size: 14px !important; line-height: 1.4 !important; white-space: nowrap !important; margin: 0 !important; }
html:root body #assistantDrawer.assistant-sidebar-entry .assistant-heading small { font-size: 10px !important; line-height: 1.4 !important; white-space: nowrap !important; }
html:root body #assistantDrawer.assistant-sidebar-entry .assistant-header-actions { display: flex !important; flex: 0 0 auto !important; gap: 2px !important; }
html:root body #assistantDrawer.assistant-sidebar-entry .assistant-header-actions button { flex: 0 0 28px !important; width: 28px !important; min-width: 28px !important; height: 28px !important; padding: 0 !important; }
html:root body #assistantDrawer.assistant-sidebar-entry .assistant-header-actions :is(svg, .fluent-icon-shell) { width: 16px !important; height: 16px !important; }
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > .assistant-context-block { order: 0 !important; padding-bottom: 4px !important; }
html:root body #assistantDrawer.assistant-sidebar-entry #assistantEditContext { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 4px 8px !important; padding: 6px 10px !important; }
html:root body #assistantDrawer.assistant-sidebar-entry #assistantEditContext > strong { min-width: 0 !important; font-size: 12px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
html:root body #assistantDrawer.assistant-sidebar-entry #assistantEditContext > label { display: flex !important; flex-flow: row nowrap !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important; font-size: 11px !important; }
html:root body #assistantDrawer.assistant-sidebar-entry #assistantEditContext > label :is(select, .assistant-select-trigger) { width: 146px !important; min-width: 0 !important; max-width: 146px !important; }
html:root body #assistantDrawer.assistant-sidebar-entry #assistantEditContext > small { grid-column: 1 / -1 !important; font-size: 11px !important; line-height: 1.4 !important; color: var(--v2-faint, #7a8491) !important; }
html:root body #assistantDrawer.assistant-sidebar-entry #assistantContextActions { padding: 0 10px 6px !important; }
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantMessages {
  flex: 1 1 180px !important;
  min-height: 200px !important;
  width: 100% !important;
  padding: 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > :is(#assistantTasks, #assistantPdfRedesign) { max-height: 128px !important; overflow: auto !important; }
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantRecommendations:not(.hidden) { max-height: 48px !important; }
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantAttachments { max-height: 68px !important; overflow: auto !important; }
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantComposer {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  width: calc(100% - 16px) !important;
  max-width: calc(100% - 16px) !important;
  min-height: 116px !important;
  height: 116px !important;
  max-height: 164px !important;
  margin: 6px 8px 8px !important;
  padding: 8px !important;
  grid-template-columns: minmax(0, 1fr) 34px 38px !important;
  grid-template-rows: minmax(60px, auto) 34px !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry #assistantComposer > .assistant-composer-tools { min-width: 0 !important; width: 100% !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; flex-flow: row nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; }
html:root body #assistantDrawer.assistant-sidebar-entry #assistantComposer > #assistantInput { min-height: 54px !important; max-height: 96px !important; padding: 8px !important; }
html:root body #assistantDrawer.assistant-sidebar-entry #assistantComposer > #assistantSendBtn { width: 36px !important; height: 36px !important; }
html:root body #assistantDrawer.assistant-sidebar-entry #assistantComposer > #assistantVoiceInputBtn { width: 32px !important; height: 32px !important; }
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > .hidden { display: none !important; }

/* In the small sidebar the editing scope replaces repeated legacy summaries. */
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) :is(#assistantContext, #assistantBriefSummary, #assistantSuggestions),
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > .assistant-brief-actions,
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantVoiceStatus[data-state="idle"] { display: none !important; }
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantSideWorkspace { min-height: 34px !important; height: 34px !important; max-height: 34px !important; padding: 4px 10px !important; gap: 6px !important; }
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantVoiceStatus:not([data-state="idle"]) { min-height: 0 !important; max-height: 48px !important; padding: 5px 10px !important; overflow: auto !important; }
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantTasks { flex: 0 1 auto !important; min-height: 0 !important; max-height: 92px !important; overflow: auto !important; }
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantPdfRedesign { flex: 0 1 auto !important; min-height: 0 !important; max-height: 92px !important; overflow: auto !important; }
html:root body #assistantDrawer.assistant-sidebar-entry :is(#assistantEditContext, #assistantContextActions).hidden { display: none !important; }
/* Sidebar tools occupy two readable rows instead of overlapping fixed slots. */
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantComposer {
  min-height: 148px !important;
  height: 148px !important;
  max-height: 148px !important;
  grid-template-rows: minmax(58px, 1fr) 64px !important;
  gap: 6px !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry #assistantComposer > .assistant-composer-tools {
  display: flex !important;
  flex-flow: row wrap !important;
  align-content: flex-start !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  overflow: visible !important;
  padding: 0 !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry #assistantComposer .assistant-composer-tools > :is(.assistant-composer-copy-tools, .assistant-quick-tools-wrap, #assistantModeSwitch, #assistantImageSettingsBtn, #assistantAdvancedOptionsBtn, .assistant-secondary-tools) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  order: 0 !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry #assistantComposer :is(#assistantCopyModeTrigger, #assistantQuickToolsBtn, #assistantModeTrigger, #assistantImageSettingsBtn, #assistantAdvancedOptionsBtn) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 4px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 6px !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry #assistantComposer #assistantCopyModeTrigger { width: 92px !important; }
html:root body #assistantDrawer.assistant-sidebar-entry #assistantComposer #assistantQuickToolsBtn { width: 74px !important; }
html:root body #assistantDrawer.assistant-sidebar-entry #assistantComposer #assistantModeTrigger { width: 82px !important; }
html:root body #assistantDrawer.assistant-sidebar-entry #assistantComposer #assistantImageSettingsBtn { width: 78px !important; padding: 0 6px !important; }
html:root body #assistantDrawer.assistant-sidebar-entry #assistantComposer #assistantAdvancedOptionsBtn { width: 60px !important; padding: 0 6px !important; }
html:root body #assistantDrawer.assistant-sidebar-entry #assistantComposer #assistantAdvancedOptionsSummary { display: none !important; }
html:root body #assistantDrawer.assistant-sidebar-entry #assistantComposer .assistant-secondary-tools {
  flex-basis: 100% !important;
  width: 100% !important;
  justify-content: flex-end !important;
  gap: 5px !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry #assistantComposer .assistant-secondary-tools > button {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry #assistantComposer .assistant-secondary-tools > #assistantPromptEnhanceBtn {
  flex: 0 0 130px !important;
  width: 130px !important;
  min-width: 130px !important;
  max-width: 130px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry #assistantComposer .assistant-composer-tools :is(#assistantModeSwitch, #assistantModeTrigger) :is(svg, .fluent-icon-shell, .assistant-mode-trigger-icon) { flex: 0 0 14px !important; width: 14px !important; height: 14px !important; }
html:root body #assistantDrawer.assistant-sidebar-entry #assistantComposer .assistant-composer-tools > .hidden,
html:root body #assistantDrawer.assistant-sidebar-entry #assistantComposer .assistant-secondary-tools > .hidden { display: none !important; }

/* BYOK model profiles: compact controls in both creation entry points. */
.smart-create-model-wrap { position: relative; min-width: 0; }
.smart-create-model-wrap.hidden,
.byok-model-switch-panel.hidden,
html:root body #assistantDrawer #assistantImageModePanel .assistant-legacy-image-settings.hidden { display: none !important; }
#byokProfileLabelField.hidden,
#byokReuseCurrentField.hidden,
#addByokProfileBtn[hidden],
#clearByokConfigBtn[hidden] { display: none !important; }
.byok-reuse-current-field { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; min-width: 0; margin: 1px 0 3px; padding: 9px 11px; border: 1px solid var(--theme-line, var(--v2-line, #d5dce7)); border-radius: 9px; background: var(--theme-panel-soft, var(--v2-panel-soft, #f6f8fb)); cursor: pointer; }
.byok-reuse-current-field > input { flex: 0 0 auto; width: 15px; height: 15px; accent-color: var(--neutral-accent, #a86f25); }
.byok-reuse-current-field > span { min-width: 0; font-size: 12px; line-height: 1.4; }
.byok-settings-grid :is(input, select):disabled { opacity: .72; cursor: not-allowed; background: var(--theme-panel-soft, var(--v2-panel-soft, #f3f5f8)); }
.smart-create-model-btn { max-width: min(260px, 26vw); min-width: 98px; border-color: color-mix(in srgb, var(--neutral-accent, #a86f25) 35%, var(--theme-line, var(--v2-line, #d5dce7))); background: color-mix(in srgb, var(--neutral-accent, #a86f25) 9%, var(--theme-panel, var(--v2-panel, #fff))); }
.smart-create-model-btn > span { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.smart-create-model-btn > :is(svg, .fluent-icon-shell) { flex: 0 0 15px; }
.byok-model-trigger-chevron { flex: 0 0 13px; width: 13px; height: 13px; transition: transform .18s ease; }
[aria-expanded="true"] > .byok-model-trigger-chevron { transform: rotate(180deg); }
.smart-create-model-panel {
  position: absolute;
  z-index: 60;
  left: 0;
  top: calc(100% + 8px);
  bottom: auto;
  width: min(360px, calc(100vw - 32px));
  max-height: var(--byok-popup-max-height, min(560px, 60vh));
  overflow-y: auto;
  border: 1px solid var(--theme-line-strong, var(--v2-line-strong, #404854));
  border-radius: 12px;
  background: var(--theme-panel-raised, var(--v2-panel, #242831));
  box-shadow: 0 16px 38px rgb(0 0 0 / 28%);
}
.smart-create-model-panel.open-up { top: auto; bottom: calc(100% + 8px); }
/* The smart-create picker is mounted on body so the toolbar and home panel
   cannot clip it. app.js supplies viewport coordinates while it is open. */
html:root body #smartCreateModelPanel[data-smart-create-portal="true"] {
  position: fixed !important;
  z-index: 10020 !important;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  box-sizing: border-box !important;
  width: min(360px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(560px, calc(100dvh - 24px)) !important;
  overflow: auto !important;
  isolation: isolate !important;
}
html:root body #smartCreateModelPanel[data-smart-create-portal="true"].hidden {
  display: none !important;
}
.byok-model-switch-panel { display: grid; gap: 12px; color: var(--theme-text, var(--v2-text, #f2f4f8)); }
#assistantByokModelPanel { max-height: min(60vh, 500px); overflow-y: auto; }
.byok-model-switch-head { display: grid; gap: 3px; padding: 12px 11px 2px; }
.byok-model-switch-head strong { font-size: 13px; font-weight: 700; }
.byok-model-switch-head small { color: var(--theme-muted, var(--v2-muted, #a2a9b5)); font-size: 10px; line-height: 1.4; }
.byok-model-switch-kind { display: grid; gap: 6px; min-width: 0; }
.smart-create-model-panel .byok-model-switch-kind { padding: 10px 11px 0; }
.smart-create-model-panel .byok-model-switch-head + .byok-model-switch-kind { padding-top: 0; }
.byok-model-switch-kind > strong { color: var(--theme-muted, var(--v2-muted, #a2a9b5)); font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.byok-model-switch-kind > p { margin: 0; padding: 7px 9px; color: var(--theme-muted, var(--v2-muted, #a2a9b5)); font-size: 11px; }
.byok-model-switch-kind > button {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid var(--theme-line, var(--v2-line, #404854));
  border-radius: 8px;
  background: var(--theme-panel-soft, var(--v2-panel-soft, #2b303a));
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.byok-model-switch-kind > button:not(:disabled):hover,
.byok-model-switch-kind > button:focus-visible { border-color: var(--neutral-accent); background: color-mix(in srgb, var(--neutral-accent, #a86f25) 13%, var(--theme-panel-soft, var(--v2-panel-soft))); outline: none; }
.byok-model-switch-kind > button.is-active { border-color: color-mix(in srgb, var(--neutral-accent, #a86f25) 65%, var(--theme-line, var(--v2-line, #d5dce7))); background: color-mix(in srgb, var(--neutral-accent, #a86f25) 16%, var(--theme-panel-soft, var(--v2-panel-soft))); }
.byok-model-switch-kind > button:disabled { cursor: default; }
.byok-model-switch-kind > button:disabled:not(.is-active) { opacity: .67; }
.byok-model-switch-kind > button > span { display: grid; min-width: 0; gap: 2px; }
.byok-model-switch-kind > button b,
.byok-model-switch-kind > button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.byok-model-switch-kind > button b { font-size: 12px; font-weight: 650; }
.byok-model-switch-kind > button small { color: var(--theme-muted, var(--v2-muted, #a2a9b5)); font-size: 10px; }
.byok-model-switch-kind > button em { flex: 0 0 auto; color: var(--neutral-accent, #a86f25); font-size: 10px; font-style: normal; font-weight: 650; }
.byok-model-switch-kind > button.is-active em { color: #168653; }
.byok-model-switch-panel > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 2px 0; border-top: 1px solid var(--theme-line, var(--v2-line, #404854)); }
.smart-create-model-panel > footer { margin: 0 11px 10px; }
.byok-model-switch-panel > footer > span { min-width: 0; color: var(--theme-muted, var(--v2-muted, #a2a9b5)); font-size: 9px; line-height: 1.35; }
.byok-model-switch-panel > footer > button { flex: 0 0 auto; padding: 6px 9px; border: 1px solid var(--neutral-accent); border-radius: 7px; background: color-mix(in srgb, var(--neutral-accent, #a86f25) 13%, transparent); color: var(--neutral-accent-strong); font: inherit; font-size: 10px; cursor: pointer; }
@media (max-width: 1100px) { .smart-create-model-btn { max-width: 132px; } }
@media (max-width: 720px) { .smart-create-model-panel { left: auto; right: 0; } .smart-create-model-btn { max-width: 116px; } }
html:root body #assistantDrawer #assistantImageModePanel:has(#assistantByokModelPanel:not(.hidden)) { width: min(410px, calc(100% - 16px)); max-height: min(72vh, 620px); overflow-y: auto; }
html:root body #assistantDrawer #assistantImageSettingsBtn > span { min-width: 0; max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:root body #assistantDrawer #assistantImageSettingsBtn > .byok-model-trigger-chevron { flex: 0 0 12px; width: 12px; height: 12px; }
html:root body #assistantDrawer.assistant-sidebar-entry #assistantComposer #assistantImageSettingsBtn { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
html:root body #assistantDrawer #assistantImageSettingsBtn > span { max-width: none; }
/* The model picker is portalled to document.body so the drawer's
   overflow:hidden cannot clip it when it opens above the composer. Its
   viewport coordinates are supplied by positionImageSettingsPanel(). */
html:root body #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] {
  position: fixed !important;
  z-index: 10020 !important;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  box-sizing: border-box !important;
  width: min(410px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(620px, calc(100dvh - 24px)) !important;
  overflow: auto !important;
  isolation: isolate !important;
}
html:root body #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"].hidden {
  display: none !important;
}
html:root:not([data-theme="dark"]) body .smart-create-model-panel { background: #fff; border-color: #c8d7ea; color: #15263d; }
html:root:not([data-theme="dark"]) body .byok-model-switch-kind > button { background: #f7f9fc; border-color: #dce5ef; color: #15263d; }
html:root:not([data-theme="dark"]) body .byok-model-switch-kind > button.is-active { background: #eaf3ff; border-color: #82b5f3; }
html:root[data-theme="dark"] body .smart-create-model-panel { background: #0b192a; border-color: #355579; color: #eaf2fc; }
html:root[data-theme="dark"] body .byok-model-switch-kind > button { background: #142740; border-color: #355579; color: #eaf2fc; }
html:root[data-theme="dark"] body .byok-model-switch-kind > button.is-active { background: #173b66; border-color: #5b9de8; }
html:root[data-theme="dark"] body .byok-model-switch-panel > footer > button { color: #85baff; }
html:root[data-theme="dark"] body .byok-model-switch-kind > button.is-active em { color: #71ddb1; }
html:root[data-theme="dark"] body .byok-model-switch-kind > button em { color: #79b0ff; }
.byok-profile-choice { display: grid; min-width: 0; gap: 6px; }
.byok-profile-choice-row { display: flex; min-width: 0; gap: 6px; }
.byok-profile-choice-row > button,
.byok-discovered-list > button { box-sizing: border-box; border: 1px solid var(--theme-line, var(--v2-line, #404854)); border-radius: 8px; background: var(--theme-panel-soft, var(--v2-panel-soft, #2b303a)); color: inherit; font: inherit; cursor: pointer; }
.byok-profile-choice-row > .byok-profile-browse { flex: 1 1 auto; display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; text-align: left; }
.byok-profile-browse > span { display: grid; min-width: 0; gap: 2px; }
.byok-profile-browse b,
.byok-profile-browse small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.byok-profile-browse b { font-size: 12px; }
.byok-profile-browse small { color: var(--theme-muted, var(--v2-muted, #a2a9b5)); font-size: 10px; }
.byok-profile-browse em { flex: 0 0 auto; color: #48c9aa; font-size: 11px; font-style: normal; font-weight: 700; }
.byok-profile-activate { flex: 0 0 auto; padding: 0 10px; font-size: 10px !important; }
.byok-profile-choice-row > button:hover,
.byok-discovered-list > button:hover { border-color: var(--neutral-accent); }
.byok-profile-choice-row > button.is-active,
.byok-discovered-list > button.is-active { border-color: var(--neutral-accent); background: color-mix(in srgb, var(--neutral-accent, #a86f25) 15%, var(--theme-panel-soft, var(--v2-panel-soft))); }
.byok-discovered-models { display: grid; min-width: 0; gap: 7px; padding: 9px; border: 1px solid var(--theme-line, var(--v2-line, #404854)); border-radius: 8px; background: var(--theme-panel, var(--v2-panel)); }
.byok-discovered-search { display: grid; gap: 4px; font-size: 10px; }
.byok-discovered-search > input { width: 100%; min-width: 0; height: 32px; padding: 0 9px; border: 1px solid var(--theme-line, var(--v2-line, #404854)); border-radius: 7px; background: var(--theme-panel-soft, var(--v2-panel-soft)); color: inherit; font: inherit; }
.byok-discovered-status,
.byok-discovered-empty { margin: 0; color: var(--theme-muted, var(--v2-muted, #a2a9b5)); font-size: 10px; line-height: 1.45; }
.byok-discovered-list { display: grid; max-height: 230px; overflow-y: auto; gap: 4px; }
.byok-discovered-list > button { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; text-align: left; }
.byok-discovered-list > button[hidden] { display: none !important; }
.byok-discovered-list > button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.byok-discovered-list > button em { flex: 0 0 auto; color: #48c9aa; font-size: 10px; font-style: normal; }
.byok-provider-model-field { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.byok-provider-model-field > label { min-width: 0; }
.byok-provider-model-field > button { align-self: flex-start; min-height: 30px; padding: 5px 10px; }
.byok-provider-model-field > small { color: var(--theme-muted, var(--v2-muted, #a2a9b5)); font-size: 10px; line-height: 1.45; }
.byok-provider-model-field > [hidden] { display: none !important; }
.byok-provider-picker-field { position: relative; display: grid; max-width: 320px; min-width: 0; gap: 8px; }
.byok-provider-native-select { display: none !important; }
.byok-provider-picker-trigger { display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 13px; border: 1px solid var(--theme-line-strong, var(--aw-line-strong, #c7d2e1)); border-radius: 8px; background: var(--theme-panel-soft, var(--aw-surface-soft, #f6f8fb)); color: var(--theme-text, var(--aw-text, #203047)); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.byok-provider-picker-trigger:hover, .byok-provider-picker-trigger:focus-visible, .byok-provider-picker-trigger[aria-expanded="true"] { border-color: var(--neutral-accent); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--neutral-accent) 13%, transparent); }
.byok-provider-picker-trigger:disabled { opacity: .65; cursor: not-allowed; }
.byok-provider-picker-trigger > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.byok-provider-picker-chevron { flex: 0 0 auto; font-size: 21px; line-height: 1; transition: transform .15s ease; }
.byok-provider-picker-trigger[aria-expanded="true"] .byok-provider-picker-chevron { transform: rotate(180deg); }
.byok-provider-picker-panel { position: absolute; z-index: 100; top: calc(100% + 7px); left: 0; box-sizing: border-box; display: grid; width: min(410px, calc(100vw - 44px)); min-width: min(320px, 100%); max-height: min(440px, 54vh); gap: 9px; padding: 11px; overflow: hidden; border: 1px solid var(--theme-line-strong, var(--aw-line-strong, #c7d2e1)); border-radius: 12px; background: var(--theme-panel-raised, var(--aw-surface, #fff)); color: var(--theme-text, var(--aw-text, #203047)); box-shadow: 0 14px 38px rgb(0 0 0 / 20%); }
.byok-provider-picker-panel[hidden] { display: none !important; }
html:root body #byokProviderPickerPanel[data-byok-provider-portal="true"] { position: fixed; z-index: 10030; }
.byok-provider-picker-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.byok-provider-picker-tabs > button { padding: 7px 8px; border: 1px solid var(--theme-line, var(--aw-line, #d6e0e9)); border-radius: 7px; background: transparent; color: inherit; font: inherit; font-size: 11px; cursor: pointer; }
.byok-provider-picker-tabs > button[aria-selected="true"] { border-color: var(--neutral-accent); background: color-mix(in srgb, var(--neutral-accent) 16%, transparent); font-weight: 700; }
.byok-provider-picker-panel > input { box-sizing: border-box; width: 100%; min-height: 34px; padding: 0 10px; border: 1px solid var(--theme-line, var(--aw-line, #d6e0e9)); border-radius: 7px; background: var(--theme-panel-soft, var(--aw-surface-soft, #f6f8fb)); color: inherit; font: inherit; font-size: 12px; }
.byok-provider-picker-status { margin: 0; color: var(--theme-muted, var(--aw-text-secondary, #65748a)); font-size: 10px; line-height: 1.45; }
.byok-provider-picker-results { display: grid; min-height: 0; max-height: 265px; overflow: auto; gap: 4px; }
.byok-provider-picker-results > button { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid transparent; border-radius: 7px; background: var(--theme-panel-soft, var(--aw-surface-soft, #f6f8fb)); color: inherit; font: inherit; font-size: 11px; text-align: left; cursor: pointer; }
.byok-provider-picker-results > button:hover, .byok-provider-picker-results > button:focus-visible { border-color: var(--neutral-accent); outline: none; }
.byok-provider-picker-results > button[aria-current="true"] { background: color-mix(in srgb, var(--neutral-accent) 16%, var(--theme-panel-soft, var(--aw-surface-soft, #f6f8fb))); }
.byok-provider-picker-results > button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.byok-provider-picker-results > button small { flex: 0 0 auto; color: var(--theme-muted, var(--aw-text-secondary, #65748a)); font-size: 10px; }
.byok-provider-picker-empty { margin: 0; padding: 8px; color: var(--theme-muted, var(--aw-text-secondary, #65748a)); font-size: 11px; }
html:root[data-theme="dark"] body .byok-provider-picker-panel { background: #142238; border-color: #355579; color: #eaf2fc; }
html:root[data-theme="dark"] body .byok-provider-picker-trigger { background: #142238; border-color: #355579; color: #eaf2fc; }
@media (min-width: 641px) and (max-width: 1360px) {
  #step-create .smart-create-toolbar { flex-wrap: wrap; justify-content: flex-end; }
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .smart-create-toolbar-left {
    flex: 1 1 100% !important;
    width: 100%;
    flex-wrap: wrap;
  }
}

/* Keep document creation and import together above the workspace navigation. */
html:root body #step-create .project-home-nav > #newBlankCanvasBtn { margin-bottom: 0 !important; }
html:root body #step-create .project-home-nav > #projectHomeOpenFilesBtn { margin-top: 4px !important; margin-bottom: 12px !important; }

/* Verified web images remain part of their assistant reply on every layout. */
html body #assistantDrawer .assistant-message-content:has(> .assistant-web-images) {
  min-width: 0;
  width: min(100%, 760px);
  max-width: 100%;
}
html body #assistantDrawer .assistant-web-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 12px;
  width: 100%;
  max-width: 760px;
  min-width: 0;
  margin: 14px 0 4px;
  white-space: normal;
}
html body #assistantDrawer .assistant-web-image-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--theme-border, #dfe5ed);
  border-radius: 12px;
  background: var(--theme-surface, #fff);
  color: var(--theme-text, #20242b);
}
html body #assistantDrawer .assistant-web-image-preview {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  width: 100%;
  min-width: 0;
  height: 154px !important;
  min-height: 0 !important;
  max-height: 154px !important;
  flex: 0 0 154px;
  padding: 0 !important;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #f0f3f7;
  cursor: zoom-in;
}
html:root body #assistantDrawer .assistant-web-image-card > .assistant-web-image-preview > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border-radius: 0;
  object-fit: contain !important;
  object-position: center !important;
}
html body #assistantDrawer .assistant-web-image-preview.is-missing { cursor: default; color: var(--theme-text-secondary, #606873); font-size: 12px; }
html body #assistantDrawer .assistant-web-image-card figcaption { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; }
html body #assistantDrawer .assistant-web-image-card figcaption > strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 36px;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
}
html body #assistantDrawer .assistant-web-image-meta { display: flex; align-items: center; gap: 8px; min-height: 18px; margin-top: auto; font-size: 11px; line-height: 18px; }
html body #assistantDrawer .assistant-web-image-meta a { color: var(--neutral-accent, #a86f25); text-decoration: none; }
html body #assistantDrawer .assistant-web-image-meta a:hover { text-decoration: underline; }
html body #assistantDrawer .assistant-web-image-preview-label { padding: 0 5px; border-radius: 4px; background: #edf0f5; color: #697386; }
html body #assistantDrawer .assistant-web-image-collect { width: 100%; min-height: 32px; padding: 6px 8px; border: 1px solid #0b5fe8 !important; border-radius: 7px; background: linear-gradient(135deg, #1677ff 0%, #0b5fe8 100%) !important; color: #fff !important; font-size: 12px; line-height: 18px; cursor: pointer; box-shadow: 0 2px 6px rgba(11,95,232,.18); }
html body #assistantDrawer .assistant-web-image-collect:hover:not(:disabled) { background: linear-gradient(135deg, #2b86ff 0%, #0b5fe8 100%) !important; }
html body #assistantDrawer .assistant-web-image-collect:disabled { cursor: default; opacity: .75; }
html body #assistantDrawer .assistant-web-image-collect.is-collected { color: #23714e !important; background: #edf8f2 !important; border-color: #bddcca !important; }
html body #assistantDrawer .assistant-web-image-error { color: #b42318; font-size: 11px; line-height: 16px; overflow-wrap: anywhere; }
html:root[data-theme="dark"] body #assistantDrawer .assistant-web-image-card { background: #22262e; border-color: #434956; color: #e8edf5; }
html:root[data-theme="dark"] body #assistantDrawer .assistant-web-image-preview { background: #191e26; }
html:root[data-theme="dark"] body #assistantDrawer .assistant-web-image-preview-label { background: #343b48; color: #c0cada; }
html:root[data-theme="dark"] body #assistantDrawer .assistant-web-image-meta a { color: #9ccaff; }
html:root[data-theme="dark"] body #assistantDrawer .assistant-web-image-collect { background: linear-gradient(135deg, #287ff0 0%, #1761c9 100%) !important; border-color: #5598ee !important; color: #fff !important; }
html:root[data-theme="dark"] body #assistantDrawer .assistant-web-image-collect:hover:not(:disabled) { background: linear-gradient(135deg, #3990ff 0%, #1761c9 100%) !important; }
html:root[data-theme="dark"] body #assistantDrawer .assistant-web-image-collect.is-collected { background: #203e32 !important; border-color: #3a7058 !important; color: #9ed8ba !important; }
html:root[data-theme="dark"] body #assistantDrawer .assistant-web-image-error { color: #ffaaa1; }

/* Photo edits keep real transparent pixels visible without altering the file. */
html:root body #assistantDrawer .assistant-image-edit-output .assistant-transparent-image-preview {
  background-color: #fff !important;
  background-image: conic-gradient(#e4e8ed 25%, #fff 0 50%, #e4e8ed 0 75%, #fff 0) !important;
  background-size: 24px 24px !important;
  background-position: 0 0 !important;
}
html:root[data-theme="dark"] body #assistantDrawer .assistant-image-edit-output .assistant-transparent-image-preview {
  background-color: #303741 !important;
  background-image: conic-gradient(#414955 25%, #303741 0 50%, #414955 0 75%, #303741 0) !important;
}
html:root body #assistantDrawer .assistant-image-edit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-block: 12px 6px;
}
html:root body #assistantDrawer .assistant-image-edit-actions > .primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--neutral-accent, #a86f25) !important;
  border-radius: 8px;
  background: var(--neutral-accent, #a86f25) !important;
  color: #fff !important;
  font-size: 12px;
  line-height: 18px;
  text-decoration: none;
  cursor: pointer;
}
html:root body #assistantDrawer .assistant-image-edit-actions > .primary:hover:not(:disabled) { background: #1d57be !important; }
html:root body #assistantDrawer .assistant-image-edit-actions > .primary:focus-visible { outline: 3px solid #97bafd; outline-offset: 2px; }
html:root body #assistantDrawer .assistant-image-edit-actions > .primary:disabled { opacity: .65; cursor: default; }
html:root body #assistantDrawer .assistant-image-edit-actions > .primary :is(i, svg) { width: 16px; height: 16px; flex: 0 0 16px; }
html:root body #assistantDrawer .assistant-image-transparency-note { display: block; color: #646e7b; font-size: 11px; line-height: 18px; }
html:root[data-theme="dark"] body #assistantDrawer .assistant-image-transparency-note { color: #bbc5d3; }
html:root body #assistantDrawer .assistant-image-edit-checks li small {
  display: block;
  max-height: none;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
}
/* Assistant skills picker */
.assistant-skills-wrap{position:relative;display:inline-flex;min-width:0}
.assistant-skills-trigger{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border:1px solid var(--border,#d9dee8);border-radius:8px;background:var(--surface,#fff);color:var(--text,#1f2937);font:inherit;cursor:pointer;white-space:nowrap}
.assistant-skills-trigger:hover,.assistant-skills-trigger[aria-expanded="true"]{border-color:var(--neutral-accent);color:var(--neutral-accent-strong)}
.assistant-skills-trigger svg{width:15px;height:15px;flex:0 0 auto}
.assistant-skills-panel{position:fixed;z-index:10050;width:min(360px,calc(100vw - 24px));max-height:min(460px,calc(100vh - 24px));overflow:auto;padding:12px;background:var(--surface,#fff);border:1px solid var(--border,#d9dee8);border-radius:12px;box-shadow:0 18px 48px #15213b2b;color:var(--text,#1f2937)}
.assistant-skills-panel.hidden{display:none}
.assistant-skills-panel>header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.assistant-skills-panel>header strong{font-size:13px}
.assistant-skills-panel>header button{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;color:var(--neutral-accent-strong);font:inherit;font-size:12px;cursor:pointer;padding:4px}
.assistant-skills-panel>header button svg{width:14px;height:14px}
.assistant-skills-note{margin:0 0 8px;color:var(--muted,#6b7280);font-size:11px;line-height:1.45}
.assistant-skills-list{display:grid;gap:6px}
.assistant-skill-option{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;width:100%;padding:9px 10px;border:1px solid var(--border,#e1e5ec);border-radius:8px;background:transparent;color:inherit;text-align:left;cursor:pointer}
.assistant-skill-option:hover,.assistant-skill-option.is-selected{border-color:var(--neutral-accent);background:var(--neutral-accent-soft)}
.assistant-skill-option-copy{min-width:0;display:grid;gap:2px}
.assistant-skill-option-copy strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.assistant-skill-option-copy small{font-size:11px;color:var(--muted,#6b7280);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.assistant-skill-option-meta{display:flex;align-items:center;gap:4px;color:var(--muted,#6b7280);font-size:10px;white-space:nowrap}
.assistant-skill-delete{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:0;border-radius:6px;background:transparent;color:#a33;cursor:pointer}
.assistant-skill-delete:hover{background:#fff0f0}
.assistant-skill-delete svg{width:14px;height:14px}
html[data-theme="dark"] .assistant-skills-trigger,html[data-theme="dark"] .assistant-skills-panel{background:var(--neutral-panel);color:var(--neutral-text);border-color:var(--neutral-line)}
html[data-theme="dark"] .assistant-skill-option{border-color:var(--neutral-line)}
html[data-theme="dark"] .assistant-skill-option:hover,html[data-theme="dark"] .assistant-skill-option.is-selected{background:var(--neutral-accent-soft);border-color:var(--neutral-accent)}




/* GPT-style image generation canvas for conversation mode. Keep the in-flight
   result centered and quiet: a black/neutral canvas with a subtle animated
   dot field communicates that rendering is active without adding another
   card or a blue gradient panel. The actual generated image uses the same
   canvas ratio and remains large enough to inspect before opening the viewer. */
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-card {
  width: min(100%, var(--assistant-generation-card-width, 720px)) !important;
  max-width: 720px !important;
  margin-inline: auto !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-canvases {
  display: block !important;
  width: 100% !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual:not(.has-image):not(.has-error) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 320px !important;
  max-height: min(64vh, 680px) !important;
  border-radius: 0 !important;
  background: #000 !important;
  background-color: #000 !important;
  isolation: isolate !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual:not(.has-image):not(.has-error) {
  background: #000 !important;
  background-color: #000 !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual:not(.has-image):not(.has-error) {
  background: #f7f7f8 !important;
  background-color: #f7f7f8 !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual:not(.has-image):not(.has-error)::before {
  position: absolute !important;
  inset: 12% 7% !important;
  z-index: 0 !important;
  content: "" !important;
  background-image: radial-gradient(circle, rgb(46 121 231 / 82%) 0 1.7px, transparent 2px) !important;
  background-size: 22px 22px !important;
  background-position: 0 0 !important;
  opacity: .46 !important;
  transform: scale(1.02) !important;
  animation: assistant-chat-image-dots 4.8s ease-in-out infinite !important;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 30%, rgb(0 0 0 / 78%) 54%, transparent 84%) !important;
  mask-image: radial-gradient(ellipse at center, #000 0 30%, rgb(0 0 0 / 78%) 54%, transparent 84%) !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual:not(.has-image):not(.has-error)::before {
  background-image: radial-gradient(circle, rgb(38 105 204 / 60%) 0 1.5px, transparent 1.9px) !important;
  opacity: .34 !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual:not(.has-image):not(.has-error)::after {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  content: "" !important;
  background: radial-gradient(ellipse at center, transparent 0 26%, rgb(0 0 0 / 24%) 74%, rgb(0 0 0 / 62%) 100%) !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual:not(.has-image):not(.has-error)::after {
  background: radial-gradient(ellipse at center, transparent 0 26%, rgb(255 255 255 / 12%) 76%, rgb(255 255 255 / 48%) 100%) !important;
}

@keyframes assistant-chat-image-dots {
  0%, 100% { background-position: 0 0; opacity: .28; transform: scale(.98); }
  45% { background-position: 10px -8px; opacity: .66; transform: scale(1.04); }
  72% { background-position: -8px 10px; opacity: .42; transform: scale(1.01); }
}

html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual-stage {
  top: 50% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  z-index: 2 !important;
  transform: translateY(-50%) !important;
  color: var(--chat-text, #d7d7d7) !important;
  font-size: clamp(20px, 2.3vw, 30px) !important;
  font-weight: 620 !important;
  letter-spacing: -.02em !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-percent {
  top: auto !important;
  right: 22px !important;
  bottom: 20px !important;
  left: auto !important;
  z-index: 2 !important;
  min-width: 58px !important;
  padding: 8px 12px !important;
  border: 1px solid color-mix(in srgb, var(--chat-text, #fff) 18%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--chat-text, #fff) 9%, transparent) !important;
  color: var(--chat-text, #fff) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual-label {
  display: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-track {
  display: block !important;
  right: 22px !important;
  bottom: 14px !important;
  left: 22px !important;
  z-index: 2 !important;
  height: 3px !important;
  opacity: .72 !important;
  background: #646464 !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-track > i {
  display: block !important;
  height: 100% !important;
  background: #7bc4ff !important;
  box-shadow: none !important;
  transition: width .4s ease !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual.has-image .assistant-image-generation-progress-track {
  display: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual.has-error .assistant-image-generation-progress-track {
  display: none !important;
}

/* Completed image output follows the same centered, natural-size canvas used
   by ChatGPT instead of the old 240 × 180 thumbnail. */
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact .assistant-artifact-compact-grid {
  display: block !important;
  width: min(100%, 720px) !important;
  max-width: 720px !important;
  margin: 12px auto 0 !important;
}

html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact .assistant-artifact-compact-grid .assistant-generated-image-card {
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}

html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact .assistant-generated-image-preview {
  width: 100% !important;
  max-width: 720px !important;
  height: auto !important;
  max-height: min(68vh, 720px) !important;
  aspect-ratio: var(--assistant-artifact-aspect, 1 / 1) !important;
  border-radius: 12px !important;
  background: transparent !important;
}

html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact .assistant-generated-image-preview img {
  width: 100% !important;
  height: 100% !important;
  max-width: 720px !important;
  max-height: min(68vh, 720px) !important;
  object-fit: contain !important;
  object-position: center !important;
}

html:root body[data-project-home-mode="chat"] #assistantMessages :is(.assistant-generated-result.image-output, .assistant-generated-result.assistant-design-image-output) {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin-inline: auto !important;
}

html:root body[data-project-home-mode="chat"] #assistantMessages :is(.assistant-generated-result.image-output, .assistant-generated-result.assistant-design-image-output) :is(.assistant-generated-image-grid, .image-output-grid) {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin-inline: auto !important;
}

html:root body[data-project-home-mode="chat"] #assistantMessages :is(.assistant-generated-result.image-output, .assistant-generated-result.assistant-design-image-output) :is(.assistant-generated-image-preview, .image-output-card .assistant-generated-image-preview) {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  height: auto !important;
  max-height: min(72vh, 760px) !important;
  aspect-ratio: var(--assistant-artifact-aspect, 1 / 1) !important;
  margin-inline: auto !important;
  border-radius: 12px !important;
}

html:root body[data-project-home-mode="chat"] #assistantMessages :is(.assistant-generated-result.image-output, .assistant-generated-result.assistant-design-image-output) :is(.assistant-generated-image-preview, .image-output-card .assistant-generated-image-preview) img {
  width: 100% !important;
  height: 100% !important;
  max-width: 760px !important;
  max-height: min(72vh, 760px) !important;
  object-fit: contain !important;
  object-position: center !important;
}

@media (prefers-reduced-motion: reduce) {
  html:root body[data-project-home-mode="chat"] #assistantImageGenerationProgress .assistant-image-generation-progress-visual::before {
    animation: none !important;
  }
}

/* Message actions polish: keep the compact GPT-style toolbar and its
   overflow menu on a single line.  The action labels remain available in
   the menu while avoiding the two-line stack visible at narrow widths. */
html body #assistantDrawer .assistant-message-actions {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}
html body #assistantDrawer .assistant-message-more-popover {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: max-content !important;
  width: max-content !important;
  max-width: min(360px, calc(100vw - 24px)) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
html body #assistantDrawer .assistant-message-more-popover::-webkit-scrollbar {
  display: none !important;
}
html body #assistantDrawer .assistant-message-more-popover > button {
  flex: 0 0 auto !important;
  min-height: 32px !important;
  white-space: nowrap !important;
}

/* UI polish v12: keep message controls on one compact row.  The toolbar is
   intentionally non-wrapping (like ChatGPT) and the two low-frequency actions
   in the ellipsis menu share a single horizontal line.  On narrow windows the
   toolbar can scroll instead of pushing controls onto a second line. */
.assistant-message-actions {
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: 100% !important;
  overflow: visible !important;
  scrollbar-width: none !important;
  white-space: nowrap !important;
}
.assistant-message-actions::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.assistant-message-more-popover {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(92vw, 320px) !important;
  gap: 4px !important;
  white-space: nowrap !important;
}
.assistant-message-more-popover button {
  flex: 0 0 auto !important;
  min-height: 30px !important;
  width: auto !important;
  min-width: 76px !important;
  padding: 0 9px !important;
  white-space: nowrap !important;
}
@media (max-width: 560px) {
  .assistant-message-more-popover {
    right: auto !important;
    left: 0 !important;
  }
}

/* ===== merged from /assistant-taskbar-layout.css ===== */
/* The desktop sidebar has two task-context rows; none of its chips shrink. */
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantSideWorkspace.assistant-current-taskbar {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) max-content !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantSideWorkspace > header {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 20px !important;
  white-space: nowrap !important;
}

html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantSideWorkspace > header > span {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 5px !important;
}

html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantSideWorkspaceStatus {
  flex: 0 0 auto !important;
  padding: 3px 6px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantSideWorkspaceSummary {
  display: contents !important;
}

html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantSideWorkspaceSummary > strong {
  grid-column: 2 / -1 !important;
  grid-row: 1 !important;
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 20px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantSideWorkspaceSummary > span {
  grid-row: 2 !important;
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  font-size: 11px !important;
  line-height: 18px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantSideWorkspaceSummary > span:nth-of-type(1) {
  grid-column: 1 !important;
}

html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantSideWorkspaceSummary > span:nth-of-type(2) {
  grid-column: 2 !important;
}

html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantSideWorkspace :is(header > span, #assistantSideWorkspaceSummary > span) > :is(svg, .fluent-icon-shell) {
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
}

html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantSidePdfBtn {
  grid-column: 3 !important;
  grid-row: 2 !important;
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 32px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px 9px !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantSidePdfBtn strong {
  font-size: 11px !important;
  line-height: 18px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantSidePdfBtn > :is(svg, .fluent-icon-shell) {
  flex: 0 0 15px !important;
  width: 15px !important;
  height: 15px !important;
}

/* /assistant-sidebar-layout.css */
/* ==== consolidated from /assistant-sidebar-layout.css (cascade order preserved) ==== */
/* Viewport coordinates must apply immediately, including on first open.
   Global performance tiers otherwise animate the default `all` properties. */
html:root body #assistantModeOptions {
  transition: none !important;
  animation: none !important;
}

/* One composer layout for embedded chat, expanded chat, and the sidebar.
   Repeating the drawer ID overrides older embedded controls without changing
   the drawer's own placement in the surrounding application. */
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer {
  --assistant-composer-control: #f5f7fa;
  --assistant-composer-hover: #eaf0f8;
  --assistant-composer-border: #d6deea;
  --assistant-composer-ink: #344054;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 40px 40px !important;
  grid-template-rows: 60px auto !important;
  gap: 10px 8px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 10px !important;
  border-radius: 12px !important;
  overflow: visible !important;
  container: assistant-composer / inline-size;
}
html:root[data-theme="dark"] body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer {
  --assistant-composer-control: #292e38;
  --assistant-composer-hover: #343c49;
  --assistant-composer-border: #454e5d;
  --assistant-composer-ink: #e4eaf4;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer > :is(#assistantAddBtn, #assistantVoiceInputBtn, #assistantSendBtn) {
  box-sizing: border-box !important;
  display: inline-flex !important;
  position: static !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  justify-self: center !important;
  transform: none !important;
  line-height: 1 !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer > :is(#assistantAddBtn, #assistantVoiceInputBtn, #assistantSendBtn) :is(svg, .fluent-icon-shell, .fluent-icon) {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  flex: 0 0 20px !important;
}

html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer > #assistantInput {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 8px !important;
  overflow-y: auto !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer > #assistantAddBtn { grid-column: 1 !important; grid-row: 1 !important; }
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer > #assistantVoiceInputBtn { grid-column: 3 !important; grid-row: 1 !important; }
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer > #assistantSendBtn { grid-column: 4 !important; grid-row: 1 !important; }
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer > #assistantAddBtn {
  border: 1px solid var(--assistant-composer-border) !important;
  background: var(--assistant-composer-control) !important;
  color: var(--assistant-composer-ink) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer > #assistantAddBtn:is(:hover, [aria-expanded="true"]) {
  border-color: var(--neutral-accent, #a86f25) !important;
  background: var(--neutral-accent, #a86f25) !important;
  color: #ffffff !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer > .assistant-composer-tools {
  box-sizing: border-box !important;
  display: grid !important;
  position: static !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(135px, 1.25fr) repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-rows: 36px !important;
  grid-auto-flow: row !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  gap: 6px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
  align-content: start !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer .assistant-composer-tools > :is(.assistant-composer-copy-tools, .assistant-quick-tools-wrap, #assistantModeSwitch, #assistantSecondaryTools) {
  box-sizing: border-box !important;
  display: flex !important;
  position: static !important;
  inset: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  transform: none !important;
  order: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer :is(#assistantCopyModeTrigger, #assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn, #assistantAdvancedOptionsBtn, #assistantPromptEnhanceBtn) {
  display: inline-flex !important;
  box-sizing: border-box !important;
  position: static !important;
  inset: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 0 6px !important;
  border: 1px solid var(--assistant-composer-border) !important;
  border-radius: 7px !important;
  background: var(--assistant-composer-control) !important;
  color: var(--assistant-composer-ink) !important;
  gap: 5px !important;
  font-size: 12px !important;
  font-family: inherit !important;
  line-height: 1.2 !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  transform: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  flex: 1 1 auto !important;
  order: 0 !important;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer :is(#assistantCopyModeTrigger, #assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn, #assistantAdvancedOptionsBtn, #assistantPromptEnhanceBtn) :is(svg, .fluent-icon-shell) {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  color: inherit !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer :is(#assistantCopyModeTrigger, #assistantModeTrigger, #assistantQuickToolsBtn, #assistantAdvancedOptionsBtn):hover {
  background: var(--assistant-composer-hover) !important;
  color: var(--assistant-composer-ink) !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer :is(#assistantImageSettingsBtn, #assistantPromptEnhanceBtn) {
  border-color: var(--neutral-accent-strong, #88551a) !important;
  background: var(--neutral-accent, #a86f25) !important;
  color: #ffffff !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer :is(#assistantImageSettingsBtn, #assistantPromptEnhanceBtn):hover {
  background: var(--neutral-accent-strong, #88551a) !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer #assistantCopyModeTrigger > span {
  display: block !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer #assistantCopyModeTrigger strong {
  color: inherit !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer #assistantCopyModeTrigger small,
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer #assistantAdvancedOptionsSummary { display: none !important; }
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer #assistantSecondaryTools.assistant-secondary-tools {
  align-items: center !important;
  gap: 4px !important;
  opacity: 1 !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer #assistantPromptRestoreBtn {
  position: static !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--assistant-composer-border) !important;
  border-radius: 6px !important;
  background: var(--assistant-composer-control) !important;
  color: var(--assistant-composer-ink) !important;
  order: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer #assistantSecondaryTools:has(#assistantPromptRestoreBtn:not(.hidden)) #assistantPromptEnhanceBtn > :is(svg, .fluent-icon-shell) {
  display: none !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer > .assistant-composer-tools:has(#assistantPromptRestoreBtn:not(.hidden)) {
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(150px, 1.45fr) !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer .hidden,
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer [hidden] { display: none !important; }
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer :is(button, textarea):focus-visible {
  outline: 2px solid var(--neutral-accent, #a86f25) !important;
  outline-offset: 2px !important;
}

/* The same DOM order becomes two rows when the available composer is narrow. */
@container assistant-composer (max-width: 700px) {
  html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer > .assistant-composer-tools {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer #assistantImageSettingsBtn {
    grid-column: span 2 !important;
  }
  html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer > .assistant-composer-tools:has(#assistantPromptRestoreBtn:not(.hidden)) {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 1.45fr) minmax(0, 1fr) !important;
  }
  html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer > .assistant-composer-tools:has(#assistantPromptRestoreBtn:not(.hidden)) #assistantImageSettingsBtn {
    grid-column: auto !important;
  }
}
@container assistant-composer (max-width: 370px) {
  html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer :is(.assistant-copy-mode-chevron, .assistant-mode-trigger-chevron, .assistant-quick-tools-chevron) {
    display: none !important;
  }
  html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer #assistantImageSettingsBtn > :first-child {
    display: none !important;
  }
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantMessages { min-height: 80px !important; }

html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel {
  position: absolute !important;
  inset: auto 0 calc(100% + 8px) 0 !important;
  z-index: 40 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
  grid-column: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(360px, calc(100dvh - 340px)) !important;
  margin: 0 !important;
  padding: 12px !important;
  gap: 10px !important;
  overflow: auto !important;
  box-sizing: border-box !important;
  border: 1px solid var(--v2-line, #4b5260) !important;
  border-radius: 10px !important;
  background: var(--v2-panel, #fff) !important;
  box-shadow: 0 8px 28px rgb(0 0 0 / 24%) !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer #assistantAdvancedOptionsPanel.assistant-advanced-options-panel > :is(label, span) {
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer #assistantAdvancedOptionsPanel.hidden { display: none !important; }

/* Reuse the app brand in both compact and expanded assistant headers. */
html:root body #assistantDrawer .assistant-header .assistant-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html:root body #assistantDrawer .assistant-header .assistant-brand-mark {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The grouped tools panel is portalled to body. Keep its coordinates instant
   and its solid surface independent from the composer's compact button rules. */
html:root body #assistantQuickToolsPanel.assistant-quick-tools-panel {
  --assistant-tools-surface: var(--neutral-panel);
  --assistant-tools-card: var(--neutral-panel-soft);
  --assistant-tools-hover: var(--neutral-accent-soft);
  --assistant-tools-line: var(--neutral-line);
  --assistant-tools-text: var(--neutral-text);
  --assistant-tools-muted: var(--neutral-muted);
  --assistant-tools-blue: var(--neutral-accent, #a86f25);
  box-sizing: border-box !important;
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  z-index: 10020 !important;
  display: block !important;
  width: 420px;
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 420px;
  margin: 0 !important;
  padding: 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  border: 1px solid var(--assistant-tools-line) !important;
  border-radius: 12px !important;
  background: var(--assistant-tools-surface) !important;
  color: var(--assistant-tools-text) !important;
  box-shadow: 0 12px 36px rgb(15 23 42 / 20%) !important;
  opacity: 1 !important;
  transform: none !important;
  backdrop-filter: none !important;
  transition: none !important;
  animation: none !important;
  color-scheme: light;
  scrollbar-width: thin;
  scrollbar-color: var(--assistant-tools-line) var(--assistant-tools-surface);
}
html:root[data-theme="dark"] body #assistantQuickToolsPanel.assistant-quick-tools-panel {
  --assistant-tools-surface: var(--neutral-panel);
  --assistant-tools-card: var(--neutral-panel-soft);
  --assistant-tools-hover: var(--neutral-panel-raised);
  --assistant-tools-line: var(--neutral-line);
  --assistant-tools-text: var(--neutral-text);
  --assistant-tools-muted: var(--neutral-muted);
  --assistant-tools-blue: var(--neutral-accent, #a86f25);
  box-shadow: 0 12px 36px rgb(0 0 0 / 42%) !important;
  color-scheme: dark;
}
html:root body #assistantQuickToolsPanel.assistant-quick-tools-panel.hidden,
html:root body #assistantQuickToolsPanel.assistant-quick-tools-panel[hidden] {
  display: none !important;
}
html:root body #assistantQuickToolsPanel * {
  box-sizing: border-box !important;
  animation: none !important;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  background: var(--assistant-tools-surface) !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-header > div {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-header strong {
  color: var(--assistant-tools-text) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.4 !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-header small {
  color: var(--assistant-tools-muted) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
}
html:root body #assistantQuickToolsPanel [data-quick-tools-close] {
  display: inline-flex !important;
  flex: 0 0 28px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--assistant-tools-muted) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important;
}
html:root body #assistantQuickToolsPanel [data-quick-tools-close]:hover {
  background: var(--assistant-tools-hover) !important;
  color: var(--assistant-tools-text) !important;
}
html:root body #assistantQuickToolsPanel [data-quick-tools-close] :is(svg, i, .fluent-icon-shell) {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  color: inherit !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-favorites {
  margin: 0 !important;
  padding: 0 !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-favorites h3 {
  margin: 0 0 6px !important;
  color: var(--assistant-tools-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: 60px !important;
  align-items: stretch !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}
html:root body #assistantQuickToolsPanel button.assistant-tool-card {
  display: flex !important;
  position: static !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  margin: 0 !important;
  padding: 7px 8px !important;
  border: 1px solid var(--assistant-tools-line) !important;
  border-radius: 8px !important;
  background: var(--assistant-tools-card) !important;
  color: var(--assistant-tools-text) !important;
  font-family: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  overflow: visible !important;
  box-shadow: none !important;
  transform: none !important;
}
html:root body #assistantQuickToolsPanel button.assistant-tool-card:hover {
  border-color: var(--assistant-tools-blue) !important;
  background: var(--assistant-tools-hover) !important;
}
html:root body #assistantQuickToolsPanel button.assistant-tool-card > :is(svg, i, .fluent-icon-shell) {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  color: var(--assistant-tools-blue) !important;
}
html:root body #assistantQuickToolsPanel button.assistant-tool-card .assistant-tool-copy {
  display: grid !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 3px !important;
}
html:root body #assistantQuickToolsPanel button.assistant-tool-card strong {
  display: block !important;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
html:root body #assistantQuickToolsPanel button.assistant-tool-card small {
  display: block !important;
  color: var(--assistant-tools-muted) !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
html:root body #assistantQuickToolsPanel button.assistant-tool-card.is-primary {
  border-color: var(--neutral-accent, #a86f25) !important;
  background: var(--neutral-accent, #a86f25) !important;
  color: #ffffff !important;
}
html:root body #assistantQuickToolsPanel button.assistant-tool-card.is-primary:hover {
  border-color: var(--neutral-accent-strong, #88551a) !important;
  background: var(--neutral-accent-strong, #88551a) !important;
}
html:root body #assistantQuickToolsPanel button.assistant-tool-card.is-primary > :is(svg, i, .fluent-icon-shell) {
  color: #ffffff !important;
}
html:root body #assistantQuickToolsPanel button.assistant-tool-card.is-primary small {
  color: #e5eeff !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-groups {
  display: grid !important;
  gap: 4px !important;
  margin-top: 10px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--assistant-tools-line) !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-group {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-group > summary {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 7px 6px !important;
  border-radius: 7px !important;
  color: var(--assistant-tools-text) !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  list-style: none !important;
  cursor: pointer !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-group > summary::-webkit-details-marker {
  display: none;
}
html:root body #assistantQuickToolsPanel .assistant-tools-group > summary:hover {
  background: var(--assistant-tools-hover) !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-group > summary > :is(svg, i, .fluent-icon-shell) {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  color: var(--assistant-tools-muted) !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-group > summary > span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-group > summary > small {
  color: var(--assistant-tools-muted) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-group[open] > summary .assistant-tools-group-chevron {
  transform: rotate(180deg) !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-group > .assistant-tools-grid {
  margin: 4px 0 8px !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-group:not([open]) > .assistant-tools-grid {
  display: none !important;
}
html:root body #assistantQuickToolsPanel :is(button, summary):focus-visible {
  outline: 2px solid var(--assistant-tools-blue) !important;
  outline-offset: 2px !important;
}

html:root body #assistantQuickToolsPanel .assistant-tools-footer {
  display: flex !important;
  justify-content: flex-end !important;
  margin: 10px 0 0 !important;
  padding: 8px 0 0 !important;
  border-top: 1px solid var(--assistant-tools-line) !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-footer > #assistantClearBtn {
  display: inline-flex !important;
  position: static !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 7px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--assistant-tools-muted) !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  transform: none !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-footer > #assistantClearBtn:not(:disabled):hover {
  background: var(--assistant-tools-hover) !important;
  color: var(--assistant-tools-text) !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-footer > #assistantClearBtn:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-footer > #assistantClearBtn :is(svg, .fluent-icon-shell) {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  color: inherit !important;
}
html:root body #assistantQuickToolsPanel .assistant-tools-footer > #assistantClearBtn > span {
  display: inline !important;
  color: inherit !important;
  font-size: inherit !important;
}

/* The add menu stays above the composer without animating viewport geometry. */
html:root body #assistantAddMenu.assistant-add-menu {
  --assistant-add-surface: var(--neutral-panel);
  --assistant-add-hover: var(--neutral-accent-soft);
  --assistant-add-border: var(--neutral-line);
  --assistant-add-text: var(--neutral-text);
  --assistant-add-muted: var(--neutral-muted);
  box-sizing: border-box !important;
  display: grid !important;
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  z-index: 10030 !important;
  gap: 8px !important;
  width: 300px;
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  border: 1px solid var(--assistant-add-border) !important;
  border-radius: 12px !important;
  background: var(--assistant-add-surface) !important;
  color: var(--assistant-add-text) !important;
  box-shadow: 0 12px 36px rgb(15 23 42 / 20%) !important;
  opacity: 1 !important;
  transform: none !important;
  backdrop-filter: none !important;
  transition: none !important;
  animation: none !important;
}
html:root[data-theme="dark"] body #assistantAddMenu.assistant-add-menu {
  --assistant-add-surface: var(--neutral-panel);
  --assistant-add-hover: var(--neutral-panel-raised);
  --assistant-add-border: var(--neutral-line);
  --assistant-add-text: var(--neutral-text);
  --assistant-add-muted: var(--neutral-muted);
  box-shadow: 0 12px 36px rgb(0 0 0 / 42%) !important;
}
html:root body #assistantAddMenu.assistant-add-menu.hidden,
html:root body #assistantAddMenu.assistant-add-menu[hidden] {
  display: none !important;
}
html:root body #assistantAddMenu * {
  box-sizing: border-box !important;
  animation: none !important;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease !important;
}
html:root body #assistantAddMenu button.assistant-add-menu-action {
  display: flex !important;
  position: static !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: var(--assistant-add-surface) !important;
  color: var(--assistant-add-text) !important;
  font-family: inherit !important;
  text-align: left !important;
  white-space: normal !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important;
}
html:root body #assistantAddMenu button.assistant-add-menu-action:not(:disabled):hover {
  background: var(--assistant-add-hover) !important;
}
html:root body #assistantAddMenu button.assistant-add-menu-action > :is(svg, i, .fluent-icon-shell) {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  color: #4b89f8 !important;
}
html:root body #assistantAddMenu button.assistant-add-menu-action > span {
  display: grid !important;
  min-width: 0 !important;
  gap: 4px !important;
}
html:root body #assistantAddMenu button.assistant-add-menu-action strong {
  color: var(--assistant-add-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
html:root body #assistantAddMenu button.assistant-add-menu-action small {
  color: var(--assistant-add-muted) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
}
html:root body #assistantAddMenu button.assistant-add-menu-action:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}
html:root body #assistantAddMenu button.assistant-add-menu-action:focus-visible {
  outline: 2px solid var(--neutral-accent, #a86f25) !important;
  outline-offset: 1px !important;
}

/* Keep file conversion inside the upload strip, without a clipped popup. */
html:root body #assistantDrawer#assistantDrawer #assistantAttachments:has(.assistant-editable-convert-menu) {
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  max-height: min(240px, 30vh) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
html:root body .assistant-editable-convert-menu {
  flex: 0 1 auto;
  min-width: 160px;
  max-width: 100%;
  margin: 0;
}
html:root body .assistant-editable-convert-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 32px;
  padding: 5px 10px;
  list-style: none;
  border: 1px solid var(--neutral-accent, #a86f25);
  border-radius: 6px;
  background: var(--neutral-accent, #a86f25);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
html:root body .assistant-editable-convert-trigger::-webkit-details-marker { display: none; }
html:root body .assistant-editable-convert-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-width: 330px;
  padding: 8px 0 2px;
  color: var(--v2-text, #182235);
}
html:root body .assistant-editable-convert-options > :is(span, small) {
  grid-column: 1 / -1;
  font-size: 11px;
  line-height: 1.5;
  color: var(--v2-muted, #66758b);
}
html:root body #assistantDrawer#assistantDrawer .assistant-editable-convert-options button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  border: 1px solid var(--neutral-accent, #a86f25) !important;
  border-radius: 6px !important;
  background: var(--neutral-accent, #a86f25) !important;
  color: #fff !important;
  font-size: 12px !important;
  white-space: normal !important;
}
html:root body .assistant-editable-convert-options button:disabled { opacity: .5; cursor: wait; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-mode-field { display:flex; align-items:center; gap:8px; margin:8px 0; color:#536174; font-size:12px; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-mode-field select { min-width:170px; border:1px solid #d5dce8; border-radius:8px; padding:5px 8px; background:#fff; color:#1d2a3a; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-format-actions { display:flex; gap:8px; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-structure-preview { margin-top:10px; padding:10px; border:1px solid #dfe5ef; border-radius:10px; background:#fbfcff; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-structure-preview header { display:flex; justify-content:space-between; gap:10px; margin-bottom:8px; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-structure-preview header div { display:grid; gap:3px; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-structure-preview header span, html:root body #assistantDrawer#assistantDrawer .assistant-editable-structure-preview p, html:root body #assistantDrawer#assistantDrawer .assistant-editable-structure-preview small { color:#68768a; font-size:11px; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-structure-preview > ul { display:grid; gap:5px; padding:0; margin:8px 0; list-style:none; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-structure-preview > ul > li { display:flex; align-items:center; gap:8px; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-structure-preview > ul > li strong { min-width:55px; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-preview-image-plan, html:root body #assistantDrawer#assistantDrawer .assistant-editable-preview-warnings { display:flex; flex-wrap:wrap; gap:6px; margin:7px 0; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-preview-image-plan span, html:root body #assistantDrawer#assistantDrawer .assistant-editable-preview-warnings span { padding:3px 6px; border-radius:6px; background:var(--neutral-accent-soft); color:#536174; font-size:11px; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-levels { border-top:1px solid #e7ebf2; padding-top:7px !important; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-levels b { width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:var(--neutral-accent, #a86f25); color:#fff; font-size:11px; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-levels span { color:#68768a; font-size:11px; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-preview-loading, html:root body #assistantDrawer#assistantDrawer .assistant-editable-preview-error { margin:8px 0 0; color:#68768a; }
html:root body :is(.assistant-editable-convert-trigger, .assistant-editable-convert-options button, .assistant-editable-download) :is(svg, i, .fluent-icon-shell) {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  color: inherit !important;
}
html:root body .assistant-editable-result { display: grid; gap: 12px; min-width: 0; padding: 8px 0; }
html:root body .assistant-editable-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; }
html:root body .assistant-editable-meta span { color: var(--v2-muted, #66758b); overflow-wrap: anywhere; }
html:root body .assistant-editable-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; }
html:root body .assistant-editable-previews figure { display: grid; gap: 4px; min-width: 0; margin: 0; }
html:root body .assistant-editable-previews img { display: block; width: 100%; max-height: 420px; object-fit: contain; background: transparent; }
html:root body .assistant-editable-previews figcaption { font-size: 11px; color: var(--v2-muted, #66758b); text-align: center; }
html:root body .assistant-editable-downloads { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
html:root body .assistant-editable-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--neutral-accent, #a86f25);
  border-radius: 6px;
  background: var(--neutral-accent, #a86f25);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}
html:root body .assistant-editable-download span { color: inherit !important; overflow-wrap: anywhere; }
html:root body .assistant-editable-download:hover { background: var(--neutral-accent-strong, #88551a); }
html:root body .assistant-editable-download:focus-visible { outline: 2px solid var(--neutral-accent, #a86f25); outline-offset: 2px; }
html:root body .assistant-editable-sources { width: 100%; min-width: 0; font-size: 12px; }
html:root body .assistant-editable-sources summary { cursor: pointer; line-height: 1.6; }
html:root body .assistant-editable-sources > div { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-source { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 6px 8px; color: var(--v2-text, #182235); border: 1px solid var(--v2-line, #dce3ed); border-radius: 6px; background: transparent; text-decoration: none; text-align: left; }
html:root body .assistant-editable-source img { width: 64px; height: 42px; object-fit: contain; flex: 0 0 64px; }
html:root body .assistant-editable-source span { min-width: 0; overflow-wrap: anywhere; }
html:root body .assistant-editable-error > span strong { display: block; margin-bottom: 4px; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-error { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; min-width: 0; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-error > :is(span, small, details, div) { grid-column: 1 / -1 !important; min-width: 0; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-error > span { font-size: 13px !important; line-height: 1.6 !important; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-error > span strong { font-size: 14px !important; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-error > small { font-size: 12px !important; line-height: 1.5 !important; color: var(--v2-muted, #66758b); }
html:root body .assistant-editable-error-details { min-width: 0; font-size: 12px; }
html:root body .assistant-editable-error-details summary { cursor: pointer; color: var(--v2-muted, #66758b); }
html:root body .assistant-editable-error-details p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--v2-muted, #66758b); line-height: 1.5; }
html:root body .assistant-editable-error-details .assistant-editable-technical-details { margin-top: 10px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--v2-line, #dce3ed) 70%, transparent); font-size: 11px; }
html:root body .assistant-editable-error-details .assistant-editable-technical-details strong { color: var(--v2-muted, #66758b); font-weight: 600; }
html:root body .assistant-editable-retry-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; min-width: 0; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-retry-actions > button,
html:root body #assistantDrawer#assistantDrawer .assistant-editable-retry-model > summary {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
  width: auto !important; min-height: 36px !important; padding: 7px 12px !important; margin: 0 !important;
  border: 1px solid var(--neutral-accent, #a86f25) !important; border-radius: 6px !important; background: var(--neutral-accent, #a86f25) !important;
  color: #fff !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer !important; list-style: none !important;
}
html:root body .assistant-editable-retry-model > summary::-webkit-details-marker { display: none; }
html:root body .assistant-editable-retry-actions :is(svg, i, .fluent-icon-shell) { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; color: inherit !important; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-retry-actions :is(button, summary) > span { color: inherit !important; font-size: inherit !important; line-height: inherit !important; }
html:root body .assistant-editable-retry-model { max-width: 100%; min-width: 0; }
html:root body .assistant-editable-retry-model-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; width: min(300px, 100%); min-width: min(230px, 100%); padding: 8px 0 0; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-retry-model-options button {
  width: 100% !important; min-width: 0 !important; min-height: 34px !important; padding: 7px 10px !important; border: 1px solid var(--v2-line, #dce3ed) !important;
  border-radius: 6px !important; background: var(--v2-surface, #fff) !important; color: var(--v2-text, #182235) !important;
  font-size: 12px !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere;
}
html:root body #assistantDrawer#assistantDrawer .assistant-editable-retry-model-options button:hover { border-color: var(--neutral-accent, #a86f25) !important; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-retry-actions :is(button, summary):focus-visible { outline: 2px solid var(--neutral-accent, #a86f25) !important; outline-offset: 2px !important; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-retry-actions button:disabled { opacity: .5 !important; cursor: wait !important; }
html:root[data-theme="dark"] body #assistantDrawer#assistantDrawer .assistant-editable-retry-model-options button { background: #252830 !important; color: #e5edf9 !important; border-color: #586477 !important; }
html:root body .assistant-editable-pending { margin: 0; color: var(--v2-muted, #66758b); font-size: 12px; }

/* Editable conversion panel: keep the hierarchy readable in both themes.
   The panel lives inside a flex attachment strip, so it must claim a full row
   before laying out its controls. This prevents the strategy label from being
   squeezed into a vertical column beside the format cards. */
html:root body .assistant-editable-convert-menu {
  --aec-panel: var(--v2-panel, #ffffff);
  --aec-surface: var(--v2-panel-soft, #f7f9fc);
  --aec-text: var(--v2-text, #182235);
  --aec-muted: var(--v2-muted, #66758b);
  --aec-line: var(--v2-line, #dce3ed);
  --aec-accent: var(--v2-blue, var(--neutral-accent, #a86f25));
  --aec-accent-soft: color-mix(in srgb, var(--aec-accent) 9%, var(--aec-panel));
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: min(100%, 360px) !important;
  max-width: 100% !important;
  margin-top: 2px !important;
}
html:root[data-theme="dark"] body .assistant-editable-convert-menu {
  --aec-panel: #20252e;
  --aec-surface: #292f3a;
  --aec-text: #f2f5fb;
  --aec-muted: #b6c1d2;
  --aec-line: #465264;
  --aec-accent: #78a9ff;
  --aec-accent-soft: #263752;
}
html:root body .assistant-editable-convert-trigger {
  box-sizing: border-box !important;
  width: 100% !important;
  justify-content: flex-start !important;
  min-height: 36px !important;
  padding: 7px 10px !important;
  border: 1px solid var(--aec-line) !important;
  border-radius: 9px !important;
  background: var(--aec-surface) !important;
  color: var(--aec-text) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease !important;
}
html:root body .assistant-editable-convert-trigger > :first-child {
  color: var(--aec-accent) !important;
}
html:root body .assistant-editable-convert-menu[open] > .assistant-editable-convert-trigger,
html:root body .assistant-editable-convert-trigger:hover {
  border-color: color-mix(in srgb, var(--aec-accent) 65%, var(--aec-line)) !important;
  background: var(--aec-accent-soft) !important;
  color: var(--aec-text) !important;
}
html:root body .assistant-editable-convert-trigger > :last-child { margin-left: auto; color: var(--aec-muted) !important; }
html:root body .assistant-editable-convert-options {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  width: min(100%, 480px) !important;
  max-width: 100% !important;
  margin-top: 7px !important;
  padding: 12px !important;
  border: 1px solid var(--aec-line) !important;
  border-radius: 12px !important;
  background: var(--aec-panel) !important;
  color: var(--aec-text) !important;
  box-shadow: 0 8px 22px rgb(15 23 42 / 10%) !important;
}
html:root[data-theme="dark"] body .assistant-editable-convert-options { box-shadow: 0 12px 28px rgb(0 0 0 / 30%) !important; }
html:root body .assistant-editable-convert-heading {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}
html:root body .assistant-editable-convert-heading strong { color: var(--aec-text) !important; font-size: 13px !important; line-height: 1.35 !important; }
html:root body .assistant-editable-convert-heading small,
html:root body .assistant-editable-convert-hint { color: var(--aec-muted) !important; font-size: 11px !important; line-height: 1.5 !important; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-mode-field {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--aec-muted) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}
html:root body #assistantDrawer#assistantDrawer .assistant-editable-mode-field > span { white-space: nowrap !important; }
html:root body #assistantDrawer#assistantDrawer .assistant-editable-mode-field select {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 6px 9px !important;
  border: 1px solid var(--aec-line) !important;
  border-radius: 8px !important;
  background: var(--aec-surface) !important;
  color: var(--aec-text) !important;
  color-scheme: inherit;
}
html:root body #assistantDrawer#assistantDrawer .assistant-editable-format-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer .assistant-editable-format-actions button {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  min-width: 0 !important;
  min-height: 64px !important;
  padding: 10px !important;
  border: 1px solid var(--aec-line) !important;
  border-radius: 10px !important;
  background: var(--aec-surface) !important;
  color: var(--aec-text) !important;
  text-align: left !important;
  white-space: normal !important;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease !important;
}
html:root body #assistantDrawer#assistantDrawer .assistant-editable-format-actions button:hover,
html:root body #assistantDrawer#assistantDrawer .assistant-editable-format-actions button:focus-visible {
  border-color: color-mix(in srgb, var(--aec-accent) 70%, var(--aec-line)) !important;
  background: var(--aec-accent-soft) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aec-accent) 17%, transparent) !important;
}
html:root body #assistantDrawer#assistantDrawer .assistant-editable-format-actions button > span {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}
html:root body #assistantDrawer#assistantDrawer .assistant-editable-format-actions button strong {
  color: var(--aec-text) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
html:root body #assistantDrawer#assistantDrawer .assistant-editable-format-actions button small {
  color: var(--aec-muted) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}
html:root body #assistantDrawer#assistantDrawer .assistant-editable-format-actions button > :first-child {
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  margin-top: 1px !important;
  color: var(--aec-accent) !important;
}
html:root body .assistant-editable-convert-hint {
  display: block !important;
  margin: 0 !important;
  padding-top: 2px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantAttachments:has(.assistant-editable-convert-menu) {
  align-content: flex-start !important;
  row-gap: 7px !important;
  max-height: min(440px, 50vh) !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantAttachments:has(.assistant-editable-convert-menu) .assistant-attachment-chip {
  flex: 0 1 auto !important;
  max-width: min(100%, 280px) !important;
}
@media (max-width: 520px) {
  html:root body #assistantDrawer#assistantDrawer .assistant-editable-format-actions { grid-template-columns: minmax(0, 1fr) !important; }
  html:root body #assistantDrawer#assistantDrawer .assistant-editable-mode-field { grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; }
}
@media (min-width: 521px) and (max-height: 760px) {
  html:root body #assistantDrawer#assistantDrawer #assistantAttachments:has(.assistant-editable-convert-menu) { max-height: min(320px, 42vh) !important; }
  html:root body #assistantDrawer#assistantDrawer .assistant-editable-convert-options { padding: 8px !important; gap: 6px !important; }
  html:root body #assistantDrawer#assistantDrawer .assistant-editable-convert-heading small { display: none !important; }
  html:root body #assistantDrawer#assistantDrawer .assistant-editable-mode-field select { height: 30px !important; padding-block: 4px !important; }
  html:root body #assistantDrawer#assistantDrawer .assistant-editable-format-actions button { min-height: 52px !important; padding: 7px !important; }
  html:root body #assistantDrawer#assistantDrawer .assistant-editable-format-actions button small { font-size: 9px !important; line-height: 1.3 !important; }
  html:root body #assistantDrawer#assistantDrawer .assistant-editable-convert-hint { font-size: 10px !important; line-height: 1.35 !important; }
}

html:root body .assistant-conversion-review-card,
html:root body .assistant-conversion-review-warnings { padding: 14px; border: 1px solid #b58238; border-radius: 10px; background: color-mix(in srgb, #bf852f 8%, var(--v2-panel, #fff)); color: var(--v2-text, #182235); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
html:root body .assistant-conversion-review-card p { margin: 8px 0; }
html:root body .assistant-conversion-review-card ul,
html:root body .assistant-conversion-review-warnings ul { padding-left: 22px; }
html:root body #assistantDrawer#assistantDrawer .assistant-conversion-review-card > button { min-height: 38px; padding: 8px 14px; background: var(--neutral-accent, #a86f25); color: #fff; border: 1px solid var(--neutral-accent, #a86f25); border-radius: 7px; font-size: 13px; }
html:root body .assistant-conversion-review-dialog { width: min(1000px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--v2-line, #dce3ed); border-radius: 16px; background: var(--v2-panel, #fff); color: var(--v2-text, #182235); box-shadow: 0 20px 90px #0006; font-family: inherit; font-size: 14px; line-height: 1.65; overflow: auto; }
html:root body .assistant-conversion-review-dialog::backdrop { background: #080f1cb3; backdrop-filter: blur(3px); }
html:root body .assistant-conversion-review-dialog > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 24px 12px; }
html:root body .assistant-conversion-review-dialog > header span { color: var(--v2-muted, #66758b); font-size: 13px; }
html:root body .assistant-conversion-review-dialog h2 { margin: 4px 0 0; font-size: 21px; line-height: 1.4; }
html:root body .assistant-conversion-review-dialog button { min-height: 40px; padding: 8px 14px; border: 1px solid var(--v2-line, #dce3ed); border-radius: 8px; background: var(--v2-panel, #fff); color: var(--v2-text, #182235); font: inherit; line-height: 1.4; cursor: pointer; }
html:root body .assistant-conversion-review-dialog > header > button { min-width: 40px; padding: 2px 8px; font-size: 24px; }
html:root body .assistant-conversion-review-dialog button.primary { background: var(--neutral-accent, #a86f25); border-color: var(--neutral-accent, #a86f25); color: #fff; }
html:root body .assistant-conversion-review-dialog button:disabled { opacity: .55; cursor: wait; }
html:root body .assistant-conversion-review-dialog :is(button, a):focus-visible { outline: 3px solid var(--neutral-accent, #a86f25); outline-offset: 3px; }
html:root body .assistant-conversion-review-body { padding: 0 24px; overflow-wrap: anywhere; }
html:root body .assistant-conversion-review-body > p { margin: 8px 0 14px; }
html:root body .assistant-conversion-review-issues { padding: 12px 16px 12px 34px; border-left: 3px solid #b58238; background: color-mix(in srgb, #bf852f 10%, var(--v2-panel, #fff)); }
html:root body .assistant-conversion-review-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
html:root body .assistant-conversion-review-comparison figure { margin: 0; min-width: 0; }
html:root body .assistant-conversion-review-comparison figcaption { margin-bottom: 8px; font-size: 13px; font-weight: 600; }
html:root body .assistant-conversion-review-comparison a { display: grid; min-height: 140px; height: min(38vh, 360px); border: 1px solid var(--v2-line, #dce3ed); border-radius: 8px; background: color-mix(in srgb, #7b8ba6 8%, var(--v2-panel, #fff)); overflow: hidden; }
html:root body .assistant-conversion-review-comparison img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
html:root body .assistant-conversion-review-no-image { display: grid; place-items: center; min-height: 140px; border: 1px dashed var(--v2-line, #dce3ed); color: var(--v2-muted, #66758b); border-radius: 8px; }
html:root body .assistant-conversion-review-body > .assistant-conversion-review-impact { margin-top: 16px; font-size: 13px; }
html:root body .assistant-conversion-review-error { padding: 10px; border-left: 3px solid #d65c5c; background: color-mix(in srgb, #d65c5c 12%, var(--v2-panel, #fff)); }
html:root body .assistant-conversion-review-dialog > footer { display: grid; gap: 12px; padding: 12px 24px 20px; }
html:root body .assistant-conversion-review-dialog > footer > small { color: var(--v2-muted, #66758b); font-size: 12px; }
html:root body .assistant-conversion-review-dialog > footer > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
@media (max-width: 600px) {
  html:root body .assistant-conversion-review-dialog > header { padding: 16px 16px 10px; }
  html:root body .assistant-conversion-review-body { padding: 0 16px; }
  html:root body .assistant-conversion-review-dialog > footer { padding: 12px 16px 16px; }
  html:root body .assistant-conversion-review-comparison { grid-template-columns: minmax(0, 1fr); }
  html:root body .assistant-conversion-review-comparison a { height: 180px; }
  html:root body .assistant-conversion-review-dialog > footer > div > button { flex: 1 1 auto; }
}
html:root body .assistant-editability-report { border-top: 1px solid var(--v2-line, #dce3ed); padding-top: 10px; }
html:root body .assistant-editability-report summary { font-size: 12px; cursor: pointer; }
html:root body .assistant-editability-report :is(p, li, small) { font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; color: var(--v2-muted, #66758b); }
html:root body .assistant-editability-report ul { padding-left: 20px; margin: 8px 0; }
html:root body .assistant-editability-counts { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; }
html:root body .assistant-editability-counts span { display: flex; gap: 5px; }

/* Keep the active BYOK model legible in the assistant toolbar. */
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer #assistantImageSettingsBtn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer #assistantComposer.assistant-composer #assistantImageSettingsBtn > span {
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ==== consolidated from /style-library-browse.css (cascade order preserved) ==== */
/* Phase1 merge: style-library-browse + home-dashboard-responsive + ip-brand-overrides (cascade preserved). */
/* ===== merged from /style-library-browse.css ===== */
/* Browse-first style catalog and editable prompts. Loaded after the workbench theme. */
#styleLibraryDialog,
#styleCatalogDetailDialog {
  --v2-blue: var(--neutral-accent);
  --v2-blue-hover: var(--neutral-accent-strong);
  --v2-blue-soft: var(--neutral-accent-soft);
  box-shadow: none !important;
}

html:root body :is(#styleLibraryDialog, #styleCatalogDetailDialog)[open],
html:root body :is(#styleLibraryDialog, #styleCatalogDetailDialog) > section {
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

html:root body :is(#styleLibraryDialog, #styleCatalogDetailDialog)::backdrop {
  background: rgb(0 0 0 / 32%) !important;
  backdrop-filter: none !important;
}

#styleLibraryDialog .style-library-search:focus-within {
  border-color: var(--neutral-accent) !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#styleLibraryDialog .style-library-search input:focus {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}

html:root[data-theme] body #styleLibraryDialog .style-library-search input,
html:root[data-theme] body #styleLibraryDialog .style-library-search input:is(:hover, :focus, :focus-visible) {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--neutral-text) !important;
  box-shadow: none !important;
}

html:root[data-theme] body #styleLibraryDialog #styleLibrarySearch:is(:hover, :focus, :focus-visible) {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

html:root[data-theme] body #styleCatalogDetailDialog #styleCatalogPromptCopyBtn {
  border: 1px solid var(--neutral-line-strong) !important;
  background: var(--neutral-panel) !important;
  color: var(--neutral-text) !important;
  box-shadow: none !important;
}

html:root[data-theme] body #styleCatalogDetailDialog #styleCatalogPromptUseBtn {
  border: 1px solid var(--neutral-accent) !important;
  background: var(--neutral-accent) !important;
  color: var(--neutral-accent-text) !important;
  box-shadow: none !important;
}

html:root[data-theme] body #styleLibraryDialog .style-library-search:focus-within {
  border-color: var(--neutral-accent) !important;
  box-shadow: none !important;
}

html:root[data-theme] body :is(#styleLibraryDialog, #styleCatalogDetailDialog) {
  --v2-panel: var(--neutral-panel);
  --v2-panel-soft: var(--neutral-panel-soft);
  --v2-text: var(--neutral-text);
  --v2-muted: var(--neutral-muted);
  --v2-faint: var(--neutral-faint);
  --v2-line: var(--neutral-line);
  --v2-line-strong: var(--neutral-line-strong);
  --store-card: var(--neutral-panel);
  --store-bg: var(--neutral-bg);
  --store-text: var(--neutral-text);
  --store-secondary: var(--neutral-muted);
  --store-line: var(--neutral-line);
  --store-line-strong: var(--neutral-line-strong);
  background: var(--neutral-panel) !important;
  color: var(--neutral-text) !important;
}

#styleLibraryDialog .style-catalog-views button.active {
  color: var(--neutral-accent) !important;
}

#styleLibraryDialog .style-catalog-views button.active::after {
  background: var(--neutral-accent) !important;
}

#styleLibraryDialog :is(.style-library-filters button.active, .style-catalog-active-filters button, .style-catalog-solution-switch button.active),
#styleCatalogDetailDialog .style-catalog-detail-shell > nav button.active {
  border-color: color-mix(in srgb, var(--neutral-accent) 42%, var(--v2-line)) !important;
  background: var(--neutral-accent-soft) !important;
  color: var(--neutral-accent) !important;
  box-shadow: none !important;
}

#styleLibraryDialog :is(.style-library-card.selected, .style-route-card.selected) {
  border-color: var(--neutral-accent) !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-nav > [data-project-home-action="styles"] {
  display: flex !important;
  flex-shrink: 0;
}

#styleLibraryDialog.style-library-browse .style-library-v3-workspace {
  grid-template-columns: 224px minmax(0, 1fr) !important;
}

#styleLibraryDialog.style-library-browse .style-library-selection-panel,
#styleLibraryDialog.style-library-browse .style-match-panel,
#styleLibraryDialog.style-library-browse #styleCatalogSelectionToggle {
  display: none !important;
}

#styleLibraryDialog.style-library-browse .style-library-catalog {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#styleLibraryDialog.style-library-browse .style-library-catalog-head,
#styleLibraryDialog.style-library-browse .style-library-coverage,
#styleLibraryDialog.style-library-browse .style-catalog-load-more {
  flex: 0 0 auto;
}

#styleLibraryDialog.style-library-browse .style-library-catalog-head {
  flex-wrap: wrap;
  gap: 8px 16px;
}

#styleLibraryDialog.style-library-browse .style-library-catalog-head > div:first-child {
  flex-wrap: wrap;
}

#styleLibraryDialog.style-library-browse .style-library-v3-grid {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)) !important;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 16px !important;
  padding: 18px !important;
  overflow: auto;
  overscroll-behavior: contain;
}

#styleLibraryDialog .style-library-v3-card {
  min-width: 0;
  overflow: hidden;
}

#styleLibraryDialog .style-library-v3-card .style-library-preview {
  display: block;
  width: 100%;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
}

#styleLibraryDialog .style-library-v3-card .style-library-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
}

#styleLibraryDialog.style-library-browse .style-library-card-check {
  display: none;
}

#styleLibraryFavoritesBtn[aria-pressed="true"],
#styleLibraryDialog [data-style-catalog-favorite][aria-pressed="true"],
#styleCatalogFavoriteBtn[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--neutral-accent) 38%, var(--v2-line));
  background: var(--neutral-accent-soft);
  color: var(--neutral-accent);
}

#styleLibraryFavoritesBtn[aria-pressed="true"] svg,
#styleLibraryDialog [data-style-catalog-favorite][aria-pressed="true"] svg,
#styleCatalogFavoriteBtn[aria-pressed="true"] svg {
  fill: currentColor;
}

#styleLibraryDialog .style-library-card-quick-actions {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
}

#styleLibraryDialog .style-library-card-quick-actions button {
  display: inline-flex;
  min-width: 0;
  min-height: 32px;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--neutral-accent) 26%, var(--v2-line));
  border-radius: 8px;
  background: var(--neutral-accent-soft);
  color: var(--neutral-accent);
  font-size: 11px;
  cursor: pointer;
}

#styleLibraryDialog .style-library-card-quick-actions svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

#styleCatalogDetailDialog {
  width: min(1240px, calc(100vw - 48px));
  height: min(880px, calc(100dvh - 48px));
  max-width: none;
  max-height: none;
  border-radius: 16px;
  box-shadow: none;
}

#styleCatalogDetailDialog .style-catalog-detail-shell {
  min-width: 0;
  min-height: 0;
}

#styleCatalogDetailDialog .style-catalog-detail-shell > header {
  min-height: 66px;
  padding: 14px 20px;
}

#styleCatalogDetailDialog .style-catalog-detail-shell > header strong {
  font-size: 17px;
}

#styleCatalogDetailDialog .style-catalog-detail-shell > header span {
  font-size: 11px;
}

#styleCatalogDetailDialog .style-catalog-detail-shell > nav {
  padding: 8px 16px;
}

#styleCatalogDetailDialog .style-catalog-detail-shell > nav button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 7px;
  font-size: 11px;
  white-space: nowrap;
}

#styleCatalogDetailDialog .style-catalog-detail-body {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(0, 1.3fr) minmax(340px, .9fr);
  overflow: hidden;
}

#styleCatalogDetailContent {
  min-width: 0;
  min-height: 0;
  padding: 20px;
  overflow: auto;
  overscroll-behavior: contain;
}

#styleCatalogDetailDialog .style-catalog-detail-overview {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

#styleCatalogDetailDialog .style-catalog-detail-overview figure {
  display: grid;
  width: 100%;
  min-width: 0;
  place-items: center;
  aspect-ratio: auto;
  border-radius: 10px;
  box-shadow: none;
}

#styleCatalogDetailDialog .style-catalog-detail-overview figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 0;
  object-fit: contain;
}

#styleCatalogDetailDialog .style-preview-attribution {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  padding: 11px 12px;
  border-top: 1px solid var(--v2-line);
  background: var(--v2-panel);
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.6;
  text-align: left;
}

#styleCatalogDetailDialog .style-preview-attribution-work {
  display: grid;
  min-width: 0;
  gap: 3px;
  overflow-wrap: anywhere;
}

#styleCatalogDetailDialog .style-preview-attribution-work > :first-child {
  color: var(--v2-text);
  font-weight: 550;
}

#styleCatalogDetailDialog .style-preview-attribution a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

#styleCatalogDetailDialog .style-preview-attribution a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

#styleCatalogDetailDialog .style-preview-attribution a:focus-visible {
  outline: 2px solid var(--v2-text);
  outline-offset: 3px;
}

#styleCatalogDetailDialog .style-preview-attribution svg {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: -2px;
}

#styleCatalogDetailDialog .style-preview-attribution-license {
  min-width: 0;
  max-width: 34%;
  flex: 0 1 auto;
  overflow-wrap: anywhere;
}

#styleCatalogDetailDialog .style-catalog-detail-overview h2 {
  font-size: 22px;
  line-height: 1.4;
}

#styleCatalogDetailDialog .style-catalog-detail-overview p {
  font-size: 12px;
  line-height: 1.8;
}

#styleCatalogPromptPanel {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 20px;
  border-left: 1px solid var(--v2-line);
  background: color-mix(in srgb, var(--v2-panel-soft) 64%, var(--v2-panel));
}

#styleCatalogPromptPanel > header {
  display: grid;
  gap: 5px;
}

#styleCatalogPromptPanel label {
  color: var(--v2-text);
  font-size: 14px;
  font-weight: 650;
}

#styleCatalogPromptPanel > header span {
  color: var(--v2-muted);
  font-size: 11px;
}

#styleCatalogPromptText {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 15px;
  overflow: auto;
  resize: none;
  border: 1px solid var(--v2-line-strong);
  border-radius: 10px;
  outline: 0;
  background: var(--v2-panel);
  color: var(--v2-text);
  font: inherit;
  font-size: 12px;
  line-height: 1.85;
  overscroll-behavior: contain;
}

html:root body #styleCatalogDetailDialog #styleCatalogPromptText:is(:focus, :focus-visible) {
  border-color: var(--neutral-accent) !important;
  outline: 1px solid var(--neutral-accent) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

#styleCatalogPromptHint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.7;
}

#styleCatalogPromptHint svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-top: 2px;
}

#styleCatalogDetailDialog .style-catalog-detail-shell > footer {
  min-height: 68px;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 20px;
  background: var(--v2-panel);
}

#styleCatalogDetailDialog .style-catalog-detail-secondary-actions,
#styleCatalogDetailDialog .style-catalog-prompt-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#styleCatalogDetailDialog .style-catalog-prompt-actions {
  width: auto !important;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  margin-left: auto;
}

#styleCatalogDetailDialog footer button,
#styleCatalogPromptTarget {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
}

#styleCatalogDetailDialog footer button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

#styleCatalogPromptTarget {
  max-width: 150px;
  border: 1px solid var(--v2-line-strong);
  background: var(--v2-panel);
  color: var(--v2-text);
  cursor: pointer;
}

#styleCatalogPromptCopyBtn {
  border: 1px solid var(--v2-line-strong) !important;
  background: var(--v2-panel) !important;
  color: var(--v2-text) !important;
  box-shadow: none !important;
}

#styleCatalogPromptUseBtn {
  border: 1px solid var(--neutral-accent) !important;
  background: var(--neutral-accent) !important;
  color: var(--neutral-accent-text) !important;
  box-shadow: none !important;
}

#styleCatalogPromptCopyBtn:hover {
  border-color: var(--neutral-accent) !important;
  background: var(--v2-panel-soft) !important;
  color: var(--neutral-accent) !important;
}

#styleCatalogPromptUseBtn:hover {
  border-color: var(--neutral-accent-strong) !important;
  background: var(--neutral-accent-strong) !important;
}

#styleCatalogDetailDialog button:focus-visible,
#styleLibraryDialog button:focus-visible,
#styleLibraryFavoritesBtn:focus-visible,
#styleCatalogPromptTarget:focus-visible {
  outline: 2px solid var(--neutral-accent);
  outline-offset: 3px;
  box-shadow: none;
}

#styleCatalogDetailDialog button:disabled,
#styleCatalogPromptTarget:disabled {
  opacity: .48;
  cursor: not-allowed;
}

#styleCatalogDetailDialog [hidden],
#styleCatalogDetailDialog.style-library-browse #styleCatalogDetailSelectBtn {
  display: none !important;
}

@media (max-width: 1100px) {
  #styleLibraryDialog.style-library-browse .style-library-v3-workspace {
    grid-template-columns: 200px minmax(0, 1fr) !important;
  }

  #styleLibraryDialog.style-library-browse .style-library-v3-grid {
    grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)) !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  #styleCatalogDetailDialog .style-catalog-detail-body {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .9fr);
  }

  #styleCatalogDetailContent,
  #styleCatalogPromptPanel {
    padding: 16px;
  }
}

@media (max-width: 760px) {
  #styleCatalogDetailDialog {
    width: calc(100vw - 20px);
    height: calc(100dvh - 20px);
    border-radius: 12px;
  }

  #styleCatalogDetailDialog .style-catalog-detail-body {
    display: block;
    overflow: auto;
  }

  #styleCatalogDetailContent {
    overflow: visible;
  }

  #styleCatalogPromptPanel {
    min-height: 370px;
    grid-template-rows: auto 260px auto;
    border-top: 1px solid var(--v2-line);
    border-left: 0;
  }

  #styleCatalogDetailDialog .style-catalog-detail-shell > footer {
    padding: 10px 12px;
  }

  #styleCatalogDetailDialog .style-catalog-prompt-actions {
    flex: 1 1 100%;
  }

  #styleCatalogDetailDialog .style-catalog-prompt-actions button {
    flex: 1 1 auto;
  }

  #styleLibraryDialog.style-library-browse .style-library-v3-workspace {
    grid-template-columns: 170px minmax(0, 1fr) !important;
  }

  #styleLibraryDialog.style-library-browse .style-library-v3-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Keep the everyday flow focused on finding a reference and using it. */
#styleLibraryDialog .style-library-v3-workspace {
  grid-template-columns: 232px minmax(0, 1fr) !important;
}

#styleLibraryDialog [hidden] {
  display: none !important;
}

#styleLibraryDialog .style-library-catalog {
  display: flex !important;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

#styleLibraryDialog .style-library-v3-grid {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)) !important;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 16px !important;
  padding: 18px !important;
  overflow: auto;
  overscroll-behavior: contain;
}

#styleLibraryDialog .style-library-catalog-head {
  flex: 0 0 auto;
  min-height: 54px;
  padding: 12px 18px;
  flex-wrap: wrap;
  gap: 8px;
}

#styleLibraryDialog .style-library-catalog-head > div:first-child {
  flex-wrap: wrap;
}

#styleLibraryDialog .style-catalog-context {
  min-height: 48px !important;
  background: var(--v2-panel-soft) !important;
}

#styleLibraryDialog .style-catalog-context strong {
  font-size: 12px;
}

#styleLibraryDialog .style-catalog-context small {
  font-size: 11px;
}

#styleLibraryDialog .style-catalog-views {
  flex-wrap: wrap;
  gap: 4px;
  overflow: visible;
}

#styleLibraryDialog .style-catalog-views > button {
  min-width: 96px;
  font-size: 12px;
}

#styleLibraryDialog :is(.style-catalog-more-views, .style-library-resources) {
  position: relative;
  align-self: center;
  color: var(--v2-muted);
  font-size: 12px;
}

#styleLibraryDialog :is(.style-catalog-more-views, .style-library-resources) > summary {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  list-style: none;
  border-radius: 8px;
  cursor: pointer;
}

#styleLibraryDialog :is(.style-catalog-more-views, .style-library-resources) > summary:hover {
  background: var(--v2-panel-soft);
  color: var(--v2-text);
}

#styleLibraryDialog :is(.style-catalog-more-views, .style-library-resources)[open] > summary {
  color: var(--neutral-accent);
}

#styleLibraryDialog .style-catalog-more-views.has-active-view > summary {
  color: var(--neutral-accent);
}

#styleLibraryDialog :is(.style-catalog-more-views, .style-library-resources) > div {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  min-width: 158px;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--v2-line-strong);
  border-radius: 10px;
  background: var(--v2-panel);
  box-shadow: none;
}

#styleLibraryDialog .style-library-resources > div {
  right: 0;
  left: auto;
}

#styleLibraryDialog :is(.style-catalog-more-views, .style-library-resources) > div > button {
  min-height: 36px !important;
  justify-content: flex-start;
  padding: 0 10px;
  border-radius: 6px;
}

#styleLibraryDialog .style-catalog-more-views > div > button::after {
  content: none;
}

#styleLibraryDialog .style-catalog-facet-panel > .style-library-search {
  border: 1px solid var(--v2-line) !important;
  border-radius: 8px !important;
  background: var(--v2-panel) !important;
}

#styleLibraryDialog .style-library-search input {
  min-width: 0;
  font-size: 12px;
}

#styleLibraryDialog .style-library-filters {
  gap: 0;
  padding-top: 6px;
}

#styleLibraryDialog .style-filter-group {
  min-width: 0;
  padding: 8px 0;
  border-top: 1px solid var(--v2-line);
}

#styleLibraryDialog .style-filter-group > summary {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--v2-text);
  list-style: none;
  cursor: pointer;
}

#styleLibraryDialog .style-filter-group > summary strong {
  font-size: 12px;
  font-weight: 550;
}

#styleLibraryDialog :is(.style-filter-group, .style-catalog-more-views, .style-library-resources, #styleCatalogPromptPanel) > summary::-webkit-details-marker {
  display: none;
}

#styleLibraryDialog .style-filter-group > summary svg,
#styleLibraryDialog :is(.style-catalog-more-views, .style-library-resources) > summary svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: currentColor;
  transition: transform .15s ease;
}

#styleLibraryDialog .style-filter-group[open] > summary svg {
  transform: rotate(180deg);
}

#styleLibraryDialog .style-filter-options {
  display: grid;
  gap: 4px;
  padding-top: 6px;
}

#styleLibraryDialog .style-filter-options > button,
#styleLibraryDialog .style-filter-options section button {
  display: flex;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid transparent !important;
  border-radius: 6px;
  background: transparent !important;
  color: var(--v2-muted) !important;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  box-shadow: none !important;
}

#styleLibraryDialog .style-filter-options button:hover {
  background: var(--v2-panel-soft) !important;
  color: var(--v2-text) !important;
}

#styleLibraryDialog .style-filter-options button.active {
  border-color: color-mix(in srgb, var(--neutral-accent) 30%, var(--v2-line)) !important;
  background: var(--neutral-accent-soft) !important;
  color: var(--neutral-accent) !important;
}

#styleLibraryDialog .style-filter-options button > span {
  white-space: normal;
  line-height: 1.4;
}

#styleLibraryDialog .style-filter-options button svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

#styleLibraryDialog .style-filter-options .style-filter-group {
  padding-top: 3px;
  border-top: 0;
}

#styleLibraryDialog .style-filter-options .style-filter-group > summary {
  color: var(--v2-muted);
}

#styleLibraryDialog .style-filter-options section {
  display: grid;
  gap: 4px;
  padding: 4px 0 8px;
}

#styleLibraryDialog .style-filter-options section > div {
  display: grid;
  gap: 4px;
}

#styleLibraryDialog .style-filter-options h4 {
  margin: 0 0 3px;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 500;
}

#styleLibraryDialog :is(summary, .style-filter-options button):focus-visible {
  outline: 2px solid var(--neutral-accent);
  outline-offset: 2px;
}

#styleLibraryDialog .style-library-v3-card {
  border: 1px solid var(--v2-line) !important;
  border-radius: 10px !important;
  background: var(--v2-panel) !important;
  box-shadow: none !important;
  transform: none !important;
}

#styleLibraryDialog .style-library-v3-card:hover {
  border-color: var(--v2-line-strong) !important;
}

#styleLibraryDialog .style-library-v3-card.selected {
  border-color: var(--neutral-accent) !important;
}

#styleLibraryDialog .style-library-v3-card .style-library-card-copy {
  min-height: 0 !important;
  gap: 8px;
  padding: 13px 14px 10px !important;
  background: var(--v2-panel) !important;
}

#styleLibraryDialog .style-library-v3-card .style-library-card-title strong {
  color: var(--v2-text) !important;
  font-size: 14px !important;
  line-height: 1.45;
}

#styleLibraryDialog .style-library-v3-card-tags {
  flex-wrap: wrap;
  gap: 6px;
}

#styleLibraryDialog .style-library-v3-card-tags em {
  padding: 0;
  background: transparent;
  color: var(--v2-muted);
  font-size: 11px;
  line-height: 1.5;
}

#styleLibraryDialog .style-library-v3-card-tags em + em::before {
  margin-right: 6px;
  content: "·";
}

#styleLibraryDialog .style-library-v3-card .style-library-palette i {
  width: 12px;
  height: 12px;
}

#styleLibraryDialog .style-library-v3-card-actions {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 10px 10px;
  opacity: 1;
}

#styleLibraryDialog .style-library-v3-card-actions button {
  display: inline-flex;
  width: auto;
  min-height: 34px;
  height: auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--v2-panel);
  color: var(--v2-muted);
  font-size: 11px;
  cursor: pointer;
  box-shadow: none;
}

#styleLibraryDialog .style-library-v3-card-actions button:hover {
  background: var(--v2-panel-soft);
  color: var(--v2-text);
}

#styleLibraryDialog .style-library-v3-card-actions .style-card-open {
  justify-content: flex-start;
  color: var(--v2-text);
}

#styleLibraryDialog .style-library-v3-card-actions button[aria-pressed="true"] {
  color: var(--neutral-accent);
  background: var(--neutral-accent-soft);
}

#styleLibraryDialog .style-library-card-check {
  display: none;
}

#styleLibraryDialog .style-library-selection-panel {
  position: absolute !important;
  z-index: 20;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(300px, 100%) !important;
  border-left: 1px solid var(--v2-line);
  box-shadow: none !important;
}

#styleLibraryDialog.selection-collapsed .style-library-selection-panel {
  display: none !important;
}

#styleCatalogDetailDialog:not(.pdf-redesign-style-mode) #styleCatalogDetailSelectBtn {
  display: none !important;
}

#styleLibraryDialog .style-match-panel {
  flex: 0 0 auto;
  background: var(--v2-panel) !important;
}

#styleLibraryDialog .style-catalog-load-more {
  flex: 0 0 auto;
  align-self: center;
  min-width: 190px;
  margin: 8px 18px 16px;
}

#styleLibraryDialog details:not([open]) > :not(summary),
#styleCatalogDetailDialog details:not([open]) > :not(summary) {
  display: none !important;
}

/* The full reference leads; editable instructions stay one click away. */
#styleCatalogDetailDialog .style-catalog-detail-body {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
}

#styleCatalogDetailDialog .style-catalog-detail-body:has(#styleCatalogPromptPanel[open]) {
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, .9fr);
  grid-template-rows: minmax(0, 1fr);
}

#styleCatalogDetailDialog #styleCatalogPromptPanel {
  display: block;
  min-height: 0;
  padding: 0;
  border-top: 1px solid var(--v2-line);
  border-left: 0;
  background: var(--v2-panel);
}

#styleCatalogDetailDialog #styleCatalogPromptPanel > summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  color: var(--v2-text);
  list-style: none;
  cursor: pointer;
}

#styleCatalogDetailDialog #styleCatalogPromptPanel > summary strong {
  font-size: 12px;
  font-weight: 550;
}

#styleCatalogDetailDialog #styleCatalogPromptPanel > summary > span {
  color: var(--v2-muted);
  font-size: 11px;
}

#styleCatalogDetailDialog #styleCatalogPromptPanel > summary > svg {
  width: 14px;
  height: 14px;
  margin-left: auto;
}

#styleCatalogDetailDialog #styleCatalogPromptPanel[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-top: 0;
  border-left: 1px solid var(--v2-line);
}

#styleCatalogDetailDialog #styleCatalogPromptPanel[open] > summary > svg {
  transform: rotate(180deg);
}

#styleCatalogDetailDialog #styleCatalogPromptPanel > div {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 0 20px 20px;
}

#styleCatalogDetailDialog #styleCatalogPromptPanel > div > header {
  display: grid;
  gap: 4px;
}

#styleCatalogDetailDialog #styleCatalogPromptPanel > div > header > span {
  color: var(--v2-muted);
  font-size: 11px;
}

#styleCatalogDetailDialog #styleCatalogPromptPanel > summary:focus-visible {
  outline: 2px solid var(--neutral-accent);
  outline-offset: -3px;
}

#styleCatalogDetailDialog .style-catalog-detail-overview figure {
  max-width: 920px;
  margin-inline: auto;
}

@media (max-width: 900px) {
  #styleLibraryDialog .style-library-v3-workspace,
  #styleLibraryDialog.style-library-browse .style-library-v3-workspace {
    grid-template-columns: 196px minmax(0, 1fr) !important;
  }

  #styleLibraryDialog .style-library-v3-grid,
  #styleLibraryDialog.style-library-browse .style-library-v3-grid {
    grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)) !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  #styleCatalogDetailDialog .style-catalog-detail-body:has(#styleCatalogPromptPanel[open]) {
    display: block;
    overflow: auto;
  }

  #styleCatalogDetailDialog .style-catalog-detail-body:has(#styleCatalogPromptPanel[open]) #styleCatalogDetailContent {
    overflow: visible;
  }

  #styleCatalogDetailDialog #styleCatalogPromptPanel[open] {
    min-height: 390px;
    grid-template-rows: auto 340px;
    border-top: 1px solid var(--v2-line);
    border-left: 0;
  }
}

@media (max-width: 600px) {
  #styleLibraryDialog .style-library-v3-workspace,
  #styleLibraryDialog.style-library-browse .style-library-v3-workspace {
    grid-template-columns: 150px minmax(0, 1fr) !important;
  }

  #styleLibraryDialog .style-library-v3-grid,
  #styleLibraryDialog.style-library-browse .style-library-v3-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 10px !important;
  }

  #styleLibraryDialog .style-catalog-context small,
  #styleLibraryDialog .style-library-resources,
  #styleLibraryDialog .style-library-search svg {
    display: none;
  }

  #styleLibraryDialog .style-library-search {
    margin-inline: 8px !important;
    padding-inline: 7px;
  }

  #styleLibraryDialog .style-filter-group > summary strong,
  #styleLibraryDialog .style-filter-options > button {
    font-size: 11px;
  }

  #styleCatalogDetailDialog .style-catalog-detail-body {
    display: grid;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  #styleLibraryDialog .style-filter-group > summary svg {
    transition: none;
  }
}

@layer assistantChrome {
  html:root[data-theme] body:not(#appShell) #styleLibraryDialog #styleLibrarySearch:is(:hover, :focus, :focus-visible) {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
}

/* ===== merged from /home-dashboard-responsive.css ===== */
/* The work dashboard keeps its action cards readable as the window is resized. */
@media (min-width: 981px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 14px 0 22px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions > button {
    display: flex !important;
    min-width: 0 !important;
    min-height: 116px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 14px 15px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #17233a !important;
    text-align: left !important;
    box-shadow: 0 3px 12px rgb(27 53 86 / 5%) !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions > button:hover {
    border-color: #95bffc !important;
    background: #f6faff !important;
    box-shadow: 0 8px 20px rgb(31 78 145 / 10%) !important;
    transform: translateY(-2px) !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions > button:last-child {
    grid-column: span 2 !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    background: linear-gradient(125deg, #f1f7ff 0%, #ffffff 100%) !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions > button:focus-visible {
    outline: 3px solid #87baff !important;
    outline-offset: 2px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions .quick-action-icon {
    display: grid !important;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: #1677ff !important;
    color: #ffffff !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions > button > span:last-child {
    display: flex !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions strong {
    max-width: 100% !important;
    color: #17233a !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions small {
    max-width: 100% !important;
    color: #68778c !important;
    font-size: 11px !important;
    font-weight: 450 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html:root[data-theme="dark"] body[data-project-home-mode="work"] #step-create .project-home-quick-actions > button {
    border-color: #3a414b !important;
    background: #292d35 !important;
    color: #f4f7fb !important;
    box-shadow: 0 4px 14px rgb(0 0 0 / 10%) !important;
  }

  html:root[data-theme="dark"] body[data-project-home-mode="work"] #step-create .project-home-quick-actions > button:hover {
    border-color: #4a86d4 !important;
    background: #303846 !important;
    box-shadow: 0 8px 20px rgb(0 0 0 / 18%) !important;
  }

  html:root[data-theme="dark"] body[data-project-home-mode="work"] #step-create .project-home-quick-actions > button:last-child {
    background: linear-gradient(125deg, #263a59 0%, #292d35 100%) !important;
  }

  html:root[data-theme="dark"] body[data-project-home-mode="work"] #step-create .project-home-quick-actions strong {
    color: #f4f7fb !important;
  }

  html:root[data-theme="dark"] body[data-project-home-mode="work"] #step-create .project-home-quick-actions small {
    color: #a8b4c2 !important;
  }
}

@media (min-width: 1600px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-quick-actions > button:last-child {
    grid-column: auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
}

/* ===== merged from /ip-brand-overrides.css ===== */
/* Xiaopei customer IP: use one transparent mascot asset in the three assistant
   entry points while keeping the controls' hit areas and layout unchanged. */
html:root body #assistantFloatLauncher.assistant-float-launcher {
  overflow: visible !important;
}

html:root body #assistantFloatLauncher.assistant-float-launcher > .assistant-launcher-ip {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  pointer-events: none !important;
  filter: drop-shadow(0 4px 7px rgb(0 0 0 / 25%)) !important;
}

html:root body #assistantFloatLauncher.assistant-float-launcher > :is(.fluent-icon-shell, svg) {
  display: none !important;
}

html:root body #assistantDrawer .assistant-header .assistant-mark {
  display: grid !important;
  width: 38px !important;
  height: 38px !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
}

html:root body #assistantDrawer .assistant-header .assistant-brand-mark {
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 3px 6px rgb(0 0 0 / 22%)) !important;
}

html:root body #projectHomeChat .project-home-chat-intro > #assistantIpVoiceToggle.assistant-ip-buddy .assistant-ip-buddy-art {
  width: 92px !important;
  height: 92px !important;
  overflow: visible !important;
  background: transparent !important;
}

html:root body #projectHomeChat .project-home-chat-intro > #assistantIpVoiceToggle.assistant-ip-buddy .assistant-ip-buddy-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 12px rgb(0 0 0 / 22%)) !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art img {
  width: 102px !important;
  height: 102px !important;
  max-width: 102px !important;
  max-height: 102px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 12px 17px rgb(22 119 255 / 32%)) !important;
}

@media (min-width: 981px) and (max-width: 1279px) {
  html:root[data-theme] body[data-project-home-mode="work"] #step-create .project-home-heading-art img {
    width: 78px !important;
    height: 78px !important;
    max-width: 78px !important;
    max-height: 78px !important;
  }
}

@media (max-width: 700px) {
  html:root body #assistantFloatLauncher.assistant-float-launcher > .assistant-launcher-ip {
    width: 34px !important;
    height: 34px !important;
  }
}

/* /chat-conversation.css */
/* ==== consolidated from /chat-conversation.css (cascade order preserved) ==== */
/* Focused conversation surface. This stylesheet loads after the legacy layout overrides. */
html:root body[data-project-home-mode="chat"] {
  --chat-bg: #ffffff;
  --chat-panel: #f7f7f8;
  --chat-input: #ffffff;
  --chat-user: #f4f4f4;
  --chat-text: #25252b;
  --chat-muted: #71717a;
  --chat-line: #e4e4e7;
  --chat-accent: var(--neutral-accent, #a86f25);
  --chat-copy-size: 14px;
  --chat-copy-leading: 1.7;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] {
  --chat-bg: #212121;
  --chat-panel: #181818;
  --chat-input: #303030;
  --chat-user: #2f2f2f;
  --chat-text: #ececf1;
  --chat-muted: #a1a1aa;
  --chat-line: #424242;
  --chat-accent: var(--neutral-accent);
}

html:root[data-assistant-font-size="small"] body[data-project-home-mode="chat"] {
  --chat-copy-size: 13px;
  --chat-copy-leading: 1.65;
}

html:root[data-assistant-font-size="large"] body[data-project-home-mode="chat"] {
  --chat-copy-size: 16px;
  --chat-copy-leading: 1.75;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantMessages,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-content,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantInput {
  font-size: var(--chat-copy-size) !important;
  line-height: var(--chat-copy-leading) !important;
}

@media (min-width: 1024px) {
  html:root body[data-project-home-mode="chat"] #step-create.project-start-screen,
  html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell,
  html:root body[data-project-home-mode="chat"] #step-create .project-home-content,
  html:root body[data-project-home-mode="chat"] #step-create .project-home-chat,
  html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost {
    background: var(--chat-bg) !important;
    background-image: none !important;
    color: var(--chat-text) !important;
  }

  html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell {
    grid-template-columns: 248px minmax(0, 1fr) !important;
  }

  html:root body[data-project-home-mode="chat"] #step-create .project-home-nav {
    width: 248px !important;
    min-width: 248px !important;
    padding: 22px 16px 18px !important;
    border-right: 1px solid var(--chat-line) !important;
    background: var(--chat-panel) !important;
    color: var(--chat-text) !important;
  }

  html:root body[data-project-home-mode="chat"] #step-create .project-home-brand {
    margin-bottom: 18px !important;
  }

  html:root body[data-project-home-mode="chat"] #step-create .project-home-mode-switch {
    top: 12px !important;
    right: 22px !important;
    left: auto !important;
    width: 188px !important;
    height: 38px !important;
    transform: none !important;
    border: 1px solid var(--chat-line) !important;
    border-radius: 9px !important;
    background: var(--chat-bg) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  html:root body[data-project-home-mode="chat"] #step-create .project-home-mode-switch button {
    min-height: 30px !important;
    color: var(--chat-muted) !important;
  }

  html:root body[data-project-home-mode="chat"] #step-create .project-home-mode-switch button.active {
    border-color: transparent !important;
    background: var(--chat-panel) !important;
    color: var(--chat-text) !important;
    box-shadow: none !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeChat > .project-home-chat-intro {
    display: none !important;
  }

  html:root body[data-project-home-mode="chat"] #step-create .project-home-chat {
    padding: 56px 22px 8px !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--chat-text) !important;
    box-shadow: none !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded > :is(
    #assistantSideWorkspace, .assistant-context-block, #assistantBriefSummary,
    #assistantDesignHub, .assistant-brief-actions, .assistant-composer-hint
  ) {
    display: none !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded > #assistantMessages {
    display: block !important;
    flex: 1 1 auto !important;
    width: min(860px, 100%) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 28px 26px 34px !important;
    overflow: auto !important;
    background: transparent !important;
    color: var(--chat-text) !important;
    scrollbar-gutter: stable !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded .assistant-message {
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto 24px !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded .assistant-message-content {
    max-width: 100% !important;
    padding: 2px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--chat-text) !important;
    font-size: var(--chat-copy-size) !important;
    line-height: var(--chat-copy-leading) !important;
    box-shadow: none !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded .assistant-message.user {
    justify-content: flex-end !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded .assistant-message.user .assistant-message-content {
    width: fit-content !important;
    max-width: min(76%, 620px) !important;
    padding: 10px 15px !important;
    border-radius: 18px 18px 5px 18px !important;
    background: var(--chat-user) !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer.assistant-composer {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 38px 42px !important;
    grid-template-rows: minmax(52px, auto) 34px !important;
    gap: 4px 8px !important;
    flex: 0 0 auto !important;
    width: min(860px, calc(100% - 32px)) !important;
    min-height: 0 !important;
    margin: 0 auto 10px !important;
    padding: 9px 12px 7px !important;
    border: 1px solid var(--chat-line) !important;
    border-radius: 18px !important;
    background: var(--chat-input) !important;
    color: var(--chat-text) !important;
    box-shadow: 0 2px 14px rgb(0 0 0 / 7%) !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > #assistantAddBtn {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    align-self: end !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--chat-muted) !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > #assistantInput {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 52px !important;
    max-height: 180px !important;
    padding: 12px 2px !important;
    overflow-y: auto !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--chat-text) !important;
    font-size: var(--chat-copy-size) !important;
    line-height: 1.55 !important;
    box-shadow: none !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > #assistantVoiceInputBtn {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: end !important;
    color: var(--chat-muted) !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > #assistantSendBtn {
    grid-column: 4 !important;
    grid-row: 1 !important;
    align-self: end !important;
    border-radius: 12px !important;
    background: var(--neutral-accent, #a86f25) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > .assistant-composer-tools {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    overflow: visible !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer .assistant-composer-tools > :is(.assistant-composer-copy-tools, #assistantSkillsWrap, #assistantAdvancedOptionsBtn, #assistantSecondaryTools) {
    display: none !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer .assistant-composer-tools > :is(#assistantModeSwitch, #assistantImageSettingsBtn, .assistant-quick-tools-wrap) {
    display: flex !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: min(240px, 38vw) !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer .assistant-composer-tools :is(#assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn) {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    justify-content: flex-start !important;
    padding: 0 9px !important;
    border: 1px solid var(--chat-line) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--chat-muted) !important;
    font-size: 11px !important;
    box-shadow: none !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer #assistantImageSettingsBtn {
    color: var(--chat-text) !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer #assistantQuickToolsBtn {
    border-color: transparent !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer:focus-within {
    border-color: color-mix(in srgb, var(--chat-accent) 55%, var(--chat-line)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-accent) 13%, transparent), 0 2px 14px rgb(0 0 0 / 7%) !important;
  }
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer.embedded .assistant-empty,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer.embedded .assistant-empty strong { color: var(--chat-text) !important; }
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer.embedded .assistant-empty,
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer.embedded .assistant-empty strong { color: var(--chat-text) !important; }
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer.embedded .assistant-message.user .assistant-message-content { background: var(--chat-user) !important; }

html:root body[data-project-home-mode="chat"] .assistant-attachment-upload-status {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  color: var(--chat-muted);
  font-size: 12px;
}

html:root body[data-project-home-mode="chat"] .assistant-attachment-upload-status[hidden] { display: none !important; }

/* Pasted/uploaded images should be visible in the composer, just like the
   ChatGPT attachment strip.  Keep this scoped to conversation mode so the
   existing workbench attachment chips retain their compact layout. */
html:root body[data-project-home-mode="chat"] #assistantAttachments {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  width: min(860px, calc(100% - 32px));
  margin: 0 auto 6px;
  padding: 0;
  overflow: visible;
}

html:root body[data-project-home-mode="chat"] #assistantAttachments .assistant-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: min(320px, 100%);
  min-height: 46px;
  padding: 4px 7px 4px 4px;
  border: 1px solid var(--chat-line);
  border-radius: 12px;
  background: var(--chat-panel);
  color: var(--chat-text);
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

html:root body[data-project-home-mode="chat"] #assistantAttachments .assistant-attachment-chip .assistant-attachment-thumb {
  display: inline-flex;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--chat-line);
  border-radius: 8px;
  background: var(--chat-input);
  color: var(--chat-muted);
  cursor: pointer;
}

html:root body[data-project-home-mode="chat"] #assistantAttachments .assistant-attachment-thumb:hover,
html:root body[data-project-home-mode="chat"] #assistantAttachments .assistant-attachment-thumb:focus-visible {
  border-color: var(--chat-accent);
  outline: 2px solid color-mix(in srgb, var(--chat-accent) 28%, transparent);
  outline-offset: 1px;
}

html:root body[data-project-home-mode="chat"] #assistantAttachments .assistant-attachment-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html:root body[data-project-home-mode="chat"] #assistantAttachments .assistant-attachment-name {
  min-width: 0;
  max-width: 170px;
  overflow: hidden;
  color: var(--chat-text);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html:root body[data-project-home-mode="chat"] #assistantAttachments .assistant-attachment-chip > em {
  flex: 0 0 auto;
  color: var(--chat-muted);
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

html:root body[data-project-home-mode="chat"] #assistantAttachments .assistant-attachment-redaction-link,
html:root body[data-project-home-mode="chat"] #assistantAttachments .assistant-attachment-remove {
  flex: 0 0 auto;
  min-width: 24px;
  min-height: 24px;
  padding: 0 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--chat-muted);
  font-size: 10px;
  cursor: pointer;
}

html:root body[data-project-home-mode="chat"] #assistantAttachments .assistant-attachment-redaction-link:hover,
html:root body[data-project-home-mode="chat"] #assistantAttachments .assistant-attachment-remove:hover,
html:root body[data-project-home-mode="chat"] #assistantAttachments .assistant-attachment-redaction-link:focus-visible,
html:root body[data-project-home-mode="chat"] #assistantAttachments .assistant-attachment-remove:focus-visible {
  background: color-mix(in srgb, var(--chat-line) 65%, transparent);
  color: var(--chat-text);
}

@media (max-width: 767px) {
  html:root body[data-project-home-mode="chat"] #assistantAttachments {
    width: calc(100% - 20px);
  }
  html:root body[data-project-home-mode="chat"] #assistantAttachments .assistant-attachment-name {
    max-width: min(38vw, 150px);
  }
}

html:root body[data-project-home-mode="chat"] .assistant-tools-preferences {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--assistant-tools-line, #dce3ed);
}

html:root body[data-project-home-mode="chat"] .assistant-tools-preferences h3 {
  margin: 0 0 8px;
  font-size: 12px;
}

html:root body[data-project-home-mode="chat"] .assistant-tools-preferences .assistant-tools-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html:root body[data-project-home-mode="chat"] .assistant-tools-preferences button[aria-pressed="true"] {
  border-color: var(--chat-accent);
  color: var(--chat-accent);
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* The legacy workspace forces a 1024px canvas below 980px. In chat mode,
     use the actual viewport so the composer and model controls remain usable. */
  html:root,
  html:root body,
  html:root body .app-shell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html:root body[data-project-home-mode="chat"] .app-shell,
  html:root body[data-project-home-mode="chat"] .workspace {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  html:root body[data-project-home-mode="chat"] #step-create.project-start-screen {
    position: fixed !important;
    inset: 56px 0 0 !important;
    width: 100vw !important;
    height: calc(100dvh - 56px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--chat-bg) !important;
  }

  html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  html:root body[data-project-home-mode="chat"] #step-create .project-home-nav {
    display: none !important;
  }

  html:root body[data-project-home-mode="chat"] .project-home-content {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 50px 12px 8px !important;
    overflow: hidden !important;
    background: var(--chat-bg) !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeWork.hidden {
    display: none !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeModeSwitch {
    position: absolute !important;
    display: flex !important;
    z-index: 3 !important;
  }

  html:root body[data-project-home-mode="chat"] .project-home-mode-switch {
    top: 7px !important;
    right: 12px !important;
    left: auto !important;
    width: 180px !important;
    height: 36px !important;
    transform: none !important;
    background: var(--chat-bg) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeChat {
    display: flex !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  html:root body[data-project-home-mode="chat"] #projectHomeChat > .project-home-chat-intro { display: none !important; }
  html:root body[data-project-home-mode="chat"] .project-home-chat { display: flex !important; flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; }
  html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost { display: flex !important; flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; background: var(--chat-bg) !important; }
  html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.embedded { display: flex !important; flex-direction: column !important; height: 100% !important; background: transparent !important; }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded > :is(#assistantSideWorkspace, .assistant-context-block, #assistantBriefSummary, #assistantDesignHub, .assistant-brief-actions, .assistant-composer-hint) { display: none !important; }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded > #assistantMessages { flex: 1 1 auto !important; min-height: 0 !important; padding: 20px 12px 28px !important; background: transparent !important; }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded #assistantComposer { grid-template-rows: minmax(52px, auto) 34px !important; width: calc(100% - 12px) !important; margin: 0 auto 6px !important; background: var(--chat-input) !important; border-color: var(--chat-line) !important; }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded #assistantComposer > #assistantInput { height: auto !important; min-height: 52px !important; max-height: 160px !important; font-size: var(--chat-copy-size) !important; }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded .assistant-message-content { font-size: var(--chat-copy-size) !important; line-height: var(--chat-copy-leading) !important; color: var(--chat-text) !important; }
}

/* Absolute last rule: grayscale chrome for the chat tab only. */
html:root body[data-project-home-mode="chat"] .app-shell > .topbar :is(
  #luxinVoiceLauncher .luxin-avatar,
  #luxinVoiceLauncher .luxin-avatar svg,
  #licensePoints svg,
  #advancedToolsBtn svg,
  .topbar-utility-action svg,
  .top-actions button svg
) {
  color: var(--chat-muted) !important;
  stroke: var(--chat-muted) !important;
  fill: none !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav :is(
  .assistant-new-conversation svg,
  .assistant-new-conversation i,
  .assistant-side-tabs button svg,
  .assistant-side-tabs button i
) {
  color: var(--chat-muted) !important;
  stroke: var(--chat-muted) !important;
  fill: none !important;
}

html:root body[data-project-home-mode="chat"] .app-shell > .topbar .top-actions,
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav :is(
  .assistant-new-conversation,
  .assistant-side-tabs button
) {
  filter: grayscale(1) !important;
}

/* Keep the mode switch compact after responsive legacy rules. */
html:root body[data-project-home-mode="chat"] #projectHomeModeSwitch,
html:root body[data-project-home-mode="chat"] .project-home-mode-switch {
  width: 112px !important;
  height: 36px !important;
  padding: 3px !important;
  box-sizing: border-box !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeModeSwitch > button,
html:root body[data-project-home-mode="chat"] .project-home-mode-switch > button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* GPT-like neutral chrome for the conversation surface. Keep the product
   accent available for the send action and focus ring, but make navigation,
   selected rows, and mode controls quiet so the conversation remains the
   visual focus in both themes. This scope is limited to chat mode. */
html:root body[data-project-home-mode="chat"] #step-create .project-home-nav {
  background: var(--chat-panel) !important;
  border-right-color: var(--chat-line) !important;
  box-shadow: none !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] {
  --chat-bg: #ffffff;
  --chat-panel: #f7f7f8;
  --chat-input: #ffffff;
  --chat-user: #f4f4f4;
  --chat-text: #2f2f2f;
  --chat-muted: #6b6b6b;
  --chat-line: #e5e5e5;
  --chat-accent: var(--neutral-accent, #a86f25);
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] {
  --chat-bg: #212121;
  --chat-panel: #171717;
  --chat-input: #2f2f2f;
  --chat-user: #2f2f2f;
  --chat-text: #ececec;
  --chat-muted: #b4b4b4;
  --chat-line: #3f3f3f;
  --chat-accent: var(--neutral-accent);
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-nav-item {
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--chat-muted) !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-nav-item:hover,
html:root body[data-project-home-mode="chat"] #step-create .project-home-nav-item:focus-visible {
  background: color-mix(in srgb, var(--chat-text) 7%, transparent) !important;
  color: var(--chat-text) !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-nav-item.active {
  background: color-mix(in srgb, var(--chat-text) 9%, transparent) !important;
  color: var(--chat-text) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-nav-item > :is(svg, i, .fluent-icon-shell, .fluent-icon) {
  color: currentColor !important;
  filter: none !important;
}

/* The common workbench primary-button rule also targets conversation
   controls. These higher-specificity neutral rules intentionally win so the
   chat rail stays black/white/gray like the GPT web client. */
html:root body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-new-conversation,
html:root body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-side-tabs button,
html:root body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-side-tabs button.active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  color: var(--chat-muted) !important;
  -webkit-text-fill-color: var(--chat-muted) !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-new-conversation,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-side-tabs button,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-side-tabs button.active {
  color: #b4b4b4 !important;
  -webkit-text-fill-color: #b4b4b4 !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-new-conversation:hover,
html:root body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-new-conversation:focus-visible,
html:root body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-side-tabs button:hover,
html:root body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-side-tabs button:focus-visible,
html:root body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-side-tabs button.active {
  background: color-mix(in srgb, var(--chat-text) 9%, transparent) !important;
  background-color: color-mix(in srgb, var(--chat-text) 9%, transparent) !important;
  background-image: none !important;
  color: var(--chat-text) !important;
  -webkit-text-fill-color: var(--chat-text) !important;
}

/* The conversation history is rendered inside a nested assistant sidebar.
   Bring those controls onto the same quiet neutral treatment as the GPT web
   sidebar; the old workbench stylesheet otherwise paints them blue. */
html:root body[data-project-home-mode="chat"] .project-home-conversation-nav .assistant-new-conversation,
html:root body[data-project-home-mode="chat"] .project-home-conversation-nav .assistant-side-tabs button {
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--chat-muted) !important;
  -webkit-text-fill-color: var(--chat-muted) !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] .project-home-conversation-nav .assistant-new-conversation:hover,
html:root body[data-project-home-mode="chat"] .project-home-conversation-nav .assistant-new-conversation:focus-visible,
html:root body[data-project-home-mode="chat"] .project-home-conversation-nav .assistant-side-tabs button:hover,
html:root body[data-project-home-mode="chat"] .project-home-conversation-nav .assistant-side-tabs button:focus-visible,
html:root body[data-project-home-mode="chat"] .project-home-conversation-nav .assistant-side-tabs button.active {
  background: color-mix(in srgb, var(--chat-text) 9%, transparent) !important;
  background-color: color-mix(in srgb, var(--chat-text) 9%, transparent) !important;
  background-image: none !important;
  color: var(--chat-text) !important;
  -webkit-text-fill-color: var(--chat-text) !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] .project-home-conversation-nav .assistant-new-conversation > :is(svg, i, .fluent-icon-shell, .fluent-icon),
html:root body[data-project-home-mode="chat"] .project-home-conversation-nav .assistant-side-tabs button > :is(svg, i, .fluent-icon-shell, .fluent-icon) {
  color: currentColor !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-mode-switch {
  border-color: var(--chat-line) !important;
  background: var(--chat-panel) !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%) !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-mode-switch {
  display: inline-flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 112px !important;
  height: 36px !important;
  padding: 3px !important;
  border-radius: 9px !important;
  box-sizing: border-box !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-mode-switch button {
  display: inline-flex !important;
  flex: 1 1 0 !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-mode-switch button {
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--chat-muted) !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-mode-switch button:hover,
html:root body[data-project-home-mode="chat"] #step-create .project-home-mode-switch button:focus-visible,
html:root body[data-project-home-mode="chat"] #step-create .project-home-mode-switch button.active {
  background: color-mix(in srgb, var(--chat-text) 8%, transparent) !important;
  color: var(--chat-text) !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer {
  border-color: var(--chat-line) !important;
  background: var(--chat-input) !important;
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%) !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer:focus-within {
  border-color: color-mix(in srgb, var(--chat-accent) 60%, var(--chat-line)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--chat-accent) 14%, transparent), 0 1px 3px rgb(0 0 0 / 8%) !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn {
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  background-image: none !important;
  border-color: #2f2f2f !important;
  color: #fff !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn:disabled {
  opacity: .45 !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn {
  background: #ececec !important;
  background-color: #ececec !important;
  border-color: #ececec !important;
  color: #171717 !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-composer-tools :is(#assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn) {
  border-color: var(--chat-line) !important;
  background: transparent !important;
  color: var(--chat-muted) !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-composer-tools :is(#assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn):hover,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-composer-tools :is(#assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn):focus-visible {
  background: color-mix(in srgb, var(--chat-text) 7%, transparent) !important;
  color: var(--chat-text) !important;
}

@media (max-width: 767px) {
  html:root body[data-project-home-mode="chat"] .project-home-shell {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html:root body[data-project-home-mode="chat"] .project-home-shell > .project-home-content {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeChat,
  html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Final theme guard (must stay after all responsive/legacy overrides). */
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-new-conversation,
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-side-tabs button,
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-side-tabs button.active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #6b6b6b !important;
  -webkit-text-fill-color: #6b6b6b !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-new-conversation,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-side-tabs button,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-side-tabs button.active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #b4b4b4 !important;
  -webkit-text-fill-color: #b4b4b4 !important;
  box-shadow: none !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn {
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  background-image: none !important;
  border-color: #2f2f2f !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn {
  background: #ececec !important;
  background-color: #ececec !important;
  background-image: none !important;
  border-color: #ececec !important;
  color: #171717 !important;
  box-shadow: none !important;
}

/* FINAL CHAT SHELL OVERRIDE
   This must remain the last block in the stylesheet. The legacy responsive
   layers contain broad `html body .app-shell` and absolute home-panel rules;
   these scoped declarations restore a real full-height conversation layout
   after those layers have loaded. */
html:root body[data-project-home-mode="chat"] .app-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

html:root body[data-project-home-mode="chat"] .app-shell > .workspace {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html:root body[data-project-home-mode="chat"] #step-create.project-start-screen {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell {
  display: grid !important;
  grid-template-columns: 256px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav {
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
}

html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-content {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  flex-direction: column !important;
  position: relative !important;
  inset: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeChat {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 58px 0 0 !important;
}

html:root body[data-project-home-mode="chat"] .project-home-chat {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.embedded {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex-direction: column !important;
}

@media (max-width: 1023px) {
  html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav {
    display: none !important;
  }

  html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-content {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeChat {
    padding-top: 54px !important;
  }
}

/* Final surface color pass: the header, conversation area and the breathing
   room around the composer are one continuous chat canvas.  Keep the input
   card itself raised so it remains easy to find. */
html:root body[data-project-home-mode="chat"] .project-home-chat-topbar,
html:root body[data-project-home-mode="chat"] .project-home-content,
html:root body[data-project-home-mode="chat"] #projectHomeChat,
html:root body[data-project-home-mode="chat"] .project-home-chat,
html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"],
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages {
  background: var(--chat-bg) !important;
  background-color: var(--chat-bg) !important;
  background-image: none !important;
}

/* The history and project switchers are two separate rail entries.  Put
   Projects first and History below it, matching the reference sidebar rather
   than rendering them as a two-column tab strip. */
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-tabs {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 4px !important;
  width: 100% !important;
  margin: 0 0 10px !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-tabs > button {
  display: flex !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 10px !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-tabs > button[data-assistant-side-view="projects"] {
  order: 1 !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-tabs > button[data-assistant-side-view="history"] {
  order: 2 !important;
}

/* Keep the conversation chrome on one continuous background.  The legacy
   assistant surface paints #assistantMessages with a darker panel and the
   home shell paints the top/bottom bands separately, which creates the two
   visible colour strips around the composer.  In chat mode those regions are
   one canvas; the composer itself remains raised above it. */
html:root body[data-project-home-mode="chat"] #step-create.project-start-screen,
html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell,
html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-content,
html:root body[data-project-home-mode="chat"] .project-home-chat,
html:root body[data-project-home-mode="chat"] #projectHomeChat,
html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"],
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages {
  background: var(--chat-bg) !important;
  background-color: var(--chat-bg) !important;
  background-image: none !important;
}

html:root body[data-project-home-mode="chat"] .project-home-chat-topbar {
  background: var(--chat-bg) !important;
  background-color: var(--chat-bg) !important;
}

/* Last-cascade chat rail placement. Keep this after the legacy responsive
   blocks so the account control cannot move back into the history list. */
html:root[data-theme] body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot {
  display: grid !important;
  flex: 0 0 auto !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--chat-line) !important;
  background: transparent !important;
}
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 14px !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 5px 8px 5px 5px !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--chat-text) 5%, transparent) !important;
  color: var(--chat-text) !important;
  text-align: left !important;
  box-shadow: none !important;
}
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger:hover,
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger:focus-visible,
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger[aria-expanded="true"] {
  background: color-mix(in srgb, var(--chat-text) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--chat-text) 32%, var(--chat-line)) !important;
  outline: none !important;
}
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-avatar,
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-avatar img {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
  line-height: 1 !important;
}
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-copy strong,
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-copy small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: currentColor !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-copy strong { font-size: 11px !important; font-weight: 650 !important; }
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-copy small { color: var(--chat-muted) !important; font-size: 9px !important; }
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-chevron { color: var(--chat-muted) !important; }
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot > p { display: none !important; }
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-menu {
  top: auto !important;
  right: auto !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  z-index: 10060 !important;
}

/* GPT-like model list: keep the current BYOK panel/actions, only change its
   presentation in conversation mode. */
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] {
  z-index: 10050 !important;
  width: min(410px, calc(100vw - 24px)) !important;
  max-height: min(680px, calc(100dvh - 24px)) !important;
  padding: 0 !important;
  overflow: hidden auto !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 15px !important;
  background: var(--chat-panel) !important;
  color: var(--chat-text) !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 34%) !important;
}
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] #assistantByokModelPanel {
  display: grid !important;
  gap: 0 !important;
  max-height: none !important;
  padding: 4px !important;
  overflow: visible !important;
}
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-head { padding: 12px !important; }
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-head strong,
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-browse b { color: var(--chat-text) !important; }
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-head small,
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-kind > strong,
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-kind > p,
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-browse small,
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > button em { color: var(--chat-muted) !important; }
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-kind { margin: 0 4px 5px !important; padding: 9px 4px 2px !important; border-top: 1px solid var(--chat-line) !important; }
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > .byok-profile-browse,
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > .byok-profile-activate {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--chat-text) !important;
}
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > .byok-profile-browse:hover,
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > .byok-profile-browse:focus-visible,
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > .byok-profile-browse.is-active,
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > .byok-profile-activate:hover {
  background: color-mix(in srgb, var(--chat-text) 10%, transparent) !important;
  outline: none !important;
}
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-discovered-models { margin: 0 8px 5px !important; border-color: var(--chat-line) !important; border-radius: 10px !important; background: color-mix(in srgb, var(--chat-text) 4%, transparent) !important; }
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-discovered-search > input { border-color: var(--chat-line) !important; background: var(--chat-input) !important; color: var(--chat-text) !important; }
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-discovered-list > button { border: 0 !important; border-radius: 7px !important; background: transparent !important; color: var(--chat-text) !important; }
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-discovered-list > button:hover,
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-discovered-list > button:focus-visible,
html:root[data-theme] body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-discovered-list > button.is-active { background: color-mix(in srgb, var(--chat-text) 10%, transparent) !important; outline: none !important; }

/* -------------------------------------------------------------------------
   Chat rail account + GPT-like model picker (final chat-only authority)

   The account control must stay attached to the bottom of the left rail,
   even when the conversation history grows.  The model popup is portalled to
   document.body by ai-assistant.js; these rules keep it readable and neutral
   in both themes without changing the work-mode picker.
   ------------------------------------------------------------------------- */
html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 70px !important;
  margin: auto 0 0 !important;
  padding: 10px 0 0 !important;
  align-content: end !important;
  gap: 0 !important;
  overflow: visible !important;
  border-top: 1px solid var(--chat-line) !important;
  background: transparent !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 14px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 5px 8px 5px 5px !important;
  gap: 9px !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--chat-text) 5%, transparent) !important;
  color: var(--chat-text) !important;
  text-align: left !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger:hover,
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger:focus-visible,
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--chat-text) 30%, var(--chat-line)) !important;
  background: color-mix(in srgb, var(--chat-text) 10%, transparent) !important;
  outline: none !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-avatar,
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-avatar img {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-avatar img {
  object-fit: cover !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
  line-height: 1 !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-copy strong,
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-copy small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: currentColor !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-copy strong {
  font-size: 11px !important;
  font-weight: 650 !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-copy small {
  color: var(--chat-muted) !important;
  font-size: 9px !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-chevron {
  width: 14px !important;
  height: 14px !important;
  color: var(--chat-muted) !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > p {
  display: none !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-menu {
  top: auto !important;
  right: auto !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  z-index: 10060 !important;
  width: 276px !important;
  min-width: 276px !important;
}

/* Portalled model picker: a compact, high-contrast menu like the reference
   screenshot.  It remains fully driven by the existing BYOK event handlers. */
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] {
  z-index: 10050 !important;
  width: min(410px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(680px, calc(100dvh - 24px)) !important;
  padding: 0 !important;
  overflow: hidden auto !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 15px !important;
  background: var(--chat-panel) !important;
  color: var(--chat-text) !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 34%) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] #assistantByokModelPanel {
  display: grid !important;
  gap: 0 !important;
  max-height: none !important;
  padding: 4px !important;
  overflow: visible !important;
  color: var(--chat-text) !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-head {
  gap: 3px !important;
  padding: 12px 12px 8px !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-head strong {
  color: var(--chat-text) !important;
  font-size: 13px !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-head small,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-kind > strong,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-kind > p {
  color: var(--chat-muted) !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-kind {
  gap: 3px !important;
  margin: 0 4px 5px !important;
  padding: 9px 4px 2px !important;
  border-top: 1px solid var(--chat-line) !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-kind > strong {
  padding: 0 8px 3px !important;
  font-size: 10px !important;
  letter-spacing: .02em !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row {
  gap: 3px !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > .byok-profile-browse,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > .byok-profile-activate {
  min-height: 42px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--chat-text) !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > .byok-profile-browse:hover,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > .byok-profile-browse:focus-visible,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > .byok-profile-browse.is-active,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > .byok-profile-activate:hover,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > .byok-profile-activate:focus-visible {
  background: color-mix(in srgb, var(--chat-text) 10%, transparent) !important;
  outline: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-browse b {
  color: var(--chat-text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-browse small,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > button em {
  color: var(--chat-muted) !important;
  font-size: 10px !important;
  font-style: normal !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > .byok-profile-activate {
  flex: 0 0 auto !important;
  border: 1px solid var(--chat-line) !important;
  padding-inline: 10px !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-discovered-models {
  gap: 7px !important;
  margin: 0 8px 5px !important;
  padding: 9px !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--chat-text) 4%, transparent) !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-discovered-search > input {
  border-color: var(--chat-line) !important;
  border-radius: 8px !important;
  background: var(--chat-input) !important;
  color: var(--chat-text) !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-discovered-list > button {
  min-height: 34px !important;
  padding: 7px 9px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--chat-text) !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-discovered-list > button:hover,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-discovered-list > button:focus-visible,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-discovered-list > button.is-active {
  background: color-mix(in srgb, var(--chat-text) 10%, transparent) !important;
  outline: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] > :not(#assistantByokModelPanel) {
  margin-inline: 12px !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .assistant-image-mode-panel-head {
  padding: 12px !important;
  border-bottom: 1px solid var(--chat-line) !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .assistant-image-mode-panel-head strong {
  color: var(--chat-text) !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .assistant-image-mode-panel-head span {
  color: var(--chat-muted) !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] > footer {
  margin: 4px 8px 8px !important;
  padding: 9px 4px 0 !important;
  border-top-color: var(--chat-line) !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] > footer > button {
  border-color: var(--chat-line) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--chat-text) !important;
}

@media (max-width: 1023px) {
  html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] {
    width: min(410px, calc(100vw - 16px)) !important;
  }
}

/* Theme-aware final cascade. workmate-ai.css has html[data-theme] selectors
   for the older home overlay, so mirror that specificity here to keep chat
   mode full-height after a theme is applied. */
html:root[data-theme] body[data-project-home-mode="chat"] .app-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100vh !important;
  min-height: 100vh !important;
}
html:root[data-theme] body[data-project-home-mode="chat"] .app-shell > .workspace {
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
html:root[data-theme] body[data-project-home-mode="chat"] #step-create.project-start-screen,
html:root[data-theme] body[data-project-home-mode="chat"] #step-create > .project-home-shell,
html:root[data-theme] body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-content,
html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeChat,
html:root[data-theme] body[data-project-home-mode="chat"] .project-home-chat,
html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost,
html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.embedded {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
html:root[data-theme] body[data-project-home-mode="chat"] #step-create.project-start-screen {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
html:root[data-theme] body[data-project-home-mode="chat"] #step-create > .project-home-shell {
  display: grid !important;
  grid-template-columns: 256px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}
html:root[data-theme] body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 256px !important;
  min-width: 256px !important;
  height: 100% !important;
  min-height: 0 !important;
  position: relative !important;
  inset: auto !important;
}
html:root[data-theme] body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-content {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
}
html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeChat {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  padding: 58px 0 0 !important;
  overflow: hidden !important;
}
html:root[data-theme] body[data-project-home-mode="chat"] .project-home-chat,
html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost,
html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.embedded {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
}

/* Runtime layout authority. A few older responsive rules use an unscoped
   `html body .app-shell` selector with !important. Keep this final block
   scoped to conversation mode so the shell receives the full viewport and
   the assistant host can grow to fill the chat column. */
html:root body[data-project-home-mode="chat"] .app-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100vh !important;
  min-height: 100vh !important;
}

html:root body[data-project-home-mode="chat"] .app-shell > .workspace {
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
}

html:root body[data-project-home-mode="chat"] #step-create.project-start-screen,
html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell,
html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-content,
html:root body[data-project-home-mode="chat"] #projectHomeChat,
html:root body[data-project-home-mode="chat"] .project-home-chat,
html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost,
html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.embedded {
  height: 100% !important;
  min-height: 0 !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeChat,
html:root body[data-project-home-mode="chat"] .project-home-chat {
  position: relative !important;
  inset: auto !important;
}

/* -------------------------------------------------------------------------
   GPT-style conversation shell (last authority)

   The existing workbench has a global rail, a delivery topbar and several
   project-home actions.  Conversation mode is a separate surface, so keep
   these rules scoped to the chat data attribute and let work mode retain its
   original layout.  This block also owns the new navigation and model
   control added to project-home-chat-topbar.
   ------------------------------------------------------------------------- */

html:root body[data-project-home-mode="chat"] {
  --chat-bg: #ffffff;
  --chat-panel: #f7f7f8;
  --chat-input: #ffffff;
  --chat-user: #f4f4f4;
  --chat-text: #2f2f2f;
  --chat-muted: #6b6b6b;
  --chat-line: #e5e5e5;
  --chat-accent: #2f2f2f;
  --chat-copy-size: 14px;
  --chat-copy-leading: 1.7;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] {
  --chat-bg: #212121;
  --chat-panel: #171717;
  --chat-input: #2f2f2f;
  --chat-user: #2f2f2f;
  --chat-text: #ececec;
  --chat-muted: #b4b4b4;
  --chat-line: #3f3f3f;
  --chat-accent: #ececec;
}

html:root[data-assistant-font-size="small"] body[data-project-home-mode="chat"] {
  --chat-copy-size: 13px;
  --chat-copy-leading: 1.65;
}

html:root[data-assistant-font-size="large"] body[data-project-home-mode="chat"] {
  --chat-copy-size: 16px;
  --chat-copy-leading: 1.75;
}

/* The native workbench chrome is replaced by project-home-chat-topbar. */
html:root body[data-project-home-mode="chat"] .app-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  background: var(--chat-bg) !important;
}

html:root body[data-project-home-mode="chat"] .app-shell > .topbar,
html:root body[data-project-home-mode="chat"] .app-shell > .rail,
html:root body[data-project-home-mode="chat"] .app-shell > #documentTabsBar {
  display: none !important;
}

html:root body[data-project-home-mode="chat"] .app-shell > .workspace {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--chat-bg) !important;
}

html:root body[data-project-home-mode="chat"] #step-create.project-start-screen,
html:root body[data-project-home-mode="chat"] #step-create.project-start-screen:not(.hidden) {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: var(--chat-bg) !important;
  color: var(--chat-text) !important;
}

html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell {
  display: grid !important;
  grid-template-columns: 256px minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  background: var(--chat-bg) !important;
  background-image: none !important;
}

html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav {
  display: flex !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 256px !important;
  min-width: 256px !important;
  min-height: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 16px 12px 12px !important;
  overflow: hidden !important;
  border-right: 1px solid var(--chat-line) !important;
  background: var(--chat-panel) !important;
  color: var(--chat-text) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-content {
  position: relative !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--chat-bg) !important;
  color: var(--chat-text) !important;
}

/* Keep the product mark, the new GPT-style tools and the account menu; hide
   workbench-only actions which otherwise duplicate the chat navigation. */
html:root body[data-project-home-mode="chat"] #step-create .project-home-nav > :is(
  #newProjectBtn,
  #newBlankCanvasBtn,
  #projectHomeOpenFilesBtn,
  [data-project-home-action],
  .project-home-nav-spacer
) {
  display: none !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-nav > p {
  display: none !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-brand {
  order: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 6px 6px !important;
  gap: 10px !important;
  min-height: 36px !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-brand img {
  width: 32px !important;
  height: 32px !important;
  filter: grayscale(1) !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-brand strong {
  color: var(--chat-text) !important;
  font-size: calc(var(--chat-copy-size) + 1px) !important;
  font-weight: 650 !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-brand span {
  color: var(--chat-muted) !important;
  font-size: 11px !important;
}

/* New left navigation: one quiet row per action, with no blue accent. */
html:root body[data-project-home-mode="chat"] #projectHomeChatNav {
  order: 1 !important;
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  gap: 2px !important;
  width: 100% !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeChatNav > button {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--chat-muted) !important;
  font: inherit !important;
  font-size: var(--chat-copy-size) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeChatNav > button:hover,
html:root body[data-project-home-mode="chat"] #projectHomeChatNav > button:focus-visible,
html:root body[data-project-home-mode="chat"] #projectHomeChatNav > button[aria-current="page"] {
  background: color-mix(in srgb, var(--chat-text) 9%, transparent) !important;
  color: var(--chat-text) !important;
  outline: none !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeChatNav > button > :is(svg, i) {
  flex: 0 0 auto !important;
  width: 17px !important;
  height: 17px !important;
  color: currentColor !important;
  stroke: currentColor !important;
}

/* Conversation history is mounted into projectHomeConversationNav by the
   assistant.  Let it fill the remaining rail without the old floating-panel
   geometry. */
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav {
  order: 2 !important;
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden auto !important;
  scrollbar-width: thin !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav > .assistant-side-nav,
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-drawer.embedded .assistant-side-nav {
  position: static !important;
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-new-conversation {
  display: none !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-tabs {
  display: flex !important;
  flex: 0 0 auto !important;
  gap: 2px !important;
  width: 100% !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-tabs button {
  display: inline-flex !important;
  flex: 1 1 0 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 0 9px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--chat-muted) !important;
  font-size: 12px !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-tabs button:hover,
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-tabs button:focus-visible,
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-tabs button.active {
  background: color-mix(in srgb, var(--chat-text) 8%, transparent) !important;
  color: var(--chat-text) !important;
  outline: none !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  margin-right: 24px !important;
}

/* A compact context minimap for the current conversation. Each neutral tick
   represents a message and can jump directly to that turn, while the active
   tick follows the reading position in the main chat. */
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav > .assistant-side-nav {
  position: relative !important;
}
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-context-rail {
  position: absolute !important;
  z-index: 2 !important;
  top: 112px !important;
  right: 2px !important;
  bottom: 76px !important;
  display: flex !important;
  width: 16px !important;
  min-height: 76px !important;
  align-items: stretch !important;
  justify-content: center !important;
  pointer-events: none !important;
}
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-context-rail.hidden {
  display: none !important;
}
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-context-rail-track {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  padding: 7px 0 !important;
  box-sizing: border-box !important;
  border-left: 1px solid color-mix(in srgb, var(--chat-text) 13%, transparent) !important;
  pointer-events: auto !important;
}
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-context-rail-mark {
  display: block !important;
  flex: 0 0 auto !important;
  width: 10px !important;
  height: 3px !important;
  min-height: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: color-mix(in srgb, var(--chat-text) 28%, transparent) !important;
  cursor: pointer !important;
  opacity: .7 !important;
  transition: width .12s ease, opacity .12s ease, background-color .12s ease !important;
}
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-context-rail-mark:hover,
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-context-rail-mark:focus-visible,
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-context-rail-mark.active {
  width: 13px !important;
  background: var(--chat-text) !important;
  opacity: 1 !important;
  outline: none !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav :is(.assistant-side-history-item, .assistant-side-project-item) {
  width: 100% !important;
  margin: 0 0 2px !important;
  padding: 8px 9px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--chat-muted) !important;
  font-size: 12px !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav :is(.assistant-side-history-item:hover, .assistant-side-history-item:focus-visible, .assistant-side-project-item:hover, .assistant-side-project-item.current) {
  background: color-mix(in srgb, var(--chat-text) 8%, transparent) !important;
  color: var(--chat-text) !important;
  outline: none !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav :is(.assistant-side-history-item strong, .assistant-side-project-item strong) {
  color: currentColor !important;
  font-size: 12px !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav :is(.assistant-side-history-item small, .assistant-side-project-item small) {
  color: var(--chat-muted) !important;
  font-size: 10px !important;
}

html:root body[data-project-home-mode="chat"] #appAvatarControl {
  order: 4 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 8px 0 0 !important;
  border-top: 1px solid var(--chat-line) !important;
}

/* Top-level chat chrome. The model selector opens the existing model panel;
   the mode switch keeps the conversation/work surfaces one click apart. */
html:root body[data-project-home-mode="chat"] .project-home-chat-topbar {
  position: absolute !important;
  z-index: 20 !important;
  inset: 0 0 auto 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  box-sizing: border-box !important;
  padding: 0 24px !important;
  border-bottom: 1px solid var(--chat-line) !important;
  background: var(--chat-bg) !important;
  color: var(--chat-text) !important;
}

html:root body[data-project-home-mode="chat"] .chat-top-model-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: min(360px, 48vw) !important;
  height: 36px !important;
  padding: 0 9px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--chat-text) !important;
  font: inherit !important;
  font-size: var(--chat-copy-size) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] .chat-top-model-btn:hover,
html:root body[data-project-home-mode="chat"] .chat-top-model-btn:focus-visible {
  background: color-mix(in srgb, var(--chat-text) 8%, transparent) !important;
  outline: none !important;
}

html:root body[data-project-home-mode="chat"] .chat-top-model-btn > #chatTopModelLabel {
  display: block !important;
  min-width: 0 !important;
  max-width: 300px !important;
  overflow: hidden !important;
  color: currentColor !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:root body[data-project-home-mode="chat"] .chat-top-model-btn > :is(svg, i) {
  flex: 0 0 auto !important;
  width: 15px !important;
  height: 15px !important;
  color: var(--chat-muted) !important;
  stroke: currentColor !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeModeSwitch,
html:root body[data-project-home-mode="chat"] .project-home-chat-topbar > .project-home-mode-switch {
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 112px !important;
  height: 34px !important;
  padding: 3px !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 9px !important;
  background: var(--chat-panel) !important;
  box-shadow: none !important;
  transform: none !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeModeSwitch > button,
html:root body[data-project-home-mode="chat"] .project-home-chat-topbar > .project-home-mode-switch > button {
  display: inline-flex !important;
  flex: 1 1 0 !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 26px !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--chat-muted) !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeModeSwitch > button:hover,
html:root body[data-project-home-mode="chat"] #projectHomeModeSwitch > button:focus-visible,
html:root body[data-project-home-mode="chat"] #projectHomeModeSwitch > button.active {
  background: color-mix(in srgb, var(--chat-text) 10%, transparent) !important;
  color: var(--chat-text) !important;
  outline: none !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeChat {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 58px 0 0 !important;
  overflow: hidden !important;
  background: var(--chat-bg) !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeChat > .project-home-chat-intro {
  display: none !important;
}

html:root body[data-project-home-mode="chat"] .project-home-chat {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost,
html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.embedded {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  flex-direction: column !important;
  background: transparent !important;
}

/* The mobile layout uses the same topbar, while the desktop rail collapses
   below tablet width so the composer never becomes cramped or scrolls sideways. */
@media (max-width: 1023px) {
  html:root[data-theme] body[data-project-home-mode="chat"] #step-create > .project-home-shell {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }
  html:root[data-theme] body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
  }
  html:root[data-theme] body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-content {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
  }
  html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeChat {
    padding-top: 54px !important;
  }

  html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell {
    display: block !important;
  }

  html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav {
    display: none !important;
  }

  html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-content {
    width: 100% !important;
    min-width: 0 !important;
  }

  html:root body[data-project-home-mode="chat"] .project-home-chat-topbar {
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 12px !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeChat {
    padding-top: 54px !important;
  }
}

@media (max-width: 480px) {
  html:root body[data-project-home-mode="chat"] .chat-top-model-btn {
    max-width: 62vw !important;
    padding-inline: 6px !important;
    font-size: 13px !important;
  }

  html:root body[data-project-home-mode="chat"] .chat-top-model-btn > #chatTopModelLabel {
    max-width: 46vw !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeModeSwitch {
    width: 104px !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeModeSwitch > button {
    padding-inline: 3px !important;
    font-size: 11px !important;
  }
}

/* Last-pass theme guard. Several legacy selectors target .assistant-new-
   conversation and .assistant-send-btn as generic primary actions. Keep
   these final rules at the end of the file so chat mode cannot regress to
   blue when those rules are loaded or a theme is toggled. */
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-new-conversation,
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-side-tabs button,
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-side-tabs button.active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #6b6b6b !important;
  -webkit-text-fill-color: #6b6b6b !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-new-conversation,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-side-tabs button,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-side-tabs button.active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #b4b4b4 !important;
  -webkit-text-fill-color: #b4b4b4 !important;
  box-shadow: none !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn {
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  background-image: none !important;
  border-color: #2f2f2f !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn {
  background: #ececec !important;
  background-color: #ececec !important;
  background-image: none !important;
  border-color: #ececec !important;
  color: #171717 !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer .assistant-composer-tools :is(#assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn),
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create .project-home-mode-switch button {
  color: #b4b4b4 !important;
  -webkit-text-fill-color: #b4b4b4 !important;
  border-color: #3f3f3f !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer .assistant-composer-tools :is(#assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn),
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create .project-home-mode-switch button {
  color: #6b6b6b !important;
  -webkit-text-fill-color: #6b6b6b !important;
  border-color: #e5e5e5 !important;
}

/* Final GPT-style color tokens. Keep the existing workbench theme untouched
   outside conversation mode, while making the chat surface consistent across
   light and dark appearances. */
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create.project-start-screen,
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create > .project-home-shell,
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] .project-home-content,
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #projectHomeChat,
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #projectHomeAssistantHost,
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"],
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantMessages {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #2d2d2d !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] .project-home-nav {
  background: #f7f7f8 !important;
  border-right-color: #e5e5e5 !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] .project-home-nav-item {
  color: #5d5d63 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] .project-home-nav-item.active,
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] .project-home-nav-item[aria-current="page"] {
  color: #2d2d2d !important;
  background: #e5e5e5 !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create.project-start-screen,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create > .project-home-shell,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] .project-home-content,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeChat,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeAssistantHost,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"],
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantMessages {
  background: #212121 !important;
  background-color: #212121 !important;
  color: #ececec !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] .project-home-nav {
  background: #171717 !important;
  border-right-color: #303030 !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] .project-home-nav-item {
  color: #b5b5b5 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] .project-home-nav-item.active,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] .project-home-nav-item[aria-current="page"] {
  color: #ececec !important;
  background: #2f2f2f !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer {
  background: #2f2f2f !important;
  border-color: #424242 !important;
  color: #ececec !important;
  box-shadow: 0 2px 14px rgb(0 0 0 / 24%) !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantInput,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-content {
  color: #ececec !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer .assistant-composer-tools :is(#assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn) {
  background: #2f2f2f !important;
  border-color: #424242 !important;
  color: #d6d6d6 !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer .assistant-composer-tools #assistantModeTrigger,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer .assistant-composer-tools #assistantImageSettingsBtn {
  background: #2f2f2f !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] .project-home-mode-switch {
  background: #2f2f2f !important;
  border-color: #424242 !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer {
  background: #ffffff !important;
  border-color: #e5e5e5 !important;
  color: #2d2d2d !important;
  box-shadow: 0 2px 14px rgb(0 0 0 / 7%) !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer .assistant-composer-tools :is(#assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn) {
  background: #ffffff !important;
  border-color: #e5e5e5 !important;
  color: #5d5d63 !important;
}

/* Final neutral palette for conversation mode. GPT's conversation surface
   uses grayscale chrome; keep blue accents confined to work mode. */
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] {
  --chat-accent: #2f2f2f;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] {
  --chat-accent: #ececec;
}

html:root body[data-project-home-mode="chat"] #step-create :is(
  .project-home-primary,
  .project-home-secondary,
  .project-home-nav-item,
  .project-home-nav-item.active,
  .project-home-nav-item[aria-current="page"]
),
html:root body[data-project-home-mode="chat"] .project-home-conversation-nav :is(
  .assistant-new-conversation,
  .assistant-side-tabs button,
  .assistant-side-tabs button.active
) {
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--chat-muted) !important;
  -webkit-text-fill-color: var(--chat-muted) !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #step-create :is(
  .project-home-primary:hover,
  .project-home-primary:focus-visible,
  .project-home-secondary:hover,
  .project-home-secondary:focus-visible,
  .project-home-nav-item:hover,
  .project-home-nav-item:focus-visible,
  .project-home-nav-item.active,
  .project-home-nav-item[aria-current="page"]
),
html:root body[data-project-home-mode="chat"] .project-home-conversation-nav :is(
  .assistant-new-conversation:hover,
  .assistant-new-conversation:focus-visible,
  .assistant-side-tabs button:hover,
  .assistant-side-tabs button:focus-visible,
  .assistant-side-tabs button.active
) {
  border-color: transparent !important;
  background: color-mix(in srgb, var(--chat-text) 9%, transparent) !important;
  background-color: color-mix(in srgb, var(--chat-text) 9%, transparent) !important;
  color: var(--chat-text) !important;
  -webkit-text-fill-color: var(--chat-text) !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn {
  border: 0 !important;
  background: var(--chat-accent) !important;
  color: var(--chat-bg) !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn:hover:not(:disabled),
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn:focus-visible {
  background: color-mix(in srgb, var(--chat-accent) 86%, var(--chat-text)) !important;
  color: var(--chat-bg) !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer:focus-within {
  border-color: var(--chat-line) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--chat-text) 10%, transparent), 0 1px 3px rgb(0 0 0 / 8%) !important;
}

html:root body[data-project-home-mode="chat"] .project-home-mode-switch button.active,
html:root body[data-project-home-mode="chat"] .project-home-mode-switch button:hover,
html:root body[data-project-home-mode="chat"] .project-home-mode-switch button:focus-visible {
  background: color-mix(in srgb, var(--chat-text) 10%, transparent) !important;
  color: var(--chat-text) !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] :is(
  #projectHomeSearch,
  #projectHomeModeSwitch,
  #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-composer-tools :is(#assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn)
) {
  border-color: var(--chat-line) !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] .app-shell > .topbar,
html:root body[data-project-home-mode="chat"] .app-shell > .topbar :is(
  #luxinVoiceLauncher,
  #licensePoints,
  #advancedToolsBtn,
  .topbar-utility-action,
  .top-actions button
) {
  border-color: var(--chat-line) !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--chat-muted) !important;
  -webkit-text-fill-color: var(--chat-muted) !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] .app-shell > .topbar :is(
  #luxinVoiceLauncher .luxin-avatar,
  #luxinVoiceLauncher .luxin-avatar svg,
  #licensePoints svg,
  #advancedToolsBtn svg,
  .topbar-utility-action svg
) {
  color: var(--chat-muted) !important;
  stroke: var(--chat-muted) !important;
  fill: none !important;
}

html:root body[data-project-home-mode="chat"] .app-shell > .topbar :is(
  #luxinVoiceLauncher svg,
  #licensePoints svg,
  #advancedToolsBtn svg,
  .topbar-utility-action svg,
  .top-actions button svg
) {
  color: currentColor !important;
  stroke: currentColor !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] .app-shell > .topbar {
  background: #212121 !important;
  border-bottom-color: #303030 !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] .app-shell > .topbar {
  background: #ffffff !important;
  border-bottom-color: #e5e5e5 !important;
}

/* Last-authority selectors for controls whose legacy rules use element IDs
   and !important. These keep the conversation surface strictly grayscale. */
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer :is(#assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn),
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > #assistantAddBtn,
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > #assistantVoiceInputBtn {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #e5e5e5 !important;
  color: #5d5d63 !important;
  -webkit-text-fill-color: #5d5d63 !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer :is(#assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn),
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > #assistantAddBtn,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > #assistantVoiceInputBtn {
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  background-image: none !important;
  border-color: #424242 !important;
  color: #d6d6d6 !important;
  -webkit-text-fill-color: #d6d6d6 !important;
  box-shadow: none !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > #assistantSendBtn {
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  border-color: #2f2f2f !important;
  color: #ffffff !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > #assistantSendBtn {
  background: #ececec !important;
  background-color: #ececec !important;
  border-color: #ececec !important;
  color: #171717 !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-nav :is(
  #newProjectBtn, #newBlankCanvasBtn, .project-home-primary, .project-home-secondary,
  .project-home-nav-item, .project-home-nav-item.active
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  color: var(--chat-muted) !important;
  -webkit-text-fill-color: var(--chat-muted) !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav :is(
  .assistant-new-conversation svg,
  .assistant-new-conversation i,
  .assistant-side-tabs button svg,
  .assistant-side-tabs button i
) {
  color: var(--chat-muted) !important;
  stroke: var(--chat-muted) !important;
  fill: none !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-tabs button.active :is(svg, i),
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-tabs button:hover :is(svg, i),
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-new-conversation:hover :is(svg, i) {
  color: var(--chat-text) !important;
  stroke: var(--chat-text) !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-nav :is(
  #newProjectBtn:hover, #newProjectBtn:focus-visible, #newBlankCanvasBtn:hover,
  #newBlankCanvasBtn:focus-visible, .project-home-primary:hover,
  .project-home-primary:focus-visible, .project-home-secondary:hover,
  .project-home-secondary:focus-visible, .project-home-nav-item:hover,
  .project-home-nav-item:focus-visible, .project-home-nav-item.active
) {
  background: color-mix(in srgb, var(--chat-text) 9%, transparent) !important;
  background-color: color-mix(in srgb, var(--chat-text) 9%, transparent) !important;
  color: var(--chat-text) !important;
  -webkit-text-fill-color: var(--chat-text) !important;
}

html:root body[data-project-home-mode="chat"] :is(
  #projectHomeSearch,
  #projectHomeSearch input,
  #projectHomeSearch button,
  #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-composer-tools :is(#assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn)
) {
  color: var(--chat-muted) !important;
  -webkit-text-fill-color: var(--chat-muted) !important;
}

html:root body[data-project-home-mode="chat"] :is(
  #projectHomeSearch input:focus,
  #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-composer-tools :is(#assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn):hover,
  #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-composer-tools :is(#assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn):focus-visible
) {
  border-color: var(--chat-line) !important;
  background: color-mix(in srgb, var(--chat-text) 6%, transparent) !important;
  color: var(--chat-text) !important;
  -webkit-text-fill-color: var(--chat-text) !important;
}

/* Keep secondary strategy controls behind More tools in conversation mode. */
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > .assistant-composer-tools > .assistant-composer-copy-tools,
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > .assistant-composer-tools > #assistantSkillsWrap,
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > .assistant-composer-tools > #assistantAdvancedOptionsBtn,
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > .assistant-composer-tools > #assistantSecondaryTools {
  display: none !important;
}

/* Chat home has one conversation column at every window size. The legacy
   assistant also has a task dashboard, voice prompt and responsive tool grid;
   those remain available in work mode but should not consume chat space. */
html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > :is(
  .assistant-header, .assistant-side-nav, .assistant-current-taskbar,
  .assistant-context-block, .assistant-brief-summary, .assistant-design-hub,
  .assistant-recommendations, .assistant-voice-status, .assistant-suggestions,
  .assistant-composer-hint, .assistant-brief-actions
) {
  display: none !important;
}

/* 首页冷启动：极简首屏里唯独保留「3 个大白话场景入口」，帮小白不看教程迈出第一步；
   仅有内容时显示，居中排列，窄屏自动换行。 */
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > .assistant-suggestions:not(:empty) {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 8px 16px 12px !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > :is(
  #assistantTasks, #assistantPdfRedesign, #assistantServiceNotice,
  #assistantExecutionControls
) {
  display: none !important;
}

/* Prompt enrich dialog is launched from the + menu; keep it hidden when closed,
   but never force-hide the native <dialog open> top layer in conversation mode. */
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantPromptEnhanceDialog:not([open]) {
  display: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantPromptEnhanceDialog[open] {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 120 !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantNewResultBtn {
  left: 50% !important;
  right: auto !important;
  bottom: var(--assistant-latest-bottom, 116px) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  border-color: var(--theme-line, #dcdcdc) !important;
  background: var(--theme-panel, #fff) !important;
  color: var(--theme-text, #252525) !important;
  box-shadow: none !important;
}

/* GPT-style chat layout: the conversation rail stays visible on desktop,
   while the assistant's internal workbench chrome remains hidden. */
@media (min-width: 1024px) {
  html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell {
    grid-template-columns: 248px minmax(0, 1fr) !important;
  }

  html:root body[data-project-home-mode="chat"] #step-create .project-home-nav {
    display: flex !important;
  }

  html:root body[data-project-home-mode="chat"] .app-shell > .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  html:root body[data-project-home-mode="chat"] .app-shell > .topbar > :is(#editorWorkflowNav, .brand-block, .topbar-delivery-tools, #advancedToolsBtn, #apiStatus, #saveState, #saveDeckBtn, #exportPptBtn, #settingsBtn) {
    display: none !important;
  }

  html:root body[data-project-home-mode="chat"] .app-shell > .topbar .top-actions {
    display: flex !important;
    margin-left: auto !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeConversationNav {
    display: block !important;
    min-height: 0 !important;
    max-height: 160px !important;
    margin: 0 0 14px !important;
    overflow: auto !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeModeSwitch {
    top: 12px !important;
    right: 22px !important;
    left: auto !important;
    width: 112px !important;
    height: 36px !important;
  }
}

@media (max-width: 1023px) {
  html:root body[data-project-home-mode="chat"] #projectHomeConversationNav { display: none !important; }
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages {
  display: block !important;
  flex: 1 1 auto !important;
  width: min(860px, 100%) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 28px 24px !important;
  overflow-y: auto !important;
  background: transparent !important;
  color: var(--chat-text) !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-empty {
  display: grid !important;
  min-height: 100% !important;
  place-items: center !important;
  color: var(--chat-text) !important;
  font-size: 24px !important;
  text-align: center !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-empty strong {
  color: var(--chat-text) !important;
  font-size: inherit !important;
  font-weight: 600 !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantAttachments {
  flex: 0 0 auto !important;
  width: min(860px, calc(100% - 24px)) !important;
  margin: 0 auto !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantComposer {
  flex: 0 0 auto !important;
  width: min(860px, calc(100% - 24px)) !important;
  margin: 0 auto 10px !important;
}

@media (max-width: 1023px) {
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer.assistant-composer {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) 36px 40px !important;
    grid-template-rows: minmax(50px, auto) 34px !important;
    gap: 4px 7px !important;
    padding: 8px 12px 7px !important;
    border: 1px solid var(--chat-line) !important;
    border-radius: 18px !important;
    background: var(--chat-input) !important;
    box-shadow: 0 2px 14px rgb(0 0 0 / 7%) !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantComposer > #assistantAddBtn { grid-column: 1 !important; grid-row: 1 !important; align-self: end !important; width: 36px !important; height: 36px !important; }
  html:root body[data-project-home-mode="chat"] #assistantComposer > #assistantInput { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; width: 100% !important; height: auto !important; min-height: 50px !important; max-height: 160px !important; padding: 11px 0 !important; border: 0 !important; background: transparent !important; color: var(--chat-text) !important; box-shadow: none !important; }
  html:root body[data-project-home-mode="chat"] #assistantComposer > #assistantVoiceInputBtn { grid-column: 3 !important; grid-row: 1 !important; align-self: end !important; }
  html:root body[data-project-home-mode="chat"] #assistantComposer > #assistantSendBtn { grid-column: 4 !important; grid-row: 1 !important; align-self: end !important; }
  html:root body[data-project-home-mode="chat"] #assistantComposer > .assistant-composer-tools { grid-column: 1 / -1 !important; grid-row: 2 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; width: 100% !important; min-width: 0 !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; overflow: visible !important; }
  html:root body[data-project-home-mode="chat"] #assistantComposer .assistant-composer-tools > :is(.assistant-composer-copy-tools, #assistantSkillsWrap, #assistantAdvancedOptionsBtn, #assistantSecondaryTools) { display: none !important; }
  html:root body[data-project-home-mode="chat"] #assistantComposer .assistant-composer-tools > :is(#assistantModeSwitch, #assistantImageSettingsBtn, .assistant-quick-tools-wrap) { display: flex !important; flex: 0 1 auto !important; width: auto !important; min-width: 0 !important; height: 32px !important; }
  html:root body[data-project-home-mode="chat"] #assistantComposer .assistant-composer-tools :is(#assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn) { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: 32px !important; min-height: 32px !important; padding: 0 9px !important; border: 1px solid var(--chat-line) !important; border-radius: 8px !important; background: transparent !important; color: var(--chat-text) !important; font-size: 11px !important; box-shadow: none !important; }
}

@media (max-width: 767px) {
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages { padding: 18px 12px !important; }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-empty { font-size: 20px !important; }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer.assistant-composer { width: calc(100% - 12px) !important; grid-template-columns: 32px minmax(0, 1fr) 32px 38px !important; padding: 7px !important; margin-bottom: 4px !important; }
  html:root body[data-project-home-mode="chat"] #assistantComposer .assistant-composer-tools > :is(#assistantModeSwitch, #assistantImageSettingsBtn, .assistant-quick-tools-wrap) { flex: 0 1 auto !important; max-width: 40% !important; }
  html:root body[data-project-home-mode="chat"] #assistantComposer .assistant-composer-tools :is(#assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn) { padding: 0 6px !important; font-size: 10px !important; }
}

@media (max-width: 767px) {
  html:root,
  html:root body,
  html:root body .app-shell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  html:root body[data-project-home-mode="chat"] #projectHomeWork.hidden { display: none !important; }
  html:root body[data-project-home-mode="chat"] #projectHomeModeSwitch { position: absolute !important; display: flex !important; z-index: 3 !important; }
  html:root body[data-project-home-mode="chat"] #step-create.project-start-screen { position: fixed !important; inset: 56px 0 0 !important; width: 100vw !important; height: calc(100dvh - 56px) !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: var(--chat-bg) !important; }
  html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; min-height: 0 !important; }
  html:root body[data-project-home-mode="chat"] #step-create .project-home-nav { display: none !important; }
  html:root body[data-project-home-mode="chat"] .project-home-content { position: relative !important; inset: auto !important; display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; width: 100% !important; height: 100% !important; min-height: 0 !important; padding: 48px 8px 4px !important; overflow: hidden !important; background: var(--chat-bg) !important; }
  html:root body[data-project-home-mode="chat"] .project-home-mode-switch { top: 5px !important; left: 8px !important; width: 176px !important; height: 36px !important; transform: none !important; border: 1px solid var(--chat-line) !important; background: var(--chat-panel) !important; box-shadow: none !important; backdrop-filter: none !important; }
  html:root body[data-project-home-mode="chat"] #projectHomeChat > .project-home-chat-intro { display: none !important; }
  html:root body[data-project-home-mode="chat"] .project-home-chat { display: flex !important; flex: 1 1 auto !important; min-height: 0 !important; padding: 0 !important; }
  html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost { height: 100% !important; min-height: 0 !important; background: var(--chat-bg) !important; }
  html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.embedded { display: flex !important; flex-direction: column !important; height: 100% !important; background: transparent !important; }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded > :is(#assistantSideWorkspace, .assistant-context-block, #assistantBriefSummary, #assistantDesignHub, .assistant-brief-actions, .assistant-composer-hint) { display: none !important; }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded > #assistantMessages { flex: 1 1 auto !important; min-height: 0 !important; padding: 16px 10px 22px !important; background: transparent !important; }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded #assistantComposer { grid-template-columns: 32px minmax(0, 1fr) 32px 38px !important; grid-template-rows: minmax(48px, auto) 34px !important; width: calc(100% - 8px) !important; margin: 0 auto 4px !important; padding: 7px !important; border-radius: 15px !important; background: var(--chat-input) !important; border-color: var(--chat-line) !important; }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded #assistantComposer > #assistantInput { height: auto !important; min-height: 48px !important; max-height: 140px !important; padding: 9px 0 !important; font-size: var(--chat-copy-size) !important; }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded .assistant-message-content { font-size: var(--chat-copy-size) !important; line-height: var(--chat-copy-leading) !important; color: var(--chat-text) !important; }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded .assistant-message.user .assistant-message-content { max-width: 88% !important; background: var(--chat-user) !important; }
}

/* Final narrow viewport override. The legacy home shell declares its grid on
   the shell itself, so reset that declaration explicitly after all legacy
   styles have loaded. */
@media (min-width: 768px) and (max-width: 1023px) {
  html:root body[data-project-home-mode="chat"] .project-home-shell {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html:root body[data-project-home-mode="chat"] .project-home-shell > .project-home-nav {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
  }

  html:root body[data-project-home-mode="chat"] .project-home-shell > .project-home-content {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeChat,
  html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Final neutral theme overrides for chat controls. */
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-new-conversation,
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-side-tabs button,
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-side-tabs button.active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #6b6b6b !important;
  -webkit-text-fill-color: #6b6b6b !important;
  box-shadow: none !important;
}
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-new-conversation,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-side-tabs button,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create .project-home-conversation-nav .assistant-side-tabs button.active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #b4b4b4 !important;
  -webkit-text-fill-color: #b4b4b4 !important;
  box-shadow: none !important;
}
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn {
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  background-image: none !important;
  border-color: #2f2f2f !important;
  color: #fff !important;
  box-shadow: none !important;
}
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn {
  background: #ececec !important;
  background-color: #ececec !important;
  background-image: none !important;
  border-color: #ececec !important;
  color: #171717 !important;
  box-shadow: none !important;
}

/* FINAL CHAT SHELL OVERRIDE (appended after every legacy rule) */
html:root body[data-project-home-mode="chat"] .app-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}
html:root body[data-project-home-mode="chat"] .app-shell > .workspace {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
html:root body[data-project-home-mode="chat"] #step-create.project-start-screen,
html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell,
html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-content,
html:root body[data-project-home-mode="chat"] #projectHomeChat,
html:root body[data-project-home-mode="chat"] .project-home-chat,
html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost,
html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.embedded {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
html:root body[data-project-home-mode="chat"] #step-create.project-start-screen {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell {
  display: grid !important;
  grid-template-columns: 256px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}
html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav {
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
}
html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-content {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
}
html:root body[data-project-home-mode="chat"] #projectHomeChat {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  padding: 58px 0 0 !important;
  overflow: hidden !important;
}
html:root body[data-project-home-mode="chat"] .project-home-chat,
html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost,
html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost > #assistantDrawer.embedded {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
}
@media (max-width: 1023px) {
  html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell {
    display: block !important;
  }
  html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav {
    display: none !important;
  }
  html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-content {
    display: flex !important;
    width: 100% !important;
  }
  html:root body[data-project-home-mode="chat"] #projectHomeChat {
    padding-top: 54px !important;
  }
}

/* FINAL CHAT ACCOUNT + MODEL PICKER OVERRIDE (must remain last) */
html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 70px !important;
  margin: auto 0 0 !important;
  padding: 10px 0 0 !important;
  border-top: 1px solid var(--chat-line) !important;
  background: transparent !important;
}
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 14px !important;
  align-items: center !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 5px 8px 5px 5px !important;
  gap: 9px !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--chat-text) 5%, transparent) !important;
  color: var(--chat-text) !important;
  text-align: left !important;
  box-shadow: none !important;
}
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger:hover,
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger:focus-visible,
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--chat-text) 32%, var(--chat-line)) !important;
  background: color-mix(in srgb, var(--chat-text) 10%, transparent) !important;
  outline: none !important;
}
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-avatar,
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-avatar img {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-avatar img { object-fit: cover !important; }
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
  line-height: 1 !important;
}
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-copy strong,
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-copy small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: currentColor !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-copy strong { font-size: 11px !important; font-weight: 650 !important; }
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-copy small { color: var(--chat-muted) !important; font-size: 9px !important; }
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-chevron { color: var(--chat-muted) !important; }
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > p { display: none !important; }
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-menu {
  top: auto !important;
  right: auto !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  z-index: 10060 !important;
  width: 276px !important;
  min-width: 276px !important;
}
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] {
  z-index: 10050 !important;
  width: min(410px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(680px, calc(100dvh - 24px)) !important;
  padding: 0 !important;
  overflow: hidden auto !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 15px !important;
  background: var(--chat-panel) !important;
  color: var(--chat-text) !important;
  box-shadow: 0 18px 48px rgb(0 0 0 / 34%) !important;
}
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] #assistantByokModelPanel {
  display: grid !important;
  gap: 0 !important;
  max-height: none !important;
  padding: 4px !important;
  overflow: visible !important;
  color: var(--chat-text) !important;
}
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-head { padding: 12px !important; }
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-head strong,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-browse b { color: var(--chat-text) !important; }
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-head small,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-kind > strong,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-kind > p,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-browse small,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > button em { color: var(--chat-muted) !important; }
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-kind { margin: 0 4px 5px !important; padding: 9px 4px 2px !important; border-top: 1px solid var(--chat-line) !important; }
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > .byok-profile-browse,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > .byok-profile-activate {
  min-height: 42px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--chat-text) !important;
}
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > .byok-profile-browse:hover,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > .byok-profile-browse:focus-visible,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > .byok-profile-browse.is-active,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-profile-choice-row > .byok-profile-activate:hover {
  background: color-mix(in srgb, var(--chat-text) 10%, transparent) !important;
  outline: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-discovered-models { margin: 0 8px 5px !important; border-color: var(--chat-line) !important; border-radius: 10px !important; background: color-mix(in srgb, var(--chat-text) 4%, transparent) !important; }
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-discovered-search > input { border-color: var(--chat-line) !important; background: var(--chat-input) !important; color: var(--chat-text) !important; }
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-discovered-list > button { border: 0 !important; border-radius: 7px !important; background: transparent !important; color: var(--chat-text) !important; }
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-discovered-list > button:hover,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-discovered-list > button:focus-visible,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-discovered-list > button.is-active { background: color-mix(in srgb, var(--chat-text) 10%, transparent) !important; outline: none !important; }
@media (max-width: 1023px) {
  html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] { width: min(410px, calc(100vw - 16px)) !important; }
}

/* -------------------------------------------------------------------------
   Conversation font-size preference

   The settings panel exposes three sizes.  Keep the preference scoped to
   the GPT-style conversation surface so the workbench editor is unchanged,
   then feed the same values into the rail, menus and model picker.  Several
   of those controls are portalled to <body>, hence the explicit body-scoped
   selectors below.
   ------------------------------------------------------------------------- */
html:root body[data-project-home-mode="chat"] {
  --chat-nav-size: 13px;
  --chat-tool-size: 13px;
  --chat-meta-size: 11px;
  --chat-control-leading: 1.35;
}

html:root[data-assistant-font-size="small"] body[data-project-home-mode="chat"] {
  --chat-nav-size: 12px;
  --chat-tool-size: 12px;
  --chat-meta-size: 10px;
  --chat-control-leading: 1.3;
}

html:root[data-assistant-font-size="large"] body[data-project-home-mode="chat"] {
  --chat-nav-size: 15px;
  --chat-tool-size: 15px;
  --chat-meta-size: 12px;
  --chat-control-leading: 1.45;
}

/* Rail, project/history entries and account card. */
html:root body[data-project-home-mode="chat"] #projectHomeChatNav > button,
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-tabs button,
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav :is(.assistant-side-history-item, .assistant-side-project-item),
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav :is(.assistant-side-history-item strong, .assistant-side-project-item strong) {
  font-size: var(--chat-nav-size) !important;
  line-height: var(--chat-control-leading) !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav :is(.assistant-side-history-item small, .assistant-side-project-item small),
html:root body[data-project-home-mode="chat"] #step-create .project-home-brand span,
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-copy small {
  font-size: var(--chat-meta-size) !important;
  line-height: 1.35 !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot .customer-account-copy strong {
  font-size: var(--chat-nav-size) !important;
  line-height: 1.3 !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav :is(.assistant-side-history-item, .assistant-side-project-item) {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav :is(.assistant-side-history-item strong, .assistant-side-history-item small, .assistant-side-project-item strong, .assistant-side-project-item small) {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

/* Final rail geometry: the history list is the rail's flexible body, rather
   than a short floating card.  Keep the account row pinned below it, as in
   the GPT sidebar, and let only the list scroll when there are many chats. */
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav > .assistant-side-nav,
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-drawer.embedded .assistant-side-nav {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  gap: 4px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-panel {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 4px 0 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-panel.hidden {
  display: none !important;
}

/* The account row is a flat, bottom-pinned rail control. Settings remains in
   its account menu, without enclosing the history in a second card. */
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot {
  flex: 0 0 auto !important;
  min-height: 58px !important;
  margin: auto 0 0 !important;
  padding: 8px 0 0 !important;
  border-top: 1px solid var(--chat-line) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger {
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 5px 8px 5px 5px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger:hover,
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger:focus-visible,
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger[aria-expanded="true"] {
  border-color: transparent !important;
  background: color-mix(in srgb, var(--chat-text) 8%, transparent) !important;
  outline: none !important;
}

/* Override the legacy theme's generic panel shadow (it also matches the
   conversation nav) so the rail does not look like a bounded card. */
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav {
  box-shadow: none !important;
}

/* Composer controls and the top model selector. */
html:root body[data-project-home-mode="chat"] .project-home-chat-topbar,
html:root body[data-project-home-mode="chat"] .chat-top-model-btn,
html:root body[data-project-home-mode="chat"] #assistantComposer .assistant-composer-tools,
html:root body[data-project-home-mode="chat"] #assistantComposer .assistant-composer-tools :is(button, label, select, input),
html:root body[data-project-home-mode="chat"] #assistantComposer .assistant-composer-tools :is(#assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn) {
  font-size: var(--chat-tool-size) !important;
  line-height: var(--chat-control-leading) !important;
}

html:root body[data-project-home-mode="chat"] .chat-top-model-btn {
  min-height: max(36px, calc(var(--chat-tool-size) * 2.8)) !important;
  height: auto !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer.assistant-composer {
  grid-template-rows: minmax(52px, auto) max-content !important;
}

html:root body[data-project-home-mode="chat"] #assistantComposer > .assistant-composer-tools {
  height: auto !important;
  min-height: max(34px, calc(var(--chat-tool-size) * 2.8)) !important;
  max-height: none !important;
  align-items: center !important;
}

html:root body[data-project-home-mode="chat"] #assistantComposer .assistant-composer-tools :is(#assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn) {
  min-height: max(32px, calc(var(--chat-tool-size) * 2.8)) !important;
  height: auto !important;
  white-space: normal !important;
}

html:root body[data-project-home-mode="chat"] #assistantComposer .assistant-composer-tools :is(#assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn) > span {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

html:root body[data-project-home-mode="chat"] #assistantInput {
  font-size: var(--chat-copy-size) !important;
  line-height: var(--chat-copy-leading) !important;
  overflow-wrap: anywhere !important;
}

/* Portalled tools, add menu, skills, advanced options and model picker. */
html:root body[data-project-home-mode="chat"] :is(
  #assistantQuickToolsPanel,
  #assistantAddMenu,
  #assistantSkillsPanel,
  #assistantAdvancedOptionsPanel,
  #assistantCopyModeMenu,
  #assistantModeOptions,
  #assistantImageModePanel,
  #assistantImageModePanel #assistantByokModelPanel,
  .assistant-select-menu,
  .customer-account-menu
) {
  font-size: var(--chat-tool-size) !important;
  line-height: var(--chat-control-leading) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(72dvh, 720px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html:root body[data-project-home-mode="chat"] :is(
  #assistantQuickToolsPanel,
  #assistantAddMenu,
  #assistantSkillsPanel,
  #assistantAdvancedOptionsPanel,
  #assistantCopyModeMenu,
  #assistantModeOptions,
  #assistantImageModePanel,
  .assistant-select-menu,
  .customer-account-menu
) :is(button, label, select, input, textarea, strong, small, span, p, summary, dt, dd) {
  font-size: inherit !important;
  line-height: var(--chat-control-leading) !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

html:root body[data-project-home-mode="chat"] #assistantQuickToolsPanel button.assistant-tool-card {
  height: auto !important;
  min-height: max(60px, calc(var(--chat-tool-size) * 4.1)) !important;
  max-height: none !important;
  align-items: flex-start !important;
}

html:root body[data-project-home-mode="chat"] #assistantQuickToolsPanel button.assistant-tool-card :is(strong, small),
html:root body[data-project-home-mode="chat"] #assistantAddMenu button.assistant-add-menu-action :is(strong, small),
html:root body[data-project-home-mode="chat"] #assistantSkillsPanel :is(strong, small, p),
html:root body[data-project-home-mode="chat"] #assistantCopyModeMenu button :is(strong, small),
html:root body[data-project-home-mode="chat"] #assistantAdvancedOptionsPanel :is(span, select, option),
html:root body[data-project-home-mode="chat"] #assistantImageModePanel :is(strong, small, span, select, option),
html:root body[data-project-home-mode="chat"] .byok-model-switch-panel :is(strong, small, span, b, em, p, button, input) {
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
}

html:root body[data-project-home-mode="chat"] #assistantQuickToolsPanel .assistant-tools-grid {
  grid-auto-rows: minmax(60px, auto) !important;
}

html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] {
  max-height: min(78dvh, 760px) !important;
}

/* Message content and attachments must wrap at the larger setting. */
html:root body[data-project-home-mode="chat"] #assistantMessages,
html:root body[data-project-home-mode="chat"] #assistantMessages :is(.assistant-message, .assistant-message-content, .assistant-message-content p, .assistant-message-content li, .assistant-attachment, .assistant-attachment-name) {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-message-content {
  font-size: var(--chat-copy-size) !important;
  line-height: var(--chat-copy-leading) !important;
}

@media (max-width: 767px) {
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded #assistantComposer {
    grid-template-rows: minmax(48px, auto) max-content !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded #assistantComposer > #assistantInput {
    max-height: min(220px, 30dvh) !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantComposer > .assistant-composer-tools {
    flex-wrap: wrap !important;
    min-height: max(34px, calc(var(--chat-tool-size) * 2.8)) !important;
    max-height: none !important;
  }

  html:root body[data-project-home-mode="chat"] #assistantComposer .assistant-composer-tools > :is(#assistantModeSwitch, #assistantImageSettingsBtn, .assistant-quick-tools-wrap) {
    max-width: 100% !important;
  }
}

/* Final chat rail geometry: history is an unbounded list between the quick
   actions and the account card.  Older responsive rules capped this wrapper
   at 160px and painted a panel shadow, which created the visible rectangle in
   the sidebar and left the rest of the rail empty. */
html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeConversationNav,
html:root[data-theme] body[data-project-home-mode="chat"] #projectHomeConversationNav {
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
}

html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger {
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger:hover,
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger:focus-visible,
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger[aria-expanded="true"] {
  border: 0 !important;
  border-color: transparent !important;
  background: color-mix(in srgb, var(--chat-text) 8%, transparent) !important;
  background-color: color-mix(in srgb, var(--chat-text) 8%, transparent) !important;
  outline: none !important;
}

/* Absolute last-cascade account popup guard.  This block intentionally sits
   after the desktop media rules above: those legacy rules reset the rail to
   overflow:hidden, which clips the popup as soon as it is opened. */
html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell,
html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav,
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot {
  overflow: visible !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot {
  position: relative !important;
  z-index: 10040 !important;
  isolation: isolate !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  z-index: 10060 !important;
  display: grid !important;
  width: 276px !important;
  min-width: 276px !important;
  max-width: min(276px, calc(100vw - 24px)) !important;
  max-height: min(560px, calc(100dvh - 24px)) !important;
  box-sizing: border-box !important;
  gap: 4px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 10px !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 12px !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-image: none !important;
  box-shadow: 0 18px 46px rgb(0 0 0 / 30%) !important;
  pointer-events: auto !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #2f2f2f !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu {
  background: #202020 !important;
  background-color: #202020 !important;
  color: #ececec !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu.hidden {
  display: none !important;
}

/* Match the specificity of workmate-ai.css's late theme rule, then add the
   direct-shell path so the account popup's clipping context is really open. */
html:root[data-theme] body[data-project-home-mode="chat"] #step-create > .project-home-shell,
html:root[data-theme] body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav,
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot {
  overflow: visible !important;
}

/* Account menu last-cascade guard.  The desktop responsive block above
   restores overflow:hidden on the rail; that would clip the upward-opening
   account popover and make the history rows show through. */
html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav {
  position: relative !important;
  z-index: 10000 !important;
  overflow: visible !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot {
  position: relative !important;
  z-index: 10040 !important;
  isolation: isolate !important;
  overflow: visible !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  z-index: 10060 !important;
  display: grid !important;
  width: 276px !important;
  min-width: 276px !important;
  max-width: min(276px, calc(100vw - 24px)) !important;
  max-height: min(560px, calc(100dvh - 24px)) !important;
  box-sizing: border-box !important;
  gap: 4px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 10px !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 12px !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-image: none !important;
  box-shadow: 0 18px 46px rgb(0 0 0 / 30%) !important;
  pointer-events: auto !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #2f2f2f !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu {
  background: #202020 !important;
  background-color: #202020 !important;
  color: #ececec !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu.hidden {
  display: none !important;
}

/* Final account-menu layering fix.  The chat rail intentionally clips its
   history list, but the account popup opens upward from the rail and must be
   allowed to escape that clipping context.  The old generic menu rule also
   uses a translucent color-mix/backdrop, which lets history rows show through
   the popup.  Keep the fix chat-only and make the popup an opaque surface in
   both themes. */
html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav {
  overflow: visible !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot {
  position: relative !important;
  z-index: 10040 !important;
  overflow: visible !important;
  isolation: isolate !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  z-index: 10060 !important;
  display: grid !important;
  width: 276px !important;
  min-width: 276px !important;
  max-width: min(276px, calc(100vw - 24px)) !important;
  max-height: min(560px, calc(100dvh - 24px)) !important;
  box-sizing: border-box !important;
  gap: 4px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 10px !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 12px !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-image: none !important;
  box-shadow: 0 18px 46px rgb(0 0 0 / 28%) !important;
  pointer-events: auto !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #2f2f2f !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu {
  background: #202020 !important;
  background-color: #202020 !important;
  color: #ececec !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu.hidden {
  display: none !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu :is(.brand-avatar-menu-head, button, .customer-account-menu-separator) {
  position: relative !important;
  z-index: 1 !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu :is(.brand-avatar-menu-head strong, .customer-account-menu > button) {
  color: #2f2f2f !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu :is(.brand-avatar-menu-head strong, .customer-account-menu > button) {
  color: #ececec !important;
}

@media (min-width: 1024px) {
  html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeConversationNav {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  /* The project/history wrapper itself is the rail; it must not look like a
     separate floating card.  A later legacy theme rule adds a blue-tinted
     shadow through the #projectHomeConversationNav ID, so repeat the full
     selector here to make the chat surface authoritative. */
  html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav > #projectHomeConversationNav,
  html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav > #projectHomeConversationNav {
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeConversationNav > .assistant-side-nav {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-panel {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 4px 0 8px !important;
    overflow: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Keep the history list open in conversation mode, like the reference
     sidebar.  The two compact rows above it remain clickable for switching to
     projects, while history itself no longer disappears behind a fixed card. */
  html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-tabs {
    order: 1 !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeConversationNav #assistantSideProjects {
    order: 2 !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeConversationNav #assistantSideHistory:not(.hidden) {
    display: block !important;
    order: 3 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin-right: 0 !important;
    overflow: auto !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeConversationNav #assistantSideProjects.hidden {
    display: none !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-context-rail {
    top: 82px !important;
    right: 2px !important;
    bottom: 8px !important;
  }

  /* Keep the avatar/settings entry docked at the bottom like the reference
     sidebar; its menu opens upward without taking space from the history. */
  html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot {
    order: 4 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid var(--chat-line) !important;
    background: transparent !important;
  }
}

/* Keep the account entry flat after all legacy/workbench rules have loaded.
   Its menu still contains Settings, while the avatar itself stays docked at
   the bottom of the rail without another enclosing card. */
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger {
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger:hover,
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger:focus-visible,
html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenuBtn.customer-account-trigger[aria-expanded="true"] {
  border: 0 !important;
  border-color: transparent !important;
  background: color-mix(in srgb, var(--chat-text) 8%, transparent) !important;
  background-color: color-mix(in srgb, var(--chat-text) 8%, transparent) !important;
  outline: none !important;
}

/* Absolute final account popup guard. Keep this block at the end of the
   stylesheet so the desktop media rules above cannot restore clipping or a
   translucent popover after the account menu opens. */
html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell,
html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav,
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot {
  overflow: visible !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot {
  position: relative !important;
  z-index: 10040 !important;
  isolation: isolate !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  z-index: 10060 !important;
  display: grid !important;
  width: 276px !important;
  min-width: 276px !important;
  max-width: min(276px, calc(100vw - 24px)) !important;
  max-height: min(560px, calc(100dvh - 24px)) !important;
  box-sizing: border-box !important;
  gap: 4px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 10px !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 12px !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-image: none !important;
  box-shadow: 0 18px 46px rgb(0 0 0 / 30%) !important;
  pointer-events: auto !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #2f2f2f !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu {
  background: #202020 !important;
  background-color: #202020 !important;
  color: #ececec !important;
}

html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu.hidden {
  display: none !important;
}

/* Codex-inspired settings surface: neutral light/dark panels with a calm,
   two-column layout.  Kept at the end so legacy blue settings rules cannot
   bleed into the browser preview. */
html:root { --settings-surface: #ffffff;
  --settings-nav-surface: #f7f7f8;
  --settings-raised: #ffffff;
  --settings-subtle: #f4f4f5;
  --settings-hover: #ededee;
  --settings-active: #e5e5e6;
  --settings-text: #2f2f2f;
  --settings-muted: #6b6b6b;
  --settings-faint: #8b8b8b;
  --settings-line: #e5e5e5;
  --settings-line-strong: #d7d7d8;
  --settings-control: #ffffff;
  --settings-shadow: 0 26px 80px rgb(0 0 0 / 18%);
}

html:root[data-theme="dark"] {
  --settings-surface: #212121;
  --settings-nav-surface: #181818;
  --settings-raised: #282828;
  --settings-subtle: #2a2a2a;
  --settings-hover: #303030;
  --settings-active: #343434;
  --settings-text: #ececec;
  --settings-muted: #b2b2b2;
  --settings-faint: #8b8b8b;
  --settings-line: #3b3b3b;
  --settings-line-strong: #4b4b4b;
  --settings-control: #2f2f2f;
  --settings-shadow: 0 26px 80px rgb(0 0 0 / 48%);
}

html:root body #settingsModal.desktop-modal {
  z-index: 5200 !important;
  padding: clamp(16px, 3.4vw, 48px) !important;
  background: rgb(0 0 0 / 34%) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

html:root[data-theme="dark"] body #settingsModal.desktop-modal {
  background: rgb(0 0 0 / 58%) !important;
}

html:root body #settingsModal .settings-window {
  width: min(1220px, calc(100vw - 48px)) !important;
  height: min(820px, calc(100vh - 48px)) !important;
  max-height: none !important;
  overflow: hidden !important;
  border: 1px solid var(--settings-line-strong) !important;
  border-radius: 16px !important;
  background: var(--settings-surface) !important;
  color: var(--settings-text) !important;
  box-shadow: var(--settings-shadow) !important;
}

html:root body #settingsModal .settings-header {
  height: 76px !important;
  box-sizing: border-box !important;
  padding: 0 30px !important;
  border-bottom: 1px solid var(--settings-line) !important;
  background: var(--settings-surface) !important;
}

html:root body #settingsModal .settings-header h2 {
  color: var(--settings-text) !important;
  font-size: 22px !important;
  font-weight: 650 !important;
  letter-spacing: -.02em !important;
}

html:root body #settingsModal .settings-header p {
  margin-top: 4px !important;
  color: var(--settings-muted) !important;
  font-size: 12px !important;
}

html:root body #settingsModal .settings-header #closeSettingsBtn {
  min-height: 34px !important;
  padding: 0 13px !important;
  border: 1px solid var(--settings-line) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--settings-muted) !important;
}

html:root body #settingsModal .settings-header #closeSettingsBtn:hover,
html:root body #settingsModal .settings-header #closeSettingsBtn:focus-visible {
  border-color: var(--settings-line-strong) !important;
  background: var(--settings-hover) !important;
  color: var(--settings-text) !important;
  outline: none !important;
}

html:root body #settingsModal .settings-layout {
  height: calc(100% - 76px) !important;
  grid-template-columns: 246px minmax(0, 1fr) !important;
  background: var(--settings-surface) !important;
}

html:root body #settingsModal .settings-nav {
  box-sizing: border-box !important;
  padding: 24px 14px !important;
  overflow-y: auto !important;
  border-right: 1px solid var(--settings-line) !important;
  background: var(--settings-nav-surface) !important;
}

html:root body #settingsModal .settings-nav button {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 40px !important;
  height: auto !important;
  margin: 2px 0 !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--settings-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background .14s ease, color .14s ease !important;
}

html:root body #settingsModal .settings-nav button:hover,
html:root body #settingsModal .settings-nav button:focus-visible {
  background: var(--settings-hover) !important;
  color: var(--settings-text) !important;
  outline: none !important;
}

html:root body #settingsModal .settings-nav button.active {
  background: var(--settings-active) !important;
  color: var(--settings-text) !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

html:root body #settingsModal .settings-content {
  min-width: 0 !important;
  overflow: auto !important;
  padding: 46px clamp(30px, 5vw, 72px) 70px !important;
  background: var(--settings-surface) !important;
  color: var(--settings-text) !important;
  scrollbar-color: var(--settings-line-strong) transparent !important;
}

html:root body #settingsModal .settings-pane {
  width: min(860px, 100%) !important;
  margin: 0 auto !important;
}

html:root body #settingsModal .settings-pane h3 {
  margin: 0 0 28px !important;
  color: var(--settings-text) !important;
  font-size: 28px !important;
  font-weight: 650 !important;
  letter-spacing: -.035em !important;
}

html:root body #settingsModal .settings-note,
html:root body #settingsModal .settings-subhead span,
html:root body #settingsModal .settings-support-card header small,
html:root body #settingsModal .settings-support-card > p {
  color: var(--settings-muted) !important;
}

html:root body #settingsModal .settings-facts,
html:root body #settingsModal .settings-support-card,
html:root body #settingsModal .byok-lock-panel,
html:root body #settingsModal .byok-settings-grid,
html:root body #settingsModal .settings-subhead,
html:root body #settingsModal .settings-control-group {
  border-color: var(--settings-line) !important;
}

html:root body #settingsModal .settings-facts {
  margin-bottom: 26px !important;
  padding: 4px 18px !important;
  border: 1px solid var(--settings-line) !important;
  border-radius: 13px !important;
  background: var(--settings-raised) !important;
}

html:root body #settingsModal .settings-facts > div {
  min-height: 50px !important;
  border-bottom-color: var(--settings-line) !important;
}

html:root body #settingsModal .settings-facts > div:last-child {
  border-bottom: 0 !important;
}

html:root body #settingsModal .settings-facts dt,
html:root body #settingsModal .settings-control-label,
html:root body #settingsModal .settings-path-field span,
html:root body #settingsModal .settings-select-field span {
  color: var(--settings-muted) !important;
}

html:root body #settingsModal .settings-facts dd,
html:root body #settingsModal .settings-subhead strong,
html:root body #settingsModal .settings-support-card header strong {
  color: var(--settings-text) !important;
}

html:root body #settingsModal .settings-support-card {
  margin: 22px 0 26px !important;
  padding: 17px 18px !important;
  border: 1px solid var(--settings-line) !important;
  border-radius: 13px !important;
  background: var(--settings-subtle) !important;
  box-shadow: none !important;
}

html:root body #settingsModal .settings-support-card header i {
  color: var(--settings-muted) !important;
}

html:root body #settingsModal .settings-support-contact {
  border-color: var(--settings-line) !important;
  background: var(--settings-raised) !important;
}

html:root body #settingsModal .settings-contact-copy:hover,
html:root body #settingsModal .settings-contact-copy:focus-visible {
  color: var(--settings-text) !important;
}

html:root body #settingsModal .settings-subhead {
  margin: 30px 0 12px !important;
  padding-top: 22px !important;
  border-top: 1px solid var(--settings-line) !important;
}

html:root body #settingsModal .settings-control-group {
  margin: 0 0 18px !important;
  padding: 16px 18px !important;
  border: 1px solid var(--settings-line) !important;
  border-radius: 13px !important;
  background: var(--settings-raised) !important;
}

html:root body #settingsModal .settings-control-group + .settings-control-group {
  margin-top: 12px !important;
}

html:root body #settingsModal .settings-segmented {
  border-color: var(--settings-line) !important;
  border-radius: 9px !important;
  background: var(--settings-subtle) !important;
}

html:root body #settingsModal .settings-segmented span {
  color: var(--settings-muted) !important;
}

html:root body #settingsModal .settings-segmented input:checked + span,
html:root body #settingsModal .byok-kind-switch button[aria-selected="true"] {
  border-color: transparent !important;
  background: var(--settings-active) !important;
  color: var(--settings-text) !important;
  box-shadow: none !important;
}

html:root body #settingsModal .settings-segmented input:focus-visible + span {
  outline: 2px solid var(--settings-line-strong) !important;
  outline-offset: 1px !important;
}

html:root body #settingsModal .settings-toggle {
  color: var(--settings-text) !important;
}

html:root body #settingsModal .settings-toggle input,
html:root body #settingsModal .privacy-confirm input {
  accent-color: #666666 !important;
}

html:root body #settingsModal :is(input:not([type="checkbox"]), textarea, select) {
  border-color: var(--settings-line-strong) !important;
  border-radius: 8px !important;
  background: var(--settings-control) !important;
  color: var(--settings-text) !important;
  box-shadow: none !important;
}

html:root body #settingsModal :is(input:not([type="checkbox"]), textarea, select):focus {
  border-color: #999999 !important;
  outline: 2px solid color-mix(in srgb, var(--settings-text) 16%, transparent) !important;
  outline-offset: 0 !important;
}

html:root body #settingsModal .settings-actions button,
html:root body #settingsModal .ghost-btn,
html:root body #settingsModal .primary-btn {
  border-color: var(--settings-line-strong) !important;
  border-radius: 8px !important;
  background: var(--settings-raised) !important;
  color: var(--settings-text) !important;
  box-shadow: none !important;
}

html:root body #settingsModal .settings-actions button:hover:not(:disabled),
html:root body #settingsModal .ghost-btn:hover:not(:disabled),
html:root body #settingsModal .primary-btn:hover:not(:disabled) {
  border-color: var(--settings-line-strong) !important;
  background: var(--settings-hover) !important;
  color: var(--settings-text) !important;
}

html:root body #settingsModal .settings-actions .primary-btn {
  background: var(--settings-text) !important;
  color: var(--settings-surface) !important;
  border-color: var(--settings-text) !important;
}

html:root body #settingsModal .settings-actions .primary-btn:hover:not(:disabled) {
  background: #454545 !important;
  color: #ffffff !important;
}

html:root body #settingsModal .byok-lock-panel,
html:root body #settingsModal .byok-settings-grid {
  background: var(--settings-subtle) !important;
}

@media (max-width: 760px) {
  html:root body #settingsModal.desktop-modal {
    padding: 0 !important;
  }

  html:root body #settingsModal .settings-window {
    width: 100vw !important;
    height: 100dvh !important;
    border-radius: 0 !important;
  }

  html:root body #settingsModal .settings-layout {
    grid-template-columns: 164px minmax(0, 1fr) !important;
  }

  html:root body #settingsModal .settings-content {
    padding: 32px 22px 50px !important;
  }

  html:root body #settingsModal .settings-pane h3 {
    font-size: 24px !important;
  }
}

@media (max-width: 560px) {
  html:root body #settingsModal .settings-header {
    padding: 0 18px !important;
  }

  html:root body #settingsModal .settings-layout {
    display: block !important;
  }

  html:root body #settingsModal .settings-nav {
    display: flex !important;
    gap: 4px !important;
    padding: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--settings-line) !important;
  }

  html:root body #settingsModal .settings-nav button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 34px !important;
    white-space: nowrap !important;
  }

  html:root body #settingsModal .settings-content {
    height: calc(100% - 132px) !important;
    padding: 26px 16px 40px !important;
  }
}

/* Final neutral palette guard for the ChatGPT-like conversation surface.
   The legacy workbench still paints a few composer controls with blue
   backgrounds after the main chat rules. Keep those controls monochrome in
   chat mode only; work mode keeps its existing brand palette. */
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-composer-tools,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantModeSwitch,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-quick-tools-wrap {
  border-color: var(--chat-line) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--chat-muted) !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantModeSwitch > *,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-quick-tools-wrap > *,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-composer-tools :is(svg, i, .fluent-icon, .fluent-icon-shell) {
  color: currentColor !important;
  fill: currentColor !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-composer-tools :is(button, [role="button"]):hover,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-composer-tools :is(button, [role="button"]):focus-visible,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantModeSwitch :is(button, [role="button"]):hover,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantModeSwitch :is(button, [role="button"]):focus-visible,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-quick-tools-wrap :is(button, [role="button"]):hover,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-quick-tools-wrap :is(button, [role="button"]):focus-visible {
  background: color-mix(in srgb, var(--chat-text) 7%, transparent) !important;
  background-color: color-mix(in srgb, var(--chat-text) 7%, transparent) !important;
  color: var(--chat-text) !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn .fluent-icon,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn svg,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn i {
  background: transparent !important;
  background-color: transparent !important;
  color: currentColor !important;
  fill: currentColor !important;
}

/* Browser-preview settings use the same neutral Codex palette in both themes.
   Clear legacy blue selection, focus and support-card fills without changing
   the colors of generated designs or work-mode controls. */
html:root body #settingsModal .settings-nav button.active,
html:root body #settingsModal .settings-segmented input:checked + span,
html:root body #settingsModal .byok-kind-switch button[aria-selected="true"] {
  background: var(--settings-active) !important;
  background-color: var(--settings-active) !important;
  background-image: none !important;
  color: var(--settings-text) !important;
  box-shadow: none !important;
}

html:root body #settingsModal .settings-support-card,
html:root body #settingsModal .settings-control-group,
html:root body #settingsModal .settings-segmented,
html:root body #settingsModal .byok-lock-panel,
html:root body #settingsModal .byok-settings-grid {
  background-image: none !important;
}

html:root:not([data-theme="dark"]) body #settingsModal .settings-support-card,
html:root:not([data-theme="dark"]) body #settingsModal .settings-control-group,
html:root:not([data-theme="dark"]) body #settingsModal .settings-segmented,
html:root:not([data-theme="dark"]) body #settingsModal .byok-lock-panel,
html:root:not([data-theme="dark"]) body #settingsModal .byok-settings-grid {
  background-color: var(--settings-raised) !important;
}

html:root[data-theme="dark"] body #settingsModal .settings-support-card,
html:root[data-theme="dark"] body #settingsModal .settings-control-group,
html:root[data-theme="dark"] body #settingsModal .settings-segmented,
html:root[data-theme="dark"] body #settingsModal .byok-lock-panel,
html:root[data-theme="dark"] body #settingsModal .byok-settings-grid {
  background-color: var(--settings-raised) !important;
}

/* Chat controls: remove residual blue utility backgrounds and keep every
   action in the same Codex neutral palette. */
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(#assistantModeSwitch, .assistant-quick-tools-wrap, .assistant-composer-tools, #assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn, #assistantAddBtn, #assistantVoiceInputBtn) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #e5e5e5 !important;
  color: #5d5d63 !important;
  -webkit-text-fill-color: #5d5d63 !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(#assistantModeSwitch, .assistant-quick-tools-wrap, .assistant-composer-tools, #assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn, #assistantAddBtn, #assistantVoiceInputBtn) {
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  background-image: none !important;
  border-color: #424242 !important;
  color: #d6d6d6 !important;
  -webkit-text-fill-color: #d6d6d6 !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(#assistantModeSwitch, .assistant-quick-tools-wrap, #assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn, #assistantAddBtn, #assistantVoiceInputBtn):hover,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(#assistantModeSwitch, .assistant-quick-tools-wrap, #assistantModeTrigger, #assistantImageSettingsBtn, #assistantQuickToolsBtn, #assistantAddBtn, #assistantVoiceInputBtn):focus-visible {
  background: color-mix(in srgb, var(--chat-text) 8%, transparent) !important;
  background-color: color-mix(in srgb, var(--chat-text) 8%, transparent) !important;
  border-color: var(--chat-line) !important;
  color: var(--chat-text) !important;
  -webkit-text-fill-color: var(--chat-text) !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(#assistantModeSwitch, .assistant-quick-tools-wrap, .assistant-composer-tools) :is(svg, i, .fluent-icon, span) {
  color: currentColor !important;
  stroke: currentColor !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn {
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  border-color: #2f2f2f !important;
  color: #ffffff !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn {
  background: #ececec !important;
  background-color: #ececec !important;
  border-color: #ececec !important;
  color: #171717 !important;
}
/* Absolute final neutralization of legacy blue icon tokens in chat mode. */
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] :is(.project-home-nav, .project-home-chat, #projectHomeAssistantHost, #assistantDrawer, #assistantNewProjectPanel, #assistantDrawer.embedded) :is(.fluent-icon, .fluent-icon-shell, svg, path, circle, rect, .assistant-mode-switch, .assistant-mode-trigger, .assistant-quick-tools-wrap) {
  color: #6b6b6b !important;
  -webkit-text-fill-color: #6b6b6b !important;
  stroke: #6b6b6b !important;
  fill: currentColor !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] :is(.project-home-nav, .project-home-chat, #projectHomeAssistantHost, #assistantDrawer, #assistantNewProjectPanel, #assistantDrawer.embedded) :is(.fluent-icon, .fluent-icon-shell, svg, path, circle, rect, .assistant-mode-switch, .assistant-mode-trigger, .assistant-quick-tools-wrap) {
  color: #b4b4b4 !important;
  -webkit-text-fill-color: #b4b4b4 !important;
  stroke: #b4b4b4 !important;
  fill: currentColor !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] :is(#assistantModeSwitch, #assistantModeTrigger, .assistant-quick-tools-wrap) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #e5e5e5 !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] :is(#assistantModeSwitch, #assistantModeTrigger, .assistant-quick-tools-wrap) {
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  background-image: none !important;
  border-color: #424242 !important;
}
/* Highest-specificity guard for the mode switch. A legacy ID rule marks this
   one wrapper blue with !important, so repeat the same ID path here. */
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer .assistant-composer-tools > #assistantModeSwitch#assistantModeSwitch {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #e5e5e5 !important;
  color: #5d5d63 !important;
  -webkit-text-fill-color: #5d5d63 !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer .assistant-composer-tools > #assistantModeSwitch#assistantModeSwitch {
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  background-image: none !important;
  border-color: #424242 !important;
  color: #d6d6d6 !important;
  -webkit-text-fill-color: #d6d6d6 !important;
  box-shadow: none !important;
}

/* Legacy release-polish rules use #assistantDrawer #assistantComposer with
   !important. Repeat the IDs in this final chat-only guard so the neutral
   palette wins without changing work mode. */
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer :is(#assistantModeSwitch, .assistant-quick-tools-wrap, #assistantImageSettingsBtn) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #e5e5e5 !important;
  color: #5d5d63 !important;
  -webkit-text-fill-color: #5d5d63 !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer :is(#assistantModeSwitch, .assistant-quick-tools-wrap, #assistantImageSettingsBtn) {
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  background-image: none !important;
  border-color: #424242 !important;
  color: #d6d6d6 !important;
  -webkit-text-fill-color: #d6d6d6 !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer :is(#assistantModeSwitch, .assistant-quick-tools-wrap, #assistantImageSettingsBtn) :is(svg, i, .fluent-icon, .fluent-icon-shell, span) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Neutralize legacy Fluent icon backgrounds and strokes across the chat rail.
   Some old rules target the icon node itself with a blue background, so the
   wrapper-only guard above is insufficient. */
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #projectHomeChatNav :is(svg, .fluent-icon-shell, .fluent-icon),
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #projectHomeConversationNav :is(svg, .fluent-icon-shell, .fluent-icon),
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-composer-tools :is(svg, .fluent-icon-shell, .fluent-icon) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #6b6b6b !important;
  -webkit-text-fill-color: #6b6b6b !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeChatNav :is(svg, .fluent-icon-shell, .fluent-icon),
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeConversationNav :is(svg, .fluent-icon-shell, .fluent-icon),
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-composer-tools :is(svg, .fluent-icon-shell, .fluent-icon) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #b4b4b4 !important;
  -webkit-text-fill-color: #b4b4b4 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Final cascade guard for the settings shell. A few legacy theme selectors use
   :is() with higher specificity, so repeat the modal id and set longhands. */
html:root body #settingsModal#settingsModal .settings-window {
  border-color: var(--settings-line-strong) !important;
  background: var(--settings-surface) !important;
  background-color: var(--settings-surface) !important;
  box-shadow: var(--settings-shadow) !important;
}
html:root:not([data-theme="dark"]) body #settingsModal#settingsModal .settings-window {
  border-color: #d7d7d8 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: 0 26px 80px rgb(0 0 0 / 18%) !important;
}
html:root[data-theme="dark"] body #settingsModal#settingsModal .settings-window {
  border-color: #4b4b4b !important;
  background: #212121 !important;
  background-color: #212121 !important;
  box-shadow: 0 26px 80px rgb(0 0 0 / 48%) !important;
}
html:root body #settingsModal#settingsModal .settings-header,
html:root body #settingsModal#settingsModal .settings-content {
  background: var(--settings-surface) !important;
  background-color: var(--settings-surface) !important;
}
html:root:not([data-theme="dark"]) body #settingsModal#settingsModal .settings-header,
html:root:not([data-theme="dark"]) body #settingsModal#settingsModal .settings-content {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
html:root[data-theme="dark"] body #settingsModal#settingsModal .settings-header,
html:root[data-theme="dark"] body #settingsModal#settingsModal .settings-content {
  background: #212121 !important;
  background-color: #212121 !important;
}
html:root body #settingsModal#settingsModal .settings-nav {
  background: var(--settings-nav-surface) !important;
  background-color: var(--settings-nav-surface) !important;
}
html:root:not([data-theme="dark"]) body #settingsModal#settingsModal .settings-nav {
  background: #f7f7f8 !important;
  background-color: #f7f7f8 !important;
}
html:root[data-theme="dark"] body #settingsModal#settingsModal .settings-nav {
  background: #181818 !important;
  background-color: #181818 !important;
}
html:root body #settingsModal#settingsModal .settings-header,
html:root body #settingsModal#settingsModal .settings-nav {
  border-color: var(--settings-line) !important;
}
html:root:not([data-theme="dark"]) body #settingsModal#settingsModal .settings-header,
html:root:not([data-theme="dark"]) body #settingsModal#settingsModal .settings-nav {
  border-color: #e5e5e5 !important;
}
html:root[data-theme="dark"] body #settingsModal#settingsModal .settings-header,
html:root[data-theme="dark"] body #settingsModal#settingsModal .settings-nav {
  border-color: #3b3b3b !important;
}
html:root body #settingsModal#settingsModal .settings-nav button.active {
  background: var(--settings-active) !important;
  background-color: var(--settings-active) !important;
  color: var(--settings-text) !important;
  box-shadow: none !important;
}
html:root body #settingsModal#settingsModal .settings-support-card {
  border-color: var(--settings-line) !important;
  background: var(--settings-subtle) !important;
  background-color: var(--settings-subtle) !important;
  box-shadow: none !important;
}
html:root body #settingsModal#settingsModal .settings-support-card :is(svg, .fluent-icon, .fluent-icon-shell) {
  color: var(--settings-muted) !important;
  stroke: currentColor !important;
  fill: none !important;
}
html:root body #settingsModal#settingsModal :is(.settings-actions, .settings-support-card) :is(svg, .fluent-icon, .fluent-icon-shell) {
  color: var(--settings-muted) !important;
  stroke: currentColor !important;
}
html:root body #settingsModal#settingsModal .settings-actions .primary-btn {
  background: var(--settings-text) !important;
  background-color: var(--settings-text) !important;
  border-color: var(--settings-text) !important;
  color: var(--settings-surface) !important;
}
html:root body #settingsModal#settingsModal input[type="checkbox"] {
  accent-color: #666666 !important;
}

/* Final neutral icon guard for both Codex-like chat themes.  The legacy
   workbench still paints Fluent masks and Lucide icons blue with high
   specificity.  Scope this correction to the conversation surface and the
   settings dialog so the workbench/design surface keeps its own palette. */
html:root body[data-project-home-mode="chat"] #step-create#step-create :is(
  #projectHomeChatNav, #projectHomeConversationNav, .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded, #assistantQuickToolsPanel,
  #assistantAddMenu
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon) {
  color: #6b6b6b !important;
  -webkit-text-fill-color: #6b6b6b !important;
  background-image: none !important;
  filter: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create#step-create :is(
  #projectHomeChatNav, #projectHomeConversationNav, .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded, #assistantQuickToolsPanel,
  #assistantAddMenu
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon) {
  color: #b4b4b4 !important;
  -webkit-text-fill-color: #b4b4b4 !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create :is(
  #projectHomeChatNav, #projectHomeConversationNav, .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded, #assistantQuickToolsPanel,
  #assistantAddMenu
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide) {
  stroke: currentColor !important;
  fill: none !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create :is(
  #projectHomeChatNav, #projectHomeConversationNav, .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded, #assistantQuickToolsPanel,
  #assistantAddMenu
) .fluent-icon {
  display: block !important;
  background: currentColor !important;
  background-color: currentColor !important;
  background-image: none !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create :is(
  #projectHomeChatNav, #projectHomeConversationNav, .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded, #assistantQuickToolsPanel,
  #assistantAddMenu
) :is(.fluent-icon-shell, [data-fluent-icon]) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* The add, voice and send controls are part of the composer but sit outside
   the quick-tool wrappers.  Keep their icons neutral in both themes. */
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded #assistantComposer#assistantComposer :is(
  #assistantAddBtn, #assistantVoiceInputBtn, #assistantSendBtn
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide) {
  color: #6b6b6b !important;
  -webkit-text-fill-color: #6b6b6b !important;
  stroke: currentColor !important;
  fill: none !important;
}
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded #assistantComposer#assistantComposer :is(
  #assistantAddBtn, #assistantVoiceInputBtn, #assistantSendBtn
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide) {
  color: #b4b4b4 !important;
  -webkit-text-fill-color: #b4b4b4 !important;
}
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded #assistantComposer#assistantComposer :is(
  #assistantAddBtn, #assistantVoiceInputBtn, #assistantSendBtn
) .fluent-icon {
  background: currentColor !important;
  background-color: currentColor !important;
  background-image: none !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}

/* Settings uses the same neutral icon treatment. */
html:root body #settingsModal#settingsModal :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: #6b6b6b !important;
  -webkit-text-fill-color: #6b6b6b !important;
  background-image: none !important;
  filter: none !important;
}
html:root[data-theme="dark"] body #settingsModal#settingsModal :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: #b4b4b4 !important;
  -webkit-text-fill-color: #b4b4b4 !important;
}
html:root body #settingsModal#settingsModal :is(svg, svg *, i[data-lucide], [data-lucide], .lucide) {
  stroke: currentColor !important;
  fill: none !important;
}
html:root body #settingsModal#settingsModal .fluent-icon {
  background: currentColor !important;
  background-color: currentColor !important;
  background-image: none !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}
html:root body #settingsModal#settingsModal input[type="checkbox"] {
  accent-color: #666666 !important;
}
/* Conversation cards are text flow, not colored panels. Remove the legacy
   pale-blue message/task containers shown in the reference screenshot. */
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(
  .assistant-message-content,
  .assistant-generated-result,
  .assistant-generated-image-card,
  .assistant-task-card,
  .assistant-status,
  .assistant-service-notice,
  .assistant-error,
  .assistant-message-attachments
) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: transparent !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}

/* The design-hub/context summary can also be rendered inside the
   conversation stream.  Keep it as ordinary flow content so the light theme
   does not reintroduce the pale-blue panel that the chat surface removed. */
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(
  .assistant-context-block,
  .assistant-brief-summary,
  .assistant-design-hub,
  .assistant-design-hub-head,
  .assistant-design-hub-body,
  .assistant-design-hub-meta,
  .assistant-design-hub-meta > *,
  .assistant-design-hub-body > *,
  .assistant-design-hub-head > *
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(
  .assistant-message-content,
  .assistant-generated-result,
  .assistant-generated-image-card,
  .assistant-task-card,
  .assistant-status,
  .assistant-service-notice,
  .assistant-error,
  .assistant-message-attachments
) {
  background: #212121 !important;
  background-color: #212121 !important;
  background-image: none !important;
  border-color: transparent !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}

/* User turns remain readable through text weight and spacing, without the
   large rounded blue response card. */
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message.user .assistant-message-content {
  background: #f4f4f4 !important;
  background-color: #f4f4f4 !important;
  border: 0 !important;
  border-radius: 14px !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message.user .assistant-message-content {
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  border: 0 !important;
  border-radius: 14px !important;
}

/* Remove tinted status/progress fills while keeping a thin neutral track. */
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(
  .assistant-task-progress, .assistant-pdf-progress, .assistant-task-progress i,
  .assistant-pdf-progress i, .assistant-status, .assistant-context-chip,
  .assistant-suggestion, .assistant-execution-controls
) {
  background-image: none !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(
  .assistant-task-progress, .assistant-pdf-progress
) {
  background: #e5e5e5 !important;
  background-color: #e5e5e5 !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(
  .assistant-task-progress, .assistant-pdf-progress
) {
  background: #424242 !important;
  background-color: #424242 !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(
  .assistant-task-progress i, .assistant-pdf-progress i
) {
  background: var(--klein-blue) !important;
  background-color: var(--klein-blue) !important;
  background-image: none !important;
}
/* ChatGPT-like conversation flow: remove legacy colored message shells and
   blue-tinted result/detail cards. The page surface carries the theme color;
   content remains readable through text, spacing and images. */
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(
  .assistant-message,
  .assistant-message.user,
  .assistant-message.assistant,
  .assistant-message.result,
  .assistant-message-content,
  .assistant-generated-result,
  .assistant-generated-image-card,
  .assistant-task-card,
  .assistant-status,
  .assistant-service-notice,
  .assistant-error,
  .assistant-context-chip,
  .assistant-suggestion,
  .assistant-execution-controls,
  .assistant-artifact-quality-meta,
  .assistant-artifact-evidence,
  .assistant-quality-gate,
  .assistant-design-strategy,
  .assistant-design-strategy-body,
  .assistant-design-strategy-meta > span,
  .assistant-design-strategy-columns > section,
  .assistant-design-strategy-route span,
  .assistant-design-strategy-locks span,
  .assistant-quality-gate > summary,
  .assistant-quality-gate-body,
  .assistant-quality-gate-body > ul > li,
  .assistant-artifact-evidence > summary,
  .assistant-artifact-evidence > dl > div,
  .assistant-message-attachments
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}

/* The user turn should read as right-aligned text, without a colored bubble. */
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message.user .assistant-message-content {
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Keep generated images and their neutral preview area visible while removing
   the surrounding blue tile and gradient decorations. */
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(
  .assistant-image-generation-progress,
  .assistant-image-generation-progress-card,
  .assistant-image-generation-progress-canvases,
  .assistant-image-generation-progress-visual,
  .assistant-image-generation-preview
) {
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(
  .assistant-image-generation-progress-visual,
  .assistant-image-generation-preview
) {
  background: #f7f7f8 !important;
  background-color: #f7f7f8 !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(
  .assistant-image-generation-progress-visual,
  .assistant-image-generation-preview
) {
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
}

/* Any remaining semantic status fills use the same flat conversation surface. */
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(
  .assistant-quality-gate.warning,
  .assistant-quality-gate.blocked,
  .assistant-design-strategy-missing,
  .assistant-design-strategy-ready,
  .assistant-status.success,
  .assistant-status.warning,
  .assistant-status.error,
  .assistant-error,
  .assistant-task-card.completed,
  .assistant-task-card.failed
) {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  border-left-color: transparent !important;
}

/* Final conversation pass: result metadata and delivery panels are part of
   the message flow too.  The legacy workbench skin paints these regions pale
   blue; in conversation mode they should read as unboxed text on the page
   surface, like the reference ChatGPT layout.  Keep this scoped to
   #assistantMessages so work mode keeps its structured cards. */
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantMessages :is(
  .assistant-history-task-label,
  .assistant-professional-review,
  .assistant-professional-review-score,
  .assistant-production-checks,
  .assistant-delivery-preview-prompt,
  .assistant-artifact-quick-retry,
  .assistant-work-tools,
  .assistant-work-tools-body,
  .assistant-artifact-sync-note,
  .assistant-quality-gate,
  .assistant-design-strategy,
  .assistant-design-strategy-body,
  .assistant-artifact-quality-meta,
  .assistant-artifact-evidence,
  .assistant-generated-result,
  .assistant-task-card,
  .assistant-status,
  .assistant-service-notice,
  .assistant-error,
  .assistant-context-chip,
  .assistant-suggestion,
  .assistant-execution-controls
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}

/* Highest-specificity no-card pass.  Some legacy rules use repeated IDs and
   theme-specific selectors, so the earlier neutral declarations can still be
   overridden by a user bubble or a review detail row.  Conversation mode is
   intentionally a flat document flow: remove those fills, borders and
   shadows while leaving the generated-image preview surface untouched. */
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantMessages :is(
  .assistant-message-content,
  .assistant-message.user .assistant-message-content,
  .assistant-message.result .assistant-message-content,
  .assistant-history-task-label,
  .assistant-professional-review,
  .assistant-professional-review > summary,
  .assistant-professional-review-body,
  .assistant-professional-review-score,
  .assistant-professional-review-checks,
  .assistant-professional-review-checks > li,
  .assistant-professional-review > section,
  .assistant-professional-review-issues,
  .assistant-professional-review-issues > li,
  .assistant-production-checks,
  .assistant-production-checks > header,
  .assistant-production-checks > ul,
  .assistant-production-checks > ul > li,
  .assistant-delivery-preview-prompt,
  .assistant-artifact-quick-retry,
  .assistant-artifact-quick-retry > header,
  .assistant-artifact-quick-retry > div,
  .assistant-work-tools,
  .assistant-work-tools-body,
  .assistant-work-tools-group,
  .assistant-work-tools-group > h4,
  .assistant-work-tools-group > div,
  .assistant-artifact-sync-note,
  .assistant-quality-gate,
  .assistant-quality-gate > summary,
  .assistant-quality-gate-body,
  .assistant-quality-gate-body > ul,
  .assistant-quality-gate-body > ul > li,
  .assistant-quality-gate-body > footer,
  .assistant-design-strategy,
  .assistant-design-strategy > *,
  .assistant-artifact-quality-meta,
  .assistant-artifact-evidence,
  .assistant-artifact-evidence > summary,
  .assistant-artifact-evidence > dl > div,
  .assistant-turn-badge,
  .assistant-message-actions,
  .assistant-message-action-btn
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantMessages :is(
  .assistant-message-content,
  .assistant-message.user .assistant-message-content,
  .assistant-message.result .assistant-message-content,
  .assistant-history-task-label,
  .assistant-professional-review,
  .assistant-professional-review > summary,
  .assistant-professional-review-body,
  .assistant-professional-review-score,
  .assistant-professional-review-checks,
  .assistant-professional-review-checks > li,
  .assistant-professional-review > section,
  .assistant-professional-review-issues,
  .assistant-professional-review-issues > li,
  .assistant-production-checks,
  .assistant-production-checks > header,
  .assistant-production-checks > ul,
  .assistant-production-checks > ul > li,
  .assistant-delivery-preview-prompt,
  .assistant-artifact-quick-retry,
  .assistant-artifact-quick-retry > header,
  .assistant-artifact-quick-retry > div,
  .assistant-work-tools,
  .assistant-work-tools-body,
  .assistant-work-tools-group,
  .assistant-work-tools-group > h4,
  .assistant-work-tools-group > div,
  .assistant-artifact-sync-note,
  .assistant-quality-gate,
  .assistant-quality-gate > summary,
  .assistant-quality-gate-body,
  .assistant-quality-gate-body > ul,
  .assistant-quality-gate-body > ul > li,
  .assistant-quality-gate-body > footer,
  .assistant-design-strategy,
  .assistant-design-strategy > *,
  .assistant-artifact-quality-meta,
  .assistant-artifact-evidence,
  .assistant-artifact-evidence > summary,
  .assistant-artifact-evidence > dl > div,
  .assistant-turn-badge,
  .assistant-message-actions,
  .assistant-message-action-btn
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}

/* Flatten the nested detail rows that carry the old blue tint.  Buttons and
   image elements are intentionally excluded so controls remain discoverable
   and generated artwork keeps its own preview surface. */
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantMessages :is(
  .assistant-production-checks,
  .assistant-artifact-quick-retry,
  .assistant-work-tools-body,
  .assistant-quality-gate,
  .assistant-quality-gate-body,
  .assistant-design-strategy,
  .assistant-design-strategy-body,
  .assistant-artifact-evidence
) :is(
  header,
  footer,
  section,
  ul,
  ol,
  li,
  dl,
  dt,
  dd,
  summary,
  .assistant-professional-review-score,
  .assistant-artifact-evidence > dl > div,
  .assistant-quality-gate-body > ul > li,
  .assistant-design-strategy-meta > span,
  .assistant-design-strategy-columns > section,
  .assistant-design-strategy-route span,
  .assistant-design-strategy-locks span
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}

/* The delivery and sync notices are informational text, not action cards. */
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantMessages :is(
  .assistant-delivery-preview-prompt,
  .assistant-artifact-sync-note,
  .assistant-history-task-label
) :is(p, strong, small, span, em) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Final icon system: both home modes use flat Klein blue line icons. Keep this
   scoped to mode chrome and action icons; card/panel surfaces keep their own
   background treatment. Lucide icons stay outline-only and Fluent glyphs use a
   flat mask fill with no gradients. */
html:root body[data-project-home-mode="chat"] :is(
  #projectHomeChatNav,
  #projectHomeConversationNav,
  .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded,
  #assistantQuickToolsPanel,
  #assistantAddMenu
) :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: var(--neutral-accent, #a86f25) !important;
  -webkit-text-fill-color: var(--neutral-accent, #a86f25) !important;
  filter: none !important;
  background-image: none !important;
}

html:root body[data-project-home-mode="chat"] :is(
  #projectHomeChatNav,
  #projectHomeConversationNav,
  .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded,
  #assistantQuickToolsPanel,
  #assistantAddMenu
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide) {
  fill: none !important;
  stroke: var(--neutral-accent, #a86f25) !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html:root body[data-project-home-mode="chat"] :is(
  #projectHomeChatNav,
  #projectHomeConversationNav,
  .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded,
  #assistantQuickToolsPanel,
  #assistantAddMenu
) .fluent-icon-shell {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] :is(
  #projectHomeChatNav,
  #projectHomeConversationNav,
  .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded,
  #assistantQuickToolsPanel,
  #assistantAddMenu
) .fluent-icon {
  background: var(--neutral-accent, #a86f25) !important;
  background-color: var(--neutral-accent, #a86f25) !important;
  background-image: none !important;
  filter: none !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

/* Work mode action/navigation icons share the same monochrome line treatment.
   Do not style panel backgrounds here. */
html:root body[data-project-home-mode="work"] #step-create :is(
  .project-home-mode-switch,
  .project-home-nav,
  .project-home-work,
  .project-home-quick-actions,
  .project-home-dashboard-rail,
  [data-workspace-tool],
  .quick-action-icon
) :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: var(--neutral-accent, #a86f25) !important;
  -webkit-text-fill-color: var(--neutral-accent, #a86f25) !important;
  filter: none !important;
  background-image: none !important;
}

html:root body[data-project-home-mode="work"] #step-create :is(
  .project-home-mode-switch,
  .project-home-nav,
  .project-home-work,
  .project-home-quick-actions,
  .project-home-dashboard-rail,
  [data-workspace-tool],
  .quick-action-icon
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide) {
  fill: none !important;
  stroke: var(--neutral-accent, #a86f25) !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html:root body[data-project-home-mode="work"] #step-create :is(
  .project-home-mode-switch,
  .project-home-nav,
  .project-home-work,
  .project-home-quick-actions,
  .project-home-dashboard-rail,
  [data-workspace-tool],
  .quick-action-icon
) .fluent-icon-shell {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="work"] #step-create :is(
  .project-home-mode-switch,
  .project-home-nav,
  .project-home-work,
  .project-home-quick-actions,
  .project-home-dashboard-rail,
  [data-workspace-tool],
  .quick-action-icon
) .fluent-icon {
  background: var(--neutral-accent, #a86f25) !important;
  background-color: var(--neutral-accent, #a86f25) !important;
  background-image: none !important;
  filter: none !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

/* Cascade hardening for the Klein blue outline icon system. Several legacy
   theme selectors repeat #step-create / #appShell and therefore outrank a
   broad mode selector even when both declarations are !important. Keep this
   final guard scoped to icon nodes and their tile wrappers only. */
html:root body[data-project-home-mode="chat"] #step-create#step-create :is(
  #projectHomeChatNav,
  #projectHomeConversationNav,
  .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded,
  #assistantQuickToolsPanel,
  #assistantAddMenu
) :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: var(--neutral-accent, #a86f25) !important;
  -webkit-text-fill-color: var(--neutral-accent, #a86f25) !important;
  filter: none !important;
  background-image: none !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create :is(
  #projectHomeChatNav,
  #projectHomeConversationNav,
  .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded,
  #assistantQuickToolsPanel,
  #assistantAddMenu
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide) {
  fill: none !important;
  stroke: var(--neutral-accent, #a86f25) !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create :is(
  #projectHomeChatNav,
  #projectHomeConversationNav,
  .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded,
  #assistantQuickToolsPanel,
  #assistantAddMenu
) .fluent-icon-shell {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create :is(
  #projectHomeChatNav,
  #projectHomeConversationNav,
  .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded,
  #assistantQuickToolsPanel,
  #assistantAddMenu
) .fluent-icon {
  background: var(--neutral-accent, #a86f25) !important;
  background-color: var(--neutral-accent, #a86f25) !important;
  background-image: none !important;
  filter: none !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

html:root body[data-project-home-mode="work"] #step-create#step-create :is(
  .project-home-mode-switch,
  .project-home-nav,
  .project-home-work,
  .project-home-quick-actions,
  .project-home-dashboard-rail,
  [data-workspace-tool],
  .quick-action-icon
) :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: var(--neutral-accent, #a86f25) !important;
  -webkit-text-fill-color: var(--neutral-accent, #a86f25) !important;
  filter: none !important;
  background-image: none !important;
}

html:root body[data-project-home-mode="work"] #step-create#step-create :is(
  .project-home-mode-switch,
  .project-home-nav,
  .project-home-work,
  .project-home-quick-actions,
  .project-home-dashboard-rail,
  [data-workspace-tool],
  .quick-action-icon
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide) {
  fill: none !important;
  stroke: var(--neutral-accent, #a86f25) !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html:root body[data-project-home-mode="work"] #step-create#step-create :is(
  .project-home-mode-switch,
  .project-home-nav,
  .project-home-work,
  .project-home-quick-actions,
  .project-home-dashboard-rail,
  [data-workspace-tool],
  .quick-action-icon
) :is(.fluent-icon-shell, .quick-action-icon) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="work"] #step-create#step-create :is(
  .project-home-mode-switch,
  .project-home-nav,
  .project-home-work,
  .project-home-quick-actions,
  .project-home-dashboard-rail,
  [data-workspace-tool],
  .quick-action-icon
) .fluent-icon {
  background: var(--neutral-accent, #a86f25) !important;
  background-color: var(--neutral-accent, #a86f25) !important;
  background-image: none !important;
  filter: none !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

/* Final cascade lock: include the app-shell ID so legacy high-specificity theme
   rules cannot turn mode icons gray/white after this stylesheet loads. */
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create :is(
  #projectHomeChatNav,
  #projectHomeConversationNav,
  .project-home-nav,
  .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded,
  #assistantQuickToolsPanel,
  #assistantAddMenu
) :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: var(--neutral-accent, #a86f25) !important;
  -webkit-text-fill-color: var(--neutral-accent, #a86f25) !important;
  filter: none !important;
  background-image: none !important;
}
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create :is(
  #projectHomeChatNav,
  #projectHomeConversationNav,
  .project-home-nav,
  .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded,
  #assistantQuickToolsPanel,
  #assistantAddMenu
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide) {
  fill: none !important;
  stroke: var(--neutral-accent, #a86f25) !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create :is(
  #projectHomeChatNav,
  #projectHomeConversationNav,
  .project-home-nav,
  .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded,
  #assistantQuickToolsPanel,
  #assistantAddMenu
) .fluent-icon-shell {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create :is(
  #projectHomeChatNav,
  #projectHomeConversationNav,
  .project-home-nav,
  .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded,
  #assistantQuickToolsPanel,
  #assistantAddMenu
) .fluent-icon {
  background: var(--neutral-accent, #a86f25) !important;
  background-color: var(--neutral-accent, #a86f25) !important;
  background-image: none !important;
  filter: none !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

html:root[data-theme] body[data-project-home-mode="work"] #appShell#appShell #step-create#step-create :is(
  .project-home-mode-switch,
  .project-home-nav,
  .project-home-work,
  .project-home-quick-actions,
  .project-home-dashboard-rail,
  [data-workspace-tool],
  .quick-action-icon
) :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: var(--neutral-accent, #a86f25) !important;
  -webkit-text-fill-color: var(--neutral-accent, #a86f25) !important;
  filter: none !important;
  background-image: none !important;
}
html:root[data-theme] body[data-project-home-mode="work"] #appShell#appShell #step-create#step-create :is(
  .project-home-mode-switch,
  .project-home-nav,
  .project-home-work,
  .project-home-quick-actions,
  .project-home-dashboard-rail,
  [data-workspace-tool],
  .quick-action-icon
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide) {
  fill: none !important;
  stroke: var(--neutral-accent, #a86f25) !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html:root[data-theme] body[data-project-home-mode="work"] #appShell#appShell #step-create#step-create :is(
  .project-home-mode-switch,
  .project-home-nav,
  .project-home-work,
  .project-home-quick-actions,
  .project-home-dashboard-rail,
  [data-workspace-tool],
  .quick-action-icon
) :is(.fluent-icon-shell, .quick-action-icon) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html:root[data-theme] body[data-project-home-mode="work"] #appShell#appShell #step-create#step-create :is(
  .project-home-mode-switch,
  .project-home-nav,
  .project-home-work,
  .project-home-quick-actions,
  .project-home-dashboard-rail,
  [data-workspace-tool],
  .quick-action-icon
) .fluent-icon {
  background: var(--neutral-accent, #a86f25) !important;
  background-color: var(--neutral-accent, #a86f25) !important;
  background-image: none !important;
  filter: none !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

/* Last-mile all-icon lock for both home modes. Only icon nodes and icon tiles
   are touched; cards, panels and page backgrounds remain unchanged. */
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: var(--neutral-accent, #a86f25) !important;
  -webkit-text-fill-color: var(--neutral-accent, #a86f25) !important;
  filter: none !important;
  background-image: none !important;
}
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide
) {
  fill: none !important;
  stroke: var(--neutral-accent, #a86f25) !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create :is(
  .fluent-icon-shell, .quick-action-icon
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create .fluent-icon {
  background: var(--neutral-accent, #a86f25) !important;
  background-color: var(--neutral-accent, #a86f25) !important;
  background-image: none !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

html:root body[data-project-home-mode="work"] #appShell#appShell #step-create#step-create :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: var(--neutral-accent, #a86f25) !important;
  -webkit-text-fill-color: var(--neutral-accent, #a86f25) !important;
  filter: none !important;
  background-image: none !important;
}
html:root body[data-project-home-mode="work"] #appShell#appShell #step-create#step-create :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide
) {
  fill: none !important;
  stroke: var(--neutral-accent, #a86f25) !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html:root body[data-project-home-mode="work"] #appShell#appShell #step-create#step-create :is(
  .fluent-icon-shell, .quick-action-icon
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html:root body[data-project-home-mode="work"] #appShell#appShell #step-create#step-create .fluent-icon {
  background: var(--neutral-accent, #a86f25) !important;
  background-color: var(--neutral-accent, #a86f25) !important;
  background-image: none !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}
/* Work-mode icon host cleanup. The legacy workbench still paints assistant
   history buttons with blue gradient tiles when the chat drawer is mounted;
   flatten those tiles while retaining the icon itself as Klein blue. */
html:root body[data-project-home-mode="work"] #appShell#appShell #step-create#step-create :is(
  #projectHomeChatNav,
  #projectHomeConversationNav,
  #assistantDrawer#assistantDrawer.embedded,
  #assistantQuickToolsPanel,
  #assistantAddMenu
) :is(
  .assistant-side-tabs button,
  .assistant-new-conversation,
  .assistant-mode-toggle,
  .assistant-quick-tools-btn,
  .assistant-add-menu-action
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html:root body[data-project-home-mode="work"] #appShell#appShell #step-create#step-create :is(
  #projectHomeChatNav,
  #projectHomeConversationNav,
  #assistantDrawer#assistantDrawer.embedded,
  #assistantQuickToolsPanel,
  #assistantAddMenu
) :is(
  .assistant-side-tabs button,
  .assistant-new-conversation,
  .assistant-mode-toggle,
  .assistant-quick-tools-btn,
  .assistant-add-menu-action
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide) {
  color: var(--neutral-accent, #a86f25) !important;
  -webkit-text-fill-color: var(--neutral-accent, #a86f25) !important;
  stroke: var(--neutral-accent, #a86f25) !important;
  fill: none !important;
  background-image: none !important;
}
/* Work-mode history controls are mounted under the top-level drawer rather
   than #step-create in the desktop shell. Keep the same flat Klein blue rule
   on that portal subtree, without touching its panel background. */
html:root body[data-project-home-mode="work"] #appShell#appShell :is(
  #projectHomeChatNav,
  #projectHomeConversationNav,
  #assistantDrawer#assistantDrawer.embedded,
  #assistantQuickToolsPanel,
  #assistantAddMenu
) :is(
  .assistant-side-tabs button,
  .assistant-new-conversation,
  .assistant-mode-toggle,
  .assistant-quick-tools-btn,
  .assistant-add-menu-action
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html:root body[data-project-home-mode="work"] #appShell#appShell :is(
  #projectHomeChatNav,
  #projectHomeConversationNav,
  #assistantDrawer#assistantDrawer.embedded,
  #assistantQuickToolsPanel,
  #assistantAddMenu
) :is(
  .assistant-side-tabs button,
  .assistant-new-conversation,
  .assistant-mode-toggle,
  .assistant-quick-tools-btn,
  .assistant-add-menu-action
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide) {
  color: var(--neutral-accent, #a86f25) !important;
  -webkit-text-fill-color: var(--neutral-accent, #a86f25) !important;
  stroke: var(--neutral-accent, #a86f25) !important;
  fill: none !important;
  background-image: none !important;
}
/* Final portal drawer guard: in work mode the non-embedded assistant side rail
   is mounted directly below body, so scope it explicitly by its drawer ID. */
html:root body[data-project-home-mode="work"] #assistantDrawer#assistantDrawer :is(
  .assistant-side-tabs button,
  .assistant-new-conversation,
  .assistant-mode-toggle,
  .assistant-quick-tools-btn,
  .assistant-add-menu-action
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html:root body[data-project-home-mode="work"] #assistantDrawer#assistantDrawer :is(
  .assistant-side-tabs button,
  .assistant-new-conversation,
  .assistant-mode-toggle,
  .assistant-quick-tools-btn,
  .assistant-add-menu-action
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide) {
  color: var(--neutral-accent, #a86f25) !important;
  -webkit-text-fill-color: var(--neutral-accent, #a86f25) !important;
  stroke: var(--neutral-accent, #a86f25) !important;
  fill: none !important;
  background-image: none !important;
}
/* Portal side-tab icon inherits white from a work-mode active button; force
   both the icon color and its stroke so Klein blue remains visible. */
html:root body[data-project-home-mode="work"] #assistantDrawer#assistantDrawer :is(
  .assistant-side-tabs button,
  .assistant-new-conversation
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide) {
  color: var(--neutral-accent, #a86f25) !important;
  -webkit-text-fill-color: var(--neutral-accent, #a86f25) !important;
  stroke: var(--neutral-accent, #a86f25) !important;
  fill: none !important;
}
/* Color inheritance guard for work-mode portal icons: the active side-tab
   button itself may force white text; reset the icon node color explicitly. */
html:root body[data-project-home-mode="work"] #assistantDrawer#assistantDrawer :is(
  .assistant-side-tabs button,
  .assistant-new-conversation
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide) {
  color: var(--neutral-accent, #a86f25) !important;
  -webkit-text-fill-color: var(--neutral-accent, #a86f25) !important;
  stroke: var(--neutral-accent, #a86f25) !important;
  fill: none !important;
}
html:root body[data-project-home-mode="work"] #assistantDrawer#assistantDrawer :is(
  .assistant-side-tabs button,
  .assistant-new-conversation
) :is(svg, svg *) {
  color: var(--neutral-accent, #a86f25) !important;
  stroke: var(--neutral-accent, #a86f25) !important;
}


/* Unified conversation canvas: no horizontal chrome seams.  In chat mode the
   top bar, message area, and composer surround use exactly the same surface
   color in both themes.  The composer itself stays a single raised control;
   its own outline remains usable, while inter-region borders disappear. */
html:root body[data-project-home-mode="chat"] .project-home-chat-topbar,
html:root body[data-project-home-mode="chat"] .project-home-content,
html:root body[data-project-home-mode="chat"] #projectHomeChat,
html:root body[data-project-home-mode="chat"] .project-home-chat,
html:root body[data-project-home-mode="chat"] #projectHomeAssistantHost,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"],
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages {
  background: var(--chat-bg) !important;
  background-color: var(--chat-bg) !important;
  background-image: none !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}

/* The top bar is part of that same canvas; remove the line that previously
   separated it from the conversation. */
html:root body[data-project-home-mode="chat"] .project-home-chat-topbar {
  border: 0 !important;
}

/* The left rail has no separator in the reference surface. Keep it on the
   same theme surface so its edge does not read as a second color band. */
html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav {
  background: var(--chat-bg) !important;
  background-color: var(--chat-bg) !important;
  border: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
}

/* No artificial line above the account row in the sidebar. */
html:root body[data-project-home-mode="chat"] #step-create .project-home-account-slot,
html:root body[data-project-home-mode="chat"] #appAvatarControl {
  border-top: 0 !important;
}

/* The composer is the only intentional raised surface.  Its surrounding
   wrapper does not add another boundary, and the input keeps one consistent
   outline in both light and dark themes. */
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantComposer,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer.assistant-composer {
  border: 1px solid var(--chat-line) !important;
  box-shadow: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer.assistant-composer:focus-within {
  border-color: var(--chat-line) !important;
  box-shadow: none !important;
}

/* Lightweight model picker: the top bar only switches profiles already saved
   in Settings. Provider discovery, API fields and password controls stay out
   of this menu so it remains a small neutral dropdown like the reference UI. */
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"],
html:root body[data-project-home-mode="work"] #smartCreateModelPanel[data-smart-create-portal="true"] {
  width: min(300px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(460px, calc(100dvh - 24px)) !important;
  padding: 5px !important;
  border-radius: 12px !important;
  background: var(--chat-panel, var(--theme-panel-raised, #fff)) !important;
  color: var(--chat-text, var(--theme-text, #202020)) !important;
  box-shadow: 0 14px 34px rgb(0 0 0 / 18%) !important;
}
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] #assistantByokModelPanel,
html:root body[data-project-home-mode="work"] #smartCreateModelPanel[data-smart-create-portal="true"] .byok-model-switch-panel {
  display: grid !important;
  gap: 2px !important;
  padding: 0 !important;
  overflow: visible !important;
}
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-head,
html:root body[data-project-home-mode="work"] #smartCreateModelPanel[data-smart-create-portal="true"] .byok-model-switch-head {
  gap: 2px !important;
  margin: 0 !important;
  padding: 8px 9px 7px !important;
  border-bottom: 1px solid var(--chat-line, var(--theme-line, #e5e5e5)) !important;
}
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-head strong,
html:root body[data-project-home-mode="work"] #smartCreateModelPanel[data-smart-create-portal="true"] .byok-model-switch-head strong {
  font-size: 13px !important;
  font-weight: 650 !important;
}
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-head small,
html:root body[data-project-home-mode="work"] #smartCreateModelPanel[data-smart-create-portal="true"] .byok-model-switch-head small {
  color: var(--chat-muted, var(--theme-muted, #777)) !important;
  font-size: 10px !important;
}
.byok-simple-model-option {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
}
.byok-simple-model-option:not(:disabled):hover,
.byok-simple-model-option:not(:disabled):focus-visible,
.byok-simple-model-option.is-active {
  background: color-mix(in srgb, currentColor 8%, transparent) !important;
  outline: none !important;
}
.byok-simple-model-option:disabled { cursor: default !important; opacity: .9 !important; }
.byok-simple-model-copy { display: grid !important; min-width: 0 !important; gap: 2px !important; }
.byok-simple-model-copy b,
.byok-simple-model-copy small { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.byok-simple-model-copy b { color: inherit !important; font-size: 12px !important; font-weight: 600 !important; }
.byok-simple-model-copy small { color: var(--chat-muted, var(--theme-muted, #777)) !important; font-size: 10px !important; }
.byok-simple-model-state { flex: 0 0 auto !important; color: var(--chat-muted, var(--theme-muted, #777)) !important; font-size: 10px !important; }
.byok-simple-model-option.is-active .byok-simple-model-state { color: inherit !important; font-weight: 600 !important; }
.byok-simple-model-empty { margin: 8px 9px !important; color: var(--chat-muted, var(--theme-muted, #777)) !important; font-size: 11px !important; line-height: 1.45 !important; }

/* Reference-style provider groups: direct models stay in the first column;
   grouped providers reveal one compact second-level list on demand. */
html:root body[data-project-home-mode="chat"] .byok-simple-model-menu {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}
html:root body[data-project-home-mode="chat"] .byok-simple-model-list {
  display: grid !important;
  gap: 1px !important;
  min-width: 0 !important;
  max-height: min(58dvh, 420px) !important;
  overflow: auto !important;
}
html:root body[data-project-home-mode="chat"] .byok-simple-model-group {
  display: grid !important;
  min-width: 0 !important;
  border-radius: 8px !important;
}
html:root body[data-project-home-mode="chat"] .byok-simple-model-group-trigger,
html:root body[data-project-home-mode="chat"] .byok-simple-model-settings {
  display: flex !important;
  width: 100% !important;
  min-height: 42px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 7px 9px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
}
html:root body[data-project-home-mode="chat"] .byok-simple-model-group-trigger:hover,
html:root body[data-project-home-mode="chat"] .byok-simple-model-group-trigger:focus-visible,
html:root body[data-project-home-mode="chat"] .byok-simple-model-group.has-active > .byok-simple-model-group-trigger,
html:root body[data-project-home-mode="chat"] .byok-simple-model-settings:hover,
html:root body[data-project-home-mode="chat"] .byok-simple-model-settings:focus-visible {
  background: color-mix(in srgb, currentColor 8%, transparent) !important;
  outline: none !important;
}
html:root body[data-project-home-mode="chat"] .byok-simple-model-group-arrow {
  flex: 0 0 auto !important;
  color: var(--chat-muted, var(--theme-muted, #777)) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
html:root body[data-project-home-mode="chat"] .byok-simple-model-submenu {
  display: grid !important;
  gap: 2px !important;
  margin: 0 4px 4px !important;
  padding: 4px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, currentColor 4%, transparent) !important;
}
html:root body[data-project-home-mode="chat"] .byok-simple-model-submenu[hidden] { display: none !important; }
html:root body[data-project-home-mode="chat"] .byok-simple-model-submenu > header {
  display: grid !important;
  gap: 2px !important;
  padding: 6px 7px !important;
}
html:root body[data-project-home-mode="chat"] .byok-simple-model-submenu > header :is(strong, small) { color: inherit !important; }
html:root body[data-project-home-mode="chat"] .byok-simple-model-submenu > header small { color: var(--chat-muted, var(--theme-muted, #777)) !important; font-size: 10px !important; }
html:root body[data-project-home-mode="chat"] .byok-simple-model-settings {
  min-height: 34px !important;
  justify-content: flex-start !important;
  color: var(--chat-muted, var(--theme-muted, #777)) !important;
  font-size: 10px !important;
}

/* Reference-style two-level model picker. Credentials stay in Settings; the
   compact menu only exposes saved model names and provider families. */
.byok-simple-model-menu { display: grid !important; gap: 3px !important; min-width: 0 !important; }
.byok-simple-model-list { display: grid !important; gap: 1px !important; max-height: min(390px, calc(100dvh - 120px)) !important; overflow: auto !important; padding: 2px !important; }
.byok-simple-model-group { position: relative !important; min-width: 0 !important; }
.byok-simple-model-group-title { display: flex !important; min-height: 36px !important; align-items: center !important; padding: 6px 9px !important; border-bottom: 1px solid var(--chat-line, var(--theme-line, #e5e5e5)) !important; color: inherit !important; }
.byok-simple-model-group-title .byok-simple-model-copy b { font-size: 12px !important; }
.byok-simple-model-group-title .byok-simple-model-copy small { font-size: 10px !important; }
.byok-simple-model-group-trigger { display: flex !important; width: 100% !important; min-height: 46px !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 7px 9px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: inherit !important; font: inherit !important; text-align: left !important; cursor: pointer !important; }
.byok-simple-model-group-trigger:hover, .byok-simple-model-group-trigger:focus-visible, .byok-simple-model-group.has-active > .byok-simple-model-group-trigger { background: color-mix(in srgb, currentColor 8%, transparent) !important; outline: none !important; }
.byok-simple-model-group-arrow { flex: 0 0 auto !important; color: var(--chat-muted, var(--theme-muted, #777)) !important; font-size: 22px !important; line-height: 1 !important; }
.byok-simple-model-submenu { display: grid !important; position: relative !important; z-index: 1 !important; top: auto !important; left: auto !important; width: auto !important; max-width: none !important; max-height: none !important; overflow: visible !important; padding: 3px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.byok-simple-model-submenu[hidden] { display: none !important; }
.byok-simple-model-submenu > header { display: grid !important; gap: 2px !important; padding: 7px 9px !important; border-bottom: 1px solid var(--chat-line, var(--theme-line, #e5e5e5)) !important; }
.byok-simple-model-submenu > header strong { font-size: 12px !important; }
.byok-simple-model-submenu > header small { color: var(--chat-muted, var(--theme-muted, #777)) !important; font-size: 10px !important; }
.byok-simple-model-settings { width: calc(100% - 4px) !important; margin: 2px !important; padding: 7px 9px !important; border: 0 !important; border-top: 1px solid var(--chat-line, var(--theme-line, #e5e5e5)) !important; background: transparent !important; color: var(--chat-muted, var(--theme-muted, #777)) !important; font: inherit !important; font-size: 10px !important; text-align: left !important; cursor: pointer !important; }
.byok-simple-model-settings:hover, .byok-simple-model-settings:focus-visible { color: inherit !important; outline: none !important; }
@media (max-width: 620px) { .byok-simple-model-submenu { margin: 0 4px 4px !important; } }

/* Final flat-surface pass (v26): the chat canvas uses one uninterrupted
   background in both themes. These high-specificity rules override the
   legacy dark panel fill and remove the remaining horizontal seams. */
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create#step-create > .project-home-shell > .project-home-content,
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create#step-create .project-home-content,
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create#step-create .project-home-chat,
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create#step-create .project-home-chat-topbar,
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create#step-create #projectHomeAssistantHost,
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"],
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create#step-create > .project-home-shell > .project-home-content,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create#step-create .project-home-content,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create#step-create .project-home-chat,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create#step-create .project-home-chat-topbar,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create#step-create #projectHomeAssistantHost,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"],
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages {
  background: var(--chat-bg) !important;
  background-color: var(--chat-bg) !important;
  background-image: none !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"]::before,
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"]::after,
html:root body[data-project-home-mode="chat"] #step-create#step-create #projectHomeAssistantHost::before,
html:root body[data-project-home-mode="chat"] #step-create#step-create #projectHomeAssistantHost::after {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Context minimap placement: keep the history/sidebar boundary visible, but
   place the scrollable conversation ticks inside the main canvas. */
html:root body[data-project-home-mode="chat"] #step-create#step-create > .project-home-shell > .project-home-nav {
  border-right: 1px solid var(--chat-line) !important;
}
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] {
  position: relative !important;
}
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantContextRail {
  position: absolute !important;
  top: 82px !important;
  right: auto !important;
  bottom: 8px !important;
  left: 10px !important;
  width: 16px !important;
  min-height: 76px !important;
  z-index: 6 !important;
  pointer-events: none !important;
}
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantContextRail .assistant-context-rail-track {
  border-left: 1px solid color-mix(in srgb, var(--chat-text) 13%, transparent) !important;
  pointer-events: auto !important;
}
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantContextRail .assistant-context-rail-mark {
  pointer-events: auto !important;
}

/* The rail is reparented into #assistantDrawer in embedded chat mode, so the
   old sidebar-scoped rules no longer reach its track and marks. Reapply the
   compact minimap geometry on the new canvas parent. */
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantContextRail {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantContextRail .assistant-context-rail-track {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  box-sizing: border-box !important;
  padding: 7px 0 !important;
  background: transparent !important;
}
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantContextRail .assistant-context-rail-mark {
  display: block !important;
  flex: 0 0 auto !important;
  width: 10px !important;
  height: 3px !important;
  min-width: 10px !important;
  min-height: 3px !important;
  max-width: 13px !important;
  max-height: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: color-mix(in srgb, var(--chat-text) 28%, transparent) !important;
  color: transparent !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  opacity: .7 !important;
}
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantContextRail .assistant-context-rail-mark:hover,
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantContextRail .assistant-context-rail-mark:focus-visible,
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantContextRail .assistant-context-rail-mark.active {
  width: 13px !important;
  background: var(--chat-text) !important;
  opacity: 1 !important;
  outline: none !important;
}

/* Match the compact reference minimap: every tick is three pixels high with
   a 12px gap, so records stay close together instead of stretching across
   the full canvas height. */
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantContextRail .assistant-context-rail-track {
  height: max-content !important;
  max-height: 100% !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  overflow: hidden !important;
}

/* Center the conversation column inside the main canvas. The composer is
   already centered at 860px; keep message turns on the same center line so
   assistant text and user turns do not stretch to the canvas edges. */
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages {
  width: 100% !important;
  max-width: none !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
  scrollbar-gutter: stable both-edges !important;
}
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages > .assistant-message {
  width: min(800px, calc(100% - 48px)) !important;
  max-width: 800px !important;
  margin-inline: auto !important;
}
@media (max-width: 1023px) {
  html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages {
    padding-inline: 12px !important;
    scrollbar-gutter: auto !important;
  }
  html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages > .assistant-message {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }
}

/* Right workbench rail (chat-v30): keep secondary checks and tools available
   without making the conversation stream carry every detail. The rail is an
   ordinary collapsible panel; when absent these rules are inert. */
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] {
  --assistant-right-rail-width: 0px;
  position: relative !important;
  isolation: isolate !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"][data-workbench-open="true"] {
  --assistant-right-rail-width: 304px;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"][data-workbench-open="false"] {
  --assistant-right-rail-width: 46px;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"]:has(#assistantRightWorkbench[data-workbench-open="true"]) {
  --assistant-right-rail-width: 304px;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"]:has(#assistantRightWorkbench[data-workbench-open="false"]),
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"]:has(#assistantRightWorkbench[aria-hidden="true"]),
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"]:has(#assistantRightWorkbench #assistantRightWorkbenchToggle[aria-expanded="false"]) {
  --assistant-right-rail-width: 46px;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"]:has(#assistantRightWorkbench.hidden),
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"]:has(#assistantRightWorkbench[hidden]) {
  --assistant-right-rail-width: 0px;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-right-workbench {
  position: absolute !important;
  z-index: 8 !important;
  inset: 0 0 0 auto !important;
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  width: var(--assistant-right-rail-width) !important;
  min-width: var(--assistant-right-rail-width) !important;
  max-width: var(--assistant-right-rail-width) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden auto !important;
  box-sizing: border-box !important;
  padding: 12px 10px !important;
  border: 0 !important;
  border-left: 1px solid var(--chat-line) !important;
  border-radius: 0 !important;
  background: var(--chat-panel) !important;
  background-image: none !important;
  color: var(--chat-text) !important;
  box-shadow: none !important;
  transition: width .18s ease, min-width .18s ease, max-width .18s ease, padding .18s ease !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench.hidden,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-right-workbench.hidden,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench[hidden],
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-right-workbench[hidden] {
  display: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench[data-workbench-open="false"],
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench[aria-hidden="true"] {
  padding-inline: 6px !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench > header,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-right-workbench > header,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbenchHeader {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 34px !important;
  margin: 0 0 8px !important;
  padding: 0 2px 8px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--chat-line) !important;
  background: transparent !important;
  color: var(--chat-text) !important;
}

html:root body[data-project-home-mode="chat"] #assistantRightWorkbenchToggle,
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-right-workbench-toggle,
html:root body[data-project-home-mode="chat"] .assistant-right-workbench-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--chat-muted) !important;
  cursor: pointer !important;
}

html:root body[data-project-home-mode="chat"] #assistantRightWorkbenchToggle:hover,
html:root body[data-project-home-mode="chat"] #assistantRightWorkbenchToggle:focus-visible,
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-right-workbench-toggle:hover,
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-right-workbench-toggle:focus-visible {
  border-color: var(--chat-line) !important;
  background: color-mix(in srgb, var(--chat-text) 7%, transparent) !important;
  color: var(--chat-text) !important;
  outline: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-right-workbench-title,
html:root body[data-project-home-mode="chat"] #assistantRightWorkbenchHeader > :first-child {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--chat-text) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html:root body[data-project-home-mode="chat"] #assistantRightWorkbench[data-workbench-open="false"] > :not(header),
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench[aria-hidden="true"] > :not(header),
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench[data-workbench-open="false"]:not(#assistantRightWorkbenchToggle) > :not(header),
html:root body[data-project-home-mode="chat"] .assistant-right-workbench[data-workbench-open="false"] > :not(header),
html:root body[data-project-home-mode="chat"] .assistant-right-workbench[aria-hidden="true"] > :not(header),
html:root body[data-project-home-mode="chat"] .assistant-right-workbench[data-workbench-open="false"]:not(#assistantRightWorkbenchToggle) > :not(header) {
  display: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantRightWorkbench[data-workbench-open="false"] > header,
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench[aria-hidden="true"] > header,
html:root body[data-project-home-mode="chat"] .assistant-right-workbench[data-workbench-open="false"] > header,
html:root body[data-project-home-mode="chat"] .assistant-right-workbench[aria-hidden="true"] > header {
  justify-content: center !important;
  border-bottom-color: transparent !important;
}

html:root body[data-project-home-mode="chat"] #assistantRightWorkbench[data-workbench-open="false"] .assistant-right-workbench-title,
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench[aria-hidden="true"] .assistant-right-workbench-title,
html:root body[data-project-home-mode="chat"] .assistant-right-workbench[data-workbench-open="false"] .assistant-right-workbench-title,
html:root body[data-project-home-mode="chat"] .assistant-right-workbench[aria-hidden="true"] .assistant-right-workbench-title {
  display: none !important;
}

/* Sections use native details where available, so the content remains
   keyboard accessible and no functionality disappears when collapsed. */
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench :is(.assistant-workbench-section, [data-workbench-section]) {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 9px !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--chat-text) !important;
  overflow: hidden !important;
}

html:root body[data-project-home-mode="chat"] #assistantRightWorkbench :is(.assistant-workbench-section, [data-workbench-section]) > :is(summary, header, .assistant-workbench-section-head) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 7px !important;
  min-height: 36px !important;
  padding: 8px 9px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--chat-text) !important;
  cursor: pointer !important;
  list-style: none !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

html:root body[data-project-home-mode="chat"] #assistantRightWorkbench :is(.assistant-workbench-section, [data-workbench-section]) > summary::-webkit-details-marker { display: none !important; }
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench :is(.assistant-workbench-section, [data-workbench-section]) > :is(summary, header, .assistant-workbench-section-head):hover {
  background: color-mix(in srgb, var(--chat-text) 5%, transparent) !important;
}

html:root body[data-project-home-mode="chat"] #assistantRightWorkbench :is(.assistant-workbench-section, [data-workbench-section]) > :is(.assistant-workbench-section-body, .assistant-workbench-body, .assistant-workbench-content, .assistant-workbench-section > div) {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
  padding: 0 9px 9px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--chat-muted) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

html:root body[data-project-home-mode="chat"] #assistantRightWorkbench :is(.assistant-workbench-section, [data-workbench-section]):not([open]) > :is(.assistant-workbench-section-body, .assistant-workbench-body, .assistant-workbench-content) {
  display: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantRightWorkbench :is(button, a, select, input) {
  min-height: 28px !important;
  border-radius: 7px !important;
  font-size: 11px !important;
}

html:root body[data-project-home-mode="chat"] #assistantRightWorkbench :is(button, a) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 8px !important;
  border: 1px solid var(--chat-line) !important;
  background: transparent !important;
  color: var(--chat-text) !important;
  text-decoration: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantRightWorkbench :is(button, a):hover,
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench :is(button, a):focus-visible {
  border-color: var(--chat-accent) !important;
  background: color-mix(in srgb, var(--chat-accent) 9%, transparent) !important;
  color: var(--chat-text) !important;
  outline: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantRightWorkbench :is(.assistant-workbench-status, .assistant-workbench-check, .assistant-workbench-meta, .assistant-workbench-note) {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--chat-line) 70%, transparent) !important;
  color: var(--chat-muted) !important;
}

html:root body[data-project-home-mode="chat"] #assistantRightWorkbench :is(.assistant-workbench-status, .assistant-workbench-check, .assistant-workbench-meta, .assistant-workbench-note):last-child { border-bottom: 0 !important; }
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench :is(.assistant-workbench-status, .assistant-workbench-check, .assistant-workbench-meta, .assistant-workbench-note) strong { color: var(--chat-text) !important; font-weight: 600 !important; }
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench :is(.is-ok, [data-state="ok"], [data-status="ready"]) { color: #15803d !important; }
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantRightWorkbench :is(.is-ok, [data-state="ok"], [data-status="ready"]) { color: #86efac !important; }

/* Reserve room in the stream and composer for the rail, keeping the primary
   conversation centered in the remaining canvas. */
@media (min-width: 1024px) {
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages {
    width: calc(100% - var(--assistant-right-rail-width)) !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-right: 26px !important;
    padding-left: 26px !important;
    box-sizing: border-box !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantAttachments,
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantComposer {
    width: min(860px, calc(100% - var(--assistant-right-rail-width) - 32px)) !important;
    margin-left: max(16px, calc((100% - var(--assistant-right-rail-width) - 860px) / 2)) !important;
    margin-right: 0 !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages > .assistant-message {
    width: min(800px, calc(100% - 48px)) !important;
    max-width: 800px !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 1023px) {
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench,
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-right-workbench {
    inset: auto 0 0 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: min(62dvh, 480px) !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid var(--chat-line) !important;
    border-left: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    background: var(--chat-panel) !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench[data-workbench-open="false"],
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench[aria-hidden="true"],
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-right-workbench[data-workbench-open="false"],
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-right-workbench[aria-hidden="true"] {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    max-height: 48px !important;
    overflow: hidden !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages,
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantAttachments,
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantComposer {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages {
    padding-inline: 12px !important;
    padding-bottom: 62px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:root body[data-project-home-mode="chat"] #assistantRightWorkbench,
  html:root body[data-project-home-mode="chat"] .assistant-right-workbench { transition: none !important; }
}

/* The rail toggle stays reachable in chat mode even though the legacy drawer
   header is hidden from the conversation surface. Only this control is shown;
   the assistant brand/voice/window controls remain out of the message flow. */
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > .assistant-header#assistantDragHandle {
  display: flex !important;
  position: absolute !important;
  z-index: 12 !important;
  top: 8px !important;
  right: calc(var(--assistant-right-rail-width) + 8px) !important;
  width: 34px !important;
  min-height: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > .assistant-header#assistantDragHandle > :not(.assistant-header-actions),
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > .assistant-header#assistantDragHandle .assistant-header-actions > :not(#assistantRightWorkbenchToggle) {
  display: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > .assistant-header#assistantDragHandle .assistant-header-actions,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > .assistant-header#assistantDragHandle #assistantRightWorkbenchToggle {
  display: inline-flex !important;
  pointer-events: auto !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > .assistant-header#assistantDragHandle #assistantRightWorkbenchToggle {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 9px !important;
  background: var(--chat-panel) !important;
  color: var(--chat-muted) !important;
  box-shadow: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > .assistant-header#assistantDragHandle #assistantRightWorkbenchToggle:hover,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > .assistant-header#assistantDragHandle #assistantRightWorkbenchToggle:focus-visible {
  border-color: var(--chat-accent) !important;
  background: color-mix(in srgb, var(--chat-accent) 9%, var(--chat-panel)) !important;
  color: var(--chat-text) !important;
  outline: none !important;
}

/* Final reserve rule must outrank the earlier two-ID centered-column pass.
   The rail is a sibling of the message scroller inside a column flex drawer. */
@media (min-width: 1024px) {
  html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages {
    flex: 1 1 auto !important;
    align-self: flex-start !important;
    width: calc(100% - var(--assistant-right-rail-width)) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: var(--assistant-right-rail-width) !important;
    padding-left: 26px !important;
    padding-right: 26px !important;
    box-sizing: border-box !important;
  }
  html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantAttachments,
  html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantComposer {
    align-self: flex-start !important;
    width: min(860px, calc(100% - var(--assistant-right-rail-width) - 32px)) !important;
    max-width: calc(100% - var(--assistant-right-rail-width) - 32px) !important;
    margin-left: max(16px, calc((100% - var(--assistant-right-rail-width) - 860px) / 2)) !important;
    margin-right: 0 !important;
  }
}

/* The open rail is the flex sibling's reserved edge. Keep the chat message
   column from painting beneath it even when the rail has absolute positioning. */
@media (min-width: 1024px) {
  html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench[data-workbench-open="true"] ~ #assistantNewResultBtn { left: calc((100% - var(--assistant-right-rail-width)) / 2) !important; }
}

/* Tablet layouts still retain a 220px left navigation. Size the bottom rail
   to its actual drawer parent, not the full viewport. */
@media (max-width: 1023px) {
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench,
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-right-workbench {
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench[data-workbench-open="false"],
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-right-workbench[data-workbench-open="false"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* The embedded drawer can inherit a translated desktop shell transform at
   tablet widths. Anchor the bottom workbench to the viewport so it never
   protrudes past the right edge. */
@media (max-width: 1023px) {
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench,
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-right-workbench {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    transform: none !important;
  }
}

/* Tablet landscape: keep the Codex-style rail on the right when there is
   enough width. Phones remain a bottom drawer below 768px. */
@media (min-width: 768px) and (max-width: 1023px) {
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench,
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-right-workbench {
    position: absolute !important;
    inset: 0 0 0 auto !important;
    width: var(--assistant-right-rail-width) !important;
    min-width: var(--assistant-right-rail-width) !important;
    max-width: var(--assistant-right-rail-width) !important;
    height: 100% !important;
    max-height: none !important;
    transform: none !important;
    border-top: 0 !important;
    border-left: 1px solid var(--chat-line) !important;
    border-radius: 0 !important;
  }
  html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages {
    width: calc(100% - var(--assistant-right-rail-width)) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: var(--assistant-right-rail-width) !important;
    padding-inline: 18px !important;
  }
  html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantAttachments,
  html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantComposer {
    width: min(860px, calc(100% - var(--assistant-right-rail-width) - 20px)) !important;
    max-width: calc(100% - var(--assistant-right-rail-width) - 20px) !important;
    margin-left: 10px !important;
    margin-right: 0 !important;
  }
}

/* Dark chat icon authority: the dark reference uses a neutral light-gray
   line icon on the #2f2f2f controls. Older workbench rules can repaint
   individual SVG paths Klein blue, so this final scoped rule intentionally
   repeats the chat surface IDs and resets both the node and its children. */
html:root[data-theme="dark"] body[data-project-home-mode="chat"] :is(
  #projectHomeChatNav,
  #projectHomeConversationNav,
  .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"],
  #assistantRightWorkbench#assistantRightWorkbench
) :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: #b4b4b4 !important;
  -webkit-text-fill-color: #b4b4b4 !important;
  stroke: #b4b4b4 !important;
  fill: none !important;
  filter: none !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] :is(
  #projectHomeChatNav,
  #projectHomeConversationNav,
  .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"],
  #assistantRightWorkbench#assistantRightWorkbench
) :is(.fluent-icon-shell, .fluent-icon) {
  background: currentColor !important;
  background-color: currentColor !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}

/* The send control is a light button in dark mode; keep its glyph dark for
   contrast while every other chat icon follows the reference gray. */
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer > #assistantSendBtn :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: #171717 !important;
  -webkit-text-fill-color: #171717 !important;
  stroke: #171717 !important;
  fill: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer > #assistantSendBtn :is(.fluent-icon-shell, .fluent-icon) {
  background: currentColor !important;
  background-color: currentColor !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}

/* Dark reference lock: chat chrome uses the neutral gray line color from the
   reference (#b4b4b4 on #2f2f2f). The earlier Klein-blue system intentionally
   remains active for light chat and for work mode. Repeating the shell IDs and
   the dark-theme attribute gives this scoped pass enough specificity to win
   over the legacy icon locks above. */
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: #b4b4b4 !important;
  -webkit-text-fill-color: #b4b4b4 !important;
  stroke: #b4b4b4 !important;
  fill: none !important;
  filter: none !important;
  background-image: none !important;
}

/* Some embedded assistant controls are mounted through an extra host layer,
   so their rendered icon nodes do not inherit the app-shell selector above.
   Target those controls directly, including Fluent mask children. */
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer :is(
  #assistantAddBtn#assistantAddBtn,
  #assistantVoiceInputBtn#assistantVoiceInputBtn,
  #assistantModeTrigger#assistantModeTrigger,
  #assistantImageSettingsBtn#assistantImageSettingsBtn,
  #assistantQuickToolsBtn#assistantQuickToolsBtn,
  #assistantSendBtn#assistantSendBtn
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon),
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer :is(
  #assistantAddBtn#assistantAddBtn,
  #assistantVoiceInputBtn#assistantVoiceInputBtn,
  #assistantModeTrigger#assistantModeTrigger,
  #assistantImageSettingsBtn#assistantImageSettingsBtn,
  #assistantQuickToolsBtn#assistantQuickToolsBtn,
  #assistantSendBtn#assistantSendBtn
) > :is(svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon) {
  color: #b4b4b4 !important;
  -webkit-text-fill-color: #b4b4b4 !important;
  stroke: #b4b4b4 !important;
  fill: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer :is(
  #assistantAddBtn#assistantAddBtn,
  #assistantModeTrigger#assistantModeTrigger,
  #assistantImageSettingsBtn#assistantImageSettingsBtn
) .fluent-icon {
  background: #b4b4b4 !important;
  background-color: #b4b4b4 !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer > #assistantSendBtn#assistantSendBtn :is(svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon) {
  color: #171717 !important;
  -webkit-text-fill-color: #171717 !important;
  stroke: #171717 !important;
  fill: none !important;
  background-color: transparent !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer > #assistantSendBtn#assistantSendBtn .fluent-icon {
  background: #171717 !important;
  background-color: #171717 !important;
}

/* Navigation, top model control, and both workbench rail controls are outside
   the composer subtree. Keep them on the same reference gray in dark chat. */
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #projectHomeChatNav#projectHomeChatNav :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon
),
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #projectHomeConversationNav#projectHomeConversationNav :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon
),
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #chatTopModelBtn#chatTopModelBtn :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon
),
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #assistantDragHandle#assistantDragHandle #assistantRightWorkbenchToggle#assistantRightWorkbenchToggle :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon
),
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #assistantRightWorkbench#assistantRightWorkbench #assistantRightWorkbenchToggleRail#assistantRightWorkbenchToggleRail :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon
) {
  color: #b4b4b4 !important;
  -webkit-text-fill-color: #b4b4b4 !important;
  stroke: #b4b4b4 !important;
  fill: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create :is(
  #projectHomeChatNav#projectHomeChatNav,
  #projectHomeConversationNav#projectHomeConversationNav,
  #chatTopModelBtn#chatTopModelBtn,
  #assistantDragHandle#assistantDragHandle,
  #assistantRightWorkbench#assistantRightWorkbench
) :is(.fluent-icon-shell, .fluent-icon) {
  background: currentColor !important;
  background-color: currentColor !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}

/* The workbench owns its own header and detail-section icons. Apply the same
   direct high-specificity lock to every visible rail icon, plus the account
   chevron in the lower navigation. */
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #assistantRightWorkbench#assistantRightWorkbench :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon
),
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #appAvatarMenuBtn#appAvatarMenuBtn :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon
) {
  color: #b4b4b4 !important;
  -webkit-text-fill-color: #b4b4b4 !important;
  stroke: #b4b4b4 !important;
  fill: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #assistantRightWorkbench#assistantRightWorkbench :is(.fluent-icon-shell, .fluent-icon) {
  background: currentColor !important;
  background-color: currentColor !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide
) {
  stroke: #b4b4b4 !important;
  fill: none !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create :is(.fluent-icon-shell, .fluent-icon) {
  background: currentColor !important;
  background-color: currentColor !important;
  background-image: none !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

/* The send button is a light control in dark mode; keep its glyph dark for
   contrast after the all-chat icon pass above. */
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #assistantSendBtn#assistantSendBtn :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: #171717 !important;
  -webkit-text-fill-color: #171717 !important;
  stroke: #171717 !important;
  fill: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #assistantSendBtn#assistantSendBtn :is(.fluent-icon-shell, .fluent-icon) {
  background: currentColor !important;
  background-color: currentColor !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}

/* Fluent masks need a solid glyph fill; the legacy composer rule above made
   their backgrounds transparent even after their line colors turned gray. */
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #projectHomeChatNav#projectHomeChatNav .fluent-icon,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #projectHomeConversationNav#projectHomeConversationNav .fluent-icon,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #assistantDrawer#assistantDrawer #assistantComposer#assistantComposer :is(#assistantAddBtn#assistantAddBtn, #assistantModeTrigger#assistantModeTrigger, #assistantImageSettingsBtn#assistantImageSettingsBtn) .fluent-icon,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #assistantRightWorkbench#assistantRightWorkbench .fluent-icon {
  color: #b4b4b4 !important;
  background: #b4b4b4 !important;
  background-color: #b4b4b4 !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #assistantDrawer#assistantDrawer #assistantComposer#assistantComposer #assistantSendBtn#assistantSendBtn .fluent-icon {
  color: #171717 !important;
  background: #171717 !important;
  background-color: #171717 !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}

/* Codex dark-text reference: primary text is #dfdfdf, while secondary
   metadata remains #b4b4b4. Keep this pass scoped to dark chat/settings text;
   icon colors stay controlled by the gray icon rules above. */
html:root[data-theme="dark"] body[data-project-home-mode="chat"] {
  --chat-text: #dfdfdf;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeChatNav > button,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeChatNav > button[aria-current="page"],
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-tabs button.active,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-history-item.current,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-history-item.current strong,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-project-item.current,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-project-item.current strong,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #chatTopModelBtn,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeModeSwitch > button.active,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantInput,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-content,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-empty,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench .assistant-right-workbench-title,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench :is(summary, header, .assistant-workbench-section-head),
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench :is(.assistant-workbench-status, .assistant-workbench-check, .assistant-workbench-meta, .assistant-workbench-note) strong,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu :is(strong, button, span) {
  color: #dfdfdf !important;
  -webkit-text-fill-color: #dfdfdf !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeChatNav > button:not([aria-current="page"]),
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-tabs button:not(.active),
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeConversationNav :is(.assistant-side-history-item, .assistant-side-project-item),
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeConversationNav :is(.assistant-side-history-item small, .assistant-side-project-item small),
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #projectHomeModeSwitch > button:not(.active),
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantInput::placeholder,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench :is(.assistant-workbench-status, .assistant-workbench-check, .assistant-workbench-meta, .assistant-workbench-note),
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #step-create .project-home-account-slot > #appAvatarMenu small {
  color: #b4b4b4 !important;
  -webkit-text-fill-color: #b4b4b4 !important;
}

html:root[data-theme="dark"] body #settingsModal.desktop-modal {
  --settings-text: #dfdfdf;
}

html:root[data-theme="dark"] body #settingsModal.desktop-modal :is(.settings-header h2, .settings-pane h3, .settings-nav button.active, .settings-facts dd, .settings-subhead strong, .settings-support-card header strong, .settings-toggle, .settings-actions button, .settings-content) {
  color: #dfdfdf !important;
  -webkit-text-fill-color: #dfdfdf !important;
}

/* Final dark Codex text cleanup. The selected history tab and account menu
   still inherit legacy blue/white values from older inline rules. Keep their
   text on the reference neutral scale while leaving work-mode Klein blue
   untouched. */
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #projectHomeConversationNav#projectHomeConversationNav .assistant-side-tabs button.active,
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #projectHomeConversationNav#projectHomeConversationNav .assistant-side-tabs button.active > span {
  color: #dfdfdf !important;
  -webkit-text-fill-color: #dfdfdf !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #projectHomeConversationNav#projectHomeConversationNav .assistant-side-tabs button.active :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: #b4b4b4 !important;
  -webkit-text-fill-color: #b4b4b4 !important;
  stroke: #b4b4b4 !important;
  fill: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #appAvatarMenu#appAvatarMenu {
  color: #dfdfdf !important;
  -webkit-text-fill-color: #dfdfdf !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #appAvatarMenu#appAvatarMenu :is(
  strong, button, span
) {
  color: #dfdfdf !important;
  -webkit-text-fill-color: #dfdfdf !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #appAvatarMenu#appAvatarMenu :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: #b4b4b4 !important;
  -webkit-text-fill-color: #b4b4b4 !important;
  stroke: #b4b4b4 !important;
  fill: none !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #appAvatarMenu#appAvatarMenu :is(.fluent-icon-shell, .fluent-icon) {
  background: #b4b4b4 !important;
  background-color: #b4b4b4 !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}

html:root[data-theme="dark"] body #settingsModal#settingsModal,
html:root[data-theme="dark"] body #settingsModal#settingsModal .settings-window {
  --settings-text: #dfdfdf;
}

/* Design focus: the conversation communicates, one centered canvas displays
   the selected page, and the rail owns task actions and supporting detail. */
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantDesignFocus {
  display: none !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  background: var(--chat-bg) !important;
  color: var(--chat-text) !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"][data-design-focus="true"]:not([data-design-history-open="true"]) > #assistantDesignFocus:not(.hidden) {
  display: flex !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"][data-design-focus="true"]:not([data-design-history-open="true"]) > #assistantMessages {
  display: none !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus :is(.assistant-design-focus-bar, .assistant-design-focus-footer) {
  width: min(780px, calc(100% - 44px)) !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus .assistant-design-focus-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
  min-height: 44px !important;
  padding: 4px 0 !important;
  color: var(--chat-text) !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus .assistant-design-focus-bar :is(strong, b) {
  color: var(--chat-text) !important;
  font-size: max(13px, var(--chat-copy-size)) !important;
  font-weight: 600 !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus .assistant-design-focus-stage {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 12px 24px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus .assistant-design-focus-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: min(100%, 720px) !important;
  max-height: 100% !important;
  margin: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus #assistantDesignFocusImg {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: min(100%, 720px) !important;
  max-height: min(100%, calc(100dvh - 310px)) !important;
  object-fit: contain !important;
  object-position: center !important;
  transform-origin: center !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus .assistant-design-focus-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
  min-height: 46px !important;
  padding: 6px 0 10px !important;
  color: var(--chat-muted) !important;
  font-size: calc(var(--chat-copy-size) - 1px) !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus .assistant-design-focus-nav {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus button[data-assistant-focus-action] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 5px 9px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--chat-muted) !important;
  font-size: calc(var(--chat-copy-size) - 1px) !important;
  cursor: pointer !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus button[data-assistant-focus-action]:is(:hover, :focus-visible) {
  border-color: var(--chat-line) !important;
  background: color-mix(in srgb, var(--chat-text) 7%, transparent) !important;
  color: var(--chat-text) !important;
  outline: none !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus button[data-assistant-focus-action]:disabled {
  opacity: .38 !important;
  cursor: default !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench :is(.assistant-workbench-action-list, .assistant-workbench-meta-list) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  min-width: 0 !important;
  color: var(--chat-muted) !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench .assistant-workbench-meta-list {
  grid-template-columns: minmax(0, 1fr) !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench :is(.assistant-workbench-action-list, .assistant-workbench-meta-list) > * {
  min-width: 0 !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench .assistant-workbench-action-list :is(button, a) {
  width: 100% !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
}

@media (min-width: 768px) {
  html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantDesignFocus {
    align-self: flex-start !important;
    width: calc(100% - var(--assistant-right-rail-width)) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: var(--assistant-right-rail-width) !important;
    padding: 4px 16px 2px !important;
  }
}

@media (max-width: 767px) {
  html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantDesignFocus {
    width: 100% !important;
    padding: 6px 10px 56px !important;
  }
  html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus :is(.assistant-design-focus-bar, .assistant-design-focus-footer) {
    width: 100% !important;
  }
  html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus .assistant-design-focus-stage {
    padding-inline: 10px !important;
  }
  html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus #assistantDesignFocusImg {
    max-height: min(100%, calc(100dvh - 330px)) !important;
  }
}

@media (max-width: 560px) {
  html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus .assistant-design-focus-bar,
  html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus .assistant-design-focus-footer {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }
  html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus .assistant-design-focus-stage {
    min-height: 140px !important;
    padding: 4px !important;
  }
}

/* Final right-workbench toggle cleanup.  The rail is a secondary surface, not
   a second gutter: collapsed mode removes it completely and leaves one
   reachable toggle in the chat canvas.  The legacy inner chevron is hidden so
   the header control is the single source of truth. */
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"]:has(#assistantRightWorkbench[data-workbench-open="false"]),
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"]:has(#assistantRightWorkbench[aria-hidden="true"]),
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"]:has(#assistantRightWorkbench #assistantRightWorkbenchToggle[aria-expanded="false"]) {
  --assistant-right-rail-width: 0px !important;
}

/* Model picker clarity pass: keep the top menu and provider submenus in one
   vertical flow. The horizontal flyout clipped against the chat rail on
   narrow windows, while the old shadows made the menu read like a separate
   card stack. The menu remains neutral; selected states use the shared accent
   only through existing action rules. */
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] {
  box-sizing: border-box !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(72dvh, 620px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-color: var(--chat-line, var(--theme-line, #dedbd4)) !important;
  background: var(--chat-panel, var(--theme-panel, #ffffff)) !important;
  background-color: var(--chat-panel, var(--theme-panel, #ffffff)) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] #assistantByokModelPanel,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-model-switch-panel,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-simple-model-menu {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-simple-model-list {
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-simple-model-group,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-simple-model-group-trigger,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-simple-model-copy {
  min-width: 0 !important;
  max-width: 100% !important;
}
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-simple-model-submenu {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: min(300px, calc(100dvh - 180px)) !important;
  margin: 0 0 4px !important;
  padding: 4px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 1px solid var(--chat-line, var(--theme-line, #dedbd4)) !important;
  border-radius: 8px !important;
  background: var(--chat-panel, var(--theme-panel, #ffffff)) !important;
  background-color: var(--chat-panel, var(--theme-panel, #ffffff)) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-simple-model-submenu > header,
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-simple-model-submenu .byok-simple-model-option {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-simple-model-submenu > header {
  box-shadow: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantImageModePanel.assistant-image-mode-panel[data-assistant-portal="true"] .byok-simple-model-option {
  overflow-wrap: anywhere !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench[data-workbench-open="false"],
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench[aria-hidden="true"],
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-right-workbench[data-workbench-open="false"],
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-right-workbench[aria-hidden="true"] {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbench > header #assistantRightWorkbenchToggleRail {
  display: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > .assistant-header#assistantDragHandle {
  right: calc(var(--assistant-right-rail-width) + 8px) !important;
}

/* v35: ChatGPT-like monochrome chat chrome. The earlier work-mode icon pass
   intentionally uses Klein blue; in conversation mode every navigation,
   composer and model-control glyph stays neutral so no blue tiles or masks
   leak into the clean light/dark canvas. */
html:root body[data-project-home-mode="chat"] #step-create#step-create :is(
  #projectHomeChatNav#projectHomeChatNav,
  #projectHomeConversationNav#projectHomeConversationNav,
  .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"],
  #assistantQuickToolsPanel,
  #assistantAddMenu
) :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: var(--chat-muted) !important;
  -webkit-text-fill-color: var(--chat-muted) !important;
  stroke: currentColor !important;
  fill: none !important;
  filter: none !important;
  background-image: none !important;
}
html:root body[data-project-home-mode="chat"] #step-create#step-create :is(
  #projectHomeChatNav#projectHomeChatNav,
  #projectHomeConversationNav#projectHomeConversationNav,
  .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"],
  #assistantQuickToolsPanel,
  #assistantAddMenu
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide) {
  stroke: currentColor !important;
  fill: none !important;
}
html:root body[data-project-home-mode="chat"] #step-create#step-create :is(
  #projectHomeChatNav#projectHomeChatNav,
  #projectHomeConversationNav#projectHomeConversationNav,
  .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"],
  #assistantQuickToolsPanel,
  #assistantAddMenu
) .fluent-icon-shell {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html:root body[data-project-home-mode="chat"] #step-create#step-create :is(
  #projectHomeChatNav#projectHomeChatNav,
  #projectHomeConversationNav#projectHomeConversationNav,
  .project-home-chat-topbar,
  #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"],
  #assistantQuickToolsPanel,
  #assistantAddMenu
) .fluent-icon {
  background: var(--chat-muted) !important;
  background-color: var(--chat-muted) !important;
  background-image: none !important;
  filter: none !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}
/* The send control keeps its neutral contrast against the existing raised
   button surface; it never inherits the legacy Klein-blue glyph mask. */
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantSendBtn#assistantSendBtn :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
}
html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantSendBtn#assistantSendBtn .fluent-icon {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantSendBtn#assistantSendBtn :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: #171717 !important;
  -webkit-text-fill-color: #171717 !important;
  stroke: #171717 !important;
  fill: none !important;
}
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantSendBtn#assistantSendBtn .fluent-icon {
  background: #171717 !important;
  background-color: #171717 !important;
}
/* The mode switch and composer controls are flat controls, never blue tiles. */
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantComposer#assistantComposer :is(
  #assistantModeSwitch, #assistantModeTrigger, #assistantImageSettingsBtn,
  #assistantQuickToolsBtn, #assistantAddBtn, #assistantVoiceInputBtn,
  .assistant-quick-tools-wrap, .assistant-composer-tools
) {
  background-image: none !important;
}

/* v35b: outrank the legacy six-ID Klein-blue lock selectors. */
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #projectHomeChatNav#projectHomeChatNav :is(svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon),
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #projectHomeConversationNav#projectHomeConversationNav :is(svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon),
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create .project-home-chat-topbar :is(svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon),
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer :is(svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon),
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer :is(#assistantAddBtn#assistantAddBtn, #assistantVoiceInputBtn#assistantVoiceInputBtn, #assistantModeTrigger#assistantModeTrigger, #assistantImageSettingsBtn#assistantImageSettingsBtn, #assistantQuickToolsBtn#assistantQuickToolsBtn) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon) {
  color: var(--chat-muted) !important;
  -webkit-text-fill-color: var(--chat-muted) !important;
  stroke: currentColor !important;
  fill: none !important;
  background-image: none !important;
}
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #projectHomeChatNav#projectHomeChatNav :is(.fluent-icon-shell, .fluent-icon),
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #projectHomeConversationNav#projectHomeConversationNav :is(.fluent-icon-shell, .fluent-icon),
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer :is(.fluent-icon-shell, .fluent-icon) {
  background: var(--chat-muted) !important;
  background-color: var(--chat-muted) !important;
  background-image: none !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer > #assistantSendBtn#assistantSendBtn :is(svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon) {
  color: var(--chat-bg) !important;
  -webkit-text-fill-color: var(--chat-bg) !important;
  stroke: var(--chat-bg) !important;
  fill: none !important;
}
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer > #assistantSendBtn#assistantSendBtn :is(.fluent-icon-shell, .fluent-icon) {
  background: var(--chat-bg) !important;
  background-color: var(--chat-bg) !important;
}

/* v35c: final neutral selectors use repeated IDs because the legacy chat
   Klein-blue block carries duplicated IDs and therefore higher specificity. */
html:root body[data-project-home-mode="chat"] #appShell#appShell#appShell #step-create#step-create#step-create #projectHomeChatNav#projectHomeChatNav#projectHomeChatNav :is(svg, svg *, i[data-lucide], [data-lucide], .lucide) {
  color: var(--assistant-chat-icon, #5f6368) !important;
  -webkit-text-fill-color: var(--assistant-chat-icon, #5f6368) !important;
  stroke: currentColor !important;
  fill: none !important;
}
html:root body[data-project-home-mode="chat"] #appShell#appShell#appShell #step-create#step-create#step-create #projectHomeConversationNav#projectHomeConversationNav#projectHomeConversationNav :is(svg, svg *, i[data-lucide], [data-lucide], .lucide) {
  color: var(--assistant-chat-icon, #5f6368) !important;
  -webkit-text-fill-color: var(--assistant-chat-icon, #5f6368) !important;
  stroke: currentColor !important;
  fill: none !important;
}
html:root body[data-project-home-mode="chat"] #appShell#appShell#appShell #step-create#step-create#step-create .project-home-chat-topbar :is(svg, svg *, i[data-lucide], [data-lucide], .lucide) {
  color: var(--assistant-chat-icon, #5f6368) !important;
  -webkit-text-fill-color: var(--assistant-chat-icon, #5f6368) !important;
  stroke: currentColor !important;
  fill: none !important;
}
html:root body[data-project-home-mode="chat"] #appShell#appShell#appShell #step-create#step-create#step-create #assistantDrawer#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer#assistantComposer :is(svg, svg *, i[data-lucide], [data-lucide], .lucide) {
  color: var(--chat-muted) !important;
  -webkit-text-fill-color: var(--chat-muted) !important;
  stroke: currentColor !important;
  fill: none !important;
}
html:root body[data-project-home-mode="chat"] #appShell#appShell#appShell #step-create#step-create#step-create #assistantDrawer#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer#assistantComposer :is(.fluent-icon-shell, .fluent-icon) {
  background: var(--chat-muted) !important;
  background-color: var(--chat-muted) !important;
  background-image: none !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}

/* Final message-action row guard: the overflow menu must remain a single
   horizontal strip so 收藏/删除 do not become two tall rows.  This file loads
   after the older release polish layers, so the rule remains stable in chat and
   at the compact widths shown in the preview. */
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-actions {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  scrollbar-width: none !important;
  white-space: nowrap !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-actions::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-more-menu {
  position: relative !important;
  flex: 0 0 auto !important;
  display: inline-block !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-more-popover {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(92vw, 320px) !important;
  gap: 4px !important;
  padding: 6px !important;
  overflow: visible !important;
  scrollbar-width: none !important;
  white-space: nowrap !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-more-popover::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-more-popover > button {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 76px !important;
  min-height: 30px !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
@media (max-width: 560px) {
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-more-popover {
    right: auto !important;
    left: 0 !important;
  }
}



/* Web and desktop share the same flat text/image sections and stacked rows. */
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #chatTopModelMenu.chat-top-model-menu {
  --model-menu-panel: var(--neutral-panel, var(--theme-panel, #ffffff));
  --model-menu-text: var(--neutral-text, var(--theme-text, #282725));
  --model-menu-muted: var(--neutral-muted, var(--theme-muted, #706d67));
  --model-menu-line: var(--neutral-line, var(--theme-line, #dedbd4));
  position: fixed !important;
  z-index: 10080 !important;
  box-sizing: border-box !important;
  width: min(390px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(74dvh, 620px) !important;
  padding: 6px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  border: 1px solid var(--model-menu-line) !important;
  border-radius: 8px !important;
  background: var(--model-menu-panel) !important;
  background-color: var(--model-menu-panel) !important;
  background-image: none !important;
  color: var(--model-menu-text) !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #chatTopModelMenu.hidden {
  display: none !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #chatTopModelMenu
  :is(.byok-simple-model-menu, .byok-simple-model-list, .byok-simple-model-kind-section, .byok-simple-model-group, .byok-simple-model-submenu) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #chatTopModelMenu .byok-simple-model-list {
  gap: 12px !important;
  padding: 4px 0 !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #chatTopModelMenu .byok-simple-model-kind-section {
  gap: 4px !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #chatTopModelMenu
  :is(.byok-simple-model-kind-title, .byok-simple-model-group-title, .byok-model-switch-head, .chat-top-model-menu-head) {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--model-menu-muted) !important;
  box-shadow: none !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #chatTopModelMenu
  :is(.byok-simple-model-kind-title > b, .byok-simple-model-group-title b) {
  min-width: 0 !important;
  color: inherit !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-weight: 650 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #chatTopModelMenu
  :is(.byok-simple-model-kind-title > small, .byok-simple-model-group-title small, .byok-simple-model-submenu > header) {
  display: none !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #chatTopModelMenu .byok-simple-model-kind-section + .byok-simple-model-kind-section {
  padding-top: 10px !important;
  border-top: 1px solid var(--model-menu-line) !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #chatTopModelMenu .byok-simple-model-submenu {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 2px !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #chatTopModelMenu .byok-simple-model-submenu[hidden] {
  display: none !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #chatTopModelMenu .byok-simple-model-option {
  box-sizing: border-box !important;
  min-height: 48px !important;
  height: auto !important;
  max-height: none !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 10px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--model-menu-text) !important;
  box-shadow: none !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #chatTopModelMenu
  .byok-simple-model-option:is(.is-active, :hover, :focus-visible) {
  background: var(--neutral-panel-soft, var(--theme-panel-soft, #f1efeb)) !important;
  background-color: var(--neutral-panel-soft, var(--theme-panel-soft, #f1efeb)) !important;
  color: var(--model-menu-text) !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #chatTopModelMenu .byok-simple-model-option:focus-visible {
  outline: 2px solid var(--neutral-accent, #a26820) !important;
  outline-offset: -2px !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #chatTopModelMenu .byok-simple-model-copy {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 3px !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #chatTopModelMenu
  .byok-simple-model-option .byok-simple-model-copy :is(b, small) {
  display: block !important;
  grid-column: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  line-height: 1.5 !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #chatTopModelMenu .byok-simple-model-option .byok-simple-model-copy b {
  color: var(--model-menu-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #chatTopModelMenu .byok-simple-model-option .byok-simple-model-copy small {
  color: var(--model-menu-muted) !important;
  font-size: 12px !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #chatTopModelMenu .byok-simple-model-state {
  color: var(--model-menu-muted) !important;
  font-size: 13px !important;
  align-self: center !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #chatTopModelMenu .byok-simple-model-settings {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 6px 0 0 !important;
  padding: 10px !important;
  border-top-color: var(--model-menu-line) !important;
  color: var(--model-menu-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  white-space: normal !important;
}

/* GPT-style composer cleanup: secondary actions live behind the plus button.
   Keep the original controls mounted for their existing event handlers and
   dialogs, but remove their duplicate visual triggers from the composer row. */
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer .assistant-composer-tools > :is(#assistantImageSettingsBtn, .assistant-quick-tools-wrap) {
  display: none !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #assistantDrawer#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer#assistantComposer .assistant-composer-tools > :is(#assistantImageSettingsBtn#assistantImageSettingsBtn, .assistant-quick-tools-wrap) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #assistantAddMenu.assistant-add-menu {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  width: min(342px, calc(100vw - 24px)) !important;
  padding: 10px !important;
  border-radius: 16px !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #assistantAddMenu .assistant-add-menu-section {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #assistantAddMenu .assistant-add-menu-section + .assistant-add-menu-section {
  padding-top: 8px !important;
  border-top: 1px solid var(--chat-line, #e5e5e5) !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #assistantAddMenu .assistant-add-menu-section > h3 {
  margin: 0 8px 4px !important;
  color: var(--chat-muted, #6b7280) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: .02em !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #assistantAddMenu button.assistant-add-menu-action {
  min-height: 48px !important;
  padding: 8px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--chat-text, #202020) !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #assistantAddMenu button.assistant-add-menu-action:not(:disabled):hover,
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #assistantAddMenu button.assistant-add-menu-action:not(:disabled):focus-visible {
  background: color-mix(in srgb, var(--chat-text, #202020) 7%, transparent) !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #assistantAddMenu button.assistant-add-menu-action > :is(svg, i, .fluent-icon-shell, .fluent-icon) {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  color: var(--chat-muted, #6b7280) !important;
  background: transparent !important;
  background-color: transparent !important;
  stroke: currentColor !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #assistantAddMenu button.assistant-add-menu-action strong {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #assistantAddMenu button.assistant-add-menu-action small {
  font-size: 10px !important;
  line-height: 1.35 !important;
}
html:root[data-theme="dark"] body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #assistantAddMenu .assistant-add-menu-section + .assistant-add-menu-section {
  border-top-color: var(--chat-line, #303030) !important;
}

/* Context marks: center the rail itself and draw exactly one mark for each
   current conversation message. The old border-left shifted every mark to the
   right, which made the minimap look off-center and visually added a second
   line. A centered pseudo-element is the single connector line. */
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantContextRail#assistantContextRail {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 10px !important;
  height: max-content !important;
  min-height: 0 !important;
  max-height: calc(100% - 32px) !important;
  transform: translateY(-50%) !important;
}
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantContextRail#assistantContextRail .assistant-context-rail-track {
  position: relative !important;
  width: 16px !important;
  height: max-content !important;
  min-height: 0 !important;
  max-height: calc(100vh - 32px) !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 7px 0 !important;
  border-left: 0 !important;
  overflow: hidden !important;
}
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantContextRail#assistantContextRail .assistant-context-rail-track::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 1px !important;
  transform: translateX(-50%) !important;
  background: color-mix(in srgb, var(--chat-text) 13%, transparent) !important;
  pointer-events: none !important;
}
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantContextRail#assistantContextRail .assistant-context-rail-mark {
  position: relative !important;
  z-index: 1 !important;
  align-self: center !important;
  flex: 0 0 3px !important;
  width: 10px !important;
  min-width: 10px !important;
  max-width: 13px !important;
  height: 3px !important;
  min-height: 3px !important;
  max-height: 3px !important;
  margin: 0 !important;
}
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantContextRail#assistantContextRail .assistant-context-rail-mark.active,
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantContextRail#assistantContextRail .assistant-context-rail-mark:hover,
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantContextRail#assistantContextRail .assistant-context-rail-mark:focus-visible {
  width: 13px !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #assistantAddMenu#assistantAddMenu#assistantAddMenu.assistant-add-menu.hidden,
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #assistantAddMenu#assistantAddMenu#assistantAddMenu.assistant-add-menu[aria-hidden="true"] {
  display: none !important;
}

/* Mode selection is available in the plus menu; keep the composer free of
   the image/site badge and collapse its now-empty second toolbar row. Keep
   the underlying controls mounted so the existing tool panels still work. */
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer#assistantComposer #assistantModeSwitch#assistantModeSwitch {
  display: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer#assistantComposer {
  grid-template-rows: minmax(52px, auto) 0 !important;
  row-gap: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer#assistantComposer > .assistant-composer-tools {
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Account footer: one compact identity button and an independent settings
   shortcut. Scope the neutral styles here to override earlier theme layers. */
@layer assistantChrome {
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl {
  --account-text: var(--neutral-text, #242426);
  --account-muted: var(--neutral-muted, #646469);
  --account-icon: var(--neutral-muted, #646469);
  --account-panel: var(--neutral-panel, #ffffff);
  --account-line: var(--neutral-line, #e3e3e6);
  --account-tool-size: 13px;
  --account-meta-size: 11px;
  position: relative !important;
  z-index: 10040 !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 36px !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 62px !important;
  flex: 0 0 auto !important;
  margin: auto 0 0 !important;
  padding: 8px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html:root[data-theme="dark"] body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl {
  --account-text: var(--neutral-text, #f1f1f1);
  --account-muted: var(--neutral-muted, #b5b5b5);
  --account-icon: var(--neutral-muted, #b5b5b5);
  --account-panel: var(--neutral-panel, #262626);
  --account-line: var(--neutral-line-strong, #545454);
}
html:root[data-assistant-font-size="small"] body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl {
  --account-tool-size: 12px;
  --account-meta-size: 10px;
}
html:root[data-assistant-font-size="large"] body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl {
  --account-tool-size: 15px;
  --account-meta-size: 12px;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl > #appAvatarMenuBtn {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 54px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 6px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--account-text) !important;
  box-shadow: none !important;
  text-align: left !important;
  transform: none !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl :is(.customer-account-avatar, .customer-account-avatar img) {
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  object-fit: contain !important;
  overflow: hidden !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl .customer-account-copy {
  display: grid !important;
  justify-items: start !important;
  gap: 3px !important;
  min-width: 0 !important;
  width: 100% !important;
  text-align: left !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl .customer-account-name {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl .customer-account-copy strong {
  display: block !important;
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--account-text) !important;
  -webkit-text-fill-color: var(--account-text) !important;
  font-size: var(--account-tool-size) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl .customer-account-copy small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: var(--account-muted) !important;
  -webkit-text-fill-color: var(--account-muted) !important;
  font-size: var(--account-meta-size) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl > #accountSettingsQuickBtn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--account-icon) !important;
  box-shadow: none !important;
  transform: none !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl > :is(#appAvatarMenuBtn, #accountSettingsQuickBtn):is(:hover, :focus-visible, [aria-expanded="true"]) {
  background: color-mix(in srgb, var(--account-text) 7%, transparent) !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl button:focus-visible {
  outline: 2px solid var(--account-icon) !important;
  outline-offset: -2px !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl > #appAvatarMenu {
  position: absolute !important;
  inset: auto auto calc(100% + 8px) 0 !important;
  z-index: 10060 !important;
  display: grid !important;
  width: 280px !important;
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(560px, var(--account-menu-available-height, calc(100dvh - 100px))) !important;
  box-sizing: border-box !important;
  gap: 2px !important;
  padding: 8px !important;
  border: 1px solid var(--account-line) !important;
  border-radius: 14px !important;
  background: var(--account-panel) !important;
  color: var(--account-text) !important;
  -webkit-text-fill-color: var(--account-text) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-image: none !important;
  box-shadow: 0 8px 28px rgb(0 0 0 / 16%) !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl > #appAvatarMenu.hidden {
  display: none !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl > p,
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl .brand-avatar-menu-head {
  display: none !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl #appAvatarMenu > button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 40px !important;
  padding: 9px 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--account-text) !important;
  -webkit-text-fill-color: var(--account-text) !important;
  box-shadow: none !important;
  font-size: var(--account-tool-size) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-align: left !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl #appAvatarMenu > button:not(:disabled):is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--account-text) 7%, transparent) !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl #appAvatarMenu > button > span:not(.fluent-icon-shell) {
  min-width: 0 !important;
  color: var(--account-text) !important;
  -webkit-text-fill-color: var(--account-text) !important;
  font-size: inherit !important;
  line-height: inherit !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl .customer-account-menu-separator {
  height: 1px !important;
  margin: 6px 7px !important;
  background: var(--account-line) !important;
  border: 0 !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl :is(svg, svg *, i[data-lucide], .fluent-icon-shell, .fluent-icon) {
  color: var(--account-icon) !important;
  -webkit-text-fill-color: var(--account-icon) !important;
  stroke: currentColor !important;
  fill: none !important;
  background-image: none !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl :is(button > svg, button > i, button > .fluent-icon-shell, button > .fluent-icon) {
  flex: 0 0 18px !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl .fluent-icon-shell {
  background: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl .fluent-icon {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  background: var(--account-icon) !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl .customer-account-chevron {
  flex: 0 0 12px !important;
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  max-width: 12px !important;
  min-height: 12px !important;
  max-height: 12px !important;
  transition: transform .15s ease !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl #appAvatarMenuBtn[aria-expanded="true"] .customer-account-chevron {
  transform: rotate(180deg) !important;
}
html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl #appAvatarMenu .customer-account-menu-arrow {
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  flex-basis: 14px !important;
  margin-left: auto !important;
}
@media (min-width: 768px) {
  html:root body[data-project-home-mode="work"] #step-create > .project-home-shell > .project-home-nav {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  html:root body[data-project-home-mode="work"] #step-create .project-home-nav > .project-home-brand {
    flex: 0 0 auto !important;
  }
  html:root body[data-project-home-mode="work"] #step-create .project-home-nav > .project-home-nav-scroll {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    gap: 4px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
  }
  html:root body[data-project-home-mode="work"] #step-create .project-home-nav-scroll > * {
    flex: 0 0 auto !important;
  }
  html:root body[data-project-home-mode="work"] #step-create .project-home-nav > .project-home-nav-spacer {
    display: none !important;
  }
}
}

/* Chat composer: one quiet input surface in both themes, with one command
   row. Use a height variable so autosizing survives older important rules. */
@layer assistantChrome {
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer {
    --capsule-surface: var(--neutral-panel-soft);
    --capsule-text: var(--neutral-text);
    --capsule-muted: var(--neutral-muted);
    --capsule-send: var(--neutral-text);
    --capsule-send-icon: var(--ui-content-bg, #ffffff);
    --capsule-disabled: var(--neutral-panel-raised);
    --capsule-disabled-icon: var(--neutral-faint);
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) 36px 40px !important;
    grid-template-rows: minmax(44px, auto) 0 !important;
    align-items: center !important;
    gap: 0 6px !important;
    min-height: 62px !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: var(--capsule-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer {
    border-color: var(--neutral-line) !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer:focus-within {
    box-shadow: none !important;
    outline: none !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > #assistantInput {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--assistant-input-height, 44px) !important;
    min-height: 44px !important;
    max-height: 160px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 10px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--capsule-text) !important;
    -webkit-text-fill-color: var(--capsule-text) !important;
    font-size: var(--chat-copy-size, 14px) !important;
    line-height: 24px !important;
    box-shadow: none !important;
    outline: none !important;
    resize: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > #assistantInput::placeholder {
    color: var(--capsule-muted) !important;
    -webkit-text-fill-color: var(--capsule-muted) !important;
    opacity: 1 !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > :is(#assistantAddBtn, #assistantVoiceInputBtn, #assistantSendBtn) {
    position: static !important;
    inset: auto !important;
    grid-row: 1 !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--capsule-text) !important;
    -webkit-text-fill-color: var(--capsule-text) !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > #assistantAddBtn { grid-column: 1 !important; }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > #assistantVoiceInputBtn { grid-column: 3 !important; }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > #assistantSendBtn {
    grid-column: 4 !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    background: var(--capsule-send) !important;
    color: var(--capsule-send-icon) !important;
    -webkit-text-fill-color: var(--capsule-send-icon) !important;
    opacity: 1 !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > #assistantSendBtn:disabled {
    background: var(--capsule-disabled) !important;
    color: var(--capsule-disabled-icon) !important;
    -webkit-text-fill-color: var(--capsule-disabled-icon) !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > :is(#assistantAddBtn, #assistantVoiceInputBtn):is(:hover, [aria-pressed="true"]) {
    background: color-mix(in srgb, var(--capsule-text) 8%, transparent) !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > button:focus-visible {
    outline: 2px solid var(--capsule-muted) !important;
    outline-offset: 2px !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > button :is(svg.lucide, i[data-lucide], .fluent-icon-shell[data-fluent-icon]) {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    flex: 0 0 22px !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > .assistant-composer-tools {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer .assistant-composer-tools > * {
    display: none !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer .assistant-composer-tools > .assistant-composer-copy-tools {
    display: contents !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantCopyModeTrigger {
    display: none !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantCopyModeMenu:not(.hidden) {
    position: absolute !important;
    inset: auto auto calc(100% + 8px) 0 !important;
    display: grid !important;
    width: min(320px, calc(100vw - 24px)) !important;
    padding: 8px !important;
    border: 1px solid var(--chat-line, #dddddd) !important;
    border-radius: 14px !important;
    background: var(--capsule-surface) !important;
    color: var(--capsule-text) !important;
    box-shadow: 0 8px 24px rgb(0 0 0 / 15%) !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantAttachments {
    width: min(860px, calc(100% - 24px)) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-inline: auto !important;
  }
  @media (max-width: 520px) {
    html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantAttachments {
      width: calc(100% - 12px) !important;
    }
  }
}

/* Skill management has a single entry in the rail and a neutral floating
   panel that also works from the composer plus menu. */
@layer assistantChrome {
  html:root body #assistantSkillsPanel {
    --skill-panel: #ffffff;
    --skill-text: #303030;
    --skill-muted: #777777;
    --skill-line: #e5e5e5;
    position: fixed !important;
    z-index: 10100 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    padding: 14px !important;
    border: 1px solid var(--skill-line) !important;
    border-radius: 16px !important;
    background: var(--skill-panel) !important;
    background-image: none !important;
    color: var(--skill-text) !important;
    -webkit-text-fill-color: var(--skill-text) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 8px 28px rgb(0 0 0 / 16%) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
  }
  html:root[data-theme="dark"] body #assistantSkillsPanel {
    --skill-panel: #262626;
    --skill-text: #dfdfdf;
    --skill-muted: #999999;
    --skill-line: #404040;
  }
  html:root body #assistantSkillsPanel.hidden {
    display: none !important;
  }
  html:root body #assistantSkillsPanel > header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  html:root body #assistantSkillsPanel > header > strong {
    flex: 1 1 auto !important;
    font-size: var(--chat-tool-size, 13px) !important;
    font-weight: 600 !important;
  }
  html:root body #assistantSkillsPanel > header > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    flex: 0 0 auto !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 6px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--skill-text) !important;
    -webkit-text-fill-color: var(--skill-text) !important;
    font-size: var(--chat-meta-size, 11px) !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }
  html:root body #assistantSkillsPanel > .assistant-skills-note {
    margin: 0 !important;
    color: var(--skill-muted) !important;
    -webkit-text-fill-color: var(--skill-muted) !important;
    font-size: var(--chat-meta-size, 11px) !important;
    line-height: 1.5 !important;
  }
  html:root body #assistantSkillsPanel #assistantSkillsList {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    max-height: none !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  html:root body #assistantSkillsPanel .assistant-skill-option {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--skill-text) !important;
  }
  html:root body #assistantSkillsPanel .assistant-skill-option:is(:hover, .is-selected) {
    background: color-mix(in srgb, var(--skill-text) 6%, transparent) !important;
    border-color: transparent !important;
  }
  html:root body #assistantSkillsPanel .assistant-skill-option-copy {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    text-align: left !important;
  }
  html:root body #assistantSkillsPanel .assistant-skill-option-copy strong {
    color: var(--skill-text) !important;
    -webkit-text-fill-color: var(--skill-text) !important;
    font-size: var(--chat-tool-size, 13px) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }
  html:root body #assistantSkillsPanel :is(.assistant-skill-option-copy small, .assistant-skill-option-meta) {
    color: var(--skill-muted) !important;
    -webkit-text-fill-color: var(--skill-muted) !important;
    font-size: var(--chat-meta-size, 11px) !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  html:root body #assistantSkillsPanel button:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--skill-text) 6%, transparent) !important;
  }
  html:root body #assistantSkillsPanel button:focus-visible {
    outline: 2px solid var(--skill-muted) !important;
    outline-offset: 2px !important;
  }
  html:root body #assistantSkillsPanel .assistant-skill-delete {
    color: var(--skill-muted) !important;
    -webkit-text-fill-color: var(--skill-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html:root body #assistantSkillsPanel :is(svg.lucide, svg.lucide *, i[data-lucide], .fluent-icon-shell[data-fluent-icon], .fluent-icon) {
    color: var(--skill-muted) !important;
    -webkit-text-fill-color: var(--skill-muted) !important;
    stroke: currentColor !important;
  }
  html:root body #assistantSkillsPanel .fluent-icon-shell[data-fluent-icon] {
    background: transparent !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  html:root body #assistantSkillsPanel .fluent-icon-shell > .fluent-icon {
    background: currentColor !important;
  }
}

/* On phones, keep copy and More visible; move the other actions into More. */
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-more-menu .assistant-message-more-popover {
  border: 1px solid var(--neutral-line-strong, #c9c4bb) !important;
  background: var(--chat-panel, #fff) !important;
  color: var(--chat-text, #242424) !important;
  box-shadow: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-more-menu .assistant-message-more-popover > button.assistant-message-more-compact-action {
  display: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-actions :is(.assistant-message-action-btn:hover, .assistant-message-action-btn:focus-visible),
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-more-menu[open] > summary,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-more-popover > button:is(:hover, :focus-visible) {
  border-color: var(--neutral-line-strong, #c9c4bb) !important;
  background: var(--neutral-panel-soft, #f1efeb) !important;
  color: var(--neutral-text, #282725) !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-actions :focus-visible {
  outline: 2px solid var(--neutral-accent, #a86f25) !important;
  outline-offset: 2px !important;
}
@media (max-width: 560px) {
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-actions > button:not([data-assistant-message-tool="copy"]),
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-actions > .assistant-speech-status {
    display: none !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-more-menu .assistant-message-more-popover {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(260px, calc(100vw - 32px)) !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: normal !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message:not(.user) .assistant-message-more-menu .assistant-message-more-popover {
    left: 0 !important;
    right: auto !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message.user .assistant-message-more-menu .assistant-message-more-popover {
    left: auto !important;
    right: 0 !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-more-menu .assistant-message-more-popover > button.assistant-message-more-compact-action {
    display: inline-flex !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-more-popover > button {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ==== consolidated from /assistant-chat-layout.css (cascade order preserved) ==== */
/*
 * P0 conversation layout convergence.
 * This file is intentionally last in the cascade: it owns the three-column
 * geometry while feature styles continue to own the controls inside each area.
 */
html:root body[data-project-home-mode="chat"] #step-create#step-create > .project-home-shell > .project-home-content {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Final cascade guard for user turns.  This is intentionally last in the
   stylesheet because the legacy transcript normalizer is also loaded after
   the base conversation CSS. */
html:root body[data-project-home-mode="chat"] #step-create#step-create#step-create
#assistantDrawer#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"]
#assistantMessages#assistantMessages#assistantMessages > .assistant-message.user {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  text-align: right !important;
}
html:root body[data-project-home-mode="chat"] #step-create#step-create#step-create
#assistantDrawer#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"]
#assistantMessages#assistantMessages#assistantMessages > .assistant-message.user > .assistant-message-content {
  width: fit-content !important;
  max-width: min(76%, 620px) !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: left !important;
}
@media (max-width: 1023px) {
  html:root body[data-project-home-mode="chat"] #step-create#step-create#step-create
  #assistantDrawer#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"]
  #assistantMessages#assistantMessages#assistantMessages > .assistant-message.user > .assistant-message-content {
    max-width: min(88%, 620px) !important;
  }
}

/* Keep the user's turn on the right side of the centered transcript.  The
   shared transcript rule above intentionally normalizes every row to a block
   flow; this scoped override restores a flex row only for user messages so
   assistant replies, result cards, and work mode retain their left edge. */
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages#assistantMessages .assistant-message.user {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  text-align: right !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages#assistantMessages .assistant-message.user > .assistant-message-content {
  width: fit-content !important;
  max-width: min(76%, 620px) !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: left !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] {
  --assistant-right-rail-width: 0px;
  position: relative !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* The rail is a true overlay sibling. It never creates a phantom gutter when
   hidden or collapsed, and its width is reserved only in the open state. */
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"]:has(> #assistantRightWorkbench:not([hidden])[data-workbench-open="true"]) {
  --assistant-right-rail-width: 304px;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"]:has(> #assistantRightWorkbench[data-workbench-open="false"]),
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"]:has(> #assistantRightWorkbench[aria-hidden="true"]),
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"]:has(> #assistantRightWorkbench[hidden]) {
  --assistant-right-rail-width: 0px;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantRightWorkbench {
  position: absolute !important;
  z-index: 10 !important;
  inset: 0 0 0 auto !important;
  width: var(--assistant-right-rail-width) !important;
  min-width: var(--assistant-right-rail-width) !important;
  max-width: var(--assistant-right-rail-width) !important;
  height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden auto !important;
  border-left: 1px solid var(--chat-line) !important;
  border-radius: 0 !important;
  background: var(--chat-panel) !important;
  box-shadow: none !important;
  transition: width .16s ease, min-width .16s ease, max-width .16s ease !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantRightWorkbench[hidden],
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantRightWorkbench[data-workbench-open="false"] {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* Keep the canvas control as the sole way to reopen a collapsed rail. */
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantRightWorkbenchToggleRail {
  display: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"]:has(> #assistantRightWorkbench[hidden]) #assistantRightWorkbenchToggle {
  display: none !important;
}

@media (min-width: 1024px) {
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages {
    flex: 1 1 auto !important;
    align-self: stretch !important;
    width: calc(100% - var(--assistant-right-rail-width)) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 28px 26px !important;
    box-sizing: border-box !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantDesignFocus:not(.hidden) {
    display: flex !important;
    flex: 1 1 auto !important;
    align-self: flex-start !important;
    width: calc(100% - var(--assistant-right-rail-width)) !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantAttachments,
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantComposer {
    align-self: flex-start !important;
    width: min(860px, calc(100% - var(--assistant-right-rail-width) - 32px)) !important;
    max-width: calc(100% - var(--assistant-right-rail-width) - 32px) !important;
    margin-left: max(16px, calc((100% - var(--assistant-right-rail-width) - 860px) / 2)) !important;
    margin-right: 0 !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantDesignFocus:not(.hidden) .assistant-design-focus-bar,
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantDesignFocus:not(.hidden) .assistant-design-focus-footer {
    width: min(780px, calc(100% - 44px)) !important;
    margin-inline: auto !important;
  }
}

/* Medium screens keep the same center-first hierarchy and allow the rail to
   occupy the right edge without pushing the document outside the viewport. */
@media (min-width: 768px) and (max-width: 1023px) {
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages,
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantDesignFocus:not(.hidden) {
    width: calc(100% - var(--assistant-right-rail-width)) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: var(--assistant-right-rail-width) !important;
    box-sizing: border-box !important;
  }
}

/* On phones the workbench becomes a bottom sheet only when a result exists. */
@media (max-width: 767px) {
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantRightWorkbench {
    inset: auto 0 0 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: min(62dvh, 520px) !important;
    max-height: 62dvh !important;
    border-top: 1px solid var(--chat-line) !important;
    border-left: 0 !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages,
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantDesignFocus:not(.hidden) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* -------------------------------------------------------------------------
   Final neutral chrome pass (chat mode only)

   The conversation surface follows the quiet GPT/Codex treatment: no blue
   fills, gradients, or large colour blocks. Work mode keeps its existing
   task/workbench skin because these overrides are scoped to chat mode.
   ------------------------------------------------------------------------- */
html:root body[data-project-home-mode="chat"] {
  --chat-accent: #2f2f2f;
}
html:root[data-theme="dark"] body[data-project-home-mode="chat"] {
  --chat-accent: #ececec;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(
  #assistantAddBtn,
  #assistantVoiceInputBtn,
  #assistantImageSettingsBtn,
  #assistantPromptEnhanceBtn,
  #assistantQuickToolsBtn,
  #assistantModeTrigger,
  #assistantCopyModeTrigger,
  #assistantAdvancedOptionsBtn,
  #assistantPromptRestoreBtn
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--chat-line) !important;
  color: var(--chat-muted) !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(
  #assistantAddBtn,
  #assistantVoiceInputBtn,
  #assistantImageSettingsBtn,
  #assistantPromptEnhanceBtn,
  #assistantQuickToolsBtn,
  #assistantModeTrigger,
  #assistantCopyModeTrigger,
  #assistantAdvancedOptionsBtn,
  #assistantPromptRestoreBtn
):is(:hover, :focus-visible, [aria-expanded="true"]) {
  background: color-mix(in srgb, var(--chat-text) 8%, transparent) !important;
  background-color: color-mix(in srgb, var(--chat-text) 8%, transparent) !important;
  border-color: var(--chat-line) !important;
  color: var(--chat-text) !important;
  outline: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn {
  background: var(--chat-text) !important;
  background-color: var(--chat-text) !important;
  background-image: none !important;
  border-color: var(--chat-text) !important;
  color: var(--chat-bg) !important;
  box-shadow: none !important;
}
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn {
  background: var(--chat-text) !important;
  background-color: var(--chat-text) !important;
  border-color: var(--chat-text) !important;
  color: var(--chat-bg) !important;
}

/* The shared tools center keeps application tools and skills in one surface. */
@layer assistantChrome {
html body #assistantToolsDrawer.assistant-tools-drawer {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
}

html body #assistantToolsDrawer > header,
html body #assistantToolsDrawer > .assistant-tools-tabs {
  flex: 0 0 auto;
}
html body #assistantToolsDrawer > .assistant-tools-tabs {
  display: flex;
  gap: 6px;
  margin: 14px 18px 0;
  padding: 4px;
  border-radius: 9px;
  background: var(--v2-bg, #f3f4f6);
}
html body #assistantToolsDrawer .assistant-tools-tabs > button {
  flex: 1;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--v2-muted, #64748b) !important;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
html body #assistantToolsDrawer .assistant-tools-tabs > button[aria-selected="true"] {
  border-color: var(--v2-line, #e2e8f0) !important;
  background: var(--v2-panel, #fff) !important;
  color: var(--v2-text, #1f2937) !important;
  font-weight: 650;
}
html body #assistantToolsDrawer .assistant-tools-tabs > button:focus-visible {
  outline: 2px solid var(--v2-blue, #2563eb);
  outline-offset: 2px;
}
html body #assistantToolsDrawer > .assistant-tools-tab-panel {
  flex: 1 0 auto;
  min-width: 0;
}
html body #assistantToolsDrawer > .assistant-tools-tab-panel.hidden {
  display: none !important;
}
html:root body #assistantToolsDrawer #assistantSkillsPanel {
  align-content: start !important;
  position: static !important;
  width: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0;
  padding: 18px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}
html body #assistantToolsDrawer #assistantSkillsPanel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
html body #assistantToolsDrawer #assistantSkillsPanel > header strong {
  font-size: 14px !important;
}
html body #assistantToolsDrawer #assistantSkillsImportBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--v2-line, #e2e8f0);
  border-radius: 6px;
  background: var(--v2-panel-soft, #f8fafc);
  color: var(--v2-text, #1f2937);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
html body #assistantToolsDrawer #assistantSkillsPanel > .assistant-skills-note {
  margin: 0 0 14px;
  color: var(--v2-muted, #64748b);
  font-size: 12px;
  line-height: 1.65;
}
html body #assistantToolsDrawer #assistantSkillsList {
  max-height: none;
  overflow: visible;
}
}

/* Portalled menus and model pickers use a flat neutral surface in chat mode. */
html:root body[data-project-home-mode="chat"] :is(
  #assistantModeOptions,
  #assistantImageModePanel,
  #assistantQuickToolsPanel,
  #assistantAdvancedOptionsPanel,
  #assistantSkillsPanel,
  #assistantAddMenu,
  #assistantCopyModeMenu,
  #assistantPromptEnhanceDialog
) {
  background: var(--chat-panel) !important;
  background-color: var(--chat-panel) !important;
  background-image: none !important;
  border-color: var(--chat-line) !important;
  color: var(--chat-text) !important;
  box-shadow: 0 14px 36px rgb(0 0 0 / 18%) !important;
}
html:root body[data-project-home-mode="chat"] :is(
  #assistantModeOptions,
  #assistantImageModePanel,
  #assistantQuickToolsPanel,
  #assistantAdvancedOptionsPanel,
  #assistantSkillsPanel,
  #assistantAddMenu,
  #assistantCopyModeMenu,
  #assistantPromptEnhanceDialog
) :is(button, [role="button"], .active, [aria-selected="true"], [aria-pressed="true"]) {
  background-image: none !important;
}
html:root body[data-project-home-mode="chat"] :is(
  #assistantModeOptions,
  #assistantImageModePanel,
  #assistantQuickToolsPanel,
  #assistantAdvancedOptionsPanel,
  #assistantSkillsPanel,
  #assistantAddMenu,
  #assistantCopyModeMenu,
  #assistantPromptEnhanceDialog
) :is(button, [role="button"]):is(:hover, :focus-visible, .active, [aria-selected="true"], [aria-pressed="true"]) {
  background: color-mix(in srgb, var(--chat-text) 9%, transparent) !important;
  background-color: color-mix(in srgb, var(--chat-text) 9%, transparent) !important;
  border-color: var(--chat-line) !important;
  color: var(--chat-text) !important;
  outline: none !important;
}

/* Progress is intentionally monochrome; it remains visible through contrast. */
html:root body[data-project-home-mode="chat"] #step-create #assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(
  .assistant-task-progress i,
  .assistant-pdf-progress i,
  .assistant-image-generation-progress-track > i
) {
  background: var(--chat-text) !important;
  background-color: var(--chat-text) !important;
  background-image: none !important;
}
html:root body[data-project-home-mode="chat"] #step-create #assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(
  .assistant-task-progress,
  .assistant-pdf-progress,
  .assistant-image-generation-progress-track
) {
  background: color-mix(in srgb, var(--chat-text) 12%, transparent) !important;
  background-color: color-mix(in srgb, var(--chat-text) 12%, transparent) !important;
  background-image: none !important;
}

/* Chat mode must not inherit decorative gradients from legacy workbench cards. */
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] :is(
  .assistant-message,
  .assistant-message-content,
  .assistant-generated-result,
  .assistant-generated-image-card,
  .assistant-task-card,
  .assistant-status,
  .assistant-service-notice,
  .assistant-error,
  .assistant-context-block,
  .assistant-brief-summary,
  .assistant-design-hub,
  .assistant-design-strategy,
  .assistant-work-tools,
  .assistant-execution-controls
) {
  background-image: none !important;
}
@media (max-width: 767.98px) {
  html:root body[data-project-home-mode="chat"] #step-create#step-create
  #assistantDrawer#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantContextRail#assistantContextRail {
    display: none !important;
  }
}

/* Unified monochrome icon system for the GPT/Codex-style chat surface. */
html:root body[data-project-home-mode="chat"] #appShell #step-create :is(
  #projectHomeConversationNav,
  #projectHomeChatNav,
  #chatTopModelBtn,
  #projectHomeModeSwitch,
  #assistantDragHandle,
  #assistantDrawer,
  #assistantContextRail,
  #appAvatarMenuBtn
) :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: var(--assistant-chat-icon, #5f6368) !important;
  -webkit-text-fill-color: var(--assistant-chat-icon, #5f6368) !important;
  stroke: currentColor !important;
  fill: none !important;
  background-image: none !important;
}
html:root body[data-project-home-mode="chat"] #appShell #step-create :is(
  #projectHomeConversationNav,
  #projectHomeChatNav,
  #chatTopModelBtn,
  #projectHomeModeSwitch,
  #assistantDragHandle,
  #assistantDrawer,
  #assistantContextRail,
  #appAvatarMenuBtn
) :is(.fluent-icon-shell, .fluent-icon) {
  background: currentColor !important;
  background-color: currentColor !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}
html:root[data-theme="dark"] body[data-project-home-mode="chat"] {
  --assistant-chat-icon: #b4b4b4;
}
html:root body[data-project-home-mode="chat"] #appShell #step-create :is(
  #projectHomeConversationNav,
  #projectHomeChatNav,
  #chatTopModelBtn,
  #projectHomeModeSwitch,
  #assistantDragHandle,
  #assistantDrawer,
  #assistantContextRail,
  #appAvatarMenuBtn
) :is(button, [role="button"]):is(:hover, :focus-visible, [aria-expanded="true"], [aria-selected="true"], .active) :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: var(--chat-text) !important;
  -webkit-text-fill-color: var(--chat-text) !important;
  stroke: currentColor !important;
  background: currentColor !important;
  background-color: currentColor !important;
}
html:root body[data-project-home-mode="chat"] #appShell #step-create :is(
  #assistantAddBtn, #assistantVoiceInputBtn, #assistantSendBtn,
  #assistantImageSettingsBtn, #assistantPromptEnhanceBtn,
  #assistantQuickToolsBtn, #assistantModeTrigger, #assistantCopyModeTrigger,
  #assistantAdvancedOptionsBtn, #assistantPromptRestoreBtn
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon) {
  color: var(--assistant-chat-icon, #5f6368) !important;
  -webkit-text-fill-color: var(--assistant-chat-icon, #5f6368) !important;
  stroke: currentColor !important;
  fill: none !important;
  background-image: none !important;
}
html:root body[data-project-home-mode="chat"] #appShell #step-create :is(
  #assistantAddBtn, #assistantVoiceInputBtn, #assistantSendBtn,
  #assistantImageSettingsBtn, #assistantPromptEnhanceBtn,
  #assistantQuickToolsBtn, #assistantModeTrigger, #assistantCopyModeTrigger,
  #assistantAdvancedOptionsBtn, #assistantPromptRestoreBtn
) :is(.fluent-icon-shell, .fluent-icon) {
  background: currentColor !important;
  background-color: currentColor !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}
html:root body[data-project-home-mode="chat"] #appShell #step-create :is(
  #assistantAddBtn, #assistantVoiceInputBtn, #assistantSendBtn,
  #assistantImageSettingsBtn, #assistantPromptEnhanceBtn,
  #assistantQuickToolsBtn, #assistantModeTrigger, #assistantCopyModeTrigger,
  #assistantAdvancedOptionsBtn, #assistantPromptRestoreBtn
):is(:hover, :focus-visible, [aria-expanded="true"]) :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon
) {
  color: var(--chat-text) !important;
  -webkit-text-fill-color: var(--chat-text) !important;
  stroke: currentColor !important;
  background: currentColor !important;
  background-color: currentColor !important;
}

/* Keep chat chrome monochrome like GPT/Codex. Brand artwork can retain its
   identity, but controls and navigation icons inherit the neutral text tone. */
html:root body[data-project-home-mode="chat"] #step-create .project-home-nav :is(
  .project-home-nav-item,
  .project-home-conversation-nav,
  .assistant-new-conversation,
  .assistant-side-tabs button
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon) {
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
  filter: none !important;
}
html:root body[data-project-home-mode="chat"] :is(
  #chatTopModelBtn,
  #chatTopModelBtn svg,
  #chatTopModelBtn svg *,
  #projectHomeModeSwitch svg,
  #projectHomeModeSwitch svg *,
  #assistantRightWorkbenchToggle,
  #assistantRightWorkbenchToggle svg,
  #assistantRightWorkbenchToggle svg *
) {
  color: var(--chat-muted) !important;
  stroke: currentColor !important;
  fill: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-composer-tools :is(
  svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon
) {
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
}
/* Highest-specificity legacy Fluent mask reset. Older rules repeat IDs and
   otherwise win over the neutral icon system above. */
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create
#assistantDrawer#assistantDrawer.embedded
#assistantComposer#assistantComposer :is(
  #assistantAddBtn#assistantAddBtn,
  #assistantVoiceInputBtn#assistantVoiceInputBtn,
  #assistantSendBtn#assistantSendBtn,
  #assistantImageSettingsBtn#assistantImageSettingsBtn,
  #assistantPromptEnhanceBtn#assistantPromptEnhanceBtn,
  #assistantQuickToolsBtn#assistantQuickToolsBtn,
  #assistantModeTrigger#assistantModeTrigger,
  #assistantCopyModeTrigger#assistantCopyModeTrigger,
  #assistantAdvancedOptionsBtn#assistantAdvancedOptionsBtn,
  #assistantPromptRestoreBtn#assistantPromptRestoreBtn
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon) {
  color: var(--assistant-chat-icon, #5f6368) !important;
  -webkit-text-fill-color: var(--assistant-chat-icon, #5f6368) !important;
  stroke: currentColor !important;
  fill: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create
#assistantDrawer#assistantDrawer.embedded
#assistantComposer#assistantComposer :is(
  #assistantAddBtn#assistantAddBtn,
  #assistantVoiceInputBtn#assistantVoiceInputBtn,
  #assistantSendBtn#assistantSendBtn,
  #assistantImageSettingsBtn#assistantImageSettingsBtn,
  #assistantPromptEnhanceBtn#assistantPromptEnhanceBtn,
  #assistantQuickToolsBtn#assistantQuickToolsBtn,
  #assistantModeTrigger#assistantModeTrigger,
  #assistantCopyModeTrigger#assistantCopyModeTrigger,
  #assistantAdvancedOptionsBtn#assistantAdvancedOptionsBtn,
  #assistantPromptRestoreBtn#assistantPromptRestoreBtn
) :is(.fluent-icon-shell, .fluent-icon) {
  color: var(--assistant-chat-icon, #5f6368) !important;
  background: currentColor !important;
  background-color: currentColor !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create :is(
  #projectHomeConversationNav#projectHomeConversationNav,
  #projectHomeChatNav#projectHomeChatNav,
  #chatTopModelBtn#chatTopModelBtn,
  #projectHomeModeSwitch#projectHomeModeSwitch,
  #assistantDragHandle#assistantDragHandle,
  #assistantContextRail#assistantContextRail,
  #appAvatarMenuBtn#appAvatarMenuBtn
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon) {
  color: var(--assistant-chat-icon, #5f6368) !important;
  -webkit-text-fill-color: var(--assistant-chat-icon, #5f6368) !important;
  stroke: currentColor !important;
  fill: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create :is(
  #projectHomeConversationNav#projectHomeConversationNav,
  #projectHomeChatNav#projectHomeChatNav,
  #chatTopModelBtn#chatTopModelBtn,
  #projectHomeModeSwitch#projectHomeModeSwitch,
  #assistantDragHandle#assistantDragHandle,
  #assistantContextRail#assistantContextRail,
  #appAvatarMenuBtn#appAvatarMenuBtn
) :is(.fluent-icon-shell, .fluent-icon) {
  background: currentColor !important;
  background-color: currentColor !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}

/* Direct navigation selectors close the legacy rule that paints the SVG with
   Klein blue through the parent button's currentColor. */
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create
:is(#projectHomeChatNav, #projectHomeConversationNav, #projectHomeModeSwitch, #chatTopModelBtn, #appAvatarMenuBtn)
> :is(button, [role="button"]) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon),
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create
:is(#projectHomeChatNav, #projectHomeConversationNav, #projectHomeModeSwitch, #chatTopModelBtn, #appAvatarMenuBtn)
> button :is(svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon) {
  color: var(--assistant-chat-icon, #5f6368) !important;
  -webkit-text-fill-color: var(--assistant-chat-icon, #5f6368) !important;
  stroke: currentColor !important;
  fill: none !important;
  background: transparent !important;
  background-color: transparent !important;
}
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create
:is(#projectHomeChatNav, #projectHomeConversationNav, #projectHomeModeSwitch, #chatTopModelBtn, #appAvatarMenuBtn)
> :is(button, [role="button"]) :is(.fluent-icon-shell, .fluent-icon) {
  background: currentColor !important;
  background-color: currentColor !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}

/* Legacy chat-conversation.css contains a later, high-specificity Klein-blue
   pass. This final declaration deliberately targets the complete chat icon
   groups and wins through the duplicated IDs plus !important. */
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create
:is(#projectHomeChatNav#projectHomeChatNav, #projectHomeConversationNav#projectHomeConversationNav,
  .project-home-chat-topbar, #assistantDrawer#assistantDrawer.embedded,
  #assistantQuickToolsPanel, #assistantAddMenu)
:is(svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon) {
  color: var(--assistant-chat-icon, #5f6368) !important;
  -webkit-text-fill-color: var(--assistant-chat-icon, #5f6368) !important;
  stroke: currentColor !important;
  fill: none !important;
  background-image: none !important;
  filter: none !important;
}
html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create
:is(#projectHomeChatNav#projectHomeChatNav, #projectHomeConversationNav#projectHomeConversationNav,
  .project-home-chat-topbar, #assistantDrawer#assistantDrawer.embedded,
  #assistantQuickToolsPanel, #assistantAddMenu) .fluent-icon {
  background: var(--assistant-chat-icon, #5f6368) !important;
  background-color: var(--assistant-chat-icon, #5f6368) !important;
  mask-image: var(--fluent-icon-regular) !important;
}

/* Keep the work mode icon language consistent with chat mode. The brand mark
   remains untouched; controls use one neutral line colour in both themes. */
html:root body[data-project-home-mode="work"] #appShell#appShell #step-create#step-create
:is(.project-home-mode-switch, .project-home-nav, .project-home-work,
  .project-home-quick-actions, .project-home-dashboard-rail, [data-workspace-tool],
  .quick-action-icon, #assistantDrawer#assistantDrawer)
:is(svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon) {
  color: var(--assistant-chat-icon, #5f6368) !important;
  -webkit-text-fill-color: var(--assistant-chat-icon, #5f6368) !important;
  stroke: currentColor !important;
  fill: none !important;
  background-image: none !important;
  filter: none !important;
}
html:root body[data-project-home-mode="work"] #appShell#appShell #step-create#step-create
:is(.project-home-mode-switch, .project-home-nav, .project-home-work,
  .project-home-quick-actions, .project-home-dashboard-rail, [data-workspace-tool],
  .quick-action-icon, #assistantDrawer#assistantDrawer)
:is(.fluent-icon-shell, .fluent-icon) {
  background: var(--assistant-chat-icon, #5f6368) !important;
  background-color: var(--assistant-chat-icon, #5f6368) !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}
html:root[data-theme="dark"] body[data-project-home-mode="work"] {
  --assistant-chat-icon: #b4b4b4;
}

/* Result actions use the same neutral treatment in both modes. Older release
   rules deliberately made “生成可编辑” blue; keep it visually primary with
   a monochrome contrast instead, so the action row does not break the clean
   GPT/Codex palette. */
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create
:is(.assistant-generated-image-actions, .assistant-image-edit-actions,
  .assistant-design-download-actions, .assistant-workbench-action-list,
  .assistant-editable-retry-actions, .assistant-delivery-preview)
:is(button, summary, a, .primary, .assistant-generated-image-editable,
  .assistant-generated-image-edit) {
  background: var(--assistant-result-action-bg, #ffffff) !important;
  background-color: var(--assistant-result-action-bg, #ffffff) !important;
  background-image: none !important;
  border-color: var(--assistant-result-action-line, #d9d9d9) !important;
  color: var(--assistant-result-action-text, #2d2d2d) !important;
  box-shadow: none !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create
:is(.assistant-generated-image-actions, .assistant-image-edit-actions,
  .assistant-design-download-actions, .assistant-workbench-action-list,
  .assistant-editable-retry-actions, .assistant-delivery-preview)
:is(button, summary, a, .primary, .assistant-generated-image-editable,
  .assistant-generated-image-edit):is(:hover, :focus-visible, [aria-expanded="true"]) {
  background: var(--assistant-result-action-hover, #f2f2f2) !important;
  background-color: var(--assistant-result-action-hover, #f2f2f2) !important;
  border-color: var(--assistant-result-action-line, #d9d9d9) !important;
  color: var(--assistant-result-action-text, #2d2d2d) !important;
  outline: none !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create
:is(.assistant-generated-image-actions, .assistant-image-edit-actions,
  .assistant-design-download-actions, .assistant-workbench-action-list,
  .assistant-editable-retry-actions, .assistant-delivery-preview)
:is(.assistant-generated-image-editable, .assistant-generated-image-edit.primary,
  .assistant-image-edit-actions > .primary, .assistant-design-download-actions .primary) {
  background: var(--assistant-result-primary-bg, #2f2f2f) !important;
  background-color: var(--assistant-result-primary-bg, #2f2f2f) !important;
  border-color: var(--assistant-result-primary-bg, #2f2f2f) !important;
  color: var(--assistant-result-primary-text, #ffffff) !important;
  font-weight: 600 !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create
:is(.assistant-generated-image-actions, .assistant-image-edit-actions,
  .assistant-design-download-actions, .assistant-workbench-action-list,
  .assistant-editable-retry-actions, .assistant-delivery-preview)
:is(.assistant-generated-image-editable, .assistant-generated-image-edit.primary,
  .assistant-image-edit-actions > .primary, .assistant-design-download-actions .primary):is(:hover, :focus-visible, [aria-expanded="true"]) {
  background: var(--assistant-result-primary-hover, #1f1f1f) !important;
  background-color: var(--assistant-result-primary-hover, #1f1f1f) !important;
  border-color: var(--assistant-result-primary-hover, #1f1f1f) !important;
  color: var(--assistant-result-primary-text, #ffffff) !important;
}

/* Work mode still had a few legacy blue fills outside the result row. Remove
   those fills too, while leaving the brand logo artwork untouched. */
html:root body[data-project-home-mode="work"] #step-create
:is(#newProjectBtn, .project-home-primary, .project-home-nav-item.active,
  #assistantSidePdfBtn, #assistantPromptEnhanceBtn,
  .assistant-task-card .assistant-primary-next-action,
  .assistant-design-download-actions a,
  .assistant-editable-download, .assistant-editable-convert-options button,
  .assistant-conversion-review-card > button, .assistant-conversion-review-dialog button.primary,
  .assistant-ip-buddy-status, .dashboard-notice-dot.is-blue) {
  background: var(--assistant-work-action-bg, #2f2f2f) !important;
  background-color: var(--assistant-work-action-bg, #2f2f2f) !important;
  background-image: none !important;
  border-color: var(--assistant-work-action-line, #d9d9d9) !important;
  color: var(--assistant-work-action-text, #ffffff) !important;
  box-shadow: none !important;
}
html:root[data-theme="dark"] body[data-project-home-mode="work"] {
  --assistant-work-action-bg: #2D2D2F;
  --assistant-work-action-line: #454547;
  --assistant-work-action-text: #C4C5C5;
}
html:root body[data-project-home-mode="work"] #step-create
:is(#newProjectBtn, .project-home-primary, .project-home-nav-item.active,
  #assistantSidePdfBtn, #assistantPromptEnhanceBtn,
  .assistant-task-card .assistant-primary-next-action,
  .assistant-design-download-actions a,
  .assistant-editable-download, .assistant-editable-convert-options button,
  .assistant-conversion-review-card > button, .assistant-conversion-review-dialog button.primary):is(:hover, :focus-visible) {
  background: var(--assistant-work-action-hover, #1f1f1f) !important;
  background-color: var(--assistant-work-action-hover, #1f1f1f) !important;
  background-image: none !important;
  border-color: var(--assistant-work-action-hover, #1f1f1f) !important;
  color: var(--assistant-work-action-text, #ffffff) !important;
}
html:root body[data-project-home-mode="work"] #step-create
:is(.primary, #assistantPromptEnhanceBtn, .dashboard-week > *, .dashboard-week button) {
  background: var(--assistant-work-action-bg, #2f2f2f) !important;
  background-color: var(--assistant-work-action-bg, #2f2f2f) !important;
  background-image: none !important;
  border-color: var(--assistant-work-action-line, #d9d9d9) !important;
  color: var(--assistant-work-action-text, #ffffff) !important;
  box-shadow: none !important;
}
html:root body[data-project-home-mode="work"] #step-create
:is(.primary, #assistantPromptEnhanceBtn, .dashboard-week > *, .dashboard-week button):is(:hover, :focus-visible) {
  background: var(--assistant-work-action-hover, #1f1f1f) !important;
  background-color: var(--assistant-work-action-hover, #1f1f1f) !important;
  background-image: none !important;
  border-color: var(--assistant-work-action-hover, #1f1f1f) !important;
  color: var(--assistant-work-action-text, #ffffff) !important;
}
html:root body[data-project-home-mode="work"] #step-create
#assistantDrawer#assistantDrawer #assistantComposer#assistantComposer
#assistantSecondaryTools#assistantSecondaryTools #assistantPromptEnhanceBtn#assistantPromptEnhanceBtn,
html:root body[data-project-home-mode="work"] #step-create
#assistantDrawer#assistantDrawer #assistantComposer#assistantComposer
#assistantSecondaryTools#assistantSecondaryTools #assistantImageSettingsBtn#assistantImageSettingsBtn {
  background: var(--assistant-work-action-bg, #2f2f2f) !important;
  background-color: var(--assistant-work-action-bg, #2f2f2f) !important;
  background-image: none !important;
  border-color: var(--assistant-work-action-line, #d9d9d9) !important;
  color: var(--assistant-work-action-text, #ffffff) !important;
  box-shadow: none !important;
}
html:root[data-theme="dark"] body[data-project-home-mode="work"] {
  --assistant-work-action-hover: #38383A;
}

/* One shared dark surface for every dark button/card-like control. This is
   the reference style from the supplied screenshot: #2D2D2F fill, soft
   rounded corners, muted light text, no gradient. */
html:root[data-theme="dark"] body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create
:is(
  button.primary, button[class*="primary"], a.primary,
  .assistant-generated-image-actions button,
  .assistant-generated-image-actions summary,
  .assistant-image-edit-actions > *,
  .assistant-design-download-actions > *,
  .assistant-workbench-action-list > *,
  .assistant-editable-retry-actions > *,
  .assistant-delivery-preview button,
  .assistant-task-card .assistant-primary-next-action,
  .assistant-work-tools-group button,
  .assistant-composer-tools > button,
  #assistantPromptEnhanceBtn, #assistantImageSettingsBtn,
  #assistantQuickToolsBtn, #assistantModeTrigger,
  #assistantCopyModeTrigger, #assistantAddBtn, #assistantVoiceInputBtn,
  #assistantSendBtn, .project-home-primary, .project-home-secondary,
  .project-home-nav-item.active, #newProjectBtn, #assistantSidePdfBtn
) {
  background: #2D2D2F !important;
  background-color: #2D2D2F !important;
  background-image: none !important;
  border-color: #454547 !important;
  color: #C4C5C5 !important;
  box-shadow: none !important;
}
html:root[data-theme="dark"] body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create {
  --assistant-result-primary-bg: #2d2d2f;
  --assistant-result-primary-hover: #38383a;
  --assistant-result-primary-text: #c4c5c5;
  --assistant-work-action-bg: #2d2d2f;
  --assistant-work-action-hover: #38383a;
  --assistant-work-action-line: #454547;
  --assistant-work-action-text: #c4c5c5;
}
html:root[data-theme="dark"] body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create
:is(.project-home-nav-item.active, .assistant-work-tools, .assistant-work-tools-body,
  .assistant-work-tools-group button, .project-home-quick-actions > *,
  .assistant-task-card, .assistant-execution-controls, .assistant-execution-actions,
  .assistant-side-workspace-status, .assistant-side-tool, .assistant-context-block,
  .assistant-service-notice, .assistant-status, .assistant-message-content,
  .assistant-generated-result, .assistant-generated-image-card) {
  background-image: none !important;
}
html:root[data-theme="dark"] body[data-project-home-mode="work"] #step-create
:is(.project-home-nav-item.active, .assistant-execution-confirm-btn,
  #assistantExecutionConfirmBtn, .smart-create-target-menu button.active,
  .new-project-action-buttons .primary-btn, .project-home-quick-actions > *) {
  background: #2d2d2f !important;
  background-color: #2d2d2f !important;
  background-image: none !important;
  border-color: #454547 !important;
  color: #c4c5c5 !important;
  box-shadow: none !important;
}
html:root[data-theme="dark"] body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create
:is(
  button.primary, button[class*="primary"], a.primary,
  .assistant-generated-image-actions button,
  .assistant-generated-image-actions summary,
  .assistant-image-edit-actions > *,
  .assistant-design-download-actions > *,
  .assistant-workbench-action-list > *,
  .assistant-editable-retry-actions > *,
  .assistant-delivery-preview button,
  .assistant-task-card .assistant-primary-next-action,
  .assistant-work-tools-group button,
  .assistant-composer-tools > button,
  #assistantPromptEnhanceBtn, #assistantImageSettingsBtn,
  #assistantQuickToolsBtn, #assistantModeTrigger,
  #assistantCopyModeTrigger, #assistantAddBtn, #assistantVoiceInputBtn,
  #assistantSendBtn, .project-home-primary, .project-home-secondary,
  .project-home-nav-item.active, #newProjectBtn, #assistantSidePdfBtn
):is(:hover, :focus-visible, [aria-expanded="true"], [aria-selected="true"], .active) {
  background: #38383A !important;
  background-color: #38383A !important;
  background-image: none !important;
  border-color: #454547 !important;
  color: #C4C5C5 !important;
  box-shadow: none !important;
}
html:root[data-theme="dark"] body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) {
  --assistant-result-action-bg: #2D2D2F;
  --assistant-result-action-hover: #38383A;
  --assistant-result-action-line: #454547;
  --assistant-result-action-text: #C4C5C5;
  --assistant-result-primary-bg: #2D2D2F;
  --assistant-result-primary-hover: #38383A;
  --assistant-result-primary-text: #C4C5C5;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create
:is(.assistant-generated-image-actions, .assistant-image-edit-actions,
  .assistant-design-download-actions, .assistant-workbench-action-list,
  .assistant-editable-retry-actions, .assistant-delivery-preview)
:is(button, summary, a) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide,
  .fluent-icon-shell, .fluent-icon) {
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Descendant form of the result-action reset. These selectors intentionally
   target the button inside each action group; the earlier grouped rule owns
   the shared variables while this pass overrides legacy !important fills. */
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create
:is(.assistant-generated-image-actions, .assistant-image-edit-actions,
  .assistant-design-download-actions, .assistant-workbench-action-list,
  .assistant-editable-retry-actions, .assistant-delivery-preview) > :is(button, summary, a),
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create
:is(.assistant-generated-image-actions, .assistant-image-edit-actions,
  .assistant-design-download-actions, .assistant-workbench-action-list,
  .assistant-editable-retry-actions, .assistant-delivery-preview)
:is(.assistant-generated-image-editable, .assistant-generated-image-edit) {
  background: var(--assistant-result-action-bg, #ffffff) !important;
  background-color: var(--assistant-result-action-bg, #ffffff) !important;
  background-image: none !important;
  border-color: var(--assistant-result-action-line, #d9d9d9) !important;
  color: var(--assistant-result-action-text, #2d2d2d) !important;
  box-shadow: none !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create
:is(.assistant-generated-image-actions, .assistant-image-edit-actions,
  .assistant-design-download-actions, .assistant-workbench-action-list,
  .assistant-editable-retry-actions, .assistant-delivery-preview)
:is(.assistant-generated-image-editable, .assistant-generated-image-edit.primary,
  .assistant-image-edit-actions > .primary, .assistant-design-download-actions .primary) {
  background: var(--assistant-result-primary-bg, #2f2f2f) !important;
  background-color: var(--assistant-result-primary-bg, #2f2f2f) !important;
  border-color: var(--assistant-result-primary-bg, #2f2f2f) !important;
  color: var(--assistant-result-primary-text, #ffffff) !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create
:is(.assistant-generated-image-actions, .assistant-image-edit-actions,
  .assistant-design-download-actions, .assistant-workbench-action-list,
  .assistant-editable-retry-actions, .assistant-delivery-preview)
:is(button, summary, a):is(:hover, :focus-visible, [aria-expanded="true"]) {
  background: var(--assistant-result-action-hover, #f2f2f2) !important;
  background-color: var(--assistant-result-action-hover, #f2f2f2) !important;
  border-color: var(--assistant-result-action-line, #d9d9d9) !important;
  color: var(--assistant-result-action-text, #2d2d2d) !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create
:is(.assistant-generated-image-actions, .assistant-image-edit-actions,
  .assistant-design-download-actions, .assistant-workbench-action-list,
  .assistant-editable-retry-actions, .assistant-delivery-preview)
:is(.assistant-generated-image-editable, .assistant-generated-image-edit.primary,
  .assistant-image-edit-actions > .primary, .assistant-design-download-actions .primary):is(:hover, :focus-visible, [aria-expanded="true"]) {
  background: var(--assistant-result-primary-hover, #1f1f1f) !important;
  background-color: var(--assistant-result-primary-hover, #1f1f1f) !important;
  border-color: var(--assistant-result-primary-hover, #1f1f1f) !important;
  color: var(--assistant-result-primary-text, #ffffff) !important;
}

/* Final flat action palette: remove the remaining Klein-blue/bright-primary
   fills from chat and work controls. These values are deliberately shared so
   result actions look identical in both themes and modes. */
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create {
  --assistant-flat-action-bg: #2D2D2F;
  --assistant-flat-action-hover: #38383A;
  --assistant-flat-action-line: #454547;
  --assistant-flat-action-text: #C4C5C5;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create :is(
  .assistant-generated-image-actions .assistant-generated-image-editable,
  .assistant-generated-image-card .assistant-generated-image-edit,
  .assistant-design-download-actions a.assistant-design-pptx-download,
  .assistant-design-download-actions a.primary,
  .assistant-stage-conversation-result a.assistant-design-pptx-download,
  .assistant-task-card .assistant-primary-next-action,
  .assistant-editable-convert-trigger,
  .assistant-editable-convert-options button,
  .assistant-editable-download,
  .assistant-editable-retry-actions > button,
  .assistant-editable-retry-model > summary,
  .assistant-conversion-review-card > button,
  .assistant-conversion-review-dialog button.primary,
  .assistant-design-repair-form button,
  #assistantPromptEnhanceAdoptBtn
) {
  background: var(--assistant-flat-action-bg) !important;
  background-color: var(--assistant-flat-action-bg) !important;
  background-image: none !important;
  border-color: var(--assistant-flat-action-line) !important;
  color: var(--assistant-flat-action-text) !important;
  box-shadow: none !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create :is(
  .assistant-generated-image-actions .assistant-generated-image-editable,
  .assistant-generated-image-card .assistant-generated-image-edit,
  .assistant-design-download-actions a.assistant-design-pptx-download,
  .assistant-design-download-actions a.primary,
  .assistant-stage-conversation-result a.assistant-design-pptx-download,
  .assistant-task-card .assistant-primary-next-action,
  .assistant-editable-convert-trigger,
  .assistant-editable-convert-options button,
  .assistant-editable-download,
  .assistant-editable-retry-actions > button,
  .assistant-editable-retry-model > summary,
  .assistant-conversion-review-card > button,
  .assistant-conversion-review-dialog button.primary,
  .assistant-design-repair-form button,
  #assistantPromptEnhanceAdoptBtn
):is(:hover, :focus-visible, [aria-expanded="true"]) {
  background: var(--assistant-flat-action-hover) !important;
  background-color: var(--assistant-flat-action-hover) !important;
  background-image: none !important;
  border-color: var(--assistant-flat-action-line) !important;
  color: var(--assistant-flat-action-text) !important;
  outline: none !important;
}
/* The send/quick-action controls are primary actions too; keep them flat and
   neutral while preserving their icons and hit areas. */
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create :is(
  #assistantDrawer #assistantComposer > #assistantSendBtn,
  #assistantDrawer #assistantComposer > #assistantImageSettingsBtn,
  #assistantDrawer #assistantComposer > #assistantPromptEnhanceBtn
) {
  background: var(--assistant-flat-action-bg) !important;
  background-color: var(--assistant-flat-action-bg) !important;
  background-image: none !important;
  border-color: var(--assistant-flat-action-line) !important;
  color: var(--assistant-flat-action-text) !important;
  box-shadow: none !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create :is(
  #assistantDrawer #assistantComposer > #assistantSendBtn,
  #assistantDrawer #assistantComposer > #assistantImageSettingsBtn,
  #assistantDrawer #assistantComposer > #assistantPromptEnhanceBtn
):is(:hover, :focus-visible, [aria-expanded="true"]) {
  background: var(--assistant-flat-action-hover) !important;
  background-color: var(--assistant-flat-action-hover) !important;
  background-image: none !important;
  border-color: var(--assistant-flat-action-line) !important;
  color: var(--assistant-flat-action-text) !important;
  box-shadow: none !important;
}

/* -------------------------------------------------------------------------
   Reference dark surface lock (screenshot: #2D2D2F)

   Any control that intentionally uses a filled dark surface shares one quiet
   neutral treatment in both chat and work modes. Page backgrounds and brand
   artwork remain theme-owned; this lock only covers action/control surfaces.
   ------------------------------------------------------------------------- */
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create {
  --assistant-neutral-action-bg: #2D2D2F;
  --assistant-neutral-action-hover: #38383A;
  --assistant-neutral-action-line: #454547;
  --assistant-neutral-action-text: #C4C5C5;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create :is(
  .assistant-generated-image-actions > button,
  .assistant-generated-image-actions > .assistant-generated-image-editable-menu > summary,
  .assistant-image-edit-actions > .primary,
  .assistant-design-download-actions > .primary,
  .assistant-workbench-action-list > *,
  .assistant-editable-retry-actions > .primary,
  .assistant-delivery-preview > footer button.primary,
  .assistant-delivery-preview-prompt button.primary,
  .assistant-work-tools-group button,
  .assistant-task-card .assistant-primary-next-action,
  .assistant-execution-confirm-btn,
  #assistantExecutionConfirmBtn,
  #newProjectBtn,
  .project-home-primary,
  .assistant-editable-download,
  .assistant-editable-convert-options button,
  .assistant-conversion-review-dialog button.primary,
  #assistantSendBtn
) {
  background: var(--assistant-neutral-action-bg) !important;
  background-color: var(--assistant-neutral-action-bg) !important;
  background-image: none !important;
  border-color: var(--assistant-neutral-action-line) !important;
  color: var(--assistant-neutral-action-text) !important;
  -webkit-text-fill-color: var(--assistant-neutral-action-text) !important;
  box-shadow: none !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create :is(
  .assistant-generated-image-actions > button,
  .assistant-generated-image-actions > .assistant-generated-image-editable-menu > summary,
  .assistant-image-edit-actions > .primary,
  .assistant-design-download-actions > .primary,
  .assistant-workbench-action-list > *,
  .assistant-editable-retry-actions > .primary,
  .assistant-delivery-preview > footer button.primary,
  .assistant-delivery-preview-prompt button.primary,
  .assistant-work-tools-group button,
  .assistant-task-card .assistant-primary-next-action,
  .assistant-execution-confirm-btn,
  #assistantExecutionConfirmBtn,
  #newProjectBtn,
  .project-home-primary,
  .assistant-editable-download,
  .assistant-editable-convert-options button,
  .assistant-conversion-review-dialog button.primary,
  #assistantSendBtn
):is(:hover, :focus-visible, [aria-expanded="true"], [aria-selected="true"], .active) {
  background: var(--assistant-neutral-action-hover) !important;
  background-color: var(--assistant-neutral-action-hover) !important;
  background-image: none !important;
  border-color: var(--assistant-neutral-action-line) !important;
  color: #F0F0F0 !important;
  -webkit-text-fill-color: #F0F0F0 !important;
  box-shadow: none !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create :is(
  .assistant-generated-image-actions > button,
  .assistant-generated-image-actions > .assistant-generated-image-editable-menu > summary,
  .assistant-image-edit-actions > .primary,
  .assistant-design-download-actions > .primary,
  .assistant-workbench-action-list > *,
  .assistant-editable-retry-actions > .primary,
  .assistant-delivery-preview > footer button.primary,
  .assistant-delivery-preview-prompt button.primary,
  .assistant-work-tools-group button,
  .assistant-task-card .assistant-primary-next-action,
  .assistant-execution-confirm-btn,
  #assistantExecutionConfirmBtn,
  #newProjectBtn,
  .project-home-primary,
  .assistant-editable-download,
  .assistant-editable-convert-options button,
  .assistant-conversion-review-dialog button.primary,
  #assistantSendBtn
) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide, .fluent-icon-shell, .fluent-icon) {
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
  background-image: none !important;
}
html:root[data-theme="dark"] body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create {
  --assistant-result-action-bg: #2D2D2F;
  --assistant-result-action-hover: #38383A;
  --assistant-result-action-line: #454547;
  --assistant-result-action-text: #C4C5C5;
  --assistant-result-primary-bg: #2D2D2F;
  --assistant-result-primary-hover: #38383A;
  --assistant-result-primary-text: #C4C5C5;
  --assistant-work-action-bg: #2D2D2F;
  --assistant-work-action-hover: #38383A;
  --assistant-work-action-line: #454547;
  --assistant-work-action-text: #C4C5C5;
}

/* Last-word overrides for legacy high-specificity primary controls. */
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #appShell#appShell
#step-create#step-create #assistantDrawer#assistantDrawer
#assistantComposer#assistantComposer > #assistantSendBtn#assistantSendBtn,
html:root[data-theme="dark"] body[data-project-home-mode="work"] #appShell#appShell
#step-create#step-create #assistantDrawer#assistantDrawer
#assistantComposer#assistantComposer > #assistantSendBtn#assistantSendBtn,
html:root[data-theme="dark"] body:is([data-project-home-mode="chat"], [data-project-home-mode="work"])
#appShell#appShell #step-create#step-create #createProjectBtn#createProjectBtn {
  background: #2D2D2F !important;
  background-color: #2D2D2F !important;
  background-image: none !important;
  border-color: #454547 !important;
  color: #C4C5C5 !important;
  -webkit-text-fill-color: #C4C5C5 !important;
  box-shadow: none !important;
}
html:root[data-theme="dark"] body:is([data-project-home-mode="chat"], [data-project-home-mode="work"])
#appShell#appShell #step-create#step-create #assistantDrawer#assistantDrawer
#assistantComposer#assistantComposer > #assistantSendBtn#assistantSendBtn:is(:hover, :focus-visible),
html:root[data-theme="dark"] body:is([data-project-home-mode="chat"], [data-project-home-mode="work"])
#appShell#appShell #step-create#step-create #createProjectBtn#createProjectBtn:is(:hover, :focus-visible) {
  background: #38383A !important;
  background-color: #38383A !important;
  background-image: none !important;
  border-color: #454547 !important;
  color: #F0F0F0 !important;
  -webkit-text-fill-color: #F0F0F0 !important;
}

/* Some project-panel actions live outside #step-create, so keep a direct
   selector for them as well. */
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"])
#createProjectBtn#createProjectBtn,
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"])
.new-project-action-buttons > .primary-btn {
  background: #2D2D2F !important;
  background-color: #2D2D2F !important;
  background-image: none !important;
  border-color: #454547 !important;
  color: #C4C5C5 !important;
  -webkit-text-fill-color: #C4C5C5 !important;
  box-shadow: none !important;
}
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"])
#createProjectBtn#createProjectBtn:is(:hover, :focus-visible),
html:root body:is([data-project-home-mode="chat"], [data-project-home-mode="work"])
.new-project-action-buttons > .primary-btn:is(:hover, :focus-visible) {
  background: #38383A !important;
  background-color: #38383A !important;
  background-image: none !important;
  border-color: #454547 !important;
  color: #F0F0F0 !important;
  -webkit-text-fill-color: #F0F0F0 !important;
}

html:root[data-theme="dark"] body:is([data-project-home-mode="chat"], [data-project-home-mode="work"])
#appShell#appShell #step-create#step-create #assistantDrawer#assistantDrawer
#assistantComposer#assistantComposer :is(
  #assistantAddBtn#assistantAddBtn, #assistantVoiceInputBtn#assistantVoiceInputBtn,
  #assistantImageSettingsBtn#assistantImageSettingsBtn, #assistantSendBtn#assistantSendBtn
) {
  background: #2D2D2F !important;
  background-color: #2D2D2F !important;
  background-image: none !important;
  border-color: #454547 !important;
  color: #C4C5C5 !important;
  -webkit-text-fill-color: #C4C5C5 !important;
  box-shadow: none !important;
}
html:root[data-theme="dark"] body:is([data-project-home-mode="chat"], [data-project-home-mode="work"])
#appShell#appShell #step-create#step-create #assistantDrawer#assistantDrawer
#assistantComposer#assistantComposer :is(
  #assistantAddBtn#assistantAddBtn, #assistantVoiceInputBtn#assistantVoiceInputBtn,
  #assistantImageSettingsBtn#assistantImageSettingsBtn, #assistantSendBtn#assistantSendBtn
):is(:hover, :focus-visible, [aria-expanded="true"]) {
  background: #38383A !important;
  background-color: #38383A !important;
  background-image: none !important;
  border-color: #454547 !important;
}

/* Structured result templates contain formatting newlines. They must not
   inherit the plain message's pre-wrap, which turns those newlines into
   large empty rows between every report and action. Keep real copy intact. */
html:root body[data-project-home-mode="chat"] #assistantMessages :is(
  .assistant-artifact-result,
  .assistant-generated-result
) {
  min-width: 0 !important;
  white-space: normal !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages :is(
  .assistant-artifact-result,
  .assistant-generated-result
) :is(
  header, footer, details, summary, dl, dt, dd, ul, ol, li,
  .assistant-artifact-quality-meta,
  .assistant-production-checks,
  .assistant-artifact-quick-retry,
  .assistant-delivery-preview-prompt,
  .assistant-sync-prompt,
  .assistant-work-tools
) {
  white-space: normal !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-generated-copy {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}

/* Fluent replaces the original i/svg with a span. Give either icon form the
   same explicit grid cell so the subtitle never falls into the icon column. */
html:root body[data-project-home-mode="chat"] #assistantMessages :is(
  .assistant-professional-review,
  .assistant-quality-gate,
  .assistant-design-strategy,
  .assistant-artifact-evidence,
  .assistant-brief-summary-details
) {
  min-width: 0 !important;
  margin: 6px 0 !important;
  padding: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages :is(
  .assistant-professional-review,
  .assistant-quality-gate,
  .assistant-design-strategy,
  .assistant-artifact-evidence,
  .assistant-brief-summary-details
) > summary {
  min-height: 42px !important;
  gap: 8px !important;
  padding: 8px 0 !important;
  white-space: normal !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages :is(
  .assistant-professional-review,
  .assistant-quality-gate,
  .assistant-design-strategy,
  .assistant-artifact-evidence,
  .assistant-brief-summary-details
) > summary > span:first-child {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 2px !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages :is(
  .assistant-professional-review,
  .assistant-quality-gate,
  .assistant-design-strategy,
  .assistant-artifact-evidence,
  .assistant-brief-summary-details
) > summary > span:first-child > :is(svg, i, span.fluent-icon-shell, span.fluent-icon) {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  align-self: center !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages :is(
  .assistant-professional-review,
  .assistant-quality-gate,
  .assistant-design-strategy,
  .assistant-artifact-evidence,
  .assistant-brief-summary-details
) > summary :is(strong, small) {
  grid-column: 2 !important;
  min-width: 0 !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages :is(
  .assistant-professional-review,
  .assistant-quality-gate,
  .assistant-design-strategy,
  .assistant-artifact-evidence,
  .assistant-brief-summary-details
) > summary strong {
  grid-row: 1 !important;
  font-size: var(--chat-tool-size, 13px) !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages :is(
  .assistant-professional-review,
  .assistant-quality-gate,
  .assistant-design-strategy,
  .assistant-artifact-evidence,
  .assistant-brief-summary-details
) > summary small {
  grid-row: 2 !important;
  font-size: var(--chat-meta-size, 11px) !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages :is(
  .assistant-professional-review-body,
  .assistant-quality-gate-body,
  .assistant-design-strategy-body,
  .assistant-brief-summary-body,
  .assistant-artifact-evidence > dl
) {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  gap: 8px !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages :is(
  .assistant-production-checks,
  .assistant-artifact-quick-retry,
  .assistant-delivery-preview-prompt,
  .assistant-sync-prompt
) {
  min-width: 0 !important;
  margin: 8px 0 !important;
  padding: 8px 0 !important;
  gap: 8px !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages :is(
  .assistant-production-checks > ul,
  .assistant-professional-review-checks,
  .assistant-quality-gate-body > ul,
  .assistant-design-strategy-pages,
  .assistant-design-strategy-columns
) {
  margin: 0 !important;
  row-gap: 6px !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages :is(
  .assistant-production-checks > ul > li,
  .assistant-professional-review-checks > li,
  .assistant-quality-gate-body > ul > li
) {
  min-width: 0 !important;
  padding: 4px 0 !important;
  row-gap: 2px !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-quality-meta {
  margin: 6px 0 !important;
  padding: 0 !important;
  gap: 5px !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-generated-image-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  margin: 8px 0 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-generated-image-actions
> :is(button, .assistant-generated-image-editable-menu) {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages :is(
  .assistant-generated-image-actions,
  .assistant-artifact-quick-retry,
  .assistant-artifact-retry-actions,
  .assistant-delivery-preview-prompt,
  .assistant-sync-prompt
) :is(button, summary, a) {
  min-height: 32px !important;
  padding: 6px 10px !important;
  font-size: var(--chat-meta-size, 11px) !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}
@media (max-width: 767px) {
  html:root body[data-project-home-mode="chat"] #assistantMessages :is(
    .assistant-production-checks > ul,
    .assistant-professional-review-checks,
    .assistant-quality-gate-body > ul,
    .assistant-design-strategy-columns,
    .assistant-artifact-evidence > dl
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* -------------------------------------------------------------------------
   Right workbench detail pass

   The rail is a secondary control surface. Its nested details stay quiet and
   collapsed until opened, while the result preview remains a real image (it
   is contained, never cropped). Keep all controls neutral in both themes so
   legacy blue/gradient rules cannot make the rail compete with the canvas.
   ------------------------------------------------------------------------- */
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench {
  --assistant-workbench-control-bg: #f1f1f1;
  --assistant-workbench-control-hover: #e7e7e7;
  --assistant-workbench-control-line: #d5d5d7;
  --assistant-workbench-control-text: #2d2d2f;
  --assistant-workbench-muted: #6b6b70;
  color: var(--chat-text) !important;
  background-image: none !important;
}
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantRightWorkbench {
  --assistant-workbench-control-bg: #2D2D2F;
  --assistant-workbench-control-hover: #38383A;
  --assistant-workbench-control-line: #454547;
  --assistant-workbench-control-text: #C4C5C5;
  --assistant-workbench-muted: #A7A7AB;
}

html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-workbench-subsection {
  display: block !important;
  min-width: 0 !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 7px !important;
  background: transparent !important;
  background-image: none !important;
  overflow: hidden !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-workbench-subsection > summary {
  display: flex !important;
  min-height: 32px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 7px !important;
  padding: 6px 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--chat-text) !important;
  cursor: pointer !important;
  list-style: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  white-space: normal !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-workbench-subsection > summary::-webkit-details-marker {
  display: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-workbench-subsection > summary:hover,
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-workbench-subsection > summary:focus-visible {
  background: color-mix(in srgb, var(--chat-text) 6%, transparent) !important;
  outline: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-workbench-subsection > summary > span:first-child {
  display: block !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-workbench-subsection > summary > span:first-child:has(> :is(svg, i, .fluent-icon-shell, .fluent-icon)) {
  display: grid !important;
  grid-template-columns: 15px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 6px !important;
  min-width: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-workbench-subsection > summary > span:first-child > :is(svg, i, .fluent-icon-shell, .fluent-icon) {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  color: var(--assistant-workbench-muted) !important;
  -webkit-text-fill-color: var(--assistant-workbench-muted) !important;
  stroke: currentColor !important;
  fill: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-workbench-subsection > summary > span:first-child > span {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-workbench-subsection > summary > :is(i, svg, .fluent-icon-shell, .fluent-icon):last-child {
  flex: 0 0 auto !important;
  width: 14px !important;
  height: 14px !important;
  color: var(--assistant-workbench-muted) !important;
  -webkit-text-fill-color: var(--assistant-workbench-muted) !important;
  stroke: currentColor !important;
  fill: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-workbench-subsection > div {
  display: grid !important;
  min-width: 0 !important;
  gap: 7px !important;
  padding: 7px 8px 8px !important;
  border-top: 1px solid var(--chat-line) !important;
  background: transparent !important;
  color: var(--assistant-workbench-muted) !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-workbench-subsection:not([open]) > div {
  display: none !important;
}

/* Workbench actions: short, neutral, full-width hit targets. */
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  :is(.assistant-workbench-action-list, .assistant-workbench-sync,
      .assistant-workbench-sync-primary, .assistant-generated-image-editable-options)
  :is(button, a, select) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 30px !important;
  border: 1px solid var(--assistant-workbench-control-line) !important;
  border-radius: 6px !important;
  background: var(--assistant-workbench-control-bg) !important;
  background-color: var(--assistant-workbench-control-bg) !important;
  background-image: none !important;
  color: var(--assistant-workbench-control-text) !important;
  -webkit-text-fill-color: var(--assistant-workbench-control-text) !important;
  box-shadow: none !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  :is(.assistant-workbench-action-list, .assistant-workbench-sync,
      .assistant-workbench-sync-primary, .assistant-generated-image-editable-options)
  :is(button, a, select):is(:hover, :focus-visible, [aria-expanded="true"]) {
  background: var(--assistant-workbench-control-hover) !important;
  background-color: var(--assistant-workbench-control-hover) !important;
  border-color: var(--assistant-workbench-control-line) !important;
  color: var(--assistant-workbench-control-text) !important;
  -webkit-text-fill-color: var(--assistant-workbench-control-text) !important;
  outline: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  :is(.assistant-workbench-action-list, .assistant-workbench-sync,
      .assistant-workbench-sync-primary) :is(button, a) {
  width: 100% !important;
  justify-content: flex-start !important;
  padding: 6px 8px !important;
  text-decoration: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  :is(.assistant-workbench-action-list, .assistant-workbench-sync,
      .assistant-workbench-sync-primary) :is(svg, i, .fluent-icon-shell, .fluent-icon) {
  flex: 0 0 auto !important;
  width: 13px !important;
  height: 13px !important;
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  :is(.assistant-workbench-action-list, .assistant-workbench-sync,
      .assistant-workbench-sync-primary) :is(button, a) > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* The editable chooser belongs inside the rail, so its options should not
   float above the image or get clipped by the rail edge. */
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-generated-image-editable-menu {
  position: relative !important;
  min-width: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-generated-image-editable-menu > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  min-height: 30px !important;
  padding: 6px 8px !important;
  list-style: none !important;
  cursor: pointer !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-generated-image-editable-menu > summary::-webkit-details-marker {
  display: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-generated-image-editable-options {
  position: static !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 5px !important;
  padding: 7px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--chat-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-generated-image-editable-menu:not([open]) > .assistant-generated-image-editable-options {
  display: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-generated-image-editable-options .assistant-editable-mode-field {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  color: var(--assistant-workbench-muted) !important;
  font-size: 9px !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-generated-image-editable-options .assistant-editable-mode-field select {
  min-height: 28px !important;
  width: 100% !important;
  background: var(--assistant-workbench-control-bg) !important;
  border-color: var(--assistant-workbench-control-line) !important;
  color: var(--assistant-workbench-control-text) !important;
  color-scheme: light !important;
}
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-generated-image-editable-options .assistant-editable-mode-field select {
  color-scheme: dark !important;
}

/* Scene preview stays useful at a glance and does not make the rail grow
   uncontrollably. Images retain their full aspect ratio and are never cropped. */
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-workbench-scene-previews {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-workbench-scene-previews figure {
  min-width: 0 !important;
  margin: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-workbench-scene-previews figure > button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 86px !important;
  min-height: 86px !important;
  padding: 3px !important;
  overflow: hidden !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-workbench-scene-previews img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-workbench-scene-previews figcaption {
  margin-top: 3px !important;
  overflow: hidden !important;
  color: var(--assistant-workbench-muted) !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-workbench-scene > div > p,
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-workbench-copy > div {
  margin: 0 !important;
  color: var(--assistant-workbench-muted) !important;
  overflow-wrap: anywhere !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
  .assistant-workbench-copy > div {
  max-height: 180px !important;
  overflow: auto !important;
  white-space: pre-wrap !important;
}

/* Chat history keeps one compact design result while the full controls live
   in the right rail. Never crop the source bitmap. */
html:root body[data-project-home-mode="chat"] #assistantMessages
  .assistant-artifact-result-compact {
  min-width: 0 !important;
  margin: 10px auto !important;
  padding: 0 !important;
  white-space: normal !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages
  .assistant-artifact-result-compact > header {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages
  .assistant-artifact-result-compact > header > div {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages
  .assistant-artifact-result-compact > header strong {
  overflow: hidden !important;
  color: var(--chat-text) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages
  .assistant-artifact-result-compact > header span {
  overflow: hidden !important;
  color: var(--chat-muted) !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages
  .assistant-artifact-result-compact > header em {
  flex: 0 0 auto !important;
  padding: 3px 6px !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: var(--chat-muted) !important;
  font-size: 9px !important;
  font-style: normal !important;
  white-space: nowrap !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages
  .assistant-artifact-result-compact .assistant-artifact-compact-grid {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages
  .assistant-artifact-result-compact .assistant-artifact-compact-grid .assistant-generated-image-card {
  width: min(100%, 240px) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages
  .assistant-artifact-result-compact .assistant-generated-image-preview {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 180px !important;
  max-height: 180px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages
  .assistant-artifact-result-compact .assistant-generated-image-preview img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 240px !important;
  max-height: 180px !important;
  object-fit: contain !important;
  object-position: center !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages
  .assistant-artifact-result-compact .assistant-artifact-compact-caption {
  display: grid !important;
  gap: 1px !important;
  min-width: 0 !important;
  margin-top: 4px !important;
  text-align: center !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages
  .assistant-artifact-result-compact .assistant-artifact-compact-caption :is(strong, small) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages
  .assistant-artifact-result-compact .assistant-artifact-compact-caption strong {
  color: var(--chat-text) !important;
  font-size: 10px !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages
  .assistant-artifact-result-compact .assistant-artifact-compact-caption small {
  color: var(--chat-muted) !important;
  font-size: 9px !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages
  .assistant-artifact-result-compact .assistant-artifact-compact-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 7px 0 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages
  .assistant-artifact-result-compact .assistant-artifact-compact-actions :is(button, a) {
  min-height: 30px !important;
  padding: 5px 9px !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--chat-text) !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages
  .assistant-artifact-result-compact .assistant-artifact-compact-actions :is(button, a):hover,
html:root body[data-project-home-mode="chat"] #assistantMessages
  .assistant-artifact-result-compact .assistant-artifact-compact-actions :is(button, a):focus-visible {
  background: color-mix(in srgb, var(--chat-text) 7%, transparent) !important;
  border-color: var(--chat-line) !important;
  outline: none !important;
}

@media (max-width: 767px) {
  html:root body[data-project-home-mode="chat"] #assistantRightWorkbench {
    --assistant-workbench-control-bg: #f1f1f1;
  }
  html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantRightWorkbench {
    --assistant-workbench-control-bg: #2D2D2F;
  }
  html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
    .assistant-workbench-scene-previews {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantRightWorkbench
    .assistant-workbench-scene-previews figure > button {
    height: 110px !important;
    min-height: 110px !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantMessages
    .assistant-artifact-result-compact .assistant-generated-image-preview {
    height: min(180px, 48vw) !important;
    max-height: 180px !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantMessages
    .assistant-artifact-result-compact .assistant-generated-image-preview img {
    max-height: min(180px, 48vw) !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantMessages
    .assistant-artifact-result-compact .assistant-artifact-compact-actions {
    flex-wrap: wrap !important;
  }
}

/* Compact history result cards: the transcript is a navigation list while the
   centered design focus owns the full-size artwork. */
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact {
  width: min(100%, 620px) !important;
  max-width: 620px !important;
  margin: 14px auto !important;
  padding: 14px 16px !important;
  white-space: normal !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact .assistant-artifact-compact-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin: 8px 0 10px !important;
  color: var(--chat-muted) !important;
  font-size: var(--chat-meta-size, 11px) !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact .assistant-artifact-compact-meta span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 3px 8px !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 999px !important;
  background: transparent !important;
  white-space: nowrap !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact .assistant-artifact-compact-grid {
  display: block !important;
  width: min(100%, 240px) !important;
  max-width: 240px !important;
  margin: 10px auto 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact .assistant-artifact-compact-grid .assistant-generated-image-card {
  width: 100% !important;
  max-width: 240px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact .assistant-generated-image-preview {
  width: 100% !important;
  max-width: 240px !important;
  max-height: 180px !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  border-radius: 9px !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact .assistant-generated-image-preview img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 180px !important;
  object-fit: contain !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact .assistant-artifact-compact-caption {
  display: grid !important;
  gap: 2px !important;
  margin-top: 6px !important;
  text-align: center !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact .assistant-artifact-compact-caption strong,
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact .assistant-artifact-compact-caption small {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact .assistant-artifact-compact-actions {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 12px 0 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact .assistant-artifact-compact-actions > button {
  min-height: 32px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--chat-text) !important;
  white-space: nowrap !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact .assistant-artifact-compact-actions > button.primary {
  background: var(--chat-text) !important;
  color: var(--chat-panel) !important;
}
@media (max-width: 767px) {
  html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact {
    max-width: calc(100% - 16px) !important;
    padding-inline: 10px !important;
  }
}

/* Newly generated workbench subsections stay quiet until opened. */
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-workbench-subsection {
  display: block !important;
  margin: 8px 0 !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 9px !important;
  background: transparent !important;
  overflow: hidden !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-workbench-subsection > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 36px !important;
  padding: 8px 10px !important;
  cursor: pointer !important;
  list-style: none !important;
  color: var(--chat-text) !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-workbench-subsection > summary::-webkit-details-marker { display: none !important; }
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-workbench-subsection > summary > span:first-child {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-workbench-subsection > summary > span:first-child > :is(svg, i, .fluent-icon-shell, .fluent-icon) {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-workbench-subsection > summary :is(svg, i, .fluent-icon-shell, .fluent-icon) {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-workbench-subsection > summary > :last-child {
  flex: 0 0 auto !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-workbench-subsection > div {
  display: grid !important;
  gap: 8px !important;
  padding: 8px 10px 10px !important;
  border-top: 1px solid var(--chat-line) !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-workbench-subsection > div > p {
  margin: 0 !important;
  color: var(--chat-muted) !important;
  font-size: var(--chat-meta-size, 11px) !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-workbench-subsection :is(button, a, select) {
  min-width: 0 !important;
  max-width: 100% !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-workbench-scene-previews {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-workbench-scene-previews figure {
  min-width: 0 !important;
  margin: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-workbench-scene-previews img {
  display: block !important;
  width: 100% !important;
  max-height: 130px !important;
  object-fit: contain !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-workbench-sync {
  display: grid !important;
  gap: 8px !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-workbench-sync-primary > * {
  width: 100% !important;
}

/* Keep the title and subtitle in the text column when a Fluent icon replaces
   the original i element inside workbench detail summaries. */
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-workbench-subsection > summary > span:first-child > :is(strong, small) {
  grid-column: 2 !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-workbench-subsection > summary > span:first-child > strong { grid-row: 1 !important; }
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench .assistant-workbench-subsection > summary > span:first-child > small { grid-row: 2 !important; }

/* Detail cards inside the workbench use their own semantic class names;
   apply the same two-column summary grid as the generic workbench folds. */
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench :is(
  .assistant-artifact-evidence,
  .assistant-quality-gate,
  .assistant-design-strategy,
  .assistant-professional-review,
  .assistant-brief-summary-details
) > summary > span:first-child {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 2px !important;
  min-width: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench :is(
  .assistant-artifact-evidence,
  .assistant-quality-gate,
  .assistant-design-strategy,
  .assistant-professional-review,
  .assistant-brief-summary-details
) > summary > span:first-child > :is(svg, i, span.fluent-icon-shell, span.fluent-icon) {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench :is(
  .assistant-artifact-evidence,
  .assistant-quality-gate,
  .assistant-design-strategy,
  .assistant-professional-review,
  .assistant-brief-summary-details
) > summary > span:first-child > :is(strong, small) {
  grid-column: 2 !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench :is(
  .assistant-artifact-evidence,
  .assistant-quality-gate,
  .assistant-design-strategy,
  .assistant-professional-review,
  .assistant-brief-summary-details
) > summary > span:first-child > strong { grid-row: 1 !important; }
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench :is(
  .assistant-artifact-evidence,
  .assistant-quality-gate,
  .assistant-design-strategy,
  .assistant-professional-review,
  .assistant-brief-summary-details
) > summary > span:first-child > small { grid-row: 2 !important; }

/* While browsing history, keep the focus header visible so the user can
   return to the centered canvas; the artwork stage itself stays hidden. */
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"][data-design-focus="true"][data-design-history-open="true"] > #assistantDesignFocus:not(.hidden) {
  display: block !important;
  flex: 0 0 auto !important;
  width: calc(100% - var(--assistant-right-rail-width)) !important;
  min-height: 0 !important;
  max-height: 54px !important;
  overflow: hidden !important;
  background: var(--chat-bg) !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"][data-design-focus="true"][data-design-history-open="true"] > #assistantDesignFocus .assistant-design-focus-stage,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"][data-design-focus="true"][data-design-history-open="true"] > #assistantDesignFocus .assistant-design-focus-footer {
  display: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"][data-design-focus="true"][data-design-history-open="true"] > #assistantDesignFocus .assistant-design-focus-bar {
  width: min(780px, calc(100% - 44px)) !important;
  min-height: 44px !important;
  margin-inline: auto !important;
}
@media (max-width: 767px) {
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"][data-design-focus="true"][data-design-history-open="true"] > #assistantDesignFocus {
    width: 100% !important;
  }
}

/* High-specificity history header override: the legacy conversation sheet hides
   the focus node wholesale; keep its compact history toggle visible at every
   font scale while only its canvas/footer are hidden. */
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-design-focus="true"][data-design-history-open="true"] > #assistantDesignFocus:not(.hidden) {
  display: block !important;
  flex: 0 0 auto !important;
  width: calc(100% - var(--assistant-right-rail-width)) !important;
  min-height: 0 !important;
  max-height: 54px !important;
  overflow: hidden !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-design-focus="true"][data-design-history-open="true"] > #assistantDesignFocus .assistant-design-focus-bar {
  display: flex !important;
  width: min(780px, calc(100% - 44px)) !important;
  min-height: 44px !important;
  margin-inline: auto !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-design-focus="true"][data-design-history-open="true"] > #assistantDesignFocus .assistant-design-focus-stage,
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-design-focus="true"][data-design-history-open="true"] > #assistantDesignFocus .assistant-design-focus-footer {
  display: none !important;
}

/* Keep the secondary line readable in the narrow tablet rail. */
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench :is(
  .assistant-artifact-evidence,
  .assistant-quality-gate,
  .assistant-design-strategy,
  .assistant-professional-review,
  .assistant-brief-summary-details,
  .assistant-workbench-subsection
) > summary > span:first-child > small {
  min-width: 80px !important;
}

/* Compact focus controls. Match the legacy repeated-ID specificity so the
   final layout wins, and keep typography connected to the local font setting. */
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) {
  justify-content: center !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) :is(.assistant-design-focus-bar, .assistant-design-focus-footer) {
  width: min(720px, calc(100% - 32px)) !important;
  margin-inline: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  flex-wrap: nowrap !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) .assistant-design-focus-bar {
  min-height: 36px !important;
  padding: 2px 0 !important;
  gap: 8px !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) .assistant-design-focus-heading {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) .assistant-design-focus-heading > strong {
  flex: 0 0 auto !important;
  font-size: var(--chat-copy-size) !important;
  font-weight: 600 !important;
  color: var(--chat-text) !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) .assistant-design-focus-meta {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--chat-muted) !important;
  font-size: calc(var(--chat-copy-size) - 1px) !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) .assistant-design-focus-history {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) .assistant-design-focus-stage {
  flex: 0 1 auto !important;
  padding: 6px 18px !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) .assistant-design-focus-footer {
  min-height: 38px !important;
  padding: 2px 0 4px !important;
  gap: 8px !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) .assistant-design-focus-nav {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 3px !important;
  min-height: 30px !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) .assistant-design-focus-nav > span {
  min-width: 38px !important;
  color: var(--chat-muted) !important;
  font-size: calc(var(--chat-copy-size) - 1px) !important;
  text-align: center !important;
  white-space: nowrap !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) button[data-assistant-focus-action] {
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 3px 7px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--chat-muted) !important;
  font-size: calc(var(--chat-copy-size) - 1px) !important;
  cursor: pointer !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) button[data-assistant-focus-action]:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--chat-text) 7%, transparent) !important;
  color: var(--chat-text) !important;
  outline: 1px solid var(--chat-line) !important;
  outline-offset: 1px !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) .assistant-design-focus-work {
  color: var(--chat-text) !important;
  white-space: nowrap !important;
}
@media (max-width: 560px) {
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) :is(.assistant-design-focus-bar, .assistant-design-focus-footer) {
    width: calc(100% - 8px) !important;
    gap: 4px !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) .assistant-design-focus-heading {
    gap: 5px !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) .assistant-design-focus-stage {
    padding: 6px 4px !important;
  }
}

/* Guided conversation hand-off: one quiet card for the next decision, while
   detailed editing controls remain in the workbench. */
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-conversation-flow-hint {
  width: min(100%, 620px) !important;
  margin: 12px auto !important;
  padding: 12px 14px !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--chat-text) !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-conversation-flow-hint > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 10px !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-conversation-flow-hint > header > div {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-conversation-flow-hint header strong {
  color: var(--chat-text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-conversation-flow-hint header span {
  color: var(--chat-muted) !important;
  font-size: 10px !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-conversation-flow-hint header em {
  flex: 0 0 auto !important;
  color: var(--chat-muted) !important;
  font-size: 10px !important;
  font-style: normal !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-conversation-flow-options,
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-conversation-flow-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-conversation-flow-options button,
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-conversation-flow-actions button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  border: 1px solid var(--chat-line) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--chat-text) !important;
  text-align: left !important;
  cursor: pointer !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-conversation-flow-options button {
  display: grid !important;
  flex: 1 1 150px !important;
  gap: 1px !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-conversation-flow-options button small {
  color: var(--chat-muted) !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-conversation-flow-actions button span {
  font-size: 11px !important;
}
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-conversation-flow-hint button:hover,
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-conversation-flow-hint button:focus-visible {
  background: color-mix(in srgb, var(--chat-text) 7%, transparent) !important;
  border-color: var(--chat-text) !important;
  outline: none !important;
}

/* The pending design keeps the dimensions used by the eventual image. */
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-card {
  width: min(100%, var(--assistant-generation-card-width, 720px)) !important;
  max-width: 720px !important;
  margin-inline: auto !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-canvases {
  display: block !important;
  width: 100% !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual:not(.has-image):not(.has-error) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 320px !important;
  max-height: min(64vh, 680px) !important;
  border-radius: 0 !important;
  background: #000 !important;
  background-color: #000 !important;
  isolation: isolate !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual:not(.has-image):not(.has-error) {
  background: #000 !important;
  background-color: #000 !important;
}

html:root:not([data-theme="dark"]) body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual:not(.has-image):not(.has-error) {
  background: #f7f7f8 !important;
  background-color: #f7f7f8 !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual-stage {
  top: 50% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  z-index: 2 !important;
  transform: translateY(-50%) !important;
  color: var(--chat-text, #d7d7d7) !important;
  font-size: clamp(20px, 2.3vw, 30px) !important;
  font-weight: 620 !important;
  letter-spacing: -.02em !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-percent {
  top: auto !important;
  right: 22px !important;
  bottom: 20px !important;
  left: auto !important;
  z-index: 2 !important;
  min-width: 58px !important;
  padding: 8px 12px !important;
  border: 1px solid color-mix(in srgb, var(--chat-text, #fff) 18%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--chat-text, #fff) 9%, transparent) !important;
  color: var(--chat-text, #fff) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual-label {
  display: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-track {
  display: block !important;
  right: 22px !important;
  bottom: 14px !important;
  left: 22px !important;
  z-index: 2 !important;
  height: 3px !important;
  opacity: .72 !important;
  background: #646464 !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-track > i {
  display: block !important;
  height: 100% !important;
  background: #7bc4ff !important;
  box-shadow: none !important;
  transition: width .4s ease !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual.has-image .assistant-image-generation-progress-track {
  display: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual.has-error .assistant-image-generation-progress-track {
  display: none !important;
}

/* Completed image output follows the same centered, natural-size canvas used
   by ChatGPT instead of the old 240 × 180 thumbnail. */
html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact .assistant-artifact-compact-grid {
  display: block !important;
  width: min(100%, 720px) !important;
  max-width: 720px !important;
  margin: 12px auto 0 !important;
}

html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact .assistant-artifact-compact-grid .assistant-generated-image-card {
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}

html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact .assistant-generated-image-preview {
  width: 100% !important;
  max-width: 720px !important;
  height: auto !important;
  max-height: min(68vh, 720px) !important;
  aspect-ratio: var(--assistant-artifact-aspect, 1 / 1) !important;
  border-radius: 12px !important;
  background: transparent !important;
}

html:root body[data-project-home-mode="chat"] #assistantMessages .assistant-artifact-result-compact .assistant-generated-image-preview img {
  width: 100% !important;
  height: 100% !important;
  max-width: 720px !important;
  max-height: min(68vh, 720px) !important;
  object-fit: contain !important;
  object-position: center !important;
}

html:root body[data-project-home-mode="chat"] #assistantMessages :is(.assistant-generated-result.image-output, .assistant-generated-result.assistant-design-image-output) {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin-inline: auto !important;
}

html:root body[data-project-home-mode="chat"] #assistantMessages :is(.assistant-generated-result.image-output, .assistant-generated-result.assistant-design-image-output) :is(.assistant-generated-image-grid, .image-output-grid) {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin-inline: auto !important;
}

html:root body[data-project-home-mode="chat"] #assistantMessages :is(.assistant-generated-result.image-output, .assistant-generated-result.assistant-design-image-output) :is(.assistant-generated-image-preview, .image-output-card .assistant-generated-image-preview) {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  height: auto !important;
  max-height: min(72vh, 760px) !important;
  aspect-ratio: var(--assistant-artifact-aspect, 1 / 1) !important;
  margin-inline: auto !important;
  border-radius: 12px !important;
}

html:root body[data-project-home-mode="chat"] #assistantMessages :is(.assistant-generated-result.image-output, .assistant-generated-result.assistant-design-image-output) :is(.assistant-generated-image-preview, .image-output-card .assistant-generated-image-preview) img {
  width: 100% !important;
  height: 100% !important;
  max-width: 760px !important;
  max-height: min(72vh, 760px) !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Loading and the finished design share the conversation surface. */
@layer assistantChrome {
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded #assistantImageGenerationProgress,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-card,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-canvases,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-preview {
  background: var(--chat-bg) !important;
  background-color: var(--chat-bg) !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual::before,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded #assistantImageGenerationProgress:is([data-status="running"], [data-status="queued"], [data-status="paused"]):not([data-completed="true"]) .assistant-image-generation-progress-visual:not(.has-image):not(.has-error):not(.is-completed)::before,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded #assistantImageGenerationProgress:is([data-status="running"], [data-status="queued"], [data-status="paused"]):not([data-completed="true"]) .assistant-image-generation-progress-visual:not(.has-image):not(.has-error):not(.is-completed)::after {
  position: absolute !important;
  display: block !important;
  inset: 58px 2% 66px !important;
  z-index: 0 !important;
  content: "" !important;
  pointer-events: none !important;
  background-color: transparent !important;
  background-size: 24px 24px !important;
  background-position: center !important;
  transform-origin: center !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded #assistantImageGenerationProgress:is([data-status="running"], [data-status="queued"], [data-status="paused"]):not([data-completed="true"]) .assistant-image-generation-progress-visual:not(.has-image):not(.has-error):not(.is-completed)::before {
  background-image: radial-gradient(circle, var(--neutral-accent, #c9a16b) 0 1px, transparent 1.5px) !important;
  opacity: .28 !important;
  mask-image: radial-gradient(ellipse at center, #000 28%, transparent 78%) !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded #assistantImageGenerationProgress:is([data-status="running"], [data-status="queued"], [data-status="paused"]):not([data-completed="true"]) .assistant-image-generation-progress-visual:not(.has-image):not(.has-error):not(.is-completed)::after {
  background-image: radial-gradient(circle, var(--neutral-accent, #c9a16b) 0 2.8px, transparent 3.2px) !important;
  opacity: .76;
  mask-image: radial-gradient(ellipse at 24% 36%, #000, transparent 29%), radial-gradient(ellipse at 70% 66%, #000, transparent 32%) !important;
  transform: translate3d(-8px, 4px, 0);
}
/* Two composited layers keep motion independent of progress DOM updates. */
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded #assistantImageGenerationProgress:is([data-status="running"], [data-status="queued"]):not([data-completed="true"]) .assistant-image-generation-progress-visual:not(.has-image):not(.has-error):not(.is-completed)::after {
  animation: assistant-accent-dot-wave 4.2s ease-in-out infinite !important;
}
@keyframes assistant-accent-dot-wave {
  0%, 100% { opacity: .48; transform: translate3d(-8px, 4px, 0); }
  50% { opacity: .9; transform: translate3d(8px, -4px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded #assistantImageGenerationProgress:is([data-status="running"], [data-status="queued"]):not([data-completed="true"]) .assistant-image-generation-progress-visual:not(.has-image):not(.has-error):not(.is-completed)::after {
    animation: none !important;
    transform: none !important;
  }
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-visual-stage {
  top: 16px !important;
  transform: none !important;
  color: var(--chat-text) !important;
  font-size: 20px !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-percent {
  border-color: var(--chat-line) !important;
  background: var(--chat-panel) !important;
  color: var(--neutral-accent, var(--chat-text)) !important;
  text-shadow: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-track {
  background: color-mix(in srgb, var(--chat-text) 32%, var(--chat-bg)) !important;
  opacity: 1 !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-track::after {
  background: var(--chat-text) !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded #assistantImageGenerationProgress .assistant-image-generation-progress-track > i {
  background: var(--chat-text) !important;
  box-shadow: none !important;
  transition: width .18s linear !important;
}
}


/* One centered transcript column, with a shared left edge for every turn. */
@layer assistantChrome {
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] {
    --assistant-transcript-width: 760px;
    --assistant-transcript-gutter: 24px;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantMessages {
    padding-inline: var(--assistant-transcript-gutter) !important;
    text-align: left !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantMessages > * {
    width: min(100%, var(--assistant-transcript-width)) !important;
    max-width: var(--assistant-transcript-width) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantMessages .assistant-message {
    display: block !important;
    padding: 0 !important;
    justify-content: flex-start !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantMessages .assistant-message-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    padding: 2px 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantMessages .assistant-turn-badge {
    display: block !important;
    width: fit-content !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    text-align: left !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantMessages .assistant-message :is(.assistant-generated-result, .assistant-stage-conversation-result) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantMessages :is(.assistant-artifact-compact-grid, .assistant-generated-image-grid, .image-output-grid, .assistant-generated-image-card, .assistant-generated-image-preview) {
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    justify-content: flex-start !important;
    justify-items: start !important;
    text-align: left !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantMessages :is(.assistant-generated-image-preview, .assistant-image-generation-preview) img {
    object-position: left center !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantMessages :is(.assistant-artifact-compact-caption, .assistant-artifact-compact-actions, .assistant-generated-image-actions, .assistant-failed-page-actions) {
    margin-inline: 0 !important;
    justify-content: flex-start !important;
    justify-items: start !important;
    text-align: left !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantMessages .assistant-message-actions {
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    justify-content: flex-start !important;
    align-self: flex-start !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantImageGenerationProgress .assistant-image-generation-progress-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    text-align: left !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantImageGenerationProgress .assistant-image-generation-progress-visual {
    width: min(100%, var(--assistant-generation-card-width, 720px)) !important;
    margin-inline: 0 !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantImageGenerationProgress .assistant-image-generation-progress-visual-stage {
    left: 0 !important;
    right: 0 !important;
    text-align: left !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantImageGenerationProgress .assistant-image-generation-progress-visual.has-error {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    align-items: start !important;
    justify-items: start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    gap: 10px !important;
    border-radius: 0 !important;
    text-align: left !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantImageGenerationProgress .has-error .assistant-image-generation-progress-visual-stage {
    display: none !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantImageGenerationProgress .has-error .assistant-image-generation-progress-percent {
    position: static !important;
    inset: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantImageGenerationProgress .assistant-image-generation-page-error {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--chat-muted) !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantImageGenerationProgress .assistant-image-generation-page-error summary {
    color: var(--chat-text) !important;
    font-size: 13px !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantMessages .assistant-artifact-error {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: start !important;
    gap: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--chat-muted) !important;
    box-shadow: none !important;
    text-align: left !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantMessages .assistant-artifact-error strong {
    color: var(--chat-text) !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantMessages .assistant-artifact-retry-actions {
    justify-content: flex-start !important;
    margin-inline: 0 !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantMessages .assistant-artifact-retry-actions button {
    background: transparent !important;
    border-color: var(--chat-line) !important;
    color: var(--chat-text) !important;
    box-shadow: none !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantDesignFocus {
    padding-inline: 0 !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable both-edges !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus :is(.assistant-design-focus-bar, .assistant-design-focus-stage, .assistant-design-focus-footer) {
    width: min(var(--assistant-transcript-width), calc(100% - var(--assistant-transcript-gutter) * 2)) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
    justify-items: start !important;
    text-align: left !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus .assistant-design-focus-stage {
    justify-content: flex-start !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus .assistant-design-focus-image {
    margin-inline: 0 !important;
    object-position: left center !important;
  }
  @media (max-width: 767px) {
    html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] {
      --assistant-transcript-gutter: 16px;
    }
    html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > #assistantDesignFocus {
      scrollbar-gutter: auto !important;
    }
  }
}

/* One-line message toolbar, including the low-frequency menu actions. */
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-actions {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  max-width: 100% !important;
  overflow: visible !important;
  scrollbar-width: none !important;
  white-space: nowrap !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-actions::-webkit-scrollbar { display: none !important; }
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-more-menu { flex: 0 0 auto !important; }
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-more-popover {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(92vw, 320px) !important;
  gap: 4px !important;
  padding: 6px !important;
  overflow: visible !important;
  scrollbar-width: none !important;
  white-space: nowrap !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-more-popover::-webkit-scrollbar { display: none !important; }
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-more-popover > button {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 76px !important;
  min-height: 30px !important;
  margin: 0 !important;
  white-space: nowrap !important;
}



/* Final compact-row guard: design focus controls stay one row when the
   window is narrow or the user increases the interface font size. */
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-design-focus-view-controls,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-design-focus-page-nav {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-design-focus-view-controls::-webkit-scrollbar,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-design-focus-page-nav::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-design-focus-view-controls > *,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-design-focus-page-nav > * {
  flex: 0 0 auto !important;
}

/* Final single-line guard for image focus controls.  Keep page navigation,
   zoom and work actions on one baseline; narrow viewports may scroll the row
   horizontally instead of stacking controls into uneven rows. */
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) :is(.assistant-design-focus-bar, .assistant-design-focus-footer),
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus :is(.assistant-design-focus-bar, .assistant-design-focus-footer) {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) .assistant-design-focus-nav,
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus .assistant-design-focus-nav {
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}
@media (max-width: 560px) {
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) .assistant-design-focus-footer,
  html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus .assistant-design-focus-footer {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded > #assistantDesignFocus:not(.hidden) .assistant-design-focus-footer::-webkit-scrollbar,
  html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantDesignFocus .assistant-design-focus-footer::-webkit-scrollbar {
    display: none !important;
  }
}

/* Keep the overflow menu inside the viewport on compact widths without
   reintroducing a vertical stack. */
@media (max-width: 560px) {
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-more-popover {
    left: auto !important;
    right: 0 !important;
    max-width: calc(100vw - 24px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-message-actions {
    max-width: calc(100vw - 24px) !important;
  }
}

/* -------------------------------------------------------------------------
   Neutral workbench presentation. Keep one surface and a consistent type /
   icon scale; older feature styles continue to own behavior, not color.
   ------------------------------------------------------------------------- */
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench {
  --assistant-workbench-control-bg: transparent;
  --assistant-workbench-control-hover: #f2f2f2;
  --assistant-workbench-control-line: #e3e3e3;
  --assistant-workbench-control-text: #444444;
  --assistant-workbench-muted: #737373;
  background: var(--chat-panel) !important;
  background-image: none !important;
  color: var(--chat-text) !important;
}
html:root[data-theme="dark"] body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench {
  --assistant-workbench-control-bg: #2d2d2f;
  --assistant-workbench-control-hover: #38383a;
  --assistant-workbench-control-line: #454547;
  --assistant-workbench-control-text: #d7d7d7;
  --assistant-workbench-muted: #a7a7a7;
}

/* Lucide and Fluent occupy the same cell. A Fluent shell must remain clear;
   only its masked child draws the glyph, otherwise it becomes a solid square. */
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench
  :is(svg, i[data-lucide], .fluent-icon-shell, .fluent-icon) {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
  color: var(--assistant-workbench-muted) !important;
  -webkit-text-fill-color: var(--assistant-workbench-muted) !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench :is(svg, svg *) {
  stroke: currentColor !important;
  fill: none !important;
  background: transparent !important;
  background-image: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench .fluent-icon-shell {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench .fluent-icon {
  background: var(--assistant-workbench-muted) !important;
  background-image: none !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}

/* State remains visible in words and small badges, without colored cards. */
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench
  :is(section, details, summary, header, footer, div, dl, dt, dd, ul, ol, li,
      .assistant-artifact-quality-meta span, .assistant-artifact-evidence-lock,
      .assistant-design-strategy-pages > li > b,
      .assistant-design-strategy-meta > span,
      .assistant-design-strategy-workflow > span,
      .assistant-design-strategy-route > div > span,
      .assistant-design-strategy-locks > div > span,
      summary > em, summary > em > b) {
  min-width: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--assistant-workbench-control-line) !important;
  box-shadow: none !important;
  color: var(--assistant-workbench-control-text) !important;
  -webkit-text-fill-color: var(--assistant-workbench-control-text) !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench
  :is(strong, b, h4, dt) {
  color: var(--chat-text) !important;
  -webkit-text-fill-color: var(--chat-text) !important;
  font-size: var(--chat-tool-size, 13px) !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench
  :is(p, small, li, dd, .assistant-workbench-meta-list, .assistant-workbench-status,
      .assistant-artifact-quality-meta, .assistant-design-strategy-meta > span,
      .assistant-design-strategy-workflow > span, summary > em,
      .assistant-artifact-evidence-lock) {
  color: var(--assistant-workbench-muted) !important;
  -webkit-text-fill-color: var(--assistant-workbench-muted) !important;
  font-size: var(--chat-meta-size, 11px) !important;
  line-height: 1.5 !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench
  :is(summary > em, .assistant-artifact-evidence-lock) {
  padding: 3px 6px !important;
  border: 1px solid var(--assistant-workbench-control-line) !important;
  border-radius: 5px !important;
  white-space: normal !important;
}

/* Primary groups use a separator. Nested folds have a single light outline. */
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench > .assistant-workbench-section {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--assistant-workbench-control-line) !important;
  border-radius: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench > .assistant-workbench-section > summary {
  min-height: 38px !important;
  padding: 9px 2px !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench > .assistant-workbench-section > div {
  padding: 2px 0 12px !important;
  gap: 7px !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench
  :is(.assistant-workbench-subsection, .assistant-work-tools, .assistant-artifact-evidence,
      .assistant-design-strategy, .assistant-quality-gate, .assistant-professional-review) {
  margin: 4px 0 !important;
  border: 1px solid var(--assistant-workbench-control-line) !important;
  border-radius: 7px !important;
  overflow: hidden !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  min-height: 34px !important;
  padding: 8px !important;
  font-size: var(--chat-tool-size, 13px) !important;
  line-height: 1.4 !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench summary > span:first-child {
  display: inline-flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  font-size: var(--chat-tool-size, 13px) !important;
  white-space: nowrap !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench summary > span:first-child:has(> strong) {
  display: grid !important;
  flex-basis: 100% !important;
  grid-template-columns: 16px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 8px !important;
  row-gap: 2px !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench summary > span:first-child > :is(svg, i, .fluent-icon-shell) {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench summary > span:first-child > strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench summary > span:first-child > small {
  grid-column: 2 !important;
  grid-row: 2 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench
  :is(.assistant-work-tools, .assistant-workbench-section, .assistant-workbench-subsection) > summary {
  flex-wrap: nowrap !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench
  :is(.assistant-artifact-quick-retry, .assistant-production-checks) {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench
  :is(.assistant-production-checks > ul, .assistant-design-strategy-meta,
      .assistant-design-strategy-pages, .assistant-design-strategy-columns,
      .assistant-professional-review-checks, .assistant-artifact-evidence > dl) {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Controls share one scale and remain legible with the large-font setting. */
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench :is(button, a, select, input, textarea) {
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 34px !important;
  padding: 6px 8px !important;
  border: 1px solid var(--assistant-workbench-control-line) !important;
  border-radius: 7px !important;
  background: var(--assistant-workbench-control-bg) !important;
  background-image: none !important;
  color: var(--assistant-workbench-control-text) !important;
  -webkit-text-fill-color: var(--assistant-workbench-control-text) !important;
  box-shadow: none !important;
  font-size: var(--chat-tool-size, 13px) !important;
  line-height: 1.35 !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench :is(button, a) > span:not(.fluent-icon-shell) {
  min-width: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench :is(button, a, select):is(:hover, :focus-visible) {
  background: var(--assistant-workbench-control-hover) !important;
  border-color: var(--assistant-workbench-control-line) !important;
  outline: 2px solid var(--assistant-workbench-control-line) !important;
  outline-offset: 1px !important;
}
html:root body[data-project-home-mode="chat"] #assistantRightWorkbench#assistantRightWorkbench .assistant-workbench-action-list > button {
  padding: 6px 3px !important;
  gap: 4px !important;
  font-size: var(--chat-meta-size, 11px) !important;
  white-space: nowrap !important;
}

/* One icon contract for application chrome. Layered important rules own the
   icon rendering ahead of legacy unlayered locks, without escalating IDs.
   Match only UI icon glyphs; artwork, logos and editable SVG remain intact. */
@layer assistantChrome {
  body :is(#appShell, #assistantDrawer, #settingsModal, #appAvatarMenu,
      #assistantAddMenu, #assistantQuickToolsPanel, #assistantImageSettingsPanel,
      #imageLightbox, .assistant-select-menu, .assistant-conversion-review-dialog)
    :is(svg[data-lucide], svg.lucide, i[data-lucide], .fluent-icon-shell[data-fluent-icon]) {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    flex: 0 0 16px !important;
    padding: 0 !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    background: transparent !important;
    background-image: none !important;
    filter: none !important;
  }
  body :is(#appShell, #assistantDrawer, #settingsModal, #appAvatarMenu,
      #assistantAddMenu, #assistantQuickToolsPanel, #assistantImageSettingsPanel,
      #imageLightbox, .assistant-select-menu, .assistant-conversion-review-dialog)
    :is(svg[data-lucide], svg.lucide, i[data-lucide]) {
    stroke: currentColor !important;
    stroke-width: 1.7px !important;
    fill: none !important;
  }
  body :is(#appShell, #assistantDrawer, #settingsModal, #appAvatarMenu,
      #assistantAddMenu, #assistantQuickToolsPanel, #assistantImageSettingsPanel,
      #imageLightbox, .assistant-select-menu, .assistant-conversion-review-dialog)
    :is(svg[data-lucide], svg.lucide) * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    stroke: currentColor !important;
    fill: none !important;
    background: transparent !important;
  }
  body .fluent-icon-shell[data-fluent-icon] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body .fluent-icon-shell[data-fluent-icon] > .fluent-icon {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    background: currentColor !important;
    background-image: none !important;
    -webkit-mask-image: var(--fluent-icon-regular) !important;
    mask-image: var(--fluent-icon-regular) !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body :is(#projectHomeChatNav, .project-home-nav-item,
      #assistantAddBtn, #assistantVoiceInputBtn, #assistantSendBtn)
    :is(svg[data-lucide], svg.lucide, i[data-lucide], .fluent-icon-shell[data-fluent-icon]) {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    flex-basis: 18px !important;
  }
  body #assistantSendBtn
    :is(svg[data-lucide], svg.lucide, i[data-lucide], .fluent-icon-shell[data-fluent-icon]) {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }
  html:not([data-theme="dark"]) body #assistantSendBtn:not(:disabled) {
    background: #292929 !important;
    border-color: #292929 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  html[data-theme="dark"] body #assistantSendBtn:not(:disabled) {
    background: #2d2d2f !important;
    border-color: #454547 !important;
    color: #d7d7d7 !important;
    -webkit-text-fill-color: #d7d7d7 !important;
  }
  body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) .project-home-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 74px !important;
    padding: 14px 8px 18px !important;
  }
  body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) .project-home-brand img {
    width: 76px !important;
    height: 56px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 !important;
  }

  /* Titles describe their sections without decorative glyphs. Keep the
     chevrons and actionable icons so behavior remains easy to discover. */
  body #assistantRightWorkbenchHeader > :is(svg, i, .fluent-icon-shell),
  body #assistantRightWorkbenchHeader .assistant-right-workbench-title > :is(svg, i, .fluent-icon-shell),
  body #assistantRightWorkbench summary > span:first-child > :is(svg, i, .fluent-icon-shell) {
    display: none !important;
  }
  body #assistantRightWorkbench summary > span:first-child:has(> strong) {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
  }
  body #assistantRightWorkbench summary > span:first-child > :is(strong, small) {
    grid-column: 1 !important;
  }
  body #assistantRightWorkbenchHeader {
    gap: 0 !important;
    padding-block: 12px !important;
  }
  body #assistantRightWorkbenchHeader strong {
    font-size: var(--chat-tool-size, 13px) !important;
    font-weight: 600 !important;
  }

  /* The work surface follows the same quiet palette as the conversation.
     Preserve each entrance, but remove decorative frames and colored fills. */
  body[data-project-home-mode="work"] #step-create {
    --minimal-surface: #ffffff;
    --minimal-subtle: #f5f5f5;
    --minimal-line: #e5e5e5;
    --minimal-text: #292929;
    --minimal-muted: #737373;
  }
  html[data-theme="dark"] body[data-project-home-mode="work"] #step-create {
    --minimal-surface: #181818;
    --minimal-subtle: #252525;
    --minimal-line: #383838;
    --minimal-text: #d7d7d7;
    --minimal-muted: #a7a7a7;
  }
  body[data-project-home-mode="work"] #step-create
    :is(.project-home-content, #projectHomeWork, .project-home-nav, .project-home-chat-topbar) {
    background: var(--minimal-surface) !important;
    background-image: none !important;
    color: var(--minimal-text) !important;
    box-shadow: none !important;
  }
  body[data-project-home-mode="work"] #appShell > .topbar {
    background: #ffffff !important;
    background-image: none !important;
    border-color: #e5e5e5 !important;
    box-shadow: none !important;
  }
  html[data-theme="dark"] body[data-project-home-mode="work"] #appShell > .topbar {
    background: #181818 !important;
    border-color: #383838 !important;
  }
  body[data-project-home-mode="work"] #projectHomeSearch {
    background: transparent !important;
    background-image: none !important;
    border-color: #e5e5e5 !important;
    box-shadow: none !important;
  }
  html[data-theme="dark"] body[data-project-home-mode="work"] #projectHomeSearch {
    border-color: #383838 !important;
  }
  body[data-project-home-mode="work"] #projectHomeSearch kbd {
    background: transparent !important;
    border-color: #e5e5e5 !important;
    color: #737373 !important;
  }
  body[data-project-home-mode="work"] #projectHomeModeSwitch {
    padding: 3px !important;
    border: 1px solid var(--minimal-line) !important;
    border-radius: 8px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  body[data-project-home-mode="work"] #projectHomeModeSwitch > button {
    background: transparent !important;
    color: var(--minimal-muted) !important;
    box-shadow: none !important;
  }
  body[data-project-home-mode="work"] #projectHomeModeSwitch > button[aria-selected="true"] {
    background: var(--minimal-subtle) !important;
    color: var(--minimal-text) !important;
  }
  body[data-project-home-mode="work"] #projectHomeChatNav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
    margin-bottom: 10px !important;
  }
  body[data-project-home-mode="work"] #step-create
    :is(#projectHomeChatNav > button, .project-home-nav-item,
        .project-home-secondary, #appAvatarMenuBtn, .chat-top-model-btn) {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 36px !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--minimal-text) !important;
    box-shadow: none !important;
    font-size: 13px !important;
  }
  body[data-project-home-mode="work"] #step-create
    :is(#projectHomeChatNav > button, .project-home-nav-item, .project-home-secondary,
        #appAvatarMenuBtn, .chat-top-model-btn):is(:hover, :focus-visible, .active) {
    background: var(--minimal-subtle) !important;
  }
  body[data-project-home-mode="work"] #step-create
    :is(.project-home-heading-art, .heading-art-glow, .heading-art-grid) {
    display: none !important;
  }
  body[data-project-home-mode="work"] .project-home-heading {
    min-height: 0 !important;
    padding-block: 12px 20px !important;
  }
  body[data-project-home-mode="work"] .project-home-heading h2 {
    font-size: clamp(24px, 2.4vw, 32px) !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: var(--minimal-text) !important;
  }
  body[data-project-home-mode="work"] .project-home-heading :is(p, .project-home-heading-copy > span) {
    color: var(--minimal-muted) !important;
  }
  body[data-project-home-mode="work"] .project-home-quick-actions {
    gap: 6px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid var(--minimal-line) !important;
  }
  body[data-project-home-mode="work"] .project-home-quick-actions > button {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-height: 62px !important;
    padding: 12px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--minimal-text) !important;
  }
  body[data-project-home-mode="work"] .project-home-quick-actions > button:is(:hover, :focus-visible) {
    background: var(--minimal-subtle) !important;
    transform: none !important;
  }
  body[data-project-home-mode="work"] .quick-action-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    flex: 0 0 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  body[data-project-home-mode="work"] .project-home-quick-actions :is(strong, small) {
    color: var(--minimal-text) !important;
    font-size: 13px !important;
  }
  body[data-project-home-mode="work"] .project-home-quick-actions > button > span:last-child {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    gap: 3px !important;
  }
  body[data-project-home-mode="work"] .project-home-quick-actions small {
    color: var(--minimal-muted) !important;
    font-size: 11px !important;
  }
  body[data-project-home-mode="work"] #smartCreate .smart-create-composer {
    border: 1px solid var(--minimal-line) !important;
    border-radius: 16px !important;
    background: var(--minimal-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  body[data-project-home-mode="work"] #smartCreate :is(textarea, .smart-create-tool, #newBlankCanvasQuickBtn) {
    border-color: var(--minimal-line) !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--minimal-text) !important;
    box-shadow: none !important;
  }
  body[data-project-home-mode="work"] #smartCreate textarea {
    border: 0 !important;
    border-radius: 0 !important;
  }
  body[data-project-home-mode="work"] #smartCreate textarea::placeholder {
    color: var(--minimal-muted) !important;
  }
  body[data-project-home-mode="work"] #step-create
    :is(.project-home-projects > header p, .project-home-projects > header span,
        #projectRecentMeta, .project-recent-all, .project-card-copy > em) {
    color: var(--minimal-muted) !important;
  }
  body[data-project-home-mode="work"] #step-create .project-card-copy > strong {
    color: var(--minimal-text) !important;
  }
  body[data-project-home-mode="work"] #step-create :is(#smartCreateSubmitBtn, #newProjectBtn) {
    border-color: var(--minimal-text) !important;
    background: var(--minimal-text) !important;
    background-image: none !important;
    color: var(--minimal-surface) !important;
    box-shadow: none !important;
  }
  body[data-project-home-mode="work"] #step-create :is(#smartCreateSubmitBtn, #newProjectBtn) > span {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }
  html[data-theme="dark"] body[data-project-home-mode="work"] #step-create :is(#smartCreateSubmitBtn, #newProjectBtn) {
    color: #181818 !important;
    -webkit-text-fill-color: #181818 !important;
  }
  body[data-project-home-mode="work"] #smartCreateSubmitBtn
    :is(svg[data-lucide], .fluent-icon-shell[data-fluent-icon]),
  body[data-project-home-mode="work"] #newProjectBtn
    :is(svg[data-lucide], .fluent-icon-shell[data-fluent-icon]) {
    color: inherit !important;
  }
  body[data-project-home-mode="work"] .dashboard-panel {
    border: 0 !important;
    border-bottom: 1px solid var(--minimal-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  body[data-project-home-mode="work"]
    :is(.dashboard-schedule-item, .dashboard-task-row, .dashboard-notice-row, .dashboard-task-tabs > button, .dashboard-weekdays > button) {
    background: transparent !important;
    background-image: none !important;
    border-color: var(--minimal-line) !important;
    color: var(--minimal-text) !important;
    box-shadow: none !important;
  }
  body[data-project-home-mode="work"]
    :is(.dashboard-schedule-item em, .dashboard-task-row time, .dashboard-notice-dot) {
    background: transparent !important;
    border-color: var(--minimal-line) !important;
    color: var(--minimal-muted) !important;
  }
  body #settingsModal :is(.settings-support-card, .settings-control-group, .byok-lock-panel) {
    padding: 14px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--settings-line, #e5e5e5) !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  body #settingsModal .settings-support-card > header > :is(svg, i, .fluent-icon-shell) {
    display: none !important;
  }
  body #closeSettingsBtn:has(.fluent-icon-shell)::before {
    content: none !important;
    display: none !important;
  }
  body[data-project-home-mode="work"] #step-create :is(.project-home-nav, .project-home-account-slot) {
    border-color: var(--minimal-line) !important;
  }
  body[data-project-home-mode="work"] .project-card :is(.project-card-copy, .project-card-status) {
    background: transparent !important;
    background-image: none !important;
    color: var(--minimal-text) !important;
  }
  body[data-project-home-mode="work"] .project-card :is(.project-card-meta, .project-card-meta small, .project-card-status small) {
    color: var(--minimal-muted) !important;
  }
  body[data-project-home-mode="work"] .project-card-format {
    background: rgb(0 0 0 / 65%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  body[data-project-home-mode="work"] .project-card-progress-track {
    background: var(--minimal-subtle) !important;
  }
  body[data-project-home-mode="work"] .project-card-progress-track > i {
    background: var(--minimal-muted) !important;
  }
  body[data-project-home-mode="work"] #assistantFloatLauncher {
    background: #2d2d2f !important;
    background-image: none !important;
    border-color: #454547 !important;
    box-shadow: none !important;
  }

  @media (max-width: 767px) {
    body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] {
      --assistant-right-rail-width: 0px !important;
    }
  }
  @media (max-width: 1023px) {
    body[data-project-home-mode="chat"] #assistantDesignFocus .assistant-design-focus-bar {
      width: 100% !important;
      box-sizing: border-box !important;
      padding-right: 44px !important;
    }
    body[data-project-home-mode="chat"] #assistantDrawer.embedded > .assistant-header#assistantDragHandle {
      top: 8px !important;
      right: calc(var(--assistant-right-rail-width) + 8px) !important;
    }
  }
  @media (max-width: 767px) {
    body[data-project-home-mode="work"] #appAvatarMenu:not(.hidden) {
      position: fixed !important;
      z-index: 1000 !important;
      top: 112px !important;
      left: 12px !important;
      right: auto !important;
      bottom: auto !important;
      width: min(290px, calc(100vw - 24px)) !important;
      max-height: calc(100dvh - 136px) !important;
      transform: none !important;
      overflow-y: auto !important;
    }
    body[data-project-home-mode="work"] #appShell > .topbar {
      display: flex !important;
      align-items: center !important;
      flex-wrap: nowrap !important;
      gap: 8px !important;
      min-width: 0 !important;
      padding: 8px 12px !important;
    }
    body[data-project-home-mode="work"]:not(.workbench-editor-active) #appShell > .topbar > :is(.brand-block, #editorWorkflowNav),
    body[data-project-home-mode="work"]:not(.workbench-editor-active) #appShell > .topbar
      :is(#luxinVoiceLauncher, #projectHomeSearch kbd, #apiStatus, .topbar-delivery-tools) {
      display: none !important;
    }
    body[data-project-home-mode="work"] #projectHomeSearch {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      width: auto !important;
    }
    body[data-project-home-mode="work"] #projectHomeSearchInput {
      min-width: 0 !important;
      width: 100% !important;
    }
    body[data-project-home-mode="work"] #appShell > .topbar .top-actions {
      flex: 0 0 auto !important;
      flex-wrap: nowrap !important;
      gap: 4px !important;
    }
    body[data-project-home-mode="work"] #step-create > .project-home-shell {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      width: 100% !important;
      height: auto !important;
      overflow: visible !important;
    }
    body[data-project-home-mode="work"] #step-create .project-home-nav {
      display: flex !important;
      flex-flow: row nowrap !important;
      align-items: center !important;
      gap: 4px !important;
      width: 100% !important;
      min-width: 0 !important;
      height: auto !important;
      min-height: 0 !important;
      padding: 8px !important;
      box-sizing: border-box !important;
      overflow: auto hidden !important;
      border: 0 !important;
      border-bottom: 1px solid var(--minimal-line) !important;
    }
    body[data-project-home-mode="work"] #step-create .project-home-nav > * {
      flex: 0 0 auto !important;
    }
    body[data-project-home-mode="work"] #step-create .project-home-brand {
      min-height: 0 !important;
      padding: 0 10px 0 0 !important;
    }
    body[data-project-home-mode="work"] #step-create .project-home-brand img {
      width: 60px !important;
      height: 44px !important;
    }
    body[data-project-home-mode="work"] #step-create #projectHomeChatNav {
      display: flex !important;
      margin: 0 !important;
    }
    body[data-project-home-mode="work"] #step-create .project-home-nav-spacer,
    body[data-project-home-mode="work"] #step-create .project-home-account-slot > p {
      display: none !important;
    }
    body[data-project-home-mode="work"] #step-create .project-home-content {
      width: 100% !important;
      min-width: 0 !important;
      padding: 12px !important;
      box-sizing: border-box !important;
    }
    body[data-project-home-mode="work"] #step-create
      :is(#projectHomeWork, #smartCreate, .smart-create-composer) {
      min-width: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      grid-template-columns: minmax(0, 1fr) !important;
    }
    body[data-project-home-mode="work"] #smartCreate
      :is(.smart-create-toolbar, .smart-create-toolbar-left, .smart-create-toolbar-right) {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 6px !important;
      min-width: 0 !important;
      width: 100% !important;
    }
    body[data-project-home-mode="work"] #smartCreate
      :is(.smart-create-tool, #smartCreateSubmitBtn, #newBlankCanvasQuickBtn) {
      width: auto !important;
      min-width: 0 !important;
      max-width: 100% !important;
    }
    body[data-project-home-mode="work"] .project-home-quick-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    body[data-project-home-mode="work"] .project-home-quick-actions > button {
      grid-column: auto !important;
      min-width: 0 !important;
      padding: 10px 4px !important;
    }
  }
  body #assistantDrawer.embedded > .assistant-resize-handle {
    display: none !important;
    pointer-events: none !important;
  }

  body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-design-focus="true"][data-design-history-open="true"] > #assistantDesignFocus:not(.hidden) {
    display: block !important;
    flex: 0 0 auto !important;
    min-height: 44px !important;
    max-height: 54px !important;
    padding-block: 0 !important;
  }
  body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-design-history-open="true"]
    #assistantDesignFocus :is(.assistant-design-focus-stage, .assistant-design-focus-footer) {
    display: none !important;
  }
  /* A design result owns the available transcript width, including when the
     focus canvas is collapsed. Text-sized message bubbles previously kept
     short recovery messages and their images at thumbnail width. */
  body[data-project-home-mode="chat"] #assistantDrawer.embedded
    #assistantMessages .assistant-message-content:has(> .assistant-artifact-result-compact) {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  body[data-project-home-mode="chat"] #assistantDrawer.embedded
    #assistantMessages .assistant-artifact-result-compact {
    width: 100% !important;
    max-width: 720px !important;
    box-sizing: border-box !important;
  }
  body[data-project-home-mode="chat"] #assistantDrawer.embedded
    #assistantMessages .assistant-artifact-result-compact
    :is(.assistant-artifact-compact-grid, .assistant-generated-image-card, .assistant-generated-image-preview) {
    width: 100% !important;
    max-width: 720px !important;
    min-width: 0 !important;
    margin-inline: auto !important;
  }
  body[data-project-home-mode="chat"] #assistantDrawer.embedded
    #assistantMessages .assistant-artifact-result-compact .assistant-generated-image-preview {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--assistant-artifact-aspect, auto) !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }
  body[data-project-home-mode="chat"] #assistantDrawer.embedded
    #assistantMessages .assistant-artifact-result-compact .assistant-generated-image-preview img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}

/* Final conversation alignment: the transcript stays centered, assistant
   turns start at the shared left edge, and user turns end at the shared right
   edge. This must come after the legacy column rules above, which intentionally
   normalize every message to block/100% and otherwise erase user alignment. */
@layer assistantChrome {
html:root body[data-project-home-mode="chat"] #step-create#step-create
#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"]
#assistantMessages > .assistant-message {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  width: min(100%, var(--assistant-transcript-width, 760px)) !important;
  max-width: var(--assistant-transcript-width, 760px) !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create
#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"]
#assistantMessages > .assistant-message:not(.user) {
  justify-content: flex-start !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create
#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"]
#assistantMessages > .assistant-message:not(.user) > .assistant-message-content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0 auto !important;
  text-align: left !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create
#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"]
#assistantMessages > .assistant-message.user {
  justify-content: flex-end !important;
  text-align: right !important;
}

html:root body[data-project-home-mode="chat"] #step-create#step-create
#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"]
#assistantMessages > .assistant-message.user > .assistant-message-content {
  width: fit-content !important;
  max-width: min(76%, 620px) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 1023px) {
  html:root body[data-project-home-mode="chat"] #step-create#step-create
  #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"]
  #assistantMessages > .assistant-message {
    width: 100% !important;
    max-width: none !important;
  }
  html:root body[data-project-home-mode="chat"] #step-create#step-create
  #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"]
  #assistantMessages > .assistant-message.user > .assistant-message-content {
    max-width: min(88%, 620px) !important;
  }
}
}

/* ==== consolidated from /assistant-minimal-ui.css (cascade order preserved) ==== */
/*
 * 小陪智能助手 · 极简侧栏视觉层
 * 只负责 assistant-sidebar-entry 的排版与视觉，不改变交互与业务状态。
 * 使用暖灰、象牙白和炭黑，减少重复信息，让输入区成为唯一主操作。
 */
html:root body #assistantDrawer.assistant-sidebar-entry {
  --assistant-min-surface: #fbfaf8;
  --assistant-min-panel: #f5f3ef;
  --assistant-min-panel-soft: #f0eee9;
  --assistant-min-line: #dedbd4;
  --assistant-min-line-soft: #e9e6df;
  --assistant-min-text: #2e2b27;
  --assistant-min-muted: #77736b;
  --assistant-min-faint: #a09c93;
  --assistant-min-accent: #8c5a20;
  --assistant-min-accent-soft: #f2e9de;
  --assistant-min-radius: 10px;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--assistant-min-line) !important;
  border-radius: 16px !important;
  background: var(--assistant-min-surface) !important;
  color: var(--assistant-min-text) !important;
  box-shadow: 0 18px 48px rgb(45 39 31 / 13%) !important;
}

/* Dark mode keeps the same hierarchy, with a neutral charcoal surface. */
html:root[data-theme="dark"] body #assistantDrawer.assistant-sidebar-entry {
  --assistant-min-surface: #20201f;
  --assistant-min-panel: #292927;
  --assistant-min-panel-soft: #31312e;
  --assistant-min-line: #44423e;
  --assistant-min-line-soft: #393834;
  --assistant-min-text: #f2f0eb;
  --assistant-min-muted: #b5b0a7;
  --assistant-min-faint: #8e8a81;
  --assistant-min-accent: #d1a56e;
  --assistant-min-accent-soft: #3b3228;
  box-shadow: 0 18px 48px rgb(0 0 0 / 36%) !important;
}

/* Header: a quiet brand row with only the controls that belong here. */
html:root body #assistantDrawer.assistant-sidebar-entry > .assistant-header {
  flex: 0 0 52px !important;
  min-height: 52px !important;
  height: 52px !important;
  box-sizing: border-box !important;
  padding: 8px 10px 8px 12px !important;
  border-bottom: 1px solid var(--assistant-min-line-soft) !important;
  background: var(--assistant-min-surface) !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > .assistant-header .assistant-drag-grip {
  display: none !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > .assistant-header .assistant-heading {
  gap: 8px !important;
  min-width: 0 !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > .assistant-header .assistant-mark {
  width: 28px !important;
  height: 28px !important;
  flex-basis: 28px !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > .assistant-header .assistant-heading h2 {
  margin: 0 !important;
  color: var(--assistant-min-text) !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  letter-spacing: -.01em !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > .assistant-header .assistant-heading small {
  margin-top: 1px !important;
  color: var(--assistant-min-muted) !important;
  font-size: 9px !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > .assistant-header .assistant-header-actions {
  gap: 3px !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > .assistant-header .assistant-header-actions > #assistantVoiceNoticeBtn {
  display: none !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > .assistant-header .assistant-icon-btn {
  width: 29px !important;
  height: 29px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: var(--assistant-min-muted) !important;
  background: transparent !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > .assistant-header .assistant-icon-btn:hover,
html:root body #assistantDrawer.assistant-sidebar-entry > .assistant-header .assistant-icon-btn:focus-visible {
  border-color: var(--assistant-min-line) !important;
  background: var(--assistant-min-panel-soft) !important;
  color: var(--assistant-min-text) !important;
}

/* Current task: one concise context line; chips remain available through the
   add menu and project context, so the sidebar does not become a dashboard. */
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantSideWorkspace {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-rows: 44px !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 44px !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 11px !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid var(--assistant-min-line-soft) !important;
  background: var(--assistant-min-panel) !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantSideWorkspace > header {
  grid-column: 1 !important;
  grid-row: 1 !important;
  gap: 5px !important;
  margin: 0 !important;
  color: var(--assistant-min-muted) !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantSideWorkspace > header > span {
  gap: 4px !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantSideWorkspace > header > span > svg {
  width: 14px !important;
  height: 14px !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry #assistantSideWorkspaceStatus {
  padding: 2px 6px !important;
  border: 1px solid var(--assistant-min-line) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--assistant-min-accent) !important;
  font-size: 9px !important;
  font-weight: 650 !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry #assistantSideWorkspaceSummary {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry #assistantSideWorkspaceSummary > strong {
  display: block !important;
  overflow: hidden !important;
  color: var(--assistant-min-text) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 18px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry #assistantSideWorkspaceSummary > span {
  display: none !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry #assistantSidePdfBtn {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: inline-flex !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--assistant-min-line) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--assistant-min-muted) !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry #assistantSidePdfBtn > span,
html:root body #assistantDrawer.assistant-sidebar-entry #assistantSidePdfBtn small,
html:root body #assistantDrawer.assistant-sidebar-entry #assistantSidePdfBtn strong { display: none !important; }
html:root body #assistantDrawer.assistant-sidebar-entry #assistantSidePdfBtn:hover,
html:root body #assistantDrawer.assistant-sidebar-entry #assistantSidePdfBtn:focus-visible {
  border-color: var(--assistant-min-accent) !important;
  background: var(--assistant-min-accent-soft) !important;
  color: var(--assistant-min-accent) !important;
}

/* Context and the duplicate recent-task strip compete with the conversation
   in a compact drawer. Both remain available in the full assistant/workbench. */
html:root body #assistantDrawer.assistant-sidebar-entry > .assistant-context-block,
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantTasks {
  display: none !important;
}

/* Messages become the clear primary surface. */
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantMessages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 16px 14px 10px !important;
  overflow: auto !important;
  background: var(--assistant-min-surface) !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantMessages .assistant-message {
  margin: 0 0 14px !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantMessages .assistant-turn-badge {
  display: none !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantMessages .assistant-message-content {
  max-width: 94% !important;
  padding: 10px 11px !important;
  border: 1px solid var(--assistant-min-line-soft) !important;
  border-left: 2px solid var(--assistant-min-line) !important;
  border-radius: 10px !important;
  background: var(--assistant-min-panel) !important;
  color: var(--assistant-min-text) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.58 !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantMessages .assistant-message.user .assistant-message-content {
  margin-left: auto !important;
  border-color: var(--assistant-min-line) !important;
  border-left: 1px solid var(--assistant-min-line) !important;
  background: var(--assistant-min-panel-soft) !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantMessages .assistant-message-actions {
  opacity: .62 !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantMessages .assistant-message-action-btn {
  width: 27px !important;
  height: 27px !important;
  border-color: var(--assistant-min-line) !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--assistant-min-muted) !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantMessages .assistant-message-action-btn:hover,
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantMessages .assistant-message-action-btn:focus-visible {
  background: var(--assistant-min-panel-soft) !important;
  color: var(--assistant-min-text) !important;
}

/* Composer: one input row + one quiet row of three primary controls. The
   hidden controls stay reachable from the + menu and existing dialogs. */
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px 38px !important;
  grid-template-rows: 52px 34px !important;
  gap: 7px 6px !important;
  flex: 0 0 auto !important;
  width: calc(100% - 20px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 6px 10px 0 !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--assistant-min-line) !important;
  border-radius: 14px !important;
  background: var(--assistant-min-panel) !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer > #assistantInput {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 92px !important;
  padding: 8px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--assistant-min-text) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  resize: none !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer > #assistantInput::placeholder {
  color: var(--assistant-min-faint) !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer > :is(#assistantAddBtn, #assistantVoiceInputBtn, #assistantSendBtn) {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  align-self: center !important;
  justify-self: center !important;
  border: 1px solid var(--assistant-min-line) !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--assistant-min-muted) !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer > #assistantAddBtn { grid-column: 1 !important; grid-row: 1 !important; }
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer > #assistantVoiceInputBtn { grid-column: 3 !important; grid-row: 1 !important; }
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer > #assistantSendBtn {
  grid-column: 4 !important;
  grid-row: 1 !important;
  border-color: var(--assistant-min-text) !important;
  background: var(--assistant-min-text) !important;
  color: var(--assistant-min-surface) !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer > :is(#assistantAddBtn, #assistantVoiceInputBtn):hover,
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer > :is(#assistantAddBtn, #assistantVoiceInputBtn):focus-visible {
  border-color: var(--assistant-min-accent) !important;
  background: var(--assistant-min-accent-soft) !important;
  color: var(--assistant-min-accent) !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer > #assistantSendBtn:hover,
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer > #assistantSendBtn:focus-visible {
  background: var(--assistant-min-accent) !important;
  border-color: var(--assistant-min-accent) !important;
  color: #ffffff !important;
}

html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer > .assistant-composer-tools {
  display: flex !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  align-items: stretch !important;
  gap: 6px !important;
  overflow: visible !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer > .assistant-composer-tools > :is(#assistantModeSwitch, #assistantSkillsWrap, .assistant-quick-tools-wrap) {
  display: flex !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer > .assistant-composer-tools > :is(.assistant-composer-copy-tools, #assistantImageSettingsBtn, #assistantAdvancedOptionsBtn, #assistantSecondaryTools) {
  display: none !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer .assistant-composer-tools :is(#assistantModeTrigger, #assistantSkillsTrigger, #assistantQuickToolsBtn) {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 8px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  overflow: hidden !important;
  border: 1px solid var(--assistant-min-line) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--assistant-min-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer .assistant-composer-tools :is(#assistantModeTrigger, #assistantSkillsTrigger, #assistantQuickToolsBtn):hover,
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer .assistant-composer-tools :is(#assistantModeTrigger, #assistantSkillsTrigger, #assistantQuickToolsBtn):focus-visible,
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer .assistant-composer-tools :is(#assistantModeTrigger, #assistantSkillsTrigger, #assistantQuickToolsBtn)[aria-expanded="true"] {
  border-color: var(--assistant-min-accent) !important;
  background: var(--assistant-min-accent-soft) !important;
  color: var(--assistant-min-accent) !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer .assistant-composer-tools :is(#assistantModeTrigger, #assistantSkillsTrigger, #assistantQuickToolsBtn) > :is(svg, i, .fluent-icon-shell) {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
}

/* Bring the jump-to-latest affordance out of the middle of the conversation. */
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantNewResultBtn {
  position: absolute !important;
  right: 16px !important;
  bottom: 116px !important;
  z-index: 12 !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 1px solid var(--assistant-min-line) !important;
  border-radius: 999px !important;
  background: var(--assistant-min-surface) !important;
  color: var(--assistant-min-muted) !important;
  box-shadow: 0 4px 14px rgb(45 39 31 / 12%) !important;
  font-size: 0 !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry > #assistantNewResultBtn > :is(svg, i, .fluent-icon-shell) {
  width: 14px !important;
  height: 14px !important;
}

/* The keyboard hint is useful in expanded mode, but is visual noise in a
   narrow sidebar where it competes with the input placeholder. */
html:root body #assistantDrawer.assistant-sidebar-entry > .assistant-composer-hint {
  display: none !important;
}

@media (max-width: 560px) {
  html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer {
    width: calc(100% - 14px) !important;
    margin-inline: 7px !important;
  }
  html:root body #assistantDrawer.assistant-sidebar-entry > #assistantComposer .assistant-composer-tools :is(#assistantModeTrigger, #assistantSkillsTrigger, #assistantQuickToolsBtn) > span {
    max-width: 70px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}
/* Specificity bridge: legacy compact/taskbar rules use repeated IDs. */
html:root body #assistantDrawer#assistantDrawer.assistant-sidebar-entry > #assistantSideWorkspace#assistantSideWorkspace {
  grid-template-columns: auto minmax(0,1fr) auto !important;
  grid-template-rows: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  flex: 0 0 44px !important;
  padding: 0 11px !important;
  overflow: hidden !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-sidebar-entry #assistantSideWorkspace#assistantSideWorkspace #assistantSideWorkspaceSummary#assistantSideWorkspaceSummary {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  overflow: hidden !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-sidebar-entry #assistantSideWorkspace#assistantSideWorkspace #assistantSideWorkspaceSummary#assistantSideWorkspaceSummary > span { display: none !important; }
html:root body #assistantDrawer#assistantDrawer.assistant-sidebar-entry #assistantSideWorkspace#assistantSideWorkspace #assistantSidePdfBtn#assistantSidePdfBtn {
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-sidebar-entry > #assistantComposer#assistantComposer {
  grid-template-columns: 34px minmax(0,1fr) 34px 38px !important;
  grid-template-rows: 52px 34px !important;
  gap: 7px 6px !important;
  width: calc(100% - 20px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 8px !important;
  margin: 6px 10px 0 !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-sidebar-entry > #assistantComposer#assistantComposer > .assistant-composer-tools {
  display: flex !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  gap: 6px !important;
  overflow: visible !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-sidebar-entry > #assistantComposer#assistantComposer > .assistant-composer-tools > :is(.assistant-composer-copy-tools, #assistantImageSettingsBtn, #assistantAdvancedOptionsBtn, #assistantSecondaryTools) { display: none !important; }
html:root body #assistantDrawer#assistantDrawer.assistant-sidebar-entry > #assistantComposer#assistantComposer > .assistant-composer-tools > :is(#assistantModeSwitch, #assistantSkillsWrap, .assistant-quick-tools-wrap) {
  display: flex !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
}

/* ==== design intent picker (progressive disclosure before design wizard) ==== */
.assistant-design-intent-card .visually-hidden,
.assistant-design-intent-custom-field .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-intent-card {
  width: min(100%, 420px) !important;
  margin: 16px auto !important;
  padding: 16px 16px 14px !important;
  border: 1px solid color-mix(in srgb, var(--chat-line, #424242) 85%, #000) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--chat-bg, #212121) 92%, #000) !important;
  color: var(--chat-text, #ececf1) !important;
  box-shadow: 0 12px 40px color-mix(in srgb, #000 35%, transparent) !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-intent-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-intent-header > div {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-intent-header strong {
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  color: var(--chat-text, #ececf1) !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-intent-header span {
  font-size: 12px !important;
  color: var(--chat-muted, #a1a1aa) !important;
  overflow-wrap: anywhere !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-intent-close {
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--chat-muted, #a1a1aa) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-intent-close:hover,
html:root body #assistantDrawer #assistantMessages .assistant-design-intent-close:focus-visible {
  background: color-mix(in srgb, var(--chat-text, #fff) 8%, transparent) !important;
  color: var(--chat-text, #ececf1) !important;
  outline: none !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-intent-options {
  display: grid !important;
  gap: 0 !important;
  margin: 0 0 12px !important;
  border: 1px solid var(--chat-line, #424242) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: color-mix(in srgb, var(--chat-bg, #212121) 80%, #111) !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-intent-option {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 11px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--chat-line, #424242) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--chat-text, #ececf1) !important;
  text-align: left !important;
  cursor: pointer !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-intent-option:last-child {
  border-bottom: 0 !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-intent-option:hover,
html:root body #assistantDrawer #assistantMessages .assistant-design-intent-option:focus-visible {
  background: color-mix(in srgb, var(--chat-text, #fff) 7%, transparent) !important;
  outline: none !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-intent-letter {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border: 1px solid var(--chat-line, #52525b) !important;
  border-radius: 6px !important;
  color: var(--chat-muted, #a1a1aa) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  flex: 0 0 auto !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-intent-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-intent-custom {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-intent-custom-field {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-intent-custom input {
  width: 100% !important;
  min-height: 40px !important;
  padding: 9px 12px !important;
  border: 1px solid var(--chat-line, #424242) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--chat-bg, #212121) 70%, #000) !important;
  color: var(--chat-text, #ececf1) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-intent-custom input::placeholder {
  color: var(--chat-muted, #a1a1aa) !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-intent-custom input:focus {
  outline: 2px solid color-mix(in srgb, var(--chat-text, #fff) 35%, transparent) !important;
  outline-offset: 1px !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-intent-custom-submit {
  flex: 0 0 auto !important;
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 1px solid var(--chat-line, #424242) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--chat-muted, #a1a1aa) !important;
  font-size: 16px !important;
  cursor: pointer !important;
}

html:root body #assistantDrawer #assistantMessages .assistant-design-intent-custom-submit:hover,
html:root body #assistantDrawer #assistantMessages .assistant-design-intent-custom-submit:focus-visible {
  color: var(--chat-text, #ececf1) !important;
  border-color: var(--chat-text, #ececf1) !important;
  outline: none !important;
}

/* Plus-menu chat popups: keep copy strategy / advanced settings visible
   while the composer tool row is collapsed. Unlayered + high specificity so
   these beat earlier display:none rules and layered > * hides. */
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > .assistant-composer-tools > .assistant-composer-copy-tools {
  display: contents !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantCopyModeTrigger {
  display: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantCopyModeMenu.assistant-copy-mode-menu:not(.hidden),
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantAdvancedOptionsPanel.assistant-advanced-options-panel:not(.hidden) {
  position: fixed !important;
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 90 !important;
  overflow: auto !important;
  box-sizing: border-box !important;
  border: 1px solid var(--chat-line, #dddddd) !important;
  border-radius: 14px !important;
  background: var(--chat-panel, var(--capsule-surface, #ffffff)) !important;
  color: var(--chat-text, var(--capsule-text, #202020)) !important;
  box-shadow: 0 8px 24px rgb(0 0 0 / 15%) !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantCopyModeMenu.assistant-copy-mode-menu.hidden,
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantAdvancedOptionsPanel.assistant-advanced-options-panel.hidden {
  display: none !important;
}


/* ==== Conversation + menu IA overhaul (Attach | Mode | Tools | Settings) ==== */
html:root body[data-project-home-mode="chat"] #assistantAddMenu.assistant-add-menu {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 10px !important;
  width: min(320px, calc(100vw - 24px)) !important;
  max-height: min(70vh, 560px) !important;
  overflow: auto !important;
  border: 1px solid var(--chat-line, #dddddd) !important;
  border-radius: 14px !important;
  background: var(--chat-panel, #ffffff) !important;
  color: var(--chat-text, #202020) !important;
  box-shadow: 0 10px 28px rgb(0 0 0 / 14%) !important;
  z-index: 95 !important;
}
html:root body[data-project-home-mode="chat"] #assistantAddMenu.assistant-add-menu.hidden {
  display: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantAddMenu .assistant-add-menu-section {
  display: grid !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-width: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantAddMenu .assistant-add-menu-section + .assistant-add-menu-section {
  padding-top: 8px !important;
  border-top: 1px solid color-mix(in srgb, var(--chat-line, #ddd) 85%, transparent) !important;
}
html:root body[data-project-home-mode="chat"] #assistantAddMenu .assistant-add-menu-section > h3 {
  margin: 0 0 4px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.02em !important;
  color: var(--chat-muted, #8a8a8a) !important;
  text-transform: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantAddMenu button.assistant-add-menu-action {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) 16px !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--chat-text, #202020) !important;
  text-align: left !important;
  cursor: pointer !important;
}
html:root body[data-project-home-mode="chat"] #assistantAddMenu button.assistant-add-menu-action > span {
  display: grid !important;
  gap: 1px !important;
  min-width: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantAddMenu button.assistant-add-menu-action strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
html:root body[data-project-home-mode="chat"] #assistantAddMenu button.assistant-add-menu-action small {
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: var(--chat-muted, #8a8a8a) !important;
}
html:root body[data-project-home-mode="chat"] #assistantAddMenu button.assistant-add-menu-action:hover,
html:root body[data-project-home-mode="chat"] #assistantAddMenu button.assistant-add-menu-action:focus-visible {
  background: color-mix(in srgb, var(--chat-text, #000) 6%, transparent) !important;
  outline: none !important;
}
html:root body[data-project-home-mode="chat"] #assistantAddMenu button.assistant-add-menu-action .assistant-add-menu-check {
  display: none !important;
  width: 16px !important;
  height: 16px !important;
  color: var(--neutral-accent, #2563eb) !important;
}
html:root body[data-project-home-mode="chat"] #assistantAddMenu button.assistant-add-menu-action.is-active .assistant-add-menu-check {
  display: inline-flex !important;
}
html:root body[data-project-home-mode="chat"] #assistantAddMenu button.assistant-add-menu-action.is-active {
  background: color-mix(in srgb, var(--neutral-accent, #2563eb) 10%, transparent) !important;
}
html:root body[data-project-home-mode="chat"] #assistantAddMenu button.assistant-add-menu-action:disabled,
html:root body[data-project-home-mode="chat"] #assistantAddMenu button.assistant-add-menu-action.is-desktop-only:disabled {
  opacity: 0.72 !important;
  cursor: not-allowed !important;
}
html:root body[data-project-home-mode="chat"] #assistantAddMenu button.assistant-add-menu-action.is-desktop-only:disabled small {
  color: color-mix(in srgb, #b45309 70%, var(--chat-muted, #8a8a8a)) !important;
}

/* Skills panel opened from + menu must stay above composer chrome */
html:root body[data-project-home-mode="chat"] #assistantSkillsPanel:not(.hidden) {
  z-index: 110 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


/* ==== conversation-mode polish: drawer / empty starters / stop ==== */
@media (max-width: 1023px) {
  html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(320px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    max-width: 320px !important;
    height: 100% !important;
    z-index: 10020 !important;
    margin: 0 !important;
    padding: 18px 14px 16px !important;
    border-right: 1px solid var(--chat-line) !important;
    background: var(--chat-panel) !important;
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.18) !important;
    transform: translateX(-105%) !important;
    pointer-events: none !important;
    overflow: auto !important;
  }

  html:root body[data-project-home-mode="chat"].project-home-sidebar-open #step-create > .project-home-shell > .project-home-nav {
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeSidebarBackdrop.project-home-sidebar-backdrop {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 10010 !important;
    margin: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    background: rgba(15, 15, 18, 0.42) !important;
    cursor: pointer !important;
  }

  html:root body[data-project-home-mode="chat"].project-home-sidebar-open #projectHomeSidebarBackdrop.project-home-sidebar-backdrop:not([hidden]) {
    display: block !important;
  }

  html:root body[data-project-home-mode="chat"] #projectHomeSidebarToggle.project-home-sidebar-toggle {
    display: inline-flex !important;
  }
}

@media (min-width: 1024px) {
  html:root body[data-project-home-mode="chat"] #projectHomeSidebarToggle.project-home-sidebar-toggle,
  html:root body[data-project-home-mode="chat"] #projectHomeSidebarBackdrop.project-home-sidebar-backdrop {
    display: none !important;
  }
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-empty {
  display: grid !important;
  gap: 18px !important;
  justify-items: center !important;
  align-content: center !important;
  min-height: min(70vh, 640px) !important;
  padding: 24px 16px !important;
  text-align: center !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-empty-starters {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  max-width: 720px !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-empty-starter {
  appearance: none !important;
  border: 1px solid var(--chat-line) !important;
  background: var(--chat-input) !important;
  color: var(--chat-text) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font: inherit !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  cursor: pointer !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-empty-starter:hover,
html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-empty-starter:focus-visible {
  background: var(--chat-panel) !important;
  outline: none !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-empty-hint {
  color: var(--chat-muted) !important;
  font-size: 12px !important;
}

html:root body[data-project-home-mode="chat"] #assistantSendBtn.assistant-send-btn.is-stop,
html:root body[data-project-home-mode="chat"] #assistantSendBtn.assistant-send-btn[data-send-mode="stop"] {
  background: #2f2f2f !important;
  color: #fff !important;
}

html:root body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] .assistant-generated-image-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 10px !important;
  min-height: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* ==== chat history rail: fill remaining height + pin/group ==== */
html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav > #projectHomeConversationNav,
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: hidden !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav > .assistant-side-nav,
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav #assistantSideNav {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
  overflow: hidden !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav #assistantSideHistory,
html:root body[data-project-home-mode="chat"] #step-create #assistantSideHistory.assistant-side-panel {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-content: flex-start !important;
  gap: 2px !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav #assistantSideHistory.hidden {
  display: none !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  border-radius: 7px !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-row > .assistant-side-history-item {
  width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-row.is-pinned {
  background: color-mix(in srgb, var(--chat-text, #e8eaed) 6%, transparent) !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-row.is-pinned > .assistant-side-history-item {
  padding-left: 8px !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-actions {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 4px 4px 4px 0 !important;
  opacity: 0 !important;
  transition: opacity .12s ease !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-row:hover .assistant-side-history-actions,
html:root body[data-project-home-mode="chat"] .assistant-side-history-row:focus-within .assistant-side-history-actions,
html:root body[data-project-home-mode="chat"] .assistant-side-history-row.is-pinned .assistant-side-history-actions {
  opacity: 1 !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--chat-muted, #9aa0a6) !important;
  cursor: pointer !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-action:hover,
html:root body[data-project-home-mode="chat"] .assistant-side-history-action:focus-visible,
html:root body[data-project-home-mode="chat"] .assistant-side-history-action[aria-pressed="true"] {
  background: color-mix(in srgb, var(--chat-text, #e8eaed) 10%, transparent) !important;
  color: var(--chat-text, #e8eaed) !important;
  outline: none !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-action[aria-pressed="true"] {
  color: #f0c14d !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-action > :is(svg, i) {
  width: 14px !important;
  height: 14px !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-group {
  display: block !important;
  width: 100% !important;
  margin: 4px 0 2px !important;
  border: 0 !important;
  background: transparent !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-group > summary {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 28px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  color: var(--chat-muted, #9aa0a6) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .02em !important;
  cursor: pointer !important;
  list-style: none !important;
  user-select: none !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-group > summary::-webkit-details-marker {
  display: none !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-group > summary:hover,
html:root body[data-project-home-mode="chat"] .assistant-side-history-group > summary:focus-visible {
  background: color-mix(in srgb, var(--chat-text, #e8eaed) 8%, transparent) !important;
  color: var(--chat-text, #e8eaed) !important;
  outline: none !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-group > summary > small {
  margin-left: auto !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  opacity: .8 !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-section-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 6px 0 2px !important;
  padding: 2px 8px !important;
  color: var(--chat-muted, #9aa0a6) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-pin-mark {
  display: inline-flex !important;
  color: #f0c14d !important;
  margin-right: 4px !important;
  vertical-align: -1px !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-pin-mark > :is(svg, i) {
  width: 11px !important;
  height: 11px !important;
}
/* Source geometry correction uses the same quiet surfaces in both themes. */
.assistant-primitive-correction { margin: 12px 0; padding: 12px; border: 1px solid var(--border, #8885); border-radius: 8px; min-width: 0; }
.assistant-primitive-correction legend { font-size: 12px; padding: 0 4px; }
.assistant-primitive-correction p { font-size: 12px; opacity: .8; }
.assistant-primitive-fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.assistant-primitive-fields label { display: grid; gap: 4px; font-size: 12px; }
.assistant-primitive-fields input { width: 100%; min-width: 0; box-sizing: border-box; min-height: 30px; height: 30px; padding: 4px 6px; color: inherit; background: transparent; border: 1px solid var(--border, #8885); border-radius: 5px; box-shadow: none; }
@media (max-width: 620px) { .assistant-primitive-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@layer assistantChrome {
html:root body #assistantDrawer .assistant-web-image-card { background:var(--theme-panel,var(--theme-bg))!important; color:var(--theme-text)!important; border:1px solid var(--theme-line,#9996)!important; border-radius:8px!important; box-shadow:none!important; }
html:root body #assistantDrawer .assistant-web-image-preview { background:var(--theme-bg)!important; height:190px!important; max-height:190px!important; flex-basis:190px!important; }
html:root body #assistantDrawer .assistant-web-image-card figcaption>strong { font-size:12px!important; font-weight:500!important; line-height:18px!important; }
html:root body #assistantDrawer .assistant-web-image-actions { display:flex; align-items:center; gap:8px; margin-top:auto; }
html:root body #assistantDrawer .assistant-web-image-actions>button { width:auto!important; flex:1; min-height:30px!important; padding:5px 8px!important; border:1px solid var(--theme-line,#9996)!important; border-radius:5px!important; background:transparent!important; background-image:none!important; color:var(--theme-text)!important; font-size:11px!important; line-height:18px!important; box-shadow:none!important; }
html:root body #assistantDrawer .assistant-web-image-actions>.assistant-web-image-reference { color:var(--neutral-accent)!important; border-color:var(--neutral-accent)!important; }
html:root body #assistantDrawer .assistant-web-image-meta a { color:var(--theme-text-secondary)!important; }
html:root body #assistantDrawer .assistant-web-image-preview-label { background:transparent!important; color:var(--theme-text-secondary)!important; }
html:root body #assistantDrawer .assistant-auto-web-reference { display:flex; align-items:center; gap:7px; margin:10px 0; font-size:11px; color:var(--theme-text-secondary); }
.assistant-auto-web-reference input { accent-color:var(--neutral-accent); }
}

/* /workbench-shell.css */
/* ==== consolidated from /workmode-unified.css (cascade order preserved) ==== */
/*
 * Work mode visual convergence
 *
 * This file is intentionally scoped to the project-home work surface.  It is
 * loaded after the legacy workbench sheets, so it can remove the old blue and
 * gradient treatment without changing the editor canvas in #step-edit.
 */

html:root body[data-project-home-mode="work"] {
  --work-bg: #ffffff;
  --work-panel: #f7f7f8;
  --work-surface: #ffffff;
  --work-surface-soft: #f4f4f4;
  --work-text: #2f2f2f;
  --work-muted: #6b6b6b;
  --work-faint: #8b8b8b;
  --work-line: #e5e5e5;
  --work-line-strong: #d9d9d9;
  --work-hover: #f2f2f2;
  --work-active: #ebebeb;
  --work-primary: var(--neutral-accent);
  --work-primary-hover: var(--neutral-accent-strong);
  --work-primary-text: var(--neutral-accent-text);
  --work-composer: #f4f4f4;
  --work-icon: #6b6b6b;
  --work-copy-size: 14px;
  --work-nav-size: 13px;
  --work-tool-size: 13px;
  --work-meta-size: 11px;
  --work-leading: 1.45;
  color: var(--work-text) !important;
  font-size: var(--work-copy-size) !important;
  background: var(--work-bg) !important;
  background-color: var(--work-bg) !important;
  background-image: none !important;
}

html:root[data-theme="dark"] body[data-project-home-mode="work"] {
  --work-bg: #212121;
  --work-panel: #171717;
  --work-surface: #2d2d2f;
  --work-surface-soft: #262626;
  --work-text: #dfdfdf;
  --work-muted: #b4b4b4;
  --work-faint: #8e8e8e;
  --work-line: #3f3f3f;
  --work-line-strong: #4a4a4a;
  --work-hover: #2f2f2f;
  --work-active: #343434;
  --work-primary: var(--neutral-accent);
  --work-primary-hover: var(--neutral-accent-strong);
  --work-primary-text: var(--neutral-accent-text);
  --work-composer: #2f2f2f;
  --work-icon: #b4b4b4;
}

html:root[data-assistant-font-size="small"] body[data-project-home-mode="work"] {
  --work-copy-size: 13px;
  --work-nav-size: 12px;
  --work-tool-size: 12px;
  --work-meta-size: 10px;
  --work-leading: 1.35;
}

html:root[data-assistant-font-size="large"] body[data-project-home-mode="work"] {
  --work-copy-size: 16px;
  --work-nav-size: 15px;
  --work-tool-size: 15px;
  --work-meta-size: 12px;
  --work-leading: 1.55;
}

/* Keep the work home and its internal panels on one flat, neutral surface. */
html:root body[data-project-home-mode="work"] #step-create#step-create,
html:root body[data-project-home-mode="work"] #step-create#step-create > .project-home-shell,
html:root body[data-project-home-mode="work"] #step-create#step-create > .project-home-shell > .project-home-content,
html:root body[data-project-home-mode="work"] #step-create#step-create .project-home-work,
html:root body[data-project-home-mode="work"] #step-create#step-create .project-home-heading,
html:root body[data-project-home-mode="work"] #step-create#step-create .project-home-quick-actions,
html:root body[data-project-home-mode="work"] #step-create#step-create .project-home-recent,
html:root body[data-project-home-mode="work"] #step-create#step-create .project-home-dashboard-rail {
  color: var(--work-text) !important;
  background: var(--work-bg) !important;
  background-color: var(--work-bg) !important;
  background-image: none !important;
  border-color: var(--work-line) !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="work"] #step-create#step-create .project-home-nav {
  color: var(--work-text) !important;
  background: var(--work-bg) !important;
  background-color: var(--work-bg) !important;
  background-image: none !important;
  border-color: var(--work-line) !important;
  box-shadow: none !important;
}

/* Remove decorative colour fields while leaving the supplied IP artwork and
 * brand logo available. */
html:root body[data-project-home-mode="work"] #step-create#step-create
  :is(.heading-art-glow, .heading-art-grid, .quick-action-icon) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="work"] #step-create#step-create
  :is(.project-home-heading-copy > span, .project-home-heading-copy h2,
      .project-home-heading-copy p, .project-home-nav p,
      .project-home-recent, .project-home-recent *, .dashboard-panel,
      .dashboard-panel *, .project-home-quick-actions strong,
      .project-home-quick-actions small) {
  color: var(--work-text) !important;
  -webkit-text-fill-color: var(--work-text) !important;
}

html:root body[data-project-home-mode="work"] #step-create#step-create
  :is(.project-home-heading-copy > span, .project-home-heading-copy p,
      .project-home-nav p, .project-home-recent small,
      .dashboard-panel small, .project-home-quick-actions small) {
  color: var(--work-muted) !important;
  -webkit-text-fill-color: var(--work-muted) !important;
}

/* Navigation and dashboard controls use quiet rows instead of colour blocks. */
html:root body[data-project-home-mode="work"] #step-create#step-create
  :is(.project-home-nav-item, .project-home-open-files,
      .project-home-chat-nav > button, .project-home-primary,
      .project-home-secondary, .project-home-quick-actions > button,
      .dashboard-icon-action, .dashboard-calendar-head button,
      .dashboard-week > button, .dashboard-task-tabs > button,
      .dashboard-task-delete, .dashboard-notice-row, .dashboard-schedule-item) {
  color: var(--work-muted) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="work"] #step-create#step-create
  :is(.project-home-nav-item, .project-home-open-files,
      .project-home-chat-nav > button, .project-home-quick-actions > button,
      .dashboard-icon-action, .dashboard-calendar-head button,
      .dashboard-week > button, .dashboard-task-tabs > button,
      .dashboard-task-delete, .dashboard-notice-row, .dashboard-schedule-item):is(:hover, :focus-visible, .active, [aria-selected="true"]) {
  color: var(--work-text) !important;
  background: var(--work-hover) !important;
  background-color: var(--work-hover) !important;
  background-image: none !important;
  border-color: var(--work-line) !important;
  box-shadow: none !important;
}

/* The two deliberate primary actions remain obvious, but monochrome. */
html:root body[data-project-home-mode="work"] #step-create#step-create
  :is(.project-home-primary, #newProjectBtn, .smart-create-submit,
      .new-project-action-buttons .primary-btn,
      #assistantExecutionConfirmBtn, .assistant-execution-confirm-btn) {
  color: var(--work-primary-text) !important;
  -webkit-text-fill-color: var(--work-primary-text) !important;
  background: var(--work-primary) !important;
  background-color: var(--work-primary) !important;
  background-image: none !important;
  border-color: var(--work-primary) !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="work"] #step-create#step-create
  :is(.project-home-primary, #newProjectBtn, .smart-create-submit,
      .new-project-action-buttons .primary-btn,
      #assistantExecutionConfirmBtn, .assistant-execution-confirm-btn):is(:hover, :focus-visible) {
  background: var(--work-primary-hover) !important;
  background-color: var(--work-primary-hover) !important;
  border-color: var(--work-primary-hover) !important;
}

/* One icon language for work mode. Fluent masks use currentColor as their
 * fill; outline icons retain their normal line shape. */
html:root body[data-project-home-mode="work"] #step-create#step-create
  :is(.project-home-nav, .project-home-work, .project-home-content,
      .project-home-quick-actions, .project-home-dashboard-rail,
      .project-home-chat-nav, .dashboard-panel, .smart-create-composer,
      .smart-create-assist, .smart-create-manual, [data-workspace-tool],
      .quick-action-icon, #assistantDrawer#assistantDrawer)
  :is(svg, svg *, i[data-lucide], [data-lucide], .lucide,
      .fluent-icon-shell, .fluent-icon) {
  color: var(--work-icon) !important;
  -webkit-text-fill-color: var(--work-icon) !important;
  stroke: currentColor !important;
  fill: none !important;
  background-image: none !important;
  filter: none !important;
}

html:root body[data-project-home-mode="work"] #step-create#step-create
  :is(.project-home-nav, .project-home-work, .project-home-content,
      .project-home-quick-actions, .project-home-dashboard-rail,
      .project-home-chat-nav, .dashboard-panel, .smart-create-composer,
      .smart-create-assist, .smart-create-manual, [data-workspace-tool],
      .quick-action-icon, #assistantDrawer#assistantDrawer)
  :is(.fluent-icon-shell, .fluent-icon) {
  background: currentColor !important;
  background-color: currentColor !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}

/* Work home typography follows the three assistant font-size choices. */
html:root body[data-project-home-mode="work"] #step-create#step-create
  :is(.project-home-nav-item, .project-home-open-files,
      .project-home-chat-nav > button, .project-home-quick-actions strong,
      .project-home-quick-actions > button, .dashboard-panel,
      .dashboard-panel button, .dashboard-panel input,
      .dashboard-panel select, .dashboard-panel textarea,
      .smart-create-composer, .smart-create-assist, .smart-create-manual,
      .smart-create-composer button, .smart-create-composer input,
      .smart-create-composer select, .smart-create-composer textarea) {
  font-size: var(--work-tool-size) !important;
  line-height: var(--work-leading) !important;
}

html:root body[data-project-home-mode="work"] #step-create#step-create
  :is(.project-home-quick-actions small, .dashboard-panel small,
      .dashboard-panel time, .project-home-recent small,
      .smart-create-assist small, .smart-create-manual small) {
  font-size: var(--work-meta-size) !important;
  line-height: 1.35 !important;
}

/* Work mode assistant/composer: use the same quiet capsule language as chat. */
html:root body[data-project-home-mode="work"] #assistantDrawer#assistantDrawer
  :is(.assistant-messages, .assistant-context, .assistant-side-workspace,
      .assistant-workspace, .assistant-right-workbench) {
  color: var(--work-text) !important;
  background: var(--work-panel) !important;
  background-color: var(--work-panel) !important;
  background-image: none !important;
  border-color: var(--work-line) !important;
}

html:root body[data-project-home-mode="work"] #assistantDrawer#assistantDrawer #assistantComposer#assistantComposer {
  color: var(--work-text) !important;
  background: var(--work-composer) !important;
  background-color: var(--work-composer) !important;
  background-image: none !important;
  border: 1px solid var(--work-line) !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="work"] #assistantDrawer#assistantDrawer
  #assistantInput#assistantInput {
  color: var(--work-text) !important;
  -webkit-text-fill-color: var(--work-text) !important;
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  font-size: var(--work-copy-size) !important;
  line-height: var(--work-leading) !important;
}

html:root body[data-project-home-mode="work"] #assistantDrawer#assistantDrawer
  #assistantInput#assistantInput::placeholder {
  color: var(--work-muted) !important;
  opacity: 1 !important;
}

html:root body[data-project-home-mode="work"] #assistantDrawer#assistantDrawer
  #assistantComposer#assistantComposer :is(
    #assistantAddBtn, #assistantVoiceInputBtn, #assistantSendBtn,
    #assistantImageSettingsBtn, #assistantPromptEnhanceBtn,
    #assistantQuickToolsBtn, #assistantModeTrigger, #assistantCopyModeTrigger,
    #assistantAdvancedOptionsBtn, #assistantPromptRestoreBtn
  ) {
  color: var(--work-icon) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="work"] #assistantDrawer#assistantDrawer
  #assistantComposer#assistantComposer #assistantSendBtn#assistantSendBtn {
  color: var(--work-primary-text) !important;
  background: var(--work-primary) !important;
  background-color: var(--work-primary) !important;
  border-color: var(--work-primary) !important;
}

html:root body[data-project-home-mode="work"] #assistantDrawer#assistantDrawer
  #assistantComposer#assistantComposer #assistantSendBtn#assistantSendBtn:is(:hover, :focus-visible) {
  background: var(--work-primary-hover) !important;
  background-color: var(--work-primary-hover) !important;
  border-color: var(--work-primary-hover) !important;
}

html:root body[data-project-home-mode="work"] #assistantDrawer#assistantDrawer
  #assistantComposer#assistantComposer :is(
    #assistantAddBtn, #assistantVoiceInputBtn, #assistantSendBtn,
    #assistantImageSettingsBtn, #assistantPromptEnhanceBtn,
    #assistantQuickToolsBtn, #assistantModeTrigger, #assistantCopyModeTrigger,
    #assistantAdvancedOptionsBtn, #assistantPromptRestoreBtn
  ) :is(svg, svg *, i[data-lucide], [data-lucide], .lucide,
      .fluent-icon-shell, .fluent-icon) {
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
  background-image: none !important;
}

html:root body[data-project-home-mode="work"] #assistantDrawer#assistantDrawer
  #assistantComposer#assistantComposer :is(
    #assistantAddBtn, #assistantVoiceInputBtn, #assistantSendBtn,
    #assistantImageSettingsBtn, #assistantPromptEnhanceBtn,
    #assistantQuickToolsBtn, #assistantModeTrigger, #assistantCopyModeTrigger,
    #assistantAdvancedOptionsBtn, #assistantPromptRestoreBtn
  ) :is(.fluent-icon-shell, .fluent-icon) {
  background: currentColor !important;
  background-color: currentColor !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
}

/* Workbench cards and popovers inherit the same neutral surfaces. */
html:root body[data-project-home-mode="work"] #step-create#step-create
  :is(.project-card, .project-home-card, .dashboard-panel,
      .smart-create-composer, .smart-create-assist, .smart-create-manual,
      .home-style-library, .assistant-task-card, .assistant-action-preview,
      .assistant-work-tools, .assistant-work-tools-body, .assistant-context-block,
      .assistant-service-notice, .assistant-status, .assistant-generated-result,
      .assistant-generated-image-card, .assistant-workbench-subsection) {
  color: var(--work-text) !important;
  background: var(--work-surface) !important;
  background-color: var(--work-surface) !important;
  background-image: none !important;
  border-color: var(--work-line) !important;
  box-shadow: none !important;
}

html:root body[data-project-home-mode="work"] #step-create#step-create
  :is(.project-card, .project-home-card, .dashboard-panel,
      .smart-create-composer, .smart-create-assist, .smart-create-manual,
      .home-style-library, .assistant-task-card, .assistant-action-preview,
      .assistant-work-tools, .assistant-work-tools-body, .assistant-context-block,
      .assistant-service-notice, .assistant-status, .assistant-generated-result,
      .assistant-generated-image-card, .assistant-workbench-subsection) :is(
        strong, b, h1, h2, h3, h4, p, span, label, dt, dd, li) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Once a project enters the real editor, keep only the editor chrome neutral.
 * The slide itself is deliberately excluded so the user's artwork keeps its
 * own colours. */
html:root body.workbench-editor-active {
  --editor-chrome-bg: #ffffff;
  --editor-chrome-surface: #f7f7f8;
  --editor-chrome-text: #2f2f2f;
  --editor-chrome-muted: #6b6b6b;
  --editor-chrome-line: #e5e5e5;
}
html:root[data-theme="dark"] body.workbench-editor-active {
  --editor-chrome-bg: #212121;
  --editor-chrome-surface: #171717;
  --editor-chrome-text: #dfdfdf;
  --editor-chrome-muted: #b4b4b4;
  --editor-chrome-line: #3f3f3f;
}
html:root body.workbench-editor-active #appShell > .topbar,
html:root body.workbench-editor-active #step-edit .editor-top-ribbon,
html:root body.workbench-editor-active #step-edit .thumb-panel,
html:root body.workbench-editor-active #step-edit .inspector,
html:root body.workbench-editor-active #step-edit .canvas-toolbar,
html:root body.workbench-editor-active #step-edit .office-status-bar,
html:root body.workbench-editor-active #step-edit .speaker-notes-panel {
  color: var(--editor-chrome-text) !important;
  background: var(--editor-chrome-bg) !important;
  background-color: var(--editor-chrome-bg) !important;
  background-image: none !important;
  border-color: var(--editor-chrome-line) !important;
  box-shadow: none !important;
}
html:root body.workbench-editor-active #step-edit
  :is(.ribbon-tool, .ribbon-select, .ribbon-number, .ribbon-color,
      .inspector-toolbox .ghost-btn, .inspector-toolbox .danger-btn,
      .inspector-toolbox .ribbon-tool, .editor-left-tabs button,
      .editor-workflow-action, .document-tab) {
  color: var(--editor-chrome-muted) !important;
  background: var(--editor-chrome-surface) !important;
  background-color: var(--editor-chrome-surface) !important;
  background-image: none !important;
  border-color: var(--editor-chrome-line) !important;
  box-shadow: none !important;
}
html:root body.workbench-editor-active #step-edit
  :is(.ribbon-tool, .ribbon-select, .ribbon-number, .ribbon-color,
      .inspector-toolbox .ghost-btn, .inspector-toolbox .danger-btn,
      .inspector-toolbox .ribbon-tool, .editor-left-tabs button,
      .editor-workflow-action, .document-tab):is(:hover, :focus-visible, .active, [aria-selected="true"]) {
  color: var(--editor-chrome-text) !important;
  background: var(--work-hover, #f2f2f2) !important;
  background-color: var(--work-hover, #f2f2f2) !important;
  border-color: var(--editor-chrome-line) !important;
}
html:root[data-theme="dark"] body.workbench-editor-active #step-edit
  :is(.ribbon-tool, .ribbon-select, .ribbon-number, .ribbon-color,
      .inspector-toolbox .ghost-btn, .inspector-toolbox .danger-btn,
      .inspector-toolbox .ribbon-tool, .editor-left-tabs button,
      .editor-workflow-action, .document-tab):is(:hover, :focus-visible, .active, [aria-selected="true"]) {
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
}
html:root body.workbench-editor-active #step-edit
  :is(.ribbon-tool, .ribbon-select, .ribbon-number, .ribbon-color,
      .inspector-toolbox .ghost-btn, .inspector-toolbox .danger-btn,
      .inspector-toolbox .ribbon-tool, .editor-left-tabs button,
      .editor-workflow-action, .document-tab)
  :is(svg, svg *, i[data-lucide], .fluent-icon-shell, .fluent-icon) {
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
  background-image: none !important;
}

@media (max-width: 980px) {
  html:root body[data-project-home-mode="work"] #step-create#step-create
    :is(.project-home-content, .project-home-work) {
    overflow-x: hidden !important;
  }
}

/* Legacy workmate rules repeat #step-create and set fixed 13px/white icon
 * values. These final ID repetitions deliberately win while staying scoped to
 * the work home. */
html:root body[data-project-home-mode="work"] #appShell#appShell
  #step-create#step-create .project-home-quick-actions#projectHomeQuickActions,
html:root body[data-project-home-mode="work"] #appShell#appShell
  #step-create#step-create .project-home-quick-actions {
  font-size: var(--work-tool-size) !important;
}

html:root body[data-project-home-mode="work"] #appShell#appShell
  #step-create#step-create .project-home-quick-actions
  > button > span:last-child > strong,
html:root body[data-project-home-mode="work"] #appShell#appShell
  #step-create#step-create .project-home-quick-actions
  > button > span:last-child > small {
  font-size: var(--work-tool-size) !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: var(--work-leading) !important;
  color: var(--work-text) !important;
  -webkit-text-fill-color: var(--work-text) !important;
}

/* The earlier shared layout sheet has a direct `strong, small { 13px }`
 * declaration. Match that selector and keep the local setting authoritative. */
html:root body[data-project-home-mode="work"] #step-create#step-create
  .project-home-quick-actions :is(strong, small) {
  font-size: var(--work-tool-size) !important;
  line-height: var(--work-leading) !important;
}

html:root body[data-project-home-mode="work"] #appShell#appShell
  #step-create#step-create .project-home-quick-actions
  > button > span:last-child > small {
  font-size: var(--work-meta-size) !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  color: var(--work-muted) !important;
  -webkit-text-fill-color: var(--work-muted) !important;
}

html:root body[data-project-home-mode="work"] #appShell#appShell
  #step-create#step-create .project-home-quick-actions
  .quick-action-icon,
html:root body[data-project-home-mode="work"] #appShell#appShell
  #step-create#step-create .project-home-quick-actions
  .quick-action-icon :is(svg, i, .fluent-icon-shell, .fluent-icon) {
  color: var(--work-icon) !important;
  -webkit-text-fill-color: var(--work-icon) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* Final editor chrome convergence: workflow tabs and tool states use the
 * neutral Codex-like palette. Artwork inside .slide-canvas is excluded. */
html:root body.workbench-editor-active {
  --editor-chrome-primary: #2f2f2f;
  --editor-chrome-primary-text: #ffffff;
}
html:root[data-theme="dark"] body.workbench-editor-active {
  --editor-chrome-primary: #dfdfdf;
  --editor-chrome-primary-text: #212121;
}
html:root body.workbench-editor-active #appShell > .topbar
  :is(.editor-workflow-action, #workbenchModeBridge > button) {
  color: var(--editor-chrome-muted) !important;
  background: var(--editor-chrome-bg) !important;
  background-color: var(--editor-chrome-bg) !important;
  background-image: none !important;
  border-color: var(--editor-chrome-line) !important;
  box-shadow: none !important;
}
html:root body.workbench-editor-active #appShell > .topbar
  :is(.editor-workflow-action, #workbenchModeBridge > button):is(:hover, :focus-visible, .active, [aria-selected="true"]) {
  color: var(--editor-chrome-text) !important;
  background: var(--editor-chrome-surface) !important;
  background-color: var(--editor-chrome-surface) !important;
  background-image: none !important;
  border-color: var(--editor-chrome-line) !important;
  box-shadow: none !important;
}
html:root[data-theme="dark"] body.workbench-editor-active #appShell > .topbar
  :is(.editor-workflow-action, #workbenchModeBridge > button):is(:hover, :focus-visible, .active, [aria-selected="true"]) {
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
}
html:root body.workbench-editor-active #step-edit
  :is(.editor-top-ribbon button, .canvas-toolbar button, .thumb-panel button,
      .inspector button, .office-status-bar button, .rail-item)
  :is(:hover, :focus-visible, .active, [aria-selected="true"], [aria-pressed="true"]) {
  color: var(--editor-chrome-text) !important;
  background: var(--editor-chrome-surface) !important;
  background-color: var(--editor-chrome-surface) !important;
  background-image: none !important;
  border-color: var(--editor-chrome-line) !important;
  box-shadow: none !important;
}
html:root body.workbench-editor-active #step-edit
  :is(.ribbon-tool, .ribbon-select, .ribbon-number, .ribbon-color,
      .inspector-toolbox .ghost-btn, .inspector-toolbox .danger-btn,
      .inspector-toolbox .ribbon-tool, .editor-left-tabs button,
      .document-tab):is(.active, [aria-selected="true"], [aria-pressed="true"]) {
  color: var(--editor-chrome-primary-text) !important;
  background: var(--editor-chrome-primary) !important;
  background-color: var(--editor-chrome-primary) !important;
  border-color: var(--editor-chrome-primary) !important;
  box-shadow: none !important;
}

/* Final editor chrome convergence ------------------------------------------------
 * The editable canvas is the product surface; its artwork is deliberately left
 * untouched. Everything around it uses the same quiet monochrome language in
 * both themes, including the ribbon, page rail, tool rail, inspector, status
 * bar, notes dock and editor popovers.
 */
html:root body.workbench-editor-active {
  --editor-chrome-bg: #ffffff;
  --editor-chrome-surface: #f7f7f8;
  --editor-chrome-surface-strong: #f0f0f1;
  --editor-chrome-text: #2f2f2f;
  --editor-chrome-muted: #6b6b6b;
  --editor-chrome-faint: #8b8b8b;
  --editor-chrome-line: #e5e5e5;
  --editor-chrome-line-strong: #d8d8d8;
  --editor-chrome-hover: #f1f1f2;
  --editor-chrome-active: #e8e8e9;
  color: var(--editor-chrome-text) !important;
  background: var(--editor-chrome-bg) !important;
  background-color: var(--editor-chrome-bg) !important;
  background-image: none !important;
}
html:root[data-theme="dark"] body.workbench-editor-active {
  --editor-chrome-bg: #212121;
  --editor-chrome-surface: #2d2d2f;
  --editor-chrome-surface-strong: #343436;
  --editor-chrome-text: #dfdfdf;
  --editor-chrome-muted: #b4b4b4;
  --editor-chrome-faint: #8e8e8e;
  --editor-chrome-line: #3f3f3f;
  --editor-chrome-line-strong: #4a4a4a;
  --editor-chrome-hover: #303032;
  --editor-chrome-active: #38383a;
}

html:root body.workbench-editor-active #step-edit,
html:root body.workbench-editor-active #step-edit.editor-layout,
html:root body.workbench-editor-active #step-edit > .editor-top-ribbon,
html:root body.workbench-editor-active #step-edit > .thumb-panel,
html:root body.workbench-editor-active #step-edit > .canvas-area,
html:root body.workbench-editor-active #step-edit > .inspector,
html:root body.workbench-editor-active #step-edit > .editor-tool-rail,
html:root body.workbench-editor-active #step-edit > .editor-workflow-workspace,
html:root body.workbench-editor-active #step-edit > .copy-planning-workspace {
  color: var(--editor-chrome-text) !important;
  background: var(--editor-chrome-bg) !important;
  background-color: var(--editor-chrome-bg) !important;
  background-image: none !important;
  border-color: var(--editor-chrome-line) !important;
  box-shadow: none !important;
}

/* Keep the canvas stage neutral; only #slideCanvas and its artwork retain
 * project colours. The grid is intentionally removed to avoid a busy gradient. */
html:root body.workbench-editor-active #step-edit
  :is(.office-canvas-shell, .office-canvas-body, .slide-stage, .office-ruler,
      .office-status-bar, .speaker-notes-panel, .editor-notes-dock) {
  color: var(--editor-chrome-muted) !important;
  background: var(--editor-chrome-surface) !important;
  background-color: var(--editor-chrome-surface) !important;
  background-image: none !important;
  border-color: var(--editor-chrome-line) !important;
  box-shadow: none !important;
}
html:root body.workbench-editor-active #step-edit .slide-pasteboard {
  background: transparent !important;
  background-image: none !important;
}

/* Toolbar, page rail, tools and inspector use one compact control treatment. */
html:root body.workbench-editor-active #step-edit
  :is(.editor-top-ribbon, .canvas-toolbar, .editor-ribbon, .thumb-panel,
      .inspector, .editor-tool-rail, .editor-workflow-workspace,
      .copy-planning-workspace, .editor-left-view, .inspector-body,
      .editor-layer-list, .inspector-tool-section, .workflow-inspector-section,
      .panel-head, .editor-left-actions, .editor-left-tabs, .inspector-view-tabs,
      .editor-notes-tabs) {
  border-color: var(--editor-chrome-line) !important;
  background-color: var(--editor-chrome-bg) !important;
  background-image: none !important;
  color: var(--editor-chrome-text) !important;
  box-shadow: none !important;
}
html:root body.workbench-editor-active #step-edit
  :is(.ribbon-group, .ribbon-tool, .ribbon-select, .ribbon-number, .ribbon-color,
      .editor-tool-rail > button, .editor-left-tabs > button,
      .inspector-view-tabs > button, .editor-notes-tabs > button,
      .inspector-toolbox button, .inspector-toolbox .ghost-btn,
      .inspector-toolbox .danger-btn, .editor-workflow-action,
      .document-tab, .status-bar-btn, .slide-show-control,
      .editor-panel-new-project, .icon-btn, .ghost-btn, .primary-btn) {
  background: var(--editor-chrome-surface) !important;
  background-color: var(--editor-chrome-surface) !important;
  background-image: none !important;
  border-color: var(--editor-chrome-line) !important;
  color: var(--editor-chrome-muted) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html:root body.workbench-editor-active #step-edit
  :is(.ribbon-tool, .ribbon-select, .ribbon-number, .ribbon-color,
      .editor-tool-rail > button, .editor-left-tabs > button,
      .inspector-view-tabs > button, .editor-notes-tabs > button,
      .inspector-toolbox button, .inspector-toolbox .ghost-btn,
      .inspector-toolbox .danger-btn, .editor-workflow-action,
      .document-tab, .status-bar-btn, .slide-show-control,
      .editor-panel-new-project, .icon-btn, .ghost-btn, .primary-btn):is(:hover, :focus-visible, .active, [aria-selected="true"]) {
  background: var(--editor-chrome-hover) !important;
  background-color: var(--editor-chrome-hover) !important;
  border-color: var(--editor-chrome-line-strong) !important;
  color: var(--editor-chrome-text) !important;
  box-shadow: none !important;
}
html:root body.workbench-editor-active #step-edit
  :is(.ribbon-tool.active, .editor-tool-rail > button.active,
      .editor-left-tabs > button.active, .inspector-view-tabs > button.active,
      .editor-notes-tabs > button.active, .editor-workflow-action.active,
      .document-tab.active, .status-bar-btn.active) {
  background: var(--editor-chrome-active) !important;
  background-color: var(--editor-chrome-active) !important;
  border-color: var(--editor-chrome-line-strong) !important;
  color: var(--editor-chrome-text) !important;
}
html:root body.workbench-editor-active #step-edit
  :is(.primary-btn, .ribbon-tool.primary, .compact-btn.primary, .danger-btn):not(:disabled) {
  background: var(--editor-chrome-surface-strong) !important;
  background-color: var(--editor-chrome-surface-strong) !important;
  border-color: var(--editor-chrome-line-strong) !important;
  color: var(--editor-chrome-text) !important;
}
html:root body.workbench-editor-active #step-edit
  :is(.ribbon-tool, .ribbon-select, .ribbon-number, .ribbon-color,
      .editor-tool-rail > button, .editor-left-tabs > button,
      .inspector-view-tabs > button, .editor-notes-tabs > button,
      .inspector-toolbox button, .editor-workflow-action, .document-tab,
      .status-bar-btn, .slide-show-control, .editor-panel-new-project,
      .icon-btn, .ghost-btn, .primary-btn)
  :is(svg, svg *, i[data-lucide], [data-lucide], .lucide,
      .fluent-icon-shell, .fluent-icon) {
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
  background-image: none !important;
  filter: none !important;
}

/* Neutralize legacy blue/gradient decoration on editor chrome and popovers. */
html:root body.workbench-editor-active #step-edit
  :is(.design-category-toolbar, .design-category-toolbar-main,
      .design-category-toolbar-workspace, .design-category-toolbar-specs,
      .design-category-toolbar-end, .floating-editor-tools, .selection-tools,
      .slide-browser-popover, .editor-popover, .editor-dropdown,
      .workflow-smart-command, .workflow-inspector-section,
      .delivery-preflight-panel, .delivery-readiness, .desktop-modal,
      .modal-content, .popover-content, [role="dialog"], [role="menu"]) {
  color: var(--editor-chrome-text) !important;
  background: var(--editor-chrome-bg) !important;
  background-color: var(--editor-chrome-bg) !important;
  background-image: none !important;
  border-color: var(--editor-chrome-line) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}
html:root[data-theme="dark"] body.workbench-editor-active #step-edit
  :is(.design-category-toolbar, .design-category-toolbar-main,
      .design-category-toolbar-workspace, .design-category-toolbar-specs,
      .design-category-toolbar-end, .floating-editor-tools, .selection-tools,
      .slide-browser-popover, .editor-popover, .editor-dropdown,
      .workflow-smart-command, .workflow-inspector-section,
      .delivery-preflight-panel, .delivery-readiness, .desktop-modal,
      .modal-content, .popover-content, [role="dialog"], [role="menu"]) {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
}

/* Neutral controls and readable panel copy. */
html:root body.workbench-editor-active #step-edit
  :is(input:not([type="color"]), select, textarea) {
  color: var(--editor-chrome-text) !important;
  background: var(--editor-chrome-surface) !important;
  background-color: var(--editor-chrome-surface) !important;
  background-image: none !important;
  border-color: var(--editor-chrome-line) !important;
  box-shadow: none !important;
}
html:root body.workbench-editor-active #step-edit
  :is(input:not([type="color"]), select, textarea)::placeholder {
  color: var(--editor-chrome-faint) !important;
  opacity: 1 !important;
}
html:root body.workbench-editor-active #step-edit
  :is(.panel-head h2, .ribbon-title, .inspector-tool-section h3,
      .workflow-inspector-section > summary, .editor-tool-rail span,
      .editor-left-tabs span, .inspector-view-tabs span, .editor-notes-tabs span,
      .status-bar-summary, .status-bar-view-tools, .status-bar-zoom,
      .notes-meta, .speaker-notes-head, .panel-head, label, small) {
  color: var(--editor-chrome-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* The selection outline is interface chrome, never part of the artwork. */
html:root body.workbench-editor-active #step-edit #slideCanvas
  :is(.selection-overlay, .element-resize-handle, .element-rotate-handle,
      .selection-box, .multi-selection-overlay) {
  border-color: var(--editor-chrome-muted) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
html:root body.workbench-editor-active #step-edit #slideCanvas
  :is(.selection-overlay, .element-resize-handle, .element-rotate-handle,
      .selection-box, .multi-selection-overlay)::before,
html:root body.workbench-editor-active #step-edit #slideCanvas
  :is(.selection-overlay, .element-resize-handle, .element-rotate-handle,
      .selection-box, .multi-selection-overlay)::after {
  border-color: var(--editor-chrome-muted) !important;
  background: var(--editor-chrome-bg) !important;
  background-image: none !important;
}

@media (max-width: 980px) {
  html:root body.workbench-editor-active #step-edit
    :is(.editor-tool-rail, .editor-left-tabs, .inspector-view-tabs) {
    background: var(--editor-chrome-bg) !important;
  }
}

/* Hard overrides for legacy selectors that are loaded after the unified sheet. */
html[data-theme="dark"] body.workbench-editor-active #appShell > .topbar
  #workbenchModeBridge > button.active {
  color: #dfdfdf !important;
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  border-color: #3f3f3f !important;
}
html[data-theme="dark"] body.workbench-editor-active #appShell > .topbar
  .editor-workflow-action.active {
  color: #dfdfdf !important;
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  border-color: #3f3f3f !important;
}
html:not([data-theme="dark"]) body.workbench-editor-active #appShell > .topbar
  :is(#workbenchModeBridge > button.active, .editor-workflow-action.active) {
  color: #2f2f2f !important;
  background: #f7f7f8 !important;
  background-color: #f7f7f8 !important;
  border-color: #e5e5e5 !important;
}
html[data-theme="dark"] body.workbench-editor-active #step-edit .ribbon-tool.active,
html[data-theme="dark"] body.workbench-editor-active #step-edit .editor-left-tabs button.active {
  color: #212121 !important;
  background: #dfdfdf !important;
  background-color: #dfdfdf !important;
  border-color: #dfdfdf !important;
}
html:not([data-theme="dark"]) body.workbench-editor-active #step-edit .ribbon-tool.active,
html:not([data-theme="dark"]) body.workbench-editor-active #step-edit .editor-left-tabs button.active {
  color: #ffffff !important;
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  border-color: #2f2f2f !important;
}
html[data-theme="dark"] body.workbench-editor-active #step-edit
  :is(.canvas-area, .office-canvas-shell, .office-canvas-body, .slide-stage,
      .editor-main, .editor-content, .canvas-stage-wrap) {
  background: #212121 !important;
  background-color: #212121 !important;
  background-image: none !important;
}
html:not([data-theme="dark"]) body.workbench-editor-active #step-edit
  :is(.canvas-area, .office-canvas-shell, .office-canvas-body, .editor-main,
      .editor-content, .canvas-stage-wrap) {
  background: #f7f7f8 !important;
  background-color: #f7f7f8 !important;
  background-image: none !important;
}

/* Remove the legacy blue grid from the editor work surface. The actual
 * slide remains untouched and keeps the user's design colours. */
html:not([data-theme="dark"]) body.workbench-editor-active #step-edit .canvas-area,
html[data-theme="dark"] body.workbench-editor-active #step-edit .canvas-area {
  background-color: var(--editor-chrome-surface) !important;
  background-image: none !important;
}
html[data-theme="dark"] body.workbench-editor-active #step-edit .canvas-area {
  background-color: #212121 !important;
}
/* Last cascade guard: legacy base sheets contain strong editor selectors.  Keep
 * the work surface monochrome even when those layers are present. */
html:root body.workbench-editor-active #step-edit > .canvas-area,
html:root body.workbench-editor-active #step-edit .canvas-area {
  background: var(--editor-chrome-surface) !important;
  background-color: var(--editor-chrome-surface) !important;
  background-image: none !important;
  border-color: var(--editor-chrome-line) !important;
  box-shadow: none !important;
}
html:root body.workbench-editor-active #step-edit > .thumb-panel,
html:root body.workbench-editor-active #step-edit .thumb-panel,
html:root body.workbench-editor-active #step-edit > .inspector,
html:root body.workbench-editor-active #step-edit .inspector,
html:root body.workbench-editor-active #step-edit > .editor-top-ribbon,
html:root body.workbench-editor-active #step-edit .editor-top-ribbon {
  background: var(--editor-chrome-bg) !important;
  background-color: var(--editor-chrome-bg) !important;
  background-image: none !important;
  border-color: var(--editor-chrome-line) !important;
  box-shadow: none !important;
}
html:root body.workbench-editor-active #step-edit
  :is(.office-canvas-shell, .office-canvas-body, .slide-stage,
      .office-ruler, .office-status-bar, .speaker-notes-panel,
      .editor-notes-dock) {
  background: var(--editor-chrome-surface) !important;
  background-color: var(--editor-chrome-surface) !important;
  background-image: none !important;
  border-color: var(--editor-chrome-line) !important;
  box-shadow: none !important;
}

/* Highest-specificity reset for the editor stage. Older theme layers target
 * #step-edit directly and are loaded before this file; these selectors ensure
 * their blue grid and gradients cannot leak into the work surface. */
html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit > .canvas-area,
html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit .canvas-area {
  background: var(--editor-chrome-surface) !important;
  background-color: var(--editor-chrome-surface) !important;
  background-image: none !important;
  border-color: var(--editor-chrome-line) !important;
  box-shadow: none !important;
}
html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit
  :is(.office-canvas-shell, .office-canvas-body, .slide-stage, .office-ruler,
      .office-status-bar, .speaker-notes-panel, .editor-notes-dock) {
  background: var(--editor-chrome-surface) !important;
  background-color: var(--editor-chrome-surface) !important;
  background-image: none !important;
  border-color: var(--editor-chrome-line) !important;
  box-shadow: none !important;
}
html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit
  :is(> .thumb-panel, .thumb-panel, > .inspector, .inspector,
      > .editor-top-ribbon, .editor-top-ribbon, > .editor-tool-rail, .editor-tool-rail) {
  background: var(--editor-chrome-bg) !important;
  background-color: var(--editor-chrome-bg) !important;
  background-image: none !important;
  border-color: var(--editor-chrome-line) !important;
  box-shadow: none !important;
}

/* Ensure the real canvas stage receives the same variables as its chrome. */
html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit > .canvas-area {
  --editor-chrome-surface: #f7f7f8;
  --editor-chrome-line: #e5e5e5;
  background-color: #f7f7f8 !important;
  background-image: none !important;
}
html[data-theme="dark"] body.workbench-editor-active #appShell#appShell #step-edit#step-edit > .canvas-area {
  --editor-chrome-surface: #212121;
  --editor-chrome-line: #3f3f3f;
  background-color: #212121 !important;
  background-image: none !important;
}
html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit > .canvas-area
  :is(.office-canvas-shell, .office-canvas-body, .slide-stage) {
  background-color: #f7f7f8 !important;
  background-image: none !important;
  border-color: #e5e5e5 !important;
}
html[data-theme="dark"] body.workbench-editor-active #appShell#appShell #step-edit#step-edit > .canvas-area
  :is(.office-canvas-shell, .office-canvas-body, .slide-stage) {
  background-color: #212121 !important;
  background-image: none !important;
  border-color: #3f3f3f !important;
}

/* ==== consolidated from /workbench-shell.css (cascade order preserved) ==== */
/* Unified Work surface shell
   The work tab is a single professional surface: an existing project opens
   the real canvas, and an empty work tab stays a quiet launchpad. Keep this
   file structural only; generated artwork inside .slide-canvas is untouched. */

body.workbench-editor-active #step-create {
  display: none !important;
}

.workbench-mode-bridge {
  display: none;
  align-items: center;
  gap: 2px;
  margin-inline: 8px;
  padding: 2px;
  border: 1px solid var(--minimal-line, #e5e5e5);
  border-radius: 8px;
  background: transparent;
}

body.workbench-editor-active .workbench-mode-bridge {
  display: inline-flex;
}

.workbench-mode-bridge > button {
  min-width: 42px;
  min-height: 28px;
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--minimal-muted, #737373);
  font: inherit;
  cursor: pointer;
}

.workbench-mode-bridge > button.active {
  background: var(--minimal-subtle, #f5f5f5);
  color: var(--minimal-text, #292929);
}

html[data-theme="dark"] .workbench-mode-bridge {
  --minimal-line: #383838;
  --minimal-subtle: #252525;
  --minimal-text: #d7d7d7;
  --minimal-muted: #a7a7a7;
}

@media (max-width: 900px) {
  /* Home/chat only. Editor dual �Ի�|���� switch must remain visible. */
  body:not(.workbench-editor-active) .workbench-mode-bridge { display: none; }
}

body.workbench-editor-active #step-edit {
  display: grid !important;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

body.workbench-editor-active .project-home-mode-switch,
body.workbench-editor-active .project-home-nav,
body.workbench-editor-active .project-home-chat-topbar {
  display: none !important;
}

/* The editor already has a page rail, canvas and inspector. Give it stable
   geometry so the workspace never collapses into stacked dashboard cards. */
body.workbench-editor-active .editor-layout {
  grid-template-columns: minmax(180px, 236px) minmax(0, 1fr) minmax(260px, 320px) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
}

body.workbench-editor-active .thumb-panel,
body.workbench-editor-active .inspector,
body.workbench-editor-active .canvas-area {
  min-height: 0 !important;
  overflow: hidden !important;
}

body.workbench-editor-active .canvas-area {
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

body.workbench-editor-active .office-canvas-shell,
body.workbench-editor-active .office-canvas-body,
body.workbench-editor-active .slide-stage {
  min-width: 0 !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}

/* Empty work home: keep the useful actions but make it read like a launchpad,
   not a second app full of decorative cards. */
body.workbench-home-active #projectHomeWork {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px clamp(22px, 4vw, 58px) 72px;
  overflow: auto;
}

/* Empty work mode is a launch page, so it keeps the topbar and fills the
 * remaining viewport with the project-home shell. The editor-only three-row
 * geometry must never collapse this surface to a zero-height workspace. */
body.workbench-home-active #appShell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 56px minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.workbench-home-active #appShell > .topbar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
}
body.workbench-home-active #appShell > #documentTabsBar {
  display: none !important;
}
body.workbench-home-active #appShell > .workspace {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.workbench-home-active #appShell > .rail {
  display: none !important;
}
body.workbench-home-active #step-create,
body.workbench-home-active #step-create > .project-home-shell {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
body.workbench-home-active #step-create {
  overflow: hidden !important;
}
body.workbench-home-active #step-create > .project-home-shell {
  grid-template-columns: 220px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  overflow: hidden !important;
}
body.workbench-home-active #step-create > .project-home-shell > .project-home-nav,
body.workbench-home-active #step-create > .project-home-shell > .project-home-content {
  min-height: 0 !important;
  height: 100% !important;
}

body.workbench-home-active .project-home-heading {
  min-height: 0 !important;
  padding: 10px 0 24px !important;
}

body.workbench-home-active .project-home-heading-art,
body.workbench-home-active .heading-art-glow,
body.workbench-home-active .heading-art-grid {
  display: none !important;
}

body.workbench-home-active .project-home-quick-actions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2px !important;
  padding: 8px 0 22px !important;
  border-bottom: 1px solid var(--minimal-line, #e5e5e5) !important;
}

body.workbench-home-active .project-home-quick-actions > button {
  min-height: 54px !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.workbench-home-active .project-home-quick-actions > button:hover,
body.workbench-home-active .project-home-quick-actions > button:focus-visible {
  background: var(--minimal-subtle, #f5f5f5) !important;
  transform: none !important;
}

body.workbench-home-active .quick-action-icon {
  width: 16px !important;
  height: 16px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.workbench-home-active .project-home-dashboard-rail {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px !important;
  margin-top: 24px !important;
}

body.workbench-home-active .dashboard-panel {
  border: 0 !important;
  border-top: 1px solid var(--minimal-line, #e5e5e5) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.workbench-home-active #smartCreate .smart-create-composer {
  border: 1px solid var(--minimal-line, #e5e5e5) !important;
  border-radius: 14px !important;
  background: var(--minimal-surface, #fff) !important;
  box-shadow: none !important;
}

body.workbench-home-active .smart-create-assist {
  display: none !important;
}

@media (max-width: 900px) {
  body.workbench-home-active .project-home-dashboard-rail {
    grid-template-columns: 1fr;
  }
  body.workbench-editor-active .editor-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.workbench-editor-active .thumb-panel,
  body.workbench-editor-active .inspector {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.workbench-home-active *, body.workbench-editor-active * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Loaded after the shell structural sheet: final mode bridge colours. */
html[data-theme="dark"] body.workbench-editor-active .workbench-mode-bridge > button.active {
  color: #dfdfdf !important;
  background: #2f2f2f !important;
  background-color: #2f2f2f !important;
  border-color: #3f3f3f !important;
}
html:not([data-theme="dark"]) body.workbench-editor-active .workbench-mode-bridge > button.active {
  color: #2f2f2f !important;
  background: #f7f7f8 !important;
  background-color: #f7f7f8 !important;
  border-color: #e5e5e5 !important;
}

/* Highest-specificity dark bridge rule; the legacy active token otherwise
 * wins through the old topbar cascade. */
html[data-theme="dark"] body.workbench-editor-active#bodyRoot #appShell > header.topbar #workbenchModeBridge.workbench-mode-bridge > button.active,
html[data-theme="dark"] body.workbench-editor-active #appShell > header.topbar #workbenchModeBridge.workbench-mode-bridge > button.active {
  color: #dfdfdf !important;
  background-color: #2f2f2f !important;
  background-image: none !important;
  border-color: #3f3f3f !important;
}

/* Final canvas pasteboard cleanup (loaded last after legacy styles). */
html:root body.workbench-editor-active #step-edit > .canvas-area,
html:root body.workbench-editor-active #step-edit.canvas-area {
  background: #f7f7f8 !important;
  background-color: #f7f7f8 !important;
  background-image: none !important;
}
html[data-theme="dark"] body.workbench-editor-active #step-edit > .canvas-area,
html[data-theme="dark"] body.workbench-editor-active #step-edit.canvas-area {
  background: #212121 !important;
  background-color: #212121 !important;
  background-image: none !important;
}

/* Final neutral workbench surface bridge.  This file is loaded after the
 * legacy editor sheets, so these selectors intentionally pin the outer
 * editor chrome while leaving #slideCanvas artwork untouched. */
html:root body.workbench-editor-active#bodyRoot #appShell#appShell #step-edit#step-edit > .canvas-area,
html:root body.workbench-editor-active#bodyRoot #appShell#appShell #step-edit#step-edit > .thumb-panel,
html:root body.workbench-editor-active#bodyRoot #appShell#appShell #step-edit#step-edit > .inspector,
html:root body.workbench-editor-active#bodyRoot #appShell#appShell #step-edit#step-edit > .editor-tool-rail,
html:root body.workbench-editor-active#bodyRoot #appShell#appShell #step-edit#step-edit > .editor-top-ribbon {
  background: #f7f7f8 !important;
  background-color: #f7f7f8 !important;
  background-image: none !important;
  border-color: #e5e5e5 !important;
  box-shadow: none !important;
}

html:root body.workbench-editor-active#bodyRoot #appShell#appShell #step-edit#step-edit
  :is(.office-canvas-shell, .office-canvas-body, .slide-stage, .office-ruler,
      .canvas-toolbar, .editor-ribbon, .editor-left-tabs, .inspector-view-tabs,
      .office-status-bar, .editor-notes-dock) {
  background: #f7f7f8 !important;
  background-color: #f7f7f8 !important;
  background-image: none !important;
  border-color: #e5e5e5 !important;
  box-shadow: none !important;
}

html:root body.workbench-editor-active#bodyRoot #appShell#appShell #step-edit#step-edit
  :is(.editor-top-ribbon, .editor-tool-rail, .thumb-panel, .inspector)
  :is(button, input, select, textarea, .panel-head, .workflow-inspector-section > summary) {
  border-color: #e5e5e5 !important;
  box-shadow: none !important;
}

html:root body.workbench-editor-active#bodyRoot #appShell#appShell #step-edit#step-edit
  :is(.editor-top-ribbon, .editor-tool-rail, .thumb-panel, .inspector,
      .office-status-bar, .editor-notes-dock) {
  color: #2f2f2f !important;
}

html:root body.workbench-editor-active#bodyRoot #appShell#appShell #step-edit#step-edit
  :is(.editor-top-ribbon, .editor-tool-rail, .thumb-panel, .inspector,
      .office-status-bar, .editor-notes-dock) :is(small, .muted, .hint, [aria-description]) {
  color: #6b6b6b !important;
}

html[data-theme="dark"] body.workbench-editor-active#bodyRoot #appShell#appShell #step-edit#step-edit > .canvas-area,
html[data-theme="dark"] body.workbench-editor-active#bodyRoot #appShell#appShell #step-edit#step-edit > .thumb-panel,
html[data-theme="dark"] body.workbench-editor-active#bodyRoot #appShell#appShell #step-edit#step-edit > .inspector,
html[data-theme="dark"] body.workbench-editor-active#bodyRoot #appShell#appShell #step-edit#step-edit > .editor-tool-rail,
html[data-theme="dark"] body.workbench-editor-active#bodyRoot #appShell#appShell #step-edit#step-edit > .editor-top-ribbon,
html[data-theme="dark"] body.workbench-editor-active#bodyRoot #appShell#appShell #step-edit#step-edit
  :is(.office-canvas-shell, .office-canvas-body, .slide-stage, .office-ruler,
      .canvas-toolbar, .editor-ribbon, .editor-left-tabs, .inspector-view-tabs,
      .office-status-bar, .editor-notes-dock) {
  background: #212121 !important;
  background-color: #212121 !important;
  background-image: none !important;
  border-color: #3f3f3f !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.workbench-editor-active#bodyRoot #appShell#appShell #step-edit#step-edit
  :is(.editor-top-ribbon, .editor-tool-rail, .thumb-panel, .inspector,
      .office-status-bar, .editor-notes-dock) {
  color: #dfdfdf !important;
}

html[data-theme="dark"] body.workbench-editor-active#bodyRoot #appShell#appShell #step-edit#step-edit
  :is(.editor-top-ribbon, .editor-tool-rail, .thumb-panel, .inspector,
      .office-status-bar, .editor-notes-dock) :is(small, .muted, .hint, [aria-description]) {
  color: #b4b4b4 !important;
}

/* Keep the stage clean; artwork inside #slideCanvas keeps its own colors. */
html:root body.workbench-editor-active#bodyRoot #appShell#appShell #step-edit#step-edit .slide-pasteboard,
html[data-theme="dark"] body.workbench-editor-active#bodyRoot #appShell#appShell #step-edit#step-edit .slide-pasteboard {
  background: transparent !important;
  background-image: none !important;
}
/* Simple right inspector overrides: advanced page actions stay under one disclosure. */
#step-edit.design-preview-mode .design-ai-command-panel-simple { gap: 10px; padding: 12px; }
#step-edit.design-preview-mode .design-ai-command-panel-simple > header { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
#step-edit.design-preview-mode .design-ai-command-panel-simple .design-ai-command-icon { width: 30px; height: 30px; border-radius: 7px; }
#step-edit.design-preview-mode .design-ai-target-hint { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--product-muted); font-size: 10px; line-height: 1.4; }
#step-edit.design-preview-mode .design-ai-target-hint svg, #step-edit.design-preview-mode .design-ai-target-hint .fluent-icon-shell { width: 13px; height: 13px; flex: 0 0 13px; }
#step-edit.design-preview-mode .design-ai-command-panel-simple .design-ai-primary-actions { display: block; }
#step-edit.design-preview-mode .design-ai-command-panel-simple .design-ai-primary-actions .primary-btn { width: 100%; min-height: 38px; font-size: 11px; }
#step-edit.design-preview-mode .design-ai-more-actions { border-top: 1px solid var(--product-line); padding-top: 8px; }
#step-edit.design-preview-mode .design-ai-more-actions > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; cursor: pointer; list-style: none; color: var(--product-text); }
#step-edit.design-preview-mode .design-ai-more-actions > summary::-webkit-details-marker { display: none; }
#step-edit.design-preview-mode .design-ai-more-actions > summary > span { display: flex; align-items: center; gap: 7px; min-width: 0; }
#step-edit.design-preview-mode .design-ai-more-actions > summary svg, #step-edit.design-preview-mode .design-ai-more-actions > summary .fluent-icon-shell { width: 14px; height: 14px; flex: 0 0 14px; color: var(--product-muted); }
#step-edit.design-preview-mode .design-ai-more-actions > summary span span { display: grid; gap: 2px; min-width: 0; }
#step-edit.design-preview-mode .design-ai-more-actions > summary strong { font-size: 10px; }
#step-edit.design-preview-mode .design-ai-more-actions > summary small { color: var(--product-muted); font-size: 9px; line-height: 1.4; }
#step-edit.design-preview-mode .design-ai-more-body { display: grid; gap: 8px; padding-top: 9px; }
#step-edit.design-preview-mode .design-ai-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
#step-edit.design-preview-mode .design-ai-more-grid button { min-width: 0; min-height: 32px; padding: 6px 7px; font-size: 9px; white-space: nowrap; }
#step-edit.design-preview-mode .design-ai-more-grid button span { overflow: hidden; text-overflow: ellipsis; }
#step-edit.design-preview-mode .design-ai-more-grid button svg, #step-edit.design-preview-mode .design-ai-more-grid button .fluent-icon-shell { width: 13px; height: 13px; flex: 0 0 13px; }
#step-edit.design-preview-mode .design-ai-more-body .design-reference-picker { margin-top: 0; }
@container (max-width: 210px) { #step-edit.design-preview-mode .design-ai-more-grid { grid-template-columns: 1fr; } }

/* Keep compact rows compact instead of distributing spare height into the summary strip. */
#step-edit.editor-layout.copy-planning-mode .copy-plan-shell.copy-plan-simple {
  align-content: start !important;
  grid-template-rows: max-content max-content max-content minmax(360px, 1fr) max-content !important;
}
/* Neutral active navigation: reserve blue for artwork selections only. */
#editorWorkflowNav .editor-workflow-action.active,
#editorWorkflowNav .editor-workflow-action.active:hover,
#workbenchModeBridge button.active,
#workbenchModeBridge button.active:hover {
  color: var(--v2-text, #2f2f2f) !important;
  background: var(--v2-panel-soft, #f5f5f5) !important;
  border-color: var(--v2-line, #e5e5e5) !important;
  box-shadow: none !important;
}

/* Final neutral override for the active workflow tab (higher specificity than legacy blue theme). */
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > button.editor-workflow-action.active,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > button.editor-workflow-action.active:hover,
html:root body.workbench-editor-active #appShell > .topbar > #workbenchModeBridge > button.active,
html:root body.workbench-editor-active #appShell > .topbar > #workbenchModeBridge > button.active:hover {
  color: var(--editor-chrome-text, #2f2f2f) !important;
  background: var(--editor-chrome-active, #f7f7f8) !important;
  background-image: none !important;
  border-color: var(--editor-chrome-line-strong, #e5e5e5) !important;
  box-shadow: none !important;
}
html:root[data-theme="dark"] body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > button.editor-workflow-action.active,
html:root[data-theme="dark"] body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > button.editor-workflow-action.active:hover,
html:root[data-theme="dark"] body.workbench-editor-active #appShell > .topbar > #workbenchModeBridge > button.active,
html:root[data-theme="dark"] body.workbench-editor-active #appShell > .topbar > #workbenchModeBridge > button.active:hover {
  color: var(--editor-chrome-text, #dfdfdf) !important;
  background: var(--editor-chrome-active, #2f2f2f) !important;
  background-image: none !important;
}

/* Workbench recovery: keep the editor in a predictable three-column layout.
 * The legacy rail rule creates a fourth zero-width column and pushes the
 * inspector out of view. The rail is still available through the top tools,
 * so hide only that conflicting rail while preserving the page, canvas, and
 * current-page actions. */
@media (min-width: 1024px) {
  html:root body.workbench-editor-active#bodyRoot #appShell#appShell
    #step-edit#step-edit.editor-layout {
    grid-template-columns: minmax(180px, 236px) minmax(0, 1fr) minmax(260px, 320px) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    gap: 10px !important;
  }

  html:root body.workbench-editor-active#bodyRoot #appShell#appShell
    #step-edit#step-edit > .editor-top-ribbon {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  html:root body.workbench-editor-active#bodyRoot #appShell#appShell
    #step-edit#step-edit > .thumb-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html:root body.workbench-editor-active#bodyRoot #appShell#appShell
    #step-edit#step-edit > .canvas-area {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html:root body.workbench-editor-active#bodyRoot #appShell#appShell
    #step-edit#step-edit > .inspector {
    grid-column: 3 !important;
    grid-row: 2 !important;
  }

  html:root body.workbench-editor-active#bodyRoot #appShell#appShell
    #step-edit#step-edit > .editor-tool-rail {
    display: none !important;
  }
}

/* Desktop work mode must stay an editor even when browser zoom/DPI reports a
 * narrow CSS viewport. The legacy mobile rules otherwise move thumbnails to
 * the bottom, hide the inspector, and restore the Photoshop rail. */
body.workbench-editor-active #step-edit.editor-layout {
  display: grid !important;
  grid-template-columns: minmax(180px, 236px) minmax(0, 1fr) minmax(260px, 320px) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  gap: 0 !important;
}
body.workbench-editor-active #step-edit.editor-layout > .editor-top-ribbon {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  height: auto !important;
  min-height: 0 !important;
}
body.workbench-editor-active #step-edit.editor-layout > .thumb-panel {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 8px !important;
  border: 0 !important;
  border-right: 1px solid var(--editor-chrome-line, #e5e5e5) !important;
  overflow: hidden !important;
}
body.workbench-editor-active #step-edit.editor-layout > .canvas-area {
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  overflow: hidden !important;
}
body.workbench-editor-active #step-edit.editor-layout > .inspector {
  position: static !important;
  inset: auto !important;
  display: block !important;
  grid-column: 3 !important;
  grid-row: 2 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden auto !important;
  border: 0 !important;
  border-left: 1px solid var(--editor-chrome-line, #e5e5e5) !important;
}
body.workbench-editor-active #step-edit.editor-layout > .editor-tool-rail {
  display: none !important;
}

/* The editor is the only visible work surface while a project is open. */
body.workbench-editor-active #step-create {
  display: none !important;
}

/* Commit the outer shell in the same order as the DOM: topbar, document tabs,
 * then the editor.  Without explicit placement, the tabs become an implicit
 * grid row and the editor is left with the height of the tabs row. */
body.workbench-editor-active #appShell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 56px 38px minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.workbench-editor-active #appShell > .topbar {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
body.workbench-editor-active #appShell > #documentTabsBar {
  display: grid !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 38px !important;
}
body.workbench-editor-active #appShell > .workspace {
  grid-column: 1 !important;
  grid-row: 3 !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.workbench-editor-active #appShell > .rail {
  display: none !important;
}

/* Returning to chat removes the editor-only shell rows completely. */
body[data-project-home-mode="chat"] #appShell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body[data-project-home-mode="chat"] #appShell > .topbar,
body[data-project-home-mode="chat"] #appShell > #documentTabsBar,
body[data-project-home-mode="chat"] #appShell > .workspace {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
body[data-project-home-mode="chat"] #appShell > .topbar,
body[data-project-home-mode="chat"] #appShell > #documentTabsBar {
  display: none !important;
}
body[data-project-home-mode="chat"] #appShell > .workspace {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* During project restoration show a quiet loading surface instead of the
 * dashboard being reflowed into a large empty region. The class is added in
 * the document head, before app.js starts, and naturally releases when the
 * editor body class is committed. */
html.route-editor-pending body:not(.workbench-editor-active) #step-create,
html.route-editor-pending body:not(.workbench-editor-active) #step-edit,
html.route-editor-pending body:not(.workbench-editor-active) #documentTabsBar {
  display: none !important;
}
html.route-editor-pending body:not(.workbench-editor-active) .workspace {
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: var(--editor-chrome-bg, #212121) !important;
}
html.route-editor-pending body:not(.workbench-editor-active) .workspace::before {
  content: "正在打开项目…";
  color: var(--editor-chrome-muted, #a7a7a7);
  font-size: 13px;
  letter-spacing: .02em;
}

/* Narrow editor controls stay outside the artwork and never reserve desktop space. */
.editor-narrow-panel-controls,
.editor-narrow-panel-backdrop {
  display: none !important;
}

@media (max-width: 1023px) {
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit.editor-layout {
    position: relative !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 42px auto minmax(0, 1fr) !important;
    gap: 0 !important;
  }
  html:root body.workbench-editor-active #step-edit > .editor-narrow-panel-controls {
    z-index: 1402;
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 4px 8px;
    border-bottom: 1px solid var(--v2-line, #e5e5e5);
    background: var(--v2-panel, #ffffff);
    color: var(--v2-text, #303030);
  }
  .editor-narrow-panel-controls > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 70px;
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid var(--v2-line, #e5e5e5);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
  }
  .editor-narrow-panel-controls > button.active {
    background: var(--v2-panel-soft, #f5f5f5);
    border-color: var(--v2-blue, #0f6cbd);
  }
  .editor-narrow-panel-controls > #editorNarrowHomeBtn {
    min-width: 32px !important;
    width: 32px !important;
    flex: 0 0 32px;
    padding-inline: 4px !important;
  }
  .editor-narrow-panel-hint {
    color: var(--v2-muted, #717171);
    font-size: 11px;
  }
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit > .editor-top-ribbon {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    max-height: 118px !important;
    overflow: auto !important;
  }
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit > .canvas-area {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  html:root body.workbench-editor-active #step-edit .office-canvas-shell {
    height: 100% !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit > :is(.thumb-panel, .inspector) {
    position: absolute !important;
    z-index: 1401 !important;
    inset: 42px auto 0 0 !important;
    display: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: min(340px, calc(100% - 44px)) !important;
    height: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: hidden auto !important;
    border: 1px solid var(--v2-line, #e5e5e5) !important;
    transform: none !important;
    box-shadow: 8px 0 24px rgb(0 0 0 / 16%) !important;
  }
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit[data-editor-narrow-panel="left"] > .thumb-panel {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
  }
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit[data-editor-narrow-panel="right"] > .inspector {
    display: block !important;
    inset: 42px 0 0 auto !important;
    box-shadow: -8px 0 24px rgb(0 0 0 / 16%) !important;
  }
  html:root body.workbench-editor-active #step-edit .thumb-panel #editorPagesView {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  html:root body.workbench-editor-active #step-edit .thumb-panel #thumbnailList {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    height: 100% !important;
    overflow: hidden auto !important;
  }
  html:root body.workbench-editor-active #step-edit .thumb-panel .thumb {
    width: 100% !important;
    min-width: 0 !important;
  }
  html:root:not([data-theme="dark"]) body.workbench-editor-active #appShell #step-edit > .thumb-panel .workflow-thumb-copy strong {
    color: #1f2937 !important;
  }
  html:root:not([data-theme="dark"]) body.workbench-editor-active #appShell #step-edit > .thumb-panel .workflow-thumb-copy small {
    color: #4b5563 !important;
  }
  html:root[data-theme="dark"] body.workbench-editor-active #appShell #step-edit > .thumb-panel .workflow-thumb-copy strong {
    color: #f3f4f6 !important;
  }
  html:root[data-theme="dark"] body.workbench-editor-active #appShell #step-edit > .thumb-panel .workflow-thumb-copy small {
    color: #cbd5e1 !important;
  }
  html:root body.workbench-editor-active #step-edit > .editor-narrow-panel-backdrop:not([hidden]) {
    position: absolute;
    z-index: 1400;
    inset: 42px 0 0;
    display: block !important;
    width: 100%;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgb(0 0 0 / 24%);
    cursor: pointer;
  }
  html:root body.workbench-editor-active #step-edit > .editor-panel-resizer {
    display: none !important;
  }
  html:root body.workbench-editor-active #step-edit > .inspector > .panel-head h2 {
    color: var(--v2-text, #303030) !important;
  }
  html:root body.workbench-editor-active:has(#step-edit[data-editor-narrow-panel="left"], #step-edit[data-editor-narrow-panel="right"]) .assistant-float-launcher {
    display: none !important;
  }
}

/* Final work-mode geometry guard.
 * assistant-first.css owns the Photoshop rail and uses !important on the
 * editor grid.  Keep that rail and the page inspector in explicit tracks so
 * the canvas cannot overlap either side or leave a zero-width black region. */
@media (min-width: 1024px) {
  html:root body.workbench-editor-active#bodyRoot #appShell#appShell
    #step-edit#step-edit.editor-layout {
    display: grid !important;
    grid-template-columns: minmax(180px, 236px) minmax(0, 1fr) minmax(260px, 320px) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html:root body.workbench-editor-active#bodyRoot #appShell#appShell
    #step-edit#step-edit.editor-layout > .editor-top-ribbon {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  html:root body.workbench-editor-active#bodyRoot #appShell#appShell
    #step-edit#step-edit.editor-layout > .thumb-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    align-self: stretch !important;
  }

  html:root body.workbench-editor-active#bodyRoot #appShell#appShell
    #step-edit#step-edit.editor-layout > .canvas-area {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    align-self: stretch !important;
  }

  html:root body.workbench-editor-active#bodyRoot #appShell#appShell
    #step-edit#step-edit.editor-layout > .inspector {
    grid-column: 3 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    align-self: stretch !important;
    overflow: hidden auto !important;
  }

html:root body.workbench-editor-active#bodyRoot #appShell#appShell
    #step-edit#step-edit.editor-layout > .editor-tool-rail {
    display: none !important;
  }
}

/* ==== consolidated from /home-sidebar.css (cascade order preserved) ==== */
/* Phase1 merge: home-sidebar + navigation-simplify (cascade preserved). */
/* ===== merged from /home-sidebar.css ===== */
/* Mode-specific home navigation, with shared tools kept above the account. */
@layer assistantChrome {
  html:root body #step-create .project-home-nav {
    --home-nav-text: #303030;
    --home-nav-muted: #717171;
    --home-nav-hover: #ececec;
    --home-nav-line: #e2e2e2;
    --home-nav-surface: #f9f9f9;
    --home-nav-menu: #ffffff;
    --home-nav-primary: #303030;
    --home-nav-primary-text: #ffffff;
  }
  html:root[data-theme="dark"] body #step-create .project-home-nav {
    --home-nav-text: #e3e3e3;
    --home-nav-muted: #a8a8a8;
    --home-nav-hover: #292929;
    --home-nav-line: #333333;
    --home-nav-surface: #171717;
    --home-nav-menu: #242424;
    --home-nav-primary: #e0e0e0;
    --home-nav-primary-text: #202020;
  }
  html:root body[data-project-home-mode="work"] #step-create #projectHomeChatNav,
  html:root body[data-project-home-mode="work"] #step-create #projectHomeConversationNav,
  html:root body[data-project-home-mode="chat"] #step-create #projectHomeWorkNav,
  html:root body #step-create #projectHomeNewProjectMenu[hidden],
  html:root body[data-project-home-mode="chat"] #projectHomeConversationNav
    :is([data-assistant-side-view="projects"], #assistantSideProjects) {
    display: none !important;
  }
  html:root body #step-create #projectHomeWorkNav:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
  }
  html:root body #step-create #projectHomeChatNav:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html:root body #step-create #projectHomeNewProject {
    position: relative !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    padding-bottom: 8px !important;
  }
  html:root body #step-create #newProjectBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: var(--home-nav-primary) !important;
    background-image: none !important;
    color: var(--home-nav-primary-text) !important;
    -webkit-text-fill-color: var(--home-nav-primary-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }
  html:root body #step-create #newProjectBtn > span {
    flex: 1 !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    text-align: left !important;
  }
  html:root body #step-create #newProjectBtn > :last-child {
    width: 14px !important;
    height: 14px !important;
    color: inherit !important;
  }
  html:root body #step-create #projectHomeNewProjectMenu:not([hidden]) {
    display: grid !important;
    gap: 2px !important;
    margin: 6px 0 0 !important;
    padding: 4px !important;
    border: 1px solid var(--home-nav-line) !important;
    border-radius: 9px !important;
    background: var(--home-nav-menu) !important;
  }
  html:root body #step-create :is(
    #projectHomeChatNav > button,
    #projectHomeWorkNav > .project-home-nav-item,
    #projectHomeNewProjectMenu > button,
    #projectHomeToolsBtn
  ),
  html:root body[data-project-home-mode="chat"] #projectHomeConversationNav
    :is([data-assistant-side-view="history"], #projectHomeSkillsBtn) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--home-nav-text) !important;
    -webkit-text-fill-color: var(--home-nav-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }
  html:root body #step-create :is(
    #projectHomeChatNav > button,
    #projectHomeWorkNav > .project-home-nav-item,
    #projectHomeNewProjectMenu > button,
    #projectHomeToolsBtn
  ):is(:hover, :focus-visible, .active, [aria-expanded="true"]),
  html:root body[data-project-home-mode="chat"] #projectHomeConversationNav
    :is([data-assistant-side-view="history"], #projectHomeSkillsBtn):is(:hover, :focus-visible, .active, [aria-expanded="true"]) {
    background: var(--home-nav-hover) !important;
  }
  html:root body #step-create :is(
    #projectHomeChatNav, #projectHomeWorkNav, #projectHomeToolsBtn, #projectHomeSkillsBtn
  ) :is(svg, .fluent-icon-shell) {
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 auto !important;
    color: currentColor !important;
  }
  html:root body #step-create #projectHomeSharedTools {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: auto 0 0 !important;
    padding: 10px 0 6px !important;
    border-top: 1px solid var(--home-nav-line) !important;
  }
  html:root body #step-create #appAvatarControl {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  html:root body[data-project-home-mode="chat"] #step-create #projectHomeConversationNav {
    margin-top: 4px !important;
  }
  html:root body[data-project-home-mode="chat"] #projectHomeConversationNav .assistant-side-tabs {
    flex-direction: column !important;
    gap: 0 !important;
  }
  html:root body[data-project-home-mode="chat"] #projectHomeConversationNav #projectHomeSkillsBtn {
    order: 3 !important;
  }
  html:root body #assistantSideNav .assistant-history-search {
    display: grid !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    margin: 0 4px 8px !important;
    color: var(--home-nav-muted, var(--chat-muted, #717171)) !important;
    font-size: 12px !important;
  }
  html:root body #assistantSideNav .assistant-history-search[hidden] {
    display: none !important;
  }
  html:root body #assistantSideNav #assistantHistorySearchInput {
    display: block !important;
    width: 100% !important;
    min-height: 36px !important;
    padding: 7px 9px !important;
    border: 1px solid var(--home-nav-line, var(--chat-line, #dddddd)) !important;
    border-radius: 7px !important;
    background: var(--home-nav-menu, var(--chat-bg, #ffffff)) !important;
    color: var(--home-nav-text, var(--chat-text, #303030)) !important;
    font: inherit !important;
    outline-offset: 2px !important;
    box-sizing: border-box !important;
  }
  html:root body #assistantSideNav .assistant-history-search-status {
    min-height: 14px !important;
    color: inherit !important;
  }
  @media (min-width: 768px) {
    html:root body #step-create > .project-home-shell > .project-home-nav {
      flex-direction: column !important;
      gap: 4px !important;
      min-height: 0 !important;
      overflow: hidden !important;
      padding: 16px 16px 12px !important;
      background: var(--home-nav-surface) !important;
      border-right: 1px solid var(--home-nav-line) !important;
    }
    html:root body #step-create .project-home-brand {
      order: 0 !important;
      flex: 0 0 auto !important;
      margin-bottom: 18px !important;
    }
    html:root body #step-create #projectHomeChatNav,
    html:root body #step-create #projectHomeWorkNav {
      order: 1 !important;
    }
    html:root body #step-create #projectHomeWorkNav {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      scrollbar-width: thin !important;
      padding: 0 0 12px !important;
    }
    html:root body #step-create #projectHomeConversationNav {
      order: 2 !important;
    }
    html:root body #step-create #projectHomeSharedTools {
      order: 3 !important;
    }
    html:root body #step-create #appAvatarControl {
      order: 4 !important;
    }
  }
  @media (max-width: 767px) {
    html:root body[data-project-home-mode="work"] #step-create #projectHomeWorkNav:not([hidden]) {
      flex-direction: row !important;
      flex-wrap: wrap !important;
      width: 100% !important;
      overflow: visible !important;
      gap: 4px !important;
    }
    html:root body[data-project-home-mode="work"] #step-create #projectHomeNewProject,
    html:root body[data-project-home-mode="work"] #step-create #projectHomeWorkNav > button {
      width: auto !important;
      flex: 1 1 135px !important;
    }
    html:root body[data-project-home-mode="work"] #step-create #projectHomeNewProjectMenu:not([hidden]) {
      position: absolute !important;
      z-index: 20 !important;
      inset: 48px 0 auto !important;
    }
    html:root body[data-project-home-mode="work"] #step-create #projectHomeSharedTools {
      margin: 0 !important;
      padding: 4px 0 !important;
      border: 0 !important;
    }
  }

  /* Keep the mode switch and shared actions reachable on narrower windows. */
  @media (max-width: 1023px) {
    html:root body[data-project-home-mode="chat"] #step-create .project-home-chat-topbar {
      display: flex !important;
      align-items: center !important;
      flex-wrap: nowrap !important;
      gap: 6px !important;
    }
    html:root body[data-project-home-mode="chat"] #step-create .project-home-chat-topbar #projectHomeSidebarToggle {
      position: static !important;
      width: 34px !important;
      min-width: 34px !important;
      min-height: 34px !important;
      max-height: 34px !important;
      flex: 0 0 34px !important;
      margin: 0 !important;
    }
    html:root body[data-project-home-mode="chat"] #step-create .project-home-chat-topbar #chatTopModelBtn {
      min-width: 0 !important;
      flex: 0 1 auto !important;
      max-width: calc(100% - 170px) !important;
      overflow: hidden !important;
    }
    html:root body[data-project-home-mode="chat"] #step-create .project-home-chat-topbar #projectHomeModeSwitch {
      position: static !important;
      inset: auto !important;
      transform: none !important;
      flex: 0 0 auto !important;
      width: auto !important;
      margin: 0 0 0 auto !important;
    }
    html:root body.workbench-home-active #appShell > .topbar {
      display: flex !important;
      align-items: center !important;
      flex-wrap: nowrap !important;
      gap: 8px !important;
      height: 56px !important;
      min-height: 56px !important;
      padding: 8px 12px !important;
      box-sizing: border-box !important;
    }
    html:root body.workbench-home-active #appShell > .topbar > :is(.brand-block, #editorWorkflowNav),
    html:root body.workbench-home-active #appShell > .topbar :is(#apiStatus, #saveState, #saveDeckBtn, #exportPptBtn, .topbar-delivery-tools) {
      display: none !important;
    }
    html:root body.workbench-home-active #appShell > .topbar #projectHomeSearch {
      display: grid !important;
      grid-template-columns: 16px minmax(0, 1fr) !important;
      align-items: center !important;
      gap: 8px !important;
      flex: 1 1 auto !important;
      width: auto !important;
      min-width: 0 !important;
      height: 38px !important;
      min-height: 38px !important;
      max-height: 38px !important;
      margin: 0 !important;
      padding: 0 10px !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
    }
    html:root body.workbench-home-active #projectHomeSearch > :is(svg, .fluent-icon-shell) {
      width: 16px !important;
      height: 16px !important;
    }
    html:root body.workbench-home-active #projectHomeSearchInput {
      width: 100% !important;
      min-width: 0 !important;
      height: 36px !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }
    html:root body.workbench-home-active #projectHomeSearch > kbd {
      display: none !important;
    }
    html:root body.workbench-home-active #appShell > .topbar .top-actions {
      display: flex !important;
      flex: 0 0 auto !important;
      flex-wrap: nowrap !important;
      gap: 4px !important;
    }
    html:root body.workbench-home-active #step-create .project-home-chat-topbar {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 8px !important;
      min-height: 40px !important;
    }
    html:root body.workbench-home-active #step-create #projectHomeModeSwitch {
      display: inline-flex !important;
      position: static !important;
      width: auto !important;
      margin-left: auto !important;
      flex: 0 0 auto !important;
    }
  }
  @media (max-width: 767px) {
    html:root body.workbench-home-active #step-create > .project-home-shell > .project-home-nav {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
      align-items: center !important;
      gap: 6px !important;
      width: 100% !important;
      height: auto !important;
      padding: 10px 12px !important;
      overflow: visible !important;
    }
    html:root body.workbench-home-active #step-create .project-home-brand {
      grid-column: 1 / -1 !important;
      min-height: 0 !important;
      height: 44px !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    html:root body.workbench-home-active #step-create #projectHomeWorkNav:not([hidden]) {
      grid-column: 1 / -1 !important;
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      width: 100% !important;
      padding: 0 !important;
    }
    html:root body.workbench-home-active #step-create #projectHomeNewProject {
      padding: 0 !important;
    }
    html:root body.workbench-home-active #step-create #projectHomeSharedTools {
      grid-column: 1 !important;
      min-width: 0 !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    html:root body.workbench-home-active #step-create #appAvatarControl {
      grid-column: 2 !important;
      min-width: 0 !important;
      width: 100% !important;
      min-height: 48px !important;
      padding: 0 !important;
    }
  }
  @media (max-width: 520px) {
    html:root body #assistantToolsDrawer .assistant-tool-search {
      display: grid !important;
      grid-template-columns: 18px minmax(0, 1fr) !important;
      align-items: center !important;
      gap: 8px !important;
    }
    html:root body #assistantToolsDrawer .assistant-tool-search input {
      min-width: 0 !important;
      width: 100% !important;
      padding-inline: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }
    html:root body #assistantToolsDrawer .assistant-tool-nav {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    html:root body #assistantToolsDrawer .assistant-tool-group {
      min-width: 0 !important;
      padding: 12px 14px !important;
    }
    html:root body #assistantToolsDrawer .assistant-tool-group > header {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      min-width: 0 !important;
      gap: 4px !important;
    }
    html:root body #assistantToolsDrawer .assistant-tool-group > header :is(strong, span) {
      min-width: 0 !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
    }
    html:root body #assistantToolsDrawer .assistant-tool-group-grid {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
    }
    html:root body #assistantToolsDrawer .assistant-tool-group-grid > button {
      width: 100% !important;
    }
    html:root body #assistantToolsDrawer .assistant-tool-group-grid > button > span {
      display: grid !important;
      min-width: 0 !important;
      gap: 4px !important;
      white-space: normal !important;
    }
  }
}

/* ===== merged from /navigation-simplify.css ===== */
/* Compact navigation pass.
   Keep every existing entry and handler, but give the home rail a clearer
   information hierarchy: conversation actions, history, and project actions
   read as separate groups while the main canvas keeps more room. */
@layer navigationSimplify {
  @media (min-width: 1024px) {
    html:root body #step-create > .project-home-shell > .project-home-nav {
      width: 224px !important;
      min-width: 224px !important;
      padding: 14px 12px 10px !important;
      gap: 2px !important;
      box-sizing: border-box !important;
    }

    html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell {
      grid-template-columns: 224px minmax(0, 1fr) !important;
    }

    html:root body #step-create .project-home-brand {
      min-height: 58px !important;
      margin: 0 2px 8px !important;
      padding: 6px 6px 10px !important;
      border-bottom: 1px solid var(--home-nav-line, #e2e2e2) !important;
    }

    html:root body #step-create .project-home-brand img {
      width: 58px !important;
      height: 42px !important;
    }

    html:root body #step-create .project-home-brand strong {
      font-size: 13px !important;
      line-height: 1.25 !important;
    }

    html:root body #step-create .project-home-brand span {
      margin-top: 2px !important;
      font-size: 10px !important;
      line-height: 1.3 !important;
      white-space: nowrap !important;
    }

    /* Generated labels are visual grouping only; existing nav/ARIA labels
       remain the source of truth for keyboard and assistive technology. */
    html:root body #step-create #projectHomeChatNav::before,
    html:root body #step-create #projectHomeWorkNav::before {
      display: block !important;
      margin: 2px 8px 4px !important;
      color: var(--home-nav-muted, #717171) !important;
      font-size: 10px !important;
      font-weight: 650 !important;
      letter-spacing: .04em !important;
      line-height: 1.2 !important;
      text-transform: uppercase !important;
    }

    html:root body #step-create #projectHomeChatNav::before { content: "对话"; }
    html:root body[data-project-home-mode="work"] #step-create #projectHomeWorkNav::before { content: "工作区"; }

    html:root body #step-create #projectHomeChatNav,
    html:root body #step-create #projectHomeWorkNav {
      gap: 2px !important;
      margin: 0 !important;
    }

    html:root body #step-create :is(
      #projectHomeChatNav > button,
      #projectHomeWorkNav > .project-home-nav-item,
      #projectHomeNewProjectMenu > button,
      #projectHomeToolsBtn
    ) {
      min-height: 36px !important;
      padding: 7px 9px !important;
      gap: 8px !important;
      border-radius: 7px !important;
      font-size: 13px !important;
    }

    html:root body #step-create #projectHomeConversationNav {
      min-height: 0 !important;
      margin-top: 6px !important;
      padding-top: 6px !important;
      border-top: 1px solid var(--home-nav-line, #e2e2e2) !important;
      overflow: hidden !important;
    }

    html:root body[data-project-home-mode="chat"] #step-create #projectHomeConversationNav #assistantSideNav {
      min-height: 0 !important;
      overflow: hidden !important;
    }

    html:root body[data-project-home-mode="chat"] #step-create #projectHomeConversationNav .assistant-side-tabs {
      gap: 2px !important;
      margin-bottom: 4px !important;
    }

    html:root body[data-project-home-mode="chat"] #step-create #projectHomeConversationNav .assistant-side-tabs button,
    html:root body[data-project-home-mode="chat"] #step-create #projectHomeConversationNav .assistant-new-conversation {
      min-height: 34px !important;
      padding: 7px 9px !important;
      gap: 8px !important;
      border-radius: 7px !important;
      font-size: 12px !important;
    }

    html:root body[data-project-home-mode="chat"] #step-create #projectHomeConversationNav {
      display: flex !important;
      flex: 1 1 auto !important;
      flex-direction: column !important;
      min-height: 0 !important;
      max-height: none !important;
      overflow: hidden !important;
    }

    html:root body[data-project-home-mode="chat"] #step-create #projectHomeConversationNav #assistantSideNav {
      display: flex !important;
      flex: 1 1 auto !important;
      flex-direction: column !important;
      min-height: 0 !important;
      max-height: none !important;
      height: 100% !important;
      overflow: hidden !important;
    }

    html:root body[data-project-home-mode="chat"] #step-create #assistantSideHistory {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      height: auto !important;
      max-height: none !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      overscroll-behavior: contain !important;
      scrollbar-width: thin !important;
      padding-right: 2px !important;
    }

    html:root body[data-project-home-mode="chat"] #step-create .assistant-side-history-item {
      min-height: 40px !important;
      padding: 7px 8px !important;
      border-radius: 7px !important;
      font-size: 12px !important;
    }

    html:root body[data-project-home-mode="chat"] #step-create .assistant-side-history-item strong {
      display: -webkit-box !important;
      overflow: hidden !important;
      -webkit-box-orient: vertical !important;
      -webkit-line-clamp: 2 !important;
      line-height: 1.35 !important;
    }

    html:root body #step-create #projectHomeSharedTools {
      padding-top: 7px !important;
      padding-bottom: 4px !important;
    }
  }

  @media (max-width: 1023px) {
    /* The mobile drawer already owns its width; keep its spacing compact
       without changing the open/close behavior. */
    html:root body[data-project-home-mode="chat"].project-home-sidebar-open #step-create > .project-home-shell > .project-home-nav {
      width: min(86vw, 320px) !important;
      min-width: min(86vw, 320px) !important;
      padding: 14px 12px 10px !important;
    }
  }
}

/* ==== consolidated from /task-progress.css (cascade order preserved) ==== */
/* Contextual task entry shares the existing task execution and result actions. */
html:root #topbarTaskProgressBtn {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  max-width: none;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--aw-line, #ded8cf);
  border-radius: 999px;
  background: var(--aw-surface, #fff);
  color: var(--aw-text, #302c27);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
html:root #topbarTaskProgressBtn[hidden] { display: none !important; }
/* Percent lives in the pill label; keep the bar only in the task dialog. */
html:root #topbarTaskProgressBtn .topbar-task-progress-inline-meter {
  display: none !important;
}
html:root #topbarTaskProgressBtn .topbar-task-progress-inline-meter[hidden] { display: none !important; }
html:root #topbarTaskProgressBtn .topbar-task-progress-inline-meter > i {
  display: block;
  height: 100%;
  background: var(--neutral-accent, #b58b56);
}
html:root #topbarTaskProgressBtn .topbar-task-progress-inline-meter.is-indeterminate > i { animation: topbar-task-progress 1.5s ease-in-out infinite alternate; }
html:root body #assistantDrawer #assistantNewResultBtn .assistant-latest-progress-meter {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 4px;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--neutral-line, #dedbd4);
}
html:root body #assistantDrawer #assistantNewResultBtn .assistant-latest-progress-meter[hidden] { display: none; }
html:root body #assistantDrawer #assistantNewResultBtn .assistant-latest-progress-meter > i { display: block; height: 100%; background: var(--neutral-accent, #b58b56); }
html:root body #assistantDrawer #assistantNewResultBtn .assistant-latest-progress-meter.is-indeterminate > i { animation: topbar-task-progress 1.5s ease-in-out infinite alternate; }
html:root #topbarTaskProgressBtn svg { flex: 0 0 auto; width: 16px; height: 16px; }
html:root #topbarTaskProgressLabel { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 4.75em; }
html:root #topbarTaskProgressBtn.is-running { border-color: #d7bc97; color: #79572c; background: #fff9f0; }
html:root #topbarTaskProgressBtn.has-failure:not(.is-running) { color: #b45309; border-color: #f2d6b4; background: #fffaf3; }
html:root #topbarTaskProgressFailure { border-radius: 5px; padding: 2px 5px; background: #fff0e2; color: #a54c09; font-size: 10px; white-space: nowrap; }
html:root #topbarTaskProgressFailure[hidden] { display: none !important; }
html:root #topbarTaskProgressDialog {
  width: min(520px, calc(100vw - 32px));
  max-height: min(720px, calc(100dvh - 96px));
  margin: 76px 20px auto auto;
  padding: 0;
  border: 1px solid var(--aw-line, #ded8cf);
  border-radius: 16px;
  background: var(--aw-surface, #fff);
  color: var(--aw-text, #302c27);
  box-shadow: 0 20px 64px #30241426;
  overflow: hidden;
}
html:root #topbarTaskProgressDialog[open] { display: flex; flex-direction: column; }
html:root #topbarTaskProgressDialog::backdrop { background: #30241420; }
html:root #topbarTaskProgressDialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 16px; border-bottom: 1px solid var(--aw-line, #ded8cf); }
html:root #topbarTaskProgressDialog h2 { margin: 0; font-size: 17px; font-weight: 650; }
html:root #topbarTaskProgressDialog > header p { margin: 6px 0 0; color: var(--aw-text-secondary, #736d64); font-size: 12px; }
html:root #topbarTaskProgressCloseBtn { display: grid; place-items: center; width: 28px; height: 28px; padding: 4px; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
html:root #topbarTaskProgressCloseBtn svg { width: 18px; height: 18px; }
html:root #topbarTaskProgressCloseBtn:hover { background: #9b897016; }
.topbar-task-progress-nav { display: flex; justify-content: flex-end; padding: 10px 16px 0; }
.topbar-task-progress-nav button { border: 1px solid var(--aw-line, #ded8cf); border-radius: 8px; background: var(--aw-surface, #fff); color: var(--aw-text, #302c27); padding: 6px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.topbar-task-progress-nav button:hover { border-color: #c9a67a; color: #79572c; }
.topbar-task-progress-empty { margin: 0; padding: 24px 12px; text-align: center; color: var(--aw-text-secondary, #736d64); font-size: 13px; }
.topbar-task-progress-list { display: grid; gap: 12px; padding: 16px; overflow-y: auto; min-height: 0; }
.topbar-task-progress-card { padding: 15px; border: 1px solid var(--aw-line, #ded8cf); border-radius: 12px; }
.topbar-task-progress-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbar-task-progress-card > header strong { min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; }
.topbar-task-progress-card > header > span { flex-shrink: 0; color: var(--aw-text-secondary, #736d64); font-size: 11px; }
.topbar-task-progress-card.failed > header > span,
.topbar-task-progress-card.partial > header > span,
.topbar-task-progress-card.needs_attention > header > span { color: #b45309; }
.topbar-task-progress-card > p { margin: 10px 0; color: var(--aw-text-secondary, #736d64); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.topbar-task-progress-meter { height: 5px; overflow: hidden; border-radius: 4px; background: #9b897024; }
.topbar-task-progress-meter > i { display: block; height: 100%; border-radius: inherit; background: #b58b56; transition: width .2s ease; }
.topbar-task-progress-meter.is-indeterminate > i { animation: topbar-task-progress 1.5s ease-in-out infinite alternate; }
.topbar-task-progress-card > footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 12px; }
.topbar-task-progress-card > footer small { padding-top: 4px; color: var(--aw-text-secondary, #736d64); font-size: 11px; white-space: nowrap; }
.topbar-task-progress-card > footer > div { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11px; }
.topbar-task-progress-card button { padding: 5px 9px; border: 1px solid var(--aw-line, #ded8cf); border-radius: 6px; background: var(--aw-surface, #fff); color: inherit; font: inherit; font-size: 11px; cursor: pointer; }
.topbar-task-progress-card button.confirm { color: #79572c; background: #b58b5618; border-color: #b58b5650; }
.topbar-task-progress-diagnostic { margin: 0 0 10px; font-size: 11px; color: var(--aw-text-secondary, #736d64); }
.topbar-task-progress-diagnostic summary { width: fit-content; cursor: pointer; }
.topbar-task-progress-diagnostic p { margin: 6px 0 0; padding: 8px 10px; border-radius: 6px; background: #a7835412; overflow-wrap: anywhere; }
.topbar-task-progress-card button:disabled { cursor: wait; opacity: .55; }
.topbar-task-progress-card .assistant-stage-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.topbar-task-progress-card .assistant-task-more-actions { position: relative; }
.topbar-task-progress-card .assistant-task-more-actions summary { cursor: pointer; }
.topbar-task-progress-card .assistant-task-more-actions > div { display: grid; gap: 6px; padding-top: 8px; }
html[data-theme="dark"] #topbarTaskProgressBtn { background: #232326; border-color: #38383d; color: #e8e8eb; }
html[data-theme="dark"] #topbarTaskProgressBtn.is-running { background: #32291f; border-color: #735c3d; color: #e5c393; }
html[data-theme="dark"] #topbarTaskProgressBtn.has-failure:not(.is-running) { background: #342b21; border-color: #675039; color: #efb784; }
html[data-theme="dark"] #topbarTaskProgressDialog { background: #202023; border-color: #38383d; color: #e8e8eb; }
html[data-theme="dark"] #topbarTaskProgressDialog > header,
html[data-theme="dark"] .topbar-task-progress-card { border-color: #38383d; }
html[data-theme="dark"] .topbar-task-progress-card button { background: #2b2b30; border-color: #45454c; color: #e8e8eb; }
html[data-theme="dark"] .topbar-task-progress-card button.confirm { background: #3b3023; border-color: #735c3d; color: #e5c393; }
html[data-theme="dark"] .topbar-task-progress-nav button { background: #2b2b30; border-color: #45454c; color: #e8e8eb; }
html[data-theme="dark"] .topbar-task-progress-diagnostic p { background: #8d6b3d26; }
@keyframes topbar-task-progress { from { transform: translateX(0); } to { transform: translateX(180%); } }
@media (prefers-reduced-motion: reduce) { .topbar-task-progress-meter.is-indeterminate > i { animation: none; } }
@media (max-width: 640px) {
  html:root #topbarTaskProgressBtn { max-width: 220px; padding: 6px 9px; }
  html:root #topbarTaskProgressDialog { margin: 68px auto auto; max-height: calc(100dvh - 88px); }
  .topbar-task-progress-card > footer { align-items: flex-start; }
}

/* One neutral progress treatment for images, conversions and workspace jobs. */
@layer assistantChrome {
html:root body #assistantDrawer#assistantDrawer#assistantDrawer #assistantImageGenerationProgress .assistant-image-generation-progress-visual:not(.has-image):not(.has-error) {
  background: var(--aw-surface, #fff) !important;
  color: var(--aw-text, #302c27) !important;
  border-color: var(--aw-line, #ded8cf) !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer#assistantDrawer #assistantImageGenerationProgress .assistant-image-generation-progress-percent,
html:root body #assistantDrawer#assistantDrawer#assistantDrawer #assistantImageGenerationProgress .assistant-image-generation-progress-visual-stage {
  color: var(--aw-text, #302c27) !important;
  text-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer#assistantDrawer #assistantImageGenerationProgress .assistant-image-generation-progress-track,
html:root body #assistantDrawer#assistantDrawer#assistantDrawer .assistant-conversion-progress,
html:root body #assistantDrawer#assistantDrawer#assistantDrawer .assistant-task-progress,
html:root body #generationProgress.generation-progress .generation-progress-bar {
  background: color-mix(in srgb, var(--neutral-text, #282725) 24%, var(--neutral-bg, #f5f4f1)) !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer#assistantDrawer #assistantImageGenerationProgress .assistant-image-generation-progress-track > i,
html:root body #assistantDrawer#assistantDrawer#assistantDrawer .assistant-conversion-progress > i,
html:root body #assistantDrawer#assistantDrawer#assistantDrawer .assistant-task-progress > i,
html:root body #assistantDrawer#assistantDrawer#assistantDrawer #assistantImageGenerationProgress .assistant-image-generation-progress-track::after,
html:root body #generationProgress.generation-progress .generation-progress-bar > span {
  background: var(--neutral-accent, #b58b56) !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer#assistantDrawer #assistantImageGenerationProgress .assistant-image-generation-progress-track::after { content: none !important; }
html:root body #assistantDrawer#assistantDrawer#assistantDrawer #assistantImageGenerationProgress .is-indeterminate .assistant-image-generation-progress-track > i,
html:root body #assistantDrawer#assistantDrawer#assistantDrawer .assistant-conversion-progress.is-indeterminate > i { animation: topbar-task-progress 1.5s ease-in-out infinite alternate !important; }
html:root body #assistantDrawer#assistantDrawer#assistantDrawer #assistantImageGenerationProgress.is-conversion {
  width: min(100%, 680px) !important;
  min-height: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer#assistantDrawer #assistantImageGenerationProgress.is-conversion .assistant-image-generation-progress-card {
  padding: 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer#assistantDrawer #assistantImageGenerationProgress.is-conversion .assistant-image-generation-progress-canvases {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}
.assistant-conversion-progress { height: 5px; width: 100%; border-radius: 3px; overflow: hidden; }
.assistant-conversion-progress > i { display: block; height: 100%; }
html:root body #assistantDrawer#assistantDrawer#assistantDrawer #assistantImageGenerationProgress.is-conversion footer { margin-top: 12px !important; }
html:root body #assistantDrawer#assistantDrawer#assistantDrawer #assistantImageGenerationProgress.is-conversion footer > span,
html:root body #assistantDrawer#assistantDrawer#assistantDrawer #assistantImageGenerationProgress.is-conversion footer strong {
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-overflow: clip !important;
  line-height: 1.6 !important;
}
html:root body[data-project-home-mode="chat"]:has(#assistantImageGenerationProgress.is-visible:not(.hidden)) #generationProgress[data-activity-id^="assistant-task:"] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html:root #topbarTaskProgressBtn .topbar-task-progress-inline-meter.is-indeterminate > i,
  html:root body #assistantDrawer #assistantNewResultBtn .assistant-latest-progress-meter.is-indeterminate > i,
  html:root body #assistantDrawer#assistantDrawer#assistantDrawer #assistantImageGenerationProgress .is-indeterminate .assistant-image-generation-progress-track > i,
  html:root body #assistantDrawer#assistantDrawer#assistantDrawer .assistant-conversion-progress.is-indeterminate > i { animation: none !important; }
}
}

/* ==== consolidated from /topbar-context.css (cascade order preserved) ==== */
/* Topbar actions belong to the current surface, balance details to the account. */
@layer assistantChrome {
  html:root body #appShell > .topbar {
    --context-text: var(--neutral-text);
    --context-muted: var(--neutral-muted);
    --context-line: var(--neutral-line);
    --context-bg: var(--neutral-panel);
    --context-hover: var(--neutral-panel-soft);
  }
  html:root[data-theme="dark"] body #appShell > .topbar {
    --context-text: var(--neutral-text);
    --context-muted: var(--neutral-muted);
    --context-line: var(--neutral-line);
    --context-bg: var(--neutral-panel);
    --context-hover: var(--neutral-panel-soft);
  }
  html:root body #appShell > .topbar :is(#advancedToolsBtn, #saveDeckBtn, #apiStatus, #settingsBtn),
  html:root body.workbench-home-active #appShell > .topbar :is(#saveState, #topbarExportControl, #topbarDeliveryBtn),
  html:root body[data-project-home-mode="chat"] #appShell > .topbar :is(#saveState, #topbarExportControl, #topbarDeliveryBtn),
  html:root body #appShell > .topbar #topbarDeliveryBtn[hidden],
  html:root body #appShell > .topbar #topbarExportMenu[hidden] {
    display: none !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar .top-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: auto !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar #saveState {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--context-muted) !important;
    font: inherit !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    opacity: 1 !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar #saveState:not(:disabled) {
    cursor: pointer !important;
    text-decoration: underline dotted !important;
    text-underline-offset: 4px !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar #saveState[data-status="error"] {
    color: #cb5656 !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar #topbarExportControl {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar :is(#exportPptBtn, #topbarDeliveryBtn) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    gap: 7px !important;
    width: auto !important;
    min-width: 72px !important;
    min-height: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 6px 11px !important;
    border: 1px solid var(--neutral-accent) !important;
    border-radius: 7px !important;
    background: var(--neutral-accent) !important;
    background-image: none !important;
    color: var(--neutral-accent-text) !important;
    -webkit-text-fill-color: var(--neutral-accent-text) !important;
    font: inherit !important;
    font-size: 13px !important;
    box-shadow: none !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar
    :is(#exportPptBtn, #topbarDeliveryBtn):not(:disabled):is(:hover, :focus-visible) {
    background: var(--neutral-accent-strong) !important;
    border-color: var(--neutral-accent-strong) !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar :is(#exportPptBtn, #topbarDeliveryBtn) > span {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: none !important;
    width: auto !important;
    font-size: inherit !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    overflow: visible !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar
    :is(#exportPptBtn, #topbarDeliveryBtn) :is(svg, .fluent-icon-shell) {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto !important;
    color: inherit !important;
  }
  html:root body #appShell > .topbar #topbarExportMenu:not([hidden]) {
    position: absolute !important;
    z-index: 130 !important;
    top: calc(100% + 7px) !important;
    right: 0 !important;
    display: grid !important;
    min-width: 218px !important;
    padding: 5px !important;
    border: 1px solid var(--context-line) !important;
    border-radius: 9px !important;
    background: var(--context-bg) !important;
    box-shadow: 0 8px 28px #00000018 !important;
  }
  html:root body #appShell > .topbar #topbarExportMenu > button {
    display: block !important;
    padding: 9px 11px !important;
    min-height: 36px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--context-text) !important;
    font: inherit !important;
    font-size: 13px !important;
    text-align: left !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }
  html:root body #appShell > .topbar #topbarExportMenu > button:not(:disabled):is(:hover, :focus-visible) {
    background: var(--context-hover) !important;
  }
  html:root body #appShell > .topbar #topbarExportMenu > button:disabled {
    opacity: .45 !important;
    cursor: default !important;
  }
  html:root body #appAvatarMenu #creditsControl.account-credits-control {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Keep the menu above clipped sidebar content; the anchor is viewport-clamped. */
  html:root body #appShell#appShell #step-create#step-create #appAvatarControl#appAvatarControl#appAvatarControl > #appAvatarMenu:not(.hidden) {
    position: fixed !important;
    width: 320px !important;
    max-width: calc(100vw - 24px) !important;
    max-height: var(--account-menu-available-height, calc(100dvh - 24px)) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    z-index: 10060 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
  html:root body #appAvatarMenu #creditsControl[data-account-mode="providers"] > #licensePoints,
  html:root body #appAvatarMenu #creditsControl[data-account-mode="providers"] > #creditsPopover {
    display: none !important;
  }
  html:root body #appAvatarMenu #providerBalancesBtn {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-height: 36px !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--home-nav-text, var(--chat-text, #303030)) !important;
    font: inherit !important;
    font-size: 12px !important;
    text-align: left !important;
    box-shadow: none !important;
  }
  html:root body #appAvatarMenu #providerBalancesBtn > .provider-balances-label {
    display: block !important;
    flex: 1 !important;
    min-width: 0 !important;
    color: inherit !important;
  }
  html:root body #appAvatarMenu #providerBalancesValue {
    color: var(--home-nav-muted, var(--chat-muted, #747474)) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
  }
  html:root body #appAvatarMenu #providerBalancesBtn:is(:hover, :focus-visible, [aria-expanded="true"]) {
    background: var(--home-nav-hover, #ececec) !important;
  }
  html:root body #appAvatarMenu #providerBalancesPopover {
    margin: 5px 0 8px !important;
    padding: 11px !important;
    border: 1px solid var(--home-nav-line, #e2e2e2) !important;
    border-radius: 8px !important;
    background: var(--home-nav-menu, #ffffff) !important;
    color: var(--home-nav-text, #303030) !important;
    font-size: 11px !important;
    white-space: normal !important;
    box-shadow: none !important;
  }
  html:root body #appAvatarMenu #providerBalancesPopover.hidden {
    display: none !important;
  }
  html:root body #appAvatarMenu #providerBalancesPopover header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  html:root body #appAvatarMenu #providerBalancesPopover header > div {
    display: grid !important;
    min-width: 0 !important;
    gap: 3px !important;
  }
  html:root body #appAvatarMenu #providerBalancesPopover header strong {
    font-size: 12px !important;
  }
  html:root body #appAvatarMenu #refreshProviderBalancesBtn {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
  }
  html:root body #appAvatarMenu #refreshProviderBalancesBtn:disabled {
    opacity: .5 !important;
    cursor: wait !important;
  }
  html:root body #appAvatarMenu :is(#providerBalancesBtn, #refreshProviderBalancesBtn) > .fluent-icon-shell {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    color: inherit !important;
    opacity: 1 !important;
  }
  html:root body #appAvatarMenu :is(#providerBalancesBtn, #refreshProviderBalancesBtn) :is(.fluent-icon, svg) {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    color: inherit !important;
    opacity: 1 !important;
  }
  html:root body #appAvatarMenu .provider-balance-accounts {
    display: grid !important;
    align-content: start !important;
    min-height: 0 !important;
    max-height: var(--provider-balance-list-max-height, min(36dvh, 240px)) !important;
    margin-top: 10px !important;
    overflow: hidden auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    scrollbar-gutter: stable !important;
  }
  html:root body #appAvatarMenu .provider-balance-row {
    display: grid !important;
    min-width: 0 !important;
    gap: 4px !important;
    padding: 10px 0 !important;
    border-top: 1px solid var(--home-nav-line, #e2e2e2) !important;
    background: transparent !important;
  }
  html:root body #appAvatarMenu :is(.provider-balance-row-head, .provider-balance-account) {
    display: flex !important;
    align-items: start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-width: 0 !important;
  }
  html:root body #appAvatarMenu .provider-balance-account strong {
    min-width: 0 !important;
    font-size: 12px !important;
    overflow-wrap: anywhere !important;
  }
  html:root body #appAvatarMenu .provider-balance-amount {
    max-width: 60% !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
    text-align: right !important;
    overflow-wrap: anywhere !important;
  }
  html:root body #appAvatarMenu :is(.provider-balance-purpose, .provider-balance-current, .provider-balance-model, .provider-balance-state, .provider-balance-message, .provider-balances-updated, .provider-balances-note, #providerBalancesStatus) {
    color: var(--home-nav-muted, #747474) !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
  }
  html:root body #appAvatarMenu .provider-balance-current {
    white-space: nowrap !important;
  }
  html:root body #appAvatarMenu .provider-balances-updated {
    display: block !important;
    margin-top: 7px !important;
  }
  html:root body #appAvatarMenu .provider-balances-note {
    margin: 6px 0 0 !important;
  }
  html:root body #appAvatarMenu #licensePoints {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-height: 36px !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--home-nav-text, var(--chat-text, #303030)) !important;
    font: inherit !important;
    font-size: 12px !important;
    text-align: left !important;
    box-shadow: none !important;
  }
  html:root body #appAvatarMenu #licensePoints > span {
    flex: 1 !important;
    color: inherit !important;
  }
  html:root body #appAvatarMenu #licensePointsValue {
    color: var(--home-nav-muted, var(--chat-muted, #747474)) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
  }
  html:root body #appAvatarMenu #licensePoints:is(:hover, :focus-visible, [aria-expanded="true"]) {
    background: var(--home-nav-hover, #ececec) !important;
  }
  html:root body #appAvatarMenu #creditsPopover:not(.hidden) {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 5px 0 8px !important;
    padding: 11px !important;
    border: 1px solid var(--home-nav-line, #e2e2e2) !important;
    border-radius: 8px !important;
    background: var(--home-nav-menu, #ffffff) !important;
    color: var(--home-nav-text, #303030) !important;
    font-size: 11px !important;
    box-shadow: none !important;
  }
  html:root body #appAvatarMenu #creditsPopover.hidden {
    display: none !important;
  }
  html:root body #appAvatarMenu #creditsPopover > header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  html:root body #appAvatarMenu #creditsPopover header > div {
    display: grid !important;
    gap: 3px !important;
  }
  html:root body #appAvatarMenu #creditsPopover header :is(strong, small) {
    color: inherit !important;
    font-size: 11px !important;
  }
  html:root body #appAvatarMenu #refreshCreditsBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 4px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: inherit !important;
  }
  html:root body #appAvatarMenu #creditsPopover .credits-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin: 10px 0 !important;
  }
  html:root body #appAvatarMenu #creditsPopover .credits-summary > div {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
    padding: 7px 3px !important;
    background: var(--home-nav-hover, #f2f2f2) !important;
    border: 0 !important;
    border-radius: 5px !important;
    color: inherit !important;
    text-align: center !important;
  }
  html:root body #appAvatarMenu #creditsPopover .credits-summary strong {
    font-size: 14px !important;
    color: inherit !important;
  }
  html:root body #appAvatarMenu #creditsPopover :is(p, .credits-rule) {
    display: block !important;
    margin: 7px 0 0 !important;
    color: var(--home-nav-muted, #747474) !important;
    line-height: 1.5 !important;
    font-size: 10px !important;
  }
  html:root body.workbench-home-active #step-create .project-home-nav {
    position: relative !important;
    z-index: 10000 !important;
  }
  @media (max-width: 767px) {
    html:root body #appShell#appShell #step-create#step-create
      #appAvatarControl#appAvatarControl#appAvatarControl > #appAvatarMenu:not(.hidden) {
      position: fixed !important;
      inset: 68px 12px auto !important;
      width: auto !important;
      max-width: none !important;
      max-height: calc(100dvh - 88px) !important;
    }
  }
  @media (max-width: 900px) {
    html:root body.workbench-editor-active #appShell > .topbar :is(#exportPptBtn, #topbarDeliveryBtn) {
      min-width: 60px !important;
      gap: 4px !important;
      padding-inline: 7px !important;
      font-size: 12px !important;
    }
  }
}

/* Place each editor region explicitly so contextual actions stay in the header. */
@layer assistantChrome {
  html:root body.workbench-editor-active #appShell {
    grid-template-rows: 56px 38px minmax(0, 1fr) !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar {
    display: grid !important;
    grid-template-columns: max-content minmax(120px, 220px) minmax(280px, 1fr) max-content !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: stretch !important;
    box-sizing: border-box !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 4px 14px !important;
    overflow: visible !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar > .brand-block {
    /* ia: hide brand in editor topbar */
    display: none !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  html:root body.workbench-editor-active #appShell#appShell > .topbar > #projectHomeSearch#projectHomeSearch {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 3px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav::-webkit-scrollbar {
    display: none !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action::before {
    content: none !important;
    display: none !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action {
    display: inline-flex !important;
    flex: 1 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 54px !important;
    width: auto !important;
    height: 34px !important;
    min-height: 34px !important;
    gap: 4px !important;
    padding: 5px 7px !important;
    margin: 0 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  /* Only the four primary stages belong in this navigation. Contextual
     style/review actions remain available outside the topbar tablist. */
  html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] {
    display: inline-flex !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"][hidden] {
    display: none !important;
  }
  html:root body #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-secondary="true"] {
    display: none !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action > span:not(.fluent-icon-shell) {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar > #workbenchModeBridge {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: static !important;
    inset: auto !important;
    width: 96px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar > .top-actions {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar #topbarTaskProgressBtn {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 180px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 6px 9px !important;
    gap: 5px !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar #topbarExportMenu:not([hidden]) {
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
  }
  .editor-project-context { display: none; }
  html:root body.workbench-editor-active #appShell > .topbar > #editorProjectContext:not([hidden]) {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--neutral-text);
    font-size: 12px;
  }
  html:root body.workbench-editor-active #appShell > .topbar > #editorProjectContext > #fileCenterBtn {
    display: inline-flex !important;
    flex: 0 0 68px;
    align-items: center !important;
    justify-content: center !important;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 34px !important;
    min-height: 34px !important;
    gap: 5px !important;
    padding: 0 8px !important;
    border: 1px solid var(--neutral-line) !important;
    border-radius: 6px !important;
    background: var(--neutral-panel) !important;
    color: var(--neutral-text) !important;
    font-size: 12px !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar > #editorProjectContext > #fileCenterBtn > .button-label,
  html:root body.workbench-editor-active #appShell > .topbar > #editorProjectContext > #fileCenterBtn > span:not(.fluent-icon-shell) {
    display: inline !important;
    min-width: 0;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar > #editorProjectContext > #fileCenterBtn > :is(svg, i, .fluent-icon-shell) {
    flex: 0 0 16px;
    width: 16px !important;
    height: 16px !important;
    color: inherit !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar > #editorProjectContext > #fileCenterBtn:is(:hover, :focus-visible) {
    color: var(--neutral-accent-strong) !important;
    background: var(--neutral-accent-soft) !important;
    border-color: var(--neutral-accent) !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar > #editorProjectContext > #editorProjectName {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--neutral-text);
    font-size: 12px !important;
  }
  /* Home-only project search has no document search behavior in the editor. */
  @media (min-width: 1200px) {
    html:root body.workbench-editor-active #appShell > .topbar {
      grid-template-columns: max-content minmax(120px, 220px) minmax(280px, 1fr) max-content !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar > #projectHomeSearch {
      display: none !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav { grid-column: 3 !important; }
    html:root body.workbench-editor-active #appShell > .topbar > #workbenchModeBridge {
    grid-column: 1 !important; }
    html:root body.workbench-editor-active #appShell > .topbar > .top-actions {
    grid-column: 4 !important; }
  }
  @media (max-width: 1199px) {
    html:root body.workbench-editor-active {
      --v2-topbar-height: 96px;
    }
    html:root body.workbench-editor-active #appShell {
      grid-template-rows: 96px 38px minmax(0, 1fr) !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar {
      grid-template-columns: 146px minmax(180px, 1fr) 96px max-content !important;
      grid-template-rows: 36px 38px !important;
      column-gap: 8px !important;
      row-gap: 6px !important;
      height: 96px !important;
      min-height: 96px !important;
      padding: 7px 12px !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar > #projectHomeSearch {
      display: none !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar > #workbenchModeBridge {
      grid-column: 1 !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar > .top-actions {
      grid-column: 4 !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav {
      grid-column: 1 / -1 !important;
      grid-row: 2 !important;
      height: 38px !important;
      min-height: 38px !important;
      padding: 2px 0 !important;
    }
  }
  @media (min-width: 641px) and (max-width: 980px) {
    html:root body.workbench-editor-active #appShell > .topbar {
      grid-template-columns: 56px minmax(120px, 1fr) 96px max-content !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar > .brand-block > #projectHomeBtn.workmate-wordmark {
      width: 56px !important;
      min-width: 56px !important;
      max-width: 56px !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar > .brand-block > #projectHomeBtn > .workmate-wordmark-copy { display: none !important; }
  }
  @media (max-width: 640px) {
    html:root body.workbench-editor-active #appShell > .topbar {
      grid-template-columns: 34px 96px minmax(0, 1fr) !important;
      column-gap: 6px !important;
      padding-inline: 8px !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar > .brand-block {
      display: none !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar > #editorProjectContext:not([hidden]) {
      grid-column: 1 !important;
      width: 34px !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar > #editorProjectContext > #fileCenterBtn {
      flex: 0 0 34px !important;
      width: 34px !important;
      min-width: 34px !important;
      max-width: 34px !important;
      padding: 0 !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar > #editorProjectContext > #fileCenterBtn > :is(.button-label, span:not(.fluent-icon-shell)) {
      display: none !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar > #editorProjectContext > #editorProjectName { display: none !important; }
    html:root body.workbench-editor-active #appShell > .topbar > #workbenchModeBridge {
      grid-column: 1 !important;
      width: 96px !important;
      padding: 2px !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar > #workbenchModeBridge > button {
      min-width: 0 !important;
      flex: 1 1 0 !important;
      padding-inline: 5px !important;
      font-size: 12px !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar > .top-actions {
      grid-column: 3 !important;
      gap: 4px !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar #saveState {
      padding-inline: 3px !important;
      font-size: 11px !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar #topbarTaskProgressBtn {
      flex: 0 0 30px !important;
      width: 30px !important;
      max-width: 30px !important;
      justify-content: center !important;
      padding: 5px !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar #topbarTaskProgressBtn :is(#topbarTaskProgressLabel, #topbarTaskProgressFailure) {
      display: none !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav {
      gap: 2px !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action {
      min-width: 49px !important;
      padding-inline: 4px !important;
      font-size: 11px !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action > span:not(.fluent-icon-shell) {
      font-size: 11px !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-count]::after {
      display: none !important;
    }
  }
  @media (max-width: 360px) {
    html:root body.workbench-editor-active #appShell > .topbar #saveState {
      font-size: 0 !important;
      gap: 0 !important;
      padding-inline: 3px !important;
    }
  }

  /* Keep the workflow icons visible at desktop widths. A legacy compact rule
     hid them below 1440px, leaving the stage buttons as text-only pills and
     making the hierarchy harder to scan. */
  @media (min-width: 1024px) and (max-width: 1440px) {
    html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action > .fluent-icon-shell {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 0 0 16px !important;
      width: 16px !important;
      height: 16px !important;
      margin: 0 !important;
      color: inherit !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
    html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action > .fluent-icon-shell > .fluent-icon {
      display: block !important;
      width: 16px !important;
      height: 16px !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
  }
}

/* ==== consolidated from /document-tabs.css (cascade order preserved) ==== */
/* Phase1 merge: platform-adaptation + workspace-navigation + document-tabs + content-planning-overrides (cascade preserved). */
/* ===== merged from /platform-adaptation.css ===== */
/* Platform adaptation occupies the editor surface while its own controls are open. */
html:root body.workbench-editor-active #step-edit.social-publish-mode.workflow-panel-open {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

html:root body.workbench-editor-active #step-edit.social-publish-mode.workflow-panel-open
  > :is(.thumb-panel, .canvas-area, .inspector, .editor-top-ribbon, .editor-tool-rail, .editor-panel-resizer) {
  display: none !important;
}

html:root body.workbench-editor-active #step-edit.social-publish-mode.workflow-panel-open > #editorWorkflowWorkspace {
  display: block !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 / -1 !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: auto !important;
}

html:root body.workbench-editor-active #editorWorkflowWorkspace > #step-social {
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
}

html:root body.workbench-editor-active #step-social > .social-store-hero {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  min-height: 84px !important;
  padding: 14px 20px !important;
}

html:root body.workbench-editor-active #step-social .social-hero-side {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

html:root body.workbench-editor-active #closeSocialWorkspaceBtn {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
}

.delivery-platform-adaptation > p {
  margin: 8px 0 12px;
  color: var(--editor-chrome-muted, var(--v2-muted, #737373));
  font-size: 12px;
  line-height: 1.6;
}

/* Native delivery objects use cqw for text sizing; the page owns that unit. */
.delivery-workflow-canvas {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.delivery-workflow-slide {
  position: relative;
  width: 100%;
  height: 100%;
  container-type: inline-size;
}

/* ===== merged from /workspace-navigation.css ===== */
/* Shared navigation recovery for narrow chat windows and project search. */
@layer assistantChrome {
  html:root body #projectHubView .project-card[hidden],
  html:root body #projectHomeSidebarBackdrop[hidden] {
    display: none !important;
  }
  html:root body #projectHomeSidebarToggle {
    display: none !important;
  }
  html:root body #workspaceToolBackBtn {
    display: none !important;
  }
  @media (max-width: 1023px) {
    html:root body:not([data-active-step="create"]):not([data-active-step="edit"]) #workspaceToolBackBtn {
      display: inline-flex !important;
      position: fixed !important;
      top: 10px !important;
      left: 10px !important;
      z-index: 500 !important;
      align-items: center !important;
      gap: 6px !important;
      min-height: 34px !important;
      padding: 6px 10px !important;
      border: 1px solid var(--v2-line, #dddddd) !important;
      border-radius: 8px !important;
      background: var(--v2-panel, #ffffff) !important;
      color: var(--v2-text, #303030) !important;
      box-shadow: 0 2px 8px rgb(0 0 0 / 12%) !important;
      font-size: 12px !important;
    }
    html:root body #workspaceToolBackBtn :is(svg, .fluent-icon-shell) {
      width: 16px !important;
      height: 16px !important;
    }
    html:root body[data-project-home-mode="chat"] #projectHomeSidebarToggle {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 34px !important;
      height: 34px !important;
      flex: 0 0 34px !important;
      margin: 0 6px 0 0 !important;
      padding: 6px !important;
      border: 0 !important;
      border-radius: 8px !important;
      background: transparent !important;
      color: var(--chat-text, #303030) !important;
      cursor: pointer !important;
    }
    html:root body #projectHomeSidebarToggle :is(svg, .fluent-icon-shell) {
      width: 20px !important;
      height: 20px !important;
    }
    html:root body[data-project-home-mode="chat"] .project-home-chat-topbar {
      justify-content: flex-start !important;
    }
    html:root body[data-project-home-mode="chat"] #projectHomeModeSwitch {
      margin-left: auto !important;
    }
    html:root body[data-project-home-mode="chat"] #projectHomeSidebarBackdrop:not([hidden]) {
      display: block !important;
      position: fixed !important;
      inset: 0 !important;
      z-index: 10010 !important;
      border: 0 !important;
      border-radius: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      max-width: none !important;
      max-height: none !important;
      transform: none !important;
      box-shadow: none !important;
      background: rgb(0 0 0 / 36%) !important;
    }
    html:root body[data-project-home-mode="chat"].project-home-sidebar-open #step-create > .project-home-shell > .project-home-nav {
      z-index: 10020 !important;
      flex-direction: column !important;
      gap: 4px !important;
      padding: 16px 16px 12px !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
      background: var(--home-nav-surface, #f9f9f9) !important;
      border-right: 1px solid var(--home-nav-line, #e2e2e2) !important;
    }
    html:root body.project-home-sidebar-open #step-create .project-home-brand {
      order: 0 !important;
      flex: 0 0 auto !important;
      margin-bottom: 18px !important;
    }
    html:root body.project-home-sidebar-open #projectHomeChatNav {
      order: 1 !important;
      flex: 0 0 auto !important;
    }
    html:root body.project-home-sidebar-open #projectHomeConversationNav {
      display: flex !important;
      order: 2 !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
      width: 100% !important;
      overflow: hidden !important;
    }
    html:root body.project-home-sidebar-open #projectHomeConversationNav #assistantSideNav {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      min-height: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }
    html:root body.project-home-sidebar-open #assistantSideHistory:not(.hidden) {
      display: block !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow: auto !important;
    }
    html:root body.project-home-sidebar-open #projectHomeSharedTools {
      order: 3 !important;
      margin: auto 0 0 !important;
    }
    html:root body.project-home-sidebar-open #appAvatarControl {
      order: 4 !important;
    }
  }
}

/* ===== merged from /document-tabs.css ===== */
/* The document bar owns one 38px row; only its central viewport may scroll. */
.document-tabs-bar {
  --document-tabs-bg: #f4f4f5;
  --document-tabs-active: #ffffff;
  --document-tabs-hover: #e9e9ec;
  --document-tabs-line: #dedee3;
  --document-tabs-text: #66666f;
  --document-tabs-selected: #222229;
  --document-tabs-focus: var(--neutral-accent, #a86f25);
  display: none;
  grid-template-columns: minmax(0, 1fr) 28px 36px;
  grid-template-rows: 38px;
  align-items: stretch;
  gap: 0;
  height: 38px;
  min-height: 0;
  min-width: 0;
  padding: 0 !important;
  overflow: hidden;
  border-bottom: 1px solid var(--document-tabs-line);
  background: var(--document-tabs-bg);
  color: var(--document-tabs-text);
}
.document-tabs-viewport {
  min-width: 0;
  width: 100%;
  height: 38px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.document-tabs-viewport::-webkit-scrollbar { display: none; }
.document-tabs-list {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  width: max-content;
  min-width: 100%;
  height: 38px;
  padding: 0;
  gap: 0;
}
.document-tab {
  display: flex;
  flex: 0 0 196px;
  width: 196px;
  min-width: 0;
  height: 38px;
  align-items: center;
  overflow: hidden;
  border-right: 1px solid var(--document-tabs-line);
  background: transparent;
  color: var(--document-tabs-text);
}
.document-tab.active, .document-home-tab.active {
  background: var(--document-tabs-active);
  color: var(--document-tabs-selected);
  box-shadow: inset 0 2px 0 var(--document-tabs-focus);
}
.document-tab:not(.active):hover, .document-home-tab:not(.active):hover { background: var(--document-tabs-hover); }
.document-tabs-bar button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  box-shadow: none;
  cursor: pointer;
}
.document-tabs-bar button:focus-visible { outline: 2px solid var(--document-tabs-focus); outline-offset: -3px; }
.document-tabs-bar button > svg, .document-tabs-bar button > i {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
}
.document-tabs-bar .document-tab-main {
  flex: 1 1 auto;
  height: 38px;
  padding: 0 6px 0 12px;
  gap: 7px;
  justify-content: flex-start;
  overflow: hidden;
}
.document-tab-title { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-tabs-bar .document-tab-close {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-right: 4px;
  padding: 5px;
  border-radius: 5px;
}
.document-tabs-bar .document-tab-close:hover { background: var(--document-tabs-hover); color: var(--document-tabs-selected); }
.document-tab-dirty { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #d59b2d; }
.document-tab.save-error .document-tab-dirty { background: #dd4a4a; }
.document-home-tab { flex: 0 0 102px; min-width: 0; height: 38px; border-right: 1px solid var(--document-tabs-line); }
.document-home-tab button { width: 100%; height: 38px; gap: 7px; padding: 0 10px; white-space: nowrap; }
.document-tabs-bar .document-tabs-scroll, .document-tabs-bar .document-tabs-open { height: 38px; padding: 0; }
.document-tabs-bar .document-tabs-scroll:hover:not(:disabled), .document-tabs-bar .document-tabs-open:hover:not(:disabled) { background: var(--document-tabs-hover); color: var(--document-tabs-selected); }
.document-tabs-bar button:disabled { opacity: .35; cursor: default; }
html[data-theme="dark"] .document-tabs-bar {
  --document-tabs-bg: #242427;
  --document-tabs-active: #303035;
  --document-tabs-hover: #39393e;
  --document-tabs-line: #414147;
  --document-tabs-text: #b5b5bd;
  --document-tabs-selected: #f2f2f5;
  --document-tabs-focus: var(--neutral-accent, #d5a15c);
}
@media (max-width: 767px) {
  .document-tabs-bar { grid-template-columns: minmax(0, 1fr) 24px 32px; }
  .document-tab { flex-basis: 176px; width: 176px; }
  .document-home-tab { flex-basis: 88px; }
  .document-tabs-bar .document-tab-main { padding-left: 8px; gap: 5px; }
}

/* ===== merged from /content-planning-overrides.css ===== */
/* Loaded after every general workbench stylesheet. Content planning is a
 * standalone surface and must not inherit the editor's three-column shell. */
html:root body.workbench-editor-active#bodyRoot #appShell#appShell
  #step-edit#step-edit.editor-layout.copy-planning-mode {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* The live document does not assign body#bodyRoot in the browser route. */
html:root body.workbench-editor-active #appShell#appShell
  #step-edit#step-edit.editor-layout.copy-planning-mode {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html:root body.workbench-editor-active#bodyRoot #appShell#appShell
  #step-edit#step-edit.editor-layout.copy-planning-mode > :is(
    .editor-top-ribbon,
    .thumb-panel,
    .canvas-area,
    .inspector,
    .editor-tool-rail,
    .editor-workflow-workspace,
    .editor-narrow-panel-controls,
    .editor-narrow-panel-backdrop,
    .editor-panel-resizer,
    #leftEditorPanelResizer,
    #rightEditorPanelResizer
  ) {
  display: none !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

html:root body.workbench-editor-active #appShell#appShell
  #step-edit#step-edit.editor-layout.copy-planning-mode > :is(
    .editor-top-ribbon,
    .thumb-panel,
    .canvas-area,
    .inspector,
    .editor-tool-rail,
    .editor-workflow-workspace,
    .editor-narrow-panel-controls,
    .editor-narrow-panel-backdrop,
    .editor-panel-resizer,
    #leftEditorPanelResizer,
    #rightEditorPanelResizer
  ) {
  display: none !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

html:root body.workbench-editor-active#bodyRoot #appShell#appShell
  #step-edit#step-edit.editor-layout.copy-planning-mode > .copy-planning-workspace {
  display: block !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  overflow: auto !important;
}

html:root body.workbench-editor-active #appShell#appShell
  #step-edit#step-edit.editor-layout.copy-planning-mode > .copy-planning-workspace {
  display: block !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  overflow: auto !important;
}

html:root body.workbench-editor-active#bodyRoot #appShell#appShell
  #step-edit#step-edit.editor-layout.copy-planning-mode .copy-plan-shell {
  box-sizing: border-box !important;
}

@media (max-width: 980px) {
  html:root body.workbench-editor-active#bodyRoot #appShell#appShell
    #step-edit#step-edit.editor-layout.copy-planning-mode > .copy-planning-workspace {
    padding: 10px !important;
  }

  html:root body.workbench-editor-active#bodyRoot #appShell#appShell
    #step-edit#step-edit.editor-layout.copy-planning-mode .copy-plan-shell {
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    border-radius: 8px !important;
  }

html:root body.workbench-editor-active #appShell#appShell
  #step-edit#step-edit.editor-layout.copy-planning-mode .copy-plan-shell {
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    border-radius: 8px !important;
  }

  html:root body.workbench-editor-active #appShell#appShell
    #step-edit#step-edit.editor-layout.copy-planning-mode .copy-plan-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  html:root body.workbench-editor-active #appShell#appShell
    #step-edit#step-edit.editor-layout.copy-planning-mode .copy-plan-head h2 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  html:root body.workbench-editor-active #appShell#appShell
    #step-edit#step-edit.editor-layout.copy-planning-mode .copy-plan-head p {
    white-space: normal !important;
    line-height: 1.45 !important;
  }

  html:root body.workbench-editor-active #appShell#appShell
    #step-edit#step-edit.editor-layout.copy-planning-mode .copy-plan-model {
    min-width: 0 !important;
    width: 100% !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid var(--v2-line) !important;
    border-left: 0 !important;
  }
}

/* 2026-10-09 streamlined intake: one clear first action, optional context,
 * and a single primary path into the editable canvas. Keep this scoped to the
 * planning surface so the editor and review workspace retain their own layout. */
#step-edit.editor-layout.copy-planning-mode .copy-plan-shell.copy-plan-simple {
  box-shadow: none !important;
  border-color: var(--v2-line) !important;
}

.copy-plan-simple .copy-plan-head {
  padding-bottom: 14px;
}

.copy-plan-simple .copy-plan-kicker,
.copy-plan-simple .copy-plan-section > header em,
.copy-plan-simple .copy-plan-analysis > * > header em {
  color: var(--neutral-accent, var(--v2-muted)) !important;
}

.copy-plan-simple .copy-plan-topic-field input {
  min-height: 52px;
  font-size: 14px;
}

.copy-plan-context-settings,
.copy-plan-more-settings {
  border-top-color: var(--v2-line) !important;
}

.copy-plan-context-settings summary,
.copy-plan-more-settings summary {
  min-height: 38px;
}

.copy-plan-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  padding: 8px 0 4px;
}

.copy-plan-context-grid label {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.copy-plan-context-grid label > span {
  color: var(--v2-muted);
  font-size: 10px;
  font-weight: 650;
}

.copy-plan-simple .copy-plan-analyze-action,
.copy-plan-simple .copy-plan-generate-action {
  white-space: nowrap;
}

.copy-plan-simple .copy-plan-analysis-empty {
  min-height: 300px;
}

.copy-plan-analysis-empty ol {
  display: grid;
  width: min(100%, 240px);
  gap: 7px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.copy-plan-analysis-empty li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--v2-muted);
  font-size: 9px;
}

.copy-plan-analysis-empty li b {
  display: grid;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  place-items: center;
  border: 1px solid var(--v2-line-strong);
  border-radius: 50%;
  color: var(--v2-text);
  font-size: 8px;
}

.copy-plan-simple .copy-plan-actions {
  grid-template-columns: minmax(0, 1fr) auto auto;
  box-shadow: none;
}

@media (max-width: 720px) {
  .copy-plan-context-grid {
    grid-template-columns: 1fr;
  }

  .copy-plan-simple .copy-plan-actions {
    grid-template-columns: 1fr;
  }
}

/* /style-workflow-overrides.css */
/* ==== consolidated from /style-workflow-overrides.css (cascade order preserved) ==== */
/* The style workflow uses one scrolling document, separate from the page editor. */

/* Keep this workspace on the product's neutral/warm palette. The wider
   application theme may still expose legacy blue variables, so remap them
   locally before the inherited style-workspace rules are evaluated. */
html:root body.workbench-editor-active #step-edit.style-preview-mode,
html:root body.workbench-editor-active #step-edit.style-preview-mode #editorWorkflowWorkspace,
html:root body.workbench-editor-active #step-edit.style-preview-mode #step-style {
  --style-bg: #f6f4ef;
  --style-card: #fffdf9;
  --style-card-soft: #eeebe4;
  --style-text: #292725;
  --style-muted: #706b63;
  --style-line: #ddd8ce;
  --style-line-strong: #c9c1b4;
  --style-accent: #a86f1e;
  --style-accent-hover: #855515;
  --style-accent-soft: #f3e7d3;
  --style-accent-on: #fffaf0;
  --store-bg: var(--style-bg);
  --store-card: var(--style-card);
  --store-card-soft: var(--style-card-soft);
  --store-text: var(--style-text);
  --store-secondary: var(--style-muted);
  --store-tertiary: #8a8379;
  --store-line: var(--style-line);
  --store-line-strong: var(--style-line-strong);
  --store-blue: var(--style-accent);
  --store-blue-hover: var(--style-accent-hover);
  --store-blue-soft: var(--style-accent-soft);
  --store-ai: var(--style-accent);
  --store-ai-hover: var(--style-accent-hover);
  --v2-blue: var(--style-accent);
  --v2-blue-hover: var(--style-accent-hover);
  --v2-blue-soft: var(--style-accent-soft);
  --theme-accent: var(--style-accent);
  --theme-accent-hover: var(--style-accent-hover);
  --theme-bg: var(--style-bg);
  --theme-panel: var(--style-card);
  --theme-panel-soft: var(--style-card-soft);
  --theme-panel-raised: var(--style-card);
  --theme-text: var(--style-text);
  --theme-muted: var(--style-muted);
  --theme-line: var(--style-line);
  --theme-line-strong: var(--style-line-strong);
}

/* The dark theme's legacy workmate sheet targets this panel with an ID chain
   and used a navy fill. Match that scope so the style workspace stays warm. */
html:root[data-theme="dark"] body.workbench-editor-active #step-edit.style-preview-mode #step-style.panel.flow-panel,
html:root[data-theme="dark"] body.workbench-editor-active #step-edit.style-preview-mode #editorWorkflowWorkspace {
  background: var(--style-bg) !important;
  background-color: var(--style-bg) !important;
  border-color: var(--style-line) !important;
}
html:root[data-theme="dark"] body.workbench-editor-active #step-edit #step-style :is(button.primary-btn, button.primary, button.recommended, button.active) {
  border-color: var(--style-accent) !important;
  background: var(--style-accent) !important;
  background-color: var(--style-accent) !important;
  background-image: none !important;
  color: var(--style-accent-on) !important;
}

html:root[data-theme="dark"] body.workbench-editor-active #step-edit.style-preview-mode,
html:root[data-theme="dark"] body.workbench-editor-active #step-edit.style-preview-mode #editorWorkflowWorkspace,
html:root[data-theme="dark"] body.workbench-editor-active #step-edit.style-preview-mode #step-style {
  --style-bg: #1c1b19;
  --style-card: #252320;
  --style-card-soft: #302d28;
  --style-text: #f2eee7;
  --style-muted: #b8b0a3;
  --style-line: #49443c;
  --style-line-strong: #61594e;
  --style-accent: #d7a452;
  --style-accent-hover: #edbd6b;
  --style-accent-soft: #493a27;
  --style-accent-on: #241a0d;
  --store-bg: var(--style-bg);
  --store-card: var(--style-card);
  --store-card-soft: var(--style-card-soft);
  --store-text: var(--style-text);
  --store-secondary: var(--style-muted);
  --store-tertiary: #968d80;
  --store-line: var(--style-line);
  --store-line-strong: var(--style-line-strong);
  --store-blue: var(--style-accent);
  --store-blue-hover: var(--style-accent-hover);
  --store-blue-soft: var(--style-accent-soft);
  --store-ai: var(--style-accent);
  --store-ai-hover: var(--style-accent-hover);
  --v2-blue: var(--style-accent);
  --v2-blue-hover: var(--style-accent-hover);
  --v2-blue-soft: var(--style-accent-soft);
  --theme-accent: var(--style-accent);
  --theme-accent-hover: var(--style-accent-hover);
  --theme-bg: var(--style-bg);
  --theme-panel: var(--style-card);
  --theme-panel-soft: var(--style-card-soft);
  --theme-panel-raised: var(--style-card);
  --theme-text: var(--style-text);
  --theme-muted: var(--style-muted);
  --theme-line: var(--style-line);
  --theme-line-strong: var(--style-line-strong);
}

/* Warm-neutral component pass. These rules intentionally sit after the
   legacy Apple/workflow sheets so no inherited blue fill or border survives
   in the style workspace. The preview artwork and its palette swatches keep
   their source colors. */
#step-style :is(
  .style-decision-details, .style-basis-details, .style-ai-details,
  .style-recommendation-panel, .style-direction-advanced,
  .workflow-smart-command, .style-moodboard-actionbar, .style-library-details,
  .style-workflow-empty, .style-source-selection-status,
  .style-layout-choice, .style-design-path-choice
) {
  border-color: var(--style-line) !important;
  background: var(--style-card) !important;
  background-image: none !important;
}

#step-style :is(
  .style-recommendation-route, .style-moodboard, .style-option,
  .workflow-inspector-section, .workflow-source-summary,
  .style-smart-command, .style-route-details
) {
  border-color: var(--style-line) !important;
  background: var(--style-card) !important;
  background-image: none !important;
}

#step-style :is(
  .style-workflow-steps > :is(span, button.style-workflow-step), .style-recommendation-routes span,
  .style-moodboard-keywords span, .style-route-index,
  .style-source-selection-status, .style-workflow-empty,
  .style-option.recommended
) {
  border-color: var(--style-line) !important;
  background: var(--style-card-soft) !important;
}

#step-style :is(
  .style-recommendation-badge, .style-moodboard-route-pill,
  .style-moodboard-status.is-selected, .style-recommendation-details > summary,
  .style-route-index, .style-design-path-options label input:checked + span
) {
  border-color: var(--style-accent) !important;
  color: var(--style-accent) !important;
  background: var(--style-accent-soft) !important;
}

#step-style :is(
  button.primary-btn, button.primary, button.recommended,
  .workflow-wide-action.primary-btn, [data-style-stage-action="generate-confirmed"]
) {
  border-color: var(--style-accent) !important;
  background: var(--style-accent) !important;
  color: var(--style-accent-on) !important;
  box-shadow: none !important;
}

#step-style :is(
  button.primary-btn, button.primary, button.recommended,
  .workflow-wide-action.primary-btn, [data-style-stage-action="generate-confirmed"]
):hover:not(:disabled),
#step-style :is(
  button.primary-btn, button.primary, button.recommended,
  .workflow-wide-action.primary-btn, [data-style-stage-action="generate-confirmed"]
):focus-visible {
  border-color: var(--style-accent-hover) !important;
  background: var(--style-accent-hover) !important;
  color: var(--style-accent-on) !important;
}

#step-style :is(button.ghost-btn, .ghost-btn, .assistant-icon-btn) {
  border-color: var(--style-line-strong) !important;
  background: var(--style-card) !important;
  background-image: none !important;
  color: var(--style-text) !important;
}

#step-style :is(button.ghost-btn, .ghost-btn, .assistant-icon-btn):hover:not(:disabled),
#step-style :is(button.ghost-btn, .ghost-btn, .assistant-icon-btn):focus-visible {
  border-color: var(--style-accent) !important;
  background: var(--style-accent-soft) !important;
  color: var(--style-accent) !important;
}

#step-style :is(
  .style-recommendation-route.selected, .style-moodboard.selected,
  .style-option.recommended, .style-layout-variant.active,
  .style-direction-segmented button.active, .style-palette-tabs button.active
) {
  border-color: var(--style-accent) !important;
  background: var(--style-accent-soft) !important;
  color: var(--style-text) !important;
  box-shadow: inset 0 0 0 1px var(--style-accent) !important;
}

#step-style :is(.style-moodboard.selected, .style-option.recommended) {
  box-shadow: 0 0 0 2px var(--style-accent) !important;
}

#step-style :is(
  .style-recommendation-route.selected .style-route-index,
  .style-route-index[aria-current="true"]
) {
  border-color: var(--style-accent) !important;
  background: var(--style-accent) !important;
  color: var(--style-accent-on) !important;
}

#step-style :is(
  .style-recommendation-route > button > svg,
  .style-recommendation-details > summary,
  .style-moodboard-plan-label,
  .style-contrast-status.valid,
  .style-route-risk svg
) {
  color: var(--style-accent) !important;
}

#step-style :is(input, select, textarea):focus,
#step-style :is(input, select, textarea):focus-visible,
#step-style :is(button, summary):focus-visible {
  border-color: var(--style-accent) !important;
  outline: 2px solid color-mix(in srgb, var(--style-accent) 34%, transparent) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

#step-style #styleSmartCommandPanel .workflow-smart-command,
#step-style #styleSmartCommandPanel .workflow-smart-command textarea {
  border-color: var(--style-line-strong) !important;
  background: var(--style-card) !important;
  color: var(--style-text) !important;
  background-image: none !important;
}

#step-style #styleSmartCommandPanel .workflow-smart-command-hint,
#step-style #styleSmartCommandPanel .workflow-smart-command textarea::placeholder,
#step-style :is(.style-recommendation-route > p, .style-route-summary > em,
  .style-route-details dt, .style-source-selection-status, .style-workflow-empty p) {
  color: var(--style-muted) !important;
}

#step-style #styleStageInspector > .workflow-inspector-footer,
#step-style .style-recommendation-footer {
  border-color: var(--style-line) !important;
  background: var(--style-card-soft) !important;
  background-image: none !important;
}

html:root body.workbench-editor-active #step-edit.style-preview-mode,
html:root body.workbench-editor-active #step-edit.style-preview-mode #editorWorkflowWorkspace,
html:root body.workbench-editor-active #step-edit.style-preview-mode #step-style {
  color: var(--style-text) !important;
  background: var(--style-bg) !important;
  background-color: var(--style-bg) !important;
  background-image: none !important;
}
html:root body.workbench-editor-active #appShell#appShell
  #step-edit#step-edit.style-preview-mode.workflow-panel-open {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
}

html:root body.workbench-editor-active #appShell#appShell
  #step-edit#step-edit.style-preview-mode.workflow-panel-open > :is(
    .editor-narrow-panel-controls, .editor-narrow-panel-backdrop,
    .editor-top-ribbon, .thumb-panel, .canvas-area, .inspector,
    .editor-tool-rail, .editor-panel-resizer, .copy-planning-workspace
  ) {
  display: none !important;
}

html:root body.workbench-editor-active #appShell#appShell
  #step-edit#step-edit.style-preview-mode.workflow-panel-open > .editor-workflow-workspace {
  display: block !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

html:root body.workbench-editor-active #step-edit.style-preview-mode
  #editorWorkflowWorkspace > #step-style.panel.flow-panel:not(.hidden) {
  display: block !important;
  width: min(1200px, 100%) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: clamp(18px, 2.4vw, 32px) !important;
  overflow: visible !important;
}

/* The former right inspector is mounted in the recommendation section. */
html:root body #step-edit.style-preview-mode #step-style #styleDecisionPanel,
html:root body #step-edit.style-preview-mode #step-style #styleStageInspector {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html:root body #step-edit.style-preview-mode #step-style #styleStageInspector.hidden {
  display: none !important;
}

html:root body #step-edit.style-preview-mode #step-style
  #styleStageInspector:has(> .workflow-inspector-footer) {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 16px !important;
  height: auto !important;
  overflow: visible !important;
}

html:root body #step-edit.style-preview-mode #step-style
  #styleStageInspector > .workflow-inspector-scroll {
  min-height: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
  scrollbar-gutter: auto !important;
}

html:root body #step-edit.style-preview-mode #step-style
  #styleStageInspector > .workflow-inspector-footer {
  position: static !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  border: 1px solid var(--v2-line, #e5e5e5) !important;
  border-radius: 10px !important;
  background: var(--v2-panel, #fff) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#step-style #styleStageInspector .style-recommendation-routes {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#step-style #styleStageInspector .style-recommendation-route {
  min-width: 0;
  height: 100%;
}

#step-style #styleStageInspector .style-recommendation-route > p,
#step-style #styleStageInspector .style-recommendation-route :is(dd, small, em) {
  overflow-wrap: anywhere;
}

#step-style #styleStageInspector .style-recommendation-footer {
  display: grid;
  gap: 10px;
}

#step-style #styleStageInspector .style-layout-mode-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#step-style #styleStageInspector .style-layout-mode-actions .workflow-wide-action,
#step-style #styleStageInspector .style-recommendation-footer > .workflow-wide-action,
#step-style #styleStageInspector .style-design-paths > .workflow-wide-action {
  min-height: 44px;
  font-size: 13px;
  font-weight: 650;
}

#step-style .hidden,
#step-style #generateStyleMoodboardsBtn.hidden {
  display: none !important;
}

#step-style[data-has-style-preview="false"] :is(#styleMoodboardView, #styleLockSummary) {
  display: none !important;
}

/* One reading rail: step indicator, recommendation, optional settings, previews. */
html:root body #step-edit #step-style .panel-head,
html:root body #step-edit #step-style > :is(
  #styleChoiceEntry, .style-workflow-steps, .style-decision-details, .style-basis-details,
  .style-ai-details, .style-compare-heading, #styleMoodboardView,
  #styleLockSummary, .style-library-details
) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html:root body #step-edit #step-style .panel-head {
  position: relative !important;
  top: auto !important;
  min-height: 0 !important;
  padding: 0 0 20px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid var(--store-line, var(--v2-line, #e5e5e5)) !important;
}

html:root body #step-edit #step-style .style-workflow-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

#step-style .style-workflow-steps > :is(span, button.style-workflow-step) {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--store-line, var(--v2-line, #e5e5e5));
  border-radius: 10px;
  color: var(--store-secondary, var(--v2-muted, #687386));
  background: var(--store-card, var(--v2-panel, #fff));
  font-size: 12px;
  font-weight: 600;
}

#step-style .style-workflow-steps b {
  display: grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  color: var(--store-blue, #a86f1e);
  background: var(--store-blue-soft, #f3e7d3);
  font-size: 11px;
}

#step-style > :is(.style-decision-details, .style-basis-details, .style-ai-details) {
  margin-bottom: 14px;
  border: 1px solid var(--store-line, var(--v2-line, #e5e5e5));
  border-radius: 12px;
  background: var(--store-card, var(--v2-panel, #fff));
  overflow: hidden;
}

#step-style > :is(.style-decision-details, .style-basis-details, .style-ai-details) > summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  color: var(--store-text, var(--v2-text, #202124));
  font-size: 13px;
  font-weight: 680;
  line-height: 1.4;
  cursor: pointer;
  list-style-position: inside;
}

#step-style > .style-decision-details > summary {
  flex-wrap: wrap;
}

#step-style > .style-decision-details > summary small {
  margin-left: auto;
  color: var(--store-secondary, var(--v2-muted, #687386));
  font-size: 11px;
  font-weight: 450;
}

#step-style > :is(.style-decision-details, .style-basis-details, .style-ai-details)[open] > summary {
  border-bottom: 1px solid var(--store-line, var(--v2-line, #e5e5e5));
}

html:root body #step-edit.style-preview-mode #step-style #styleDecisionPanel.style-decision-panel {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 18px !important;
}

#step-style #styleDecisionPanel > #styleStageInspector {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#step-style .style-workflow-empty {
  display: grid;
  justify-items: start;
  gap: 9px;
  padding: 18px 20px;
  border: 1px dashed var(--store-line, var(--v2-line, #e5e5e5));
  border-radius: 10px;
  background: var(--store-bg, var(--v2-panel-soft, #f7f7f7));
}

#step-style .style-workflow-empty strong {
  color: var(--store-text, var(--v2-text, #202124));
  font-size: 15px;
}

#step-style .style-workflow-empty p {
  margin: 0;
  color: var(--store-secondary, var(--v2-muted, #687386));
  font-size: 12px;
  line-height: 1.55;
}

#step-style .style-workflow-empty button {
  min-height: 38px;
  margin-top: 4px;
}

#step-style .style-source-selection-status {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--store-secondary, var(--v2-muted, #687386));
  background: var(--store-bg, var(--v2-panel-soft, #f7f7f7));
  font-size: 11px;
  line-height: 1.5;
}

#step-style :is(.style-layout-choice, .style-design-path-choice) {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--store-line, var(--v2-line, #e5e5e5));
  border-radius: 9px;
  background: var(--store-card, var(--v2-panel, #fff));
}

#step-style :is(.style-layout-choice, .style-design-path-choice) > summary {
  min-height: 40px;
  padding: 10px 12px;
  color: var(--store-secondary, var(--v2-muted, #687386));
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style-position: inside;
}

#step-style :is(.style-layout-choice, .style-design-path-choice)[open] > summary {
  border-bottom: 1px solid var(--store-line, var(--v2-line, #e5e5e5));
}

#step-style .style-layout-choice > :is(.style-layout-mode-actions, small),
#step-style .style-design-path-choice > .style-design-path-options {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
}

#step-style .style-layout-choice > small {
  display: block;
  padding-top: 0;
  color: var(--store-secondary, var(--v2-muted, #687386));
  line-height: 1.5;
}

#step-style .style-design-path-options {
  display: grid;
  gap: 8px;
}

#step-style .style-design-path-options > label {
  min-width: 0;
}

html:root body #step-edit #step-style > .style-basis-details .style-controls {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 16px 18px 18px !important;
  box-shadow: none !important;
}

html:root body #step-edit #step-style > .style-ai-details #styleSmartCommandPanel {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 16px 18px 18px !important;
}

html:root body #step-edit #step-style > .style-ai-details #styleSmartCommandPanel .workflow-smart-command {
  min-height: 0 !important;
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: none !important;
  gap: 12px !important;
  padding: 16px !important;
}

html:root body #step-edit #step-style > .style-ai-details #styleSmartCommandPanel .workflow-smart-command > * {
  grid-area: auto !important;
  min-width: 0 !important;
}

#step-style .style-compare-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 24px 0 14px;
}

#step-style .style-compare-heading h3 {
  margin: 0;
  color: var(--store-text, var(--v2-text, #202124));
  font-size: 19px;
  line-height: 1.35;
}

#step-style .style-compare-heading p {
  margin: 3px 0 0;
  color: var(--store-secondary, var(--v2-muted, #687386));
  font-size: 12px;
}

#step-style .style-compare-heading > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#step-style #styleMoodboardView {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

#step-style #styleMoodboardView > .style-moodboard-actionbar {
  grid-column: 1 / -1 !important;
  display: flex;
  width: 100% !important;
  min-width: 0 !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 4px;
  border: 1px solid var(--store-line, var(--v2-line, #e5e5e5)) !important;
  border-radius: 12px !important;
}

#step-style #styleMoodboardView[data-count="1"] {
  grid-template-columns: minmax(0, 1fr) !important;
}

#step-style #styleMoodboardView[data-count="1"] > .style-moodboard {
  width: min(560px, 100%) !important;
  max-width: 100% !important;
}

#step-style #styleMoodboardView[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#step-style #styleLockSummary {
  display: none !important;
}

#step-style .style-moodboard-actionbar > div:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

#step-style .style-moodboard-actionbar > div:first-child :is(strong, span) {
  overflow-wrap: anywhere;
}

#step-style .style-moodboard-actionbar-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#step-style .style-moodboard-actionbar-buttons button {
  min-height: 42px;
}

#step-style .style-moodboard-actionbar-buttons button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

html:root body #step-edit #step-style #styleLockSummary {
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

html:root body #step-edit #step-style #styleLockSummary.empty-state {
  min-height: 0 !important;
}

html:root[data-theme="dark"] body #step-edit #step-style > :is(.style-decision-details, .style-basis-details, .style-ai-details),
html:root[data-theme="dark"] body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step) {
  color: var(--store-text, #ededed);
  border-color: var(--store-line, #3f3f3f);
  background: var(--store-card, #232323);
}

html:root[data-theme="dark"] body #step-edit #step-style > :is(.style-decision-details, .style-basis-details, .style-ai-details) > summary {
  color: var(--store-text, #ededed);
}

html:root[data-theme="dark"] body #step-edit #step-style .style-workflow-steps b {
  color: #edc77d;
  background: #493a27;
}

@media (max-width: 1023px) {
  #step-style #styleStageInspector .style-recommendation-routes {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  html:root body.workbench-editor-active #step-edit.style-preview-mode
    #editorWorkflowWorkspace > #step-style.panel.flow-panel:not(.hidden) {
    padding: 16px 12px 30px !important;
  }

  #step-style #styleStageInspector .style-recommendation-routes,
  #step-style #styleStageInspector .style-layout-mode-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html:root body #step-edit.style-preview-mode #step-style
    #styleStageInspector > .workflow-inspector-footer {
    padding: 14px !important;
  }

  #step-style .style-workflow-steps {
    gap: 5px;
  }

  #step-style .style-workflow-steps > :is(span, button.style-workflow-step) {
    gap: 5px;
    padding: 8px 6px;
    font-size: 10px;
  }

  #step-style .style-workflow-steps b {
    flex-basis: 19px;
    width: 19px;
    height: 19px;
  }

  #step-style .style-compare-heading {
    display: grid;
    align-items: stretch;
  }

  html:root body #step-edit #step-style > .panel-head {
    position: relative !important;
    padding-right: 38px !important;
  }

  html:root body #step-edit #step-style #closeStyleWorkspaceBtn {
    position: absolute !important;
    top: 4px !important;
    right: 0 !important;
    width: 34px !important;
    height: 34px !important;
  }

  #step-style #styleMoodboardView[data-count="2"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #step-style .style-moodboard-actionbar-buttons {
    width: 100%;
  }

  #step-style .style-moodboard-actionbar-buttons button {
    flex: 1 1 140px;
  }
}

/* This panel is mounted beside the editor in some routes. Scope its layout
   to the panel itself so moving it never drops the sizing or theme rules. */
html:root[data-theme] body #step-style {
  --style-bg: var(--neutral-bg);
  --style-card: var(--neutral-panel);
  --style-card-soft: var(--neutral-panel-soft);
  --style-text: var(--neutral-text);
  --style-muted: var(--neutral-muted);
  --style-line: var(--neutral-line);
  --style-line-strong: var(--neutral-line-strong);
  --style-accent: var(--neutral-accent);
  --style-accent-hover: var(--neutral-accent-strong);
  --style-accent-soft: var(--neutral-accent-soft);
  --style-accent-on: var(--neutral-accent-text);
  --store-bg: var(--style-bg);
  --store-card: var(--style-card);
  --store-secondary: var(--style-muted);
  --store-text: var(--style-text);
  --store-line: var(--style-line);
  --store-blue: var(--style-accent);
  --store-blue-soft: var(--style-accent-soft);
  --v2-panel: var(--style-card);
  --v2-line: var(--style-line);
  --v2-text: var(--style-text);
  --v2-muted: var(--style-muted);
}

html:root[data-theme] body.workbench-editor-active #step-edit.style-preview-mode #step-style {
  --style-bg: var(--neutral-bg) !important;
  --style-card: var(--neutral-panel) !important;
  --style-card-soft: var(--neutral-panel-soft) !important;
  --style-text: var(--neutral-text) !important;
  --style-muted: var(--neutral-muted) !important;
  --style-line: var(--neutral-line) !important;
  --style-line-strong: var(--neutral-line-strong) !important;
  --style-accent: var(--neutral-accent) !important;
  --style-accent-hover: var(--neutral-accent-strong) !important;
  --style-accent-soft: var(--neutral-accent-soft) !important;
  --style-accent-on: var(--neutral-accent-text) !important;
}

html:root[data-theme] body #editorWorkflowWorkspace:has(> #step-style:not(.hidden)) {
  background: var(--neutral-bg) !important;
  color: var(--neutral-text) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html:root[data-theme] body #editorWorkflowWorkspace > #step-style.panel.flow-panel:not(.hidden),
html:root[data-theme] body.workbench-editor-active #step-edit.style-preview-mode #editorWorkflowWorkspace > #step-style.panel.flow-panel:not(.hidden) {
  display: block !important;
  box-sizing: border-box !important;
  width: min(1080px, 100%) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: clamp(20px, 2.4vw, 32px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--neutral-bg) !important;
  color: var(--neutral-text) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html:root[data-theme] body #step-style > .panel-head,
html:root[data-theme] body.workbench-editor-active #step-edit.style-preview-mode #step-style > .panel-head {
  min-height: 0 !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  align-items: flex-start;
}

html:root[data-theme] body #step-style > .panel-head h2 {
  margin: 0 !important;
  color: var(--neutral-text) !important;
  font-size: 22px !important;
  line-height: 1.35 !important;
}

html:root[data-theme] body #step-style > .panel-head p {
  margin: 6px 0 0 !important;
  color: var(--neutral-muted) !important;
  font-size: 12px !important;
  line-height: 1.6;
}

html:root[data-theme] body #step-style .style-workflow-steps {
  display: flex !important;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0 0 20px !important;
}

html:root[data-theme] body #step-style .style-workflow-steps > :is(span, button.style-workflow-step) {
  min-height: 26px;
  gap: 7px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--neutral-muted) !important;
  font-size: 12px;
  font-weight: 450;
}

html:root[data-theme] body #step-style .style-workflow-steps b {
  color: var(--neutral-muted) !important;
  background: var(--neutral-panel-raised) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html:root[data-theme] body #step-style .style-workflow-steps > :is(span, button.style-workflow-step):is(.active, [aria-current="step"]) {
  color: var(--neutral-text) !important;
  font-weight: 650;
}

html:root[data-theme] body #step-style .style-workflow-steps > :is(span, button.style-workflow-step):is(.active, [aria-current="step"]) b {
  color: var(--neutral-accent-text) !important;
  background: var(--neutral-accent) !important;
}

html:root[data-theme] body #step-style #styleChoiceEntry {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 20px !important;
  padding: 20px !important;
  border: 1px solid var(--neutral-line) !important;
  border-radius: 10px !important;
  background: var(--neutral-panel) !important;
  color: var(--neutral-text) !important;
  box-shadow: none !important;
}

html:root[data-theme] body #step-style #styleChoiceEntry[hidden] { display: none !important; }
html:root[data-theme] body #step-style #styleChoiceEntry > * { min-width: 0; }

html:root[data-theme] body #step-style #styleChoiceEntry .style-choice-current {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#step-style #styleChoiceEntry .style-choice-current > div { display: grid; gap: 3px; min-width: 0; }
#step-style #styleChoiceEntry .style-choice-current strong { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
#step-style #styleChoiceEntry .style-choice-current :is(small, span) { color: var(--neutral-muted); font-size: 11px; line-height: 1.4; }
#step-style #styleChoiceEntry .style-choice-current > div > span { color: var(--neutral-accent); }

html:root[data-theme] body #step-style #styleChoiceEntry :is(.style-choice-symbol, .style-choice-thumb) {
  display: grid !important;
  place-items: center;
  flex: 0 0 44px;
  width: 44px !important;
  height: 44px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  border: 1px solid var(--neutral-line) !important;
  border-radius: 6px !important;
  color: var(--neutral-accent) !important;
  background: var(--neutral-panel-soft) !important;
  overflow: hidden;
  box-shadow: none !important;
}

#step-style #styleChoiceEntry .style-choice-symbol svg { width: 20px; height: 20px; }
#step-style #styleChoiceEntry .style-choice-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

html:root[data-theme] body #step-style #styleChoiceEntry button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: auto !important;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--neutral-line-strong) !important;
  border-radius: 6px;
  color: var(--neutral-text) !important;
  background: var(--neutral-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  cursor: pointer;
}

html:root[data-theme] body #step-style #styleChoiceEntry button.primary-btn {
  color: var(--neutral-accent-text) !important;
  background: var(--neutral-accent) !important;
  border-color: var(--neutral-accent) !important;
}

html:root[data-theme] body #step-style #styleChoiceEntry button:hover:not(:disabled) {
  border-color: var(--neutral-accent) !important;
}

#step-style #styleChoiceEntry button:disabled { opacity: .55; cursor: default; }
#step-style #styleChoiceEntry .style-choice-routes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#step-style #styleChoiceEntry .style-choice-routes button { justify-content: flex-start; flex-wrap: nowrap; min-width: 0; }
#step-style #styleChoiceEntry .style-choice-routes button > span { display: block; }
#step-style #styleChoiceEntry .style-choice-routes strong { color: inherit; font-size: inherit; font-weight: 550; }
#step-style #styleChoiceEntry .style-choice-routes small { display: none !important; }
#step-style #styleChoiceEntry .style-choice-routes svg { width: 15px; height: 15px; flex: none; }
#step-style #styleChoiceEntry .style-choice-routes [data-design-style-action="preserve-source"] { margin-left: auto; }
#step-style #styleChoiceEntry .style-choice-guidance { margin: 0; color: var(--neutral-muted); font-size: 12px; line-height: 1.65; }
#step-style #styleChoiceEntry .style-choice-generation { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
#step-style #styleChoiceEntry .style-choice-generation .primary-btn { min-height: 38px; }
#step-style #styleChoiceEntry .style-workspace-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; min-width: 0; color: var(--neutral-muted); font-size: 12px; }
#step-style #styleChoiceEntry .style-workspace-progress strong { flex: 1 1 240px; min-width: 0; color: var(--neutral-text); font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
#step-style #styleChoiceEntry .style-workspace-progress progress { flex: 1 1 150px; height: 5px; min-width: 100px; max-width: 300px; overflow: hidden; border: 0; border-radius: 4px; background: var(--neutral-panel-raised); accent-color: var(--neutral-accent); }
#step-style #styleChoiceEntry .style-workspace-progress progress::-webkit-progress-bar { border-radius: 4px; background: var(--neutral-panel-raised); }
#step-style #styleChoiceEntry .style-workspace-progress progress::-webkit-progress-value { border-radius: 4px; background: var(--neutral-accent); }
#step-style #styleChoiceEntry .style-preview-page-picker { display: flex; align-items: center; gap: 8px; color: var(--neutral-muted); font-size: 12px; }
#step-style #styleChoiceEntry .style-preview-page-picker select { width: auto; max-width: 260px; min-height: 34px; padding: 6px 10px; }
#step-style #styleChoiceEntry .style-choice-empty { display: flex; flex: 1 1 100%; align-items: center; gap: 10px; padding: 12px; border: 1px dashed var(--neutral-line); border-radius: 7px; background: var(--neutral-panel-soft); color: var(--neutral-muted); }
#step-style #styleChoiceEntry .style-choice-empty svg { width: 18px; height: 18px; color: var(--neutral-accent); flex: none; }
#step-style #styleChoiceEntry .style-choice-empty > span { display: grid; gap: 3px; }
#step-style #styleChoiceEntry .style-choice-empty strong { color: var(--neutral-text); font-size: 12px; }
#step-style #styleChoiceEntry .style-choice-empty small { font-size: 11px; line-height: 1.45; }

html:root[data-theme] body #step-style #styleChoiceEntry .style-choice-copy-review {
  justify-self: start;
  width: fit-content;
  min-height: 24px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  color: var(--neutral-accent) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

html:root[data-theme] body #step-style #styleChoiceEntry :is(.style-reference-settings, .style-sample-result) {
  min-width: 0;
  margin: 0;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--neutral-line);
  background: transparent;
  box-shadow: none !important;
}

/* Content confirmation is a compact checkpoint inside the style workspace.
   It replaces the old empty gate with a useful page summary while keeping
   style browsing available before copy confirmation. */
html:root[data-theme] body #step-style #styleChoiceEntry .style-copy-checkpoint,
html:root body #step-style #styleChoiceEntry .style-copy-checkpoint {
  display: grid;
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid var(--neutral-line-strong, rgba(0,0,0,.14));
  border-radius: 10px;
  background: var(--neutral-panel-soft, rgba(0,0,0,.025));
}
html:root[data-theme] body #step-style #styleChoiceEntry .style-copy-checkpoint > header,
html:root body #step-style #styleChoiceEntry .style-copy-checkpoint > header {
  display: flex;
  align-items: center;
  gap: 10px;
}
html:root[data-theme] body #step-style #styleChoiceEntry .style-copy-checkpoint-icon,
html:root body #step-style #styleChoiceEntry .style-copy-checkpoint-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  color: var(--neutral-accent);
  border: 1px solid color-mix(in srgb, var(--neutral-accent) 30%, var(--neutral-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--neutral-accent) 8%, var(--neutral-panel));
}
#step-style #styleChoiceEntry .style-copy-checkpoint-icon svg { width: 16px; height: 16px; }
#step-style #styleChoiceEntry .style-copy-checkpoint > header > div { display: grid; gap: 2px; min-width: 0; }
#step-style #styleChoiceEntry .style-copy-checkpoint > header strong { color: var(--neutral-text); font-size: 13px; }
#step-style #styleChoiceEntry .style-copy-checkpoint > header small { color: var(--neutral-muted); font-size: 11px; line-height: 1.45; }
html:root[data-theme] body #step-style #styleChoiceEntry .style-copy-checkpoint-body,
html:root body #step-style #styleChoiceEntry .style-copy-checkpoint-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}
#step-style #styleChoiceEntry .style-copy-page-list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
#step-style #styleChoiceEntry .style-copy-page-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: min(100%, 245px);
  padding: 5px 8px;
  border: 1px solid var(--neutral-line);
  border-radius: 6px;
  background: var(--neutral-panel);
}
#step-style #styleChoiceEntry .style-copy-page-list b { color: var(--neutral-accent); font-size: 10px; }
#step-style #styleChoiceEntry .style-copy-page-list em { overflow: hidden; color: var(--neutral-text); font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
#step-style #styleChoiceEntry .style-copy-page-list > small { align-self: center; color: var(--neutral-muted); font-size: 11px; }
#step-style #styleChoiceEntry .style-copy-checkpoint-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
#step-style #styleChoiceEntry .style-copy-checkpoint-actions button { white-space: nowrap; }
@media (max-width: 720px) {
  html:root[data-theme] body #step-style #styleChoiceEntry .style-copy-checkpoint-body,
  html:root body #step-style #styleChoiceEntry .style-copy-checkpoint-body { grid-template-columns: 1fr; align-items: start; }
  #step-style #styleChoiceEntry .style-copy-checkpoint-actions { justify-content: flex-start; }
}

html:root[data-theme] body #step-style #styleChoiceEntry .style-content-review,
html:root body #step-style #styleChoiceEntry .style-content-review {
  display: grid;
  gap: 14px;
  padding: 0;
  color: var(--neutral-text);
}
#step-style #styleChoiceEntry .style-content-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
#step-style #styleChoiceEntry .style-content-heading h3 { margin: 0; font-size: 16px; line-height: 1.4; }
#step-style #styleChoiceEntry .style-content-heading p { margin: 4px 0 0; color: var(--neutral-muted); font-size: 12px; line-height: 1.55; }
#step-style #styleChoiceEntry .style-content-heading > span { flex: none; color: var(--neutral-muted); font-size: 11px; }
html:root[data-theme] body #step-style #styleChoiceEntry .style-content-layout,
html:root body #step-style #styleChoiceEntry .style-content-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: start; }
#step-style #styleChoiceEntry .style-content-pages { display: grid; gap: 4px; max-height: 310px; overflow: auto; }
#step-style #styleChoiceEntry .style-content-pages button { display: grid !important; grid-template-columns: 26px minmax(0, 1fr); align-items: center; justify-content: start; gap: 8px; width: 100%; min-height: 34px; padding: 7px 8px !important; text-align: left; }
#step-style #styleChoiceEntry .style-content-pages button b { color: var(--neutral-muted); font-size: 10px; }
#step-style #styleChoiceEntry .style-content-pages button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:root[data-theme] body #step-edit #step-style #styleChoiceEntry .style-content-pages button.active { color: var(--neutral-accent-text) !important; border-color: var(--neutral-accent) !important; background: var(--neutral-accent) !important; }
#step-style #styleChoiceEntry .style-content-pages button.active b { color: inherit; }
#step-style #styleChoiceEntry .style-content-editor { display: grid; gap: 12px; min-width: 0; }
#step-style #styleChoiceEntry .style-content-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#step-style #styleChoiceEntry .style-content-modes button { display: grid !important; justify-items: start; gap: 2px; min-height: 54px; padding: 8px 9px !important; text-align: left; }
html:root[data-theme] body #step-edit #step-style #styleChoiceEntry .style-content-modes button[aria-pressed="true"] { border-color: var(--neutral-accent) !important; background: color-mix(in srgb, var(--neutral-accent) 10%, var(--neutral-panel)) !important; }
#step-style #styleChoiceEntry .style-content-modes strong { font-size: 12px; }
#step-style #styleChoiceEntry .style-content-modes small { color: var(--neutral-muted); font-size: 10px; line-height: 1.35; }
#step-style #styleChoiceEntry .style-content-fields { display: grid; gap: 10px; max-height: max(180px, calc(100dvh - 540px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 3px; }
#step-style #styleChoiceEntry .style-content-fields > label { display: grid; gap: 5px; min-width: 0; }
#step-style #styleChoiceEntry .style-content-fields label > span { display: flex; align-items: center; gap: 6px; color: var(--neutral-text); font-size: 12px; font-weight: 600; }
#step-style #styleChoiceEntry .style-content-fields label > span small { color: var(--neutral-muted); font-size: 10px; font-weight: 400; }
#step-style #styleChoiceEntry .style-content-fields textarea { width: 100%; min-height: 38px; resize: vertical; border: 1px solid var(--neutral-line-strong); border-radius: 7px; background: var(--neutral-panel); color: var(--neutral-text); padding: 8px 9px; font: inherit; font-size: 12px; line-height: 1.55; }
#step-style #styleChoiceEntry .style-content-fields textarea:focus { outline: 2px solid color-mix(in srgb, var(--neutral-accent) 36%, transparent); outline-offset: 1px; border-color: var(--neutral-accent); }
#step-style #styleChoiceEntry .style-copy-rewrite { justify-self: start; min-height: 26px !important; padding: 3px 7px !important; color: var(--neutral-accent) !important; border: 0 !important; background: transparent !important; font-size: 11px !important; }
#step-style #styleChoiceEntry .style-copy-proposal { display: grid; gap: 5px; padding: 8px; border-left: 2px solid var(--neutral-accent); background: color-mix(in srgb, var(--neutral-accent) 6%, var(--neutral-panel)); }
#step-style #styleChoiceEntry .style-copy-proposal small { color: var(--neutral-muted); font-size: 10px; }
#step-style #styleChoiceEntry .style-copy-proposal p { margin: 0; font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
#step-style #styleChoiceEntry .style-copy-proposal button { justify-self: start; min-height: 26px; padding: 4px 8px !important; }
#step-style #styleChoiceEntry .style-copy-proposal button + button { margin-left: 4px; }
#step-style #styleChoiceEntry .style-content-readonly { display: grid; gap: 7px; padding: 12px; border: 1px dashed var(--neutral-line); border-radius: 8px; background: var(--neutral-panel-soft); }
#step-style #styleChoiceEntry .style-content-readonly h4 { margin: 0; font-size: 13px; }
#step-style #styleChoiceEntry .style-content-readonly p { margin: 0; color: var(--neutral-muted); white-space: pre-wrap; font-size: 12px; line-height: 1.6; }
#step-style #styleChoiceEntry .style-guided-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--neutral-line); }
#step-style #styleChoiceEntry .style-guided-footer > div { display: grid; gap: 3px; min-width: 0; }
#step-style #styleChoiceEntry .style-guided-footer strong { font-size: 12px; }
#step-style #styleChoiceEntry .style-guided-footer small { color: var(--neutral-muted); font-size: 10px; line-height: 1.4; }
#step-style #styleChoiceEntry .style-recovered-copy { padding: 8px 10px; border: 1px solid var(--neutral-line); border-radius: 7px; color: var(--neutral-text); }
#step-style #styleChoiceEntry .style-recovered-copy summary { cursor: pointer; font-size: 12px; }
#step-style #styleChoiceEntry .style-recovered-copy p { display: grid; gap: 4px; font-size: 12px; }
#step-style #styleChoiceEntry .style-recovered-copy p span { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  html:root[data-theme] body #step-style #styleChoiceEntry .style-content-layout { grid-template-columns: 1fr; }
  #step-style #styleChoiceEntry .style-content-pages { display: flex; max-height: none; overflow-x: auto; }
  #step-style #styleChoiceEntry .style-content-pages button { min-width: 160px; }
  #step-style #styleChoiceEntry .style-content-modes { grid-template-columns: 1fr; }
  #step-style #styleChoiceEntry .style-content-fields { max-height: none; overflow-y: visible; }
  #step-style #styleChoiceEntry .style-guided-footer { align-items: stretch; flex-direction: column; }
}

html:root[data-theme] body #step-style #styleChoiceEntry .style-sample-preview {
  display: block !important;
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px;
  background: transparent !important;
  overflow: hidden;
  cursor: zoom-in;
}

#step-style #styleChoiceEntry .style-sample-preview img { display: block; width: auto; max-width: 100%; height: auto; max-height: 420px; object-fit: contain; }
#step-style #styleChoiceEntry .style-sample-result > header { margin-bottom: 12px; }
#step-style #styleChoiceEntry .style-sample-result > header strong { font-size: 13px; }
#step-style #styleChoiceEntry .style-sample-result > header > span { color: var(--neutral-muted); font-size: 11px; }
#step-style #styleChoiceEntry .style-sample-actions { gap: 10px; }

html:root[data-theme] body #step-style :is(#styleDecisionDetails, #styleAdvancedDetails) {
  min-width: 0;
  margin: 0 0 16px;
  padding: 0;
  border: 1px solid var(--neutral-line) !important;
  border-radius: 9px;
  background: var(--neutral-panel) !important;
  box-shadow: none !important;
  overflow: hidden;
}

html:root[data-theme] body #step-style :is(#styleDecisionDetails, #styleAdvancedDetails) > summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 46px;
  padding: 12px 16px;
  border: 0 !important;
  color: var(--neutral-text) !important;
  background: transparent !important;
  font-size: 12px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

#step-style :is(#styleDecisionDetails, #styleAdvancedDetails) > summary::-webkit-details-marker { display: none; }
#step-style #styleAdvancedDetails > summary > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
#step-style #styleAdvancedDetails > summary svg { width: 15px; height: 15px; }
#step-style #styleAdvancedDetails > summary > :is(svg, .fluent-icon-shell):last-child { margin-left: auto; color: var(--neutral-muted); }
#step-style #styleAdvancedDetails[open] > summary > :is(svg, .fluent-icon-shell):last-child { transform: rotate(180deg); }
#step-style :is(#styleDecisionDetails, #styleAdvancedDetails) > summary small { color: var(--neutral-muted); font-size: 11px; font-weight: 400; }
html:root[data-theme] body #step-style :is(#styleDecisionDetails, #styleAdvancedDetails)[open] > summary { border-bottom: 1px solid var(--neutral-line) !important; }
#step-style .style-advanced-body { display: grid; gap: 20px; padding: 18px; }
#step-style .style-advanced-body > section { min-width: 0; padding: 0; border: 0; background: transparent; }
#step-style .style-advanced-body h3 { margin: 0 0 8px; color: var(--neutral-text); font-size: 12px; font-weight: 600; }
#step-style .style-advanced-body p { margin: 0; color: var(--neutral-muted); font-size: 12px; line-height: 1.7; }
#step-style .style-advanced-body .style-ai-details:not(:has(#styleSmartCommandPanel:not(.hidden))) { display: none; }

html:root[data-theme] body #step-style #styleAdvancedDetails #styleSmartCommandPanel {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html:root[data-theme] body #step-style #styleAdvancedDetails #styleSmartCommandPanel .workflow-smart-command {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: none !important;
  width: 100% !important;
  min-height: 0 !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 16px !important;
  border: 1px solid var(--neutral-line) !important;
  border-radius: 8px !important;
  background: var(--neutral-panel) !important;
  color: var(--neutral-text) !important;
  box-shadow: none !important;
}

html:root[data-theme] body #step-style #styleAdvancedDetails .workflow-smart-command > * { grid-area: auto !important; min-width: 0 !important; }
html:root[data-theme] body #step-style #styleAdvancedDetails .workflow-smart-command textarea { width: 100% !important; min-height: 84px !important; color: var(--neutral-text) !important; background: var(--neutral-panel) !important; border-color: var(--neutral-line-strong) !important; }
#step-style #styleAdvancedDetails .workflow-smart-command-hint { margin: 0; color: var(--neutral-muted); font-size: 11px; line-height: 1.6; }

html:root[data-theme] body #step-style #styleDecisionPanel,
html:root[data-theme] body #step-style #styleStageInspector {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html:root[data-theme] body #step-style #styleDecisionPanel { padding: 18px !important; }
html:root[data-theme] body #step-style #styleStageInspector { padding: 0 !important; }
html:root[data-theme] body #step-style #styleStageInspector.hidden { display: none !important; }
html:root[data-theme] body #step-style #styleStageInspector > .workflow-inspector-scroll { height: auto !important; overflow: visible !important; padding: 0 !important; }
#step-style .style-recommendation-route > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
#step-style .style-recommendation-route .style-route-details { display: none; }
#step-style .style-recommendation-route .style-professional-score { display: none; }
#step-style .style-moodboard-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
html:root[data-theme] body #step-style #styleMoodboardView > .style-moodboard-actionbar { background: var(--neutral-panel) !important; border-color: var(--neutral-line) !important; box-shadow: none !important; }
#step-style .style-advanced-legacy-controls { display: none !important; }

/* Product chrome may carry important layered rules. Keep this narrow reset in
   the same layer so selected cards remain flat and every theme is readable. */
@layer assistantChrome {
  html:root[data-theme] body #step-style :is(
    .style-recommendation-route, .style-moodboard, .style-option,
    .style-moodboard-actionbar, .workflow-inspector-section,
    #styleChoiceEntry, #styleDecisionDetails, #styleAdvancedDetails
  ) {
    color: var(--neutral-text) !important;
    background: var(--neutral-panel) !important;
    background-image: none !important;
    border-color: var(--neutral-line) !important;
    box-shadow: none !important;
  }
  html:root[data-theme] body #step-style :is(.style-recommendation-route.selected, .style-moodboard.selected) { border-color: var(--neutral-accent) !important; }
  html:root[data-theme] body #step-style :is(#styleChoiceEntry, #styleDecisionDetails, #styleAdvancedDetails) button.primary-btn {
    color: var(--neutral-accent-text) !important;
    background: var(--neutral-accent) !important;
    border-color: var(--neutral-accent) !important;
  }
  /* Step chips owned by progressive-disclosure block; avoid transparent leftover chrome. */
  html:root[data-theme] body #step-style .style-workflow-steps > :is(span, button.style-workflow-step):not(.active):not([aria-current="step"]):not(.is-done):not(.is-warn):not(.is-busy) {
    color: var(--neutral-muted) !important;
  }
  html:root[data-theme] body #step-style .style-workflow-steps > :is(span, button.style-workflow-step):is(.active, [aria-current="step"]) {
    color: var(--neutral-text) !important;
  }
  html:root[data-theme] body #step-style .style-workflow-steps > :is(span, button.style-workflow-step):is(.active, [aria-current="step"]) > b {
    color: var(--neutral-accent-text) !important;
    background: var(--neutral-accent) !important;
  }
  html:root[data-theme] body #step-style :is(.style-route-index, .style-moodboard-route-pill, .style-moodboard-status.is-selected) { color: var(--neutral-accent) !important; background: var(--neutral-accent-soft) !important; border-color: var(--neutral-accent) !important; }
}

@media (max-width: 680px) {
  html:root[data-theme] body #editorWorkflowWorkspace > #step-style.panel.flow-panel:not(.hidden),
  html:root[data-theme] body.workbench-editor-active #step-edit.style-preview-mode #editorWorkflowWorkspace > #step-style.panel.flow-panel:not(.hidden) { padding: 18px 12px 30px !important; }
  html:root[data-theme] body #step-style #styleChoiceEntry { padding: 14px !important; }
  html:root[data-theme] body #step-style #styleChoiceEntry .style-choice-current { grid-template-columns: 38px minmax(0, 1fr) !important; gap: 9px !important; }
  html:root[data-theme] body #step-style #styleChoiceEntry .style-choice-current > button:last-child:not(.style-choice-thumb) { grid-column: 2; justify-self: start; }
  html:root[data-theme] body #step-style #styleChoiceEntry :is(.style-choice-symbol, .style-choice-thumb) { width: 38px !important; height: 38px !important; }
  #step-style #styleChoiceEntry .style-choice-routes [data-design-style-action="preserve-source"] { margin-left: 0; }
  #step-style #styleChoiceEntry .style-choice-generation { align-items: stretch; }
  #step-style #styleChoiceEntry .style-preview-page-picker { flex: 1 1 100%; }
  #step-style #styleChoiceEntry .style-preview-page-picker select { flex: 1; max-width: none; }
  #step-style #styleChoiceEntry .style-sample-preview img { max-height: 320px; }
  html:root[data-theme] body #step-style .style-workflow-steps { gap: 12px; }
  html:root[data-theme] body #step-style .style-workflow-steps > :is(span, button.style-workflow-step) { font-size: 11px; }
  #step-style :is(#styleDecisionDetails, #styleAdvancedDetails) > summary small { flex-basis: 100%; }
}

#step-style #styleStageInspector .style-recommendation-visual-cards,
#step-style #styleStageInspector .style-recommendation-routes:has(.style-recommendation-visual-card) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html:root[data-theme] body #step-style .style-recommendation-visual-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--neutral-line) !important;
  border-radius: 8px;
  color: var(--neutral-text) !important;
  background: var(--neutral-panel) !important;
  box-shadow: none !important;
  overflow: hidden;
}

#step-style .style-recommendation-visual-card > img,
#step-style .style-recommendation-visual-card > button:first-child img,
#step-style .style-recommendation-visual-card .style-recommendation-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  max-height: 240px;
  object-fit: cover;
  background: var(--neutral-panel-soft);
}

#step-style .style-recommendation-visual-card > button:first-child:has(img),
#step-style .style-recommendation-visual-card .style-recommendation-preview {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: zoom-in;
}

#step-style .style-recommendation-visual-card > :is(header, div) { min-width: 0; }
#step-style .style-recommendation-visual-card > div { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; }
#step-style .style-recommendation-visual-card > div > small { color: var(--neutral-muted); font-size: 11px; line-height: 1.5; }
#step-style .style-recommendation-visual-card > div > p { margin: 0 0 6px; }
#step-style .style-recommendation-visual-card > div > button { margin-top: auto; min-height: 34px; }
#step-style .style-recommendation-visual-review { display: grid; gap: 16px; }
#step-style .style-recommendation-visual-review > p { margin: 0; color: var(--neutral-muted); font-size: 12px; line-height: 1.7; }
#step-style .style-recommendation-visual-review > button { justify-self: start; }
#step-style .style-recommendation-visual-card > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 0; }
#step-style .style-recommendation-visual-card > :is(strong, h3) { margin: 0; padding: 12px 14px 0; font-size: 14px; line-height: 1.4; }
#step-style .style-recommendation-visual-card strong { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
#step-style .style-recommendation-visual-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 8px 14px 14px; color: var(--neutral-muted); font-size: 12px; line-height: 1.65; }
#step-style .style-recommendation-visual-card > small { padding: 8px 14px 0; color: var(--neutral-muted); font-size: 11px; line-height: 1.4; }
#step-style .style-recommendation-visual-card > button[data-design-style-action="use-recommended"] { align-self: flex-start; margin: auto 14px 14px; min-height: 34px; }
#step-style .style-recommendation-visual-card .style-route-summary { margin: 0 14px 12px; }

@layer assistantChrome {
  html:root[data-theme] body #step-style .style-recommendation-visual-card { color: var(--neutral-text) !important; background: var(--neutral-panel) !important; background-image: none !important; border-color: var(--neutral-line) !important; box-shadow: none !important; }
  html:root[data-theme] body #step-style .style-recommendation-visual-card.selected { border-color: var(--neutral-accent) !important; }
}

@media (max-width: 760px) {
  #step-style #styleStageInspector .style-recommendation-visual-cards,
  #step-style #styleStageInspector .style-recommendation-routes:has(.style-recommendation-visual-card) { grid-template-columns: minmax(0, 1fr) !important; }
  #step-style .style-recommendation-visual-card > img,
  #step-style .style-recommendation-visual-card > button:first-child img,
  #step-style .style-recommendation-visual-card .style-recommendation-preview img { max-height: 300px; }
}

/* ==== consolidated from /neutral-theme-overrides.css (cascade order preserved) ==== */
/* Unified neutral + warm gold product theme.
 * This file is intentionally loaded last so legacy feature styles can keep
 * their layout rules while sharing one visual language. Generated artwork in
 * slide canvases is excluded from the palette rules below. */
:root {
  --neutral-bg: #f7f7f8;
  --neutral-chrome: #fafafa;
  --neutral-panel: #ffffff;
  --neutral-panel-soft: #f4f4f5;
  --neutral-panel-raised: #e9e9eb;
  --neutral-text: #242426;
  --neutral-muted: #646469;
  --neutral-faint: #747479;
  --neutral-line: #e3e3e6;
  --neutral-line-strong: #c9c9ce;
  --neutral-accent: #a26820;
  --neutral-accent-strong: #88551a;
  --neutral-accent-text: #ffffff;
  --neutral-accent-soft: rgb(162 104 32 / 12%);
  --neutral-accent-glow: rgb(162 104 32 / 20%);

  --wm-brand: var(--neutral-accent);
  --wm-brand-strong: var(--neutral-accent-strong);
  --wm-brand-soft: var(--neutral-accent-soft);
  --v2-blue: var(--neutral-accent);
  --v2-blue-hover: var(--neutral-accent-strong);
  --v2-blue-soft: var(--neutral-accent-soft);
  --ref-blue: var(--neutral-accent);
  --ref-blue-hover: var(--neutral-accent-strong);
  --ref-blue-deep: var(--neutral-accent-strong);
  --ref-blue-soft: var(--neutral-accent-soft);
  --ref-blue-glow: var(--neutral-accent-glow);
  --store-blue: var(--neutral-accent);
  --store-blue-hover: var(--neutral-accent-strong);
  --store-blue-soft: var(--neutral-accent-soft);
  --aw-blue: var(--neutral-accent);
  --aw-blue-hover: var(--neutral-accent-strong);
  --aw-blue-soft: var(--neutral-accent-soft);
  --ui-primary: var(--neutral-accent);
  --ui-primary-hover: var(--neutral-accent-strong);
  --ui-primary-soft: var(--neutral-accent-soft);
  --primary: var(--neutral-accent);
  --primary-strong: var(--neutral-accent-strong);
  --primary-soft: var(--neutral-accent-soft);
  --product-accent: var(--neutral-accent);
  --product-accent-hover: var(--neutral-accent-strong);
  --af-accent: var(--neutral-accent);
  --af-accent-hover: var(--neutral-accent-strong);
  --af-accent-soft: var(--neutral-accent-soft);
  --du-primary: var(--neutral-accent);
  --du-primary-hover: var(--neutral-accent-strong);
  --du-primary-soft: var(--neutral-accent-soft);
  --assistant-tools-blue: var(--neutral-accent);
  --chat-accent: var(--neutral-accent);
  --chat-accent-hover: var(--neutral-accent-strong);
  --chat-accent-soft: var(--neutral-accent-soft);
  --apple-ui-blue: var(--neutral-accent);
  --apple-ui-blue-strong: var(--neutral-accent-strong);
  --apple-ui-blue-soft: var(--neutral-accent-soft);
  /* Legacy aliases kept for older sheets; all resolve to the warm neutral theme. */
  --theme-blue: var(--neutral-accent);
  --theme-blue-hover: var(--neutral-accent-strong);
  --theme-blue-soft: var(--neutral-accent-soft);
  --blue-soft: var(--neutral-accent-soft);
  --ui-blue: var(--neutral-accent);
  --apple-blue: var(--neutral-accent);
  --apple-blue-dark: var(--neutral-accent-strong);
  --apple-blue-hover: var(--neutral-accent-strong);
  --assistant-tools-hover: var(--neutral-accent-soft);
  --assistant-add-hover: var(--neutral-accent-soft);
}

:root[data-theme="dark"] {
  --neutral-bg: #212121;
  --neutral-chrome: #181818;
  --neutral-panel: #262626;
  --neutral-panel-soft: #303030;
  --neutral-panel-raised: #3a3a3a;
  --neutral-text: #f1f1f1;
  --neutral-muted: #b5b5b5;
  --neutral-faint: #a0a0a0;
  --neutral-line: #3b3b3b;
  --neutral-line-strong: #545454;
  --neutral-accent: #d5a15c;
  --neutral-accent-strong: #e1b878;
  --neutral-accent-text: #24201a;
  --neutral-accent-soft: rgb(213 161 92 / 16%);
  --neutral-accent-glow: rgb(213 161 92 / 24%);
}

/* The interface accent is a preference; the neutral surfaces stay constant.
 * Dark-theme pairs use brighter ink and a dark button foreground. These
 * tokens are consumed by product controls, never by document artwork. */
html:root[data-accent="default"] {
  --neutral-accent: #a26820;
  --neutral-accent-strong: #88551a;
  --neutral-accent-text: #ffffff;
  --neutral-accent-soft: rgb(162 104 32 / 12%);
  --neutral-accent-glow: rgb(162 104 32 / 20%);
}
html:root[data-accent="blue"] {
  --neutral-accent: #2563eb;
  --neutral-accent-strong: #1d4ed8;
  --neutral-accent-text: #ffffff;
  --neutral-accent-soft: rgb(37 99 235 / 12%);
  --neutral-accent-glow: rgb(37 99 235 / 20%);
}
html:root[data-accent="green"] {
  --neutral-accent: #197346;
  --neutral-accent-strong: #135b36;
  --neutral-accent-text: #ffffff;
  --neutral-accent-soft: rgb(25 115 70 / 12%);
  --neutral-accent-glow: rgb(25 115 70 / 20%);
}
html:root[data-accent="yellow"] {
  --neutral-accent: #8a6a00;
  --neutral-accent-strong: #7a5c00;
  --neutral-accent-text: #ffffff;
  --neutral-accent-soft: rgb(138 106 0 / 12%);
  --neutral-accent-glow: rgb(138 106 0 / 20%);
}
html:root[data-accent="pink"] {
  --neutral-accent: #b53277;
  --neutral-accent-strong: #94265f;
  --neutral-accent-text: #ffffff;
  --neutral-accent-soft: rgb(181 50 119 / 12%);
  --neutral-accent-glow: rgb(181 50 119 / 20%);
}
html:root[data-accent="orange"] {
  --neutral-accent: #b85219;
  --neutral-accent-strong: #963e11;
  --neutral-accent-text: #ffffff;
  --neutral-accent-soft: rgb(184 82 25 / 12%);
  --neutral-accent-glow: rgb(184 82 25 / 20%);
}
html:root[data-accent="purple"] {
  --neutral-accent: #7b3fc5;
  --neutral-accent-strong: #64319f;
  --neutral-accent-text: #ffffff;
  --neutral-accent-soft: rgb(123 63 197 / 12%);
  --neutral-accent-glow: rgb(123 63 197 / 20%);
}
html:root[data-accent="black"] {
  --neutral-accent: #383735;
  --neutral-accent-strong: #1f1f1e;
  --neutral-accent-text: #ffffff;
  --neutral-accent-soft: rgb(56 55 53 / 10%);
  --neutral-accent-glow: rgb(56 55 53 / 16%);
}
html:root[data-theme="dark"][data-accent="default"] {
  --neutral-accent: #d5a15c;
  --neutral-accent-strong: #e1b878;
  --neutral-accent-text: #24201a;
  --neutral-accent-soft: rgb(213 161 92 / 16%);
  --neutral-accent-glow: rgb(213 161 92 / 24%);
}
html:root[data-theme="dark"][data-accent="blue"] {
  --neutral-accent: #86b3fa;
  --neutral-accent-strong: #a2c5ff;
  --neutral-accent-text: #14233c;
  --neutral-accent-soft: rgb(134 179 250 / 16%);
  --neutral-accent-glow: rgb(134 179 250 / 24%);
}
html:root[data-theme="dark"][data-accent="green"] {
  --neutral-accent: #6ec394;
  --neutral-accent-strong: #88d4ac;
  --neutral-accent-text: #142c20;
  --neutral-accent-soft: rgb(110 195 148 / 16%);
  --neutral-accent-glow: rgb(110 195 148 / 24%);
}
html:root[data-theme="dark"][data-accent="yellow"] {
  --neutral-accent: #eed36b;
  --neutral-accent-strong: #f6df8e;
  --neutral-accent-text: #342904;
  --neutral-accent-soft: rgb(238 211 107 / 16%);
  --neutral-accent-glow: rgb(238 211 107 / 24%);
}
html:root[data-theme="dark"][data-accent="pink"] {
  --neutral-accent: #eaa0c6;
  --neutral-accent-strong: #f0b7d3;
  --neutral-accent-text: #351b29;
  --neutral-accent-soft: rgb(234 160 198 / 16%);
  --neutral-accent-glow: rgb(234 160 198 / 24%);
}
html:root[data-theme="dark"][data-accent="orange"] {
  --neutral-accent: #e8a776;
  --neutral-accent-strong: #f1bd96;
  --neutral-accent-text: #372318;
  --neutral-accent-soft: rgb(232 167 118 / 16%);
  --neutral-accent-glow: rgb(232 167 118 / 24%);
}
html:root[data-theme="dark"][data-accent="purple"] {
  --neutral-accent: #c3a0ee;
  --neutral-accent-strong: #d4bbf5;
  --neutral-accent-text: #2b1c3a;
  --neutral-accent-soft: rgb(195 160 238 / 16%);
  --neutral-accent-glow: rgb(195 160 238 / 24%);
}
html:root[data-theme="dark"][data-accent="black"] {
  --neutral-accent: #b9b6af;
  --neutral-accent-strong: #cecbc5;
  --neutral-accent-text: #22211f;
  --neutral-accent-soft: rgb(185 182 175 / 12%);
  --neutral-accent-glow: rgb(185 182 175 / 20%);
}

:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --theme-bg: var(--neutral-bg);
  --theme-chrome: var(--neutral-chrome);
  --theme-panel: var(--neutral-panel);
  --theme-panel-soft: var(--neutral-panel-soft);
  --theme-panel-raised: var(--neutral-panel-raised);
  --theme-text: var(--neutral-text);
  --theme-muted: var(--neutral-muted);
  --theme-faint: var(--neutral-faint);
  --theme-line: var(--neutral-line);
  --theme-line-strong: var(--neutral-line-strong);
  --bg: var(--neutral-bg);
  --panel: var(--neutral-panel);
  --surface: var(--neutral-panel-soft);
  --text: var(--neutral-text);
  --muted: var(--neutral-muted);
  --line: var(--neutral-line);
  --line-strong: var(--neutral-line-strong);
  --v2-bg: var(--neutral-bg);
  --v2-panel: var(--neutral-panel);
  --v2-panel-soft: var(--neutral-panel-soft);
  --v2-panel-strong: var(--neutral-panel-raised);
  --v2-text: var(--neutral-text);
  --v2-muted: var(--neutral-muted);
  --v2-faint: var(--neutral-faint);
  --v2-line: var(--neutral-line);
  --v2-line-strong: var(--neutral-line-strong);
  --store-bg: var(--neutral-bg);
  --store-card: var(--neutral-panel);
  --store-card-soft: var(--neutral-panel-soft);
  --store-text: var(--neutral-text);
  --store-secondary: var(--neutral-muted);
  --store-tertiary: var(--neutral-faint);
  --store-line: var(--neutral-line);
  --store-line-strong: var(--neutral-line-strong);
  --aw-bg: var(--neutral-bg);
  --aw-sidebar: var(--neutral-panel);
  --aw-chrome: var(--neutral-chrome);
  --aw-surface: var(--neutral-panel);
  --aw-surface-raised: var(--neutral-panel-soft);
  --aw-surface-soft: var(--neutral-panel-soft);
  --aw-surface-strong: var(--neutral-panel-raised);
  --aw-text: var(--neutral-text);
  --aw-text-secondary: var(--neutral-muted);
  --aw-text-tertiary: var(--neutral-faint);
  --aw-line: var(--neutral-line);
  --aw-line-strong: var(--neutral-line-strong);
  --chat-line: var(--neutral-line);
  --chat-text: var(--neutral-text);
  --chat-muted: var(--neutral-muted);
  --chat-panel: var(--neutral-panel);
  --chat-panel-soft: var(--neutral-panel-soft);
}

/* Product chrome. These selectors deliberately avoid .slide-canvas and
 * .slide-stage so presentation artwork keeps its own colors. */
html:root body,
html:root body #appShell,
html:root body #appShell > .workspace,
html:root body #step-create,
html:root body #step-edit.editor-layout {
  color: var(--neutral-text) !important;
  background-color: var(--neutral-bg) !important;
  background-image: none !important;
}

html:root body #appShell > .topbar,
html:root body #appShell > #documentTabsBar,
html:root body #appShell #step-edit > .editor-top-ribbon,
html:root body #appShell #step-edit .office-status-bar {
  color: var(--neutral-text) !important;
  background: var(--neutral-chrome) !important;
  background-color: var(--neutral-chrome) !important;
  border-color: var(--neutral-line) !important;
}

html:root body #appShell :is(
  .thumb-panel, .inspector, .editor-tool-rail, .assistant-drawer,
  .assistant-side-panel, .assistant-messages, .assistant-composer,
  .copy-planning-workspace, .copy-plan-shell, .workflow-panel,
  .style-workflow-workspace, .style-decision-panel) {
  border-color: var(--neutral-line) !important;
  background-color: var(--neutral-panel) !important;
  background-image: none !important;
}

/* Legacy performance-tier rules made the light wordmark white on the white
 * editor chrome. Keep both lines readable without touching slide artwork. */
html:root body.workbench-editor-active #appShell > .topbar #projectHomeBtn.workmate-wordmark .workmate-wordmark-copy > strong {
  color: var(--neutral-text) !important;
  -webkit-text-fill-color: var(--neutral-text) !important;
}
html:root body.workbench-editor-active #appShell > .topbar #projectHomeBtn.workmate-wordmark .workmate-wordmark-copy > small {
  color: var(--neutral-muted) !important;
  -webkit-text-fill-color: var(--neutral-muted) !important;
}

html:root body :is(button, a, input, select, textarea):focus-visible {
  outline-color: var(--neutral-accent) !important;
  border-color: var(--neutral-accent) !important;
}
html:root[data-theme] body.workbench-editor-active #appShell #step-edit > .inspector > .panel-head h2 {
  color: var(--neutral-text) !important;
}

/* Imported source documents share the same inspector controls as online
   editing. Override the legacy literal-blue focus and hover states here. */
html:root[data-theme] body.workbench-editor-active #appShell #step-edit > .inspector :is(input, select, textarea):is(:focus, :focus-visible) {
  color: var(--neutral-text) !important;
  background: var(--neutral-panel) !important;
  background-color: var(--neutral-panel) !important;
  background-image: none !important;
  border-color: var(--neutral-accent) !important;
  outline: 2px solid var(--neutral-accent-soft) !important;
  outline-offset: 1px;
  box-shadow: none !important;
}
html:root[data-theme] body.workbench-editor-active #appShell #step-edit > .inspector :is(.ghost-btn, summary, button:not(.primary-btn):not(.recommended):not(.danger-btn)):is(:hover, :focus-visible):not(:disabled) {
  color: var(--neutral-accent-strong) !important;
  background: var(--neutral-panel-soft) !important;
  background-color: var(--neutral-panel-soft) !important;
  background-image: none !important;
  border-color: var(--neutral-accent) !important;
  box-shadow: none !important;
}

html:root body :is(
  .primary-btn, .primary-button, .project-home-primary, .smart-create-submit,
  #newProjectBtn, #smartCreateSubmitBtn, #assistantSendBtn,
  #assistantImageSettingsBtn, #assistantPromptEnhanceBtn,
  .assistant-generated-image-editable, .assistant-design-pptx-download,
  .assistant-primary-next-action, .workflow-wide-action.primary,
  .delivery-prepare-action, .editor-delivery-primary) {
  color: var(--neutral-accent-text) !important;
  background: var(--neutral-accent) !important;
  background-color: var(--neutral-accent) !important;
  background-image: none !important;
  border-color: var(--neutral-accent) !important;
  box-shadow: none !important;
}

html:root body :is(
  .primary-btn, .primary-button, .project-home-primary, .smart-create-submit,
  #newProjectBtn, #smartCreateSubmitBtn, #assistantSendBtn,
  #assistantImageSettingsBtn, #assistantPromptEnhanceBtn,
  .assistant-generated-image-editable, .assistant-design-pptx-download,
  .assistant-primary-next-action, .workflow-wide-action.primary,
  .delivery-prepare-action, .editor-delivery-primary):is(:hover, :focus-visible, [aria-expanded="true"]):not(:disabled) {
  background: var(--neutral-accent-strong) !important;
  background-color: var(--neutral-accent-strong) !important;
  border-color: var(--neutral-accent-strong) !important;
  color: var(--neutral-accent-text) !important;
}

html:root body :is(
  .style-workflow-steps > :is(span, button.style-workflow-step):is(.active, [aria-current="step"]) > b,
  .workflow-step:is(.active, .is-active, [aria-current="step"]) > b,
  .progress-step:is(.active, .is-active, [aria-current="step"]) > b) {
  color: var(--neutral-accent-text) !important;
  background: var(--neutral-accent) !important;
}

html:root body .style-library-card.selected {
  box-shadow: none !important;
}

html:root body :is(
  .style-workflow-steps > :is(span, button.style-workflow-step):is(.active, [aria-current="step"]),
  .workflow-step:is(.active, .is-active, [aria-current="step"]),
  .progress-step:is(.active, .is-active, [aria-current="step"]),
  .style-recommendation-route.selected,
  .layout-proposal-card.active,
  .copy-review-page-card.active, .social-platform-choice.selected > span,
  .social-result-platform-tabs button.active) {
  border-color: var(--neutral-accent) !important;
  background-color: var(--neutral-accent-soft) !important;
}

html:root body :is(
  .style-recommendation-route strong,
  .copy-plan-kicker, .copy-plan-ai-badge, .copy-review-section-kicker,
  .workflow-panel a, .workflow-panel button.link-like,
  .assistant-sidebar-layout .active, .assistant-tools-blue) {
  color: var(--neutral-accent) !important;
}

/* Legacy hard-coded blue controls. */
html:root body #assistantDrawer #assistantComposer :is(
  #assistantAddBtn:hover, #assistantImageSettingsBtn, #assistantPromptEnhanceBtn) {
  background: var(--neutral-accent) !important;
  background-color: var(--neutral-accent) !important;
  border-color: var(--neutral-accent) !important;
  color: var(--neutral-accent-text) !important;
}
html:root body #assistantDrawer #assistantComposer :is(
  #assistantImageSettingsBtn, #assistantPromptEnhanceBtn):hover {
  background: var(--neutral-accent-strong) !important;
  background-color: var(--neutral-accent-strong) !important;
  border-color: var(--neutral-accent-strong) !important;
}

html:root body .thumb-design-status.generating {
  background: var(--neutral-accent) !important;
}

html:root body :is(.settings-support-card, .api-status, #apiStatus) {
  border-color: color-mix(in srgb, var(--neutral-accent) 35%, var(--neutral-line)) !important;
  background-color: color-mix(in srgb, var(--neutral-accent-soft) 70%, var(--neutral-panel)) !important;
}

html:root body input,
html:root body select,
html:root body textarea {
  accent-color: var(--neutral-accent) !important;
}

html:root body ::selection {
  color: var(--neutral-text);
  background: color-mix(in srgb, var(--neutral-accent) 30%, transparent);
}

@media (max-width: 720px) {
  html:root body #appShell > .topbar { border-bottom-color: var(--neutral-line) !important; }
}

/* A few legacy sheets set literal blue values with !important. Keep these
 * narrow enough to target product controls and status chrome only. */
html:root body :is(
  #step-edit #addSlideBtn,
  .design-primary-button,
  .styleCatalogPromptUseBtn,
  .styleCatalogPromptCopyBtn,
  .styleCatalogFavoriteBtn,
  .topbarTaskProgressBtn.is-running,
  .topbar-task-progress-meter > i,
  [data-category-action="generate"],
  .project-home-mode-switch button.active,
  .preproject-workflow-path span.active,
  .assistant-skill-option:hover,
  .assistant-skill-option.is-selected,
  .assistant-web-image-collect,
  .task-progress-confirm,
  .topbar-task-progress-btn.is-running) {
  color: var(--neutral-accent-text) !important;
  background: var(--neutral-accent) !important;
  background-color: var(--neutral-accent) !important;
  background-image: none !important;
  border-color: var(--neutral-accent) !important;
}

html:root body :is(
  .styleCatalogPromptUseBtn,
  .styleCatalogPromptCopyBtn,
  .styleCatalogFavoriteBtn,
  .topbarTaskProgressBtn.is-running,
  .topbar-task-progress-meter > i,
  .task-progress-confirm,
  .topbar-task-progress-btn.is-running):is(:hover, :focus-visible) {
  background: var(--neutral-accent-strong) !important;
  background-color: var(--neutral-accent-strong) !important;
  border-color: var(--neutral-accent-strong) !important;
}

html:root body :is(
  .assistant-sidebar-layout .active,
  .assistant-skill-option.is-selected,
  .topbar-task-progress-meter > i,
  .generation-progress-bar span,
  .project-home-mode-switch button.active)::before,
html:root body :is(
  .assistant-sidebar-layout .active,
  .assistant-skill-option.is-selected,
  .topbar-task-progress-meter > i,
  .generation-progress-bar span,
  .project-home-mode-switch button.active)::after {
  background-color: var(--neutral-accent) !important;
  border-color: var(--neutral-accent) !important;
}

html:root body :is(
  .assistant-sidebar-layout .active,
  .assistant-skill-option.is-selected,
  .styleCatalogPromptUseBtn,
  .styleCatalogPromptCopyBtn,
  .styleCatalogFavoriteBtn,
  .topbarTaskProgressBtn.is-running,
  .project-home-mode-switch button.active,
  .preproject-workflow-path span.active) {
  box-shadow: none !important;
}

/* Disabled editor tools are unavailable controls, so they should read as
 * neutral disabled states instead of looking like active blue toggles. */
html:root body #step-edit .inspector-toolbox :is(
  .ribbon-tool.active:disabled,
  .ribbon-tool[disabled].active,
  .ghost-btn:disabled.active) {
  color: var(--neutral-muted) !important;
  background: var(--neutral-panel-soft) !important;
  background-color: var(--neutral-panel-soft) !important;
  background-image: none !important;
  border-color: var(--neutral-line) !important;
  box-shadow: none !important;
  opacity: .58 !important;
}

/* Each dashboard accent keeps a readable foreground and background pair.
 * Scope the legacy is-blue class to dashboard chrome, not document content. */
html:root body #step-create .quick-action-icon.is-blue {
  background: transparent !important;
  color: var(--neutral-accent) !important;
  border-color: transparent !important;
  background-image: none !important;
}
html:root body #step-create .dashboard-notice-dot.is-blue,
html:root body .status-dot.ready::before {
  background-color: var(--neutral-accent) !important;
  border-color: var(--neutral-accent) !important;
  background-image: none !important;
}
html:root body #step-create :is(.dashboard-schedule-item.is-blue, .dashboard-schedule-item em.is-blue) {
  background-color: var(--neutral-accent-soft) !important;
  color: var(--neutral-accent-strong) !important;
  border-color: color-mix(in srgb, var(--neutral-accent) 35%, var(--neutral-line)) !important;
  background-image: none !important;
}

html:root body :is(
  .assistant-icon-btn:hover,
  .assistant-composer-tools button:hover,
  .mode-card.selected,
  .rail-item.active,
  .editor-tool-rail .active) {
  border-color: var(--neutral-accent) !important;
  color: var(--neutral-accent) !important;
  background-color: var(--neutral-accent-soft) !important;
  background-image: none !important;
}

/* Theme sheets use html:root[data-theme] selectors, so repeat the semantic
 * aliases at equal-or-higher specificity and mark them important. This makes
 * the shared palette win even when a legacy theme was loaded earlier. */
html:root,
html:root[data-theme],
html:root[data-theme="light"],
html:root[data-theme="dark"] {
  --accent: var(--neutral-accent) !important;
  --accent-hover: var(--neutral-accent-strong) !important;
  --accent-strong: var(--neutral-accent-strong) !important;
  --accent-soft: var(--neutral-accent-soft) !important;
  --accent-text: var(--neutral-accent-text) !important;
  --brand: var(--neutral-accent) !important;
  --brand-hover: var(--neutral-accent-strong) !important;
  --brand-strong: var(--neutral-accent-strong) !important;
  --brand-soft: var(--neutral-accent-soft) !important;
  --theme-accent: var(--neutral-accent) !important;
  --theme-accent-hover: var(--neutral-accent-strong) !important;
  --theme-accent-soft: var(--neutral-accent-soft) !important;
  --product-accent: var(--neutral-accent) !important;
  --product-accent-hover: var(--neutral-accent-strong) !important;
  --ms-blue: var(--neutral-accent) !important;
  --v2-blue: var(--neutral-accent) !important;
  --v2-blue-hover: var(--neutral-accent-strong) !important;
  --v2-blue-soft: var(--neutral-accent-soft) !important;
  --store-blue: var(--neutral-accent) !important;
  --store-blue-hover: var(--neutral-accent-strong) !important;
  --store-blue-soft: var(--neutral-accent-soft) !important;
  --ref-blue: var(--neutral-accent) !important;
  --ref-blue-hover: var(--neutral-accent-strong) !important;
  --ref-blue-deep: var(--neutral-accent-strong) !important;
  --ref-blue-soft: var(--neutral-accent-soft) !important;
  --ref-blue-glow: var(--neutral-accent-glow) !important;
  --wm-brand: var(--neutral-accent) !important;
  --wm-brand-strong: var(--neutral-accent-strong) !important;
  --wm-brand-soft: var(--neutral-accent-soft) !important;
  --aw-blue: var(--neutral-accent) !important;
  --aw-blue-hover: var(--neutral-accent-strong) !important;
  --aw-blue-soft: var(--neutral-accent-soft) !important;
  --ui-primary: var(--neutral-accent) !important;
  --ui-primary-hover: var(--neutral-accent-strong) !important;
  --ui-primary-soft: var(--neutral-accent-soft) !important;
  --primary: var(--neutral-accent) !important;
  --primary-strong: var(--neutral-accent-strong) !important;
  --primary-soft: var(--neutral-accent-soft) !important;
  --af-accent: var(--neutral-accent) !important;
  --af-accent-hover: var(--neutral-accent-strong) !important;
  --af-accent-soft: var(--neutral-accent-soft) !important;
  --du-primary: var(--neutral-accent) !important;
  --du-primary-hover: var(--neutral-accent-strong) !important;
  --du-primary-soft: var(--neutral-accent-soft) !important;
  --chat-accent: var(--neutral-accent) !important;
  --chat-accent-hover: var(--neutral-accent-strong) !important;
  --chat-accent-soft: var(--neutral-accent-soft) !important;
  --assistant-tools-blue: var(--neutral-accent) !important;
  --apple-ui-blue: var(--neutral-accent) !important;
  --apple-ui-blue-strong: var(--neutral-accent-strong) !important;
  --apple-ui-blue-soft: var(--neutral-accent-soft) !important;
  --theme-blue: var(--neutral-accent) !important;
  --theme-blue-hover: var(--neutral-accent-strong) !important;
  --theme-blue-soft: var(--neutral-accent-soft) !important;
  --blue-soft: var(--neutral-accent-soft) !important;
  --ui-blue: var(--neutral-accent) !important;
  --apple-blue: var(--neutral-accent) !important;
  --apple-blue-dark: var(--neutral-accent-strong) !important;
  --apple-blue-hover: var(--neutral-accent-strong) !important;
  --assistant-tools-hover: var(--neutral-accent-soft) !important;
  --assistant-add-hover: var(--neutral-accent-soft) !important;
}

/* Some legacy modules define their aliases on the module itself, so root
 * inheritance cannot update them. Rebind only those product-control scopes. */
html:root[data-accent] body[data-project-home-mode="chat"] {
  --chat-accent: var(--neutral-accent) !important;
  --chat-accent-hover: var(--neutral-accent-strong) !important;
  --chat-accent-soft: var(--neutral-accent-soft) !important;
}
html:root[data-accent] body.workbench-editor-active #step-edit.style-preview-mode,
html:root[data-accent] body.workbench-editor-active #step-edit.style-preview-mode #editorWorkflowWorkspace,
html:root[data-accent] body.workbench-editor-active #step-edit.style-preview-mode #step-style {
  --style-accent: var(--neutral-accent) !important;
  --style-accent-hover: var(--neutral-accent-strong) !important;
  --style-accent-soft: var(--neutral-accent-soft) !important;
  --style-accent-on: var(--neutral-accent-text) !important;
  --store-blue: var(--neutral-accent) !important;
  --store-blue-hover: var(--neutral-accent-strong) !important;
  --store-blue-soft: var(--neutral-accent-soft) !important;
  --store-ai: var(--neutral-accent) !important;
  --store-ai-hover: var(--neutral-accent-strong) !important;
  --v2-blue: var(--neutral-accent) !important;
  --v2-blue-hover: var(--neutral-accent-strong) !important;
  --v2-blue-soft: var(--neutral-accent-soft) !important;
  --theme-accent: var(--neutral-accent) !important;
  --theme-accent-hover: var(--neutral-accent-strong) !important;
}
html:root[data-accent] body .assistant-editable-convert-menu {
  --aec-panel: var(--neutral-panel) !important;
  --aec-surface: var(--neutral-panel-soft) !important;
  --aec-text: var(--neutral-text) !important;
  --aec-muted: var(--neutral-muted) !important;
  --aec-line: var(--neutral-line) !important;
  --aec-accent: var(--neutral-accent) !important;
  --aec-accent-soft: var(--neutral-accent-soft) !important;
}

/* The chat send button is a small primary action. Match its icon foreground
 * to the selected palette rather than assuming every accent uses white. */
html:root[data-accent] body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn {
  background: var(--neutral-accent) !important;
  background-color: var(--neutral-accent) !important;
  color: var(--neutral-accent-text) !important;
}
html:root[data-accent] body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn:is(:hover, :focus-visible):not(:disabled) {
  background: var(--neutral-accent-strong) !important;
  background-color: var(--neutral-accent-strong) !important;
  color: var(--neutral-accent-text) !important;
}
html:root[data-accent] body[data-project-home-mode="chat"] #assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantSendBtn :is(svg, i, .fluent-icon-shell, .fluent-icon) {
  color: var(--neutral-accent-text) !important;
  -webkit-text-fill-color: var(--neutral-accent-text) !important;
  stroke: currentColor !important;
}

/* A few late chat/workbench rules intentionally used literal graphite values
 * for their compact actions. Let the selected accent reach those actions too;
 * surfaces and conversation bubbles remain neutral. */
html:root[data-accent] body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create
  :is(#assistantPromptEnhanceBtn, #assistantImageSettingsBtn, #assistantQuickToolsBtn,
      #assistantModeTrigger, #assistantCopyModeTrigger, #assistantAddBtn,
      #assistantVoiceInputBtn, #assistantSendBtn, #assistantSidePdfBtn,
      .assistant-task-card .assistant-primary-next-action,
      .assistant-generated-image-editable,
      .assistant-design-pptx-download,
      .assistant-editable-retry-actions > .primary,
      .assistant-delivery-preview button.primary,
      .project-home-primary) {
  background: var(--neutral-accent) !important;
  background-color: var(--neutral-accent) !important;
  border-color: var(--neutral-accent) !important;
  color: var(--neutral-accent-text) !important;
  box-shadow: none !important;
}
html:root[data-accent] body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create
  :is(#assistantPromptEnhanceBtn, #assistantImageSettingsBtn, #assistantQuickToolsBtn,
      #assistantModeTrigger, #assistantCopyModeTrigger, #assistantAddBtn,
      #assistantVoiceInputBtn, #assistantSendBtn, #assistantSidePdfBtn,
      .assistant-task-card .assistant-primary-next-action,
      .assistant-generated-image-editable,
      .assistant-design-pptx-download,
      .assistant-editable-retry-actions > .primary,
      .assistant-delivery-preview button.primary,
      .project-home-primary):is(:hover, :focus-visible, [aria-expanded="true"]):not(:disabled) {
  background: var(--neutral-accent-strong) !important;
  background-color: var(--neutral-accent-strong) !important;
  border-color: var(--neutral-accent-strong) !important;
  color: var(--neutral-accent-text) !important;
}
html:root[data-accent] body:is([data-project-home-mode="chat"], [data-project-home-mode="work"]) #step-create
  :is(#assistantPromptEnhanceBtn, #assistantImageSettingsBtn, #assistantQuickToolsBtn,
      #assistantModeTrigger, #assistantCopyModeTrigger, #assistantAddBtn,
      #assistantVoiceInputBtn, #assistantSendBtn, #assistantSidePdfBtn,
      .assistant-task-card .assistant-primary-next-action,
      .assistant-generated-image-editable,
      .assistant-design-pptx-download,
      .assistant-editable-retry-actions > .primary,
      .assistant-delivery-preview button.primary,
      .project-home-primary) :is(svg, i, .fluent-icon-shell, .fluent-icon) {
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
  stroke: currentColor !important;
}

/* Workflow navigation is shared by several legacy themes. Keep one compact
 * treatment here so old blue/rounded-card rules cannot leak into the chrome. */
html:root body #appShell > .topbar > #editorWorkflowNav {
  display: flex !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding: 3px !important;
  border: 1px solid var(--neutral-line) !important;
  border-radius: 10px !important;
  background: var(--neutral-panel-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Stage navigation is useful only after a project has entered its editor.
 * The empty work home otherwise shows six disabled stage actions in its topbar. */
html:root body:not(.workbench-editor-active) #appShell > .topbar > #editorWorkflowNav {
  display: none !important;
}

html:root body #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 5px 9px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: var(--neutral-muted) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transform: none !important;
}

html:root body #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action:is(:hover, :focus-visible):not(:disabled) {
  color: var(--neutral-text) !important;
  background: var(--neutral-panel-raised) !important;
  border-color: var(--neutral-line-strong) !important;
  box-shadow: none !important;
}

html:root body #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action.active,
html:root body #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[aria-selected="true"] {
  color: var(--neutral-text) !important;
  background: var(--neutral-accent-soft) !important;
  border-color: color-mix(in srgb, var(--neutral-accent) 42%, var(--neutral-line)) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > button.editor-workflow-action.active,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > button.editor-workflow-action.active:hover,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > button.editor-workflow-action[aria-selected="true"] {
  color: var(--neutral-accent-strong) !important;
  background: var(--neutral-accent-soft) !important;
  background-color: var(--neutral-accent-soft) !important;
  background-image: none !important;
  border-color: color-mix(in srgb, var(--neutral-accent) 42%, var(--neutral-line)) !important;
  box-shadow: none !important;
}
html:root[data-theme="dark"] body.workbench-editor-active #appShell > header.topbar > #editorWorkflowNav > button.editor-workflow-action.active,
html:root[data-theme="dark"] body.workbench-editor-active #appShell > header.topbar > #editorWorkflowNav[data-active-workflow] > button.editor-workflow-action.active,
html:root[data-theme="dark"] body.workbench-editor-active #appShell > header.topbar > #editorWorkflowNav > button.editor-workflow-action[aria-selected="true"],
html:root:not([data-theme="dark"]) body.workbench-editor-active #appShell > header.topbar > #editorWorkflowNav > button.editor-workflow-action.active {
  color: var(--neutral-accent-strong) !important;
  background: var(--neutral-accent-soft) !important;
  background-color: var(--neutral-accent-soft) !important;
  background-image: none !important;
  border-color: color-mix(in srgb, var(--neutral-accent) 42%, var(--neutral-line)) !important;
  box-shadow: none !important;
}

html:root body #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action :is(svg, svg *, i[data-lucide], .fluent-icon-shell, .fluent-icon) {
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
  background-image: none !important;
}

@media (max-width: 640px) {
  html:root body #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action {
    flex: 0 0 auto !important;
    min-width: 52px !important;
    padding-inline: 7px !important;
    font-size: 11px !important;
  }
}

/* Legacy export markup remains for old deep links, but delivery is rendered by
 * the workflow drawer. Do not let the retired panel reappear during setStep(). */
html:root body .legacy-export-panel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Editor chrome states use the shared neutral/gold language. Artwork colors are
 * intentionally untouched because they belong to the user's document. */
html:root body :is(.drop-indicator, .drag-over-indicator, .selection-outline, .multi-select-outline,
  .canvas-selection, .editor-selection, .task-progress-fill, .progress-fill) {
  border-color: var(--neutral-accent) !important;
  background-color: var(--neutral-accent-soft) !important;
  color: var(--neutral-accent-strong) !important;
}
html:root body :is(.rail-item:hover, .rail-item:focus-visible, .rail-item.active) {
  color: var(--neutral-text) !important;
  background: var(--neutral-panel-raised) !important;
  border-color: var(--neutral-line-strong) !important;
  box-shadow: none !important;
}
html:root body :is(.rail-item.active, .rail-item[aria-current="step"]) {
  color: var(--neutral-accent-strong) !important;
  background: var(--neutral-accent-soft) !important;
  border-color: color-mix(in srgb, var(--neutral-accent) 42%, var(--neutral-line)) !important;
}

/* Remaining editor/assistant chrome that is defined with literal blue values
 * in legacy sheets. These selectors target controls and selection affordances,
 * never the artwork itself. */
html:root body :is(
  #assistantDrawer .assistant-prompt-enhance-modes button[aria-pressed="true"],
  #assistantDrawer .assistant-message-more-popover button:hover,
  #assistantDrawer .assistant-message-more-popover button:focus-visible,
  #assistantDrawer .assistant-side-workspace-status.is-running,
  #assistantDrawer .assistant-copy-mode-btn.active,
  #assistantDrawer .assistant-copy-mode-trigger.is-open,
  #assistantDrawer .assistant-task-card .assistant-primary-next-action,
  #assistantFloatLauncher.assistant-float-launcher,
  .floating-editor-tools .mini-btn.primary,
  #step-edit #slideCanvas .selection-overlay.multi,
  .element-grip) {
  color: var(--neutral-accent-strong) !important;
  border-color: var(--neutral-accent) !important;
  background: var(--neutral-accent-soft) !important;
  background-color: var(--neutral-accent-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html:root body :is(
  #assistantDrawer .assistant-prompt-enhance-modes button[aria-pressed="true"],
  #assistantDrawer .assistant-copy-mode-btn.active,
  .floating-editor-tools .mini-btn.primary):is(:hover, :focus-visible),
html:root body #assistantFloatLauncher.assistant-float-launcher:is(:hover, :focus-visible) {
  color: var(--neutral-accent-text) !important;
  border-color: var(--neutral-accent-strong) !important;
  background: var(--neutral-accent-strong) !important;
  background-color: var(--neutral-accent-strong) !important;
}
html:root body :is(.slide-el.selected, .slide-el.multi-selected,
  #step-edit #slideCanvas .selection-overlay.multi) {
  outline-color: var(--neutral-accent) !important;
}

/* Editable inspector actions inherit literal blue from the older store
 * theme. Match the shared warm accent in both desktop and narrow drawers. */
html:root[data-theme="dark"] body.workbench-editor-active #appShell #step-edit > .editor-top-ribbon #editorRibbon #canvasViewSwitch > button.active,
html:root:not([data-theme="dark"]) body.workbench-editor-active #appShell #step-edit > .editor-top-ribbon #editorRibbon #canvasViewSwitch > button.active {
  color: var(--neutral-accent-text) !important;
  background: var(--neutral-accent) !important;
  background-color: var(--neutral-accent) !important;
  background-image: none !important;
  border-color: var(--neutral-accent) !important;
  box-shadow: none !important;
}
html:root body.workbench-editor-active #step-edit #editableStageInspector :is(
  .workflow-smart-command-actions .primary-btn,
  .editable-one-click-primary,
  .editable-canvas-review-action) {
  color: var(--neutral-accent-text) !important;
  background: var(--neutral-accent) !important;
  background-color: var(--neutral-accent) !important;
  background-image: none !important;
  border-color: var(--neutral-accent) !important;
  box-shadow: none !important;
}
html:root body.workbench-editor-active #step-edit #editableStageInspector :is(
  .workflow-smart-command-actions .primary-btn,
  .editable-one-click-primary,
  .editable-canvas-review-action):is(:hover, :focus-visible):not(:disabled) {
  color: var(--neutral-accent-text) !important;
  background: var(--neutral-accent-strong) !important;
  background-color: var(--neutral-accent-strong) !important;
  border-color: var(--neutral-accent-strong) !important;
}
html:root body.workbench-editor-active #step-edit #editableStageInspector :is(
  .workflow-smart-command-actions .primary-btn,
  .editable-one-click-primary,
  .editable-canvas-review-action) :is(span, svg, i) {
  color: inherit !important;
  stroke: currentColor !important;
}
html:root body.workbench-editor-active #step-edit > .thumb-panel .editor-left-tabs > button.active {
  color: var(--neutral-accent-strong) !important;
  background: var(--neutral-accent-soft) !important;
  background-color: var(--neutral-accent-soft) !important;
  background-image: none !important;
  border-color: color-mix(in srgb, var(--neutral-accent) 42%, var(--neutral-line)) !important;
  box-shadow: none !important;
}

/* Editable preview uses the normal page rail + canvas + inspector. The
 * conversion summary is rendered in #editableStageInspector; the legacy
 * full-workflow surface must never occupy the left grid track as a second UI. */
@media (min-width: 1024px) {
  html:root body.workbench-editor-active #appShell #step-edit.editor-layout.editable-preview-mode {
    display: grid !important;
    grid-template-columns: clamp(220px, 18vw, 280px) minmax(0, 1fr) clamp(320px, 26vw, 400px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  html:root body.workbench-editor-active #appShell #step-edit.editor-layout.editable-preview-mode > .editor-top-ribbon {
    display: none !important;
  }
  html:root body.workbench-editor-active #appShell #step-edit.editor-layout.editable-preview-mode > #editorWorkflowWorkspace {
    display: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  html:root body.workbench-editor-active #appShell #step-edit.editor-layout.editable-preview-mode > .thumb-panel {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: hidden !important;
  }
  html:root body.workbench-editor-active #appShell #step-edit.editor-layout.editable-preview-mode > .canvas-area {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: hidden !important;
  }
  html:root body.workbench-editor-active #appShell #step-edit.editor-layout.editable-preview-mode > .inspector {
    display: block !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: hidden auto !important;
  }
}

/* The status bar already offers zoom and fit controls. Keep one source of
   truth in the editor chrome to reduce visual noise on every workflow stage. */
html:root body.workbench-editor-active #step-edit #editorRibbon :is(#canvasZoomSelect, #fitSlideBtn, #fitWidthBtn) {
  display: none !important;
}

/* The assistant entry keeps its brand illustration, with a quiet neutral
   control surface that matches the editor chrome in both themes. */
html:root body #assistantFloatLauncher.assistant-float-launcher {
  border: 1px solid var(--neutral-line-strong) !important;
  background: var(--neutral-panel-soft) !important;
  background-color: var(--neutral-panel-soft) !important;
  background-image: none !important;
  color: var(--neutral-text) !important;
  box-shadow: none !important;
}
html:root body #assistantFloatLauncher.assistant-float-launcher:is(:hover, :focus-visible) {
  border-color: var(--neutral-accent) !important;
  background: var(--neutral-panel-raised) !important;
  background-color: var(--neutral-panel-raised) !important;
  color: var(--neutral-text) !important;
}
html:root body #assistantFloatLauncher.assistant-float-launcher:focus-visible {
  outline: 2px solid var(--neutral-accent) !important;
  outline-offset: 3px !important;
}
html:root body #assistantFloatLauncher.assistant-float-launcher > .assistant-launcher-ip {
  filter: saturate(.55) !important;
}
@layer assistantChrome {
  html:root body[data-project-home-mode="work"] #assistantFloatLauncher.assistant-float-launcher {
    border-color: var(--neutral-line-strong) !important;
    background: var(--neutral-panel-soft) !important;
    background-color: var(--neutral-panel-soft) !important;
    box-shadow: none !important;
  }
  html:root body[data-project-home-mode="work"] #assistantFloatLauncher.assistant-float-launcher:is(:hover, :focus-visible) {
    border-color: var(--neutral-accent) !important;
    background: var(--neutral-panel-raised) !important;
    background-color: var(--neutral-panel-raised) !important;
  }
}

/* Keep the floating assistant beside the editor canvas when the right-side
 action panel is open, so it cannot cover that panel's primary action. */
@media (min-width: 1024px) {
  html:root body[data-active-step="edit"][data-editor-workflow-stage="editable"]:has(#step-edit:not(.right-panel-collapsed)) #assistantFloatLauncher.assistant-float-launcher,
  html:root body[data-active-step="edit"][data-editor-workflow-stage="review"]:has(#step-edit:not(.right-panel-collapsed)) #assistantFloatLauncher.assistant-float-launcher,
  html:root body[data-active-step="edit"][data-editor-workflow-stage="delivery"]:has(#step-edit:not(.right-panel-collapsed)) #assistantFloatLauncher.assistant-float-launcher {
    right: calc(var(--editor-active-right-width, 300px) + 18px) !important;
  }
}

/* Give the one-click conversion summary an explicit reading order. The
   inspector stays narrow even on desktop, so each automatic step gets a row. */
html:root body #editableStageInspector .editable-one-click-stage {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}
html:root body #editableStageInspector .editable-one-click-stage > .workflow-inspector-head {
  padding-bottom: 14px;
}
html:root body #editableStageInspector .editable-one-click-card {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--neutral-line);
  border-radius: 8px;
  background: var(--neutral-panel-soft);
  color: var(--neutral-text);
}
html:root body #editableStageInspector .editable-one-click-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-accent-strong);
}
html:root body #editableStageInspector .editable-one-click-icon > :is(svg, i, .fluent-icon-shell) {
  width: 22px;
  height: 22px;
}
html:root body #editableStageInspector .editable-one-click-card strong {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
html:root body #editableStageInspector .editable-one-click-card p {
  margin: 5px 0 0;
  color: var(--neutral-muted);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
html:root body #editableStageInspector .editable-one-click-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}
html:root body #editableStageInspector .editable-one-click-flow > span {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 3px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--neutral-line);
  border-radius: 8px;
  background: var(--neutral-panel-soft);
  text-align: left !important;
}
html:root body #editableStageInspector .editable-one-click-flow > span > :is(svg, i, .fluent-icon-shell) {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--neutral-accent-strong);
}
html:root body #editableStageInspector .editable-one-click-flow > span > .fluent-icon-shell {
  display: inline-block !important;
  min-width: 20px !important;
  width: 20px !important;
  height: 20px !important;
}
html:root body #editableStageInspector .editable-one-click-flow > span > :is(b, small) {
  grid-column: 2;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left !important;
}
html:root body #editableStageInspector .editable-one-click-flow b {
  color: var(--neutral-text);
  font-size: 13px;
  line-height: 1.5;
}
html:root body #editableStageInspector .editable-one-click-flow small {
  color: var(--neutral-muted);
  font-size: 12px;
  line-height: 1.55;
}
html:root body #editableStageInspector .editable-one-click-flow > :is(svg, i, .fluent-icon-shell) {
  display: none !important;
}
html:root body #editableStageInspector .editable-one-click-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--neutral-muted);
  font-size: 12px;
  line-height: 1.6;
}
html:root body #editableStageInspector .editable-one-click-note > :is(svg, i, .fluent-icon-shell) {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
html:root body #editableStageInspector .editable-one-click-note > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
html:root body #editableStageInspector .editable-one-click-footer {
  display: grid;
  gap: 8px;
  padding-top: 14px;
}
html:root body #editableStageInspector .editable-one-click-footer > .workflow-wide-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin: 0 !important;
  white-space: normal;
}
html:root body #editableStageInspector .editable-one-click-footer > .workflow-wide-action > :is(svg, i, .fluent-icon-shell) {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

/* Icon normalization lives in a named layer with important declarations.
   Hide the now-redundant connectors inside that same layer. */
@layer assistantChrome {
  html:root body #editableStageInspector .editable-one-click-flow > :is(svg, i, .fluent-icon-shell) {
    display: none !important;
  }
  html:root body #editableStageInspector .editable-one-click-flow > span:not(.fluent-icon-shell),
  html:root body #editableStageInspector .editable-one-click-flow > span > :is(b, small) {
    text-align: left !important;
  }
}

/* Keep the primary action available while the instructions scroll. This also
   gives the narrow "本页操作" drawer one clear scrolling region. */
html:root body.workbench-editor-active[data-editor-workflow-stage="editable"] #appShell#appShell #step-edit#step-edit.editor-layout > .inspector:has(#editableStageInspector:not(.hidden) > .editable-one-click-footer) {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  overflow: hidden !important;
}
html:root body #editableStageInspector:not(.hidden):has(> .editable-one-click-footer) {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-content: stretch !important;
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  grid-row: 3 !important;
}
html:root body #editableStageInspector > .editable-one-click-stage {
  min-height: 0 !important;
  padding-bottom: 14px;
  overflow: hidden auto !important;
}
html:root body #editableStageInspector > .editable-one-click-footer {
  margin: 0 -14px !important;
  padding: 12px 14px !important;
  border-top: 1px solid var(--neutral-line);
  background: var(--neutral-panel) !important;
}
html:root body #editableStageInspector .editable-conversion-options { display:grid; gap:10px; min-width:0; }
html:root body #editableStageInspector .editable-conversion-options>div { padding:11px; border:1px solid var(--neutral-line); border-radius:7px; background:var(--neutral-panel); }
html:root body #editableStageInspector .editable-conversion-options strong { font-size:12px; font-weight:600; }
html:root body #editableStageInspector .editable-conversion-options p { margin:6px 0 9px; font-size:11px; line-height:1.65; color:var(--neutral-muted); }
html:root body #editableStageInspector .editable-conversion-options summary { padding:9px 0; font-size:11px; cursor:pointer; color:var(--neutral-muted); }
html:root body #editableStageInspector .editable-conversion-options button { width:100%; min-height:32px; margin:4px 0; box-shadow:none; }
/* Original PPT pages include bleed decorations beyond their page bounds.
 * Crop this preview without changing object geometry or normal pasteboards. */
html:root body #appShell #step-edit #slideCanvas.source-document-canvas {
  overflow: hidden !important;
}

/* Keep the shared editing destination visible in the conversation surface. */
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > .assistant-context-block:has(.assistant-linked-target) {
  display: block !important;
  flex: 0 0 auto !important;
  order: 0 !important;
  position: relative !important;
  align-self: flex-start !important;
  width: min(860px, calc(100% - var(--assistant-right-rail-width, 0px) - 32px)) !important;
  max-width: calc(100% - var(--assistant-right-rail-width, 0px) - 32px) !important;
  min-width: 0 !important;
  margin: 0 0 6px max(16px, calc((100% - var(--assistant-right-rail-width, 0px) - 860px) / 2)) !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
  background: var(--neutral-panel) !important;
  border: 1px solid var(--neutral-line) !important;
  border-radius: 8px !important;
}
html:root body #assistantDrawer .assistant-linked-target#assistantEditContext {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--neutral-text) !important;
  border: 0 !important;
}
html:root body #assistantDrawer .assistant-linked-target > strong {
  flex: 1 1 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
}
html:root body #assistantDrawer .assistant-linked-target :is(button, select) {
  min-height: 28px !important;
  padding: 4px 8px !important;
  border: 1px solid var(--neutral-line) !important;
  border-radius: 6px !important;
  background: var(--neutral-panel-soft, var(--neutral-panel)) !important;
  color: var(--neutral-text) !important;
  box-shadow: none !important;
  font-size: 12px !important;
}
html:root body #assistantDrawer .assistant-linked-target label {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  gap: 5px;
  font-size: 12px;
  color: var(--neutral-muted);
}
html:root body #assistantDrawer .assistant-linked-target :is(button, select):focus-visible {
  outline: 2px solid var(--neutral-accent) !important;
  outline-offset: 2px;
}
html:root body #assistantDrawer .assistant-linked-target [hidden] { display: none !important; }
html:root body #assistantDrawer .assistant-linked-target#assistantEditContext.hidden { display: none !important; }
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > .assistant-context-block:has(.assistant-linked-target) > #assistantContext { display: none !important; }
html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > .assistant-context-block:has(.assistant-linked-target) > #assistantContextActions {
  display: none !important;
}
@media (max-width: 767px) {
  html:root body[data-project-home-mode="chat"] #step-create#step-create #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] > .assistant-context-block:has(.assistant-linked-target) {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    margin: 0 8px 6px !important;
    padding: 8px !important;
  }
}

/* Editor chrome primary actions outrank the older inspector's literal blue
 * shadows. Scope to UI controls so imported slide artwork keeps its colors. */
html:root[data-theme] body.workbench-editor-active #appShell #step-edit :is(.primary-btn, button.recommended):not(#slideCanvas *) {
  color: var(--neutral-accent-text) !important;
  background: var(--neutral-accent) !important;
  background-color: var(--neutral-accent) !important;
  background-image: none !important;
  border-color: var(--neutral-accent) !important;
  box-shadow: none !important;
}
html:root[data-theme] body.workbench-editor-active #appShell #step-edit :is(.primary-btn, button.recommended):not(#slideCanvas *):is(:hover, :focus-visible):not(:disabled) {
  color: var(--neutral-accent-text) !important;
  background: var(--neutral-accent-strong) !important;
  background-color: var(--neutral-accent-strong) !important;
  background-image: none !important;
  border-color: var(--neutral-accent-strong) !important;
  box-shadow: none !important;
}
html:root[data-theme] body.workbench-editor-active #appShell #step-edit :is(.primary-btn, button.recommended):not(#slideCanvas *):focus-visible:not(:disabled) {
  outline: 2px solid var(--neutral-accent) !important;
  outline-offset: 2px !important;
}

/* Light theme icon contrast guard. Keep filled primary buttons white, while
   workflow/ribbon active glyphs use warm ink against their pale surfaces. */
html:root:not([data-theme="dark"]) body #appShell :is(
  .editor-workflow-action.active,
  .editor-workflow-action[aria-selected="true"],
  #editorRibbon .ribbon-tool.active,
  #editorRibbon .ribbon-tool[aria-pressed="true"]
) :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: var(--neutral-accent-strong) !important;
  -webkit-text-fill-color: var(--neutral-accent-strong) !important;
  stroke: currentColor !important;
}
html:root:not([data-theme="dark"]) body #appShell :is(
  .editor-workflow-action.active,
  .editor-workflow-action[aria-selected="true"],
  #editorRibbon .ribbon-tool.active,
  #editorRibbon .ribbon-tool[aria-pressed="true"]
) .fluent-icon {
  background: currentColor !important;
  background-color: currentColor !important;
}
html:root:not([data-theme="dark"]) body[data-project-home-mode="work"] #step-create .project-home-nav-item :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: var(--neutral-accent-strong) !important;
  -webkit-text-fill-color: var(--neutral-accent-strong) !important;
}
/* Final light-theme icon contrast guard. Legacy active-state rules used white
 * glyphs on pale surfaces, so the controls looked empty. Keep solid primary
 * actions white, while pale active controls use the shared warm ink. */
html:root:not([data-theme="dark"]) body:not(#appShell) > #appShell :is(
  .editor-workflow-action,
  #editorRibbon .ribbon-tool,
  .editor-tool-rail button,
  .editor-left-tabs button,
  .project-home-nav-item,
  .quick-action-icon
) :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: var(--neutral-muted) !important;
  -webkit-text-fill-color: var(--neutral-muted) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html:root:not([data-theme="dark"]) body:not(#appShell) > #appShell :is(
  .editor-workflow-action.active,
  .editor-workflow-action[aria-selected="true"],
  #editorRibbon .ribbon-tool.active,
  #editorRibbon .ribbon-tool[aria-pressed="true"],
  .editor-tool-rail button.active,
  .editor-tool-rail button[aria-selected="true"],
  .editor-left-tabs button.active,
  .editor-left-tabs button[aria-selected="true"],
  .project-home-nav-item.active,
  .project-home-nav-item[aria-current="page"],
  .quick-action-icon.active,
  .quick-action-icon[aria-pressed="true"]
) :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: var(--neutral-accent-strong) !important;
  -webkit-text-fill-color: var(--neutral-accent-strong) !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html:root:not([data-theme="dark"]) body:not(#appShell) > #appShell :is(
  .project-home-primary,
  .smart-create-submit,
  .primary-btn,
  button.primary,
  button.recommended,
  .assistant-send-btn
) :is(.fluent-icon-shell, .fluent-icon, svg.lucide) {
  color: var(--neutral-accent-text) !important;
  -webkit-text-fill-color: var(--neutral-accent-text) !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html:root:not([data-theme="dark"]) body:not(#appShell) > #appShell :is(.fluent-icon-shell, .fluent-icon) {
  visibility: visible !important;
}
html:root:not([data-theme="dark"]) body:not(#appShell) > #appShell .fluent-icon-shell {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html:root:not([data-theme="dark"]) body:not(#appShell) > #appShell .fluent-icon-shell > .fluent-icon {
  display: block !important;
  background: currentColor !important;
  background-color: currentColor !important;
  background-image: none !important;
  -webkit-mask-image: var(--fluent-icon-regular) !important;
  mask-image: var(--fluent-icon-regular) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Empty inspector guidance: keep the first action obvious when no object is selected. */
html:root body:not(#appShell) > #appShell #step-edit #inspectorPropertiesView > #inspectorBody.inspector-empty-state {
  min-height: 190px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  text-align: center !important;
}
html:root body:not(#appShell) > #appShell .inspector-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  color: var(--neutral-text);
}
html:root body:not(#appShell) > #appShell .inspector-empty-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--neutral-line);
  border-radius: 10px;
  color: var(--neutral-muted);
  background: var(--neutral-panel-soft);
}
html:root body:not(#appShell) > #appShell .inspector-empty-card strong {
  font-size: 14px;
  line-height: 1.35;
}
html:root body:not(#appShell) > #appShell .inspector-empty-card p {
  margin: 0;
  color: var(--neutral-muted);
  font-size: 12px;
  line-height: 1.55;
}
html:root body:not(#appShell) > #appShell .inspector-empty-card .ghost-btn {
  margin-top: 4px;
}

/* Clear recognition summary for editable workflow */
html:root body #step-edit .workflow-smart-scope {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--neutral-muted);
  font-size: 11px;
}
html:root body #step-edit .workflow-smart-scope select {
  min-width: 0;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--neutral-line);
  border-radius: 6px;
  color: var(--neutral-text);
  background: var(--neutral-panel-soft);
}

html:root body #editableStageInspector .editable-recognition-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--neutral-line);
  border-radius: 8px;
  background: var(--neutral-panel-soft);
}
html:root body #editableStageInspector .editable-recognition-summary > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: center;
}
html:root body #editableStageInspector .editable-recognition-summary b {
  color: var(--neutral-text);
  font-size: 14px;
  line-height: 1.2;
}
html:root body #editableStageInspector .editable-recognition-summary small {
  color: var(--neutral-muted);
  font-size: 10px;
}

/* Accent choices use the same quiet settings surface. Only the small swatch
 * previews each hue; opening a list does not recolor a panel or border. */
html:root body #settingsModal .settings-accent-picker {
  position: relative;
  width: min(100%, 240px);
  min-width: 0;
}
html:root body #settingsModal .settings-accent-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
html:root body #settingsModal .settings-accent-row > .settings-control-label {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
}
@media (max-width: 520px) {
  html:root body #settingsModal .settings-accent-row {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }
  html:root body #settingsModal .settings-accent-picker {
    width: 100%;
  }
}
html:root body #settingsModal .settings-accent-trigger {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 40px !important;
  padding: 9px 12px !important;
  border: 1px solid var(--settings-line-strong, var(--neutral-line-strong)) !important;
  border-radius: 8px !important;
  background: var(--settings-control, var(--neutral-panel)) !important;
  background-color: var(--settings-control, var(--neutral-panel)) !important;
  background-image: none !important;
  color: var(--settings-text, var(--neutral-text)) !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
html:root body #settingsModal .settings-accent-trigger:is(:hover, [aria-expanded="true"]) {
  border-color: var(--settings-line-strong, var(--neutral-line-strong)) !important;
  background: var(--settings-active, var(--neutral-panel-raised)) !important;
  background-color: var(--settings-active, var(--neutral-panel-raised)) !important;
  color: var(--settings-text, var(--neutral-text)) !important;
}
html:root body #settingsModal .settings-accent-trigger:focus-visible {
  outline: 2px solid var(--neutral-accent) !important;
  outline-offset: 3px !important;
}
html:root body #settingsModal .settings-accent-label,
html:root body #settingsModal #settingsAccentLabel,
html:root body #settingsModal .settings-accent-option > span:nth-of-type(2) {
  min-width: 0;
  flex: 1;
  color: inherit !important;
  line-height: 1.4;
}
html:root body #settingsModal .settings-accent-chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: inherit !important;
}
html:root body #settingsModal .settings-accent-popover {
  position: absolute;
  z-index: 25;
  top: calc(100% + 7px);
  right: 0;
  width: min(260px, calc(100vw - 48px));
  max-height: min(340px, calc(100dvh - 48px));
  padding: 6px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--settings-line, var(--neutral-line)) !important;
  border-radius: 12px;
  background: var(--settings-raised, var(--neutral-panel)) !important;
  background-color: var(--settings-raised, var(--neutral-panel)) !important;
  background-image: none !important;
  color: var(--settings-text, var(--neutral-text)) !important;
  box-shadow: none !important;
}
html:root[data-theme="dark"] body #settingsModal .settings-accent-popover {
  box-shadow: none !important;
}
html:root body #settingsModal .settings-accent-popover[hidden] {
  display: none !important;
}
html:root body #settingsModal .settings-accent-option {
  display: flex !important;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 39px !important;
  margin: 0;
  padding: 9px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--settings-text, var(--neutral-text)) !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
html:root body #settingsModal .settings-accent-option:is(:hover, [aria-checked="true"], [aria-selected="true"], [aria-pressed="true"]) {
  border-color: transparent !important;
  background: var(--settings-active, var(--neutral-panel-raised)) !important;
  background-color: var(--settings-active, var(--neutral-panel-raised)) !important;
  color: var(--settings-text, var(--neutral-text)) !important;
}
html:root body #settingsModal .settings-accent-option:focus-visible {
  outline: 2px solid var(--neutral-accent) !important;
  outline-offset: -2px !important;
  border-color: transparent !important;
}
html:root body #settingsModal .settings-accent-check {
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex: 0 0 auto;
  color: inherit !important;
  opacity: 0;
}
html:root body #settingsModal .settings-accent-option:is([aria-checked="true"], [aria-selected="true"], [aria-pressed="true"]) .settings-accent-check {
  opacity: 1;
}
html:root body #settingsModal :is(.settings-accent-swatch, .settings-accent-dot) {
  --settings-swatch-color: var(--neutral-accent);
  display: inline-block;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border: 1px solid rgb(0 0 0 / 12%);
  border-radius: 50%;
  background: var(--settings-swatch-color) !important;
  background-color: var(--settings-swatch-color) !important;
  background-image: none !important;
}
html:root body #settingsModal :is(.settings-accent-swatch, .settings-accent-dot)[data-accent-value="default"] { --settings-swatch-color: #a26820; }
html:root body #settingsModal :is(.settings-accent-swatch, .settings-accent-dot)[data-accent-value="blue"] { --settings-swatch-color: #2563eb; }
html:root body #settingsModal :is(.settings-accent-swatch, .settings-accent-dot)[data-accent-value="green"] { --settings-swatch-color: #197346; }
html:root body #settingsModal :is(.settings-accent-swatch, .settings-accent-dot)[data-accent-value="yellow"] { --settings-swatch-color: #e0b820; }
html:root body #settingsModal :is(.settings-accent-swatch, .settings-accent-dot)[data-accent-value="pink"] { --settings-swatch-color: #c94087; }
html:root body #settingsModal :is(.settings-accent-swatch, .settings-accent-dot)[data-accent-value="orange"] { --settings-swatch-color: #cb611b; }
html:root body #settingsModal :is(.settings-accent-swatch, .settings-accent-dot)[data-accent-value="purple"] { --settings-swatch-color: #8c50cf; }
html:root body #settingsModal :is(.settings-accent-swatch, .settings-accent-dot)[data-accent-value="black"] { --settings-swatch-color: #222222; }
html:root[data-theme="dark"] body #settingsModal :is(.settings-accent-swatch, .settings-accent-dot) { border-color: rgb(255 255 255 / 20%); }
html:root[data-theme="dark"] body #settingsModal :is(.settings-accent-swatch, .settings-accent-dot)[data-accent-value="default"] { --settings-swatch-color: #d5a15c; }
html:root[data-theme="dark"] body #settingsModal :is(.settings-accent-swatch, .settings-accent-dot)[data-accent-value="blue"] { --settings-swatch-color: #86b3fa; }
html:root[data-theme="dark"] body #settingsModal :is(.settings-accent-swatch, .settings-accent-dot)[data-accent-value="green"] { --settings-swatch-color: #6ec394; }
html:root[data-theme="dark"] body #settingsModal :is(.settings-accent-swatch, .settings-accent-dot)[data-accent-value="yellow"] { --settings-swatch-color: #eed36b; }
html:root[data-theme="dark"] body #settingsModal :is(.settings-accent-swatch, .settings-accent-dot)[data-accent-value="pink"] { --settings-swatch-color: #eaa0c6; }
html:root[data-theme="dark"] body #settingsModal :is(.settings-accent-swatch, .settings-accent-dot)[data-accent-value="orange"] { --settings-swatch-color: #e8a776; }
html:root[data-theme="dark"] body #settingsModal :is(.settings-accent-swatch, .settings-accent-dot)[data-accent-value="purple"] { --settings-swatch-color: #c3a0ee; }


/* === style workflow progressive disclosure / recovery (2026-10) === */
/* Beat earlier theme/flex resets; warm-neutral chrome only (no leftover cyan). */
html:root[data-theme] body #step-edit #step-style .style-workflow-steps,
html:root body #step-edit #step-style .style-workflow-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch;
  flex-wrap: nowrap !important;
  margin: 0 0 8px !important;
}
html:root[data-theme] body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step),
html:root body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step) {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 30px;
  padding: 4px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--neutral-muted, #6b7280) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  box-shadow: none !important;
}
html:root[data-theme] body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step) > b,
html:root body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step) > b {
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 18px;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: var(--neutral-panel-raised, rgba(0,0,0,.06)) !important;
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
html:root[data-theme] body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step).is-done,
html:root body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step).is-done {
  color: var(--neutral-text, #111827) !important;
  border-color: color-mix(in srgb, var(--neutral-accent, #a86f25) 28%, var(--neutral-line, #e5e5e5)) !important;
  background: transparent !important;
}
html:root[data-theme] body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step).active,
html:root[data-theme] body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step)[aria-current="step"],
html:root body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step).active,
html:root body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step)[aria-current="step"] {
  color: var(--neutral-text, #111827) !important;
  border-color: color-mix(in srgb, var(--neutral-accent, #a86f25) 55%, transparent) !important;
  background: transparent !important;
  font-weight: 650 !important;
}
html:root[data-theme] body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step).active > b,
html:root[data-theme] body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step)[aria-current="step"] > b,
html:root body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step).active > b,
html:root body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step)[aria-current="step"] > b {
  color: var(--neutral-accent-text, #fff) !important;
  background: var(--neutral-accent, #a86f25) !important;
}
html:root[data-theme] body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step).active.is-warn,
html:root body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step).active.is-warn {
  color: #9a3412 !important;
  border-color: rgba(245, 158, 11, .45) !important;
  background: rgba(255, 251, 235, .95) !important;
}
html:root[data-theme] body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step).active.is-busy,
html:root body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step).active.is-busy {
  color: var(--neutral-text, #111827) !important;
  border-color: color-mix(in srgb, var(--neutral-accent, #a86f25) 40%, transparent) !important;
  background: color-mix(in srgb, var(--neutral-accent, #a86f25) 10%, var(--neutral-panel, #fff)) !important;
}
html:root[data-theme] body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step).is-pending,
html:root body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step).is-pending {
  opacity: .72;
}
html:root[data-theme] body #step-edit #step-style .style-workflow-step-detail,
html:root body #step-edit #step-style .style-workflow-step-detail {
  margin: 0 0 12px;
  padding: 0 2px;
  color: var(--neutral-muted, #6b7280);
  font-size: 12px;
  line-height: 1.5;
}
html:root[data-theme] body #step-edit #step-style .style-workflow-step-detail[data-tone="warn"],
html:root body #step-edit #step-style .style-workflow-step-detail[data-tone="warn"] { color: #9a3412; }
html:root[data-theme] body #step-edit #step-style .style-workflow-step-detail[data-tone="busy"],
html:root body #step-edit #step-style .style-workflow-step-detail[data-tone="busy"] { color: var(--neutral-text, #44403c); }
html:root[data-theme] body #step-edit #step-style .style-workflow-step-detail[data-tone="soft"],
html:root body #step-edit #step-style .style-workflow-step-detail[data-tone="soft"] { color: #78716c; }
html:root[data-theme] body #step-edit #step-style .style-workflow-recovery,
html:root body #step-edit #step-style .style-workflow-recovery {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}
html:root[data-theme] body #step-edit #step-style .style-workflow-recovery.hidden,
html:root body #step-edit #step-style .style-workflow-recovery.hidden { display: none !important; }
html:root[data-theme] body #step-edit #step-style .style-workflow-recovery-card,
html:root body #step-edit #step-style .style-workflow-recovery-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--neutral-line, rgba(0,0,0,.08));
  border-radius: 12px;
  background: var(--neutral-panel, #fff);
}
html:root[data-theme] body #step-edit #step-style .style-workflow-recovery-card > strong,
html:root body #step-edit #step-style .style-workflow-recovery-card > strong {
  grid-column: 1;
  font-size: 12px;
  color: var(--neutral-text, #111827);
}
html:root[data-theme] body #step-edit #step-style .style-workflow-recovery-card > span,
html:root body #step-edit #step-style .style-workflow-recovery-card > span {
  grid-column: 1;
  color: var(--neutral-muted, #6b7280);
  font-size: 11px;
  line-height: 1.45;
}
html:root[data-theme] body #step-edit #step-style .style-workflow-recovery-card > button,
html:root body #step-edit #step-style .style-workflow-recovery-card > button {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
}
html:root[data-theme] body #step-edit #step-style .style-workflow-recovery-card.soft,
html:root body #step-edit #step-style .style-workflow-recovery-card.soft {
  border-color: rgba(120, 113, 108, .28);
  background: rgba(245, 245, 244, .7);
}
html:root[data-theme] body #step-edit #step-style .style-workflow-recovery-card.warn,
html:root body #step-edit #step-style .style-workflow-recovery-card.warn {
  border-color: rgba(245, 158, 11, .4);
  background: rgba(255, 251, 235, .9);
}
html:root[data-theme] body #step-edit #step-style .style-workflow-recovery-card.busy,
html:root body #step-edit #step-style .style-workflow-recovery-card.busy {
  border-color: color-mix(in srgb, var(--neutral-accent, #a86f25) 35%, transparent);
  background: color-mix(in srgb, var(--neutral-accent, #a86f25) 8%, var(--neutral-panel, #fff));
}
html:root[data-theme] body #step-edit #step-style .style-moodboard.failed .style-moodboard-placeholder,
html:root body #step-edit #step-style .style-moodboard.failed .style-moodboard-placeholder {
  border-color: rgba(239, 68, 68, .35);
  background: rgba(254, 242, 242, .85);
}
@media (max-width: 900px) {
  html:root[data-theme] body #step-edit #step-style .style-workflow-steps,
  html:root body #step-edit #step-style .style-workflow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  html:root[data-theme] body #step-edit #step-style .style-workflow-recovery-card,
  html:root body #step-edit #step-style .style-workflow-recovery-card {
    grid-template-columns: minmax(0, 1fr);
  }
  html:root[data-theme] body #step-edit #step-style .style-workflow-recovery-card > button,
  html:root body #step-edit #step-style .style-workflow-recovery-card > button {
    grid-row: auto;
    grid-column: 1;
    justify-self: start;
  }
}
@media (max-width: 560px) {
  html:root[data-theme] body #step-edit #step-style .style-workflow-steps,
  html:root body #step-edit #step-style .style-workflow-steps {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }
  html:root[data-theme] body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step),
  html:root body #step-edit #step-style .style-workflow-steps > :is(span, button.style-workflow-step) {
    flex: 0 0 auto;
    min-height: 32px;
    max-width: 46vw;
    padding: 6px 8px !important;
    font-size: 11px !important;
  }
  html:root[data-theme] body.workbench-editor-active #step-edit.style-preview-mode #editorWorkflowWorkspace > #step-style.panel.flow-panel:not(.hidden) {
    padding: 14px 10px 24px !important;
  }
}
/* ==== chat-topbar-z-fix ==== */
/* Root cause: workmate-ai.css legacy fixed/absolute z-index 4999/5000 overlays fight chat-conversation topbar. */
/* Neutralize step-create / content / chat stacking; keep topbar above at z-index 50. */
@media (min-width: 1024px) {
  html:root[data-theme] body[data-project-home-mode="chat"] #step-create.project-start-screen {
    position: relative !important;
    z-index: auto !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-content,
  html:root[data-theme] body[data-project-home-mode="chat"] .project-home-content {
    position: relative !important;
    z-index: auto !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] #step-create .project-home-chat,
  html:root[data-theme] body[data-project-home-mode="chat"] .project-home-chat {
    position: relative !important;
    z-index: auto !important;
    inset: auto !important;
  }

  html:root[data-theme] body[data-project-home-mode="chat"] .project-home-chat-topbar,
  html:root body[data-project-home-mode="chat"] .project-home-chat-topbar {
    z-index: 50 !important;
  }
}
/* ==== /chat-topbar-z-fix ==== */

/* style workflow step nav buttons */
html:root body #step-edit #step-style .style-workflow-steps > button.style-workflow-step,
html:root[data-theme] body #step-edit #step-style .style-workflow-steps > button.style-workflow-step {
  appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html:root body #step-edit #step-style .style-workflow-steps > button.style-workflow-step:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--neutral-accent, #a86f25) 70%, transparent);
  outline-offset: 2px;
}

/* /design-stage-clarity.css */
/* ==== consolidated from /design-stage-clarity.css (cascade order preserved) ==== */
/* Phase1 merge: design/delivery/review/editable stage-clarity (cascade preserved). */
/* ===== merged from /design-stage-clarity.css ===== */
/* Design-stage information hierarchy and warm-neutral controls. Loaded after legacy themes. */
html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector.design-preview-inspector {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  color: var(--neutral-text);
  background: var(--neutral-panel);
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector.design-preview-inspector.hidden {
  display: none !important;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector > header {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  min-width: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--neutral-line);
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-preview-inspector-icon {
  width: 28px;
  height: 28px;
  border: 1px solid var(--neutral-line) !important;
  border-radius: 7px;
  background: var(--neutral-accent-soft) !important;
  color: var(--neutral-accent) !important;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-page-context {
  display: block;
  min-width: 0;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector #designPreviewInspectorTitle {
  display: -webkit-box;
  overflow: hidden;
  color: var(--neutral-text) !important;
  font-size: 12px;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector #designPageStatusText {
  display: -webkit-box;
  overflow: hidden;
  margin: 4px 0 0;
  color: var(--neutral-muted) !important;
  font-size: 10px;
  line-height: 1.5;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-status-badge.canvas-artwork {
  border: 1px solid var(--neutral-line) !important;
  background: var(--neutral-panel-soft) !important;
  color: var(--neutral-accent) !important;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector #designPreviewScroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 2px 16px 0;
  border: 0;
  background: transparent !important;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector #designCandidatePanel:empty,
html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector #designStageFooter:empty {
  display: none !important;
}

/* Disclosure summaries share a two-line text block. Inline nested spans
   previously put the title, status and chevron into the same cramped row. */
@layer assistantChrome {
  html:root body #step-edit.design-preview-mode #designPreviewInspector
    :is(.design-candidate-head, .design-control-disclosure > summary) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 16px !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 10px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--neutral-text) !important;
    box-shadow: none !important;
    list-style: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector
    :is(.design-candidate-head, .design-control-disclosure > summary)::-webkit-details-marker {
    display: none !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector
    :is(.design-candidate-head, .design-control-disclosure > summary) > span {
    display: grid !important;
    grid-template-columns: 16px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px !important;
    min-width: 0 !important;
    color: inherit !important;
    font-size: 12px !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector
    :is(.design-candidate-head, .design-control-disclosure > summary) > span > span {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
    min-width: 0 !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector
    :is(.design-candidate-head, .design-control-disclosure > summary) > span > span > strong {
    color: var(--neutral-text) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector
    :is(.design-candidate-head, .design-control-disclosure > summary) > span > span > small {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    color: var(--neutral-muted) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector
    :is(.design-candidate-head, .design-control-disclosure > summary) > :is(svg, i, .fluent-icon-shell),
  html:root body #step-edit.design-preview-mode #designPreviewInspector
    :is(.design-candidate-head, .design-control-disclosure > summary) > span > :is(svg, i, .fluent-icon-shell) {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    color: var(--neutral-muted) !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector
    :is(.design-candidate-head, .design-control-disclosure > summary):hover {
    background: var(--neutral-panel-soft) !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector
    :is(.design-candidate-head, .design-control-disclosure > summary):focus-visible {
    outline: 2px solid var(--neutral-accent) !important;
    outline-offset: -2px !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector #designCandidatePanel,
  html:root body #step-edit.design-preview-mode #designPreviewInspector #designCandidatePanel > .design-candidate-disclosure,
  html:root body #step-edit.design-preview-mode #designPreviewInspector #designRegionDisclosure {
    min-width: 0 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--neutral-line) !important;
    border-radius: 7px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector #designCandidatePanel > .design-candidate-disclosure {
    border: 0 !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-candidate-body {
    min-width: 0 !important;
    max-height: 220px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 0 10px 10px !important;
    background: transparent !important;
  }
  /* Candidate artwork is a thumbnail, never an intrinsic-size image. Keep
     the expanded list bounded so local editing remains in the viewport. */
  html:root body #step-edit.design-preview-mode > .inspector {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    align-self: stretch !important;
    overflow: hidden !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector.design-preview-inspector {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector > header {
    flex: 0 0 auto !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-status-badge {
    border: 1px solid var(--neutral-line) !important;
    background: var(--neutral-panel-soft) !important;
    color: var(--neutral-muted) !important;
    box-shadow: none !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-status-badge:is(.valid, .generating, .canvas-artwork, .pending_confirmation) {
    border-color: var(--neutral-line) !important;
    background: var(--neutral-accent-soft) !important;
    color: var(--neutral-accent) !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector #designPreviewScroll {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overscroll-behavior: contain !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector #designPreviewScroll > * {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-candidate-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-candidate-item {
    display: grid !important;
    align-content: start !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding: 5px !important;
    border: 1px solid var(--neutral-line) !important;
    border-radius: 6px !important;
    background: var(--neutral-panel-soft) !important;
    color: var(--neutral-text) !important;
    box-shadow: none !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-candidate-item.selected {
    border-color: var(--neutral-accent) !important;
    background: var(--neutral-panel-soft) !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-candidate-preview {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 164px !important;
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: var(--neutral-panel) !important;
    color: var(--neutral-text) !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-candidate-preview > :is(img, .design-candidate-empty) {
    position: absolute !important;
    inset: 0 0 42px !important;
    display: block !important;
    width: 100% !important;
    height: calc(100% - 42px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    background: var(--neutral-panel) !important;
    box-shadow: none !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-candidate-preview > .design-candidate-empty {
    display: grid !important;
    place-items: center !important;
    color: var(--neutral-muted) !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-candidate-empty :is(svg, .fluent-icon-shell) {
    width: 20px !important;
    height: 20px !important;
    color: inherit !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-candidate-name {
    position: absolute !important;
    right: 4px !important;
    bottom: 23px !important;
    left: 4px !important;
    overflow: hidden !important;
    color: var(--neutral-text) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 16px !important;
    white-space: nowrap !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-candidate-preview > .copy-validation-badge {
    position: absolute !important;
    right: 4px !important;
    bottom: 3px !important;
    left: 4px !important;
    display: block !important;
    overflow: hidden !important;
    max-width: calc(100% - 8px) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--neutral-muted) !important;
    font-size: 9px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 17px !important;
    white-space: nowrap !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    box-shadow: none !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-candidate-status-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    min-width: 0 !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-validation-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    max-width: 100% !important;
    padding: 1px 4px !important;
    border: 1px solid var(--neutral-line) !important;
    border-radius: 3px !important;
    background: transparent !important;
    color: var(--neutral-muted) !important;
    font-size: 9px !important;
    line-height: 15px !important;
    box-shadow: none !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-validation-chip :is(svg, .fluent-icon-shell) {
    width: 10px !important;
    height: 10px !important;
    flex: 0 0 10px !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-candidate-issue-box {
    min-width: 0 !important;
    max-height: 90px !important;
    overflow: auto !important;
    padding: 5px !important;
    border: 1px solid var(--neutral-line) !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--neutral-muted) !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
    box-shadow: none !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-candidate-issue-box ul {
    margin: 0 !important;
    padding-left: 13px !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-candidate-item-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 26px !important;
    align-items: start !important;
    gap: 4px !important;
    min-width: 0 !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-candidate-item-actions > button {
    min-width: 0 !important;
    height: auto !important;
    min-height: 26px !important;
    padding: 4px !important;
    border: 1px solid var(--neutral-line) !important;
    border-radius: 4px !important;
    background: var(--neutral-panel) !important;
    color: var(--neutral-text) !important;
    font-size: 10px !important;
    line-height: 16px !important;
    white-space: normal !important;
    box-shadow: none !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-candidate-item-actions > button:not(:last-child) {
    grid-column: 1 !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-candidate-item-actions > button:last-child {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-candidate-item-actions .primary-btn {
    border-color: var(--neutral-accent) !important;
    background: var(--neutral-accent) !important;
    color: var(--neutral-accent-text) !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector .design-candidate-item-actions :is(svg, .fluent-icon-shell) {
    width: 14px !important;
    height: 14px !important;
  }
  html:root body #step-edit.design-preview-mode #designPreviewInspector #designRegionDisclosure > .design-region-tools {
    min-width: 0 !important;
    margin: 0 10px 10px !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid var(--neutral-line) !important;
    border-bottom: 0 !important;
    background: transparent !important;
  }
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector #designMoreOperations[hidden] {
  display: none !important;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-region-quick-action,
html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-region-disclosure[aria-disabled="true"] {
  display: none !important;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-smart-operations {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-next-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--neutral-line) !important;
  border-radius: 10px;
  background: var(--neutral-panel-soft) !important;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-next-step-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  background: var(--neutral-accent-soft);
  color: var(--neutral-accent);
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-next-step-icon svg {
  width: 15px;
  height: 15px;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-next-step > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-next-step strong {
  color: var(--neutral-text);
  font-size: 11px;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-next-step p {
  margin: 0;
  color: var(--neutral-muted);
  font-size: 10px;
  line-height: 1.5;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-next-step > button {
  grid-column: 1 / -1;
  display: inline-flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-color: var(--neutral-accent) !important;
  background: var(--neutral-accent) !important;
  background-image: none !important;
  color: #fff !important;
  font-size: 11px;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-ai-command-panel-simple {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--neutral-line) !important;
  border-radius: 10px;
  background: var(--neutral-panel) !important;
  box-shadow: none !important;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-ai-command-panel-simple > header {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  padding: 0 !important;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-ai-command-icon {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 7px;
  background: var(--neutral-accent-soft) !important;
  color: var(--neutral-accent) !important;
  box-shadow: none !important;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-ai-command-panel-simple > header strong {
  color: var(--neutral-text);
  font-size: 11px;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-ai-command-panel-simple > header small {
  color: var(--neutral-muted);
  font-size: 9px;
  line-height: 1.4;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector #designAiPrompt {
  width: 100%;
  min-height: 86px;
  padding: 9px;
  border: 1px solid var(--neutral-line) !important;
  border-radius: 8px;
  background: var(--neutral-panel-soft) !important;
  color: var(--neutral-text) !important;
  font-size: 10px;
  line-height: 1.55;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector #designAiPrompt:focus {
  border-color: var(--neutral-accent) !important;
  box-shadow: 0 0 0 3px var(--neutral-accent-soft) !important;
  outline: 0 !important;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-ai-primary-actions {
  display: block;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-ai-primary-actions > button {
  width: 100%;
  min-height: 35px;
  border-color: var(--neutral-line-strong) !important;
  background: var(--neutral-panel-soft) !important;
  background-image: none !important;
  color: var(--neutral-text) !important;
  font-size: 10px;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-ai-more-actions {
  padding-top: 8px;
  border-top: 1px solid var(--neutral-line);
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-ai-more-actions > summary {
  min-height: 26px;
  border: 0 !important;
  background: var(--neutral-panel) !important;
  color: var(--neutral-muted) !important;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-ai-more-actions > summary:is(:hover, :focus-visible) {
  background: var(--neutral-panel-soft) !important;
  outline-color: var(--neutral-accent);
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-ai-more-actions > summary strong {
  font-size: 10px;
  font-weight: 600;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-ai-more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-ai-more-grid button {
  min-height: 34px;
  padding: 6px 7px;
  border-color: var(--neutral-line) !important;
  background: var(--neutral-panel-soft) !important;
  color: var(--neutral-text) !important;
  font-size: 10px;
  white-space: normal;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-ai-more-grid button:disabled {
  opacity: .45;
}

html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-more-operations {
  border: 1px solid var(--neutral-line) !important;
  background: var(--neutral-panel) !important;
}
html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-more-operations > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  color: var(--neutral-text);
  cursor: pointer;
  list-style: none;
}
html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-more-operations > summary::-webkit-details-marker {
  display: none;
}
html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-more-operations > summary > span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-more-operations > summary > span > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-more-operations > summary strong {
  font-size: 11px;
  line-height: 1.4;
}
html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-more-operations > summary small {
  color: var(--neutral-muted);
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-more-operations > summary :is(svg, .fluent-icon-shell) {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}

html:root[data-theme] body #step-edit.design-preview-mode .design-page-canvas.canvas-artwork-preview {
  background: #fff;
}

html:root[data-theme] body #step-edit.design-preview-mode .design-canvas-artwork-label {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  max-width: calc(100% - 24px);
  padding: 5px 8px;
  border: 1px solid var(--neutral-line);
  border-radius: 6px;
  background: var(--neutral-panel);
  color: var(--neutral-muted);
  font-size: 10px;
  line-height: 1.3;
}

html:root[data-theme] body #step-edit.design-preview-mode .workflow-thumb-state.canvas-artwork {
  background: var(--neutral-accent) !important;
}

html:root[data-theme] body #step-edit.design-preview-mode .design-thumb-select.selected {
  border-color: var(--neutral-accent) !important;
  background: var(--neutral-accent) !important;
  color: #fff !important;
}

html:root[data-theme] body #step-edit.design-preview-mode .page-workflow-thumb.selected-for-design {
  outline-color: var(--neutral-accent) !important;
}

@container (max-width: 220px) {
  html:root[data-theme] body #step-edit.design-preview-mode #designPreviewInspector .design-ai-more-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Style selection is a primary design control, always outside disclosures. */
html:root[data-theme] body #step-edit .design-style-choice {
  display: grid;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--neutral-line) !important;
  border-radius: 9px;
  background: var(--neutral-panel) !important;
  color: var(--neutral-text) !important;
}

html:root[data-theme] body #step-edit .design-style-choice[hidden] {
  display: none !important;
}

#step-edit .style-choice-current {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

#step-edit .style-choice-current > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#step-edit .style-choice-current strong {
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.4;
}

#step-edit .style-choice-current :is(small, span),
#step-edit .style-choice-guidance {
  color: var(--neutral-muted) !important;
  font-size: 10px;
  line-height: 1.5;
}

#step-edit .style-choice-current > div > span {
  color: var(--neutral-accent) !important;
}

#step-edit :is(.style-choice-symbol, .style-choice-thumb) {
  display: grid;
  width: 36px;
  height: 36px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--neutral-line) !important;
  border-radius: 6px;
  background: var(--neutral-panel-soft) !important;
  color: var(--neutral-accent) !important;
}

#step-edit .style-choice-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#step-edit .style-choice-symbol svg { width: 18px; height: 18px; }

#step-edit .style-choice-routes,
#step-edit .style-choice-generation {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}

html:root[data-theme] body #step-edit .design-style-choice button {
  height: auto;
  min-height: 32px;
  padding: 7px 8px;
  border: 1px solid var(--neutral-line) !important;
  border-radius: 6px;
  background: var(--neutral-panel-soft) !important;
  background-image: none !important;
  color: var(--neutral-text) !important;
  box-shadow: none !important;
  font-size: 10px;
  line-height: 1.4;
  white-space: normal;
  cursor: pointer;
}

html:root[data-theme] body #step-edit .design-style-choice button.primary-btn {
  border-color: var(--neutral-accent) !important;
  background: var(--neutral-accent) !important;
  color: var(--neutral-accent-text) !important;
}

html:root[data-theme] body #step-edit .design-style-choice button:is(:hover, :focus-visible):not(:disabled) {
  border-color: var(--neutral-accent) !important;
  outline-color: var(--neutral-accent);
}

html:root[data-theme] body #step-edit .design-style-choice button:disabled {
  opacity: .45;
  cursor: default;
}

#step-edit .style-choice-routes button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}

#step-edit .style-choice-routes strong { font-size: inherit; font-weight: 600; }
#step-edit .style-choice-routes svg { flex: 0 0 14px; width: 14px; height: 14px; }
#step-edit .style-choice-guidance { margin: 0; }

#step-edit #styleChoiceEntry .style-choice-empty {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px dashed var(--neutral-line);
  border-radius: 7px;
  color: var(--neutral-muted);
  background: var(--neutral-panel-soft);
}
#step-edit #styleChoiceEntry .style-choice-empty svg { width: 17px; height: 17px; color: var(--neutral-accent); flex: none; }
#step-edit #styleChoiceEntry .style-choice-empty span { display: grid; gap: 2px; }
#step-edit #styleChoiceEntry .style-choice-empty strong { color: var(--neutral-text); font-size: 12px; font-weight: 650; }
#step-edit #styleChoiceEntry .style-choice-empty small { font-size: 11px; line-height: 1.45; }

html:root[data-theme] body #step-edit .design-style-choice .style-choice-copy-review {
  justify-self: start;
  border: 0 !important;
  padding: 0;
  min-height: 24px;
  background: transparent !important;
  color: var(--neutral-accent) !important;
  text-decoration: underline;
}

html:root[data-theme] body #step-edit #styleChoiceEntry {
  margin-bottom: 18px;
  padding: 16px;
}

#step-edit #styleChoiceEntry .style-choice-current { grid-template-columns: 44px minmax(0, 1fr) auto; }
#step-edit #styleChoiceEntry :is(.style-choice-symbol, .style-choice-thumb) { width: 44px; height: 44px; }
#step-edit #styleChoiceEntry .style-choice-current strong { font-size: 15px; }
#step-edit #styleChoiceEntry :is(.style-choice-current small, .style-choice-current span, .style-choice-guidance) { font-size: 12px; }
html:root[data-theme] body #step-edit #styleChoiceEntry .style-choice-routes button {
  justify-content: flex-start;
  flex-wrap: nowrap;
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}
#step-edit #styleChoiceEntry .style-choice-routes { display: flex; flex-wrap: wrap; gap: 7px; }
#step-edit #styleChoiceEntry .style-choice-routes small { display: none; }
#step-edit #styleChoiceEntry .style-choice-routes button[data-design-style-action="preserve-source"] { margin-left: auto; }
#step-edit #styleChoiceEntry .style-choice-generation { display: flex; flex-wrap: wrap; align-items: center; }
#step-edit #styleChoiceEntry .style-choice-empty { flex: 1 1 100%; }

#step-edit #styleChoiceEntry .style-choice-routes button > span { display: grid; gap: 4px; }
#step-edit #styleChoiceEntry .style-choice-routes small { color: var(--neutral-muted); font-size: 11px; line-height: 1.5; }

#step-edit .design-context-chip { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; min-width: 0; width: 100%; max-width: 100%; padding: 4px 8px; border: 1px solid var(--neutral-line, #e7e1d8); border-radius: 6px; background: var(--neutral-surface-soft, #faf8f4); color: var(--neutral-muted, #6f675d); font-size: 11px; line-height: 1.45; }
#step-edit .design-context-chip svg { width: 13px; height: 13px; color: var(--accent, #a97845); flex: none; }
#step-edit .design-context-chip strong { color: var(--neutral-text, #332e29); font-weight: 650; white-space: nowrap; }
#step-edit .design-context-chip em { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; white-space: normal; text-overflow: clip; font-style: normal; }
html:root[data-theme] body #step-edit #designPreviewInspector .design-context-chip {
  border-color: var(--neutral-line) !important;
  border-radius: 6px !important;
  background: var(--neutral-panel-soft) !important;
  color: var(--neutral-muted) !important;
  box-shadow: none !important;
}

@media (max-width: 680px) {
  #step-edit #styleChoiceEntry .style-choice-routes { grid-auto-flow: row; }
}
.style-sample-result,
.style-reference-settings {
  display: grid;
  gap: 12px;
  margin: 20px 0;
  padding: 18px 0;
  border-block: 1px solid var(--border-color, var(--line));
  background: transparent;
  box-shadow: none;
}
.style-sample-result > header,
.style-reference-settings > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.style-sample-result > header > span,
.style-reference-settings p,
.style-sample-actions p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}
.style-sample-preview {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  box-shadow: none;
}
.style-sample-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
}
.style-sample-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.style-sample-actions p { flex-basis: 100%; }
.style-reference-settings [data-style-library-reference-settings] { display: grid; gap: 12px; }
.style-reference-strength { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.style-reference-strength select { width: auto; }
.manual-design-confirm-dialog {
  width: min(520px, calc(100vw - 40px));
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: var(--panel);
  box-shadow: none;
}
.manual-design-confirm-dialog::backdrop { background: rgb(0 0 0 / 35%); }
.manual-design-confirm-dialog header,
.manual-design-confirm-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.manual-design-confirm-dialog h3 { margin: 0; font-size: 18px; }
.manual-design-confirm-dialog p,
.manual-design-confirm-dialog li { font-size: 13px; line-height: 1.7; color: var(--muted); }
.manual-design-confirm-dialog ul { padding-left: 20px; }
.manual-design-confirm-dialog footer { justify-content: flex-end; margin-top: 24px; }
.manual-design-confirm-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.7; }
.manual-design-confirm-check input { margin-top: 5px; accent-color: var(--accent); }

/* ===== merged from /delivery-stage-clarity.css ===== */
/* The delivery stage is a read-only file handoff. Keep the preview and one
   inspector, and remove editor-only controls from this stage. */
html:root body.workbench-editor-active[data-active-step="edit"] #topbarDeliveryBtn,
html:root body #step-edit.delivery-workflow-mode #editorWorkflowWorkspace,
html:root body #step-edit.delivery-workflow-mode > .editor-top-ribbon,
html:root body #step-edit.delivery-workflow-mode > .editor-tool-rail,
html:root body #step-edit.delivery-workflow-mode > .inspector > :is(.panel-head, .inspector-view-tabs, #copySmartCommandPanel, #designPreviewInspector, #styleStageInspector, #referenceStageInspector, #reviewStageInspector, #editableStageInspector, #inspectorPropertiesView, #copyRepresentativeDock),
html:root body #step-edit.delivery-workflow-mode > .thumb-panel :is(.advanced-page-tabs, .slide-page-actions, #newProjectWorkflowBtn, #regenerateDeckBtn),
html:root body #step-edit.delivery-workflow-mode .office-status-bar > :is(.status-bar-view-tools, .status-bar-zoom),
html:root body #step-edit.delivery-workflow-mode > .editor-panel-resizer {
  display: none !important;
}
html:root body.workbench-editor-active[data-active-step="edit"] #appShell > .topbar .top-actions #topbarDeliveryBtn,
html:root body.workbench-editor-active #appShell #step-edit.delivery-workflow-mode > #leftEditorPanelResizer,
html:root body.workbench-editor-active #appShell #step-edit.delivery-workflow-mode > #rightEditorPanelResizer {
  display: none !important;
}
@layer assistantChrome {
  html:root body.workbench-editor-active[data-active-step="edit"] #appShell > .topbar .top-actions #topbarDeliveryBtn {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  html:root body.workbench-editor-active #appShell #step-edit.editor-layout.delivery-workflow-mode {
    display: grid !important;
    grid-template-columns: clamp(180px, 15vw, 230px) minmax(0, 1fr) clamp(320px, 25vw, 400px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  html:root body.workbench-editor-active #appShell #step-edit.editor-layout.delivery-workflow-mode > .thumb-panel {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  html:root body.workbench-editor-active #appShell #step-edit.editor-layout.delivery-workflow-mode > .canvas-area {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: hidden !important;
  }
  html:root body.workbench-editor-active #appShell #step-edit.editor-layout.delivery-workflow-mode > .inspector {
    position: relative !important;
    z-index: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: hidden !important;
    border-left: 1px solid var(--neutral-line) !important;
    box-shadow: none !important;
  }
}

html:root body #step-edit.delivery-workflow-mode > .thumb-panel > .panel-head {
  min-height: 50px !important;
  margin: 0 0 8px !important;
  padding: 4px 6px 10px !important;
}
html:root body #step-edit.delivery-workflow-mode > .thumb-panel > .panel-head h2 {
  color: var(--neutral-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
html:root body #step-edit.delivery-workflow-mode > .thumb-panel #editorPagesView {
  display: block !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html:root body #step-edit.delivery-workflow-mode > .thumb-panel #thumbnailList {
  height: 100% !important;
  padding: 0 6px 12px 0 !important;
  overflow: auto !important;
}
html:root body #step-edit.delivery-workflow-mode .page-workflow-thumb {
  cursor: pointer !important;
}
html:root body #step-edit.delivery-workflow-mode .delivery-thumb-missing {
  display: grid !important;
  width: 100%;
  height: 100%;
  place-content: center;
  justify-items: center;
  gap: 4px;
  padding: 8px;
  border: 1px dashed var(--neutral-line-strong);
  border-radius: 5px;
  color: var(--neutral-muted) !important;
  background: var(--neutral-panel-soft) !important;
  text-align: center;
}
html:root[data-theme] body #appShell #step-edit.delivery-workflow-mode > .thumb-panel .thumbnail-list > .thumb.page-workflow-thumb > .workflow-thumb-image:has(.delivery-thumb-missing) {
  background: var(--neutral-panel-soft) !important;
  background-color: var(--neutral-panel-soft) !important;
  border-color: var(--neutral-line-strong) !important;
  box-shadow: none !important;
}
html:root body #step-edit.delivery-workflow-mode .delivery-thumb-missing :is(svg, .fluent-icon-shell) { width: 16px; height: 16px; color: var(--neutral-accent) !important; }
html:root body #step-edit.delivery-workflow-mode .delivery-thumb-missing b { color: var(--neutral-text) !important; font-size: 10px; font-weight: 500; line-height: 1.35; }

html:root body #step-edit.delivery-workflow-mode #deliveryStageInspector {
  display: block !important;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 !important;
  overflow: hidden !important;
}
html:root body #step-edit.delivery-workflow-mode #deliveryStageInspector > .delivery-stage-scroll {
  display: flex !important;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
  padding: 16px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
html:root body #step-edit.delivery-workflow-mode #deliveryStageInspector .delivery-stage-scroll > * {
  flex: 0 0 auto;
  min-width: 0;
  order: initial !important;
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-overview {
  padding: 15px 15px 14px;
  border: 1px solid var(--neutral-line);
  border-radius: 12px;
  background: var(--neutral-panel-soft);
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-overview.ready {
  border-color: color-mix(in srgb, var(--neutral-accent) 48%, var(--neutral-line));
  background: var(--neutral-accent-soft);
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-overview.blocked {
  border-color: color-mix(in srgb, #cf9b66 38%, var(--neutral-line));
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--neutral-accent-strong);
  font-size: 11px;
  font-weight: 700;
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-eyebrow svg {
  width: 15px;
  height: 15px;
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-overview h2 {
  margin: 9px 0 4px;
  color: var(--neutral-text);
  font-size: 17px;
  line-height: 1.4;
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-overview p,
html:root body #step-edit.delivery-workflow-mode .delivery-section-hint {
  margin: 0;
  color: var(--neutral-muted);
  font-size: 12px;
  line-height: 1.55;
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-scroll > .workflow-panel-section {
  display: block;
  margin: 0 !important;
  padding: 0 0 13px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--neutral-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-scroll > .workflow-panel-section > header {
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-scroll > .workflow-panel-section > header > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--neutral-text);
  font-size: 13px;
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-scroll > .workflow-panel-section > header svg {
  width: 15px;
  height: 15px;
  color: var(--neutral-accent);
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-scroll > .workflow-panel-section > header em {
  color: var(--neutral-muted);
  font-size: 10px;
  font-style: normal;
  text-align: right;
}
html:root body #step-edit.delivery-workflow-mode .delivery-readiness-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 11px;
}
html:root body #step-edit.delivery-workflow-mode .delivery-readiness-metrics > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 6px;
  border: 1px solid var(--neutral-line);
  border-radius: 8px;
  background: var(--neutral-panel-soft);
  text-align: center;
}
html:root body #step-edit.delivery-workflow-mode .delivery-readiness-metrics b {
  color: var(--neutral-text);
  font-size: 15px;
}
html:root body #step-edit.delivery-workflow-mode .delivery-readiness-metrics small {
  color: var(--neutral-muted);
  font-size: 10px;
  line-height: 1.3;
}
html:root body #step-edit.delivery-workflow-mode .delivery-section-hint {
  margin: 0 0 10px;
}
html:root body #step-edit.delivery-workflow-mode .delivery-primary-exports {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-scroll :is(.delivery-prepare-action, .delivery-primary-exports > button) {
  min-height: 38px;
  min-width: 0;
  margin: 0 !important;
  font-size: 11px;
  white-space: normal;
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-scroll :is(.delivery-prepare-action, .delivery-primary-exports > button) svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-scroll .primary-btn:not(:disabled) {
  border-color: var(--neutral-accent) !important;
  background: var(--neutral-accent) !important;
  color: var(--neutral-accent-text) !important;
  box-shadow: none !important;
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-scroll .primary-btn:hover:not(:disabled) {
  border-color: var(--neutral-accent-strong) !important;
  background: var(--neutral-accent-strong) !important;
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-scroll .primary-btn:disabled,
html:root body #step-edit.delivery-workflow-mode .delivery-stage-scroll .ghost-btn:disabled {
  opacity: .5;
  box-shadow: none !important;
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-scroll > details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 2px 0;
  cursor: pointer;
  list-style: none;
  color: var(--neutral-text);
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-scroll > details > summary::-webkit-details-marker { display: none; }
html:root body #step-edit.delivery-workflow-mode .delivery-stage-scroll > details > summary span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 650;
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-scroll > details > summary svg {
  width: 15px;
  height: 15px;
  color: var(--neutral-accent);
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-scroll > details[open] > summary > svg { transform: rotate(180deg); }
html:root body #step-edit.delivery-workflow-mode .delivery-more-formats > .reference-delivery-export-grid,
html:root body #step-edit.delivery-workflow-mode .delivery-more-tools-body {
  display: grid;
  gap: 7px;
  padding-top: 7px;
}
html:root body #step-edit.delivery-workflow-mode .delivery-more-formats .delivery-single-page-export {
  margin-top: 8px;
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-footer {
  display: flex;
  gap: 7px;
  margin-top: auto;
  padding: 6px 0 0;
}
html:root body #step-edit.delivery-workflow-mode .delivery-stage-footer > button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 34px;
  font-size: 11px;
}
html:root body #step-edit.delivery-workflow-mode .delivery-workflow-canvas {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff !important;
}
html:root body #step-edit.delivery-workflow-mode .delivery-workflow-slide {
  width: 100%;
  height: 100%;
  background: #fff !important;
}

@media (max-width: 1023.98px) {
  html:root body #step-edit.delivery-workflow-mode > .inspector {
    overflow: hidden !important;
  }
  html:root body #step-edit.delivery-workflow-mode #deliveryStageInspector > .delivery-stage-scroll {
    padding: 12px !important;
  }
}

/* Delivery guidance: keep the next action and metric meaning visible without adding another control. */
html:root body #step-edit.delivery-workflow-mode .delivery-stage-next-step {
  display: block;
  margin-top: 9px;
  color: var(--neutral-accent-strong);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
}
html:root body #step-edit.delivery-workflow-mode .delivery-readiness-metrics > span {
  min-height: 68px;
  align-content: center;
}
html:root body #step-edit.delivery-workflow-mode .delivery-readiness-metrics > span em {
  color: var(--neutral-muted);
  font-size: 9px;
  font-style: normal;
  line-height: 1.3;
}

/* ===== merged from /review-stage-clarity.css ===== */
/* The check step is a read-only comparison surface. Keep the page list, both
   snapshots and the check controls; the editor ribbon and property tools are
   for modifying slides in the editable step. */
@media (min-width: 1024px) {
  html:root body #appShell #step-edit.editor-layout.review-workflow-mode {
    display: grid !important;
    grid-template-columns: clamp(220px, 18vw, 280px) minmax(0, 1fr) clamp(320px, 26vw, 400px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  html:root body #appShell #step-edit.review-workflow-mode > .thumb-panel {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  html:root body #appShell #step-edit.review-workflow-mode > .canvas-area {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  html:root body #appShell #step-edit.review-workflow-mode > .inspector {
    display: flex !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}

html:root body #appShell #step-edit.review-workflow-mode > :is(.editor-top-ribbon, #editorToolRail, #editorWorkflowWorkspace),
html:root body #appShell #step-edit.review-workflow-mode > .inspector > .panel-head,
html:root body #appShell #step-edit.review-workflow-mode > .inspector > :not(.panel-head):not(#reviewStageInspector) {
  display: none !important;
}
html:root body #appShell #step-edit.review-workflow-mode > .thumb-panel > .editor-left-tabs,
html:root body #appShell #step-edit.review-workflow-mode > .thumb-panel #editorPagesView .thumb-panel-actions,
html:root body #appShell #step-edit.review-workflow-mode > .thumb-panel .panel-head > :is(#newProjectWorkflowBtn, #regenerateDeckBtn) {
  display: none !important;
}

html:root body #appShell #step-edit.review-workflow-mode .office-ruler,
html:root body #appShell #step-edit.review-workflow-mode .office-status-bar .status-bar-view-tools,
html:root body #appShell #step-edit.review-workflow-mode .office-status-bar .status-bar-zoom,
html:root body #appShell #step-edit.review-workflow-mode #editorSelectionStatus {
  display: none !important;
}

html:root body #appShell #step-edit.review-workflow-mode .office-canvas-shell {
  min-width: 0 !important;
  min-height: 0 !important;
  grid-template-rows: minmax(0, 1fr) 40px !important;
  border-radius: 0 !important;
}
html:root body #appShell #step-edit.review-workflow-mode .office-canvas-body {
  min-width: 0 !important;
  min-height: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
}
html:root body #appShell #step-edit.review-workflow-mode .slide-stage {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: clamp(12px, 1.5vw, 24px) !important;
  overflow: hidden !important;
  background: var(--neutral-bg, #1f1f1e) !important;
}
html:root body #appShell #step-edit.review-workflow-mode .slide-pasteboard {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html:root body #appShell #step-edit.review-workflow-mode .slide-pasteboard::after { display: none !important; }
html:root body #appShell #step-edit.review-workflow-mode #slideCanvas.slide-canvas {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html:root body #appShell #step-edit.review-workflow-mode .review-dual-workspace {
  display: grid !important;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  overflow: hidden;
  color: var(--neutral-text);
  background: transparent !important;
}
:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .slide-stage,
:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode #slideCanvas.slide-canvas { background: #181818 !important; }
html:root body #appShell #step-edit.review-workflow-mode .review-dual-toolbar {
  display: flex;
  min-width: 0;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--neutral-line);
  border-radius: 10px;
  background: var(--neutral-panel);
}
html:root body #appShell #step-edit.review-workflow-mode .review-dual-title { display: grid; min-width: 0; gap: 3px; }
html:root body #appShell #step-edit.review-workflow-mode .review-dual-title strong {
  overflow: hidden;
  color: var(--neutral-text);
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:root body #appShell #step-edit.review-workflow-mode .review-dual-title small {
  color: var(--neutral-muted);
  font-size: 11px;
  line-height: 1.4;
}
html:root body #appShell #step-edit.review-workflow-mode .review-dual-toolbar-actions,
html:root body #appShell #step-edit.review-workflow-mode .review-dual-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
html:root body #appShell #step-edit.review-workflow-mode .review-snapshot-badge,
html:root body #appShell #step-edit.review-workflow-mode .review-sync-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--neutral-line);
  border-radius: 7px;
  color: var(--neutral-muted);
  background: var(--neutral-panel-soft);
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}
html:root body #appShell #step-edit.review-workflow-mode :is(.review-snapshot-badge, .review-sync-note) svg { width: 14px; height: 14px; color: var(--neutral-accent); }
html:root body #appShell #step-edit.review-workflow-mode .review-zoom-controls {
  display: grid;
  grid-template-columns: 32px 50px 32px 34px;
  height: 32px;
  overflow: hidden;
  border: 1px solid var(--neutral-line-strong);
  border-radius: 7px;
  background: var(--neutral-panel);
}
html:root body #appShell #step-edit.review-workflow-mode .review-zoom-controls :is(button, output) {
  display: grid;
  min-width: 0;
  width: auto;
  height: 30px;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--neutral-text);
  background: transparent;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
html:root body #appShell #step-edit.review-workflow-mode .review-zoom-controls button:hover { color: var(--neutral-accent); background: var(--neutral-accent-soft); }
html:root body #appShell #step-edit.review-workflow-mode .review-zoom-controls :is(output, .review-fit-control) { border-left: 1px solid var(--neutral-line); }
html:root body #appShell #step-edit.review-workflow-mode .review-zoom-controls svg { width: 15px; height: 15px; }
html:root body #appShell #step-edit.review-workflow-mode .review-dual-canvases {
  display: grid !important;
  min-width: 0;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  overflow: hidden;
}
html:root body #appShell #step-edit.review-workflow-mode .review-canvas-pane {
  display: grid !important;
  min-width: 0;
  min-height: 0;
  container-type: size;
  grid-template-rows: 38px minmax(0, 1fr);
  justify-items: center;
  align-items: start;
  overflow: hidden;
  background: transparent;
}
html:root body #appShell #step-edit.review-workflow-mode .review-canvas-pane-head {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 3px;
  color: var(--neutral-text);
  font-size: 12px;
}
html:root body #appShell #step-edit.review-workflow-mode .review-canvas-pane-head > span { display: inline-flex; min-width: 0; align-items: center; gap: 6px; }
html:root body #appShell #step-edit.review-workflow-mode .review-canvas-pane-head svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--neutral-accent); }
html:root body #appShell #step-edit.review-workflow-mode .review-canvas-pane-head :is(b, em) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:root body #appShell #step-edit.review-workflow-mode .review-canvas-pane-head em { color: var(--neutral-muted); font-size: 11px; font-style: normal; }
html:root body #appShell #step-edit.review-workflow-mode .review-canvas-stage {
  position: relative;
  display: grid;
  box-sizing: border-box;
  width: min(100cqw, calc((100cqh - 38px) * var(--review-canvas-aspect-number)));
  max-width: 100%;
  aspect-ratio: var(--review-canvas-aspect);
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--neutral-line-strong);
  background: var(--neutral-panel);
  box-shadow: none;
  overscroll-behavior: contain;
}
html:root body #appShell #step-edit.review-workflow-mode .review-canvas-stage > .review-canvas-document {
  position: relative;
  display: grid;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}
html:root body #appShell #step-edit.review-workflow-mode .review-canvas-stage > .review-canvas-document > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
html:root body #appShell #step-edit.review-workflow-mode .review-canvas-stage > .review-canvas-document.review-workflow-empty {
  place-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--neutral-muted);
  background: var(--neutral-panel-soft) !important;
  text-align: center;
}
html:root body #appShell #step-edit.review-workflow-mode .review-canvas-stage > .review-canvas-document.review-workflow-empty strong { color: var(--neutral-text); font-size: 15px; }
html:root body #appShell #step-edit.review-workflow-mode .review-canvas-stage > .review-canvas-document.review-workflow-empty span { font-size: 12px; line-height: 1.5; }
html:root body #appShell #step-edit.review-workflow-mode .review-canvas-stage > .review-canvas-document > img { margin: 0 !important; }
html:root body #appShell #step-edit.review-workflow-mode .review-selected-issue {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, #c97536 34%, var(--neutral-line));
  border-radius: 8px;
  color: var(--neutral-text);
  background: var(--neutral-panel-soft);
  font-size: 12px;
}
html:root body #appShell #step-edit.review-workflow-mode .review-selected-issue span { color: var(--neutral-muted); }

/* The right rail is a short task sequence: state, action, findings, next step. */
html:root body #appShell #step-edit.review-workflow-mode #reviewStageInspector {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
html:root body #appShell #step-edit.review-workflow-mode .review-stage-scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px;
}
html:root body #appShell #step-edit.review-workflow-mode .review-stage-scroll > * { flex: 0 0 auto; order: 0; min-width: 0; }
html:root body #appShell #step-edit.review-workflow-mode .review-stage-scroll > .review-next-actions { position: sticky; bottom: -16px; z-index: 2; margin-top: auto; padding: 12px 0 0; background: var(--neutral-panel); }
html:root body #appShell #step-edit.review-workflow-mode .review-stage-scroll > .workflow-status-head { display: none !important; }
html:root body #appShell #step-edit.review-workflow-mode .review-stage-scroll :is(.review-page-status, .review-ai-check, .review-issues-panel, .review-selected-detail, .review-advanced-command) {
  display: grid;
  gap: 10px;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid var(--neutral-line);
  border-radius: 9px;
  background: var(--neutral-panel) !important;
}
html:root body #appShell #step-edit.review-workflow-mode .review-stage-scroll :is(.review-page-status, .review-ai-check, .review-issues-panel, .review-selected-detail) > header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 8px; }
html:root body #appShell #step-edit.review-workflow-mode .review-stage-scroll :is(.review-page-status, .review-ai-check, .review-issues-panel, .review-selected-detail) > header > span { display: inline-flex; min-width: 0; align-items: flex-start; gap: 7px; }
html:root body #appShell #step-edit.review-workflow-mode .review-stage-scroll :is(.review-page-status, .review-ai-check, .review-issues-panel, .review-selected-detail) > header svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--neutral-accent); }
html:root body #appShell #step-edit.review-workflow-mode .review-stage-scroll :is(.review-page-status, .review-ai-check, .review-issues-panel, .review-selected-detail) > header strong { color: var(--neutral-text); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
html:root body #appShell #step-edit.review-workflow-mode .review-stage-scroll :is(.review-page-status, .review-ai-check, .review-issues-panel, .review-selected-detail) > header em { flex: 0 0 auto; color: var(--neutral-muted); font-size: 11px; font-style: normal; }
html:root body #appShell #step-edit.review-workflow-mode .review-page-status .workflow-module-status-list { display: grid; gap: 0; }
html:root body #appShell #step-edit.review-workflow-mode .review-page-status .workflow-module-status-list > span { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid var(--neutral-line); color: var(--neutral-muted); font-size: 11px; }
html:root body #appShell #step-edit.review-workflow-mode .review-page-status .workflow-module-status-list svg { display: none; }
html:root body #appShell #step-edit.review-workflow-mode .review-page-status .workflow-module-status-list b { font-weight: 500; }
html:root body #appShell #step-edit.review-workflow-mode .review-page-status .workflow-module-status-list em { color: var(--neutral-text); font-style: normal; text-align: right; }
html:root body #appShell #step-edit.review-workflow-mode .review-page-status .workflow-module-status-list > span:nth-child(2) { display: none; }
html:root body #appShell #step-edit.review-workflow-mode .review-page-status > header > span { flex: 1 1 auto; }
html:root body #appShell #step-edit.review-workflow-mode .review-page-status > header strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
html:root body #appShell #step-edit.review-workflow-mode .review-ai-check > p { margin: 0; color: var(--neutral-muted); font-size: 11px; line-height: 1.5; }
html:root body #appShell #step-edit.review-workflow-mode .review-result-callout { display: flex; gap: 9px; align-items: flex-start; padding: 10px; border-radius: 7px; background: var(--neutral-panel-soft); color: var(--neutral-text); }
html:root body #appShell #step-edit.review-workflow-mode .review-result-callout > svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--neutral-accent); }
html:root body #appShell #step-edit.review-workflow-mode .review-result-callout span { display: grid; gap: 3px; }
html:root body #appShell #step-edit.review-workflow-mode .review-result-callout strong { font-size: 12px; }
html:root body #appShell #step-edit.review-workflow-mode .review-result-callout small,
html:root body #appShell #step-edit.review-workflow-mode .review-action-reason { color: var(--neutral-muted); font-size: 11px; line-height: 1.45; }
html:root body #appShell #step-edit.review-workflow-mode .review-issue-row.info { border-left-color: var(--neutral-accent); }
html:root body #appShell #step-edit.review-workflow-mode .review-issue-row.selected { box-shadow: 0 0 0 2px var(--neutral-accent-soft); }
html:root body #appShell #step-edit.review-workflow-mode .review-issue-row.info .review-issue-row-main > b { background: var(--neutral-accent); }
html:root body #appShell #step-edit.review-workflow-mode .review-issue-row-main :is(strong, small, em) { font-size: 11px; line-height: 1.4; }
html:root body #appShell #step-edit.review-workflow-mode .review-advanced-command > summary { display: flex; align-items: center; gap: 7px; color: var(--neutral-text); font-size: 12px; font-weight: 650; cursor: pointer; }
html:root body #appShell #step-edit.review-workflow-mode .review-advanced-command:not([open]) { display: block; }
html:root body #appShell #step-edit.review-workflow-mode .review-advanced-command > summary::marker { color: var(--neutral-accent); }
html:root body #appShell #step-edit.review-workflow-mode .review-advanced-command .workflow-smart-command { margin-top: 12px; }
html:root body #appShell #step-edit.review-workflow-mode .review-advanced-command .workflow-smart-command > header { display: none; }
html:root body #appShell #step-edit.review-workflow-mode .review-next-actions .reference-review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html:root body #appShell #step-edit.review-workflow-mode .review-next-actions button { min-width: 0; min-height: 36px; font-size: 11px; }
html:root body #appShell #step-edit.review-workflow-mode .review-status-pill { padding: 4px 7px; border-radius: 6px; color: var(--neutral-text); background: var(--neutral-panel-soft); font-size: 11px; }
html:root body #appShell #step-edit.review-workflow-mode .review-status-pill.warning { color: var(--neutral-accent); background: var(--neutral-accent-soft); }
html:root body #appShell #step-edit.review-workflow-mode .review-issue-marker.info { border-color: var(--neutral-accent); background: var(--neutral-accent-soft); }
html:root body #appShell #step-edit.review-workflow-mode .review-issue-marker.info b { background: var(--neutral-accent); }
html:root body #appShell #step-edit.review-workflow-mode .review-page-preview { position: relative; display: block; width: 100%; height: 100%; min-height: 0; overflow: hidden; border-radius: 5px; background: var(--neutral-panel-soft); pointer-events: none; }
html:root body #appShell #step-edit.review-workflow-mode .review-page-preview-pair { display: grid; box-sizing: border-box; width: 100%; height: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; }
html:root body #appShell #step-edit.review-workflow-mode .review-page-preview-pair figure { position: relative; display: grid; min-width: 0; height: 100%; place-items: center; overflow: hidden; margin: 0; border: 1px solid var(--neutral-line); background: #fff; }
html:root body #appShell #step-edit.review-workflow-mode .review-page-preview-pair figure > :is(img, span) { display: grid; box-sizing: border-box; width: 100%; height: 100%; place-content: center; overflow: hidden; background: var(--neutral-panel-soft); }
html:root body #appShell #step-edit.review-workflow-mode .review-page-preview-pair figure > img { object-fit: contain; background: #fff; }
html:root body #appShell #step-edit.review-workflow-mode .review-page-preview-pair .review-page-preview-empty { color: var(--neutral-muted); text-align: center; }
html:root body #appShell #step-edit.review-workflow-mode .review-page-preview-pair .review-page-preview-empty svg { display: none; }
html:root body #appShell #step-edit.review-workflow-mode .review-page-preview-pair .review-page-preview-empty b { padding: 3px; font-size: 9px; font-weight: 500; line-height: 1.25; }
html:root body #appShell #step-edit.review-workflow-mode .review-page-preview-pair figure > em { position: absolute; top: 2px; left: 2px; padding: 1px 3px; border-radius: 3px; color: #fff; background: rgb(30 30 30 / 75%); font-size: 8px; font-style: normal; }
html:root body #appShell #step-edit.review-workflow-mode .review-page-preview > small { position: absolute; right: 3px; bottom: 3px; padding: 2px 4px; border-radius: 3px; color: #fff; background: rgb(30 30 30 / 75%); font-size: 8px; }
html:root body #appShell #step-edit.review-workflow-mode .workflow-thumb.selected,
html:root body #appShell #step-edit.review-workflow-mode .workflow-thumb.active,
html:root body #appShell #step-edit.review-workflow-mode .thumbnail-item.selected { border-color: var(--neutral-accent) !important; outline-color: var(--neutral-accent) !important; box-shadow: 0 0 0 2px var(--neutral-accent-soft) !important; }
html:root body #appShell #step-edit.review-workflow-mode .review-issue-marker.selected { box-shadow: 0 0 0 2px var(--neutral-accent-soft) !important; }
html:root body #appShell #step-edit.review-workflow-mode .review-issue-marker [data-review-resize-handle] { background: var(--neutral-accent) !important; }

/* The older dark sheet uses literal blue on check-only chrome. */
:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .review-zoom-controls button:hover { color: var(--neutral-accent) !important; background: var(--neutral-accent-soft) !important; }
:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .review-canvas-pane-head svg,
:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .review-sync-note svg { color: var(--neutral-accent) !important; }
:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .review-canvas-stage > .review-workflow-empty { background: var(--neutral-panel-soft) !important; }
:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .review-result-callout { color: var(--neutral-text) !important; background: var(--neutral-panel-soft) !important; }
:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .review-result-callout :is(strong, small) { color: var(--neutral-text) !important; }
:root[data-theme="dark"] body #appShell #step-edit.review-workflow-mode .review-advanced-command > summary { color: var(--neutral-text) !important; }

@media (max-width: 1279px) {
  html:root body #appShell #step-edit.review-workflow-mode .review-dual-toolbar { align-items: flex-start; flex-wrap: wrap; }
  html:root body #appShell #step-edit.review-workflow-mode .review-dual-toolbar-actions { width: 100%; justify-content: space-between; }
  html:root body #appShell #step-edit.review-workflow-mode .review-dual-canvases { gap: 10px; }
  html:root body #appShell #step-edit.review-workflow-mode .review-sync-note { display: none; }
}
@media (max-width: 1023px) {
  html:root body #appShell #step-edit.review-workflow-mode .slide-stage { overflow: auto !important; }
  html:root body #appShell #step-edit.review-workflow-mode .review-dual-workspace { min-height: 0; }
  html:root body #appShell #step-edit.review-workflow-mode .review-dual-canvases { overflow: auto; }
}
@media (max-width: 680px) {
  html:root body #appShell #step-edit.review-workflow-mode .review-dual-canvases { grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(300px, 1fr)); }
  html:root body #appShell #step-edit.review-workflow-mode .review-canvas-pane { min-height: 300px; }
  html:root body #appShell #step-edit.review-workflow-mode .review-dual-title small { display: none; }
}

/* ===== merged from /editable-stage-clarity.css ===== */
/* Online editing keeps the page status compact and gives selected-object
   properties the first position in the scrolling editing area. */
html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit.editor-layout:is(.editable-canvas-mode, .copy-canvas-mode) > .inspector {
  flex-direction: column !important;
  align-content: stretch !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
/* Match the shared editor drawer state before applying the flex layout. */
@media (min-width: 1024px) {
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit.editor-layout:is(.editable-canvas-mode, .copy-canvas-mode):not(.right-panel-collapsed):not(.workflow-panel-open) > .inspector:not(.hidden) {
    display: flex !important;
  }
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit.editor-layout:is(.editable-canvas-mode, .copy-canvas-mode).right-panel-collapsed > .inspector {
    display: none !important;
  }
}
@media (max-width: 1023px) {
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit.editor-layout:is(.editable-canvas-mode, .copy-canvas-mode):not([data-editor-narrow-panel="right"]) > .inspector {
    display: none !important;
  }
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit.editor-layout:is(.editable-canvas-mode, .copy-canvas-mode)[data-editor-narrow-panel="right"] > .inspector:not(.hidden) {
    display: flex !important;
  }
}
html:root body.workbench-editor-active #step-edit:is(.editable-canvas-mode, .copy-canvas-mode) > .inspector > .panel-head {
  position: static !important;
  flex: 0 0 auto;
}
html:root body.workbench-editor-active #step-edit.editable-canvas-mode #editableStageInspector:not(.hidden) {
  display: block !important;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: min(42vh, 330px);
  margin: 0 !important;
  padding: 12px !important;
  overflow: hidden auto !important;
  border-bottom: 1px solid var(--neutral-line);
  scrollbar-gutter: stable;
}
html:root body #step-edit.editable-canvas-mode .editable-canvas-inspector {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 9px;
  width: 100%;
  min-width: 0;
  padding: 0 !important;
}
html:root body #step-edit.editable-canvas-mode .editable-canvas-status {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100%;
  min-width: 0;
  padding: 0 !important;
}
html:root body #step-edit.editable-canvas-mode .editable-canvas-status-icon {
  display: none !important;
}
html:root body #step-edit.editable-canvas-mode .editable-canvas-status > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 5px;
  width: 100% !important;
  min-width: 0 !important;
}
html:root body #step-edit.editable-canvas-mode .editable-canvas-status :is(strong, small, em) {
  min-width: 0;
  max-width: none !important;
  margin: 0;
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-overflow: clip !important;
}
html:root body #step-edit.editable-canvas-mode .editable-canvas-status strong {
  display: block !important;
  color: var(--neutral-text) !important;
  font-size: 13px;
  line-height: 1.45;
}
html:root body #step-edit.editable-canvas-mode .editable-canvas-status small {
  color: var(--neutral-muted) !important;
  font-size: 11px;
  line-height: 1.5;
}
html:root body #step-edit.editable-canvas-mode .editable-canvas-status em {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  color: var(--neutral-accent) !important;
  font-size: 10px;
  font-style: normal;
  line-height: 1.5;
}
html:root body #step-edit.editable-canvas-mode :is(.editable-canvas-status em, .editable-canvas-review-confirmed, .editable-canvas-review-error) :is(svg, .fluent-icon-shell) {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
}
html:root body #step-edit.editable-canvas-mode .editable-layer-inventory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
  padding: 0 !important;
}
html:root body #step-edit.editable-canvas-mode .editable-layer-inventory > span {
  min-width: 0;
  min-height: 24px;
  padding: 3px 6px;
  border-color: var(--neutral-line) !important;
  background: var(--neutral-panel-soft) !important;
  color: var(--neutral-text) !important;
}
html:root body #step-edit.editable-canvas-mode .editable-layer-inventory :is(b, em) {
  font-size: 10px;
}
html:root body #step-edit.editable-canvas-mode .editable-layer-inventory em {
  margin-left: auto;
  color: var(--neutral-muted) !important;
}
html:root body #step-edit.editable-canvas-mode .editable-canvas-review-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px;
  min-width: 0;
}
html:root body #step-edit.editable-canvas-mode .editable-canvas-review-actions > button {
  justify-content: center;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px;
  height: auto !important;
  margin: 0 !important;
  padding: 7px 9px;
  white-space: normal !important;
  font-size: 11px;
  line-height: 1.4;
}
html:root body #step-edit.editable-canvas-mode .editable-canvas-review-actions > button > span {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
html:root body #step-edit.editable-canvas-mode .editable-canvas-review-confirmed {
  display: flex;
  gap: 5px;
  align-items: flex-start;
  margin: 0;
  color: var(--neutral-accent) !important;
  font-size: 10px;
  line-height: 1.5;
}
html:root body #step-edit.editable-canvas-mode .editable-canvas-review-error {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--neutral-line-strong);
  border-radius: 7px;
  color: var(--neutral-text);
  background: var(--neutral-panel-soft);
}
html:root body #step-edit.editable-canvas-mode .editable-canvas-review-error > span {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: 11px;
  line-height: 1.45;
}
html:root body #step-edit :is(#editableStageInspector, #copySmartCommandPanel) .editable-ai-details {
  margin-top: 10px;
  padding-top: 9px;
  border: 0;
  border-top: 1px solid var(--neutral-line);
  background: transparent;
}
html:root body #step-edit :is(#editableStageInspector, #copySmartCommandPanel) .editable-ai-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  cursor: pointer;
  list-style: none;
  color: var(--neutral-text);
  font-size: 11px;
}
html:root body #step-edit :is(#editableStageInspector, #copySmartCommandPanel) .editable-ai-details > summary::-webkit-details-marker { display: none; }
html:root body #step-edit :is(#editableStageInspector, #copySmartCommandPanel) .editable-ai-details > summary > span {
  display: flex;
  align-items: center;
  gap: 6px;
}
html:root body #step-edit :is(#editableStageInspector, #copySmartCommandPanel) .editable-ai-details > summary :is(svg, .fluent-icon-shell) {
  width: 14px;
  height: 14px;
  color: var(--neutral-accent);
}
html:root body #step-edit :is(#editableStageInspector, #copySmartCommandPanel) .editable-ai-details[open] > summary > :is(svg, .fluent-icon-shell) { transform: rotate(180deg); }
html:root body #step-edit :is(#editableStageInspector, #copySmartCommandPanel) .editable-ai-details > .workflow-smart-command {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--neutral-line);
  border-radius: 7px;
  color: var(--neutral-text);
  background: var(--neutral-panel-soft) !important;
}
html:root body #step-edit :is(#editableStageInspector, #copySmartCommandPanel) .editable-ai-details .workflow-smart-command > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}
html:root body #step-edit :is(#editableStageInspector, #copySmartCommandPanel) .editable-ai-details .workflow-smart-command-heading {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
html:root body #step-edit :is(#editableStageInspector, #copySmartCommandPanel) .editable-ai-details .workflow-smart-command-heading > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  font-size: 11px;
}
html:root body #step-edit :is(#editableStageInspector, #copySmartCommandPanel) .editable-ai-details .workflow-smart-command :is(svg, .fluent-icon-shell) {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
html:root body #step-edit :is(#editableStageInspector, #copySmartCommandPanel) .editable-ai-details .workflow-smart-command :is(small, em) {
  color: var(--neutral-muted);
  font-size: 10px;
  font-style: normal;
  line-height: 1.45;
}
html:root body #step-edit :is(#editableStageInspector, #copySmartCommandPanel) .editable-ai-details textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 74px;
  max-height: 180px;
  padding: 8px;
  resize: vertical;
  border-color: var(--neutral-line-strong) !important;
  color: var(--neutral-text) !important;
  background: var(--neutral-panel) !important;
  font-size: 11px;
}
html:root body #step-edit :is(#editableStageInspector, #copySmartCommandPanel) .editable-ai-details .workflow-smart-command-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
html:root body #step-edit :is(#editableStageInspector, #copySmartCommandPanel) .editable-ai-details .workflow-smart-command-actions > button {
  min-width: 0;
  min-height: 32px;
  padding: 5px 7px;
  white-space: normal;
  font-size: 10px;
}
html:root body #step-edit :is(#editableStageInspector, #copySmartCommandPanel) .editable-ai-details .workflow-smart-command-actions > .primary-btn { grid-column: 1 / -1; }
html:root body.workbench-editor-active #step-edit #editableStageInspector :is(.editable-canvas-review-action, .editable-one-click-primary, .workflow-smart-command-actions .primary-btn) {
  color: var(--neutral-accent-text) !important;
  background: var(--neutral-accent) !important;
  background-image: none !important;
  border-color: var(--neutral-accent) !important;
  box-shadow: none !important;
}
html:root body.workbench-editor-active #step-edit #editableStageInspector :is(.editable-canvas-review-action, .editable-one-click-primary, .workflow-smart-command-actions .primary-btn):is(:hover, :focus-visible):not(:disabled) {
  color: var(--neutral-accent-text) !important;
  background: var(--neutral-accent-strong) !important;
  border-color: var(--neutral-accent-strong) !important;
}
html:root body.workbench-editor-active #step-edit:is(.editable-canvas-mode, .copy-canvas-mode) #inspectorPropertiesView:not(.hidden) {
  display: flex !important;
  flex: 1 1 0;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 12px !important;
  overflow: hidden auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
html:root body #step-edit:is(.editable-canvas-mode, .copy-canvas-mode) #inspectorPropertiesView > * { flex: 0 0 auto; min-width: 0; }
html:root body #step-edit:is(.editable-canvas-mode, .copy-canvas-mode) #inspectorPropertiesView > #inspectorBody {
  order: -1;
  margin: 0 !important;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--neutral-line);
}
html:root body #step-edit:is(.editable-canvas-mode, .copy-canvas-mode) #inspectorPropertiesView > #inspectorBody.empty-state {
  min-height: 34px;
  padding: 8px 0 12px;
  color: var(--neutral-muted);
  font-size: 12px;
}
html:root body #step-edit:is(.editable-canvas-mode, .copy-canvas-mode) #inspectorPropertiesView > #layerListView {
  max-height: 220px;
  overflow: hidden auto;
  border-top: 1px solid var(--neutral-line);
}
html:root body.workbench-editor-active #step-edit.copy-canvas-mode #copySmartCommandPanel:not(.hidden) {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 100%;
  max-height: min(38vh, 300px);
  min-height: 0;
  margin: 0 !important;
  padding: 0 12px 8px !important;
  overflow: hidden auto !important;
  border-bottom: 1px solid var(--neutral-line);
}
html:root body.workbench-editor-active #step-edit > .thumb-panel > .panel-head {
  gap: 6px !important;
}
html:root body.workbench-editor-active #step-edit > .thumb-panel > .panel-head h2 {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 0;
}
html:root body.workbench-editor-active #step-edit > .thumb-panel > .panel-head :is(#newProjectWorkflowBtn, #regenerateDeckBtn) {
  box-sizing: border-box;
  flex: 0 0 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  align-items: center;
  justify-content: center;
  border-color: var(--neutral-line) !important;
  color: var(--neutral-muted) !important;
  background: var(--neutral-panel-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html:root body.workbench-editor-active #step-edit > .thumb-panel > .panel-head :is(#newProjectWorkflowBtn, #regenerateDeckBtn) :is(svg, .fluent-icon-shell) {
  width: 15px !important;
  height: 15px !important;
  color: inherit !important;
}
@media (max-height: 680px) {
  html:root body.workbench-editor-active #step-edit.editable-canvas-mode #editableStageInspector:not(.hidden) { max-height: 40vh; }
}

/* ==== consolidated from /workflow-graph.css (cascade order preserved) ==== */
/* The independent flow workspace shares the product theme and owns its
 * geometry. Node positions match WORKFLOW_GRAPH_WORLD in the editor. */
html:root body[data-active-step="flow"] #appShell.app-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 56px 38px minmax(0, 1fr) !important;
  grid-template-areas: "topbar" "document-tabs" "workspace" !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}
html:root body[data-active-step="flow"] #appShell > .topbar { display: flex !important; grid-area: topbar !important; grid-column: 1 !important; grid-row: 1 !important; }
html:root body[data-active-step="flow"] #appShell > #documentTabsBar { display: flex !important; grid-area: document-tabs !important; grid-column: 1 !important; grid-row: 2 !important; }
html:root body[data-active-step="flow"] #appShell > .workspace {
  grid-area: workspace !important;
  grid-column: 1 !important;
  grid-row: 3 !important;
  position: relative;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}
html:root body[data-active-step="flow"] #appShell > .rail,
html:root body[data-active-step="flow"] #step-create,
html:root body[data-active-step="flow"] #step-edit,
html:root body[data-active-step="flow"] #assistantFloatLauncher { display: none !important; }
#step-flow:not(.hidden), #workflowGraphCanvas:not(.hidden) { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; }
#step-flow {
  --flow-bg: var(--neutral-bg, #f5f4f1);
  --flow-panel: var(--neutral-panel, #fff);
  --flow-soft: var(--neutral-panel-soft, #f1efeb);
  --flow-text: var(--neutral-text, #282725);
  --flow-muted: var(--neutral-muted, #706d67);
  --flow-line: var(--neutral-line, #dedbd4);
  --flow-accent: var(--neutral-accent, #a86f25);
  --flow-accent-soft: var(--neutral-accent-soft, rgb(168 111 37 / 12%));
  color: var(--flow-text);
  background: var(--flow-bg);
  font-size: 12px;
}
#step-flow .workflow-graph-shell { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; min-height: 0; overflow: hidden; }
#step-flow .workflow-graph-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 12px 18px; border-bottom: 1px solid var(--flow-line); background: var(--flow-panel); }
#step-flow .workflow-graph-brand { display: flex; align-items: center; gap: 10px; min-width: 240px; flex: 1 1 240px; }
#step-flow .workflow-graph-back { flex: 0 0 30px; }
#step-flow .workflow-graph-brand > span img { display: block; width: 32px; height: 32px; cursor: default; }
#step-flow .workflow-graph-brand h2 { margin: 0; color: var(--flow-text); font-size: 15px; }
#step-flow .workflow-graph-brand p { max-width: 360px; margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--flow-muted); font-size: 11px; }
#step-flow .workflow-graph-head-commandbar { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
#step-flow button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 30px; min-height: 30px; padding: 5px 8px; border: 1px solid var(--flow-line); border-radius: 7px; background: var(--flow-panel); color: var(--flow-text); font-size: 11px; font-weight: 500; line-height: 1.3; box-shadow: none; }
#step-flow button:hover { border-color: var(--flow-accent); background: var(--flow-soft); }
#step-flow button:focus-visible, #step-flow textarea:focus-visible, #step-flow input:focus-visible { outline: 2px solid var(--flow-accent); outline-offset: 2px; }
#step-flow button.primary, #step-flow button.active { border-color: var(--flow-accent); color: var(--flow-accent); background: var(--flow-accent-soft); }
#step-flow button:disabled { opacity: .45; }
#step-flow :is(svg, .fluent-icon-shell) { width: 16px; height: 16px; flex: 0 0 16px; }
#step-flow .fluent-icon-shell img { width: 100%; height: 100%; cursor: inherit; }
#step-flow .workflow-graph-head-history { display: inline-flex; gap: 3px; }
#step-flow :is(.workflow-graph-idle, .workflow-graph-count) { color: var(--flow-muted); white-space: nowrap; margin-inline: 4px; font-size: 10px; }
#step-flow .workflow-graph-idle { display: flex; align-items: center; gap: 5px; }
#step-flow :is(.workflow-graph-idle, .workflow-graph-status, .workflow-graph-inspector-status, .workflow-graph-canvas-status) i:not([data-lucide]) { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--flow-muted); }
#step-flow .workflow-graph-main { display: flex; min-width: 0; min-height: 0; position: relative; overflow: hidden; }
#step-flow .workflow-graph-board { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; background: var(--flow-bg); touch-action: none; }
#step-flow .workflow-graph-board.panning { cursor: grabbing; }
#step-flow .workflow-graph-scene { position: absolute; inset: 0 auto auto 0; transform-origin: 0 0; }
#step-flow .workflow-graph-node { position: absolute; left: var(--flow-x, 0); top: var(--flow-y, 0); display: grid; grid-template-rows: 34px minmax(0, 1fr) 28px; width: 260px; height: 148px; border: 1px solid var(--flow-line); border-radius: 10px; background: var(--flow-panel); box-shadow: 0 3px 12px rgb(0 0 0 / 5%); }
#step-flow .workflow-graph-node.selected { border-color: var(--flow-accent); box-shadow: 0 0 0 2px var(--flow-accent-soft); }
#step-flow .workflow-graph-node.focus-dimmed { opacity: .55; }
#step-flow .workflow-graph-node.bypassed { border-style: dashed; }
#step-flow .workflow-graph-node.running { border-color: var(--flow-accent); }
#step-flow .workflow-graph-node-drag { display: flex; align-items: center; gap: 7px; padding: 7px 10px; min-width: 0; cursor: grab; border-bottom: 1px solid var(--flow-line); }
#step-flow .workflow-graph-node-drag > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; flex: 1; }
#step-flow .workflow-graph-node-drag small { color: var(--flow-muted); font-size: 8px; }
#step-flow .workflow-graph-node-drag strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
#step-flow .workflow-graph-node-icon { display: flex; color: var(--flow-accent); }
#step-flow .workflow-graph-node-run { min-width: 22px; min-height: 22px; width: 22px; height: 22px; padding: 2px; border: 0; background: transparent; }
#step-flow .workflow-graph-status { display: flex; align-items: center; gap: 4px; color: var(--flow-muted); font-size: 9px; font-style: normal; white-space: nowrap; }
#step-flow .workflow-graph-node-body { min-width: 0; min-height: 0; padding: 6px 10px; overflow: hidden; }
#step-flow .workflow-graph-node-visual { display: flex; align-items: center; gap: 7px; height: 24px; min-width: 0; }
#step-flow .workflow-graph-node-visual-copy { display: grid; min-width: 0; }
#step-flow .workflow-graph-node-visual-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
#step-flow .workflow-graph-node-visual-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--flow-muted); font-size: 8px; }
#step-flow .workflow-graph-node-summary { margin: 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; line-height: 1.3; color: var(--flow-muted); }
#step-flow dl { display: grid; gap: 5px; margin: 0; }
#step-flow dl > div { display: flex; justify-content: space-between; gap: 10px; min-width: 0; }
#step-flow dt { color: var(--flow-muted); font-size: 9px; }
#step-flow dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
#step-flow .workflow-graph-node-body dl { grid-template-columns: 1fr 1fr; }
#step-flow .workflow-graph-node-body dl > div { gap: 4px; }
#step-flow .workflow-graph-node > footer { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 4px 10px; border-top: 1px solid var(--flow-line); }
#step-flow .workflow-graph-node > footer > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--flow-muted); font-size: 8px; }
#step-flow .workflow-graph-node-action { min-height: 22px; padding: 2px 7px; font-size: 9px; }
#step-flow .workflow-graph-node-action :is(svg, .fluent-icon-shell) { width: 12px; height: 12px; flex-basis: 12px; }
#step-flow .workflow-graph-node-flags { position: absolute; right: 0; top: -23px; display: flex; gap: 4px; color: var(--flow-muted); font-size: 9px; }
#step-flow .workflow-graph-node-flags > span { display: flex; align-items: center; gap: 4px; }
#step-flow .workflow-graph-port { position: absolute; top: calc(50% - 9px); z-index: 2; display: block; width: 18px; min-width: 18px; height: 18px; min-height: 18px; padding: 3px; border: 2px solid var(--flow-line); border-radius: 999px; background: var(--flow-panel); }
#step-flow .workflow-graph-port.input { left: -10px; }
#step-flow .workflow-graph-port.output { right: -10px; }
#step-flow .workflow-graph-port.connected { border-color: var(--flow-accent); }
#step-flow .workflow-graph-port.connected > span { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--flow-accent); }
#step-flow .workflow-graph-connections { position: absolute; inset: 0; width: 1960px; height: 1120px; overflow: visible; pointer-events: none; }
#step-flow .workflow-graph-connections > path { fill: none; stroke: var(--flow-muted); stroke-width: 2; marker-end: url(#workflowGraphArrow); pointer-events: stroke; cursor: pointer; }
#step-flow .workflow-graph-connections > path:is(.main-flow, .selected, .preview) { stroke: var(--flow-accent); }
#step-flow .workflow-graph-connections > path.preview { stroke-dasharray: 6 4; }
#step-flow .workflow-graph-connections marker path { fill: var(--flow-muted); }
#step-flow .workflow-graph-connections .focus-dimmed { opacity: .3; }
#step-flow .workflow-graph-stage-guides > span { position: absolute; left: var(--stage-x); top: var(--stage-y); display: flex; gap: 8px; color: var(--flow-muted); font-size: 11px; }
#step-flow .workflow-graph-stage-guides i { font-style: normal; color: var(--flow-accent); }
#step-flow .workflow-graph-ai-branch.collapsed { position: absolute; left: var(--flow-x); top: var(--flow-y); width: 260px; height: 148px; justify-content: flex-start; padding: 18px; }
#step-flow .workflow-graph-ai-branch.collapsed > span:nth-child(2) { display: grid; gap: 7px; flex: 1; text-align: left; }
#step-flow .workflow-graph-ai-branch small { color: var(--flow-muted); }
#step-flow .workflow-graph-ai-branch.expanded { position: absolute; left: 60px; top: 30px; }
#step-flow .workflow-graph-ai-branch header, #step-flow .workflow-graph-ai-branch header > span { display: flex; align-items: center; gap: 8px; }
#step-flow .workflow-graph-toolbar { position: absolute; z-index: 5; bottom: 36px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; width: fit-content; max-width: calc(100% - 24px); padding: 7px; border: 1px solid var(--flow-line); border-radius: 10px; background: var(--flow-panel); box-shadow: 0 3px 12px rgb(0 0 0 / 6%); }
#step-flow .workflow-graph-toolbar-title { display: grid; gap: 2px; padding: 0 6px; }
#step-flow .workflow-graph-toolbar-title small { font-size: 9px; color: var(--flow-muted); }
#step-flow .workflow-graph-tool-group { display: flex; gap: 3px; padding-left: 7px; border-left: 1px solid var(--flow-line); }
#step-flow .workflow-graph-toolbar button { min-height: 28px; min-width: 28px; padding: 4px 5px; border-color: transparent; }
#step-flow .workflow-graph-canvas-status { position: absolute; bottom: 10px; left: 16px; display: flex; gap: 12px; color: var(--flow-muted); font-size: 9px; }
#step-flow .workflow-graph-canvas-status span { display: flex; align-items: center; gap: 5px; }
#step-flow .workflow-graph-key-hint { position: absolute; bottom: 10px; right: 16px; color: var(--flow-muted); font-size: 9px; }
#step-flow .workflow-graph-board-shortcuts { position: absolute; z-index: 3; left: 12px; top: 12px; display: flex; gap: 5px; }
#step-flow .workflow-graph-marquee { position: absolute; z-index: 4; pointer-events: none; border: 1px solid var(--flow-accent); background: var(--flow-accent-soft); }
#step-flow .workflow-graph-minimap { position: absolute; right: 12px; top: 12px; z-index: 3; display: block; width: 128px; height: 76px; min-height: 0; padding: 0; background: var(--flow-panel); overflow: hidden; }
#step-flow .workflow-graph-minimap > i { position: absolute; background: var(--flow-line); border: 1px solid var(--flow-muted); border-radius: 2px; }
#step-flow .workflow-graph-minimap > i.selected { background: var(--flow-accent-soft); border-color: var(--flow-accent); }
#step-flow .workflow-graph-minimap > span { position: absolute; border: 1px solid var(--flow-accent); pointer-events: none; }
#step-flow :is(.workflow-graph-palette, .workflow-graph-inspector) { flex: 0 0 260px; min-width: 0; min-height: 0; overflow: auto; border-inline-end: 1px solid var(--flow-line); padding: 14px; background: var(--flow-panel); z-index: 6; }
#step-flow .workflow-graph-inspector { flex-basis: 280px; border-inline-end: 0; border-inline-start: 1px solid var(--flow-line); }
#step-flow :is(.workflow-graph-palette, .workflow-graph-inspector, .workflow-graph-queue, .workflow-graph-layout-apply) > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; }
#step-flow :is(.workflow-graph-palette, .workflow-graph-inspector, .workflow-graph-queue, .workflow-graph-layout-apply) > header > span { display: flex; align-items: center; gap: 8px; }
#step-flow .workflow-graph-palette header > span > span { display: grid; gap: 3px; }
#step-flow .workflow-graph-palette small { color: var(--flow-muted); font-size: 10px; }
#step-flow .workflow-graph-palette > label { display: flex; align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--flow-line); border-radius: 7px; }
#step-flow .workflow-graph-palette input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--flow-text); background: transparent; }
#step-flow .workflow-graph-palette-group h4, #step-flow .workflow-graph-inspector h4 { margin: 16px 0 8px; font-size: 11px; }
#step-flow .workflow-graph-palette-group > button { display: flex; width: 100%; gap: 8px; padding: 9px 5px; margin-bottom: 5px; text-align: left; }
#step-flow .workflow-graph-palette-group > button > span { display: grid; flex: 1; gap: 3px; min-width: 0; }
#step-flow .workflow-graph-palette-group > button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#step-flow [hidden], #step-flow .hidden { display: none !important; }
#step-flow .workflow-graph-inspector-status { display: flex; align-items: center; gap: 7px; padding: 9px; border-radius: 7px; background: var(--flow-soft); }
#step-flow .workflow-graph-inspector-status > span { margin-left: auto; color: var(--flow-muted); font-size: 10px; }
#step-flow .workflow-graph-inspector p, #step-flow .workflow-graph-layout-apply p { color: var(--flow-muted); font-size: 11px; line-height: 1.6; }
#step-flow .workflow-graph-inspector section > button { display: flex; width: 100%; justify-content: space-between; margin-bottom: 5px; }
#step-flow .workflow-graph-inspector-controls, #step-flow .workflow-graph-inspector > footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
#step-flow .workflow-graph-inspector-editor { display: grid; gap: 7px; margin-bottom: 12px; }
#step-flow .workflow-graph-node-editor { display: block; width: 100%; min-height: 80px; max-height: 240px; padding: 10px; resize: vertical; border: 1px solid var(--flow-line); border-radius: 7px; color: var(--flow-text); background: var(--flow-soft); font-size: 12px; line-height: 1.6; }
#step-flow .workflow-graph-node-editor-status { display: flex; justify-content: space-between; gap: 8px; width: 100%; color: var(--flow-muted); font-size: 9px; }
#step-flow .workflow-graph-node-editor-status b { font-weight: 400; }
#step-flow .workflow-graph-node-editor-status em { font-style: normal; }
#step-flow :is(.workflow-graph-queue, .workflow-graph-layout-apply) { position: absolute; right: 12px; top: 104px; z-index: 8; width: min(320px, calc(100% - 24px)); max-height: calc(100% - 150px); overflow: auto; padding: 14px; border: 1px solid var(--flow-line); border-radius: 10px; background: var(--flow-panel); box-shadow: 0 8px 24px rgb(0 0 0 / 10%); }
#step-flow .workflow-graph-queue article { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--flow-line); }
#step-flow .workflow-graph-queue article > span { display: grid; flex: 1; gap: 4px; }
#step-flow .workflow-graph-queue article em { color: var(--flow-muted); font-style: normal; }
#step-flow .workflow-graph-queue article small { color: var(--flow-muted); font-size: 10px; }
#step-flow :is(.workflow-graph-queue, .workflow-graph-layout-apply) > footer { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
#step-flow .workflow-graph-preflight-summary { display: flex; gap: 8px; padding: 10px; background: var(--flow-soft); border-radius: 7px; }
#step-flow .workflow-graph-preflight-summary > span { display: grid; gap: 4px; }
#step-flow .workflow-graph-layout-apply label { display: flex; gap: 8px; align-items: center; padding: 8px 0; }
#step-flow .workflow-graph-layout-apply label > span { display: grid; gap: 3px; }
#step-flow .workflow-graph-layout-apply small { color: var(--flow-muted); }
#step-flow .workflow-graph-connection-selection { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 180px); padding: 8px; background: var(--flow-panel); border: 1px solid var(--flow-line); border-radius: 9px; }
#step-flow .workflow-graph-connection-selection > span { display: flex; flex-wrap: wrap; gap: 5px; font-size: 10px; }
#step-flow .workflow-graph-connection-selection small { color: var(--flow-muted); }
#step-flow .workflow-graph-empty { position: absolute; inset: 100px 30px 130px; display: grid; align-content: center; justify-items: center; gap: 10px; text-align: center; }
#step-flow .workflow-graph-empty h3, #step-flow .workflow-graph-empty p { margin: 0; }
#step-flow .workflow-graph-empty p { color: var(--flow-muted); }
#step-flow .workflow-graph-empty > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#step-flow .workflow-graph-main.single-mode .workflow-graph-board { display: grid; grid-template-rows: minmax(0, 1fr) auto; touch-action: auto; }
#step-flow .workflow-graph-single-stage { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 22px clamp(16px, 4vw, 56px); overflow: auto; }
#step-flow .workflow-graph-single-progress { display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto; gap: 24px; }
#step-flow .workflow-graph-single-kicker { display: flex; align-items: center; gap: 6px; color: var(--flow-muted); font-size: 10px; }
#step-flow .workflow-graph-single-kicker em { padding: 2px 6px; border-radius: 5px; background: var(--flow-soft); font-style: normal; }
#step-flow .workflow-graph-single-progress > div > strong { display: block; margin-top: 7px; font-size: 22px; }
#step-flow .workflow-graph-single-progress strong small { color: var(--flow-muted); font-size: 13px; font-weight: 400; }
#step-flow .workflow-graph-single-progress p { margin: 6px 0 0; font-size: 12px; }
#step-flow .workflow-graph-single-progress p > span { color: var(--flow-muted); }
#step-flow .workflow-graph-single-progress-meter { width: 220px; flex: 0 0 220px; color: var(--flow-muted); font-size: 10px; }
#step-flow .workflow-graph-single-progress-meter > div:first-child { display: flex; justify-content: space-between; }
#step-flow .workflow-graph-single-progress-track { height: 5px; margin: 8px 0; overflow: hidden; background: var(--flow-line); border-radius: 9px; }
#step-flow .workflow-graph-single-progress-track i { display: block; height: 100%; background: var(--flow-accent); }
#step-flow .workflow-graph-single-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; flex: 0 0 auto; }
#step-flow .workflow-graph-single-steps > button { flex-direction: column; gap: 5px; min-width: 0; padding: 8px 4px; border-color: transparent; background: transparent; }
#step-flow .workflow-graph-single-steps > button.active { background: var(--flow-accent-soft); color: var(--flow-accent); border-color: var(--flow-accent); }
#step-flow .workflow-graph-single-steps > button > span { font-size: 10px; }
#step-flow .workflow-graph-single-steps small { max-width: 100%; font-size: 10px; overflow-wrap: anywhere; }
#step-flow .workflow-graph-single-path { display: flex; justify-content: center; align-items: center; gap: 14px; flex: 0 0 auto; color: var(--flow-muted); font-size: 10px; }
#step-flow .workflow-graph-single-card { display: flex; justify-content: center; align-items: center; position: relative; min-height: 0; flex: 1 0 auto; }
#step-flow .workflow-graph-single-card-glow { display: none; }
#step-flow .workflow-graph-single-card .workflow-graph-node { position: relative; inset: auto; width: min(360px, 100%); height: auto; min-height: 210px; grid-template-rows: auto minmax(0, 1fr) auto; }
#step-flow .workflow-graph-single-card .workflow-graph-node-drag { padding: 12px 14px; cursor: default; }
#step-flow .workflow-graph-single-card .workflow-graph-node-drag small { font-size: 10px; }
#step-flow .workflow-graph-single-card .workflow-graph-node-drag strong { font-size: 14px; }
#step-flow .workflow-graph-single-card .workflow-graph-port, #step-flow .workflow-graph-single-card .workflow-graph-node-flags { display: none; }
#step-flow .workflow-graph-single-card .workflow-graph-node-body { padding: 14px; overflow: visible; }
#step-flow .workflow-graph-single-card .workflow-graph-node-visual { height: auto; min-height: 36px; margin-bottom: 12px; }
#step-flow .workflow-graph-single-card .workflow-graph-node-visual-copy strong { font-size: 12px; }
#step-flow .workflow-graph-single-card .workflow-graph-node-visual-copy small { font-size: 10px; }
#step-flow .workflow-graph-single-card .workflow-graph-node-summary { white-space: normal; font-size: 12px; line-height: 1.6; margin: 12px 0; }
#step-flow .workflow-graph-single-card .workflow-graph-node-body dl { margin-top: 12px; gap: 8px; grid-template-columns: 1fr; }
#step-flow .workflow-graph-single-card :is(dt, dd) { font-size: 10px; }
#step-flow .workflow-graph-single-card .workflow-graph-node > footer { padding: 10px 14px; flex-wrap: wrap; }
#step-flow .workflow-graph-single-card .workflow-graph-node-action { min-height: 30px; font-size: 11px; }
#step-flow .workflow-graph-single-card .workflow-graph-node > footer > span { font-size: 10px; }
#step-flow .workflow-graph-single-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; margin-top: 4px; }
#step-flow .workflow-graph-single-nav button { min-height: 36px; }
#step-flow .single-mode .workflow-graph-toolbar { position: relative; inset: auto; width: auto; max-width: none; border-width: 1px 0 0; border-radius: 0; box-shadow: none; }
#step-flow .single-mode .workflow-graph-toolbar > .workflow-graph-tool-group:not(.workflow-graph-file-tools),
#step-flow .single-mode .workflow-graph-canvas-status, #step-flow .single-mode .workflow-graph-key-hint { display: none; }
#step-flow .workflow-graph-single-stage.empty { align-items: center; justify-content: center; text-align: center; }
#step-flow .workflow-graph-single-stage.empty h3, #step-flow .workflow-graph-single-stage.empty p { margin: 0; }
#step-flow .workflow-graph-swatch { width: 14px; height: 14px; border-radius: 4px; background: var(--swatch); flex: 0 0 14px; }
#step-flow .workflow-graph-text-lines { display: grid; width: 24px; gap: 4px; flex: 0 0 24px; }
#step-flow .workflow-graph-text-lines i { height: 3px; background: var(--flow-line); border-radius: 2px; }
#step-flow .workflow-graph-media-image { display: block; position: relative; flex: 0 0 auto; max-width: 100%; overflow: hidden; }
#step-flow .workflow-graph-media-image img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
#step-flow .workflow-graph-node-visual.media-preview { min-height: 0; height: 42px; }
#step-flow .workflow-graph-node-visual.media-preview > em { display: none; }
#step-flow .workflow-graph-media-caption { display: none; }
#step-flow .workflow-graph-single-card .workflow-graph-node-visual.media-preview { height: auto; flex-wrap: wrap; justify-content: center; }
#step-flow .workflow-graph-single-card .media-preview .workflow-graph-node-visual-copy { width: 100%; text-align: center; }
#step-flow .workflow-graph-single-card .workflow-graph-media-caption { display: block; width: 100%; text-align: center; color: var(--flow-muted); font-size: 9px; }
@media (max-width: 1100px) {
  #step-flow .workflow-graph-head { padding: 9px 12px; }
  #step-flow .workflow-graph-head-commandbar { justify-content: flex-start; }
  #step-flow .workflow-graph-head-commandbar > button:not(.primary) > span { display: none; }
  #step-flow .workflow-graph-toolbar-title, #step-flow .workflow-graph-key-hint { display: none; }
  #step-flow .workflow-graph-toolbar { gap: 3px; padding: 5px; }
  #step-flow .workflow-graph-tool-group { padding-left: 4px; gap: 1px; }
  #step-flow .workflow-graph-zoom button > span { display: none; }
}
@media (max-width: 760px) {
  #step-flow .workflow-graph-head { gap: 7px; }
  #step-flow .workflow-graph-brand { min-width: 180px; }
  #step-flow .workflow-graph-brand h2 { font-size: 13px; }
  #step-flow .workflow-graph-head-commandbar .workflow-graph-idle { display: none; }
  #step-flow :is(.workflow-graph-palette, .workflow-graph-inspector) { position: absolute; left: 0; top: 0; bottom: 0; width: min(280px, 85%); box-shadow: 5px 0 18px rgb(0 0 0 / 12%); }
  #step-flow .workflow-graph-inspector { left: auto; right: 0; }
  #step-flow .workflow-graph-single-stage { padding: 16px; gap: 12px; }
  #step-flow .workflow-graph-single-progress-meter { width: 140px; flex-basis: 140px; }
  #step-flow .workflow-graph-single-progress > div > strong { font-size: 18px; }
  #step-flow .workflow-graph-single-steps { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); }
  #step-flow .workflow-graph-single-overview { order: 3; flex: 1 1 100%; }
  #step-flow .workflow-graph-toolbar .workflow-graph-secondary-tools { flex-wrap: wrap; }
  #step-flow .workflow-graph-canvas-status { gap: 7px; }
}

/* ==== consolidated from /page-copy-editor.css (cascade order preserved) ==== */
/* Phase1 merge: page-copy-editor + editor-layers (cascade preserved). */
/* ===== merged from /page-copy-editor.css ===== */
/* One active editing panel, using the workbench's neutral theme tokens. */
html:root body #step-edit > .inspector #inspectorPropertiesView.page-copy-replaced,
html:root body #step-edit > .inspector #copyRepresentativeDock.hidden,
html:root body #step-edit > .inspector #pageCopyView.hidden { display: none !important; }
html:root body.workbench-editor-active #step-edit:is(.copy-canvas-mode, .editable-canvas-mode) #inspectorPropertiesView.page-copy-replaced { display: none !important; }
html:root body #step-edit > .inspector .inspector-view-tabs button[hidden] { display: none !important; }
html:root body #step-edit:is(.copy-canvas-mode, .editable-canvas-mode) > .inspector .inspector-view-tabs {
  display: flex !important; flex: 0 0 auto; gap: 6px; padding: 8px 12px;
  color: var(--neutral-text) !important; background: var(--neutral-panel) !important;
  border-color: var(--neutral-line) !important;
}
html:root body #step-edit > .inspector .inspector-view-tabs button {
  flex: 1; min-width: 0; color: var(--neutral-muted) !important;
  background: var(--neutral-panel-soft) !important; border-color: var(--neutral-line) !important;
}
html:root body.workbench-editor-active #step-edit:is(.copy-canvas-mode, .editable-canvas-mode) > .inspector .inspector-view-tabs button.active {
  color: var(--neutral-accent-text) !important; background: var(--neutral-accent) !important;
  border-color: var(--neutral-accent) !important;
}
html:root body #step-edit > .inspector .inspector-view-tabs button span { display: inline !important; }
html:root body.workbench-editor-active #appShell #step-edit > .inspector .inspector-view-tabs button.active :is(span, svg, i) {
  color: var(--neutral-accent-text) !important;
  -webkit-text-fill-color: var(--neutral-accent-text) !important;
  stroke: currentColor !important;
}
html:root[data-theme="dark"] body.workbench-editor-active #appShell #step-edit > .inspector .inspector-view-tabs button.active :is(span, svg, i) {
  color: var(--neutral-text) !important;
  -webkit-text-fill-color: var(--neutral-text) !important;
}
html:root body #step-edit #pageCopyView:not(.hidden) {
  display: flex; flex: 1 1 0; flex-direction: column; gap: 14px;
  min-height: 0; min-width: 0; padding: 12px; overflow: hidden auto;
  scrollbar-gutter: stable; overscroll-behavior: contain;
  color: var(--neutral-text); background: var(--neutral-panel);
}
.page-copy-view > * { flex: 0 0 auto; min-width: 0; }
.page-copy-view header strong { font-size: 14px; }
.page-copy-view p, .page-copy-view small { color: var(--neutral-muted); line-height: 1.6; font-size: 12px; }
.page-copy-view header p { margin: 6px 0 0; }
.page-copy-fields { display: grid; gap: 16px; }
.page-copy-field { display: grid; gap: 7px; min-width: 0; }
.page-copy-field > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.page-copy-field > span button { padding: 3px 8px; min-height: 26px; font-size: 11px; }
html:root body #step-edit .page-copy-field textarea {
  width: 100%; box-sizing: border-box; min-height: 58px; resize: vertical;
  color: var(--neutral-text); background: var(--neutral-panel-soft);
  border: 1px solid var(--neutral-line); border-radius: 8px; padding: 9px;
  font: inherit; font-size: 12px; line-height: 1.65;
}
html:root body #step-edit .page-copy-field textarea:focus-visible {
  border-color: var(--neutral-accent); outline: 2px solid var(--neutral-accent); outline-offset: 2px; box-shadow: none;
}
.page-copy-capacity { padding: 10px; border: 1px solid var(--neutral-line); border-radius: 8px; background: var(--neutral-panel-soft); }
.page-copy-capacity summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; }
.page-copy-capacity summary::-webkit-details-marker { display: none; }
.page-copy-capacity summary > strong { color: var(--neutral-accent); font-size: 12px; }
.page-copy-capacity summary > span { color: var(--neutral-muted); font-size: 11px; }
.page-copy-capacity details[open] summary > span { display: none; }
.page-copy-capacity ul { display: grid; gap: 9px; padding: 0; margin: 12px 0 0; list-style: none; font-size: 12px; }
.page-copy-capacity li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.page-copy-capacity li > span { display: grid; gap: 3px; min-width: 0; }
.page-copy-capacity li strong { color: var(--neutral-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.page-copy-capacity li small { color: var(--neutral-muted); }
.page-copy-capacity li > button { flex: 0 0 auto; min-height: 26px; padding: 3px 8px; border-color: var(--neutral-line); color: var(--neutral-text); background: var(--neutral-panel); font-size: 11px; }
.page-copy-capacity p { margin-bottom: 0; }
.page-copy-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--neutral-line); }
.page-copy-view .page-copy-actions { padding: 12px 0 0; }
.page-copy-actions > button { flex: 1; min-width: 80px; font-size: 12px; }
.page-copy-actions > small { flex: 0 0 100%; color: var(--neutral-muted); font-size: 11px; line-height: 1.6; }
html:root body #step-edit .slide-page-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; }
html:root body #appShell #step-edit .slide-page-actions > :is(#addSlideBtn, #duplicateSlideBtn) {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  overflow: visible !important;
  text-overflow: clip !important;
  padding: 7px 6px !important;
  font-size: 12px !important;
  color: var(--neutral-text) !important;
  background: var(--neutral-panel) !important;
  background-color: var(--neutral-panel) !important;
  border-color: var(--neutral-line) !important;
  box-shadow: none !important;
}
html:root body #appShell #step-edit .slide-page-actions > :is(#addSlideBtn, #duplicateSlideBtn):hover:not(:disabled),
html:root body #appShell #step-edit .slide-page-actions > :is(#addSlideBtn, #duplicateSlideBtn):focus-visible {
  color: var(--neutral-accent-strong) !important;
  background: var(--neutral-accent-soft) !important;
  background-color: var(--neutral-accent-soft) !important;
  border-color: var(--neutral-accent) !important;
  box-shadow: none !important;
}
html:root body #appShell #step-edit .slide-page-actions > :is(#addSlideBtn, #duplicateSlideBtn) > .button-label,
html:root body #appShell #step-edit .slide-page-actions > :is(#addSlideBtn, #duplicateSlideBtn) > span {
  min-width: 0;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  color: inherit !important;
}
html:root body #appShell #step-edit .slide-page-actions > button > :is(svg, .fluent-icon-shell) {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px;
  color: inherit !important;
}
html:root body #step-edit .advanced-page-tabs > button[hidden] { display: none !important; }
html:root body #step-edit .advanced-page-tabs > button:not([hidden]) {
  min-width: 0;
  min-height: 32px !important;
  font-size: 12px !important;
  padding: 4px 6px !important;
  white-space: nowrap !important;
}
html:root body.workbench-editor-active #appShell #step-edit > .thumb-panel .advanced-page-tabs > button > :is(svg, i, .fluent-icon-shell) { display: none !important; }
html:root body #step-edit .advanced-page-tabs > button:not([hidden]) > span:not(.fluent-icon-shell) {
  display: inline !important;
  flex: 0 0 auto;
  min-width: 0;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
html:root body #step-edit > #leftEditorPanelResizer {
  left: max(0px, calc(var(--editor-left-resizer-offset, var(--editor-left-width, 220px)) - 5.5px)) !important;
  transform: none !important;
}
html:root body #step-edit > #rightEditorPanelResizer {
  right: max(0px, calc(var(--editor-right-resizer-offset, var(--editor-right-width, 300px)) - 5.5px)) !important;
  transform: none !important;
}
@media (min-width: 1024px) {
  /* The resize preferences must control the tracks as well as the handles. */
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit.editor-layout:is(.copy-canvas-mode, .editable-canvas-mode, .editable-preview-mode, .design-preview-mode):not(.workflow-panel-open) {
    grid-template-columns: var(--editor-left-track, var(--editor-left-width, 220px)) minmax(0, 1fr) var(--editor-right-track, var(--editor-right-width, 300px)) !important;
  }
  html:root body.workbench-editor-active #step-edit.left-panel-collapsed { --editor-left-track: 0px; }
  html:root body.workbench-editor-active #step-edit.right-panel-collapsed { --editor-right-track: 0px; }
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit.left-panel-collapsed > .thumb-panel,
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit.right-panel-collapsed > .inspector {
    display: none !important;
  }
}
html:root body.workbench-editor-active #appShell #step-edit #slideCanvas .slide-el.text {
  color: var(--canvas-text-color, #292722) !important;
  -webkit-text-fill-color: var(--canvas-text-color, #292722) !important;
}

/* ===== merged from /editor-layers.css ===== */
/* Compact layer rows. Artwork thumbnails never determine panel geometry. */
html:root body #step-edit:is(.copy-canvas-mode, .editable-canvas-mode) #inspectorPropertiesView > #inspectorBody { order: -2; }
html:root body #step-edit:is(.copy-canvas-mode, .editable-canvas-mode) #inspectorPropertiesView > #layerListView { order: -1; }
html:root body #step-edit #layerListView.editor-layer-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 0 !important;
  width: 100%;
  min-width: 0;
  max-height: min(360px, 42vh);
  padding: 0 !important;
  overflow: hidden auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid var(--neutral-line) !important;
  border-radius: 6px;
  background: var(--neutral-panel) !important;
  color: var(--neutral-text);
}
html:root body #step-edit #layerListView.empty-state { padding: 12px !important; }
html:root body #step-edit #layerListView > .editor-layer-head {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--neutral-line);
  background: var(--neutral-panel);
  color: var(--neutral-muted);
  font-size: 11px;
}
html:root body #step-edit #layerListView > .editor-layer-item {
  position: relative;
  display: grid !important;
  grid-template-columns: 24px 36px minmax(0, 1fr) 24px !important;
  grid-template-rows: 36px !important;
  align-items: center;
  gap: 6px !important;
  box-sizing: border-box;
  width: 100%;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 3px 6px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--neutral-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--neutral-text);
  box-shadow: none !important;
  cursor: pointer;
}
html:root body #step-edit #layerListView > .editor-layer-item:hover { background: var(--neutral-panel-soft) !important; }
html:root body #step-edit #layerListView > .editor-layer-item.active {
  background: var(--neutral-accent-soft) !important;
  box-shadow: inset 2px 0 var(--neutral-accent) !important;
}
html:root body #step-edit #layerListView > .editor-layer-item:focus-visible {
  outline: 2px solid var(--neutral-accent);
  outline-offset: -2px;
}
html:root body #step-edit #layerListView .editor-layer-item > :is(.layer-drag-handle, .layer-group-state) { display: none !important; }
html:root body #step-edit #layerListView .editor-layer-item > .layer-visibility-btn { grid-column: 1 !important; grid-row: 1 !important; }
html:root body #step-edit #layerListView .editor-layer-item > .layer-thumbnail {
  position: relative;
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 36px !important;
  max-height: 36px !important;
  overflow: hidden;
  contain: size layout paint;
  border: 1px solid var(--neutral-line);
  border-radius: 2px;
  background: var(--neutral-panel-soft);
  pointer-events: none;
}
html:root body #step-edit #layerListView .layer-thumbnail > img,
html:root body #step-edit #layerListView .layer-thumbnail.shape > svg:not(.layer-thumbnail-badge) {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
html:root body #step-edit #layerListView .layer-thumbnail > .layer-thumbnail-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 12px !important;
  height: 12px !important;
  padding: 1px;
  border-radius: 2px 0 0 0;
  color: var(--neutral-muted);
  background: var(--neutral-panel);
}
html:root body #step-edit #layerListView .layer-thumbnail.text > span:not(.layer-thumbnail-badge) { display: none; }
html:root body #step-edit #layerListView .layer-thumbnail.text > .layer-thumbnail-badge {
  position: static;
  width: 22px !important;
  height: 22px !important;
  padding: 0;
  background: transparent;
  color: var(--neutral-text);
}
html:root body #step-edit #layerListView .layer-thumbnail-shape { display: block; width: 24px; height: 24px; box-sizing: border-box; }
html:root body #step-edit #layerListView .layer-thumbnail-shape.line { width: 26px; }
html:root body #step-edit #layerListView .layer-thumbnail-table { display: grid; grid-template-columns: repeat(var(--layer-table-cols), 1fr); gap: 1px; width: 26px; height: 24px; }
html:root body #step-edit #layerListView .layer-thumbnail-chart { display: flex; align-items: end; gap: 2px; width: 26px; height: 24px; }
html:root body #step-edit #layerListView .layer-thumbnail-chart > b { flex: 1; min-width: 0; }
html:root body #step-edit #layerListView .editor-layer-item > .layer-title {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
html:root body #step-edit #layerListView .layer-title > strong { font-size: 12px; font-weight: 500; line-height: 16px; color: var(--neutral-text) !important; }
html:root body #step-edit #layerListView .layer-title > small { font-size: 10px; line-height: 12px; color: var(--neutral-muted) !important; }
html:root body #step-edit #layerListView .editor-layer-item.grouped small::after { content: none !important; }
html:root body #step-edit #layerListView .editor-layer-item > .layer-order-actions {
  grid-column: 4 !important;
  grid-row: 1 !important;
  display: flex;
  justify-content: end;
  width: 24px;
}

/* Local region edit annotation card.  This card is rendered in the fixed
   editor portal, so it must carry its own component styling instead of
   inheriting the browser's default fieldset/button layout. */
html:root body #floatingEditorPortal .design-region-annotation-connector {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
html:root body #floatingEditorPortal .design-region-annotation-connector path {
  fill: none;
  stroke: var(--neutral-accent, #a26820);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: .72;
}
html:root body #floatingEditorPortal .design-region-annotation-card {
  position: fixed;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  width: min(326px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(620px, calc(100vh - 24px));
  overflow: auto;
  min-height: 0;
  padding: 12px;
  border: 1px solid var(--neutral-line, #e3e3e6);
  border-radius: 10px;
  background: var(--neutral-panel, #fff);
  color: var(--neutral-text, #242426);
  box-shadow: 0 12px 32px rgba(24, 28, 34, .16);
  pointer-events: auto;
  font-size: 11px;
  line-height: 1.4;
}

/* Region selection is a wireframe annotation. Keep the source artwork
   visible inside the box so users can judge the exact content being edited. */
html:root body #step-edit .design-region-selection {
  background: transparent !important;
  border: 2px solid var(--neutral-accent, #a26820) !important;
  box-shadow: 0 0 0 9999px rgba(8, 12, 18, .28), 0 0 0 1px rgba(255, 255, 255, .9) inset !important;
}
html:root body #step-edit .design-region-selection > span {
  background: var(--neutral-accent, #a26820) !important;
  color: var(--neutral-accent-text, #fff) !important;
}
html:root body #step-edit .design-region-selection-clear {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 1;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 1px solid var(--neutral-accent, #a26820);
  border-radius: 5px;
  background: var(--neutral-panel, #fff) !important;
  color: var(--neutral-text, #242426) !important;
  box-shadow: none !important;
  font: 22px/1 Arial, sans-serif;
  cursor: pointer;
  pointer-events: auto;
}
html:root body #step-edit .design-region-selection-clear:hover {
  background: var(--neutral-hover, #eeeeee) !important;
}
html:root body #step-edit .design-region-selection-clear:focus-visible {
  outline: 2px solid var(--neutral-accent, #a26820);
  outline-offset: 2px;
}
html:root body #step-edit .design-region-selection-clear:disabled {
  opacity: .5;
  cursor: wait;
}

html:root body .editable-text-review-dialog {
  box-sizing: border-box; width: min(1080px, calc(100vw - 32px)); max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--neutral-line, #dedede);
  border-radius: 12px; background: var(--neutral-panel, #fff); color: var(--neutral-text, #242426); box-shadow: none;
  font-size: 12px;
}
html:root body .editable-text-review-dialog::backdrop { background: rgba(0,0,0,.35); }
html:root body .editable-text-review-dialog > header,
html:root body .editable-text-review-dialog > footer { display:flex; align-items:center; gap:12px; padding:14px 18px; }
html:root body .editable-text-review-dialog > header { justify-content:space-between; border-bottom:1px solid var(--neutral-line,#dedede); }
html:root body .editable-text-review-dialog > header div { display:grid; gap:5px; }
html:root body .editable-text-review-dialog strong { font-size:13px; }
html:root body .editable-text-review-dialog small { color:var(--neutral-muted,#666); line-height:1.5; }
html:root body .editable-text-review-dialog button { min-height:28px; padding:4px 9px; font-size:11px; border-radius:5px; box-shadow:none!important; }
html:root body .editable-text-review-dialog > header button { width:28px; padding:0; font-size:21px; }
html:root body .editable-text-review-dialog > footer { border-top:1px solid var(--neutral-line,#dedede); }
html:root body .editable-text-review-dialog > footer small { flex:1; }
html:root body .editable-text-review-body { display:grid; grid-template-columns:minmax(0, 1.8fr) minmax(240px, 1fr); gap:18px; padding:16px 18px; overflow:auto; max-height:calc(100dvh - 205px); }
html:root body .editable-text-review-toolbar { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
html:root body .editable-text-review-toolbar [aria-pressed="true"] { border-color:var(--neutral-accent,#a26820); color:var(--neutral-accent,#a26820); }
html:root body .editable-text-review-image { position:relative; overflow:hidden; border-radius:6px; cursor:crosshair; touch-action:none; user-select:none; }
html:root body .editable-text-review-image > img { display:block; width:100%; height:auto; pointer-events:none; }
html:root body .editable-text-review-image [data-text-review-regions] { position:absolute; inset:0; pointer-events:none; }
html:root body .editable-text-box,
html:root body .editable-preserved-box,
html:root body .editable-text-drawing { position:absolute; box-sizing:border-box; border:1px solid var(--neutral-accent,#a26820); background:transparent; pointer-events:none; }
html:root body .editable-text-box.preserved,
html:root body .editable-preserved-box { border-style:dashed; border-width:2px; }
html:root body .editable-text-box > span,
html:root body .editable-preserved-box > span { position:absolute; left:0; top:0; padding:1px 4px; background:var(--neutral-panel,#fff); color:var(--neutral-text,#242426); font-size:10px; }
html:root body .editable-preserved-box > button { position:absolute; top:2px; right:2px; width:24px; height:24px; min-height:24px; padding:0; pointer-events:auto; background:var(--neutral-panel,#fff); color:var(--neutral-text,#242426); border:1px solid var(--neutral-accent,#a26820); font-size:18px; }
html:root body .editable-text-review-status { display:grid; gap:7px; font-size:11px; line-height:1.6; color:var(--neutral-muted,#666); }
html:root body .editable-text-review-status progress { width:100%; height:5px; accent-color:var(--neutral-accent,#a26820); }
html:root body .editable-text-review-preserved { font-size:11px; color:var(--neutral-muted,#666); }
html:root body .editable-text-review-list { display:grid; align-content:start; gap:10px; max-height:calc(100dvh - 250px); overflow:auto; padding-right:4px; }
html:root body .editable-text-review-list article { padding:10px; border:1px solid var(--neutral-line,#dedede); border-radius:7px; }
html:root body .editable-text-review-list article > label:first-child { display:grid; gap:6px; }
html:root body .editable-text-review-list textarea { box-sizing:border-box; width:100%; min-height:56px; padding:7px!important; font-size:12px; line-height:1.5; background:var(--neutral-panel,#fff); color:var(--neutral-text,#242426); border:1px solid var(--neutral-line,#dedede); border-radius:5px; resize:vertical; }
html:root body .editable-text-review-preserve { display:flex; align-items:center; gap:6px; margin-top:7px; font-size:11px; }
html:root body .editable-region-report { padding:8px 0; font-size:11px; }
html:root body .editable-region-report summary { cursor:pointer; line-height:1.6; }
html:root body .editable-region-report ul { list-style:none; padding:0; display:grid; gap:8px; max-height:230px; overflow:auto; }
html:root body .editable-region-report li { display:grid; gap:4px; padding:6px 0; border-bottom:1px solid var(--neutral-line,#dedede); overflow-wrap:anywhere; }
@media(max-width:720px) {
  html:root body .editable-text-review-body { grid-template-columns:minmax(0,1fr); }
  html:root body .editable-text-review-list { max-height:230px; }
  html:root body .editable-text-review-dialog > footer { flex-wrap:wrap; }
  html:root body .editable-text-review-dialog > footer small { flex-basis:100%; }
}
html:root[data-theme="dark"] body #floatingEditorPortal .design-region-annotation-card {
  border-color: var(--neutral-line, #3b4048);
  background: var(--neutral-panel, #202328);
  color: var(--neutral-text, #f5f6f7);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
}
html:root body #floatingEditorPortal .design-region-annotation-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--neutral-line, #e3e3e6);
}
html:root body #floatingEditorPortal .design-region-annotation-card-head > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--neutral-text, #242426);
  font-size: 12px;
  font-weight: 650;
}
html:root body #floatingEditorPortal .design-region-annotation-card-head svg {
  width: 15px;
  height: 15px;
  color: var(--neutral-accent, #a26820);
}
html:root body #floatingEditorPortal .design-region-annotation-card-head button,
html:root body #floatingEditorPortal .design-region-reference-item button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--neutral-muted, #77777d);
  cursor: pointer;
}
html:root body #floatingEditorPortal .design-region-annotation-card-head button:hover,
html:root body #floatingEditorPortal .design-region-reference-item button:hover {
  background: var(--neutral-panel-soft, #f4f4f5);
  color: var(--neutral-text, #242426);
}
html:root body #floatingEditorPortal .design-region-annotation-meta {
  display: block;
  color: var(--neutral-muted, #77777d);
  font-size: 10px;
  line-height: 1.35;
}
html:root body #floatingEditorPortal .design-region-annotation-prompt {
  display: grid;
  gap: 5px;
  color: var(--neutral-muted, #77777d);
  font-size: 10px;
}
html:root body #floatingEditorPortal .design-region-annotation-prompt textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 68px;
  max-height: 120px;
  resize: vertical;
  padding: 8px 9px;
  border: 1px solid var(--neutral-line, #e3e3e6);
  border-radius: 6px;
  background: var(--neutral-panel-soft, #f7f7f8);
  color: var(--neutral-text, #242426);
  font: inherit;
  line-height: 1.45;
}
html:root[data-theme="dark"] body #floatingEditorPortal .design-region-annotation-prompt textarea {
  background: var(--neutral-panel-soft, #292d33);
}
html:root body #floatingEditorPortal .design-region-reference-dropzone {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 52px;
  box-sizing: border-box;
  padding: 8px;
  border: 1px dashed var(--neutral-line, #d3d3d7);
  border-radius: 6px;
  background: var(--neutral-panel-soft, #f7f7f8);
  color: var(--neutral-muted, #77777d);
  cursor: pointer;
}
html:root[data-theme="dark"] body #floatingEditorPortal .design-region-reference-dropzone { background: var(--neutral-panel-soft, #292d33); }
html:root body #floatingEditorPortal .design-region-reference-dropzone > svg { width: 17px; height: 17px; color: var(--neutral-accent, #a26820); }
html:root body #floatingEditorPortal .design-region-reference-dropzone > span { display: grid; gap: 2px; min-width: 0; }
html:root body #floatingEditorPortal .design-region-reference-dropzone strong { color: var(--neutral-text, #242426); font-size: 10px; font-weight: 600; }
html:root body #floatingEditorPortal .design-region-reference-dropzone small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
html:root body #floatingEditorPortal .design-region-reference-upload-btn {
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--neutral-line, #d3d3d7);
  border-radius: 5px;
  background: var(--neutral-panel, #fff);
  color: var(--neutral-text, #242426);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
html:root body #floatingEditorPortal .design-region-reference-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
html:root body #floatingEditorPortal .design-region-reference-list.hidden { display: none; }
html:root body #floatingEditorPortal .design-region-reference-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 4px;
  border: 1px solid var(--neutral-line, #e3e3e6);
  border-radius: 5px;
}
html:root body #floatingEditorPortal .design-region-reference-item img { width: 30px; height: 24px; object-fit: cover; border-radius: 3px; }
html:root body #floatingEditorPortal .design-region-reference-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
html:root body #floatingEditorPortal .design-region-reference-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
  min-width: 0;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--neutral-line, #e3e3e6);
  border-radius: 6px;
}
html:root body #floatingEditorPortal .design-region-reference-modes legend {
  padding: 0 4px;
  color: var(--neutral-muted, #77777d);
  font-size: 10px;
}
html:root body #floatingEditorPortal .design-region-reference-modes > label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--neutral-text, #242426);
  font-size: 10px;
}
html:root body #floatingEditorPortal .design-region-reference-modes input { margin: 0; accent-color: var(--neutral-accent, #a26820); }
html:root body #floatingEditorPortal .design-region-annotation-submit {
  width: 100%;
  min-height: 32px;
  justify-content: center;
  gap: 6px;
}
/* Layer order also has toolbar controls; rows use native drag ordering. */
html:root body #step-edit #layerListView .layer-order-actions > :is([data-layer-action="move-up"], [data-layer-action="move-down"]) { display: none !important; }
html:root body #step-edit #layerListView :is(.layer-visibility-btn, .layer-order-actions > button) {
  display: grid !important;
  place-items: center;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--neutral-muted) !important;
  box-shadow: none !important;
}
html:root body #step-edit #layerListView .editor-layer-item.is-locked [data-layer-action="toggle-lock"] { color: var(--neutral-text) !important; }
html:root body #step-edit #layerListView :is(.layer-visibility-btn, .layer-order-actions > button):hover { background: var(--neutral-panel-soft) !important; color: var(--neutral-accent) !important; }
html:root body #step-edit #layerListView :is(.layer-visibility-btn, .layer-order-actions > button) :is(svg, .fluent-icon) { width: 14px !important; height: 14px !important; }

/* Layer search and type filters. Keep controls compact and neutral. */
html:root body #step-edit #layerListView .editor-layer-head { display:flex; flex-direction:column; align-items:stretch; gap:6px; }
html:root body #step-edit #layerListView .editor-layer-head-title { display:flex; justify-content:space-between; align-items:center; }
html:root body #step-edit #layerListView .editor-layer-tools { display:flex; gap:6px; align-items:center; }
html:root body #step-edit #layerListView .editor-layer-search { display:flex; align-items:center; gap:5px; flex:1; min-width:0; height:26px; padding:0 7px; border:1px solid var(--neutral-line); border-radius:4px; background:var(--neutral-panel-soft); color:var(--neutral-muted); }
html:root body #step-edit #layerListView .editor-layer-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--neutral-text); font:inherit; font-size:11px; }
html:root body #step-edit #layerListView .editor-layer-tools select { height:26px; border:1px solid var(--neutral-line); border-radius:4px; background:var(--neutral-panel-soft); color:var(--neutral-text); font-size:11px; }
html:root body #step-edit #layerListView .editor-layer-item[hidden], html:root body #step-edit #layerListView .editor-layer-filter-empty[hidden] { display:none !important; }
html:root body #step-edit #layerListView .editor-layer-filter-empty { padding:14px 10px; text-align:center; color:var(--neutral-muted); font-size:11px; }

/* /polish-final.css */
/* PPT content review stays inside the compact conversation column. */
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-ppt-page-review,
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-ppt-research-sources {
  display: grid !important; gap: 7px !important; min-width: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-ppt-page-review > details {
  display: block !important; min-width: 0 !important; margin: 0 !important; padding: 10px 12px !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important; border-radius: 9px !important;
  background: transparent !important; color: inherit !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages :is(.assistant-ppt-page-review, .assistant-ppt-research-sources) summary {
  cursor: pointer !important; font-size: 12px !important; line-height: 1.7 !important; overflow-wrap: anywhere !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-ppt-page-review pre {
  margin-top: 8px !important; max-height: 260px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-ppt-research-sources p {
  margin-top: 7px !important;
}
/* ==== consolidated from /workspace-clarity.css (cascade order preserved) ==== */
/* Workspace clarity pass: keep the three-column editor hierarchy visible while
   grouping secondary controls behind compact disclosures. This sheet only
   styles product chrome; slide artwork keeps its own colors. */
html:root body #step-edit.editor-layout > .thumb-panel,
html:root body #step-edit.editor-layout > .inspector:not(.hidden) {
  background: var(--neutral-panel) !important;
  border-color: var(--neutral-line) !important;
}

html:root body #step-edit.editor-layout > .thumb-panel {
  padding: 10px 8px !important;
}
html:root body #step-edit.editor-layout > .thumb-panel > .panel-head {
  min-height: 34px !important;
  margin-bottom: 6px !important;
  padding: 0 4px 7px !important;
  border-bottom: 1px solid var(--neutral-line) !important;
}
html:root body #step-edit.editor-layout > .thumb-panel .advanced-page-tabs {
  gap: 3px !important;
  padding: 3px !important;
  border: 1px solid var(--neutral-line) !important;
  border-radius: 8px !important;
  background: var(--neutral-panel-soft) !important;
}
html:root body #step-edit.editor-layout > .thumb-panel .advanced-page-tabs > button {
  min-height: 30px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: var(--neutral-muted) !important;
  background: transparent !important;
}
html:root body #step-edit.editor-layout > .thumb-panel .advanced-page-tabs > button.active,
html:root body #step-edit.editor-layout > .thumb-panel .advanced-page-tabs > button[aria-selected="true"] {
  color: var(--neutral-accent-strong) !important;
  background: var(--neutral-accent-soft) !important;
  box-shadow: none !important;
}

html:root body #step-edit.editor-layout > .inspector:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  padding: 0 !important;
}
html:root body #step-edit.editor-layout > .inspector > .panel-head {
  flex: 0 0 auto !important;
  min-height: 42px !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--neutral-line) !important;
}
html:root body #step-edit.editor-layout > .inspector > .panel-head h2 {
  font-size: 13px !important;
}
html:root body #step-edit.editor-layout > .inspector > .inspector-view-tabs {
  flex: 0 0 auto !important;
  min-height: 38px !important;
  padding: 4px 8px !important;
  border-bottom: 1px solid var(--neutral-line) !important;
}

/* Secondary editing actions share one predictable disclosure instead of
   competing with the page properties and layer list. */
html:root body #step-edit .inspector-tools-disclosure {
  flex: 0 0 auto !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--neutral-line) !important;
  background: var(--neutral-panel) !important;
}
html:root body #step-edit .inspector-tools-disclosure > summary,
html:root body #step-edit .professional-workbench > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 8px 12px !important;
  color: var(--neutral-text) !important;
  cursor: pointer !important;
  list-style: none !important;
}
html:root body #step-edit .inspector-tools-disclosure > summary::-webkit-details-marker,
html:root body #step-edit .professional-workbench > summary::-webkit-details-marker { display: none !important; }
html:root body #step-edit .inspector-tools-disclosure > summary > span,
html:root body #step-edit .professional-workbench > summary > span {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}
html:root body #step-edit .inspector-tools-disclosure > summary strong,
html:root body #step-edit .professional-workbench > summary span {
  font-size: 12px !important;
  font-weight: 700 !important;
}
html:root body #step-edit .inspector-tools-disclosure > summary small,
html:root body #step-edit .professional-workbench > summary small {
  color: var(--neutral-muted) !important;
  font-size: 10px !important;
}
html:root body #step-edit .inspector-tools-disclosure > summary > svg,
html:root body #step-edit .professional-workbench > summary > svg {
  flex: 0 0 auto !important;
  width: 15px !important;
  height: 15px !important;
  color: var(--neutral-muted) !important;
  transition: transform .16s ease !important;
}
html:root body #step-edit .inspector-tools-disclosure[open] > summary > svg,
html:root body #step-edit .professional-workbench[open] > summary > svg { transform: rotate(180deg) !important; }
html:root body #step-edit .inspector-tools-disclosure > summary:hover,
html:root body #step-edit .professional-workbench > summary:hover {
  background: var(--neutral-panel-soft) !important;
}
html:root body #step-edit .inspector-toolbox-groups {
  display: grid !important;
  gap: 0 !important;
  padding: 0 10px 6px !important;
  border-top: 1px solid var(--neutral-line) !important;
}
html:root body #step-edit .inspector-toolbox-groups > .inspector-tool-section {
  padding: 9px 2px !important;
  border-bottom: 1px solid var(--neutral-line) !important;
}
html:root body #step-edit .inspector-toolbox-groups > .inspector-tool-section:last-child { border-bottom: 0 !important; }
html:root body #step-edit .inspector-toolbox-groups > .inspector-tool-section h3 {
  margin: 0 0 6px !important;
  color: var(--neutral-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
html:root body #step-edit .inspector-toolbox-groups .inspector-tool-grid {
  gap: 5px !important;
}

/* Keep the layer list and selected-object properties easy to scan. */
html:root body #step-edit #layerListView.editor-layer-list {
  margin: 0 12px 10px !important;
  width: auto !important;
  max-height: min(280px, 34vh) !important;
}
html:root body #step-edit #inspectorBody {
  margin-inline: 12px !important;
}

/* Selected-object fields use one compact hierarchy. Keep these overrides in
   the existing chrome layer so legacy themed cards cannot reframe the form. */
@layer assistantChrome {
  html:root body #step-edit #inspectorPropertiesView > #inspectorBody.inspector-organized {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--neutral-text) !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .inspector-selection-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid var(--neutral-line) !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .inspector-selection-head > strong {
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--neutral-text) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .inspector-quick-actions {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized :is(.inspector-property-section, .native-object-controls) {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--neutral-line) !important;
    border-radius: 0 !important;
    color: var(--neutral-text) !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized > .inspector-property-section:last-child {
    border-bottom: 0 !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .inspector-property-section > h3,
  html:root body #step-edit #inspectorBody.inspector-organized .native-object-controls > strong {
    display: block !important;
    margin: 0 0 8px !important;
    color: var(--neutral-text) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized details.inspector-property-section {
    padding: 0 !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .inspector-property-section > summary,
  html:root body #step-edit .inspector-tool-subdisclosure > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 36px !important;
    padding: 6px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--neutral-text) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    list-style: none !important;
    cursor: pointer !important;
  }
  html:root body #step-edit :is(.inspector-property-section, .inspector-tool-subdisclosure) > summary::-webkit-details-marker {
    display: none !important;
  }
  html:root body #step-edit :is(.inspector-property-section, .inspector-tool-subdisclosure) > summary::marker {
    content: "" !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .inspector-property-section > summary:hover,
  html:root body #step-edit .inspector-tool-subdisclosure > summary:hover {
    color: var(--neutral-text) !important;
    background: var(--neutral-panel-soft) !important;
  }
  html:root body #step-edit :is(.inspector-property-section, .inspector-tool-subdisclosure)[open] > summary > :is(svg, i[data-lucide], .fluent-icon-shell) {
    transform: rotate(180deg) !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .inspector-section-grid,
  html:root body #step-edit #inspectorBody.inspector-organized :is(.copy-ai-grid, .native-object-control-grid) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized details.inspector-property-section > :is(.inspector-section-grid, .native-object-control-grid) {
    padding: 0 0 10px !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized :is(.wide, .copy-ai-grid) {
    grid-column: 1 / -1 !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized :is(label, .prop-field) {
    display: grid !important;
    align-content: start !important;
    gap: 4px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized :is(label > span, .prop-field-label) {
    color: var(--neutral-muted) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized :is(input, select, textarea) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    border: 1px solid var(--neutral-line-strong) !important;
    border-radius: 6px !important;
    color: var(--neutral-text) !important;
    -webkit-text-fill-color: currentColor !important;
    background: var(--neutral-panel-soft) !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized textarea {
    height: auto !important;
    resize: vertical !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized input[type="color"] {
    height: 32px !important;
    padding: 3px !important;
    cursor: pointer !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized :is(input, textarea)::placeholder {
    color: var(--neutral-muted) !important;
    opacity: 1 !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized :is(.prop-btn-row, .inspector-align-actions, .inspector-action-grid, .inspector-image-actions) {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .prop-btn-row {
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .inspector-align-actions {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .inspector-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .inspector-image-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding: 8px 0 0 !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized button:not([hidden]):not(.hidden),
  html:root body #step-edit .inspector-toolbox button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 4px 7px !important;
    border: 1px solid var(--neutral-line) !important;
    border-radius: 6px !important;
    color: var(--neutral-text) !important;
    -webkit-text-fill-color: currentColor !important;
    background: var(--neutral-panel-soft) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font: inherit !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .inspector-command.icon-only {
    padding: 4px !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .inspector-quick-actions .inspector-command {
    width: 32px !important;
    flex: 0 0 32px !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized button:not([hidden]):not(.hidden):not(:disabled):hover,
  html:root body #step-edit .inspector-toolbox button:not(:disabled):hover {
    border-color: var(--neutral-line-strong) !important;
    color: var(--neutral-text) !important;
    background: var(--neutral-panel-raised) !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized button:not([hidden]):not(.hidden):is(.is-active, .active, [aria-pressed="true"]),
  html:root body #step-edit .inspector-toolbox button:is(.active, [aria-pressed="true"]) {
    border-color: var(--neutral-line-strong) !important;
    color: var(--neutral-accent-strong) !important;
    background: var(--neutral-panel-raised) !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized :is(button, input, select, textarea):disabled,
  html:root body #step-edit #inspectorBody.inspector-organized button:not([hidden]):not(.hidden):disabled,
  html:root body #step-edit .inspector-toolbox button:disabled {
    color: var(--neutral-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized :is(button, input, select, textarea, summary):focus-visible,
  html:root body #step-edit .inspector-toolbox :is(button, summary):focus-visible {
    outline: 2px solid var(--neutral-line-strong) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized :is(button, summary) :is(svg, i[data-lucide], .fluent-icon-shell),
  html:root body #step-edit .inspector-tool-subdisclosure > summary :is(svg, i[data-lucide], .fluent-icon-shell) {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    flex: 0 0 15px !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: none !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized :is(button, summary) .fluent-icon,
  html:root body #step-edit .inspector-tool-subdisclosure > summary .fluent-icon {
    width: 15px !important;
    height: 15px !important;
    color: inherit !important;
    background-color: currentColor !important;
    opacity: 1 !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized :is(.inspector-source-meta, .native-object-controls) {
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .inspector-source-meta > strong {
    color: var(--neutral-text) !important;
    font-size: 12px !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized :is(.inspector-source-meta > span, .native-control-hint, .inspector-selection-head small, .inspector-lock-notice) {
    color: var(--neutral-muted) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .inspector-lock-notice {
    padding-top: 6px !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .native-color-control {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .native-color-control input[type="color"] {
    flex: 0 0 32px !important;
    width: 32px !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .native-table-scroll {
    max-width: 100% !important;
    max-height: 280px !important;
    overflow: auto !important;
    border: 1px solid var(--neutral-line) !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .native-cell-editor {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .native-cell-editor td {
    padding: 4px !important;
    border: 1px solid var(--neutral-line) !important;
    background: transparent !important;
  }
  html:root body #step-edit #inspectorBody.inspector-organized .native-cell-editor textarea {
    min-width: 100px !important;
  }
  html:root body #step-edit .inspector-tool-subdisclosure {
    margin: 5px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--neutral-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html:root body #step-edit .inspector-tool-subdisclosure > summary {
    color: var(--neutral-muted) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
  }
  html:root body #step-edit .inspector-tool-subdisclosure > .inspector-tool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding-bottom: 4px !important;
  }
}

@media (max-width: 1023px) {
  html:root body #step-edit.editor-layout > .thumb-panel { padding: 8px !important; }
  html:root body #step-edit .inspector-tools-disclosure > summary,
  html:root body #step-edit .professional-workbench > summary { min-height: 40px !important; }
}

/* ==== consolidated from /assistant-clean-ui.css (cascade order preserved) ==== */
/*
 * Minimal assistant chrome for the floating/sidebar assistant.
 * The assistant has many capabilities, but the primary surface should read
 * as one conversation: context is compact, messages get the space, and
 * advanced controls remain available from + 添加 and 更多工具.
 */

html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) {
  --assistant-clean-bg: #f7f5f1;
  --assistant-clean-soft: #efebe5;
  --assistant-clean-line: #d8d0c5;
  --assistant-clean-text: #2d2a26;
  --assistant-clean-muted: #766f66;
  --assistant-clean-accent: #ad7635;
  --assistant-clean-accent-strong: #89561f;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow: hidden !important;
  color: var(--assistant-clean-text) !important;
  background: var(--assistant-clean-bg) !important;
  border: 1px solid var(--assistant-clean-line) !important;
  box-shadow: none !important;
}

html:root[data-theme="dark"] body #assistantDrawer.assistant-sidebar-entry:not(.embedded) {
  --assistant-clean-bg: #171717;
  --assistant-clean-soft: #222222;
  --assistant-clean-line: #3a3835;
  --assistant-clean-text: #f2eee8;
  --assistant-clean-muted: #aaa39a;
  --assistant-clean-accent: #c28a47;
  --assistant-clean-accent-strong: #d09a58;
  box-shadow: none !important;
}

/* The header keeps only controls that change the assistant surface. */
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > .assistant-header {
  min-height: 52px !important;
  height: 52px !important;
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--assistant-clean-line) !important;
  background: var(--assistant-clean-bg) !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) .assistant-header-actions {
  gap: 4px !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) .assistant-header-actions > :is(#assistantVoiceNoticeBtn, #assistantRightWorkbenchToggle) {
  display: none !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) .assistant-header-actions > button {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  border: 1px solid var(--assistant-clean-line) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--assistant-clean-muted) !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) .assistant-header-actions > button:hover,
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) .assistant-header-actions > button:focus-visible {
  border-color: var(--assistant-clean-accent) !important;
  color: var(--assistant-clean-accent-strong) !important;
  background: var(--assistant-clean-soft) !important;
}

/* One compact status row replaces the repeated project/context cards. */
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantSideWorkspace {
  display: flex !important;
  align-items: center !important;
  min-height: 38px !important;
  height: 38px !important;
  max-height: 38px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--assistant-clean-line) !important;
  background: var(--assistant-clean-bg) !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantSideWorkspace > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 11px !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantSideWorkspace > header > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--assistant-clean-muted) !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantSideWorkspaceSummary,
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantSidePdfBtn {
  display: none !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) .assistant-side-workspace-status {
  flex: 0 0 auto !important;
  color: var(--assistant-clean-accent-strong) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

/* Repeated context, design brief and shortcut rows are available elsewhere
   in the assistant and should not compete with the conversation. */
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > :is(
  .assistant-context-block,
  #assistantBriefSummary,
  #assistantDesignHub,
  .assistant-brief-actions,
  #assistantSuggestions
) {
  display: none !important;
}

html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > :is(#assistantTasks, #assistantPdfRedesign):not(.hidden) {
  flex: 0 0 auto !important;
  max-height: 78px !important;
  overflow: auto !important;
  border-bottom: 1px solid var(--assistant-clean-line) !important;
}

/* Give the conversation the majority of the drawer height. */
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantMessages {
  flex: 1 1 auto !important;
  min-height: 220px !important;
  width: 100% !important;
  padding: 14px 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--assistant-clean-bg) !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantMessages .assistant-message {
  margin: 0 0 12px !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantMessages .assistant-message-content {
  border: 1px solid var(--assistant-clean-line) !important;
  border-left: 2px solid var(--assistant-clean-accent) !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantMessages .assistant-message-actions {
  gap: 4px !important;
  margin-top: 6px !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantMessages .assistant-message-actions > .assistant-message-action-btn:not(:first-child),
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantMessages .assistant-message-actions > .assistant-message-legacy-stop {
  display: none !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantMessages .assistant-message-action-btn,
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantMessages .assistant-message-more-menu > summary {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border: 1px solid var(--assistant-clean-line) !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--assistant-clean-muted) !important;
}

/* Keep legacy task markers neutral inside the assistant conversation. */
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantMessages .assistant-history-task-label {
  margin: 10px 0 6px !important;
  padding: 0 !important;
  color: var(--assistant-clean-muted) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 650 !important;
}

/* Input remains prominent; low-frequency controls are reached via + and 更多工具. */
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantComposer {
  flex: 0 0 auto !important;
  width: calc(100% - 16px) !important;
  max-width: calc(100% - 16px) !important;
  min-height: 112px !important;
  height: 112px !important;
  max-height: 112px !important;
  margin: 8px !important;
  padding: 8px !important;
  grid-template-columns: 32px minmax(0, 1fr) 32px 38px !important;
  grid-template-rows: 58px 32px !important;
  gap: 6px !important;
  border: 1px solid var(--assistant-clean-line) !important;
  border-radius: 12px !important;
  background: var(--assistant-clean-soft) !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantComposer > #assistantInput {
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  padding: 8px 10px !important;
  color: var(--assistant-clean-text) !important;
  background: transparent !important;
  border: 0 !important;
  resize: none !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantComposer > #assistantInput::placeholder {
  color: var(--assistant-clean-muted) !important;
  opacity: 1 !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantComposer > :is(#assistantAddBtn, #assistantVoiceInputBtn, #assistantSendBtn) {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border: 1px solid var(--assistant-clean-line) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--assistant-clean-muted) !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantComposer > #assistantSendBtn {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  background: var(--assistant-clean-accent) !important;
  border-color: var(--assistant-clean-accent) !important;
  color: #fff !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantComposer > :is(#assistantAddBtn, #assistantVoiceInputBtn):hover,
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantComposer > :is(#assistantAddBtn, #assistantVoiceInputBtn):focus-visible {
  background: var(--assistant-clean-bg) !important;
  border-color: var(--assistant-clean-accent) !important;
  color: var(--assistant-clean-accent-strong) !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantComposer > .assistant-composer-tools {
  display: flex !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: hidden !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantComposer > .assistant-composer-tools > :is(.assistant-composer-copy-tools, #assistantImageSettingsBtn, #assistantAdvancedOptionsBtn, #assistantSecondaryTools) {
  display: none !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantComposer > .assistant-composer-tools > :is(#assistantModeSwitch, #assistantSkillsWrap, .assistant-quick-tools-wrap) {
  display: flex !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 32px !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantComposer .assistant-composer-tools :is(#assistantModeTrigger, #assistantSkillsTrigger, #assistantQuickToolsBtn) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  padding: 0 7px !important;
  overflow: hidden !important;
  border: 1px solid var(--assistant-clean-line) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--assistant-clean-muted) !important;
  font-size: 10px !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantComposer .assistant-composer-tools :is(#assistantModeTrigger, #assistantSkillsTrigger, #assistantQuickToolsBtn):hover,
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > #assistantComposer .assistant-composer-tools :is(#assistantModeTrigger, #assistantSkillsTrigger, #assistantQuickToolsBtn)[aria-expanded="true"] {
  color: var(--assistant-clean-accent-strong) !important;
  border-color: var(--assistant-clean-accent) !important;
  background: var(--assistant-clean-bg) !important;
}

html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) > .assistant-composer-hint {
  display: none !important;
}

/* Detail cards are still rendered by the base assistant styles. Keep their
   information hierarchy, but remove the legacy blue surfaces so the drawer
   reads as one neutral, warm interface. Warning states retain their amber
   treatment below. */
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) :is(
  .assistant-history-task-label,
  .assistant-artifact-evidence,
  .assistant-quality-gate,
  .assistant-design-strategy,
  .assistant-professional-review,
  .assistant-production-checks,
  .assistant-artifact-quick-retry,
  .assistant-delivery-preview-prompt,
  .assistant-artifact-quality-meta,
  .assistant-work-tools
) {
  --assistant-blue-surface: var(--assistant-clean-soft) !important;
  --assistant-blue-line: var(--assistant-clean-line) !important;
  border-color: var(--assistant-clean-line) !important;
  background: var(--assistant-clean-soft) !important;
  color: var(--assistant-clean-text) !important;
}

html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) :is(
  .assistant-history-task-label,
  .assistant-artifact-evidence > summary,
  .assistant-quality-gate > summary,
  .assistant-design-strategy > summary,
  .assistant-professional-review > summary,
  .assistant-production-checks > header,
  .assistant-artifact-quick-retry > header,
  .assistant-delivery-preview-prompt > header,
  .assistant-artifact-quality-meta
) {
  background: var(--assistant-clean-soft) !important;
  color: var(--assistant-clean-text) !important;
}

html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) :is(
  .assistant-artifact-evidence > dl > div,
  .assistant-quality-gate-body > ul > li,
  .assistant-design-strategy-meta > span,
  .assistant-design-strategy-workflow > span,
  .assistant-design-strategy-columns > section,
  .assistant-design-strategy-pages > li,
  .assistant-design-strategy-route span,
  .assistant-design-strategy-locks span,
  .assistant-professional-review-checks > li,
  .assistant-professional-review-issues > li,
  .assistant-production-checks > ul > li,
  .assistant-artifact-quick-retry button
) {
  border-color: var(--assistant-clean-line) !important;
  background: var(--assistant-clean-bg) !important;
  color: var(--assistant-clean-text) !important;
}

/* Keep semantic warning / blocked colors, while removing blue success chips. */
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) :is(
  .assistant-quality-gate.warning,
  .assistant-professional-review.needs-review,
  .assistant-design-strategy-missing
) {
  background: color-mix(in srgb, var(--assistant-clean-accent) 10%, var(--assistant-clean-bg)) !important;
  border-color: color-mix(in srgb, var(--assistant-clean-accent) 34%, var(--assistant-clean-line)) !important;
}

html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) :is(
  .assistant-design-strategy-pages > li > b,
  .assistant-artifact-evidence-lock,
  .assistant-quality-gate > summary em,
  .assistant-professional-review > summary em
) {
  color: var(--assistant-clean-accent-strong) !important;
}

html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) .assistant-professional-review-score,
html:root body #assistantDrawer.assistant-sidebar-entry:not(.embedded) .assistant-design-strategy-pages > li > b {
  background: var(--assistant-clean-soft) !important;
  border-color: var(--assistant-clean-line) !important;
  color: var(--assistant-clean-accent-strong) !important;
}

/* ==== consolidated from /ui-contrast-final.css (cascade order preserved) ==== */
/* Product controls are flat. Keep this in the existing chrome layer because
   its important declarations take precedence over legacy unlayered themes. */
@layer assistantChrome {
  html:root[data-theme] body:not(#appShell) :is(button, a.ghost-btn, a.primary-btn, summary)
    :is(.fluent-icon-shell, .fluent-icon, svg.lucide, svg[data-lucide], i[data-lucide]) {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: none !important;
  }

  html:root[data-theme] body:not(#appShell) :is(button, a.ghost-btn, a.primary-btn, summary) {
    appearance: none !important;
    -webkit-appearance: none !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  html:root[data-theme] body:not(#appShell) :is(#projectHomeModeSwitch, #workbenchModeBridge) button > span {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html:root[data-theme] body.workbench-editor-active #appShell > .topbar #projectHomeBtn {
    color: var(--neutral-text) !important;
  }
  html:root[data-theme] body.workbench-editor-active #step-edit > .inspector summary {
    color: var(--neutral-text) !important;
  }
  html:root[data-theme] body.workbench-editor-active #step-edit > .inspector summary :is(span, strong) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html:root[data-theme] body:not(#appShell) #assistantDrawer #assistantComposer :is(#assistantModeSwitch, .assistant-quick-tools-wrap) {
    background: var(--neutral-panel-soft) !important;
    border-color: var(--neutral-line) !important;
    background-image: none !important;
  }

  html:root[data-theme] body.workbench-editor-active #floatingEditorPortal .image-workbench {
    box-sizing: border-box !important;
    min-width: 0 !important;
    container: imageTools / inline-size;
    color: var(--neutral-text) !important;
    background: var(--neutral-panel) !important;
    border: 1px solid var(--neutral-line-strong) !important;
    border-radius: 8px !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  html:root[data-theme] body.workbench-editor-active #floatingEditorPortal .image-workbench.is-collapsed {
    max-height: none !important;
  }
  html:root[data-theme] body.workbench-editor-active :is(#step-edit, #floatingEditorPortal)
    :is(.floating-image-head, .floating-image-tabs, .floating-image-identity img) {
    color: var(--neutral-text) !important;
    background: var(--neutral-panel-soft) !important;
    border-color: var(--neutral-line) !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  html:root[data-theme] body.workbench-editor-active :is(#step-edit, #floatingEditorPortal)
    :is(.floating-image-tabs button, .floating-image-identity span, .floating-panel-collapse) {
    color: var(--neutral-text) !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html:root[data-theme] body.workbench-editor-active :is(#step-edit, #floatingEditorPortal) .floating-image-tabs button.active {
    color: var(--neutral-text) !important;
    background: var(--neutral-panel) !important;
    border-color: var(--neutral-line) !important;
  }
  html:root[data-theme] body.workbench-editor-active :is(#step-edit, #floatingEditorPortal) .floating-tool-grip i {
    background: var(--neutral-muted) !important;
  }
  html:root[data-theme] body.workbench-editor-active #floatingEditorPortal .image-workbench .floating-image-head {
    gap: 8px !important;
    background: var(--neutral-panel) !important;
  }
  html:root[data-theme] body.workbench-editor-active #floatingEditorPortal .floating-image-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  html:root[data-theme] body.workbench-editor-active #floatingEditorPortal .floating-image-tabs button {
    min-width: 0 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }
  html:root[data-theme] body.workbench-editor-active #floatingEditorPortal .floating-image-tabs button svg {
    flex: 0 0 14px !important;
  }
  html:root[data-theme] body.workbench-editor-active #floatingEditorPortal [data-image-tools-kind="native"] .floating-image-identity {
    flex: 0 1 120px !important;
  }
  html:root[data-theme] body.workbench-editor-active #floatingEditorPortal [data-image-tools-kind="native"] .floating-image-tabs {
    flex: 1 1 auto !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    border: 0 !important;
    background: transparent !important;
  }
  html:root[data-theme] body.workbench-editor-active #floatingEditorPortal [data-image-tools-kind="native"] .floating-image-tabs button {
    min-height: 30px !important;
    border: 1px solid var(--neutral-line-strong) !important;
    background: var(--neutral-panel-soft) !important;
  }
  html:root[data-theme] body.workbench-editor-active #floatingEditorPortal .floating-panel-collapse {
    border-color: var(--neutral-line-strong) !important;
    background: var(--neutral-panel-soft) !important;
  }
  @container imageTools (max-width: 420px) {
    html:root[data-theme] body.workbench-editor-active #floatingEditorPortal .floating-image-head {
      flex-direction: row !important;
      flex-wrap: wrap !important;
      align-items: center !important;
    }
    html:root[data-theme] body.workbench-editor-active #floatingEditorPortal .floating-image-identity {
      flex: 1 1 0 !important;
    }
    html:root[data-theme] body.workbench-editor-active #floatingEditorPortal .floating-image-tabs {
      flex-basis: 100% !important;
      order: 1 !important;
    }
  }
  @container imageTools (max-width: 300px) {
    html:root[data-theme] body.workbench-editor-active #floatingEditorPortal .floating-image-tabs button {
      flex-direction: column !important;
      gap: 2px !important;
      min-height: 42px !important;
      padding: 3px !important;
    }
  }
  html:root[data-theme] body.workbench-editor-active #step-edit > .inspector input[type="color"] {
    color: var(--neutral-text) !important;
    background: var(--neutral-panel-soft) !important;
    border-color: var(--neutral-line) !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  html:root[data-theme] body.workbench-editor-active #step-edit #layerListView > .editor-layer-item.active {
    color: var(--neutral-text) !important;
    -webkit-text-fill-color: currentColor !important;
    border-left: 2px solid var(--neutral-accent) !important;
    padding-left: 4px !important;
    box-shadow: none !important;
  }

  html:root[data-theme] body:not(#appShell) button {
    border-style: solid !important;
    background-image: none !important;
  }

  html:root[data-theme] body:not(#appShell) .assistant-mode-trigger-icon {
    color: inherit !important;
  }

  html:root[data-theme] body:not(#appShell) :is(
    .assistant-message-actions, .dashboard-task-delete, .dashboard-task-row.is-done
  ) {
    opacity: 1 !important;
  }
  html:root[data-theme] body:not(#appShell) .dashboard-task-delete {
    color: var(--neutral-muted) !important;
  }
  html:root[data-theme] body:not(#appShell) .dashboard-task-delete:hover {
    color: #c43c3c !important;
  }
  html:root[data-theme] body:not(#appShell) .project-card-menu > summary {
    color: var(--neutral-text) !important;
    background: var(--neutral-panel) !important;
    border: 1px solid var(--neutral-line-strong) !important;
    opacity: 1 !important;
  }
  html:root[data-theme] body:not(#appShell) :is(.design-thumb-select, .representative-thumb-select).selected {
    color: var(--neutral-accent-text) !important;
  }

  html:root[data-theme] body:not(#appShell) :is(input, textarea, select) {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  html:root[data-theme] body:not(#appShell) :is(input, textarea, select):focus-visible {
    outline: 1px solid var(--neutral-accent) !important;
    outline-offset: 1px !important;
    border-color: var(--neutral-accent) !important;
  }

  html:root[data-theme] body:not(#appShell) .image-preview-trigger {
    color: var(--neutral-text) !important;
    background: var(--neutral-panel) !important;
    border: 1px solid var(--neutral-line-strong) !important;
    border-radius: 4px !important;
    filter: none !important;
  }
  html:root[data-theme] body:not(#appShell) .assistant-brand-mark {
    filter: none !important;
  }

  html:root[data-theme] body:not(#appShell) #canvasViewSwitch > button {
    border: 1px solid transparent !important;
  }
  html:root[data-theme] body:not(#appShell) #canvasViewSwitch > button.active {
    color: var(--neutral-accent-text) !important;
    background: var(--neutral-accent) !important;
    border-color: var(--neutral-accent) !important;
  }

  html:root[data-theme] body:not(#appShell) :is(.document-tab, .document-home-tab).active {
    border-bottom: 1px solid var(--neutral-accent) !important;
  }

  html:root[data-theme] body:not(#appShell) :is(button, a.ghost-btn, a.primary-btn, summary):focus-visible {
    outline: 2px solid var(--neutral-accent) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
  }

  html:root[data-theme] body:not(#appShell) :is(
    #step-create, #editorRibbon, .editor-top-ribbon, #canvasViewSwitch,
    #documentTabsBar, .document-tab, .document-home-tab,
    .workflow-thumb-image, .thumb, .thumb-panel, .inspector,
    .design-thumb-select, .representative-thumb-select, .design-control-disclosure,
    #slideCanvas, #projectHubView, .home-style-card-foot i,
    #assistantDrawer.assistant-sidebar-entry, #assistantFloatLauncher,
    #assistantAddMenu, #assistantQuickToolsPanel, #assistantImageSettingsPanel,
    #appAvatarMenu, #topbarExportMenu, #topbarTaskProgressDialog,
    #settingsAccentMenu, .assistant-select-menu, .assistant-message-more-popover,
    .assistant-conversion-review-dialog, #assistantMessages,
    .file-center-shell, .file-center-content,
    #settingsModal .settings-window, .settings-segmented input:checked + span,
    #toast, .toast, .generation-progress, .control-tooltip,
    .editor-popover, .editor-dropdown, .editor-context-menu, .slide-browser-popover,
    .image-viewer-editable-options, .image-viewer-stage > img,
    .credits-popover, .project-card-menu-popover, .source-version-dialog, .design-workspace-dialog,
    .dashboard-dialog, .assistant-redaction-dialog, .style-library-dialog,
    .layout-library-dialog, .canvas-size-dialog, .onboarding-window,
    dialog, [role="dialog"], [role="menu"],
    .floating-editor-tools, .selection-tools, #copyRepresentativeDock
  ) {
    box-shadow: none !important;
  }

  html:root[data-theme] body:not(#appShell) .thumb::before,
  html:root[data-theme] body:not(#appShell) .thumb::after {
    box-shadow: none !important;
  }

  html:root[data-theme] body.workbench-editor-active #step-edit :is(
    .workflow-smart-command, .workflow-inspector-section,
    .delivery-preflight-panel, .delivery-readiness, .design-category-toolbar,
    .design-category-toolbar-main, .design-category-toolbar-workspace,
    .design-category-toolbar-specs, .design-category-toolbar-end,
    .desktop-modal, .modal-content, .popover-content, [role="dialog"], [role="menu"]
  ) {
    box-shadow: none !important;
  }
}

/* Shared appearance tokens also own aliases declared inside legacy modules.
   Keep document artwork outside these application-chrome scopes. */
@layer assistantChrome {
  html:root[data-theme] {
    --ui-content-bg: #ffffff !important;
    color-scheme: light;
  }
  html:root[data-theme="dark"] {
    --ui-content-bg: var(--neutral-bg) !important;
    color-scheme: dark;
  }
  html:root[data-theme] body {
    --chat-bg: var(--ui-content-bg) !important;
    --chat-panel: var(--neutral-chrome) !important;
    --chat-input: var(--neutral-panel-soft) !important;
    --chat-user: var(--neutral-panel-soft) !important;
    --chat-text: var(--neutral-text) !important;
    --chat-muted: var(--neutral-muted) !important;
    --chat-line: var(--neutral-line) !important;
    --work-bg: var(--ui-content-bg) !important;
    --work-panel: var(--neutral-chrome) !important;
    --work-surface: var(--neutral-panel) !important;
    --work-surface-soft: var(--neutral-panel-soft) !important;
    --work-text: var(--neutral-text) !important;
    --work-muted: var(--neutral-muted) !important;
    --work-faint: var(--neutral-faint) !important;
    --work-line: var(--neutral-line) !important;
    --work-line-strong: var(--neutral-line-strong) !important;
    --work-hover: var(--neutral-panel-soft) !important;
    --work-active: var(--neutral-panel-raised) !important;
    --work-composer: var(--neutral-panel-soft) !important;
    --work-icon: var(--neutral-muted) !important;
  }
  html:root[data-theme] body :is(#step-create, #settingsModal, .settings-window) {
    --minimal-surface: var(--ui-content-bg) !important;
    --minimal-subtle: var(--neutral-panel-soft) !important;
    --minimal-line: var(--neutral-line) !important;
    --minimal-text: var(--neutral-text) !important;
    --minimal-muted: var(--neutral-muted) !important;
    --settings-surface: var(--neutral-panel) !important;
    --settings-nav-surface: var(--neutral-chrome) !important;
    --settings-raised: var(--neutral-panel) !important;
    --settings-subtle: var(--neutral-panel-soft) !important;
    --settings-hover: var(--neutral-panel-soft) !important;
    --settings-active: var(--neutral-panel-raised) !important;
    --settings-text: var(--neutral-text) !important;
    --settings-muted: var(--neutral-muted) !important;
    --settings-faint: var(--neutral-faint) !important;
    --settings-line: var(--neutral-line) !important;
    --settings-line-strong: var(--neutral-line-strong) !important;
    --settings-control: var(--neutral-panel) !important;
    --settings-shadow: none !important;
  }
  html:root[data-theme] body[data-project-home-mode="work"] #step-create
    :is(.project-home-content, #projectHomeWork, .project-home-chat-topbar) {
    background: var(--ui-content-bg) !important;
  }
  html:root[data-theme] body:is([data-project-home-mode="chat"], [data-project-home-mode="work"])
    #step-create .project-home-nav {
    background: var(--neutral-chrome) !important;
    border-color: var(--neutral-line) !important;
  }
  html:root[data-theme] body:is([data-project-home-mode="chat"], [data-project-home-mode="work"])
    :is(#projectHomeModeSwitch, #workbenchModeBridge) {
    background: transparent !important;
    border: 1px solid var(--neutral-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
  html:root[data-theme] body:is([data-project-home-mode="chat"], [data-project-home-mode="work"])
    :is(#projectHomeModeSwitch, #workbenchModeBridge) > button {
    color: var(--neutral-muted) !important;
    background: transparent !important;
    border-color: transparent !important;
  }
  html:root[data-theme] body:is([data-project-home-mode="chat"], [data-project-home-mode="work"])
    :is(#projectHomeModeSwitch, #workbenchModeBridge) > button:is(.active, [aria-selected="true"]) {
    color: var(--neutral-text) !important;
    background: var(--neutral-panel-soft) !important;
  }
  html:root[data-theme] body:is([data-project-home-mode="chat"], [data-project-home-mode="work"])
    :is(.project-home-heading h2, .project-home-heading h3) {
    font-size: 26px !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }
  html:root[data-theme] body #assistantDrawer .assistant-context-block:has(#assistantEditContext) {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html:root[data-theme] body #assistantDrawer #assistantEditContext {
    min-height: 28px !important;
    padding: 4px 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--neutral-muted) !important;
    font-size: 12px !important;
  }
  html:root[data-theme] body #assistantDrawer #assistantComposer {
    border-radius: 8px !important;
  }
  html:root[data-theme] body #settingsModal.desktop-modal {
    background: rgb(0 0 0 / 30%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html:root[data-theme="dark"] body #settingsModal.desktop-modal {
    background: rgb(0 0 0 / 58%) !important;
  }
  html:root[data-theme] body #settingsModal .settings-window {
    border-radius: 8px !important;
    box-shadow: none !important;
  }
  html:root[data-theme] body #settingsModal :is(.settings-header h2, .settings-pane h3) {
    color: var(--neutral-text) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 20px !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
  }
  html:root[data-theme] body #settingsModal :is(.settings-content, .settings-nav button.active, .settings-facts dd, .settings-toggle, .settings-subhead strong) {
    color: var(--neutral-text) !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html:root[data-theme] body #settingsModal #closeSettingsBtn {
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--neutral-text) !important;
    opacity: 1 !important;
  }
  html:root[data-theme] body #settingsModal :is(.settings-note, .settings-subhead span, .settings-header p) {
    color: var(--neutral-muted) !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html:root[data-theme] body #settingsModal .settings-content {
    padding-top: 28px !important;
  }
  html:root[data-theme] body #settingsModal .settings-pane h3 {
    margin-bottom: 20px !important;
  }
  html:root[data-theme] body.workbench-editor-active #step-edit > .editor-top-ribbon
    :is(button.ghost-btn:not(.active):not([aria-pressed="true"]), button:disabled) {
    color: var(--neutral-text) !important;
    -webkit-text-fill-color: currentColor !important;
    background: var(--neutral-panel-soft) !important;
    background-image: none !important;
    border-color: var(--neutral-line) !important;
    box-shadow: none !important;
  }
  html:root[data-theme] body.workbench-editor-active #step-edit > .editor-top-ribbon button:disabled {
    color: var(--neutral-muted) !important;
    cursor: not-allowed;
    opacity: .65 !important;
  }
}

/* Keep shortcut tools in a dedicated track in object-editing views. */
@media (min-width: 1024px) {
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit.editor-layout:is(.copy-canvas-mode, .editable-canvas-mode):not(.copy-planning-mode, .workflow-graph-mode, .workflow-panel-open, .design-preview-mode, .style-preview-mode, .review-workflow-mode, .delivery-workflow-mode, .social-publish-mode) {
    grid-template-columns: var(--editor-left-track, var(--editor-left-width, 220px)) 46px minmax(0, 1fr) var(--editor-right-track, var(--editor-right-width, 300px)) !important;
  }

  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit.editor-layout:is(.copy-canvas-mode, .editable-canvas-mode):not(.copy-planning-mode, .workflow-graph-mode, .workflow-panel-open, .design-preview-mode, .style-preview-mode, .review-workflow-mode, .delivery-workflow-mode, .social-publish-mode) > .editor-tool-rail {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: center !important;
    box-sizing: border-box !important;
    width: 46px !important;
    height: max-content !important;
    max-height: calc(100% - 24px) !important;
    min-height: 0 !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 8px 4px !important;
    overflow: hidden auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    border: 1px solid var(--editor-chrome-line, #e5e5e5) !important;
    border-radius: 8px !important;
    background: var(--editor-chrome-bg, #f7f7f8) !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit.editor-layout:is(.copy-canvas-mode, .editable-canvas-mode):not(.copy-planning-mode, .workflow-graph-mode, .workflow-panel-open, .design-preview-mode, .style-preview-mode, .review-workflow-mode, .delivery-workflow-mode, .social-publish-mode) > .canvas-area {
    grid-column: 3 !important;
  }

  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit.editor-layout:is(.copy-canvas-mode, .editable-canvas-mode):not(.copy-planning-mode, .workflow-graph-mode, .workflow-panel-open, .design-preview-mode, .style-preview-mode, .review-workflow-mode, .delivery-workflow-mode, .social-publish-mode) > .inspector {
    grid-column: 4 !important;
  }

  html:root body.workbench-editor-active #appShell #step-edit:is(.copy-canvas-mode, .editable-canvas-mode):has(> .editor-tool-rail) #editorRibbon :is(.ribbon-mode-actions, .ribbon-insert-actions) {
    display: none !important;
  }
}

@layer assistantChrome {
  html:root body.workbench-editor-active #editorToolRail > button {
    display: grid !important;
    flex: 0 0 34px !important;
    width: 36px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 5px !important;
    color: var(--neutral-text, #303030) !important;
    background: transparent !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }
  html:root body.workbench-editor-active #editorToolRail > button:hover:not(:disabled) {
    background: var(--neutral-panel-soft, #f1f1f1) !important;
  }
  html:root body.workbench-editor-active #editorToolRail > button.active {
    color: var(--neutral-accent-strong, #6b5638) !important;
    background: var(--neutral-accent-soft, #eeeeee) !important;
  }
  html:root body.workbench-editor-active #editorToolRail > button:disabled {
    color: var(--neutral-muted, #777777) !important;
    opacity: .75 !important;
  }
  html:root body.workbench-editor-active #editorToolRail > button::before {
    display: none !important;
  }
  html:root body.workbench-editor-active #editorToolRail > button > span:not(.fluent-icon-shell) {
    display: none !important;
  }
  html:root body.workbench-editor-active #editorToolRail > button :is(.fluent-icon-shell, svg) {
    width: 18px !important;
    height: 18px !important;
    color: inherit !important;
  }
}

@media (max-width: 1023px) {
  html:root body.workbench-editor-active #step-edit > .editor-tool-rail { display: none !important; }
}

@layer assistantChrome {
  html:root body.workbench-editor-active #step-edit:is(.copy-canvas-mode, .editable-canvas-mode):not(.copy-planning-mode) #editorRibbon .ribbon-design-region-action {
    display: none !important;
  }
  html:root body.workbench-editor-active #viewSourceCanvasBtn {
    color: var(--neutral-text) !important;
    background: transparent !important;
    border-color: var(--neutral-line) !important;
  }

  html:root body.workbench-editor-active #step-edit:is(.copy-canvas-mode, .editable-canvas-mode) #inspectorPropertiesView > .inspector-tools-disclosure {
    order: -2 !important;
  }
  html:root body.workbench-editor-active #step-edit:is(.copy-canvas-mode, .editable-canvas-mode) #inspectorPropertiesView > #inspectorBody {
    order: -3 !important;
  }
  html:root body.workbench-editor-active #step-edit:is(.copy-canvas-mode, .editable-canvas-mode) #inspectorPropertiesView > #inspectorBody.inspector-empty-state {
    min-height: 36px !important;
    padding: 4px 0 !important;
    justify-content: flex-start !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: left !important;
  }
  html:root body.workbench-editor-active #step-edit .inspector-empty-card {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    max-width: 100% !important;
  }
  html:root body.workbench-editor-active #step-edit .inspector-empty-icon {
    width: 20px !important;
    height: 20px !important;
    border: 0 !important;
    background: transparent !important;
  }
  html:root body.workbench-editor-active #step-edit .inspector-empty-card strong {
    color: var(--neutral-muted) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
  }

  html:root body.workbench-editor-active #editorToolRail .editor-rail-menu:not(:popover-open) {
    display: none !important;
  }
  html:root body.workbench-editor-active #editorToolRail .editor-rail-menu:popover-open {
    display: grid !important;
    position: fixed !important;
    inset: auto;
    box-sizing: border-box !important;
    width: 220px !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    margin: 0 !important;
    padding: 12px !important;
    gap: 8px !important;
    overflow: auto !important;
    border: 1px solid var(--neutral-line-strong) !important;
    border-radius: 6px !important;
    color: var(--neutral-text) !important;
    background: var(--neutral-panel) !important;
    box-shadow: none !important;
  }
  html:root body.workbench-editor-active #editorToolRail .editor-rail-menu > strong {
    font-size: 12px !important;
    line-height: 20px !important;
  }
  html:root body.workbench-editor-active #editorToolRail .editor-rail-menu .editor-shape-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit #editorToolRail .editor-rail-menu button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    box-sizing: border-box !important;
    padding: 4px 8px !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: var(--neutral-text) !important;
    background: transparent !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit #editorToolRail .editor-rail-menu button::before {
    display: none !important;
  }
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit #editorToolRail .editor-rail-menu button > span:not(.fluent-icon-shell) {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
    font-size: 12px !important;
    text-indent: 0 !important;
  }
  html:root body.workbench-editor-active #editorToolRail .editor-rail-menu button:hover:not(:disabled) {
    background: var(--neutral-panel-soft) !important;
  }
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit #editorToolRail .editor-rail-menu button :is(.fluent-icon-shell, svg, i[data-lucide]) {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
  }
  html:root body.workbench-editor-active #editorToolRail .editor-rail-menu .editor-shape-more {
    border-top: 1px solid var(--neutral-line) !important;
    border-radius: 0 !important;
  }
  html:root body.workbench-editor-active #editorToolRail .editor-rail-menu .editor-rail-menu-section {
    padding-top: 8px !important;
    border-top: 1px solid var(--neutral-line) !important;
  }
  html:root body.workbench-editor-active #editorToolRail :is(#editorAlignMenu, #editorArrangeMenu):popover-open {
    width: 260px !important;
  }
  html:root body.workbench-editor-active #editorToolRail #editorAlignMenu .editor-align-options {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit #editorToolRail #editorAlignMenu .editor-align-options button {
    flex-direction: column !important;
    justify-content: center !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 5px 2px !important;
    gap: 4px !important;
  }
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit #editorToolRail #editorAlignMenu .editor-align-options button > span:not(.fluent-icon-shell) {
    font-size: 11px !important;
    line-height: 14px !important;
  }
  html:root body.workbench-editor-active #appShell#appShell #step-edit#step-edit #editorToolRail .editor-rail-menu button:disabled {
    color: var(--neutral-muted) !important;
    opacity: .7 !important;
    cursor: not-allowed !important;
  }

  html:root[data-theme] body.workbench-editor-active :is(#step-edit, #floatingEditorPortal) .floating-editor-tools.text-tools {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: min(360px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-width: min(380px, calc(100vw - 24px)) !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 4px 8px !important;
    gap: 0 !important;
    overflow: hidden !important;
    color: var(--neutral-text) !important;
    background: var(--neutral-panel) !important;
    background-image: none !important;
    border: 1px solid var(--neutral-line-strong) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  html:root[data-theme] body.workbench-editor-active :is(#step-edit, #floatingEditorPortal) .floating-editor-tools.text-tools::after {
    display: none !important;
  }
  html:root[data-theme] body.workbench-editor-active :is(#step-edit, #floatingEditorPortal) .text-tools .floating-tools-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    gap: 6px !important;
  }
  html:root[data-theme] body.workbench-editor-active :is(#step-edit, #floatingEditorPortal) .text-tools .floating-text-tool-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--neutral-muted) !important;
  }
  html:root[data-theme] body.workbench-editor-active :is(#step-edit, #floatingEditorPortal) .text-tools .floating-text-field {
    display: flex !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  html:root[data-theme] body.workbench-editor-active :is(#step-edit, #floatingEditorPortal) .text-tools .floating-text-field > .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  html:root[data-theme] body.workbench-editor-active :is(#step-edit, #floatingEditorPortal) .text-tools :is(select, .mini-btn) {
    box-sizing: border-box !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    min-width: 0 !important;
    padding: 3px 7px !important;
    color: var(--neutral-text) !important;
    -webkit-text-fill-color: currentColor !important;
    background: var(--neutral-panel-soft) !important;
    background-image: none !important;
    border: 1px solid var(--neutral-line) !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }
  html:root[data-theme] body.workbench-editor-active :is(#step-edit, #floatingEditorPortal) .text-tools [data-floating-copy-mode] {
    width: 96px !important;
    max-width: 96px !important;
  }
  html:root[data-theme] body.workbench-editor-active :is(#step-edit, #floatingEditorPortal) .text-tools [data-floating-copy-layout] {
    width: 108px !important;
    max-width: 108px !important;
  }
  html:root[data-theme] body.workbench-editor-active :is(#step-edit, #floatingEditorPortal) .text-tools [data-floating-copy-rewrite] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 0 78px !important;
    width: auto !important;
    gap: 4px !important;
    color: var(--neutral-text) !important;
  }
  html:root[data-theme] body.workbench-editor-active :is(#step-edit, #floatingEditorPortal) .text-tools [data-floating-copy-rewrite]:hover:not(:disabled) {
    background: var(--neutral-panel-raised, var(--neutral-panel)) !important;
    border-color: var(--neutral-line-strong) !important;
  }
  html:root[data-theme] body.workbench-editor-active :is(#step-edit, #floatingEditorPortal) .text-tools [data-floating-copy-rewrite]:disabled {
    color: var(--neutral-muted) !important;
    opacity: .7 !important;
  }
  html:root[data-theme] body.workbench-editor-active :is(#step-edit, #floatingEditorPortal) .text-tools :is(.fluent-icon-shell, svg, i[data-lucide]) {
    flex: 0 0 14px !important;
    width: 14px !important;
    height: 14px !important;
    color: inherit !important;
  }
}

/* ==== Generation waiting game: Tetris ==== */
@layer assistantChrome {
  html:root body #generationProgress:has(#generationMiniGame:not(.hidden):not([hidden])) {
    right: max(12px, var(--generation-dock-right, 22px)) !important;
    bottom: 16px !important;
    width: min(360px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: auto !important;
    padding: 12px !important;
    border: 1px solid var(--neutral-line-strong) !important;
    border-radius: 8px !important;
    background: var(--neutral-panel) !important;
    color: var(--neutral-text) !important;
    box-shadow: none !important;
  }
  html:root body #generationMiniGame {
    min-width: 0 !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--neutral-line) !important;
    background: transparent !important;
    color: var(--neutral-text) !important;
    box-shadow: none !important;
    text-align: left !important;
  }
  html:root body #generationProgress:has(#generationMiniGame:not(.hidden):not([hidden])) :is(.generation-progress-head strong, #generationProgressText, #generationProgressStep) {
    color: var(--neutral-text) !important;
    text-shadow: none !important;
  }
  html:root body #generationProgress:has(#generationMiniGame:not(.hidden):not([hidden])) .generation-progress-bar {
    border: 0 !important;
    background: var(--neutral-line) !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  html:root body #generationProgress:has(#generationMiniGame:not(.hidden):not([hidden])) .generation-progress-bar > span {
    background: var(--neutral-accent) !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  html:root body #generationProgress:has(#generationMiniGame:not(.hidden):not([hidden])) .generation-progress-bar > span::after {
    display: none !important;
    animation: none !important;
    box-shadow: none !important;
  }
  html:root body #generationMiniGame:is(.hidden, [hidden]) {
    display: none !important;
  }
  html:root body #generationMiniGame :is(.generation-mini-game-head, footer, .generation-mini-game-controls) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  html:root body #generationMiniGame .generation-mini-game-head > div {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  html:root body #generationMiniGame .generation-mini-game-head strong {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: var(--neutral-text) !important;
  }
  html:root body #generationMiniGame :is(#generationMiniGameStatus, #generationMiniGameBest) {
    color: var(--neutral-muted) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
  html:root body #generationMiniGame #generationMiniGameScore {
    color: var(--neutral-accent) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }
  html:root body #generationMiniGame .generation-mini-game-board {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 320 / 288 !important;
    margin-top: 8px !important;
    overflow: hidden !important;
    border: 1px solid var(--neutral-line) !important;
    border-radius: 4px !important;
    background: var(--neutral-panel-soft) !important;
    box-shadow: none !important;
  }
  html:root body #generationMiniGameCanvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 320 / 288 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline-offset: -2px !important;
    background: var(--neutral-panel-soft) !important;
    touch-action: none !important;
  }
  html:root body #generationMiniGame .generation-mini-game-controls {
    margin-top: 8px !important;
  }
  html:root body #generationMiniGame .generation-mini-game-head .generation-mini-game-controls {
    margin-top: 0 !important;
  }
  html:root body #generationMiniGame .generation-mini-game-controls > div:not(.generation-mini-game-dpad) {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  html:root body #generationMiniGame button {
    display: inline-flex !important;
    flex: 0 0 30px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 1px solid var(--neutral-line) !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--neutral-text) !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }
  html:root body #generationMiniGame button:hover:not(:disabled) {
    border-color: var(--neutral-line-strong) !important;
    background: var(--neutral-panel-soft) !important;
  }
  html:root body #generationMiniGame :is(button, canvas):focus-visible {
    outline: 2px solid var(--neutral-accent) !important;
    outline-offset: 2px !important;
  }
  html:root body #generationMiniGame button:disabled {
    opacity: .45 !important;
    cursor: default !important;
  }
  html:root body #generationMiniGame button :is(svg, i, .fluent-icon-shell, .fluent-icon) {
    width: 16px !important;
    height: 16px !important;
    color: inherit !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: none !important;
  }
  html:root body #generationMiniGame .generation-mini-game-dpad {
    display: flex !important;
    gap: 4px !important;
  }
  html:root body #generationMiniGame > footer {
    flex-wrap: wrap !important;
    margin-top: 7px !important;
  }
  html:root body #generationMiniGame .generation-mini-game-scores {
    display: flex !important;
    align-items: baseline !important;
    gap: 7px !important;
    min-width: 0 !important;
  }
  @media (max-width: 480px) {
    html:root body #generationProgress:has(#generationMiniGame:not(.hidden):not([hidden])) {
      right: 12px !important;
      bottom: 12px !important;
      max-height: calc(100dvh - 24px) !important;
    }
    html:root body #generationMiniGame button {
      flex-basis: 32px !important;
      width: 32px !important;
      min-width: 32px !important;
      height: 32px !important;
      min-height: 32px !important;
    }
  }
}

/* ==== consolidated from /assistant-image-size.css (cascade order preserved) ==== */
/* The same size picker is shared by normal chat and the image tool. */
@layer assistantChrome {
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer#assistantComposer:has(#assistantImageSizeControl:not(.hidden)) {
  grid-template-rows: minmax(52px, auto) auto !important;
  row-gap: 6px !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer#assistantComposer#assistantComposer > .assistant-composer-tools:has(#assistantImageSizeControl:not(.hidden)) {
  display: flex !important;
  align-items: center !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  min-height: 32px !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantComposer#assistantComposer > .assistant-composer-tools > #assistantImageSizeControl {
  display: inline-flex !important;
  flex: 0 1 auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  /* The compact composer hides its legacy toolbar with pointer-events:none.
     This visible control must explicitly opt back into pointer interaction. */
  pointer-events: auto !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantComposer#assistantComposer > .assistant-composer-tools > #assistantImageSizeControl.hidden { display: none !important; }
html:root body #assistantDrawer#assistantDrawer #assistantComposer#assistantComposer #assistantImageSizeControl > :is(.assistant-size-mode, .assistant-count-mode) {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantComposer#assistantComposer #assistantImageCountControl.hidden { display: none !important; }
html:root body #assistantDrawer#assistantDrawer #assistantComposer#assistantComposer #assistantImageSizeControl #assistantImageCountControl .assistant-select-shell {
  min-width: 76px !important;
  max-width: 90px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantComposer#assistantComposer #assistantImageSizeControl .assistant-select-shell {
  display: inline-flex !important;
  width: auto !important;
  min-width: 128px !important;
  max-width: 180px !important;
  height: 32px !important;
  flex: 0 1 auto !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantComposer#assistantComposer #assistantImageSizeControl .assistant-select-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 11px !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 6px !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  background: transparent !important;
  font-size: 12px !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantComposer#assistantComposer #assistantImageSizeControl .assistant-select-trigger:hover,
html:root body #assistantDrawer#assistantDrawer #assistantComposer#assistantComposer #assistantImageSizeControl .assistant-select-trigger:focus-visible {
  border-color: var(--neutral-accent, #a86f25) !important;
  outline: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantComposer#assistantComposer #assistantImageSizeControl .assistant-select-trigger-label { min-width: 0 !important; white-space: nowrap !important; }
html:root body #assistantDrawer#assistantDrawer #assistantComposer#assistantComposer #assistantCustomSizeFields {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: auto !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantComposer#assistantComposer #assistantCustomSizeFields.hidden { display: none !important; }
html:root body #assistantDrawer#assistantDrawer #assistantComposer#assistantComposer #assistantCustomSizeFields input {
  pointer-events: auto !important;
  box-sizing: border-box !important;
  width: 62px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 6px !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 6px !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  background: transparent !important;
  font-size: 12px !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantComposer#assistantComposer #assistantCustomSizeFields :is(b, small) { color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; font: 11px/1.2 system-ui !important; }
html:root body .assistant-image-size-menu {
  width: min(350px, calc(100vw - 24px)) !important;
  box-shadow: none !important;
  /* Anchored placement must update immediately when the viewport changes. */
  transition: none !important;
  --size-menu-text: var(--neutral-text);
  --size-menu-muted: var(--neutral-muted);
  --size-menu-line: var(--neutral-line);
}
html:root body #assistantImageCountCustomMenu {
  width: 148px !important;
  box-shadow: none !important;
  transition: none !important;
}
html:root body .assistant-image-size-menu-head { display: grid; gap: 4px; padding: 10px 10px 8px; }
html:root body .assistant-image-size-menu-head strong { color: var(--size-menu-text); font-size: 13px; }
html:root body .assistant-image-size-menu-head small,
html:root body .assistant-image-size-menu-note { color: var(--size-menu-muted); font-size: 11px; line-height: 1.5; }
html:root body .assistant-select-option-group { padding: 8px 10px 4px; color: var(--size-menu-muted, #777); font-size: 10px; font-weight: 600; }
html:root body .assistant-image-size-menu-note { display: block; padding: 9px 10px 6px; border-top: 1px solid var(--size-menu-line); }
html:root body #assistantImageSizeCustomMenu.assistant-image-size-menu > button.assistant-select-option {
  min-height: 32px !important;
  height: 32px !important;
  padding-block: 5px !important;
}
html:root body #assistantImageSizeCustomMenu.assistant-image-size-menu > button.assistant-select-option[aria-selected="false"] > :is(.assistant-image-size-check, [data-lucide="check"], [data-fluent-icon="check"], svg.lucide-check) { display: none !important; }
html:root body #assistantImageSizeCustomMenu.assistant-image-size-menu > button.assistant-select-option[aria-selected="true"] > :is(.assistant-image-size-check, [data-lucide="check"], [data-fluent-icon="check"], svg.lucide-check) { display: inline-flex !important; opacity: 1 !important; }
@media (max-width: 600px) {
  html:root body #assistantDrawer#assistantDrawer #assistantComposer#assistantComposer > .assistant-composer-tools:has(#assistantImageSizeControl:not(.hidden)) { flex-wrap: wrap !important; height: auto !important; max-height: none !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantComposer#assistantComposer > .assistant-composer-tools > #assistantImageSizeControl { flex-wrap: wrap !important; }
}
}

/* ==== consolidated from /assistant-design-brief.css (cascade order preserved) ==== */
/* One compact, neutral planning card before design generation. */
@layer assistantChrome {
html:root body #assistantDrawer#assistantDrawer #assistantMessages:has(> .assistant-design-brief-card) { padding-bottom: 8px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card {
  width: min(100%, var(--assistant-transcript-width, 760px)) !important;
  max-width: 760px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 16px auto !important;
  padding: 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  box-shadow: none !important;
  text-align: left !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card > header { display: flex !important; align-items: flex-start !important; gap: 12px !important; margin: 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card > header > div { display: grid !important; gap: 4px !important; min-width: 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card > header > div:first-child { flex: 1 1 auto !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card > header > .assistant-design-brief-controls {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 6px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-controls > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-controls > .assistant-design-brief-close { width: 32px !important; padding: 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-controls > button:hover { background: color-mix(in srgb, var(--chat-text, #777) 8%, transparent) !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-controls > button:focus-visible { outline: 2px solid var(--neutral-accent, #a86f25) !important; outline-offset: 2px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-controls svg { display: block !important; width: 18px !important; height: 18px !important; color: currentColor !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card strong { color: var(--chat-text, var(--theme-text, #272727)) !important; font-size: 14px !important; font-weight: 650 !important; letter-spacing: 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card :is(small, header span) { color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; font-size: 11px !important; line-height: 1.55 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card .assistant-design-brief-topic { margin: 13px 0 16px !important; font-size: 13px !important; line-height: 1.65 !important; max-height: 88px !important; overflow: auto !important; overflow-wrap: anywhere !important; white-space: pre-wrap !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-fields { display: grid !important; grid-template-columns: 1fr !important; gap: 15px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-fields > section { display: grid !important; gap: 7px !important; min-width: 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-fields > section > div:first-child { display: flex !important; align-items: baseline !important; gap: 10px !important; flex-wrap: wrap !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-pills { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; min-width: 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-pills > button {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: auto !important; min-width: 0 !important; min-height: 30px !important; height: auto !important;
  padding: 5px 10px !important; border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 7px !important; background: transparent !important; color: var(--chat-text, var(--theme-text, #272727)) !important;
  font-size: 11px !important; line-height: 1.4 !important; box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card button[aria-pressed="true"] { border-color: var(--neutral-accent, #a86f25) !important; color: var(--neutral-accent, #a86f25) !important; background: transparent !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card button:focus-visible { outline: 2px solid var(--neutral-accent, #a86f25) !important; outline-offset: 2px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-custom { display: flex !important; align-items: center !important; gap: 9px !important; margin: 2px 0 0 !important; color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; font-size: 11px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-custom input { width: min(280px, 75%) !important; min-width: 0 !important; height: 30px !important; min-height: 30px !important; padding: 4px 9px !important; border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important; border-radius: 6px !important; background: transparent !important; color: var(--chat-text, var(--theme-text, #272727)) !important; font-size: 11px !important; box-shadow: none !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-routes { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 9px !important; margin: 17px 0 12px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-routes > button { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 7px !important; width: 100% !important; min-width: 0 !important; min-height: 102px !important; height: auto !important; padding: 12px !important; border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important; border-radius: 7px !important; background: transparent !important; color: var(--chat-text, var(--theme-text, #272727)) !important; box-shadow: none !important; text-align: left !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-routes strong { display: flex !important; gap: 6px !important; align-items: center !important; flex-wrap: wrap !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-routes em { color: var(--neutral-accent, #a86f25) !important; font: 10px/1.4 inherit !important; font-style: normal !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-routes small { display: block !important; white-space: normal !important; overflow-wrap: anywhere !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-audience { border: 0 !important; background: transparent !important; margin: 0 !important; padding: 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-audience > summary { cursor: pointer !important; font-size: 11px !important; color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; padding: 5px 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-audience > summary span { margin-left: 10px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-audience[open] > .assistant-design-brief-pills { margin-top: 7px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card > footer { position: static !important; bottom: auto !important; z-index: auto !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-top: 16px !important; padding: 12px 0 !important; border-top: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important; border-bottom: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important; background: var(--chat-bg, var(--theme-panel, var(--theme-bg, #faf9f7))) !important; box-shadow: none !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card > footer > div { display: grid !important; gap: 3px !important; min-width: 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-generate { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; min-height: 38px !important; height: auto !important; padding: 8px 14px !important; border: 1px solid var(--chat-text, var(--theme-text, #272727)) !important; border-radius: 7px !important; background: var(--chat-text, var(--theme-text, #272727)) !important; color: var(--chat-bg, var(--theme-bg, #ffffff)) !important; font-size: 12px !important; font-weight: 650 !important; box-shadow: none !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-generate :is(svg, i) { width: 14px !important; height: 14px !important; color: currentColor !important; opacity: 1 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-references { margin-top: 17px !important; padding-top: 15px !important; border-top: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-reference-heading { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 10px !important; margin-bottom: 10px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-reference-heading > div:first-child { display: grid !important; gap: 4px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-reference-tools { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-reference-tools > button,
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-reference-status > button { width: auto !important; min-width: 0 !important; min-height: 29px !important; height: auto !important; border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important; border-radius: 6px !important; background: transparent !important; color: var(--chat-text, var(--theme-text, #272727)) !important; box-shadow: none !important; padding: 5px 9px !important; font-size: 11px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-industry-reference-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 9px !important; min-width: 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .industry-reference-card { display: flex !important; flex-direction: column !important; min-width: 0 !important; padding: 0 !important; border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important; border-radius: 8px !important; overflow: hidden !important; background: transparent !important; box-shadow: none !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .industry-reference-card.is-selected { border-color: var(--neutral-accent, #a86f25) !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .industry-reference-card .industry-reference-image { display: block !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; aspect-ratio: 4 / 3 !important; height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .industry-reference-image img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; object-fit: contain !important; border: 0 !important; border-radius: 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .industry-reference-image > span { position: absolute !important; bottom: 6px !important; right: 6px !important; padding: 3px 6px !important; font-size: 10px !important; line-height: 1.4 !important; background: var(--theme-panel, var(--theme-bg, #faf9f7)) !important; color: var(--theme-text, #272727) !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .industry-reference-card-copy { min-width: 0 !important; padding: 9px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .industry-reference-card-copy > strong { display: block !important; font-size: 12px !important; line-height: 1.5 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .industry-reference-card-copy > p { margin: 5px 0 0 !important; color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; font-size: 11px !important; line-height: 1.6 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .industry-reference-card > .industry-reference-select { display: block !important; width: calc(100% - 18px) !important; min-width: 0 !important; min-height: 30px !important; height: auto !important; margin: 3px 9px 9px !important; padding: 5px 7px !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; font-size: 11px !important; font-weight: 600 !important; box-shadow: none !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .industry-reference-card > .industry-reference-select[aria-pressed="true"] { border: 0 !important; color: var(--neutral-accent, #a86f25) !important; background: transparent !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-reference-status { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 9px !important; flex-wrap: wrap !important; min-height: 32px !important; margin-top: 8px !important; font-size: 11px !important; line-height: 1.6 !important; color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-selected-reference { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto !important; align-items: center !important; gap: 6px 9px !important; width: 100% !important; min-width: 0 !important; padding-top: 6px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-selected-reference:has(> [data-assistant-flow-action="reference-clear"]) { grid-template-columns: 44px minmax(0, 1fr) auto 28px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-selected-reference > img { display: block !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; object-fit: contain !important; border-radius: 4px !important; background: transparent !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-selected-reference > div { display: grid !important; gap: 3px !important; min-width: 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-selected-reference > div :is(strong, small) { overflow-wrap: anywhere !important; white-space: normal !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-selected-reference > div strong { font-size: 11px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-selected-reference > div small { font-size: 10px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-selected-reference > button { width: auto !important; min-width: 0 !important; min-height: 32px !important; height: auto !important; align-self: center !important; padding: 5px 8px !important; border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important; border-radius: 6px !important; background: transparent !important; color: var(--chat-text, var(--theme-text, #272727)) !important; box-shadow: none !important; font-size: 11px !important; white-space: nowrap !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-selected-reference > [data-assistant-flow-action="reference-clear"] { grid-column: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; min-height: 28px !important; padding: 4px !important; border: 0 !important; color: var(--chat-text, var(--theme-text, #272727)) !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-selected-reference > [data-assistant-flow-action="reference-clear"] :is(i, svg) { width: 14px !important; height: 14px !important; color: currentColor !important; opacity: 1 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-selected-reference:not(:has(> img)) { grid-template-columns: minmax(0, 1fr) auto !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-selected-reference:not(:has(> img)):has(> [data-assistant-flow-action="reference-clear"]) { grid-template-columns: minmax(0, 1fr) auto 28px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card > footer [data-assistant-flow-action="size-picker"] { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 5px !important; width: auto !important; max-width: 100% !important; min-height: 28px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--chat-text, var(--theme-text, #272727)) !important; font-size: 13px !important; font-weight: 600 !important; text-align: left !important; white-space: normal !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card > footer [data-assistant-flow-action="size-picker"] :is(svg, i) { flex: 0 0 13px !important; width: 13px !important; height: 13px !important; color: currentColor !important; opacity: 1 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-directions { margin-top: 9px !important; border: 0 !important; background: transparent !important; padding: 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-directions > summary { cursor: pointer !important; font-size: 11px !important; color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; padding: 5px 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-generate:disabled { opacity: .6 !important; cursor: wait !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-metadata { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-metadata > summary { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 9px !important; cursor: pointer !important; padding: 7px 0 !important; font-size: 11px !important; color: var(--chat-text, var(--theme-text, #272727)) !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-metadata > summary em { flex-shrink: 0 !important; font-size: 10px !important; font-style: normal !important; color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-metadata[open] > .assistant-design-brief-fields { padding-top: 9px !important; }
@media (max-width: 640px) {
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card { padding: 13px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-routes { grid-template-columns: 1fr !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-routes > button { min-height: 0 !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card > footer { align-items: center !important; flex-direction: row !important; flex-wrap: nowrap !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-industry-reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .industry-reference-card-copy { padding: 7px 8px !important; flex: 1 !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .industry-reference-card-copy > strong { min-height: 36px !important; overflow-wrap: anywhere !important; font-size: 11px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .industry-reference-card-copy > :is(small, p) { display: none !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .industry-reference-card > .industry-reference-select { width: calc(100% - 16px) !important; min-height: 36px !important; margin: 0 8px 8px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-reference-tools > button { min-height: 34px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card > footer { gap: 7px !important; margin-top: 12px !important; padding-top: 11px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card > footer > div { flex: 1 1 42% !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-generate { flex: 1 1 58% !important; min-width: 0 !important; min-height: 40px !important; padding: 7px 9px !important; font-size: 11px !important; line-height: 1.5 !important; white-space: normal !important; }
}
@media (min-width: 641px) and (max-height: 760px) {
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card { padding-top: 13px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-topic { margin: 8px 0 10px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .industry-reference-card .industry-reference-image { aspect-ratio: 5 / 3 !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .industry-reference-card-copy { padding: 7px 9px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .industry-reference-card-copy > :is(small, p) { display: none !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-references { margin-top: 12px !important; padding-top: 11px !important; }
}
@media (max-width: 480px) {
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-industry-reference-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-industry-reference-grid > .industry-reference-card { display: grid !important; grid-template-columns: 78px minmax(0, 1fr) !important; align-items: center !important; min-height: 88px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-industry-reference-grid .industry-reference-image { grid-column: 1 !important; grid-row: 1 / 3 !important; width: 78px !important; height: 88px !important; aspect-ratio: auto !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-industry-reference-grid .industry-reference-image > span { bottom: 2px !important; right: 2px !important; padding: 2px 3px !important; font-size: 9px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .industry-reference-card-copy { grid-column: 2 !important; padding: 7px 8px 2px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .industry-reference-card-copy > strong { min-height: 0 !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .industry-reference-card > .industry-reference-select { grid-column: 2 !important; min-height: 32px !important; margin: 0 8px 7px !important; }
}
}

/* Reference attachments contain settings, so they cannot inherit the
   single-line, 280px file-chip layout or global full-width form inputs. */
@layer assistantChrome {
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-attachment-chip.reference-image {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 6px 8px !important;
  flex: 1 1 320px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-attachment-chip.reference-image > .assistant-attachment-thumb {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-attachment-chip.reference-image .assistant-attachment-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-attachment-chip.reference-image > .assistant-attachment-name {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-attachment-chip.reference-image:not(.has-thumbnail) > .assistant-attachment-name { grid-column: 1 / 3 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-attachment-chip.reference-image > em { display: none !important; }
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-attachment-chip.reference-image > .assistant-attachment-role-controls {
  grid-column: 3 !important;
  grid-row: 1 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-attachment-chip.reference-image .assistant-attachment-role-controls button {
  min-height: 26px !important;
  padding: 2px 6px !important;
  color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important;
  background: transparent !important;
  font-size: 10px !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-attachment-chip.reference-image .assistant-attachment-role-controls button.active {
  color: var(--neutral-accent, #a86f25) !important;
  background: transparent !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-attachment-chip.reference-image > .assistant-attachment-remove {
  grid-column: 4 !important;
  grid-row: 1 !important;
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 3px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-reference-settings-panel {
  grid-column: 1 / -1 !important;
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-reference-settings-panel > summary {
  display: flex !important;
  align-items: baseline !important;
  gap: 5px 9px !important;
  flex-wrap: wrap !important;
  min-height: 26px !important;
  padding: 5px 0 0 !important;
  border-top: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-reference-settings-panel > summary::before { content: "+"; width: 10px !important; flex: 0 0 10px !important; color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; }
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-reference-settings-panel[open] > summary::before { content: "-"; }
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-reference-settings-panel > summary > span { flex: 1 1 150px !important; min-width: 0 !important; font-size: 10px !important; color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; white-space: normal !important; overflow-wrap: anywhere !important; }
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-reference-settings-panel:not([open]) > .assistant-reference-settings { display: none !important; }
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-reference-settings-panel[open] > .assistant-reference-settings { border-top: 0 !important; padding-top: 7px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-attachment-chip.reference-image .assistant-reference-settings {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 7px 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 7px 0 0 !important;
  border-top: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-reference-settings > .assistant-reference-settings-title { display: none !important; }
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-reference-mode-list {
  display: flex !important;
  flex: 1 1 100% !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  min-width: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-reference-mode-list label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 3px 4px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-reference-mode-list input[type="checkbox"] {
  appearance: auto !important;
  flex: 0 0 14px !important;
  width: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  height: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  accent-color: var(--neutral-accent, #a86f25) !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-reference-mode-list label:has(input:checked) { color: var(--neutral-accent, #a86f25) !important; background: color-mix(in srgb, var(--neutral-accent, #a86f25) 8%, transparent) !important; }
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-reference-settings :is(.assistant-reference-mode-list label > span, .assistant-reference-select > span) {
  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  font-size: 11px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-reference-select {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  margin: 0 !important;
  color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-reference-select select {
  width: auto !important;
  min-width: 78px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 3px 6px !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  font-size: 11px !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantAttachments .assistant-reference-settings > small {
  flex: 1 1 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
}
}

/* Copy, style, and review share one unframed planning surface. */
@layer assistantChrome {
/* The work sidebar must shrink its transcript above the composer. */
html:root body #assistantDrawer#assistantDrawer.assistant-drawer:not(.embedded):not(.assistant-compact):not(.assistant-sidebar-entry):has(.assistant-design-brief-card) {
  grid-template-rows: repeat(13, auto) minmax(0, 1fr) repeat(5, auto) !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer.assistant-compact:not(.embedded):not(.assistant-sidebar-entry):has(.assistant-design-brief-card) {
  grid-template-rows: repeat(9, auto) minmax(0, 1fr) repeat(5, auto) !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer:not(.embedded):has(.assistant-design-brief-card) > #assistantComposer#assistantComposer {
  position: relative !important;
  inset: auto !important;
  align-self: end !important;
  flex: 0 0 auto !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer:not(.embedded):has(.assistant-design-brief-card) > .assistant-composer-hint {
  position: relative !important;
  inset: auto !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-drawer:not(.embedded):has(.assistant-design-brief-card) > #assistantMessages {
  position: relative !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding-bottom: 8px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  isolation: isolate !important;
  scroll-padding-block: 8px !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-sidebar-entry:not(.embedded):has(.assistant-design-brief-card) > #assistantMessages {
  position: relative !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  isolation: isolate !important;
  scroll-padding-block: 8px !important;
}
html:root body #assistantDrawer#assistantDrawer.assistant-sidebar-entry:not(.embedded) #assistantMessages .assistant-design-brief-card > .assistant-design-wizard-footer {
  bottom: 0 !important;
  z-index: 1 !important;
  margin-bottom: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-steps {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin: 17px 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-style-generation-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 8px 0;
  color: var(--chat-muted, var(--theme-text-tertiary, #777));
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-style-size-option {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  min-height: 32px !important;
  padding: 5px 9px !important;
  border: 1px solid var(--chat-line, var(--theme-border)) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text)) !important;
  font-size: 12px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-style-size-option :is(i, svg) { width: 14px !important; height: 14px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-style-generation-options .assistant-image-count-choice {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-style-generation-options .assistant-image-count-label > small { display: none !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-style-generation-options .assistant-image-count-buttons { margin: 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-check {
  width: auto !important;
  min-height: 28px !important;
  margin: 10px 0 0 !important;
  padding: 3px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--chat-muted, var(--theme-text-tertiary)) !important;
  font-size: 11px !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-attachments {
  min-width: 0 !important;
  margin-top: 12px !important;
  border-top: 1px solid var(--chat-line, var(--theme-border)) !important;
  padding-top: 10px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-attachments[hidden] { display: none !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-attachments > summary {
  cursor: pointer;
  color: var(--chat-muted, var(--theme-text-tertiary));
  font-size: 11px;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-attachments > summary span { margin-left: 8px; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages #assistantAttachments {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-style-generation-options > small {
  font-size: 11px;
  line-height: 1.6;
}
html:root body #assistantDrawer#assistantDrawer[data-assistant-preparing] > :is(#assistantSuggestions, .assistant-context-block, #assistantBriefSummary, #assistantDesignHub, #assistantSideWorkspace, #assistantRecommendations, #assistantVoiceStatus[data-state="idle"], .assistant-right-workbench, .assistant-brief-actions) {
  display: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-steps > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: auto !important;
  padding: 7px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  white-space: normal !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-steps > button[aria-current="step"] {
  border-bottom-color: var(--chat-text, var(--theme-text, #272727)) !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  font-weight: 650 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-step-number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 11px !important;
  line-height: 1 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-steps [aria-current="step"] .assistant-design-wizard-step-number {
  border-color: var(--chat-text, var(--theme-text, #272727)) !important;
  background: var(--chat-text, var(--theme-text, #272727)) !important;
  color: var(--chat-bg, var(--theme-bg, #fff)) !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-steps :is(svg, i),
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-footer :is(svg, i),
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-toolbar :is(svg, i) {
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  color: currentColor !important;
  opacity: 1 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-panel[hidden] { display: none !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-panel[data-wizard-panel="style"] {
  display: grid !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-panel[data-wizard-panel="style"][hidden] { display: none !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-panel > .assistant-design-brief-references { margin-top: 0 !important; padding-top: 12px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-panel > .assistant-design-brief-directions { margin-top: 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-size {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px 0 0 !important;
  border-top: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  background: transparent !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-size > [data-assistant-flow-action="size-picker"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  white-space: normal !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-size > [data-assistant-flow-action="size-picker"] > strong { min-width: 0 !important; font-size: 12px !important; overflow-wrap: anywhere !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-size > [data-assistant-flow-action="size-picker"] :is(i, svg) { flex: 0 0 14px !important; width: 14px !important; height: 14px !important; color: currentColor !important; opacity: 1 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-size > small { display: block !important; margin: 0 !important; color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; font-size: 11px !important; line-height: 1.6 !important; overflow-wrap: anywhere !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-panel {
  display: grid !important;
  gap: 14px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-modes {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  background: transparent !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-modes > button {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 6px !important;
  border: 0 !important;
  border-right: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-modes > button:last-child { border-right: 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-modes > button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--chat-text, var(--theme-text, #272727)) 6%, transparent) !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  font-weight: 650 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-modes > button > strong { color: inherit !important; font-size: 12px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-modes > button > small { font-size: 10px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-modes > button:focus-visible { outline-offset: -3px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages :is(.assistant-content-source, .assistant-content-editor-field) {
  display: grid !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages :is(.assistant-content-source, .assistant-content-editor-field) > span {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages :is(.assistant-content-source textarea, .assistant-content-editor) {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 190px !important;
  max-height: 440px !important;
  margin: 0 !important;
  padding: 12px !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.85 !important;
  text-align: left !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  overflow: auto !important;
  resize: vertical !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--chat-line, var(--theme-border, #d7d7d7)) transparent !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-source textarea { min-height: 118px !important; max-height: 300px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages :is(.assistant-content-source textarea, .assistant-content-editor)::placeholder { color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; opacity: 1 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages :is(.assistant-content-source textarea, .assistant-content-editor):focus {
  border-color: var(--neutral-accent, #a86f25) !important;
  outline: 1px solid var(--neutral-accent, #a86f25) !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 34px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-toolbar > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 34px !important;
  height: auto !important;
  padding: 6px 10px !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-status {
  min-width: 0 !important;
  min-height: 18px !important;
  margin: 0 !important;
  color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  overflow-wrap: anywhere !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-status.is-error { color: var(--theme-danger, #bc4b4b) !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-options {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
  min-width: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-options > button {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 104px !important;
  height: auto !important;
  padding: 12px !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  box-shadow: none !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-options > button > strong { display: block !important; font-size: 12px !important; line-height: 1.5 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-options > button > small { display: block !important; font-size: 11px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-option-preview {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important;
  font-size: 11px !important;
  line-height: 1.65 !important;
  white-space: pre-wrap !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-details {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-details > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 30px !important;
  padding: 0 !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  list-style: none !important;
  cursor: pointer !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-details > summary::-webkit-details-marker { display: none !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-details > summary::before {
  content: "+";
  flex: 0 0 10px !important;
  width: 10px !important;
  color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important;
  font-size: 14px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-details[open] > summary::before { content: "-"; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-details > summary > strong { flex: 1 1 auto !important; min-width: 0 !important; font-size: 12px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-details > summary > span { flex: 0 1 auto !important; min-width: 0 !important; color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; font-size: 11px !important; white-space: normal !important; text-align: right !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-grid,
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 16px !important;
  min-width: 0 !important;
  margin: 9px 0 0 !important;
  padding: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-grid .assistant-content-contact-options { grid-column: 1 / -1 !important; margin-top: 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-field { display: grid !important; align-content: start !important; gap: 6px !important; min-width: 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages :is(.assistant-content-contact-grid, .assistant-content-contact-options) > label,
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-field > label,
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-qr {
  display: grid !important;
  grid-template-columns: 15px minmax(0, 1fr) !important;
  align-content: start !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-details input[type="checkbox"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
  appearance: auto !important;
  flex: 0 0 15px !important;
  width: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  height: 15px !important;
  min-height: 15px !important;
  max-height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  accent-color: var(--neutral-accent, #a86f25) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-details label > span {
  grid-column: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 24px !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  font-size: 12px !important;
  overflow-wrap: anywhere !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-field > label { grid-template-columns: 15px 14px minmax(0, 1fr) !important; gap: 6px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-field > label > :is(i, svg) { grid-column: 2 !important; grid-row: 1 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-field > label > span { grid-column: 3 !important; grid-row: 1 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-details :is(i, svg) { flex: 0 0 14px !important; width: 14px !important; height: 14px !important; color: currentColor !important; opacity: 1 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-details :is([data-assistant-contact-value], [data-assistant-contact-caption]) {
  grid-column: 2 !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 6px 9px !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-field > :is([data-assistant-contact-value], [data-assistant-contact-caption]) { grid-column: 1 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-details :is([data-assistant-contact-value], [data-assistant-contact-caption])::placeholder { color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; opacity: 1 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-details :is([data-assistant-contact-value], [data-assistant-contact-caption]):focus { border-color: var(--neutral-accent, #a86f25) !important; outline: 1px solid var(--neutral-accent, #a86f25) !important; outline-offset: 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-details label > small { grid-column: 2 !important; display: block !important; min-width: 0 !important; color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; font-size: 10px !important; line-height: 1.6 !important; overflow-wrap: anywhere !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-field > small { display: block !important; min-width: 0 !important; color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; font-size: 10px !important; line-height: 1.6 !important; overflow-wrap: anywhere !important; }
/* Repeatable contact rows: the heading owns the field label and add command;
   values stay in a compact list so several phone numbers or links remain
   readable without growing the surrounding wizard card horizontally. */
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-heading > label {
  display: inline-flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-heading > label > input[type="checkbox"] {
  flex: 0 0 15px !important;
  width: 15px !important;
  min-width: 15px !important;
  height: 15px !important;
  min-height: 15px !important;
  margin: 0 !important;
  accent-color: var(--neutral-accent, #a86f25) !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-heading > label > :is(i, svg) {
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  color: currentColor !important;
  opacity: 1 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-heading > label > span {
  min-width: 0 !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  overflow-wrap: anywhere !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-heading > button[data-assistant-contact-add] {
  display: inline-flex !important;
  flex: 0 0 26px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-heading > button[data-assistant-contact-add]:is(:hover, :focus-visible) {
  border-color: var(--neutral-accent, #a86f25) !important;
  color: var(--neutral-accent, #a86f25) !important;
  background: transparent !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-heading > button[data-assistant-contact-add] :is(i, svg) {
  width: 14px !important;
  height: 14px !important;
  color: currentColor !important;
  opacity: 1 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-values {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 26px !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-row :is([data-assistant-contact-value], [data-assistant-contact-caption]) {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-row > button[data-assistant-contact-remove] {
  display: inline-flex !important;
  grid-column: 2 !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-row > button[data-assistant-contact-remove]:is(:hover, :focus-visible) {
  color: var(--neutral-accent, #a86f25) !important;
  background: color-mix(in srgb, var(--neutral-accent, #a86f25) 8%, transparent) !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-row > button[data-assistant-contact-remove] :is(i, svg) {
  width: 14px !important;
  height: 14px !important;
  color: currentColor !important;
  opacity: 1 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-field:has(.assistant-content-contact-values:empty) { gap: 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-contact-details:not([open]) > :not(summary) { display: none !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-review-contact {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 12px !important;
  line-height: 1.8 !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card > .assistant-design-wizard-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-flow: row wrap !important;
  gap: 8px 12px !important;
  min-height: 42px !important;
  margin-top: 18px !important;
  padding: 12px 0 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-back {
  display: inline-flex !important;
  flex: 0 1 auto !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  height: auto !important;
  padding: 7px 9px !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  white-space: normal !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-next {
  display: inline-flex !important;
  flex: 0 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  height: auto !important;
  margin-left: auto !important;
  padding: 8px 14px !important;
  border: 1px solid var(--chat-text, var(--theme-text, #272727)) !important;
  border-radius: 7px !important;
  background: var(--chat-text, var(--theme-text, #272727)) !important;
  color: var(--chat-bg, var(--theme-bg, #fff)) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.5 !important;
  white-space: normal !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-footer-meta { display: grid !important; flex: 1 1 120px !important; gap: 3px !important; min-width: 0 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-footer-meta > small { overflow-wrap: anywhere !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card :is(.assistant-content-toolbar, .assistant-content-modes, .assistant-design-wizard-steps, .assistant-design-wizard-footer) > button:disabled {
  opacity: .55 !important;
  cursor: default !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-review {
  display: grid !important;
  gap: 14px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-review dl {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  gap: 10px 16px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-review dt { margin: 0 !important; color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-review dd { min-width: 0 !important; margin: 0 !important; color: var(--chat-text, var(--theme-text, #272727)) !important; overflow-wrap: anywhere !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-review-copy {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 90px !important;
  max-height: 320px !important;
  margin: 0 !important;
  padding: 12px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-bottom: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 13px !important;
  line-height: 1.85 !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  overflow: auto !important;
  scrollbar-width: thin !important;
}
@media (max-width: 640px) {
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-steps { gap: 7px !important; margin: 14px 0 16px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-steps > button { gap: 5px !important; min-height: 42px !important; font-size: 11px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-panel { gap: 12px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages :is(.assistant-content-contact-grid, .assistant-content-contact-options) { grid-template-columns: 1fr !important; gap: 10px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-modes { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-modes > button { min-height: 58px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-modes > button:nth-child(2n) { border-right: 0 !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-modes > button:nth-child(n + 3) { border-top: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-options { grid-template-columns: 1fr !important; gap: 7px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-options > button { gap: 4px !important; min-height: 66px !important; padding: 10px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-option-preview { -webkit-line-clamp: 2 !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages :is(.assistant-content-source textarea, .assistant-content-editor) { padding: 10px !important; font-size: 12px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card > .assistant-design-wizard-footer { gap: 7px !important; margin-top: 14px !important; padding: 10px 0 !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-footer > .assistant-design-wizard-footer-meta { order: -1 !important; flex: 1 1 100% !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-footer > :is(.assistant-design-wizard-next, .assistant-design-brief-generate) { flex: 0 1 auto !important; min-height: 40px !important; padding: 8px 11px !important; font-size: 11px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-back { min-height: 40px !important; padding: 7px 8px !important; font-size: 11px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-review dl { gap: 8px 12px !important; font-size: 11px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-review-copy { font-size: 12px !important; max-height: 280px !important; }
}
@media (max-width: 400px) {
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-steps > button { gap: 4px !important; font-size: 10px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-wizard-step-number { flex-basis: 20px !important; width: 20px !important; height: 20px !important; font-size: 10px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-modes > button { padding: 8px 4px !important; font-size: 11px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-content-modes > button > strong { font-size: 11px !important; }
}
}

html:root body #assistantDrawer#assistantDrawer .assistant-document-preparation {
  display: flex !important;
  flex: 1 1 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 10px 0 !important;
  border-top: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  font-size: 12px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-original-copy-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px 14px !important;
  min-width: 0 !important;
  padding: 10px 0 14px !important;
  border-bottom: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-original-copy-summary > span {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  min-width: 0 !important;
  font-size: 12px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-original-copy-summary :is(i, svg) {
  width: 16px !important;
  height: 16px !important;
  color: var(--neutral-accent, currentColor) !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-original-copy-summary small {
  color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important;
  font-size: 11px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-original-copy-summary > button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: 32px !important;
  padding: 5px 8px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  cursor: pointer !important;
}
html:root body #assistantDrawer#assistantDrawer .assistant-document-preparation :is(span, button) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer .assistant-document-preparation button {
  min-height: 34px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  font-size: 12px !important;
}
html:root body #assistantDrawer#assistantDrawer .assistant-document-preparation :is(svg, i) { width: 16px !important; height: 16px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages :is(.assistant-document-pages, .assistant-document-review) {
  display: grid !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  font-size: 12px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-page-toolbar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-height: 32px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-page-toolbar > strong { min-width: 96px !important; text-align: center !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-page-toolbar > label { margin-left: auto !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-page-toolbar > button {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 4px !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  background: transparent !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-page-toolbar > button:disabled { opacity: .4 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-page-toolbar :is(svg, i) { width: 16px !important; height: 16px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-page-body { display: grid !important; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) !important; gap: 14px !important; align-items: center !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-page-image {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 116px !important;
  margin: 0 !important;
  padding: 3px !important;
  overflow: hidden !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 2px !important;
  background: var(--chat-panel, var(--theme-panel, #f5f5f5)) !important;
  color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important;
  box-shadow: none !important;
  font-size: 11px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-page-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-page-body > div { display: grid !important; gap: 8px !important; min-width: 0 !important; overflow-wrap: anywhere !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages :is(.assistant-document-page-toolbar, .assistant-document-page-body, .assistant-document-review, .assistant-document-style-modes) label {
  display: inline-flex !important;
  flex: 0 1 auto !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages :is(.assistant-document-pages, .assistant-document-review, .assistant-document-style-modes) :is(input[type="checkbox"], input[type="radio"]) {
  appearance: auto !important;
  flex: 0 0 15px !important;
  width: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  height: 15px !important;
  min-height: 15px !important;
  max-height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  accent-color: var(--chat-text, var(--theme-text, #272727)) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages :is(.assistant-document-page-toolbar, .assistant-document-page-body, .assistant-document-review, .assistant-document-style-modes) label > span {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-page-warning { color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; font-size: 11px !important; overflow-wrap: anywhere !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-content-modes { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-style-modes { display: flex !important; flex-wrap: wrap !important; gap: 18px !important; padding: 0 0 14px !important; border-bottom: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-style-modes label { display: inline-flex !important; align-items: center !important; gap: 7px !important; font-size: 12px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-review-page { min-width: 0 !important; border-bottom: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-review-page summary { padding: 9px 0 !important; font-size: 12px !important; cursor: pointer !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-preview-approval {
  display: grid !important;
  gap: 10px !important;
  padding: 14px 0 4px !important;
  border-top: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-preview-approval > p { margin: 0 !important; font-size: 12px !important; line-height: 1.6 !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-preview-approval .assistant-stage-actions { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-preview-approval :is(button, summary) {
  min-height: 36px !important;
  width: auto !important;
  padding: 8px 12px !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-preview-approval [data-assistant-task-action="document-continue"] {
  border-color: var(--chat-text, var(--theme-text, #272727)) !important;
  background: var(--chat-text, var(--theme-text, #272727)) !important;
  color: var(--chat-bg, var(--theme-bg, #fff)) !important;
}
@media (max-width: 640px) {
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-page-body { grid-template-columns: minmax(110px, 40%) minmax(0, 1fr) !important; gap: 10px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-page-toolbar { gap: 6px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-page-toolbar > strong { min-width: 76px !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-content-modes > button { border-top: 0 !important; border-right: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-document-content-modes > button:last-child { border-right: 0 !important; }
}

/* ==== consolidated from /workmode-rebuild.css (cascade order preserved) ==== */
/* Phase1 merge: canvas-image-preview-fix + workmode-rebuild (cascade preserved). */
/* ===== merged from /canvas-image-preview-fix.css ===== */
/* 修复：可编辑画布（.slide-el.image）里，图片「预览触发钮」被两条「按钮统一面板底色」
   的规则（workmate-ai.css、ui-contrast-final.css，均 !important）误伤成白底常驻块，
   反过来遮挡/错位压住了真实配图，使小配图看起来像空占位。

   修正策略：
   - 有真实图片时，预览钮背景透明、常态隐藏（opacity:0），不再遮挡配图；
   - 仅在鼠标悬停 / 元素被选中时，在右上角显示一个小角标，用于放大预览；
   - 空图片位（无 src，渲染时根本不会生成此按钮）天然不受影响，仍走原有占位提示。
   仅作用于画布可编辑图片，不影响设计页整图、缩略图等其他预览钮。 */

html:root[data-theme] body:not(#appShell) .slide-el.image > .image-preview-trigger {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  min-height: 24px;
  color: #ffffff;
  opacity: 0;
}

html:root[data-theme] body:not(#appShell) .slide-el.image > .image-preview-trigger svg {
  width: 14px;
  height: 14px;
}

html:root[data-theme] body:not(#appShell) .slide-el.image:hover > .image-preview-trigger,
html:root[data-theme] body:not(#appShell) .slide-el.image.selected > .image-preview-trigger,
html:root[data-theme] body:not(#appShell) .slide-el.image.multi-selected > .image-preview-trigger {
  opacity: 1;
}

/* ===== merged from /workmode-rebuild.css ===== */
/* ============================================================
   工作模式重构：顶部 4 排 → 2 排；重复/低频工具默认收起；
   图层列表默认折叠。只做收纳，不删除任何功能。
   配色沿用中性色 + 暖金(--accent)，不使用蓝色主色。
   ============================================================ */

/* ---------- 1. 文档标签栏右侧：高频动作（撤销/重做 + 工具开关） ---------- */
/* 文档标签、右滚动、打开文件与快捷动作各占一列。 */
.document-tabs-bar {
  grid-template-columns: minmax(0, 1fr) 28px 36px auto;
}
.document-tabs-bar .doc-quick-actions {
  grid-column: 4;
  grid-row: 1;
  align-self: center;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px 0 10px;
  margin-right: 4px;
  border-left: 1px solid var(--line);
}
@media (max-width: 767px) {
  .document-tabs-bar { grid-template-columns: minmax(0, 1fr) 24px 32px auto; }
  .document-tabs-bar .doc-tools-toggle { width: 32px; padding: 0; }
  .document-tabs-bar .doc-tools-toggle > span { display: none; }
}
.document-tabs-bar .doc-quick-actions .ghost-btn,
.doc-tools-toggle {
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.document-tabs-bar .doc-quick-actions #undoEditBtn,
.document-tabs-bar .doc-quick-actions #redoEditBtn {
  width: 32px;
  padding: 0;
}
.document-tabs-bar .doc-quick-actions .ghost-btn svg,
.doc-tools-toggle svg {
  width: 16px;
  height: 16px;
}
.document-tabs-bar .doc-quick-actions .ghost-btn:hover:not(:disabled),
.doc-tools-toggle:hover {
  background: rgba(190, 124, 44, 0.10);
  border-color: rgba(190, 124, 44, 0.35);
}
.document-tabs-bar .doc-quick-actions .ghost-btn:disabled {
  opacity: 0.38;
  cursor: default;
  background: transparent;
  border-color: transparent;
}
.doc-quick-sep {
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 4px;
  flex: 0 0 auto;
}
.doc-tools-toggle .chev { transition: transform .18s ease; }
.doc-tools-toggle[aria-expanded="true"] {
  color: var(--accent);
  border-color: rgba(190, 124, 44, 0.45);
  background: rgba(190, 124, 44, 0.10);
}
.doc-tools-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* ---------- 2. 类目规格栏 + ribbon 整体默认折叠（点“工具”展开） ---------- */
.editor-top-ribbon.tools-collapsed { display: none !important; }
.editor-top-ribbon { border-bottom: 1px solid var(--line); }

/* 展开区去重复：
   - “素材”并入左栏素材标签；
   - ribbon“智能设计当前页”（仅聚焦）并入类目栏“生成当前页”（直接生成）。 */
.design-category-toolbar [data-category-action="assets"] { display: none !important; }
#editorRibbon #aiDesignCurrentPageBtn { display: none !important; }

/* ---------- 3. 图层列表默认收进折叠面板 ---------- */
.layer-list-disclosure {
  border-top: 1px solid var(--line);
  margin-top: 10px;
}
.layer-list-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  cursor: pointer;
  border-radius: 8px;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  user-select: none;
}
.layer-list-disclosure > summary::-webkit-details-marker { display: none; }
.layer-list-disclosure > summary svg { width: 16px; height: 16px; }
.layer-list-disclosure > summary:hover { background: rgba(190, 124, 44, 0.08); }
.layer-list-disclosure > summary .layer-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.layer-list-disclosure > summary .chev { transition: transform .18s ease; }
.layer-list-disclosure[open] > summary .chev { transform: rotate(180deg); }

/* ---------- 4. 修复“参考”视图：引导卡片被素材缩略图两列网格压缩 ----------
   参考引导卡片本应横向占满左栏，而不是塞进 94px 的缩略图格子。 */
.editor-asset-list .reference-guide-list {
  grid-column: 1 / -1;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
}
.editor-asset-list .reference-guide-card {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
}
/* 左栏参考控件与正文参考区共享 workflow-v4 的统一卡片样式。 */
#editorReferenceView .editor-left-actions { gap: 6px; }
#editorReferenceView .editor-left-actions .ghost-btn { flex: 1 1 0; min-width: 0; }
#editorReferenceList { grid-template-columns: minmax(0, 1fr); }
#editorReferenceList > .reference-guide-save { grid-column: 1 / -1; }
#editorReferenceView #referenceAnalysisSummary { margin: 0 2px 10px; padding: 0; background: transparent; color: var(--neutral-muted); font-size: 11px; line-height: 1.5; }

/* ---------- 5. 切换/离开保护弹窗（保存失败不再把人困在页面） ---------- */
.switch-guard-dialog {
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 0;
  background: var(--panel);
  color: var(--text);
  box-shadow: none !important;
  width: min(520px, calc(100vw - 40px));
  max-width: 520px;
}
.switch-guard-dialog::backdrop {
  background: rgba(10, 12, 17, 0.5);
  backdrop-filter: blur(2px);
}
.switch-guard-shell { display: flex; flex-direction: column; margin: 0; }
.switch-guard-shell > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
}
.sg-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 4px;
}
#switchGuardTitle { font-size: 17px; font-weight: 700; color: var(--text); }
.switch-guard-body { padding: 2px 20px 14px; }
.sg-message {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
  background: rgba(198, 61, 61, 0.09);
  border: 1px solid rgba(198, 61, 61, 0.28);
  border-radius: 9px;
  padding: 10px 12px;
  margin: 0 0 10px;
}
.sg-hint { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 0; }
.switch-guard-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--line);
}
.sg-spacer { flex: 1 1 auto; }
.switch-guard-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 8px 13px;
  border-radius: 9px;
}
.switch-guard-actions .sg-locate-btn.hidden { display: none; }
.switch-guard-actions svg { width: 15px; height: 15px; }

/* ---------- 6. 属性面板：字形 / 对齐 / 锁定 按钮化（替代“是/否”下拉） ---------- */
.prop-field { display: flex; flex-direction: column; gap: 6px; grid-column: span 1; min-width: 0; }
.prop-field.wide { grid-column: 1 / -1; }
.prop-field-label { font-size: 11px; font-weight: 600; color: var(--muted); }
.prop-btn-row { display: flex; gap: 6px; flex-wrap: wrap; }
.prop-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.prop-toggle:hover { border-color: var(--line-strong); }
.prop-toggle b { font-size: 14px; font-weight: 800; }
.prop-toggle i { font-size: 14px; font-style: italic; font-family: Georgia, "Times New Roman", serif; }
.prop-toggle u { font-size: 13px; }
.prop-toggle.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.prop-toggle.prop-toggle-block { width: 100%; }

/* ==== consolidated from /global-navigation.css (cascade order preserved) ==== */
/* One application navigation rail. Project stages and editing panels stay
   within the project surface; the rail only contains global destinations. */
@layer assistantChrome {
  html:root body {
    --global-nav-width: 68px;
  }
  html:root body[data-global-nav-expanded="true"] {
    --global-nav-width: 160px;
  }

  html:root body #appShell#appShell.app-shell {
    display: grid !important;
    grid-template-columns: var(--global-nav-width) minmax(0, 1fr) !important;
    grid-template-rows: 56px minmax(0, 1fr) !important;
    grid-template-areas: none !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: var(--neutral-bg) !important;
    transition: none !important;
  }
  html:root body #appShell#appShell > header.topbar {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  html:root body #appShell#appShell > .workspace {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  html:root body #appShell#appShell > #documentTabsBar {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html:root body[data-active-step="flow"] #appShell#appShell.app-shell {
    grid-template-rows: 56px 38px minmax(0, 1fr) !important;
  }
  html:root body[data-active-step="flow"] #appShell#appShell > #documentTabsBar {
    grid-row: 2 !important;
  }
  html:root body[data-active-step="flow"] #appShell#appShell > .workspace {
    grid-row: 3 !important;
  }
  html:root body.workbench-editor-active #appShell#appShell.app-shell {
    grid-template-rows: 56px 38px minmax(0, 1fr) !important;
  }
  html:root body.workbench-editor-active #appShell#appShell > #documentTabsBar {
    grid-row: 2 !important;
    display: grid !important;
    height: 38px !important;
  }
  html:root body.workbench-editor-active #appShell#appShell > .workspace {
    grid-row: 3 !important;
  }
  html:root body.workbench-home-active #appShell#appShell > #documentTabsBar {
    display: none !important;
  }
  html:root body[data-project-home-mode="chat"] #appShell#appShell.app-shell {
    grid-template-rows: minmax(0, 1fr) !important;
  }
  html:root body[data-project-home-mode="chat"] #appShell#appShell > :is(header.topbar, #documentTabsBar) {
    display: none !important;
  }
  html:root body[data-project-home-mode="chat"] #appShell#appShell > .workspace {
    grid-row: 1 !important;
    height: 100% !important;
  }

  html:root body #appShell#appShell > #globalAppNav.rail {
    display: flex !important;
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 1 / -1 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: var(--global-nav-width) !important;
    min-width: var(--global-nav-width) !important;
    max-width: var(--global-nav-width) !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 12px 6px 10px !important;
    margin: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--neutral-line) !important;
    border-radius: 0 !important;
    background: var(--neutral-chrome) !important;
    background-image: none !important;
    color: var(--neutral-muted) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    transition: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    z-index: 10030 !important;
  }
  html:root body #globalAppNav :is(.global-nav-header, .global-nav-items, .global-nav-footer) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  html:root body #globalAppNav .global-nav-header {
    flex: 0 0 auto !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--neutral-line) !important;
  }
  html:root body #globalAppNav .global-nav-items {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
  }
  html:root body #globalAppNav .global-nav-footer {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    padding-top: 7px !important;
    border-top: 1px solid var(--neutral-line) !important;
  }
  html:root body #globalAppNav :is(button[data-global-nav], #globalNavSettingsBtn, #globalNavToggle, #globalHomeBrandBtn) {
    display: flex !important;
    position: relative !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    max-width: none !important;
    padding: 8px 3px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--neutral-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    font: inherit !important;
    text-align: center !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer !important;
  }
  html:root body #globalAppNav :is(button[data-global-nav], #globalNavSettingsBtn, #globalNavToggle, #globalHomeBrandBtn)::before,
  html:root body #globalAppNav :is(button[data-global-nav], #globalNavSettingsBtn, #globalNavToggle, #globalHomeBrandBtn)::after {
    content: none !important;
    display: none !important;
  }
  html:root body #globalAppNav :is(button[data-global-nav], #globalNavSettingsBtn, #globalNavToggle, #globalHomeBrandBtn):hover {
    color: var(--neutral-text) !important;
    background: var(--neutral-panel-soft) !important;
  }
  html:root body #globalAppNav :is(button[data-global-nav], #globalNavSettingsBtn, #globalNavToggle, #globalHomeBrandBtn):focus-visible {
    outline: 2px solid var(--neutral-accent) !important;
    outline-offset: -2px !important;
  }
  html:root body #globalAppNav button[data-global-nav]:is(.active, [aria-current="page"], [aria-selected="true"]) {
    background: var(--neutral-accent-soft) !important;
    color: var(--neutral-accent-strong) !important;
  }
  html:root body #globalAppNav .global-nav-task-count:not([hidden]) {
    display: inline-flex !important;
    position: absolute !important;
    top: 5px !important;
    right: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 15px !important;
    height: 15px !important;
    padding: 0 3px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--neutral-accent) !important;
    color: var(--neutral-accent-text) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }
  html:root body #globalAppNav .global-nav-task-count[hidden] {
    display: none !important;
  }
  html:root body #globalAppNav :is(button[data-global-nav], #globalNavSettingsBtn) > span:not(.fluent-icon-shell) {
    display: contents !important;
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html:root body #globalAppNav :is(button[data-global-nav], #globalNavSettingsBtn, #globalHomeBrandBtn) > strong {
    display: block !important;
    min-width: 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html:root body #globalAppNav :is(button[data-global-nav], #globalNavSettingsBtn, #globalNavToggle) :is(svg, i[data-lucide], .fluent-icon-shell) {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    flex: 0 0 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    color: inherit !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html:root body #globalAppNav #globalHomeBrandBtn {
    min-height: 40px !important;
    padding-block: 4px !important;
    gap: 7px !important;
  }
  html:root body #globalAppNav #globalHomeBrandBtn > img {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    object-fit: contain !important;
    box-shadow: none !important;
    filter: none !important;
  }
  html:root body #globalAppNav #globalHomeBrandBtn > strong {
    display: none !important;
  }
  html:root body #globalAppNav #globalNavToggle {
    min-height: 28px !important;
    padding-block: 4px !important;
  }
  html:root body #globalAppNav #globalNavToggle > :is(strong, span:not(.fluent-icon-shell)) {
    display: none !important;
  }
  html:root body[data-global-nav-expanded="true"] #globalAppNav :is(button[data-global-nav], #globalNavSettingsBtn, #globalHomeBrandBtn) {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    min-height: 42px !important;
    padding-inline: 12px !important;
    text-align: left !important;
  }
  html:root body[data-global-nav-expanded="true"] #globalAppNav :is(button[data-global-nav], #globalNavSettingsBtn, #globalHomeBrandBtn) > strong {
    display: block !important;
    font-size: 13px !important;
  }

  /* The single account control keeps its original handlers and menu IDs. */
  html:root body #globalAppNav #globalAccountSlot,
  html:root body #globalAccountSlot #appAvatarControl#appAvatarControl {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  html:root body #globalAccountSlot #appAvatarControl#appAvatarControl > :is(p, #accountSettingsQuickBtn) {
    display: none !important;
  }
  html:root body #globalAccountSlot #appAvatarMenuBtn#appAvatarMenuBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 6px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--neutral-text) !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }
  html:root body #globalAccountSlot #appAvatarMenuBtn#appAvatarMenuBtn:is(:hover, [aria-expanded="true"]) {
    background: var(--neutral-panel-soft) !important;
  }
  html:root body #globalAccountSlot #appAvatarMenuBtn .customer-account-avatar,
  html:root body #globalAccountSlot #appAvatarMenuBtn .customer-account-avatar > img {
    display: block !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    object-fit: cover !important;
    box-shadow: none !important;
  }
  html:root body #globalAccountSlot #appAvatarMenuPreview {
    border-radius: 50% !important;
    aspect-ratio: 1 !important;
    object-fit: cover !important;
    box-shadow: none !important;
  }
  html:root body #globalAccountSlot #appAvatarMenuBtn .customer-account-copy {
    display: none !important;
  }
  html:root body[data-global-nav-expanded="true"] #globalAccountSlot #appAvatarMenuBtn#appAvatarMenuBtn {
    justify-content: flex-start !important;
    padding-inline: 10px !important;
  }
  html:root body[data-global-nav-expanded="true"] #globalAccountSlot #appAvatarMenuBtn .customer-account-copy {
    display: grid !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 3px !important;
    text-align: left !important;
  }
  html:root body #globalAccountSlot #appAvatarMenuBtn :is(.customer-account-name, .customer-account-name strong, .customer-account-copy > small) {
    min-width: 0 !important;
    max-width: 100% !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 11px !important;
  }
  html:root body #globalAccountSlot #appAvatarMenuBtn .customer-account-copy > small {
    color: var(--neutral-muted) !important;
    font-size: 10px !important;
  }
  html:root body #globalAccountSlot #appAvatarMenuBtn .customer-account-chevron {
    display: none !important;
  }
  html:root body #globalAccountSlot #appAvatarControl#appAvatarControl > #appAvatarMenu:not(.hidden) {
    display: grid !important;
    position: fixed !important;
    inset: auto auto 14px calc(var(--global-nav-width) + 8px) !important;
    width: min(300px, calc(100vw - var(--global-nav-width) - 22px)) !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100dvh - 28px) !important;
    padding: 10px !important;
    margin: 0 !important;
    gap: 2px !important;
    border: 1px solid var(--neutral-line-strong) !important;
    border-radius: 10px !important;
    background: var(--neutral-panel) !important;
    color: var(--neutral-text) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    overflow: auto !important;
    z-index: 10100 !important;
    box-sizing: border-box !important;
  }
  html:root body #globalAccountSlot #appAvatarMenu.hidden {
    display: none !important;
  }
  html:root body #globalAccountSlot #appAvatarMenu > button {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 36px !important;
    padding: 7px 9px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    font-size: 12px !important;
    text-align: left !important;
  }
  html:root body #globalAccountSlot #appAvatarMenu > button:hover {
    background: var(--neutral-panel-soft) !important;
  }
  html:root body #appShell#appShell > #fileCenter:not(.hidden) {
    z-index: 10200 !important;
  }

  html:root body #projectInfoDialog {
    width: min(480px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 40px) !important;
    padding: 22px !important;
    border: 1px solid var(--neutral-line-strong) !important;
    border-radius: 12px !important;
    background: var(--neutral-panel) !important;
    color: var(--neutral-text) !important;
    box-shadow: none !important;
    overflow: auto !important;
    box-sizing: border-box !important;
  }
  html:root body #projectInfoDialog::backdrop {
    background: rgb(0 0 0 / 35%) !important;
    backdrop-filter: none !important;
  }
  html:root body #projectInfoDialog > header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 22px !important;
  }
  html:root body #projectInfoDialog h2 {
    margin: 0 !important;
    color: inherit !important;
    font-size: 17px !important;
    font-weight: 600 !important;
  }
  html:root body #projectInfoCloseBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 6px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--neutral-muted) !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }
  html:root body #projectInfoCloseBtn:hover {
    background: var(--neutral-panel-soft) !important;
    color: var(--neutral-text) !important;
  }
  html:root body #projectInfoDialog > label {
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--neutral-muted) !important;
    font-size: 12px !important;
  }
  html:root body #projectInfoName {
    color: var(--neutral-text) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    overflow-wrap: anywhere !important;
  }
  html:root body #projectInfoMeta {
    margin: 10px 0 22px !important;
    color: var(--neutral-muted) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  html:root body #projectInfoBrief {
    width: 100% !important;
    min-height: 130px !important;
    padding: 10px !important;
    border: 1px solid var(--neutral-line) !important;
    border-radius: 7px !important;
    background: var(--neutral-panel-soft) !important;
    color: var(--neutral-text) !important;
    font: inherit !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    box-shadow: none !important;
    resize: vertical !important;
    box-sizing: border-box !important;
  }

  /* A project title identifies the document; destinations live in the rail. */
  html:root body #appShell#appShell > header.topbar > .brand-block,
  html:root body #appShell#appShell > header.topbar > #editorProjectContext > #fileCenterBtn,
  html:root body #appShell#appShell > header.topbar #advancedToolsBtn,
  html:root body #appShell#appShell > header.topbar #settingsBtn {
    display: none !important;
  }
  html:root body.workbench-editor-active #appShell#appShell > header.topbar {
    display: grid !important;
    grid-template-columns: max-content minmax(110px, 220px) minmax(280px, 1fr) max-content !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 4px 14px !important;
  }
  html:root body.workbench-editor-active #appShell#appShell > header.topbar > #editorProjectContext:not([hidden]) {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    gap: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 240px !important;
    overflow: hidden !important;
  }
  html:root body.workbench-editor-active #appShell#appShell > header.topbar #editorProjectName {
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    color: var(--neutral-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 5px 7px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    text-align: left !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }
  html:root body.workbench-editor-active #appShell#appShell > header.topbar #editorProjectName:hover {
    background: var(--neutral-panel-soft) !important;
  }
  html:root body.workbench-editor-active #appShell#appShell > header.topbar #editorProjectName:focus-visible {
    outline: 2px solid var(--neutral-accent) !important;
    outline-offset: -2px !important;
  }
  html:root body.workbench-editor-active #appShell#appShell > header.topbar > #editorWorkflowNav {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
  html:root body.workbench-editor-active #appShell#appShell > header.topbar > #workbenchModeBridge {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  html:root body.workbench-editor-active #appShell#appShell > header.topbar > .top-actions {
    grid-column: 4 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }
  html:root body.workbench-editor-active #appShell#appShell > header.topbar > #projectHomeSearch {
    display: none !important;
  }

  /* The home side panel only contains conversation navigation. */
  html:root body #appShell#appShell #step-create#step-create .project-home-nav :is(.project-home-brand, #projectHomeSharedTools) {
    display: none !important;
  }
  html:root body[data-project-home-mode="work"] #appShell#appShell #step-create#step-create > .project-home-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html:root body[data-project-home-mode="work"] #appShell#appShell #step-create#step-create > .project-home-shell > .project-home-nav {
    display: none !important;
  }
  html:root body[data-project-home-mode="work"] #appShell#appShell #step-create#step-create > .project-home-shell > .project-home-content {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html:root body[data-project-home-mode="chat"] #appShell#appShell #step-create#step-create .project-home-nav {
    padding-top: 16px !important;
  }

  @media (max-width: 1199px) {
    html:root body.workbench-editor-active #appShell#appShell.app-shell {
      grid-template-rows: 90px 38px minmax(0, 1fr) !important;
    }
    html:root body.workbench-editor-active #appShell#appShell > header.topbar {
      grid-template-columns: max-content minmax(0, 1fr) max-content !important;
      grid-template-rows: 34px 36px !important;
      column-gap: 8px !important;
      row-gap: 6px !important;
      height: 90px !important;
      min-height: 90px !important;
      padding: 7px 10px !important;
    }
    html:root body.workbench-editor-active #appShell#appShell > header.topbar > #workbenchModeBridge {
      grid-column: 1 !important;
      grid-row: 1 !important;
    }
    html:root body.workbench-editor-active #appShell#appShell > header.topbar > #editorProjectContext:not([hidden]) {
      grid-column: 2 !important;
      grid-row: 1 !important;
    }
    html:root body.workbench-editor-active #appShell#appShell > header.topbar > .top-actions {
      grid-column: 3 !important;
      grid-row: 1 !important;
    }
    html:root body.workbench-editor-active #appShell#appShell > header.topbar > #editorWorkflowNav {
      grid-column: 1 / -1 !important;
      grid-row: 2 !important;
      justify-self: stretch !important;
      max-width: none !important;
      height: 36px !important;
      min-height: 36px !important;
      padding: 1px !important;
    }
  }

  @media (max-width: 1023px) {
    /* Expanding navigation becomes a drawer rather than narrowing artwork. */
    html:root body,
    html:root body[data-global-nav-expanded="true"] {
      --global-nav-width: 60px;
    }
    html:root body[data-global-nav-expanded="true"] #appShell#appShell > #globalAppNav.rail {
      width: 160px !important;
      min-width: 160px !important;
      max-width: 160px !important;
    }
    html:root body[data-global-nav-expanded="true"] #globalAccountSlot #appAvatarControl#appAvatarControl > #appAvatarMenu:not(.hidden) {
      left: 168px !important;
      width: min(300px, calc(100vw - 182px)) !important;
    }
    html:root body[data-project-home-mode="chat"].project-home-sidebar-open #appShell#appShell #step-create#step-create > .project-home-shell > .project-home-nav {
      left: var(--global-nav-width) !important;
      width: min(320px, calc(100vw - var(--global-nav-width))) !important;
      min-width: 0 !important;
      z-index: 10020 !important;
    }
    html:root body #workspaceToolBackBtn {
      left: calc(var(--global-nav-width) + 10px) !important;
      box-shadow: none !important;
    }
  }

  @media (max-width: 600px) {
    html:root body #globalAppNav button[data-global-nav] {
      min-height: 49px !important;
    }
    html:root body.workbench-editor-active #appShell#appShell > header.topbar #saveState {
      display: none !important;
    }
    html:root body.workbench-editor-active #appShell#appShell > header.topbar {
      padding-inline: 6px !important;
      gap: 6px !important;
    }
  }
  @media (max-width: 560px) {
    /* Message actions start at the transcript's left edge on compact
       layouts. Right-aligning their menu to the small trigger placed the
       user message menu outside the window. Reserve the global rail too. */
    html:root body[data-project-home-mode="chat"] #appShell#appShell
      #assistantDrawer.embedded[data-assistant-surface-mode="chat"]
      .assistant-message .assistant-message-more-menu .assistant-message-more-popover {
      left: 0 !important;
      right: auto !important;
      width: min(260px, calc(100vw - var(--global-nav-width) - 64px)) !important;
      min-width: 0 !important;
      max-width: calc(100vw - var(--global-nav-width) - 64px) !important;
      box-sizing: border-box !important;
      overflow-x: hidden !important;
    }
    /* A detached assistant can also open from the canvas. Its menu follows
       the same placement; it uses its own viewport instead of the rail. */
    html:root body[data-project-home-mode="chat"]
      #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"]
      .assistant-message .assistant-message-more-menu .assistant-message-more-popover {
      left: 0 !important;
      right: auto !important;
      width: min(260px, calc(100vw - 64px)) !important;
      min-width: 0 !important;
      max-width: calc(100vw - 64px) !important;
      box-sizing: border-box !important;
      overflow-x: hidden !important;
    }
  }
  @media (max-height: 680px) {
    html:root body #appShell#appShell > #globalAppNav.rail {
      gap: 4px !important;
      padding-block: 6px !important;
    }
    html:root body #globalAppNav :is(button[data-global-nav], #globalNavSettingsBtn) {
      min-height: 46px !important;
      gap: 3px !important;
      padding-block: 5px !important;
    }
  }
}

/* ==== consolidated from /model-connections.css (cascade order preserved) ==== */
/* Model connection settings: compact, neutral and easy to scan. */
@layer assistantChrome {
  html:root[data-theme] body #settingsModal #byokModelConnectionSection {
    display: block !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border: 0 !important;
    color: var(--neutral-text, #242426) !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-routing-overview {
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  #byokModelConnectionSection .byok-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-routing-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-routing-card {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    min-height: 64px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--neutral-line, #e3e3e6) !important;
    border-radius: 8px !important;
    background: var(--neutral-panel, #fff) !important;
    color: var(--neutral-text, #242426) !important;
    text-align: left !important;
    cursor: pointer !important;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-routing-card:hover,
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-routing-card:focus-visible {
    border-color: var(--neutral-accent, #b97828) !important;
    outline: none !important;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-routing-card.is-selected {
    border-color: var(--neutral-accent, #b97828) !important;
    background: var(--neutral-accent-soft, rgb(162 104 32 / 8%)) !important;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-routing-card-icon {
    display: grid !important;
    width: 28px !important;
    height: 28px !important;
    place-items: center !important;
    border-radius: 7px !important;
    background: var(--neutral-panel-soft, #f0f0f1) !important;
    color: var(--neutral-muted, #646469) !important;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-routing-card.is-selected .byok-routing-card-icon {
    background: var(--neutral-accent-soft, rgb(162 104 32 / 14%)) !important;
    color: var(--neutral-accent-strong, #88551a) !important;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-routing-card-icon :is(svg, i) { width: 15px !important; height: 15px !important; }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-routing-card-copy {
    display: grid !important;
    min-width: 0 !important;
    gap: 2px !important;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-routing-card-copy strong {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-routing-card-copy small {
    overflow: hidden !important;
    color: var(--neutral-muted, #646469) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-routing-card-status {
    align-self: start !important;
    color: var(--neutral-muted, #646469) !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-routing-card.is-selected .byok-routing-card-status {
    color: var(--neutral-accent-strong, #88551a) !important;
    font-weight: 650 !important;
  }
  @media (max-width: 620px) {
    html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-routing-cards { grid-template-columns: 1fr !important; }
  }

  html:root[data-theme] body #settingsModal [data-settings-pane="models"] > h3 {
    margin: 0 0 12px !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection :is(button, input, select, summary) {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-privacy-note {
    max-width: 680px !important;
    margin: 0 0 10px !important;
    color: var(--neutral-muted, #646469) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-kind-switch {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 132px)) !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
    padding: 2px !important;
    border: 1px solid var(--neutral-line, #e3e3e6) !important;
    border-radius: 6px !important;
    background: var(--neutral-panel-soft, #f4f4f5) !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-kind-switch button {
    min-height: 30px !important;
    padding: 5px 10px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--neutral-muted, #646469) !important;
    font-size: 12px !important;
    font-weight: 550 !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-kind-switch button[aria-selected="true"] {
    background: var(--neutral-accent-soft, rgb(162 104 32 / 12%)) !important;
    color: var(--neutral-accent-strong, #88551a) !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-connection-disclosure.byok-kind-disclosure {
    width: fit-content !important;
    max-width: 100% !important;
    margin: -2px 0 10px !important;
    border-top: 0 !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-connection-disclosure.byok-kind-disclosure > summary {
    display: inline-flex !important;
    min-height: 28px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 2px !important;
    color: var(--neutral-muted, #646469) !important;
    background: transparent !important;
    font-size: 11px !important;
    font-weight: 550 !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-connection-disclosure.byok-kind-disclosure > summary:hover {
    color: var(--neutral-text, #242426) !important;
    background: var(--neutral-panel-soft, #f4f4f5) !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-optional-kind-switch {
    grid-template-columns: minmax(0, 264px) !important;
    margin: 4px 0 0 !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-connection-disclosure.byok-kind-disclosure > summary > :last-child {
    margin-left: 0 !important;
    width: 13px !important;
    height: 13px !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokConnectionGuide {
    min-height: 18px !important;
    margin: 0 0 12px !important;
    color: var(--neutral-muted, #646469) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokKindHelp {
    margin: 0 0 6px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  html:root[data-theme] body.browser-settings-mode #settingsModal .settings-nav [data-settings-view="models"] {
    display: block !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokConfigFields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokConfigFields > :is(#byokProfileLabelField, .byok-reuse-current-field, .byok-provider-model-field, #byokAdvancedOptions) {
    grid-column: 1 / -1 !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokConfigFields > .byok-provider-picker-field {
    display: grid !important;
    max-width: none !important;
    gap: 6px !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokConfigFields > .settings-path-field,
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-model-id-field {
    display: grid !important;
    min-width: 0 !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokConfigFields label > span,
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-model-id-field > label {
    color: var(--neutral-muted, #646469) !important;
    font-size: 11px !important;
    font-weight: 550 !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection :is(input:not([type="checkbox"]), select) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 7px 10px !important;
    border: 1px solid var(--neutral-line-strong, #c9c9ce) !important;
    border-radius: 5px !important;
    background: var(--neutral-panel, #fff) !important;
    background-image: none !important;
    color: var(--neutral-text, #242426) !important;
    font-size: 12px !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection :is(input, select):focus-visible,
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-provider-picker-trigger:focus-visible {
    border-color: var(--neutral-accent, #a26820) !important;
    outline: 1px solid var(--neutral-accent, #a26820) !important;
    outline-offset: 1px !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection :is(input, select)::placeholder {
    color: var(--neutral-faint, #747479) !important;
    opacity: 1 !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-provider-picker-trigger {
    width: 100% !important;
    min-height: 36px !important;
    padding: 7px 10px !important;
    border: 1px solid var(--neutral-line-strong, #c9c9ce) !important;
    border-radius: 5px !important;
    background: var(--neutral-panel, #fff) !important;
    color: var(--neutral-text, #242426) !important;
    font-size: 12px !important;
    box-shadow: none !important;
  }

  html:root[data-theme] body #byokProviderPickerPanel {
    min-width: 0 !important;
    border: 1px solid var(--neutral-line-strong, #c9c9ce) !important;
    border-radius: 6px !important;
    background: var(--neutral-panel, #fff) !important;
    color: var(--neutral-text, #242426) !important;
    box-shadow: none !important;
  }

  html:root[data-theme] body #byokProviderPickerPanel .byok-provider-picker-results > button {
    border-color: transparent !important;
    background: var(--neutral-panel-soft, #f4f4f5) !important;
    color: var(--neutral-text, #242426) !important;
    box-shadow: none !important;
  }

  html:root[data-theme] body #byokProviderPickerPanel .byok-provider-picker-results > button[aria-current="true"] {
    border-color: var(--neutral-accent, #a26820) !important;
    background: var(--neutral-accent-soft, rgb(162 104 32 / 12%)) !important;
  }

  html:root[data-theme] body #byokProviderPickerPanel :is(input, .byok-provider-picker-tabs > button) {
    border-color: var(--neutral-line-strong, #c9c9ce) !important;
    background: var(--neutral-panel, #fff) !important;
    color: var(--neutral-text, #242426) !important;
    box-shadow: none !important;
  }

  html:root[data-theme] body #byokProviderPickerPanel .byok-provider-picker-tabs > button[aria-selected="true"] {
    border-color: var(--neutral-accent, #a26820) !important;
    background: var(--neutral-accent-soft, rgb(162 104 32 / 12%)) !important;
    color: var(--neutral-accent-strong, #88551a) !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-model-id-field {
    grid-column: 1 / -1 !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-model-input-row {
    display: flex !important;
    align-items: stretch !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-model-input-row input {
    flex: 1 1 auto !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokBrowseModelsBtn {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-height: 36px !important;
    padding: 7px 11px !important;
    border: 1px solid var(--neutral-line-strong, #c9c9ce) !important;
    border-radius: 5px !important;
    background: var(--neutral-panel-soft, #f4f4f5) !important;
    color: var(--neutral-text, #242426) !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokBrowseModelsBtn:hover {
    border-color: var(--neutral-accent, #a26820) !important;
    background: var(--neutral-accent-soft, rgb(162 104 32 / 12%)) !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-provider-model-field {
    grid-column: 1 / -1 !important;
    gap: 4px !important;
    margin: -4px 0 0 !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-provider-model-field > small {
    color: var(--neutral-muted, #646469) !important;
    font-size: 10px !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokConfigActions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 16px 0 0 !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokConfigActions button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 34px !important;
    padding: 7px 11px !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    box-shadow: none !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokSaveAndTestBtn {
    border: 1px solid var(--neutral-accent, #a26820) !important;
    background: var(--neutral-accent, #a26820) !important;
    color: var(--neutral-accent-text, #fff) !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokConfigStatus {
    min-height: 18px !important;
    margin: 8px 0 0 !important;
    color: var(--neutral-muted, #646469) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-connection-result {
    display: grid !important;
    gap: 4px !important;
    margin-top: 12px !important;
    padding: 10px 0 !important;
    border-top: 1px solid var(--neutral-line, #e3e3e6) !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-connection-result[hidden] {
    display: none !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-connection-result strong {
    color: var(--neutral-text, #242426) !important;
    font-size: 12px !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-connection-result p {
    margin: 0 !important;
    color: var(--neutral-muted, #646469) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-connection-result .settings-actions {
    margin: 4px 0 0 !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-connection-disclosure {
    margin-top: 14px !important;
    border-top: 1px solid var(--neutral-line, #e3e3e6) !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-connection-disclosure > summary {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px !important;
    padding: 7px 0 !important;
    color: var(--neutral-text, #242426) !important;
    font-size: 12px !important;
    cursor: pointer !important;
    list-style: none !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-connection-disclosure > summary::-webkit-details-marker {
    display: none !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-connection-disclosure > summary > :last-child {
    margin-left: auto !important;
    width: 15px !important;
    height: 15px !important;
    color: var(--neutral-muted, #646469) !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-connection-disclosure[open] > summary > :last-child {
    transform: rotate(180deg) !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-advanced-fields,
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-security-fields {
    display: grid !important;
    gap: 10px !important;
    padding: 2px 0 12px !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-advanced-fields .settings-path-field,
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-security-fields .settings-path-field {
    max-width: 420px !important;
    margin: 0 !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-security-options > summary {
    flex-wrap: wrap !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokLockStatus {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--neutral-muted, #646469) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    text-align: right !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-security-fields .settings-actions {
    margin: 0 !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection :is(.fluent-icon-shell, .fluent-icon, svg, i[data-lucide]) {
    flex: 0 0 auto !important;
    width: 14px !important;
    height: 14px !important;
    color: currentColor !important;
  }

  html:root[data-theme] body #settingsModal #byokModelConnectionSection :is([hidden], .hidden),
  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokConfigFields[hidden],
  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokConfigFields > :is([hidden], .hidden),
  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokConfigActions[hidden],
  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokBrowseModelsBtn[hidden],
  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokSaveAndTestBtn[hidden],
  html:root[data-theme] body #byokProviderPickerPanel[hidden] {
    display: none !important;
  }

  @media (max-width: 640px) {
    html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokConfigFields {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-model-input-row {
      flex-direction: column !important;
    }
    html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokBrowseModelsBtn {
      width: 100% !important;
    }
    html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-security-options > summary {
      align-items: flex-start !important;
    }
    html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokLockStatus {
      flex-basis: 100% !important;
      text-align: left !important;
    }
  }
}

/* ==== consolidated from /copy-plan-surface.css (cascade order preserved) ==== */
/*
 * Copy planning surface
 *
 * This page is a short intake step before the editable canvas. Keep the
 * hierarchy quiet: one request, optional details, one useful preview. The
 * content remains in the DOM so existing drafts and keyboard navigation keep
 * working; only the repeated visual summary is removed from the first view.
 */

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-shell.copy-plan-simple {
  --v2-blue: var(--neutral-accent, #a86f25);
  --v2-blue-hover: color-mix(in srgb, var(--neutral-accent, #a86f25) 84%, #000);
  --v2-blue-soft: color-mix(in srgb, var(--neutral-accent, #a86f25) 10%, transparent);
  width: min(1420px, calc(100% - 32px)) !important;
  min-height: calc(100% - 32px) !important;
  margin: 16px auto !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* The title already describes the project. The same values were repeated in
 * the strip directly below the stepper, creating a noisy second header. */
html:root body #step-edit.editor-layout.copy-planning-mode
  .copy-plan-shell.copy-plan-simple > .copy-plan-brief-strip {
  display: none !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-head {
  padding: 22px 28px 18px !important;
  border-bottom: 1px solid var(--v2-line) !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-head h2 {
  font-size: clamp(20px, 1.8vw, 25px) !important;
  letter-spacing: -.025em !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-head p {
  max-width: 620px !important;
  color: var(--v2-muted) !important;
  white-space: normal !important;
  line-height: 1.55 !important;
}

/* The model indicator is useful, but should read as status instead of a
 * second panel. */
html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-model {
  min-width: 170px !important;
  padding-left: 16px !important;
  border-left: 1px solid var(--v2-line) !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-model > svg,
html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-kicker,
html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-section > header em,
html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-analysis-result > header span {
  color: var(--neutral-accent, var(--v2-blue)) !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-progress {
  min-height: 48px !important;
  padding: 10px 28px !important;
  background: transparent !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-progress span.active b {
  border-color: var(--neutral-accent, var(--v2-blue)) !important;
  color: var(--neutral-accent, var(--v2-blue)) !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-progress span.active {
  color: var(--neutral-accent, var(--v2-blue)) !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-progress i {
  background: color-mix(in srgb, var(--neutral-accent, var(--v2-blue)) 26%, var(--v2-line)) !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px) !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-controls {
  padding: 22px 28px 28px !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-analysis {
  min-width: 0 !important;
  padding: 22px 20px !important;
  border-left: 1px solid var(--v2-line) !important;
  background: var(--v2-panel-soft) !important;
  box-shadow: none !important;
}

/* Topic is the only required decision. Keep audience and goal visible, but
 * present them as quiet optional follow-ups instead of three equal blocks. */
html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-form {
  gap: 12px 14px !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-form > label:has(input[name="audience"]),
html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-form > label:has(input[name="presentationGoal"]) {
  grid-column: span 1 !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-form > label:has(input[name="audience"]) > span,
html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-form > label:has(input[name="presentationGoal"]) > span {
  color: var(--v2-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-form input,
html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-form select,
html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-form textarea {
  box-shadow: none !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-form input:focus,
html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-form select:focus,
html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-form textarea:focus {
  border-color: var(--neutral-accent, var(--v2-blue)) !important;
  outline: 2px solid color-mix(in srgb, var(--neutral-accent, var(--v2-blue)) 16%, transparent) !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-more-settings {
  margin-top: 7px !important;
  border-top: 1px solid var(--v2-line) !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-more-settings summary {
  min-height: 42px !important;
  padding: 12px 2px 8px !important;
  color: var(--v2-text) !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-more-settings summary::after {
  color: var(--neutral-accent, var(--v2-muted)) !important;
}

/* Make an empty preview a clear next step instead of a large dead area. */
html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-analysis-empty,
html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-analysis-loading {
  min-height: 180px !important;
  align-content: start !important;
  justify-items: start !important;
  padding: 8px 2px !important;
  text-align: left !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-analysis-empty > svg {
  color: var(--neutral-accent, var(--v2-blue)) !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-canvas-frame,
html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-canvas-item.planned .copy-plan-canvas-frame {
  box-shadow: none !important;
  border-color: var(--v2-line-strong) !important;
  background: var(--v2-panel) !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-canvas-item.planned .copy-plan-canvas-frame {
  border-color: color-mix(in srgb, var(--neutral-accent, var(--v2-blue)) 48%, var(--v2-line)) !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-canvas-frame > b {
  color: var(--neutral-accent, var(--v2-blue)) !important;
}

/* Keep the footer calm: analysis is secondary, generation is the only strong
 * action. */
html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-actions {
  padding: 12px 28px !important;
  background: var(--v2-panel) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-actions .ghost-btn {
  border-color: transparent !important;
  color: var(--v2-muted) !important;
  background: transparent !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-actions .ghost-btn:hover,
html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-actions .ghost-btn:focus-visible {
  border-color: var(--v2-line) !important;
  color: var(--neutral-accent, var(--v2-blue)) !important;
  background: var(--v2-panel-soft) !important;
}

html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-actions .primary-btn {
  border-color: var(--neutral-accent, var(--v2-blue)) !important;
  background: var(--neutral-accent, var(--v2-blue)) !important;
  color: var(--neutral-accent-text, #fff) !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-shell.copy-plan-simple {
    width: calc(100% - 20px) !important;
    min-height: calc(100% - 20px) !important;
    margin: 10px auto !important;
  }

  html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-head,
  html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-controls,
  html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-actions {
    padding-inline: 16px !important;
  }

  html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-layout {
    grid-template-columns: 1fr !important;
  }

  html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-analysis {
    border-top: 1px solid var(--v2-line) !important;
    border-left: 0 !important;
  }
}

@media (max-width: 560px) {
  html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-form > label:has(input[name="audience"]),
  html:root body #step-edit.editor-layout.copy-planning-mode .copy-plan-simple .copy-plan-form > label:has(input[name="presentationGoal"]) {
    grid-column: 1 / -1 !important;
  }
}

/* ==== consolidated from /social-workspace-clarity.css (cascade order preserved) ==== */
/* Platform adaptation: source and platform controls beside persistent results. */
#editorWorkflowWorkspace > #step-social.social-studio-v2 {
  --social-line: var(--v2-line, #d9dde3);
  --social-panel: var(--v2-panel, #fff);
  --social-soft: var(--v2-panel-soft, #f7f8fa);
  --social-text: var(--v2-text, #1d2329);
  --social-muted: var(--v2-muted, #6b7280);
  --social-accent: var(--accent, #697a71);
  box-sizing: border-box;
  width: 100% !important;
  min-height: 100% !important;
  padding: 0 20px 24px !important;
  overflow: visible !important;
  color: var(--social-text);
  background: var(--v2-bg, #f4f5f6) !important;
  font-size: 13px;
}
#editorWorkflowWorkspace > #step-social .social-store-hero {
  position: sticky !important;
  top: 0 !important;
  z-index: 10;
  display: flex !important;
  min-height: 82px !important;
  margin: 0 -20px !important;
  padding: 14px 20px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  border-bottom: 1px solid var(--social-line) !important;
  background: var(--social-panel) !important;
  backdrop-filter: none !important;
}
#editorWorkflowWorkspace > #step-social .social-eyebrow { margin: 0 0 3px !important; color: var(--social-muted) !important; font-size: 11px !important; }
#editorWorkflowWorkspace > #step-social .social-store-hero h2 { margin: 0 !important; color: var(--social-text) !important; font-size: 21px !important; line-height: 1.25 !important; }
#editorWorkflowWorkspace > #step-social .social-store-hero p { margin: 5px 0 0 !important; color: var(--social-muted) !important; font-size: 12px !important; }
#editorWorkflowWorkspace > #step-social .social-hero-side { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; flex-wrap: wrap; }
#editorWorkflowWorkspace > #step-social .social-model-status { display: flex !important; gap: 6px !important; }
#editorWorkflowWorkspace > #step-social .social-model-status > button {
  display: flex; align-items: center; gap: 6px;
  min-height: 34px !important; padding: 6px 9px !important;
  border: 1px solid var(--social-line) !important; border-radius: 6px !important;
  color: var(--social-text) !important; background: var(--social-panel) !important;
  box-shadow: none !important; cursor: pointer; font-size: 11px !important;
}
#editorWorkflowWorkspace > #step-social .social-model-status strong { color: var(--social-text) !important; font-size: 11px !important; }
#editorWorkflowWorkspace > #step-social .social-model-status span { color: var(--social-muted) !important; font-size: 11px !important; }
html:root[data-theme] body.workbench-editor-active #appShell #step-edit #editorWorkflowWorkspace > #step-social #socialGenerateAllBtn {
  min-height: 36px !important; padding: 0 14px !important;
  border: 1px solid var(--social-line) !important; border-radius: 6px !important;
  color: var(--social-text) !important; background: var(--social-panel) !important;
  box-shadow: none !important; font-size: 13px !important;
}
html:root[data-theme] body.workbench-editor-active #appShell #step-edit #editorWorkflowWorkspace > #step-social #socialGenerateAllBtn:not(:disabled) { border-color: var(--social-text) !important; color: var(--social-panel) !important; background: var(--social-text) !important; }
#editorWorkflowWorkspace > #step-social #closeSocialWorkspaceBtn { width: 32px !important; height: 32px !important; border: 1px solid var(--social-line) !important; color: var(--social-muted) !important; background: transparent !important; box-shadow: none !important; }
#editorWorkflowWorkspace > #step-social .social-v4-stages {
  display: flex !important; min-height: 34px !important; margin: 10px 0 12px !important;
  padding: 0 !important; gap: 24px !important; border: 0 !important;
  border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
#editorWorkflowWorkspace > #step-social .social-v4-stages > div { display: flex !important; align-items: center; gap: 8px; min-height: 34px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
#editorWorkflowWorkspace > #step-social .social-v4-stages strong { color: var(--social-text) !important; font-size: 12px !important; }
#editorWorkflowWorkspace > #step-social .social-v4-stages span { color: var(--social-muted) !important; font-size: 11px !important; }
#editorWorkflowWorkspace > #step-social .social-publish-layout {
  display: grid !important; grid-template-columns: minmax(320px, 370px) minmax(0, 1fr) !important;
  grid-auto-flow: row !important; grid-auto-rows: auto !important;
  align-items: start !important; gap: 16px !important;
  width: 100% !important; margin: 0 !important; padding: 0 !important;
}
#editorWorkflowWorkspace > #step-social .social-workflow-column { display: flex !important; flex-direction: column; grid-column: 1 !important; grid-row: 1 !important; gap: 12px !important; min-width: 0; max-height: none !important; overflow: visible !important; }
#editorWorkflowWorkspace > #step-social .social-workflow-column > * { grid-column: auto !important; grid-row: auto !important; flex: 0 0 auto; position: static !important; max-height: none !important; overflow: visible !important; }
#editorWorkflowWorkspace > #step-social .social-v4-results { position: sticky !important; top: 96px !important; grid-column: 2 !important; grid-row: 1 !important; max-height: calc(100dvh - 290px) !important; overflow: auto !important; scrollbar-gutter: stable; }
#editorWorkflowWorkspace > #step-social .social-step-card,
#editorWorkflowWorkspace > #step-social .social-preview-panel,
#editorWorkflowWorkspace > #step-social .social-advanced-panel {
  min-width: 0 !important; margin: 0 !important; padding: 14px !important;
  border: 1px solid var(--social-line) !important; border-radius: 8px !important;
  color: var(--social-text) !important; background: var(--social-panel) !important;
  box-shadow: none !important; text-align: left !important;
}
#editorWorkflowWorkspace > #step-social .social-step-head { gap: 8px !important; margin-bottom: 12px !important; }
#editorWorkflowWorkspace > #step-social .social-step-head > span { display: none !important; }
#editorWorkflowWorkspace > #step-social .social-step-head strong,
#editorWorkflowWorkspace > #step-social .social-card-head strong { color: var(--social-text) !important; font-size: 14px !important; }
#editorWorkflowWorkspace > #step-social .social-step-head p,
#editorWorkflowWorkspace > #step-social .social-preview-advice { color: var(--social-muted) !important; font-size: 12px !important; line-height: 1.6 !important; }
#editorWorkflowWorkspace > #step-social button,
#editorWorkflowWorkspace > #step-social select,
#editorWorkflowWorkspace > #step-social input { font-size: 12px !important; box-shadow: none !important; }
#editorWorkflowWorkspace > #step-social button,
#editorWorkflowWorkspace > #step-social select,
#editorWorkflowWorkspace > #step-social input:not([type=checkbox]):not([type=hidden]) { min-height: 34px; border-radius: 6px; }
#editorWorkflowWorkspace > #step-social .ghost-btn { color: var(--social-text) !important; background: var(--social-panel) !important; border-color: var(--social-line) !important; }
#editorWorkflowWorkspace > #step-social svg { width: 16px; height: 16px; flex-shrink: 0; color: currentColor; }
#editorWorkflowWorkspace > #step-social .social-form-grid label > span,
#editorWorkflowWorkspace > #step-social .social-source-type-field > span { color: var(--social-muted) !important; font-size: 12px !important; }
#editorWorkflowWorkspace > #step-social .social-primary-actions { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px !important; }
#editorWorkflowWorkspace > #step-social .social-primary-actions > button { min-width: 0; min-height: 34px !important; padding-inline: 7px !important; font-size: 12px !important; }
#editorWorkflowWorkspace > #step-social .social-source-type-field { grid-column: 1 / -1; }
#editorWorkflowWorkspace > #step-social #socialPickImagesBtn { grid-row: 3; grid-column: 1; }
#editorWorkflowWorkspace > #step-social #socialPickReferenceBtn { grid-row: 3; grid-column: 2; }
#editorWorkflowWorkspace > #step-social .social-source-more { grid-column: 1 / -1; order: 1; }
#editorWorkflowWorkspace > #step-social .social-inline-disclosure { margin-top: 10px; border-top: 1px solid var(--social-line); padding-top: 10px; }
#editorWorkflowWorkspace > #step-social .social-inline-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; color: var(--social-text); font-size: 12px; cursor: pointer; list-style: none; }
#editorWorkflowWorkspace > #step-social .social-inline-disclosure > summary::after { content: '+'; font-size: 16px; font-weight: 400; color: var(--social-muted); }
#editorWorkflowWorkspace > #step-social .social-inline-disclosure[open] > summary::after { content: '−'; }
#editorWorkflowWorkspace > #step-social .social-inline-disclosure > summary > span { color: var(--social-muted); margin-left: auto; font-size: 11px; }
#editorWorkflowWorkspace > #step-social .social-inline-disclosure > summary::-webkit-details-marker { display: none; }
#editorWorkflowWorkspace > #step-social .social-inline-disclosure[open] > :not(summary) { margin-top: 10px; }
#editorWorkflowWorkspace > #step-social .social-source-more { margin-top: 0; padding-top: 0; border-top: 0; }
#editorWorkflowWorkspace > #step-social .social-source-pools { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; margin-top: 8px !important; }
#editorWorkflowWorkspace > #step-social .social-source-pool,
#editorWorkflowWorkspace > #step-social .social-source-pool.wide { min-width: 0 !important; padding: 10px 0 0 !important; border: 0 !important; border-top: 1px solid var(--social-line) !important; background: transparent !important; }
#editorWorkflowWorkspace > #step-social .social-source-pool[hidden] { display: none !important; }
#editorWorkflowWorkspace > #step-social .social-pool-head strong { color: var(--social-text) !important; font-size: 12px !important; }
#editorWorkflowWorkspace > #step-social .social-pool-head span { color: var(--social-muted) !important; font-size: 11px !important; }
#editorWorkflowWorkspace > #step-social .social-source-grid { min-height: 38px !important; max-height: 170px !important; overflow: auto !important; }
#editorWorkflowWorkspace > #step-social .social-source-card { display: grid !important; grid-template-columns: 60px minmax(0,1fr) !important; gap: 9px; align-items: center; padding: 7px !important; border: 1px solid var(--social-line); border-radius: 6px; background: var(--social-panel) !important; box-shadow: none !important; }
#editorWorkflowWorkspace > #step-social .social-source-card > button { width: 60px !important; height: 64px !important; min-height: 0 !important; padding: 0 !important; background: var(--social-soft) !important; }
#editorWorkflowWorkspace > #step-social .social-source-card img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
#editorWorkflowWorkspace > #step-social .social-source-card figcaption { min-width: 0; padding: 0 !important; color: var(--social-text); }
#editorWorkflowWorkspace > #step-social .social-source-card figcaption strong { color: var(--social-text) !important; font-size: 12px !important; }
#editorWorkflowWorkspace > #step-social .social-source-card figcaption :is(span,em) { color: var(--social-muted) !important; font-size: 11px !important; }
#editorWorkflowWorkspace > #step-social .social-source-grid.empty-state,
#editorWorkflowWorkspace > #step-social .social-output-grid.empty-state,
#editorWorkflowWorkspace > #step-social .social-copy-view.empty-state {
  min-height: 40px !important; padding: 10px !important; border: 0 !important;
  border-radius: 6px !important; color: var(--social-muted) !important;
  background: var(--social-soft) !important; font-size: 12px !important; line-height: 1.6;
}
#editorWorkflowWorkspace > #step-social .social-platform-picker { max-height: 188px !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 6px !important; overflow-y: auto !important; }
#editorWorkflowWorkspace > #step-social .social-platform-choice > span,
#editorWorkflowWorkspace > #step-social .social-result-platform-tabs button { min-height: 36px !important; padding: 7px 9px !important; border: 1px solid var(--social-line) !important; border-radius: 6px !important; color: var(--social-text) !important; background: var(--social-panel) !important; box-shadow: none !important; }
#editorWorkflowWorkspace > #step-social .social-platform-choice.selected > span,
#editorWorkflowWorkspace > #step-social .social-result-platform-tabs button.active { border-color: var(--social-text) !important; background: var(--social-soft) !important; box-shadow: none !important; }
#editorWorkflowWorkspace > #step-social .social-platform-choice input:focus-visible + span { outline: 2px solid var(--social-accent); outline-offset: 2px; }
#editorWorkflowWorkspace > #step-social .social-platform-choice strong { font-size: 12px !important; }
#editorWorkflowWorkspace > #step-social .social-platform-choice small { color: var(--social-muted) !important; font-size: 11px !important; }
#editorWorkflowWorkspace > #step-social .social-platform-more { grid-column: 1 / -1; margin-top: 2px; padding-top: 6px; }
#editorWorkflowWorkspace > #step-social .social-platform-more-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
#editorWorkflowWorkspace > #step-social .social-platform-size-row { display: flex !important; flex-wrap: wrap; gap: 8px; padding: 10px; border-color: var(--social-line) !important; background: var(--social-soft) !important; }
#editorWorkflowWorkspace > #step-social .social-platform-size-title { width: 100%; }
#editorWorkflowWorkspace > #step-social .social-platform-size-title strong,
#editorWorkflowWorkspace > #step-social .social-platform-size-editor > header strong { color: var(--social-text) !important; font-size: 12px !important; }
#editorWorkflowWorkspace > #step-social .social-platform-size-title small,
#editorWorkflowWorkspace > #step-social .social-platform-size-editor > header span { color: var(--social-muted) !important; font-size: 11px !important; }
#editorWorkflowWorkspace > #step-social .social-platform-size-add { flex: 1 1 140px; }
#editorWorkflowWorkspace > #step-social .social-platform-size-chips button { min-height: 20px !important; }
#editorWorkflowWorkspace > #step-social .social-publish-plan,
#editorWorkflowWorkspace > #step-social .social-recommend-box { background: var(--social-soft) !important; border-color: var(--social-line) !important; color: var(--social-text) !important; box-shadow: none !important; font-size: 12px; }
#editorWorkflowWorkspace > #step-social .social-result-stage-head { gap: 12px !important; flex-wrap: wrap; margin-bottom: 10px; }
#editorWorkflowWorkspace > #step-social .social-result-stage-head > div:first-child > strong { font-size: 18px !important; }
#editorWorkflowWorkspace > #step-social .social-result-stage-head > div:first-child > span { color: var(--social-muted) !important; font-size: 11px !important; }
#editorWorkflowWorkspace > #step-social .social-result-toolbar { gap: 6px !important; flex-wrap: wrap; }
#editorWorkflowWorkspace > #step-social .social-result-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 10px !important; }
#editorWorkflowWorkspace > #step-social .social-result-head strong { color: var(--social-text) !important; font-size: 14px !important; }
#editorWorkflowWorkspace > #step-social .social-result-head span { color: var(--social-muted) !important; font-size: 12px !important; }
#editorWorkflowWorkspace > #step-social .social-preview-advice { border: 0 !important; background: transparent !important; padding: 0 !important; margin: 8px 0 14px !important; }
#editorWorkflowWorkspace > #step-social .social-result-section { margin-top: 0 !important; padding: 16px 0 !important; border-top: 1px solid var(--social-line) !important; }
#editorWorkflowWorkspace > #step-social .social-output-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px !important; }
#editorWorkflowWorkspace > #step-social .social-output-card,
#editorWorkflowWorkspace > #step-social .social-output-preview,
#editorWorkflowWorkspace > #step-social .social-output-card figcaption { border-color: var(--social-line) !important; background: var(--social-soft) !important; box-shadow: none !important; }
#editorWorkflowWorkspace > #step-social .social-output-card-title strong { font-size: 13px !important; color: var(--social-text) !important; }
#editorWorkflowWorkspace > #step-social .social-output-preview { aspect-ratio: auto !important; min-height: 0 !important; height: 300px !important; padding: 8px !important; }
#editorWorkflowWorkspace > #step-social .social-output-card .social-output-preview img { width: 100% !important; height: 100% !important; max-height: 100% !important; object-fit: contain !important; background: var(--social-soft) !important; transform: none !important; filter: none !important; }
#editorWorkflowWorkspace > #step-social :is(.social-source-badge,.social-output-card-title em) { color: var(--social-muted) !important; border-color: var(--social-line) !important; background: var(--social-soft) !important; box-shadow: none !important; }
#editorWorkflowWorkspace > #step-social .social-output-card figcaption span,
#editorWorkflowWorkspace > #step-social .social-output-card figcaption em { font-size: 11px !important; color: var(--social-muted) !important; }
#editorWorkflowWorkspace > #step-social .social-disclosure:not([open]) > summary { margin-bottom: 0 !important; }
#editorWorkflowWorkspace > #step-social .social-generate-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
#editorWorkflowWorkspace > #step-social .social-layout-choice,
#editorWorkflowWorkspace > #step-social .social-mockup-preset,
#editorWorkflowWorkspace > #step-social .social-smart-chip { color: var(--social-text) !important; border-color: var(--social-line) !important; background: var(--social-panel) !important; box-shadow: none !important; transform: none !important; }
#editorWorkflowWorkspace > #step-social .social-layout-choice.active,
#editorWorkflowWorkspace > #step-social .social-mockup-preset.active { border-color: var(--social-text) !important; background: var(--social-soft) !important; }
html:root body[data-editor-workflow-stage='social'] #assistantFloatLauncher.assistant-float-launcher,
html:root body[data-editor-workflow-stage='social'] #assistantVoiceStatus { display: none !important; }
html:root body.workbench-editor-active[data-editor-workflow-stage='social'] #step-edit #editorNarrowPanelControls,
html:root body.workbench-editor-active[data-editor-workflow-stage='social'] #step-edit #editorNarrowPanelBackdrop { display: none !important; }
@media (max-width: 1100px) and (min-width: 761px) {
  #editorWorkflowWorkspace > #step-social .social-publish-layout { grid-template-columns: 320px minmax(0,1fr) !important; gap: 12px !important; }
  #editorWorkflowWorkspace > #step-social .social-output-grid { grid-template-columns: 1fr !important; }
  #editorWorkflowWorkspace > #step-social .social-v4-stages span { display: none; }
}
@media (max-width: 760px) {
  #editorWorkflowWorkspace > #step-social.social-studio-v2 { padding: 0 12px 18px !important; }
  #editorWorkflowWorkspace > #step-social .social-store-hero { position: static !important; margin: 0 -12px !important; padding: 12px !important; flex-direction: column; align-items: flex-start !important; }
  #editorWorkflowWorkspace > #step-social .social-hero-side { width: 100%; justify-content: flex-start !important; }
  #editorWorkflowWorkspace > #step-social .social-v4-stages { gap: 12px !important; }
  #editorWorkflowWorkspace > #step-social .social-v4-stages span { display: none; }
  #editorWorkflowWorkspace > #step-social .social-v4-stages strong { font-size: 11px !important; }
  #editorWorkflowWorkspace > #step-social .social-publish-layout { display: flex !important; flex-direction: column; gap: 12px !important; }
  #editorWorkflowWorkspace > #step-social .social-workflow-column,
  #editorWorkflowWorkspace > #step-social .social-v4-results { position: static !important; width: 100%; max-height: none !important; overflow: visible !important; }
  #editorWorkflowWorkspace > #step-social .social-v4-results { order: -1; }
  #editorWorkflowWorkspace > #step-social .social-output-grid { grid-template-columns: 1fr !important; }
}


/* Photo-edit transparency checkerboard: must live in assistantChrome so it
   beats the global button { background-image: none !important } reset. */
@layer assistantChrome {
  html:root body #assistantDrawer .assistant-image-edit-output .assistant-transparent-image-preview {
    background-color: #fff !important;
    background-image: conic-gradient(#e4e8ed 25%, #fff 0 50%, #e4e8ed 0 75%, #fff 0) !important;
    background-size: 24px 24px !important;
    background-position: 0 0 !important;
  }
  html:root[data-theme="dark"] body #assistantDrawer .assistant-image-edit-output .assistant-transparent-image-preview {
    background-color: #303741 !important;
    background-image: conic-gradient(#414955 25%, #303741 0 50%, #414955 0 75%, #303741 0) !important;
  }
}
/* floating-editor-portal: hide outside live editor (chat/history home) */
html:root[data-theme] body:not(.workbench-editor-active) #floatingEditorPortal {
  display: none !important;
  pointer-events: none !important;
}
html:root[data-theme] body:not(.workbench-editor-active) #floatingEditorPortal .floating-editor-tools {
  display: none !important;
}

/* ==== chat history rail: fill remaining height + pin/group ==== */
html:root body[data-project-home-mode="chat"] #step-create > .project-home-shell > .project-home-nav > #projectHomeConversationNav,
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: hidden !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav > .assistant-side-nav,
html:root body[data-project-home-mode="chat"] #projectHomeConversationNav #assistantSideNav {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
  overflow: hidden !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav #assistantSideHistory,
html:root body[data-project-home-mode="chat"] #step-create #assistantSideHistory.assistant-side-panel {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-content: flex-start !important;
  gap: 2px !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

html:root body[data-project-home-mode="chat"] #projectHomeConversationNav #assistantSideHistory.hidden {
  display: none !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  border-radius: 7px !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-row > .assistant-side-history-item {
  width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-row.is-pinned {
  background: color-mix(in srgb, var(--chat-text, #e8eaed) 6%, transparent) !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-row.is-pinned > .assistant-side-history-item {
  padding-left: 8px !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-actions {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 4px 4px 4px 0 !important;
  opacity: 0 !important;
  transition: opacity .12s ease !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-row:hover .assistant-side-history-actions,
html:root body[data-project-home-mode="chat"] .assistant-side-history-row:focus-within .assistant-side-history-actions,
html:root body[data-project-home-mode="chat"] .assistant-side-history-row.is-pinned .assistant-side-history-actions {
  opacity: 1 !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--chat-muted, #9aa0a6) !important;
  cursor: pointer !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-action:hover,
html:root body[data-project-home-mode="chat"] .assistant-side-history-action:focus-visible,
html:root body[data-project-home-mode="chat"] .assistant-side-history-action[aria-pressed="true"] {
  background: color-mix(in srgb, var(--chat-text, #e8eaed) 10%, transparent) !important;
  color: var(--chat-text, #e8eaed) !important;
  outline: none !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-action[aria-pressed="true"] {
  color: #f0c14d !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-action > :is(svg, i) {
  width: 14px !important;
  height: 14px !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-group {
  display: block !important;
  width: 100% !important;
  margin: 4px 0 2px !important;
  border: 0 !important;
  background: transparent !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-group > summary {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 28px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  color: var(--chat-muted, #9aa0a6) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .02em !important;
  cursor: pointer !important;
  list-style: none !important;
  user-select: none !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-group > summary::-webkit-details-marker {
  display: none !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-group > summary:hover,
html:root body[data-project-home-mode="chat"] .assistant-side-history-group > summary:focus-visible {
  background: color-mix(in srgb, var(--chat-text, #e8eaed) 8%, transparent) !important;
  color: var(--chat-text, #e8eaed) !important;
  outline: none !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-group > summary > small {
  margin-left: auto !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  opacity: .8 !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-section-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 6px 0 2px !important;
  padding: 2px 8px !important;
  color: var(--chat-muted, #9aa0a6) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-pin-mark {
  display: inline-flex !important;
  color: #f0c14d !important;
  margin-right: 4px !important;
  vertical-align: -1px !important;
}

html:root body[data-project-home-mode="chat"] .assistant-side-history-pin-mark > :is(svg, i) {
  width: 11px !important;
  height: 11px !important;
}

/* Keep conversion tools together and out of daily model menus. */
@layer assistantChrome {
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-usage-panel {
    min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-kind-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important; gap: 4px !important; margin: 0 0 14px !important; padding: 3px !important; border-radius: 8px !important;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-optional-kind-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-kind-switch button {
    display: grid !important; align-content: center !important; justify-items: start !important; gap: 3px !important;
    min-height: 46px !important; min-width: 0 !important; padding: 7px 10px !important; border-radius: 5px !important;
    text-align: left !important;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-kind-switch button strong {
    font-size: 12px !important; font-weight: 600 !important; line-height: 1.3 !important;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-kind-switch button small {
    display: block !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important;
    white-space: nowrap !important; font-size: 11px !important; line-height: 1.35 !important; font-weight: 400 !important;
    color: var(--neutral-muted) !important;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-kind-switch button em {
    margin-left: 3px; font-size: 10px; font-style: normal; font-weight: 400; color: var(--neutral-muted);
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-current-role {
    display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 0 4px !important;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-current-role > strong { font-size: 13px !important; font-weight: 600 !important; }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-role-status {
    flex: 0 0 auto; padding: 2px 6px; border: 1px solid var(--neutral-line); border-radius: 4px;
    color: var(--neutral-muted); background: var(--neutral-panel-soft); font-size: 10px; line-height: 1.4;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-role-status[data-status="configured"] {
    color: var(--neutral-accent-strong); border-color: transparent; background: var(--neutral-accent-soft);
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokConfigFields > .byok-provider-picker-field { grid-column: auto !important; }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-saved-profile-field :is(input, select) { width: 100% !important; max-width: 100% !important; }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokCopyDailyBtn {
    margin-left: auto !important; min-height: 26px !important; padding: 4px 8px !important; font-size: 11px !important;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokAdvancedOptions { margin-top: 0 !important; }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokAdvancedOptions > summary {
    box-sizing: border-box !important; min-height: 30px !important; padding-block: 5px !important;
  }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokConfigActions { margin-top: 10px !important; }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-editable-summary { margin: 10px 0 0 !important; font-size: 11px !important; line-height: 1.5 !important; }
  html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-privacy-note { margin: 10px 0 0 !important; }
  html:root[data-theme] body #settingsModal .byok-model-extras { margin: 10px 0 0 !important; border-top: 1px solid var(--neutral-line); }
  html:root[data-theme] body #settingsModal .byok-model-extras > summary {
    display: flex; align-items: center; gap: 8px; padding: 10px 0; color: var(--neutral-muted); font-size: 12px; cursor: pointer; list-style: none;
  }
  html:root[data-theme] body #settingsModal .byok-model-extras > summary::-webkit-details-marker { display: none; }
  html:root[data-theme] body #settingsModal .byok-model-extras > summary > :last-child { width: 14px; height: 14px; margin-left: auto; }
  html:root[data-theme] body #settingsModal .byok-model-extras[open] > summary > :last-child { transform: rotate(180deg); }
  @media (min-width: 641px) and (max-height: 800px) {
    html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-routing-overview { margin-bottom: 8px !important; }
    html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-routing-card { min-height: 56px !important; padding-block: 8px !important; }
    html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-kind-switch { margin-bottom: 10px !important; }
    html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-kind-switch button { min-height: 42px !important; padding-block: 5px !important; }
    html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokConfigFields { gap: 10px 14px !important; }
    html:root[data-theme] body #settingsModal #byokModelConnectionSection #byokConnectionGuide { margin-bottom: 8px !important; }
  }
  @media (max-width: 620px) {
    html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-optional-kind-switch button { padding-inline: 5px !important; }
    html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-optional-kind-switch button strong { font-size: 11px !important; }
  }
}

/* Compact per-turn image count; shared by the wizard and quick image dialog. */
@layer assistantChrome {
  html:root .assistant-image-count-dialog {
    width: min(380px, calc(100vw - 32px)); max-width: 100%; padding: 20px;
    border: 1px solid var(--neutral-line, var(--line)); border-radius: 12px;
    background: var(--neutral-panel, var(--panel)); color: var(--neutral-text, var(--text));
    box-shadow: none !important; overflow: auto;
  }
  html:root .assistant-image-count-dialog::backdrop { background: #0006; backdrop-filter: none; }
  html:root .assistant-image-count-dialog header, html:root .assistant-image-count-dialog footer {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  html:root .assistant-image-count-dialog h2 { font-size: 16px; line-height: 1.4; margin: 0; }
  html:root .assistant-image-count-dialog header button { width: 28px; height: 28px; padding: 0; font-size: 20px; }
  html:root .assistant-image-count-dialog footer { justify-content: flex-end; margin-top: 20px; }
  html:root .assistant-image-count-choice { display: grid; gap: 10px; min-width: 0; margin: 12px 0 16px; }
  html:root .assistant-image-count-label { display: grid; gap: 4px; }
  html:root .assistant-image-count-label strong { font-size: 13px; font-weight: 600; color: var(--neutral-text, var(--text)); }
  html:root .assistant-image-count-label small { font-size: 11px; line-height: 1.5; color: var(--neutral-muted, var(--muted)); }
  html:root .assistant-image-count-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card .assistant-image-count-buttons {
    width: min(100%, 300px) !important;
  }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card .assistant-image-count-buttons button {
    min-height: 32px !important; height: 32px !important; padding: 4px 12px !important;
    border-radius: 6px !important; box-shadow: none !important;
  }
  html:root .assistant-image-count-buttons button, html:root .assistant-image-count-dialog button {
    min-height: 32px; height: 32px; padding: 4px 12px; margin: 0; border-radius: 6px;
    border: 1px solid var(--neutral-line, var(--line)); background: transparent;
    color: var(--neutral-text, var(--text)); -webkit-text-fill-color: currentColor;
    font-size: 12px; font-weight: 500; box-shadow: none !important;
  }
  html:root body .assistant-image-count-buttons button[aria-pressed="true"] {
    border-color: var(--neutral-accent, var(--accent)) !important; color: var(--neutral-accent, var(--accent)) !important;
    -webkit-text-fill-color: currentColor !important;
    background: color-mix(in srgb, var(--neutral-accent, var(--accent)) 9%, transparent) !important;
  }
  html:root .assistant-image-count-dialog [data-assistant-count-confirm] {
    background: var(--neutral-accent, var(--accent)) !important; border-color: var(--neutral-accent, var(--accent)) !important;
    color: var(--neutral-accent-text, #fff) !important; -webkit-text-fill-color: currentColor !important;
  }
  html:root .assistant-image-count-dialog button:focus-visible, html:root .assistant-image-count-buttons button:focus-visible {
    outline: 2px solid var(--neutral-accent, var(--accent)); outline-offset: 2px;
  }
}

/* Keep decisions readable: numbered rows, one visible selection and one
   explicit continuation action, shared by the copy and design questions. */
@layer assistantChrome {
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-prompt {
  display: grid !important; gap: 3px !important; margin: 3px 0 0 !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  font-size: 13px !important; font-weight: 600 !important; line-height: 1.6 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-prompt > small {
  color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important;
  font-size: 11px !important; font-weight: 400 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-options {
  display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
  gap: 5px !important; width: 100% !important; min-width: 0 !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important;
  background: transparent !important; border-radius: 0 !important; overflow: visible !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-options > .assistant-question-option {
  display: grid !important; grid-template-columns: 27px minmax(0, 1fr) 18px !important;
  align-items: center !important; justify-content: initial !important; gap: 10px !important;
  width: 100% !important; min-width: 0 !important; min-height: 52px !important;
  height: auto !important; padding: 9px 11px !important; margin: 0 !important;
  border: 1px solid transparent !important; border-radius: 10px !important;
  background: transparent !important; box-shadow: none !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important;
  -webkit-text-fill-color: currentColor !important; text-align: left !important;
  white-space: normal !important; overflow-wrap: anywhere !important;
  font-size: 13px !important; font-weight: 400 !important; line-height: 1.5 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-options > .assistant-question-option:hover:not(:disabled) {
  background: color-mix(in srgb, var(--chat-text, var(--theme-text, #272727)) 4%, transparent) !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-options > .assistant-question-option[aria-pressed="true"] {
  background: color-mix(in srgb, var(--neutral-accent, var(--accent, #a86f25)) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--neutral-accent, var(--accent, #a86f25)) 28%, transparent) !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-reference-mode-list > .assistant-question-option {
  min-height: 42px !important; padding-block: 7px !important; cursor: pointer !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-reference-mode-list > .assistant-question-option:has(input:checked) {
  background: color-mix(in srgb, var(--neutral-accent, var(--accent, #a86f25)) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--neutral-accent, var(--accent, #a86f25)) 28%, transparent) !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-reference-mode-list > .assistant-question-option > input {
  position: static !important; width: 16px !important; height: 16px !important;
  margin: 0 !important; opacity: 1 !important; appearance: auto !important;
  accent-color: var(--neutral-accent, var(--accent, #a86f25)) !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-number {
  display: grid !important; place-items: center !important; flex: none !important;
  width: 27px !important; height: 27px !important; border-radius: 7px !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  background: color-mix(in srgb, var(--chat-text, var(--theme-text, #272727)) 4%, transparent) !important;
  color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important;
  font-size: 12px !important; line-height: 1 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-option-copy {
  display: grid !important; gap: 2px !important; min-width: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-option-copy > strong {
  display: block !important; color: inherit !important; font-size: 13px !important;
  font-weight: 600 !important; line-height: 1.5 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-option-copy > small {
  display: block !important; color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important;
  font-size: 11px !important; line-height: 1.5 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-indicator {
  justify-self: end !important; color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important;
  font-size: 18px !important; line-height: 1 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-option[aria-pressed="true"] > :is(.assistant-question-number, .assistant-question-indicator) {
  color: var(--neutral-accent, var(--accent, #a86f25)) !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-option:focus-visible {
  outline: 2px solid var(--neutral-accent, var(--accent, #a86f25)) !important; outline-offset: 2px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-directions > summary {
  color: var(--chat-text, var(--theme-text, #272727)) !important; font-size: 13px !important;
  font-weight: 600 !important; margin: 6px 0 7px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-controls > .assistant-design-task-choices {
  display: inline-flex !important; width: auto !important; min-height: 29px !important;
  height: auto !important; padding: 4px 8px !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 7px !important; background: transparent !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important; font-size: 11px !important;
  white-space: nowrap !important; box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-intent-card {
  width: min(100%, 560px) !important; box-sizing: border-box !important; padding: 20px !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 16px !important; background: var(--chat-bg, var(--theme-bg, #faf9f7)) !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important; box-shadow: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages#assistantMessages > .assistant-design-intent-card {
  width: min(100%, 560px) !important; max-width: 560px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-intent-custom input {
  background: transparent !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-intent-header { margin-bottom: 16px !important; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-actions {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important;
  justify-content: flex-end !important; gap: 8px !important; margin-top: 16px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-actions > button {
  width: auto !important; min-height: 34px !important; height: auto !important; padding: 7px 12px !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important; border-radius: 8px !important;
  background: transparent !important; color: var(--chat-text, var(--theme-text, #272727)) !important;
  box-shadow: none !important; font-size: 12px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-actions > .assistant-question-continue:not(:disabled) {
  background: var(--chat-text, var(--theme-text, #272727)) !important;
  color: var(--chat-bg, var(--theme-bg, #faf9f7)) !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-actions > button:disabled { opacity: .4 !important; cursor: not-allowed !important; }
@media (max-width: 560px) {
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card > header { flex-wrap: wrap !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-brief-card > header > .assistant-design-brief-controls { margin-left: auto !important; }
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-design-intent-card { padding: 16px !important; }
}
}

/* Conversation mode presents one decision at a time. The full workbench
   controls remain available on demand without competing with this question. */
@layer assistantChrome {
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-output-size select,
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-chat-question-card [data-assistant-question-reference] {
  max-width: 100% !important; min-width: 0 !important; padding: 8px !important; border-radius: 8px !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  background: var(--chat-bg, var(--theme-bg, #faf9f7)) !important; color: inherit !important; font-size: 12px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-custom-size {
  display: flex !important; align-items: center !important; gap: 8px !important; font-size: 12px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-custom-size input {
  min-width: 0 !important; width: 86px !important; padding: 8px !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important; border-radius: 7px !important;
  background: transparent !important; color: inherit !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages#assistantMessages > .assistant-chat-question-card {
  display: block !important; width: min(100%, 540px) !important; max-width: 540px !important;
  min-width: 0 !important; box-sizing: border-box !important; padding: 20px !important;
  margin-block: 12px !important; border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  border-radius: 18px !important; background: var(--chat-bg, var(--theme-bg, #faf9f7)) !important;
  color: var(--chat-text, var(--theme-text, #272727)) !important; box-shadow: none !important;
  overflow: visible !important; text-align: left !important;
}
/* Match the visible composer, including its reserved sidebar and scroll gutter. */
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.embedded[data-assistant-surface-mode="chat"] #assistantMessages#assistantMessages > :is(.assistant-chat-question-card, .assistant-design-intent-card) {
  width: var(--assistant-choice-width, min(100%, 860px)) !important;
  max-width: none !important;
  margin-inline: var(--assistant-choice-offset, auto) 0 !important;
  border-radius: 12px !important;
  transition: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-chat-question-card > header {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; min-height: 24px !important;
  color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; font-size: 12px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-chat-question-card > header > button {
  display: grid !important; place-items: center !important; width: 28px !important; height: 28px !important;
  min-width: 28px !important; min-height: 28px !important; padding: 0 !important; border: 0 !important;
  border-radius: 7px !important; background: transparent !important; color: inherit !important;
  box-shadow: none !important; font-size: 22px !important; line-height: 1 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-chat-question-card > h3 {
  margin: 0 !important; padding: 0 !important; color: inherit !important;
  font-size: 16px !important; font-weight: 600 !important; line-height: 1.6 !important; outline: none;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-topic {
  margin: 5px 0 16px !important; color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important;
  font-size: 12px !important; line-height: 1.6 !important; overflow-wrap: anywhere !important;
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-chat-question-body {
  display: grid !important; gap: 12px !important; min-width: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-chat-question-card > footer {
  position: static !important; padding: 14px 0 0 !important; margin-top: 14px !important;
  border-top: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important;
  background: transparent !important; box-shadow: none !important; width: auto !important; border-bottom: 0 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-copy-preview {
  display: block !important; max-height: 180px !important; overflow: auto !important; white-space: pre-wrap !important;
  overflow-wrap: anywhere !important; margin: 0 !important; padding: 12px !important; border-radius: 9px !important;
  background: color-mix(in srgb, var(--chat-text, var(--theme-text, #272727)) 4%, transparent) !important;
  color: inherit !important; font: inherit !important; font-size: 12px !important; line-height: 1.75 !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-links,
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-reference-tools > div {
  display: flex !important; flex-wrap: wrap !important; gap: 6px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages :is(.assistant-question-links, .assistant-question-reference-tools, .assistant-question-reference-picked, .assistant-question-output-size) button {
  width: auto !important; min-height: 30px !important; height: auto !important; padding: 5px 9px !important;
  border: 1px solid var(--chat-line, var(--theme-border, #d7d7d7)) !important; border-radius: 7px !important;
  background: transparent !important; color: var(--chat-text, var(--theme-text, #272727)) !important;
  font-size: 11px !important; box-shadow: none !important; white-space: normal !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages :is(.assistant-question-caption, .assistant-question-reference-tools > span, .assistant-question-reference-picked > span) {
  margin: 0 !important; font-size: 12px !important; line-height: 1.7 !important;
  color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important; overflow-wrap: anywhere !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-reference-tools {
  display: grid !important; gap: 7px !important; padding-top: 4px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages :is(.assistant-question-reference-picked, .assistant-question-output-size) {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  flex-wrap: wrap !important; gap: 8px !important; font-size: 13px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-chat-question-card .assistant-content-editor {
  min-height: 170px !important; height: 210px !important; max-height: 340px !important;
  resize: vertical !important; color: inherit !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-chat-question-card .assistant-content-contact-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-chat-question-card[data-question="contacts"] .assistant-content-contact-details > summary,
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-chat-question-card[data-question="reference"] .assistant-reference-settings-panel > summary,
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-chat-question-card[data-question="reference"] .assistant-reference-settings-title,
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-attachment-storage {
  display: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-chat-question-card .assistant-reference-settings-panel {
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-chat-question-card .assistant-reference-settings {
  display: grid !important; gap: 8px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-working {
  display: flex !important; align-items: center !important; gap: 10px !important;
  min-height: 70px !important; font-size: 13px !important; color: var(--chat-muted, var(--theme-text-tertiary, #777)) !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-dots {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-dots > i {
  width: 5px !important; height: 5px !important; border-radius: 50% !important;
  background: var(--neutral-accent, var(--accent, #a86f25)) !important;
  animation: assistant-question-pulse 1.2s ease-in-out infinite;
}
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-dots > i:nth-child(2) { animation-delay: .16s; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-dots > i:nth-child(3) { animation-delay: .32s; }
html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-chat-question-card button:focus-visible {
  outline: 2px solid var(--neutral-accent, var(--accent, #a86f25)) !important; outline-offset: 2px !important;
}
@keyframes assistant-question-pulse { 0%, 70%, 100% { opacity: .35; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  html:root body #assistantDrawer#assistantDrawer #assistantMessages .assistant-question-dots > i { animation: none; opacity: .7; }
}
@media (max-width: 560px) {
  html:root body #assistantDrawer#assistantDrawer #assistantMessages#assistantMessages > .assistant-chat-question-card {
    padding: 16px !important; border-radius: 14px !important;
  }
}
}
/* Optional copy-planning route stays quiet until the user opens Advanced. */
html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-copy-planning-option {
  margin-top: 3px !important;
  border-top: 0 !important;
  border: 1px solid var(--neutral-line, #e3e3e6) !important;
  border-radius: 10px !important;
  padding: 0 8px !important;
  background: var(--neutral-surface-soft, rgba(0, 0, 0, .02)) !important;
}
html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-copy-planning-option > summary {
  min-height: 27px !important;
  padding: 2px 0 !important;
}
html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-copy-planning-option > summary small {
  margin-left: auto !important;
  color: var(--neutral-muted, #777) !important;
  font-size: 10px !important;
}
html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-optional-role-button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 6px !important;
  padding: 6px 8px !important;
  border: 1px solid var(--neutral-line, #e3e3e6) !important;
  border-radius: 8px !important;
  background: var(--neutral-surface, #fff) !important;
  color: var(--neutral-text, #242426) !important;
  text-align: left !important;
  cursor: pointer !important;
}
html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-optional-role-button[aria-selected="true"] {
  border-color: var(--aw-blue, #4277ff) !important;
  background: var(--aw-blue-soft, rgba(66, 119, 255, .08)) !important;
}
html:root[data-theme] body #settingsModal #byokModelConnectionSection .byok-optional-role-button small {
  color: var(--neutral-muted, #777) !important;
}

/* /ia-layout.css */
/* IA layout fixes — cascade last. Order: skills out of side-tabs; chat primary;
   export→delivery; composer chrome +,input,voice,send; portals from visible + */

/* Saved batch pages already have their own previews in the transcript. Keep
   only the live status and cancel action instead of a second stack of images. */
html:root body #assistantDrawer#assistantDrawer #assistantImageGenerationProgress.has-transcript-previews #assistantImageGenerationProgressCanvases,
html:root body #assistantDrawer#assistantDrawer #assistantImageGenerationProgress.is-page-batch .assistant-image-generation-progress-visual:not(.is-indeterminate):not(.has-image):not(.has-error) {
  display: none !important;
}
html:root body #assistantDrawer#assistantDrawer #assistantImageGenerationProgress .has-image .assistant-image-generation-progress-visual-stage,
html:root body #assistantDrawer#assistantDrawer #assistantImageGenerationProgress .has-image .assistant-image-generation-progress-percent {
  display: none !important;
}

/* Show full slide proportions and let the transcript own scrolling. */
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer #assistantMessages .assistant-stage-conversation-list {
  display: grid !important;
  gap: 18px !important;
  max-height: none !important;
  overflow: visible !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer #assistantMessages .assistant-stage-conversation-list .assistant-stage-image-page {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer #assistantMessages .assistant-stage-conversation-list .assistant-stage-image-page > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-width: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  border: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer #assistantMessages .assistant-stage-image-page > span {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer #assistantMessages .assistant-stage-image-page strong {
  font-size: 13px !important;
  line-height: 1.5 !important;
}
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer #assistantMessages .assistant-stage-image-page small {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--chat-muted) !important;
}

/* 1) Side tabs: history + projects only (skills removed from markup) */
html:root body .assistant-side-tabs {
  grid-template-columns: 1fr 1fr !important;
}
html:root body #projectHomeSkillsBtn {
  display: none !important;
}

/* 2) Composer chrome: only +, input, voice, send. Mode/skills/advanced live under +. */
html:root body #assistantDrawer #assistantComposer > .assistant-composer-tools,
html:root body #projectHomeAssistantHost > #assistantDrawer.assistant-drawer.embedded #assistantComposer > .assistant-composer-tools,
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer > .assistant-composer-tools {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}
html:root body #assistantDrawer #assistantComposer.assistant-composer,
html:root body[data-project-home-mode="chat"] #assistantDrawer#assistantDrawer.assistant-drawer.embedded[data-assistant-surface-mode="chat"] #assistantComposer.assistant-composer {
  grid-template-rows: minmax(50px, auto) !important;
}

/* 3) Single Export CTA; hide parallel topbar Delivery duplicate */
html:root body #topbarDeliveryBtn.ia-topbar-delivery-duplicate,
html:root body #topbarDeliveryBtn {
  display: none !important;
}
html:root body #topbarExportMenu.ia-topbar-export-menu-legacy {
  display: none !important;
}
html:root body #exportPptBtn .lucide-chevron-down,
html:root body #exportPptBtn > i[data-lucide="chevron-down"] {
  display: none !important;
}

/* 4) Chat primary; demote work-mode smartCreate / designCenter as advanced */
html:root body[data-project-home-mode="work"] #smartCreate.ia-advanced-create::before {
  content: "高级新建（日常请用对话）";
  display: block;
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--v2-blue, #2374e1) 22%, transparent);
  background: color-mix(in srgb, var(--v2-blue, #2374e1) 8%, transparent);
  color: var(--v2-muted, #5f6368);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
html:root body[data-project-home-mode="work"] #smartCreateManualPanel.ia-advanced-create > summary {
  opacity: 0.92;
}

/* 5) Portalled popovers stay above composer; JS anchors to #assistantAddBtn when chrome triggers are hidden */

/* 6) Deep-work Work mode IA
   - Dual 对话|工作 segmented control LEFTMOST (before title), clear of workflow steps
   - Workflow strip stays steps-only
   - Home still uses #projectHomeModeSwitch; editor uses #workbenchModeBridge
   - Keep export as the sole topbar delivery CTA (prior IA pass) */

/* Force topbar columns: mode | title | steps | actions
   Beat polish-final @layer and workbench-shell media queries that put bridge at col 3/4. */
html:root body.workbench-editor-active #appShell#appShell > header.topbar,
html:root body.workbench-editor-active #appShell > header.topbar,
html:root body.workbench-editor-active #appShell > .topbar {
  display: grid !important;
  grid-template-columns: max-content minmax(100px, 220px) minmax(280px, 1fr) max-content !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
}

/* DOM + grid: bridge is leftmost (col 1). Hide brand/search in editor. */
html:root body.workbench-editor-active #appShell#appShell > header.topbar > .brand-block,
html:root body.workbench-editor-active #appShell > .topbar > .brand-block,
html:root body.workbench-editor-active #appShell#appShell > header.topbar > #projectHomeSearch,
html:root body.workbench-editor-active #appShell > .topbar > #projectHomeSearch {
  display: none !important;
}

html:root body.workbench-editor-active #appShell#appShell > header.topbar > #workbenchModeBridge,
html:root body.workbench-editor-active #appShell > header.topbar > #workbenchModeBridge,
html:root body.workbench-editor-active #appShell > .topbar > #workbenchModeBridge {
  display: inline-grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  order: -10 !important;
  align-items: center !important;
  justify-self: start !important;
  width: auto !important;
  min-width: 116px !important;
  max-width: none !important;
  height: 32px !important;
  margin: 0 2px 0 0 !important;
  padding: 2px !important;
  gap: 2px !important;
  border: 1px solid var(--neutral-line, #d9dee7) !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--neutral-panel, #fff) 88%, transparent) !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%) !important;
  position: static !important;
  inset: auto !important;
}

html:root body.workbench-editor-active #appShell#appShell > header.topbar > #editorProjectContext:not([hidden]),
html:root body.workbench-editor-active #appShell > .topbar > #editorProjectContext:not([hidden]) {
  display: flex !important;
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  order: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
}

html:root body.workbench-editor-active #appShell#appShell > header.topbar > #editorWorkflowNav,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 2 !important;
  order: 1 !important;
}

html:root body.workbench-editor-active #appShell#appShell > header.topbar > .top-actions,
html:root body.workbench-editor-active #appShell > .topbar > .top-actions {
  grid-column: 4 / 5 !important;
  grid-row: 1 / 2 !important;
  order: 2 !important;
  justify-self: end !important;
}

/* Segmented 对话|工作 tabs (editor topbar) */
html:root body.workbench-editor-active #workbenchModeBridge > button[data-workbench-mode] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  width: auto !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--neutral-muted, #64748b) !important;
  font-size: 12px !important;
  font-weight: 620 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

html:root body.workbench-editor-active #workbenchModeBridge > button[data-workbench-mode]:is(:hover, :focus-visible) {
  color: var(--neutral-text, #17202c) !important;
  background: color-mix(in srgb, var(--neutral-text, #17202c) 6%, transparent) !important;
  outline: none !important;
}

html:root body.workbench-editor-active #workbenchModeBridge > button[data-workbench-mode].active,
html:root body.workbench-editor-active #workbenchModeBridge > button[data-workbench-mode][aria-selected="true"] {
  background: var(--neutral-panel, #fff) !important;
  color: var(--neutral-text, #17202c) !important;
  box-shadow: 0 1px 3px rgb(15 23 42 / 10%) !important;
}

html:root body.workbench-editor-active #workbenchModeBridge > button[data-workbench-mode] :is(svg, i, .fluent-icon-shell) {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
}

html[data-theme="dark"] body.workbench-editor-active #workbenchModeBridge {
  border-color: #3f3f3f !important;
  background: color-mix(in srgb, #2a2a2a 92%, transparent) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body.workbench-editor-active #workbenchModeBridge > button[data-workbench-mode] {
  color: #a7a7a7 !important;
}
html[data-theme="dark"] body.workbench-editor-active #workbenchModeBridge > button[data-workbench-mode]:is(:hover, :focus-visible) {
  color: #dfdfdf !important;
  background: color-mix(in srgb, #fff 8%, transparent) !important;
}
html[data-theme="dark"] body.workbench-editor-active #workbenchModeBridge > button[data-workbench-mode].active,
html[data-theme="dark"] body.workbench-editor-active #workbenchModeBridge > button[data-workbench-mode][aria-selected="true"] {
  background: #2f2f2f !important;
  color: #dfdfdf !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 35%) !important;
}

/* Keep dual switch visible on mid widths (legacy shell hid .workbench-mode-bridge) */
@media (max-width: 900px) {
  html:root body.workbench-editor-active #appShell > .topbar > #workbenchModeBridge,
  html:root body.workbench-editor-active .workbench-mode-bridge {
    display: inline-grid !important;
  }
}

@media (max-width: 1199px) {
  html:root body.workbench-editor-active #appShell#appShell > header.topbar,
  html:root body.workbench-editor-active #appShell > .topbar {
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    grid-template-rows: 34px 36px !important;
  }
  html:root body.workbench-editor-active #appShell#appShell > header.topbar > #workbenchModeBridge,
  html:root body.workbench-editor-active #appShell > .topbar > #workbenchModeBridge {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    order: -10 !important;
  }
  html:root body.workbench-editor-active #appShell#appShell > header.topbar > #editorProjectContext:not([hidden]),
  html:root body.workbench-editor-active #appShell > .topbar > #editorProjectContext:not([hidden]) {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
  }
  html:root body.workbench-editor-active #appShell#appShell > header.topbar > .top-actions,
  html:root body.workbench-editor-active #appShell > .topbar > .top-actions {
    grid-column: 3 / 4 !important;
    grid-row: 1 / 2 !important;
  }
  html:root body.workbench-editor-active #appShell#appShell > header.topbar > #editorWorkflowNav,
  html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav {
    grid-column: 1 / -1 !important;
    grid-row: 2 / 3 !important;
    order: 5 !important;
  }
}

@media (max-width: 640px) {
  html:root body.workbench-editor-active #workbenchModeBridge {
    min-width: 88px !important;
  }
  html:root body.workbench-editor-active #workbenchModeBridge > button[data-workbench-mode] {
    padding: 0 8px !important;
    font-size: 11px !important;
  }
}

/* Preserve prior IA: single Export CTA only */
html:root body #topbarDeliveryBtn,
html:root body.workbench-editor-active #topbarDeliveryBtn {
  display: none !important;
}


/* 7) Restore editor workflow module switcher (��������/�������/�༭��Ʒ/��鵼��).
   A home-dashboard :has(.project-home-work:not(.hidden)) rule was matching the
   live editor too (JS never adds .hidden there) and hid #editorWorkflowNav.
   Keep the strip visible whenever the editor chrome is active. */
html:root body.workbench-editor-active #appShell#appShell > header.topbar > #editorWorkflowNav,
html:root body.workbench-editor-active #appShell > header.topbar > #editorWorkflowNav,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"]:not([hidden]) {
  display: inline-flex !important;
}

/* 8) Circular module-switch chips — always visible in editor.
   Round icon + label below; active ring/fill; completed checkmark.
   Highest cascade (ia-layout) so workmate/home rules cannot hide the strip. */
html:root body.workbench-editor-active #appShell#appShell > header.topbar > #editorWorkflowNav,
html:root body.workbench-editor-active #appShell > header.topbar > #editorWorkflowNav,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav,
html:root[data-theme] body.workbench-editor-active #appShell.app-shell > .topbar > #editorWorkflowNav,
html:root[data-theme] body[data-active-step="edit"].workbench-editor-active #appShell.app-shell > .topbar > #editorWorkflowNav,
html:root[data-performance-tier] body.workbench-editor-active .topbar > #editorWorkflowNav {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 2px 4px !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"]:not([hidden]),
html:root body.workbench-editor-active #appShell > header.topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"]:not([hidden]) {
  display: inline-flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  position: relative !important;
  min-width: 52px !important;
  max-width: 88px !important;
  width: auto !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 2px 4px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--neutral-muted, #64748b) !important;
  font-size: 10px !important;
  font-weight: 620 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  transform: none !important;
  cursor: pointer !important;
}

/* Hide secondary stages in the chip strip (style/review stay contextual). */
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-secondary="true"] {
  display: none !important;
}

/* Circular icon chip */
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] > .fluent-icon-shell,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] > i[data-lucide],
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] > svg:first-child {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid color-mix(in srgb, var(--neutral-line, #d5dde8) 88%, var(--neutral-muted, #64748b)) !important;
  border-radius: 50% !important;
  background: var(--neutral-panel, #fff) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
}

html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] > .fluent-icon-shell > .fluent-icon,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] > .fluent-icon-shell > svg,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] > i[data-lucide] svg,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] > svg:first-child {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  margin: 0 !important;
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* Label under the circle */
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] > span:not(.fluent-icon-shell) {
  display: block !important;
  width: 100% !important;
  max-width: 72px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: 10px !important;
  font-weight: 620 !important;
  line-height: 1.2 !important;
  color: inherit !important;
}

/* Suppress legacy count pill; stage detail stays in title/tooltip */
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"]::before,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"][data-workflow-count]::after {
  content: none !important;
  display: none !important;
}

/* Hover */
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"]:is(:hover, :focus-visible):not(:disabled) {
  color: var(--neutral-text, #17202c) !important;
  background: color-mix(in srgb, var(--neutral-text, #17202c) 5%, transparent) !important;
  outline: none !important;
}
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"]:is(:hover, :focus-visible):not(:disabled) > .fluent-icon-shell,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"]:is(:hover, :focus-visible):not(:disabled) > i[data-lucide],
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"]:is(:hover, :focus-visible):not(:disabled) > svg:first-child {
  border-color: color-mix(in srgb, var(--neutral-accent, #b58b56) 55%, var(--neutral-line, #d5dde8)) !important;
  background: var(--neutral-panel-raised, #f7f4ef) !important;
}

/* Active: filled circle + ring */
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"].active,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"][aria-selected="true"],
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"][aria-current="step"],
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav[data-active-workflow] > .editor-workflow-action[data-workflow-primary="true"].active {
  color: var(--neutral-accent-strong, #88551a) !important;
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"].active > .fluent-icon-shell,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"][aria-selected="true"] > .fluent-icon-shell,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"][aria-current="step"] > .fluent-icon-shell,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"].active > i[data-lucide],
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"][aria-selected="true"] > i[data-lucide],
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"].active > svg:first-child,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"][aria-selected="true"] > svg:first-child {
  color: #fff !important;
  border-color: var(--neutral-accent, #b58b56) !important;
  background: var(--neutral-accent, #b58b56) !important;
  background-image: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neutral-accent, #b58b56) 28%, transparent) !important;
}
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"].active > .fluent-icon-shell > .fluent-icon,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"][aria-selected="true"] > .fluent-icon-shell > .fluent-icon {
  color: #fff !important;
  background: currentColor !important;
}

/* Completed checkmark badge (non-destructive; sits on the circle) */
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"][data-workflow-complete="true"] > .fluent-icon-shell::after,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"].is-complete > .fluent-icon-shell::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: -2px !important;
  bottom: -2px !important;
  width: 12px !important;
  height: 12px !important;
  border: 1.5px solid var(--neutral-panel, #fff) !important;
  border-radius: 50% !important;
  background: #2f9d62 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.2 6.4 11l6-6' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 8px 8px !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 18%) !important;
  z-index: 2 !important;
}
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] > .fluent-icon-shell {
  position: relative !important;
}

/* Active completed: keep fill, checkmark still readable */
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"].active[data-workflow-complete="true"] > .fluent-icon-shell::after,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"].active.is-complete > .fluent-icon-shell::after {
  border-color: var(--neutral-accent, #b58b56) !important;
}

/* Dark theme */
html:root[data-theme="dark"] body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] {
  color: #a7a7a7 !important;
}
html:root[data-theme="dark"] body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] > .fluent-icon-shell,
html:root[data-theme="dark"] body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] > i[data-lucide],
html:root[data-theme="dark"] body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] > svg:first-child {
  border-color: #3f3f3f !important;
  background: #2a2a2a !important;
  color: #cfcfcf !important;
}
html:root[data-theme="dark"] body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"].active,
html:root[data-theme="dark"] body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"][aria-selected="true"] {
  color: #e8c79a !important;
}
html:root[data-theme="dark"] body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"].active > .fluent-icon-shell,
html:root[data-theme="dark"] body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"][aria-selected="true"] > .fluent-icon-shell {
  color: #1a1208 !important;
  border-color: #c9a36a !important;
  background: #c9a36a !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #c9a36a 30%, transparent) !important;
}

/* Disabled */
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"]:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* Compact widths: keep chips usable */
@media (max-width: 1199px) {
  html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav {
    height: 48px !important;
    min-height: 48px !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"]:not([hidden]) {
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] > .fluent-icon-shell,
  html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] > i[data-lucide],
  html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] > svg:first-child {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    flex-basis: 26px !important;
  }
}

@media (max-width: 640px) {
  html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] > span:not(.fluent-icon-shell) {
    /* Icon-only on very narrow; label remains in title/tooltip */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"]:not([hidden]) {
    min-width: 36px !important;
    max-width: 40px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
}


/* === URGENT FIX 20261011: editorWorkflowNav must be topbar direct child and visible === */
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav,
html:root body.workbench-editor-active #appShell > header.topbar > #editorWorkflowNav,
html:root body.workbench-editor-active .topbar > #editorWorkflowNav {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 52px !important;
  min-height: 48px !important;
}
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"]:not([hidden]) {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* === URGENT FIX 20261011b: force circular workflow chips === */
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav {
  height: 52px !important;
  min-height: 52px !important;
  justify-content: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"]:not([hidden]) {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 56px !important;
  width: auto !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 2px 6px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] > .fluent-icon-shell,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] > i[data-lucide],
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] > svg:first-child {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid var(--neutral-line, #3f3f3f) !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--neutral-panel, #2a2a2a) 92%, transparent) !important;
  box-shadow: none !important;
}
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"] > span:not(.fluent-icon-shell) {
  display: block !important;
  position: static !important;
  width: auto !important;
  max-width: 72px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: auto !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  clip-path: none !important;
}
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"].active > .fluent-icon-shell,
html:root body.workbench-editor-active #appShell > .topbar > #editorWorkflowNav > .editor-workflow-action[data-workflow-primary="true"][aria-selected="true"] > .fluent-icon-shell {
  border-color: var(--neutral-accent, #c9a36a) !important;
  background: var(--neutral-accent, #c9a36a) !important;
  color: #1a1208 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neutral-accent, #c9a36a) 30%, transparent) !important;
}