/* ChatFlow Creatives tab: Auto Edit + Chamber (2026-10-13), next to the uniqueizer (creatives.css).
   Same page frame and shared fields; colours from tokens only, so night needs no rules here. */
.cr-page > .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ae-views { flex: none; }
.ae-view > .cr-section { max-width: 1200px; }
.ae-view.hidden { display: none; }

/* form */
.ae-choices { display: flex; flex-wrap: wrap; gap: 16px 28px; }
.ae-choices > .field { flex: 0 1 auto; min-width: 0; max-width: 100%; }
/* the choices size to their labels (the shared .seg makes every button 104px wide) */
.ae-choices .seg { grid-auto-columns: auto; max-width: 100%; }
.ae-choices .seg > button { min-width: 0; padding: 0 14px; }
.ae-choices .hint { max-width: 360px; }
.ae-row2 { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.ae-geo { width: 110px; }
.ae-cold { max-width: 640px; }
.ae-form textarea.input { min-height: 72px; resize: vertical; font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font); padding-top: 8px; padding-bottom: 8px; }
.ae-warn { color: var(--warn); }

/* edit cards */
.ae-job { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ae-job + .ae-job { margin-top: 12px; }
.ae-job-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ae-job-head .chip, .ae-job-head .status { flex: none; }
.ae-name { margin: 0; font: var(--fw-semibold) var(--fs-section)/var(--lh-section) var(--font); color: var(--ink); overflow-wrap: anywhere; }
.ae-meta { margin: 2px 0 0; font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink-2); }
.ae-meta a, .ae-dels a, .ae-ch-main > a { color: var(--info); }
.ae-notes, .ae-summary, .ae-del-notes { margin: 0; font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font); color: var(--ink); white-space: pre-wrap; }
.ae-k { font-weight: var(--fw-semibold); color: var(--ink-2); margin-right: 6px; }
.ae-dels { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 6px; }
.ae-dels a { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.ae-del-notes { color: var(--ink-2); font-size: var(--fs-label); }
.ae-qc { display: flex; flex-wrap: wrap; gap: 10px; }
.ae-qc img { display: block; max-width: min(100%, 420px); height: auto; border-radius: var(--radius-control); border: 1px solid var(--edge); }
.ae-error { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--bad); font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font); overflow-wrap: anywhere; }
.ae-prog summary { cursor: pointer; font: var(--fw-semibold) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink-2); }
.ae-prog ol { margin: 6px 0 0; padding-left: 20px; font: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font); color: var(--ink-2); max-height: 220px; overflow: auto; }
.ae-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ae-revise, .ae-used { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.ae-revise.hidden, .ae-used.hidden { display: none; }
.ae-revise .btn, .ae-used .btn { align-self: flex-start; }

/* chamber */
.ae-ch-group { padding: 16px; }
.ae-ch-group + .ae-ch-group { margin-top: 12px; }
.ae-ch-title { margin: 0 0 8px; font: var(--fw-semibold) var(--fs-section)/var(--lh-section) var(--font); color: var(--ink); }
.ae-ch-list { list-style: none; margin: 0; padding: 0; }
.ae-ch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.ae-ch-row:first-child { border-top: 0; }
.ae-ch-row.is-used .ae-ch-main > a { color: var(--ink-2); }
.ae-ch-main > a { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.ae-ch-notes summary { cursor: pointer; font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink-2); }
.ae-ch-notes p { margin: 4px 0 0; font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink-2); }
.ae-ch-row .ae-used { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .ae-ch-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ae-ch-row .ae-actions { grid-column: 1 / -1; }
}