.agent-workbench { --agent-success:#16815d; --agent-danger:#c73c48; --agent-warning:#a77317; display:grid; grid-template-columns:216px minmax(0,1fr); height:100%; min-height:0; width:100%; color:var(--shell-text); background:var(--shell-panel-solid); font-size:14px; }
.agent-workbench * { box-sizing:border-box; letter-spacing:0; }
.agent-workbench [hidden] { display:none !important; }
.agent-workbench button,.agent-workbench select,.agent-workbench textarea,.agent-workbench input { font:inherit; color:inherit; }
.agent-workbench button,.agent-canvas-actions a { cursor:pointer; border:1px solid var(--shell-border); background:var(--shell-panel-solid); border-radius:6px; padding:8px 12px; min-height:36px; }
.agent-workbench button:hover:not(:disabled),.agent-canvas-actions a:hover { border-color:var(--shell-accent); background:var(--shell-active); }
.agent-workbench button:disabled { opacity:.5; cursor:wait; }
.agent-workbench :focus-visible { outline:2px solid var(--shell-accent); outline-offset:3px; }
.agent-workbench button.primary,.agent-workbench .agent-submit,.agent-workbench .agent-new-button { color:white; background:var(--shell-accent); border-color:transparent; }
.agent-history-panel { display:flex; flex-direction:column; min-height:0; padding:20px 12px; gap:12px; border-right:1px solid var(--shell-border); background:var(--shell-canvas); }
.agent-brand { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.agent-brand-mark { color:var(--shell-accent); font-size:24px; }
.agent-brand strong,.agent-brand small { display:block; }
.agent-brand small,.agent-empty-copy,.agent-history-heading,.agent-history-item span,.agent-history-item footer { color:var(--shell-text-secondary); font-size:12px; }
.agent-search { display:flex; align-items:center; gap:6px; border:1px solid var(--shell-border); border-radius:6px; padding:6px; }
.agent-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; }
.agent-history-heading { display:flex; justify-content:space-between; margin-top:8px; }
.agent-history-list { overflow:auto; min-height:0; display:flex; flex-direction:column; gap:6px; }
.agent-history-item { width:100%; text-align:left; }
.agent-history-item strong,.agent-history-item span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agent-history-item span { margin:6px 0; }
.agent-history-item footer { display:flex; justify-content:space-between; gap:4px; }
.agent-history-item i { font-style:normal; }
.agent-history-item.active { border-color:var(--shell-accent); background:var(--shell-active); }
.agent-chat-panel { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(120px,1fr) auto; min-height:0; min-width:0; overflow:auto; align-content:start; }
.agent-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 28px; border-bottom:1px solid var(--shell-border); }
.agent-topbar h1 { font-size:22px; margin:3px 0 0; }
.agent-eyebrow { font-size:11px; color:var(--shell-text-secondary); }
.agent-live-status { display:flex; align-items:center; gap:6px; font-size:12px; max-width:170px; }
.agent-live-status::before { content:""; width:7px; height:7px; flex:none; border-radius:50%; background:#85918c; }
.agent-live-status[data-state="working"]::before { background:var(--shell-accent); animation:agent-pulse 1s infinite; }
.agent-live-status[data-state="success"]::before { background:var(--agent-success); }
.agent-live-status[data-state="failed"]::before { background:var(--agent-danger); }
#agent-history-toggle,#agent-conversation-toggle { display:none; }
.agent-workbench .agent-new-button:hover { color:var(--shell-accent); }
.agent-composer textarea:focus-visible { outline:none; }
#view-agent:not(.is-working) .agent-chat-panel { grid-template-rows:auto auto 1fr; }
#view-agent:not(.is-working) .agent-composer { align-self:start; }
.agent-message-list { min-height:0; overflow:auto; padding:24px; }
.agent-welcome-card { max-width:680px; text-align:center; margin:32px auto; }
.agent-welcome-card > span { font-size:30px; color:var(--shell-accent); }
.agent-welcome-card h2 { font-size:26px; margin:16px 0; }
.agent-welcome-card p { color:var(--shell-text-secondary); line-height:1.6; }
.agent-welcome-card > div { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:20px; }
.agent-message { max-width:850px; margin:0 auto 20px; display:flex; align-items:flex-start; gap:10px; }
.agent-message > span { flex:none; padding:8px; font-size:11px; color:var(--shell-accent); }
.agent-message-body { min-width:0; flex:1; }
.agent-message-body p { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; line-height:1.6; }
.agent-message-body small { display:block; margin:8px 0; font-size:11px; color:var(--shell-text-secondary); }
.agent-message.user { padding:12px; background:var(--shell-elevated); border-radius:6px; }
.agent-message-meta { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }
.agent-message-meta img { width:72px; height:72px; object-fit:contain; border:1px solid var(--shell-border); border-radius:4px; }
.agent-composer { width:calc(100% - 48px); max-width:860px; justify-self:center; margin:0 24px 24px; padding:16px; border:1px solid var(--shell-border-strong); border-radius:8px; background:var(--shell-panel-solid); box-shadow:0 4px 18px rgb(0 0 0 / 4%); }
.agent-composer:focus-within { border-color:var(--shell-accent); }
.agent-composer textarea { width:100%; min-height:88px; max-height:220px; resize:vertical; border:0; outline:0; padding:14px 0; background:transparent; line-height:1.6; }
.agent-composer footer { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.agent-submit { min-width:112px; font-weight:600; }
.agent-advanced-settings { display:flex; gap:12px; }
.agent-select-control,.agent-tool-copy { display:flex; gap:8px; align-items:center; }
.agent-tool-icon { display:none; }
.agent-tool-copy small { font-size:12px; color:var(--shell-text-secondary); }
.agent-select-control select { padding:8px; border:1px solid var(--shell-border); border-radius:4px; background:var(--shell-panel-solid); }
.agent-composer-message { color:var(--shell-text-secondary); font-size:12px; line-height:1.5; margin:10px 0 0; min-height:18px; }
.agent-composer-message.error { color:var(--agent-danger); }
.agent-upload-preview { display:flex; gap:10px; overflow:auto; padding:2px; align-items:stretch; }
.agent-upload-dropzone { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:70px !important; border-style:dashed !important; color:var(--shell-text-secondary) !important; }
.agent-upload-dropzone strong { font-weight:500; }
.agent-upload-dropzone small { font-size:11px; }
.agent-upload-dropzone-icon { font-size:24px; color:var(--shell-accent); }
.has-references .agent-upload-dropzone { flex:0 0 52px; width:52px; }
.agent-upload-preview.is-dragging { outline:2px dashed var(--shell-accent); }
.agent-upload-item { position:relative; flex:0 0 126px; width:126px; border:1px solid var(--shell-border); border-radius:6px; overflow:hidden; padding:4px; }
.agent-upload-item .agent-reference-preview { display:block; width:100%; height:92px; border:0; padding:0; }
.agent-reference-preview img { width:100%; height:100%; object-fit:contain; }
.agent-upload-item .agent-reference-remove { position:absolute; top:4px; right:4px; min-height:24px; width:24px; height:24px; padding:0; }
.agent-upload-item > span { display:block; font-size:11px; margin:6px 2px; }
.agent-upload-item select { width:100%; font-size:12px; border:0; background:var(--shell-elevated); padding:5px; border-radius:3px; }
.agent-reference-order { display:flex; justify-content:space-between; margin-top:4px; }
.agent-reference-order button { padding:0 12px; min-height:24px; }
.agent-inline-card { padding:16px 0; border-top:1px solid var(--shell-border); margin-top:14px; }
.agent-inline-card header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.agent-inline-card h3 { margin:4px 0 12px; font-size:16px; }
.agent-plan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.agent-plan-grid dt { font-size:12px; color:var(--shell-text-secondary); margin-bottom:4px; }
.agent-plan-grid dd { margin:0; overflow-wrap:anywhere; line-height:1.5; }
.agent-plan-lists { display:grid; gap:12px; }
.agent-plan-actions,.agent-option-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.agent-option-grid button { flex:1 1 160px; text-align:left; }
.agent-option-grid span { display:block; font-size:12px; line-height:1.5; color:var(--shell-text-secondary); margin-top:6px; }
.agent-capability-warning { border-left:3px solid var(--agent-warning); padding:10px 12px; margin:12px 0; background:var(--shell-elevated); }
.agent-inline-results { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.agent-inline-results figure { margin:0; min-width:0; }
.agent-inline-results img { width:100%; max-height:260px; object-fit:contain; }
.agent-inline-results figcaption { font-size:12px; }
.agent-inline-results figcaption div { display:flex; flex-wrap:wrap; gap:6px; }
.agent-task-facts { display:flex; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--shell-text-secondary); }
.agent-result-canvas { padding:24px 28px; min-width:0; }
.agent-result-canvas > header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.agent-result-canvas h2 { font-size:18px; margin:0; }
.agent-result-canvas header span,.agent-result-canvas h2 small { font-size:12px; color:var(--shell-text-secondary); }
.agent-workbench .agent-canvas-image { display:block; width:100%; height:440px; padding:0; background:var(--shell-canvas); border:0; border-radius:0; }
.agent-canvas-image img { width:100%; height:100%; object-fit:contain; }
.agent-canvas-actions { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.agent-canvas-actions a { text-decoration:none; color:inherit; }
.agent-version-strip { display:flex; gap:10px; overflow:auto; padding:6px 0; }
.agent-version-strip button { width:100px; flex:0 0 100px; padding:4px; }
.agent-version-strip button[aria-pressed="true"] { border:2px solid var(--shell-accent); background:var(--shell-active); }
.agent-version-strip img { width:100%; height:72px; object-fit:contain; }
.agent-version-strip span { display:block; font-size:11px; }
.agent-generation-info { margin:12px 0; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.agent-generation-info summary { cursor:pointer; color:var(--shell-text-secondary); }
.has-results .agent-chat-panel { grid-template-columns:minmax(300px,38%) minmax(0,62%); grid-template-rows:auto minmax(140px,1fr) auto; }
.has-results .agent-topbar { grid-column:1/-1; }
.has-results .agent-result-canvas { grid-column:2; grid-row:2/4; overflow:auto; border-left:1px solid var(--shell-border); }
.has-results .agent-message-list { grid-column:1; grid-row:2; padding:18px; }
.has-results .agent-composer { grid-column:1; grid-row:3; width:calc(100% - 24px); margin:0 12px 12px; padding:12px; }
.has-results .agent-inline-results { display:none; }
.has-results .agent-plan-grid { grid-template-columns:1fr; }
.agent-history-skeleton { padding:24px; display:grid; gap:14px; }
.agent-history-skeleton i { height:18px; background:var(--shell-elevated); animation:agent-pulse 1s infinite; border-radius:4px; }
.agent-history-error { padding:24px; color:var(--agent-danger); }
.agent-brand-dna-dialog { width:min(1040px,94vw); max-height:90dvh; padding:28px; border:1px solid #eeedf5; border-radius:14px; background:#fff; color:#252339; }
.agent-brand-dna-dialog::backdrop { background:rgb(0 0 0 / 40%); }
.agent-brand-dna-header { display:flex; gap:12px; justify-content:space-between; }
.agent-brand-dna-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:20px 0; }
.agent-brand-dna-form label { display:flex; flex-direction:column; gap:6px; min-width:0; }
.agent-brand-dna-form textarea,.agent-brand-dna-form input:not([type="checkbox"]) { width:100%; padding:8px; background:var(--shell-elevated); border:1px solid var(--shell-border); border-radius:4px; }
.agent-dna-list article,.agent-campaign-assets article { padding:12px 0; border-bottom:1px solid var(--shell-border); }
@keyframes agent-pulse { 50% { opacity:.4; } }
@media (max-width:1100px) { .agent-workbench { grid-template-columns:180px minmax(0,1fr); } .has-results .agent-chat-panel { grid-template-columns:minmax(260px,42%) minmax(0,58%); } .agent-result-canvas { padding:16px; } .agent-workbench .agent-canvas-image { height:360px; } }
@media (max-width:820px) {
  .workspace > #view-agent.active { overflow:auto; overscroll-behavior:contain; }
  .agent-workbench { display:block; height:auto; min-height:100%; position:relative; }
  .agent-history-panel { display:none; }
  #agent-history-toggle { display:block; }
  .is-working #agent-conversation-toggle { display:block; }
  .is-working:not(.show-conversation) .agent-message:not(:last-child) { display:none; }
  .history-open .agent-history-panel { display:flex; position:fixed; z-index:120; inset:110px 48px 0 0; box-shadow:18px 0 0 100vw rgb(0 0 0 / 30%); }
  .history-open #agent-history-toggle { position:relative; z-index:121; }
  .agent-chat-panel,.has-results .agent-chat-panel { display:flex; flex-direction:column; height:auto; overflow:visible; }
  .agent-topbar { padding:16px; gap:10px; flex-wrap:wrap; }
  .agent-topbar h1 { font-size:18px; }
  .agent-live-status { margin-left:auto; font-size:11px; }
  .agent-message-list,.has-results .agent-message-list { overflow:visible; padding:16px; }
  .agent-welcome-card { margin:18px auto; }
  .agent-welcome-card h2 { font-size:22px; }
  .agent-welcome-card p { font-size:13px; }
  .agent-composer,.has-results .agent-composer { width:calc(100% - 24px); margin:12px; padding:12px; order:1; }
  .agent-message-list,.has-results .agent-message-list { order:2; }
  .agent-composer textarea { font-size:16px; }
  .agent-upload-dropzone { flex-wrap:wrap; gap:6px; }
  .agent-upload-dropzone small { flex-basis:100%; text-align:center; }
  .agent-result-canvas,.has-results .agent-result-canvas { order:3; border:0; overflow:visible; padding:16px 12px 30px; }
  .agent-workbench .agent-canvas-image { height:340px; max-height:60dvh; }
  .agent-canvas-actions { position:sticky; bottom:0; background:var(--shell-panel-solid); padding:10px 0 calc(10px + env(safe-area-inset-bottom)); z-index:2; }
  .agent-plan-grid { grid-template-columns:1fr; }
  .agent-advanced-settings:not([hidden]) { position:fixed; z-index:140; bottom:0; left:0; right:0; background:var(--shell-panel-solid); padding:30px 20px calc(80px + env(safe-area-inset-bottom)); box-shadow:0 -12px 0 100vh rgb(0 0 0 / 24%); justify-content:center; }
  .agent-advanced-toggle[aria-expanded="true"] { position:fixed; z-index:141; bottom:20px; right:20px; }
  .agent-brand-dna-dialog { width:100%; max-width:none; height:100dvh; max-height:none; margin:0; border-radius:0; padding:16px; }
  .agent-brand-dna-form { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { .agent-workbench * { animation:none !important; } }

/* Image agent presentation only; the site navigation and business state stay unchanged. */
.creative-director-ui { --shell-accent:#7547ed; --shell-active:#f0ebff; --shell-text:#262535; --shell-text-secondary:#858399; --shell-border:#eeedf4; --shell-border-strong:#ddd8ed; --shell-panel-solid:#fff; --shell-canvas:#fafafe; --shell-elevated:#f7f6fb; }
.creative-director-ui .agent-workbench { grid-template-columns:210px minmax(0,1fr); background:#fff; }
.creative-director-ui .agent-workbench button { border-radius:10px; }
.creative-director-ui .agent-history-panel { padding:26px 14px; gap:16px; background:#fafafe; }
.creative-director-ui .agent-brand { margin:0 8px 4px; font-size:18px; }
.creative-director-ui .agent-new-button { background:#fff; border:1px solid #e4def7; color:#7547ed; min-height:40px; }
.creative-director-ui .agent-search { background:#fff; border-radius:10px; padding:8px; font-size:12px; }
.creative-director-ui .agent-history-list { gap:4px; }
.creative-director-ui .agent-history-item { border:1px solid transparent; border-radius:10px; background:transparent; padding:9px 8px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:5px 6px; }
.creative-director-ui .agent-history-open { min-width:0; min-height:0; padding:0; border:0; border-radius:0; background:transparent; text-align:left; }
.creative-director-ui .agent-history-open:hover { border-color:transparent !important; background:transparent !important; }
.creative-director-ui .agent-history-item strong {
  max-width:100%;
  font-size:13px;
  font-weight:500;
  line-height:1.55;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.creative-director-ui .agent-history-item time { grid-column:1/-1; font-size:11px; color:#9791ab; }
.creative-director-ui .agent-history-actions { display:flex; gap:3px; }
.creative-director-ui .agent-history-actions button,.creative-director-ui .agent-history-title-editor button { width:25px; height:25px; min-height:25px; padding:0; border:0; background:transparent; color:#8f889d; }
.creative-director-ui .agent-history-actions button:hover { color:#7547ed; }
.creative-director-ui .agent-history-actions button.danger:hover { color:#c73c48; background:#fff0f1; }
.creative-director-ui .agent-history-title-editor { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) 25px 25px; gap:4px; }
.creative-director-ui .agent-history-title-editor input { width:100%; min-width:0; height:30px; padding:5px 7px; border:1px solid #cfc4ec; border-radius:7px; background:#fff; outline:0; }
.creative-director-ui .agent-history-item.active { background:#efebff; border-color:transparent; color:#6143af; }
.creative-director-ui .agent-chat-panel,.creative-director-ui:not(.is-working) .agent-chat-panel { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; }
.creative-director-ui .agent-topbar { padding:24px 28px; border:0; min-height:100px; }
.creative-director-heading { min-width:0; }
.creative-director-heading > div { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.creative-director-heading h1 { font-size:23px; margin:0; }
.creative-director-badge { color:#7547ed; background:#f0ebff; border-radius:6px; padding:4px 9px; font-size:11px; white-space:nowrap; }
.creative-director-heading p { font-size:12px; color:#858399; margin:9px 0 0; }
.creative-director-ui .agent-live-status { flex:none; font-size:11px; }
.creative-director-conversation { min-width:0; min-height:0; overflow:auto; padding:8px 28px 24px; scrollbar-gutter:stable; }
.creative-director-ui .agent-message-list { overflow:visible; padding:0; }
.creative-director-ui .agent-message { gap:8px; margin-bottom:24px; }
.creative-director-ui .agent-message > span { display:none; }
.creative-director-ui .agent-message.user { width:fit-content; max-width:92%; margin:0 0 28px auto; padding:13px 16px; border-radius:12px 12px 3px 12px; background:#f1edfc; font-size:13px; }
.creative-director-ui .agent-message-body small { font-size:10px; opacity:.75; }
.creative-director-ui .agent-message-body > p { font-size:13px; }
.creative-director-ui .agent-plan-card { border:1px solid #eeedf4; border-radius:12px; padding:20px; background:#fff; box-shadow:0 5px 22px rgb(40 26 85 / 3%); }
.creative-director-ui .agent-inline-card header { justify-content:space-between; }
.creative-director-ui .agent-inline-card h3 { margin:0; font-size:16px; }
.creative-director-ui .creative-director-plan-summary { font-size:12px; color:#898599; margin:14px 0 18px; line-height:1.7; }
.creative-director-ui .agent-plan-grid { display:grid; grid-template-columns:1fr; gap:13px; margin:16px 0; }
.creative-director-ui .agent-plan-grid > div { display:grid; grid-template-columns:64px minmax(0,1fr); gap:10px; }
.creative-director-ui .agent-plan-grid dt { color:#373344; font-weight:600; margin:0; font-size:12px; line-height:1.6; }
.creative-director-ui .agent-plan-grid dd { color:#777086; font-size:12px; line-height:1.6; }
.creative-director-plan-details summary { cursor:pointer; color:#9791a8; font-size:11px; }
.creative-director-ui .agent-capability-warning { background:#faf9fc; border:0; border-radius:8px; color:#908796; padding:8px 10px; font-size:11px; }
.creative-director-ui .agent-plan-actions { gap:6px; }
.creative-director-ui .agent-plan-actions button { padding:8px 10px; font-size:12px; }
.creative-director-ui .agent-plan-actions button:not(.primary) { border-color:transparent; background:transparent; color:#858095; }
.creative-director-ui .agent-inline-results { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),360px)); gap:20px; margin-top:16px; }
.creative-director-result-card { min-width:0; }
.creative-director-ui .creative-director-result-actions { display:grid; grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr) 30px; gap:5px; align-items:center; margin:10px 0; }
.creative-director-ui .creative-director-result-actions > button,.creative-director-ui .creative-director-result-actions > a { display:grid; place-items:center; min-height:34px; padding:6px 4px; font-size:12px; white-space:nowrap; border:1px solid #eeedf4; border-radius:8px; text-decoration:none; }
.creative-director-ui .creative-director-result-actions .primary { background:#7547ed; color:#fff; border-color:#7547ed; }
.creative-director-result-actions .creative-director-more > summary { height:34px; }
.creative-director-ui .creative-director-result-card .agent-generation-info p { overflow-wrap:anywhere; white-space:pre-wrap; }
.creative-director-preview-nav { position:sticky; top:8px; display:flex; width:max-content; justify-content:center; align-items:center; gap:10px; padding:6px; border:1px solid rgb(224 219 234 / 85%); border-radius:999px; background:rgb(255 255 255 / 92%); box-shadow:0 4px 18px rgb(31 21 54 / 12%); z-index:1; margin:0 auto 12px; }
.creative-director-preview-nav[hidden] { display:none; }
.creative-director-ui .creative-director-preview-nav button { width:34px; height:30px; min-height:30px; padding:0; font-size:18px; border:0; border-radius:999px; background:transparent; }
.creative-director-preview-nav span { min-width:50px; text-align:center; color:#777086; font-size:13px; }
.creative-director-ui .agent-quality-card { margin-top:18px; padding:18px; border:1px solid #ebe7f4; border-radius:12px; background:#fcfbfe; color:#302d3d; }
.creative-director-ui .agent-quality-card > header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.creative-director-ui .agent-quality-card > header small { display:block; margin:0 0 4px; color:#8c8599; font-size:11px; line-height:1.4; }
.creative-director-ui .agent-quality-card > header h3 { margin:0; font-size:17px; line-height:1.4; }
.creative-director-ui .agent-quality-score { flex:none; color:#6842c2; font-size:26px; line-height:1; }
.creative-director-ui .agent-quality-score small { display:inline; margin-left:2px; font-size:11px; font-weight:500; }
.creative-director-ui .agent-quality-columns { display:grid; gap:8px; }
.creative-director-ui .agent-quality-columns > div { display:grid; grid-template-columns:88px minmax(0,1fr); gap:12px; align-items:start; padding:10px 12px; border-radius:8px; background:#fff; }
.creative-director-ui .agent-quality-columns strong,.creative-director-ui .agent-quality-adjustments > strong { font-size:12px; line-height:1.7; }
.creative-director-ui .agent-quality-columns p,.creative-director-ui .agent-quality-adjustments p { margin:0; color:#676173; font-size:12px; line-height:1.75; white-space:normal; overflow-wrap:anywhere; }
.creative-director-ui .agent-quality-adjustments { margin-top:10px; padding:12px; border-radius:8px; background:#f3effd; }
.creative-director-ui .agent-quality-adjustments p { margin:5px 0 10px; color:#5e5570; }
.creative-director-ui .agent-quality-adjustments button { min-height:32px; padding:6px 10px; border-color:#d8cdf5; background:#fff; color:#6842c2; font-size:11px; }
.creative-director-ui .agent-quality-feedback { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px 12px; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid #ebe7f4; }
.creative-director-ui .agent-quality-feedback > span { font-size:12px; font-weight:600; }
.creative-director-ui .agent-quality-feedback > div { display:flex; gap:6px; }
.creative-director-ui .agent-quality-feedback button { min-height:32px; padding:5px 10px; background:#fff; font-size:11px; }
.creative-director-ui .agent-quality-feedback input { grid-column:1/-1; width:100%; min-width:0; padding:8px 10px; border:1px solid #e2deea; border-radius:8px; background:#fff; font-size:12px; }
.creative-director-ui .agent-quality-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.creative-director-ui .agent-quality-actions button { min-height:34px; padding:7px 12px; background:#fff; font-size:12px; }
.creative-director-ui .agent-quality-actions button:first-child { border-color:#7547ed; background:#7547ed; color:#fff; }
.creative-director-ui .agent-quality-card.pending > p,.creative-director-ui .agent-quality-card.warning > p { margin:0; color:#6f6979; font-size:12px; line-height:1.7; }
.creative-director-ui .agent-quality-spinner { width:20px; height:20px; flex:none; border:2px solid #ded6f4; border-top-color:#7547ed; border-radius:50%; animation:spin .8s linear infinite; }
.creative-director-ui .creative-director-result-thumb { position:relative; display:block; width:100%; aspect-ratio:1/1.15; padding:3px; overflow:hidden; border:2px solid transparent; background:#f6f5f9; }
.creative-director-ui .creative-director-result-thumb img { display:block; width:100%; height:100%; max-height:none; object-fit:contain; border-radius:7px; }
.creative-director-ui .creative-director-result-thumb[aria-pressed="true"] { border-color:#8251f3; }
.creative-director-result-thumb > span,.creative-director-ui .agent-canvas-image > span { position:absolute; bottom:8px; left:6px; right:6px; padding:6px 2px; border-radius:6px; background:rgb(25 20 35 / 70%); color:white; font-size:10px; opacity:0; transition:opacity .15s; }
.creative-director-result-thumb:hover > span,.creative-director-result-thumb:focus-visible > span,.creative-director-ui .agent-canvas-image:hover > span { opacity:1; }
.creative-director-gallery > header { display:flex; align-items:center; gap:12px; }
.creative-director-gallery h3 { font-size:15px; margin:0; }
.creative-director-gallery header span { color:#91879e; font-size:12px; }
.creative-director-ui.has-results .agent-chat-panel { grid-template-columns:minmax(0,1fr); }
.creative-director-ui.has-results .creative-director-conversation { grid-column:1; grid-row:2; padding-right:16px; }
.creative-director-ui.has-results .agent-result-canvas { grid-column:2; grid-row:2; padding:18px 24px 12px 12px; border:0; overflow:auto; display:grid; grid-template-rows:auto minmax(140px,1fr) auto auto; min-height:0; }
.creative-director-ui .agent-result-canvas h2 { font-size:14px; }
.creative-director-ui .agent-result-canvas > header { margin:0 0 14px; }
.creative-director-ui .agent-canvas-image { position:relative; height:100%; min-height:0; max-height:500px; border:1px solid #eeedf4; padding:8px; border-radius:12px; background:#faf9fc; }
.creative-director-ui .agent-canvas-image img { border-radius:8px; object-fit:contain; }
.creative-director-ui .agent-workbench .agent-canvas-image:hover { background:#faf9fc; border-color:#d7c9f4; }
.creative-director-ui .agent-canvas-image > span { left:auto; right:16px; padding:8px; }
.creative-director-ui .agent-canvas-actions { display:grid; grid-template-columns:auto auto auto 36px; gap:6px; align-items:start; }
.creative-director-ui .agent-canvas-actions > button,.creative-director-ui .agent-canvas-actions > a { font-size:12px; padding:10px 6px; text-align:center; white-space:nowrap; min-height:38px; border-radius:9px; }
.creative-director-more { position:relative; }
.creative-director-more > summary { list-style:none; cursor:pointer; height:38px; display:grid; place-items:center; border:1px solid #eeedf4; border-radius:9px; font-weight:700; }
.creative-director-more > summary::-webkit-details-marker { display:none; }
.creative-director-more > div { position:absolute; right:0; top:44px; width:140px; padding:6px; background:#fff; border:1px solid #eeedf4; border-radius:10px; box-shadow:0 8px 25px rgb(30 15 55 / 10%); z-index:5; }
.creative-director-more > div button { display:block; width:100%; font-size:12px; border-color:transparent; text-align:left; }
.creative-director-ui .agent-generation-info { color:#918b9e; font-size:11px; }
.creative-director-ui .agent-composer,.creative-director-ui.has-results .agent-composer { grid-column:1/-1; grid-row:3; width:calc(100% - 48px); max-width:none; margin:12px 24px 20px; padding:12px 16px; border-radius:13px; border-color:#d5c9f5; box-shadow:0 4px 20px rgb(66 39 120 / 5%); align-self:end; position:relative; }
.creative-director-ui .agent-composer textarea { min-height:48px; max-height:130px; padding:8px 0; font-size:14px; }
.creative-director-ui .agent-composer textarea::placeholder { color:#a09aae; }
.creative-director-ui .agent-composer.is-dragging { outline:2px dashed #7547ed; outline-offset:3px; background:#fcfaff; }
.creative-director-ui .agent-composer footer { flex-wrap:nowrap; justify-content:flex-end; gap:10px; }
.creative-director-ui .creative-director-upload { margin-right:auto; font-size:12px; border-color:#eeedf4; white-space:nowrap; }
.creative-director-upload > span { margin-right:5px; font-size:18px; }
.creative-director-ui .creative-director-ratio { gap:8px; background:#fff; border:1px solid #e7e3ee; border-radius:9px; padding:0 8px; height:36px; }
.creative-director-ui .creative-director-ratio select { padding:4px 0; border:0; min-width:58px; font-size:12px; background:#fff; }
.creative-director-ratio-icon { display:block; width:15px; height:12px; border:1.5px solid #8b819e; border-radius:2px; }
.creative-director-ui .agent-advanced-toggle { border-color:transparent; color:#92899f; background:transparent; font-size:11px; white-space:nowrap; padding:8px 2px; }
.creative-director-ui .agent-submit { min-width:84px; font-size:12px; box-shadow:0 3px 9px rgb(117 71 237 / 15%); }
.creative-director-ui .agent-advanced-settings:not([hidden]) { position:absolute; z-index:200; right:0; bottom:48px; padding:8px; border:1px solid #eeeaf6; border-radius:10px; background:#fff; box-shadow:0 8px 24px rgb(40 25 65 / 10%); }
.creative-director-ui .agent-composer-message { min-height:0; font-size:11px; margin-top:8px; }
.creative-director-ui .agent-composer-message:empty { display:none; }
.creative-director-ui .agent-upload-preview { gap:8px; min-height:0; }
.creative-director-ui .agent-upload-preview:not(.has-references) { min-height:4px; }
.creative-director-ui .agent-upload-preview:not(.has-references) .agent-upload-dropzone { display:none; }
.creative-director-ui .agent-upload-item { flex:0 0 64px; width:64px; border-radius:9px; padding:3px; }
.creative-director-ui .agent-reference-preview { height:48px; min-height:48px; background:#f8f7fb; }
.creative-director-ui .agent-reference-remove { border-radius:50%; width:18px; height:18px; min-height:18px; top:2px; right:2px; font-size:13px; }
.creative-director-reference-options summary { font-size:10px; text-align:center; cursor:pointer; margin:4px 0 2px; color:#9890a5; }
.creative-director-ui .agent-reference-order button { padding:0 4px; }
.creative-director-ui .agent-upload-dropzone { flex:0 0 48px; width:48px; align-self:start; height:54px; min-height:54px !important; }
.creative-director-ui .agent-welcome-card { margin:50px auto 24px; }
.creative-director-ui .creative-director-preview { padding:46px 20px 20px; width:min(1000px,94vw); max-height:92dvh; border:1px solid #eeeaf6; border-radius:12px; background:#fff; overflow:auto; }
.creative-director-preview::backdrop { background:rgb(25 20 35 / 65%); }
.creative-director-preview form { position:sticky; top:0; height:0; display:flex; justify-content:flex-end; z-index:1; }
.creative-director-preview form button { transform:translateY(-36px); width:32px; height:32px; min-height:32px; padding:0; font-size:20px; }
.creative-director-preview > img { display:block; width:auto; max-width:100%; height:auto; margin:auto; }
@media (min-width:1700px) { .creative-director-ui .agent-workbench { grid-template-columns:240px minmax(0,1fr); } .creative-director-conversation { padding-left:40px; } .creative-director-ui .agent-topbar { padding-left:40px; } }
@media (max-width:1100px) and (min-width:821px) { .creative-director-ui .agent-workbench { grid-template-columns:170px minmax(0,1fr); } .creative-director-ui.has-results .agent-chat-panel { grid-template-columns:minmax(0,1fr); } .creative-director-ui .agent-topbar { padding:20px; } .creative-director-conversation { padding:8px 16px 20px; } }
@media (max-width:820px) {
  .creative-director-ui .agent-workbench { display:block; }
  .creative-director-ui .agent-chat-panel,.creative-director-ui.has-results .agent-chat-panel { display:flex; overflow:visible; }
  .creative-director-ui .agent-topbar { padding:18px 16px; min-height:0; }
  .creative-director-heading h1 { font-size:18px; }
  .creative-director-heading p { font-size:11px; }
  .creative-director-ui .agent-live-status { margin:0; }
  .creative-director-conversation,.creative-director-ui.has-results .creative-director-conversation { order:1; padding:12px 16px; overflow:visible; }
  .creative-director-ui .agent-message-list { padding:0; }
  .creative-director-ui .agent-message { display:flex !important; }
  .creative-director-ui .agent-result-canvas,.creative-director-ui.has-results .agent-result-canvas { order:2; padding:16px; overflow:visible; display:block; }
  .creative-director-ui .agent-canvas-image { height:340px; }
  .creative-director-ui .agent-composer,.creative-director-ui.has-results .agent-composer { order:3; margin:12px; width:calc(100% - 24px); padding:12px; }
  .creative-director-ui .agent-composer textarea { font-size:16px; }
  .creative-director-ui .agent-composer footer { gap:6px; flex-wrap:wrap; }
.creative-director-ui .creative-director-upload { padding:6px; }
  .creative-director-ui .agent-submit { min-width:68px; }
  .creative-director-ui .agent-canvas-actions { position:static; }
  .creative-director-ui .agent-advanced-settings:not([hidden]) { position:absolute; inset:auto 12px 72px auto; z-index:200; box-shadow:0 8px 24px rgb(40 25 65 / 10%); }
  .creative-director-ui .agent-advanced-toggle[aria-expanded="true"] { position:static; }
.creative-director-ui .agent-plan-card { padding:16px; }
}

.creative-director-image-plan { width:100%; min-width:0; padding:8px 0; }
.creative-director-image-plan > header,.creative-director-plan-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.creative-director-image-plan h3 { margin:0; font-size:16px; }
.creative-director-image-plan small { color:#928b9d; font-size:11px; }
.creative-director-intent-chips { display:flex; flex-wrap:wrap; gap:7px; margin:16px 0 26px; }
.creative-director-intent-chips span { padding:5px 10px; background:#f1edfc; border-radius:6px; color:#65518f; font-size:12px; }
.creative-director-plan-heading strong { font-size:13px; color:#7547ed; }
.creative-director-image-plan .creative-director-plan-summary { color:#82798f; font-size:12px; line-height:1.7; margin:10px 0 16px; }
.creative-director-image-plans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.creative-director-image-plan-item { display:flex; gap:12px; border:1px solid #eeebf4; border-radius:12px; padding:16px; background:#fff; min-width:0; box-shadow:0 2px 5px rgb(40 25 65 / 2%); }
.creative-director-plan-number { color:#7547ed; background:#f3efff; width:30px; height:30px; display:grid; place-items:center; border-radius:8px; flex-shrink:0; font-size:12px; }
.creative-director-image-plan-item > div { min-width:0; }
.creative-director-image-plan-item h4 { margin:3px 0 7px; font-size:14px; }
.creative-director-image-plan-item p { font-size:12px; line-height:1.7; color:#7e758a; margin:0 0 10px; }
.creative-director-image-plan-item dl { margin:0; font-size:12px; line-height:1.7; }
.creative-director-image-plan-item dl > div { display:grid; grid-template-columns:30px minmax(0,1fr); gap:8px; margin-top:4px; }
.creative-director-image-plan-item dt { color:#a098aa; }
.creative-director-image-plan-item dd { margin:0; color:#5e566b; overflow-wrap:anywhere; }
.creative-director-image-plan .agent-plan-actions { margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; }
.creative-director-image-plan .agent-plan-actions button { font-size:12px; white-space:nowrap; border-radius:8px; }
.creative-director-ui .agent-brand-dna-header h2 { font-size:22px; margin:0 0 6px; }
.creative-director-ui .agent-brand-dna-header p { color:#898199; margin:0 0 20px; font-size:13px; }
.creative-director-brand-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(230px,1fr); gap:24px; }
.creative-director-brand-fields { min-width:0; }
.creative-director-ui .agent-brand-dna-form { margin:16px 0; gap:14px; }
.creative-director-ui .agent-brand-dna-workspace { display:flex; flex-direction:column; gap:7px; font-size:12px; }
.creative-director-ui .agent-brand-dna-form label { font-size:12px; color:#49415d; }
.creative-director-ui .agent-brand-dna-form textarea,.creative-director-ui .agent-brand-dna-form input:not([type=checkbox]),.creative-director-ui #agent-brand-workspace { border:1px solid #e9e5f1; border-radius:7px; padding:9px 10px; background:#fcfbff; color:#443d54; font-size:12px; min-height:36px; width:100%; box-sizing:border-box; }
.creative-director-brand-wide { grid-column:1 / -1; }
.creative-director-style-options { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.creative-director-style-options button { min-height:30px; padding:5px 9px; border:1px solid #e9e5f1; background:#fff; border-radius:6px; color:#645b73; font-size:12px; }
.creative-director-style-options button[aria-pressed=true] { border-color:#8660ef; color:#7547ed; background:#f7f3ff; }
.creative-director-color-options { display:flex; gap:12px; align-items:center; margin-top:12px; }
.creative-director-color-options button { flex-shrink:0; width:26px; height:26px; min-height:26px; border-radius:50%; padding:0; background:var(--swatch); border:1px solid #e5e0ed; }
.creative-director-color-options button[aria-pressed=true] { outline:2px solid #946ff4; outline-offset:3px; }
.creative-director-ui .agent-brand-dna-form #agent-brand-custom-color { width:32px; height:30px; min-height:30px; padding:2px; }
.creative-director-brand-advanced summary,.creative-director-brand-memory summary { cursor:pointer; color:#8b8299; font-size:12px; padding:10px 0; }
.creative-director-brand-advanced-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:8px; }
.creative-director-brand-preview { background:#f9f8fc; border-radius:12px; padding:18px; min-width:0; align-self:stretch; }
.creative-director-brand-preview h3 { font-size:14px; margin:0 0 16px; }
.creative-director-brand-images { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.creative-director-brand-images img { width:100%; aspect-ratio:1; object-fit:contain; background:white; border-radius:8px; }
.creative-director-brand-empty { grid-column:1/-1; padding:64px 10px; text-align:center; color:#aaa2b5; font-size:13px; }
.creative-director-brand-preview-caption { margin-top:20px; padding-top:16px; border-top:1px solid #eae5f3; font-size:13px; color:#78629f; }
.creative-director-brand-footer { display:flex; justify-content:flex-end; gap:10px; border-top:1px solid #efedf4; padding-top:18px; margin-top:12px; position:sticky; bottom:-28px; background:#fff; padding-bottom:10px; }
.creative-director-brand-footer button { min-height:38px; border-radius:8px; padding:8px 18px; border:1px solid #e8e2f2; background:#fff; color:#514660; }
.creative-director-brand-footer .agent-dna-save { background:#7547ed; color:#fff; border-color:#7547ed; }
.creative-director-brand-memory section h3 { font-size:13px; }
@media (max-width:1100px) { .creative-director-image-plans { grid-template-columns:minmax(0,1fr); } }
@media (max-width:620px) {
  .creative-director-brand-layout { grid-template-columns:minmax(0,1fr); }
  .creative-director-brand-preview { display:none; }
  .creative-director-ui .agent-brand-dna-dialog { padding:18px; }
  .creative-director-brand-advanced-grid { grid-template-columns:minmax(0,1fr); }
  .creative-director-brand-footer { bottom:-18px; }
  .creative-director-plan-heading { align-items:start; }
  .creative-director-plan-heading strong { white-space:nowrap; font-size:12px; }
  .creative-director-image-plan-item { padding:12px; }
}