/* Campaign workspaces: a compact shared header and room for the actual tool. */
#app:has(.campaign-workspace-bar) { padding: 16px 24px 12px; }
.campaign-workspace-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.campaign-workspace-bar .co-personas { margin: 0; padding: 4px; border-radius: 12px; background: #e9eaf5; border-color: #dfe2f1; }
.campaign-workspace-bar .co-personas button { padding: 9px 17px; font-size: 13px; }
.workspace-expand { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 13px; border: 1px solid #dce1f0; border-radius: 10px; background: #ffffffc9; color: #53617b; font: inherit; font-size: 12px; cursor: pointer; }
.workspace-expand > span:first-child { font-size: 21px; line-height: 1; }
.workspace-expand:hover { background: #fff; color: #5148e8; border-color: #b6b4ef; }
.workspace-expand:focus-visible, #traceAssistant button:focus-visible { outline: 3px solid #9a92f3; outline-offset: 3px; }
body.workspace-fullscreen { overflow: hidden; }
body.workspace-fullscreen #app { position: fixed; inset: 0; z-index: 85; overflow: auto; background: #f3f4fc; padding: 12px 24px; }
body.workspace-fullscreen .campaign-workspace-bar { position: sticky; top: -12px; z-index: 12; background: #f3f4fc; padding: 8px 0; }
body.workspace-fullscreen .ai-launcher { z-index: 86; }
body.workspace-fullscreen .ai-panel { z-index: 87; }

/* The conversation scrolls independently; the composer remains within reach. */
#campaignAiHost .cg { min-height: 300px; border-radius: 18px; box-shadow: 0 8px 30px #1c2a5110; }
.cg-top { padding: 12px 16px; border-bottom: 1px solid #eef0f7; flex-shrink: 0; }
.cg-col { max-width: 860px; }
.cg-hero { padding: clamp(18px, 4vh, 44px) 0 24px; }
.cg-hero h2 { font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -1.1px; }
.cg-hero > p { max-width: 570px; color: #63718b; margin-bottom: 18px; }
.cg-known { max-width: 100%; line-height: 1.5; }
.cg-hero .cg-composer { margin: 8px 0 20px; border-radius: 20px; padding: 10px; box-shadow: 0 6px 22px #2934560c; }
.cg-tool, .cg-send { width: 42px; height: 42px; }
.cg-hero .ca-start-tile { border-color: #e0e3f0; background: #fafbff; padding: 18px; border-radius: 15px; box-shadow: none; }
.cg-hero .ca-start-tile:hover { background: #f4f2ff; border-color: #a8a0ed; transform: translateY(-2px); box-shadow: 0 7px 20px #5148e80c; }
.cg-hero .ca-start-text { color: #66748d; line-height: 1.6; }
.cg-foot { flex-shrink: 0; padding-bottom: 14px; }
.cg-fine { color: #687791; line-height: 1.5; }
.cg.cg-new .cg-scroll { align-items: safe center; }

/* Voice: fit short laptop screens as well as large monitors. */
#campaignAiHost .cv { height: var(--fit); min-height: 300px; overflow-y: auto; border-radius: 18px; padding: 20px 24px; background: radial-gradient(ellipse at 48% 32%, #252260 0, #101631 48%, #090f23 100%); }
.cv-top { flex-shrink: 0; }
.cv-center { min-height: min-content; padding: 22px 0 12px; gap: 18px; flex-shrink: 0; }
.cv-orb { width: clamp(110px, 23vh, 220px); flex-shrink: 0; }
.cv-caption { max-width: 620px; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.6; }
.cv-heard:empty { display: none; }
.cv-fine { color: #adb8d9; margin-top: 16px; }
.cv-steps, .cv-cards, .cv-controls, .cv-type, .cv .ca-answers, .cv-transcript { flex-shrink: 0; }
.cv .ca-answers, .cv-transcript { background: #ffffff0b; border: 1px solid #ffffff1c; color: #e4e9fb; border-radius: 12px; }
.cv .ca-answers summary, .cv-transcript summary { color: #d6d8ff; min-height: 40px; }
.cv .ca-answers[open], .cv-transcript[open] { background: #fafbff; color: #182948; }
.cv .ca-answers[open] summary, .cv-transcript[open] summary { color: #5148e8; }
.cv-chip { min-height: 36px; }

/* Quick Campaign keeps the catalog's questions and the existing creation action. */
#app:has(#caQuickForm) > .cm-page-head { margin: 20px 0; }
#app:has(#caQuickForm) .ca-shell { gap: 12px; }
.ca-quick-page { max-width: 1120px; margin: 0 auto; padding: 24px 30px; border-radius: 18px; box-shadow: 0 8px 32px #1b30520a; }
.ca-quick-page .ca-setup { margin-bottom: 18px; }
.ca-quick-page .ca-quick { display: block; }
.ca-quick-title { display: block; margin-bottom: 24px; }
.ca-quick-title .quick-eyebrow { color: #6358cc; font-size: 10px; font-weight: 700; letter-spacing: 1.7px; margin-bottom: 8px; }
.ca-quick-title > strong { display: block; font-size: clamp(23px, 2vw, 29px); letter-spacing: -.65px; color: #102648; }
.ca-quick-title > span { display: block; max-width: 640px; margin-top: 7px; line-height: 1.6; color: #64748d; font-size: 13px; }
.quick-progress-row { display: flex; justify-content: space-between; gap: 12px; color: #64748d; font-size: 12px; margin: 20px 0 8px; }
#quickProgressText { color: #5148b8; font-weight: 600; }
#quickProgress { display: block; width: 100%; height: 5px; border: 0; border-radius: 10px; overflow: hidden; appearance: none; background: #eeedf7; accent-color: #6358e8; }
#quickProgress::-webkit-progress-bar { background: #eeedf7; }
#quickProgress::-webkit-progress-value { background: #6358e8; border-radius: 10px; transition: width .2s; }
#quickProgress::-moz-progress-bar { background: #6358e8; }
.quick-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ca-quick .ca-quick-field { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 18px; border: 1px solid #e4e7f1; border-radius: 13px; background: #fcfcff; min-width: 0; }
.ca-quick-field:first-child { grid-column: 1 / -1; }
.ca-quick-field > label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #20334f; }
.quick-number { display: grid; place-items: center; width: 27px; height: 27px; flex: none; border-radius: 8px; background: #edeafb; color: #6558c7; font-size: 12px; }
.ca-quick-field.is-complete .quick-number { background: #def3e9; color: #197956; }
.ca-quick-field label small { display: block; font-size: 11px; font-weight: 400; color: #66798e; margin-top: 4px; }
.ca-quick-field .input, .ca-quick-field .textarea { background: #fff; min-height: 44px; font-size: 14px; border-radius: 9px; }
.ca-quick-field .textarea { min-height: 80px; }
.ca-quick-field .ca-chips { margin: 0; gap: 6px; }
.ca-quick-field .ca-chip { padding: 7px 11px; background: #fff; font-size: 12px; }
.quick-submit { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; border-top: 1px solid #e7eaf3; margin-top: 24px; padding-top: 20px; }
.quick-submit > span { display: flex; align-items: center; gap: 7px; color: #687991; font-size: 12px; }
.quick-submit .btn { min-height: 46px; padding: 12px 20px; border-radius: 11px; }

/* Studio: one clear page heading, a full-width workbench and legible controls. */
#app:has(#creativeStudio) > .cm-page-head { margin: 20px 0; align-items: center; }
#app:has(#creativeStudio) .cm-page-head h1 { font-size: 27px; }
#app:has(#creativeStudio) .cm-page-head p { max-width: 620px; font-size: 13px; }
.cs-studio { max-width: none; }
.cs-intro { padding: 14px 20px; margin-bottom: 18px; border: 1px solid #e0e2f3; border-radius: 14px; background: #ffffff70; }
.cs-intro h2 { font-size: 25px; margin: 5px 0; letter-spacing: -.7px; }
.cs-intro .cs-kicker { font-size: 9px; }
.cs-intro p { font-size: 12px; }
.cs-connection { background: #fff; padding: 10px 14px; }
.cs-workbench { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.cs-create { padding: 22px; border-radius: 16px; }
.cs-mode { margin-bottom: 16px; }
.cs-mode button { min-height: 42px; font-size: 12px; }
.cs-builder-launch { margin: 12px 0 16px; }
.cs-create textarea { min-height: 110px; font-size: 14px; }
.cs-prompt-foot { margin-bottom: 18px; color: #697b96; }
.cs-setting > span { font-size: 12px; color: #5d6f89; }
.cs-setting .input { font-size: 12px; height: 42px; }
.cs-compose-bottom { margin-top: 18px; padding-top: 16px; }
.cs-cost-note { font-size: 11px; color: #6e7c93; }
.cs-result { min-width: 0; border-radius: 16px; }
.cs-result-empty h3 { font-size: clamp(24px, 2.3vw, 34px); }
body.workspace-fullscreen .cs-intro { display: none; }

/* Movable assistant. Its panel follows the launcher without leaving the viewport. */
.ai-launcher { width: 56px; height: 56px; right: 20px; bottom: 20px; border-radius: 18px; touch-action: none; user-select: none; cursor: grab; }
.ai-launcher:hover { transform: none; }
.ai-launcher.is-dragging { cursor: grabbing; transition: none; box-shadow: 0 10px 30px #5148e850; }
.ai-launcher.is-dragging .ai-launcher-label { opacity: 0; }
.ai-launcher-label { right: 66px; }
.ai-launcher.label-right .ai-launcher-label { right: auto; left: 66px; }
.ai-panel { width: min(420px, calc(100vw - 24px)); height: min(680px, calc(100dvh - 100px)); max-height: calc(100dvh - 24px); }
#aiExpand { font-size: 23px; }
.ai-panel.is-fullscreen { inset: 12px !important; width: auto; height: auto; max-height: none; z-index: 95; border-radius: 18px; }
.ai-panel.is-fullscreen .ai-scroll { width: 100%; }
.ai-panel.is-fullscreen .ai-scroll > *, .ai-panel.is-fullscreen .ai-footer { width: min(820px, 100%); margin-left: auto; margin-right: auto; }
.ai-panel.is-fullscreen .ai-welcome { padding-top: 40px; }
.ai-panel.is-fullscreen .ai-suggestions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-panel.is-fullscreen .ai-context { justify-content: center; }
.ai-panel.is-fullscreen .ai-welcome h3 { font-size: 34px; }
.ai-panel.is-fullscreen .ai-welcome p { font-size: 14px; color: #66718c; }
.ai-panel.is-fullscreen .ai-suggestions strong { font-size: 13px; }
.ai-panel.is-fullscreen .ai-suggestions small { font-size: 12px; }
.ai-panel.is-fullscreen .ai-composer textarea { font-size: 15px; }
.ai-panel.is-fullscreen .ai-disclosure, .ai-panel.is-fullscreen .ai-footnote { font-size: 11px; }

@media (max-width: 1100px) {
  .cs-workbench { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .cs-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cs-workbench { grid-template-columns: 1fr; }
  .cs-result { min-height: 330px; }
  .cs-result-empty h3 br, .cs-result-empty p br { display: block; }
  .cs-intro .cs-connection { display: none; }
}
@media (max-width: 640px) {
  #app:has(.campaign-workspace-bar), body.workspace-fullscreen #app { padding: 10px 10px 12px; }
  .campaign-workspace-bar { gap: 8px; margin-bottom: 10px; }
  .campaign-workspace-bar .co-personas { width: auto; flex: 1; }
  .campaign-workspace-bar .co-personas button { padding: 9px 8px; font-size: 12px; gap: 5px; }
  .workspace-expand { width: 40px; padding: 7px; flex: none; }
  .workspace-expand [data-expand-label] { display: none; }
  #campaignAiHost .cg, #campaignAiHost .cv { border-radius: 14px; }
  .cg-top { padding: 9px 8px; flex-wrap: wrap; }
  .cg-model { padding: 4px; gap: 7px; }
  .cg-model strong { font-size: 13px; }
  .cg-model small { font-size: 10px; max-width: 155px; }
  .cg-live { font-size: 10px; padding: 3px 6px; }
  .cg-icon { width: 32px; height: 36px; }
  .cg-col { padding: 0 15px; }
  .cg-hero { padding-top: 22px; }
  .cg-hero-mark { width: 44px; height: 44px; }
  .cg-hero h2 { font-size: 27px; }
  .cg-hero > p { font-size: 13px; }
  .cg-known { font-size: 11px; border-radius: 10px; }
  .cg-hero .ca-start { grid-template-columns: 1fr; gap: 8px; }
  .cg-hero .ca-start-tile { padding: 12px 14px; display: grid; grid-template-columns: 32px 1fr; gap: 3px 10px; }
  .cg-hero .ca-start-icon { grid-row: 1 / 3; }
  .cg-hero .ca-start-text { grid-column: 2; font-size: 12px; }
  .cg-hero .ca-start-foot { display: none; }
  .cg-composer textarea, .ca-quick-field .input, .ca-quick-field .textarea, .cs-create textarea, .cs-setting .input { font-size: 16px; }
  .cg-fine { font-size: 10px; }
  .cg-pop { min-width: 0; width: min(330px, calc(100vw - 48px)); }
  #campaignAiHost .cv { padding: 14px; }
  .cv-top { gap: 7px; }
  .cv-brand { font-size: 12px; }
  .cv-status { font-size: 11px; padding: 5px 8px; }
  .cv-chip { font-size: 11px; padding: 6px 9px; }
  .cv-caption { font-size: 18px; }
  .cv-orb { width: clamp(110px, 21vh, 180px); }
  .cv-fine { font-size: 11px; }
  .quick-fields { grid-template-columns: 1fr; gap: 12px; }
  .ca-quick-page { padding: 18px 14px; }
  .ca-quick .ca-quick-field { padding: 14px; }
  .quick-submit { justify-content: center; }
  .quick-submit .btn { width: 100%; }
  .cs-intro { padding: 14px; }
  .cs-intro h2 { font-size: 24px; }
  .cs-create { padding: 16px; }
  .cs-mode button { white-space: normal; font-size: 11px; }
  .cs-settings { gap: 14px 10px; }
  .ai-launcher { width: 52px; height: 52px; right: 14px; bottom: 14px; }
  .ai-launcher-label { display: none; }
  .ai-panel.is-fullscreen { inset: 6px !important; border-radius: 14px; }
  .ai-panel.is-fullscreen .ai-suggestions { grid-template-columns: 1fr; }
}
@media (max-height: 740px) and (min-width: 641px) {
  .cg-hero { padding: 15px 0; }
  .cg-hero-mark { width: 42px; height: 42px; margin-bottom: 10px; }
  .cg-hero h2 { font-size: 29px; }
  .cg-hero .ca-start-tile { padding: 13px; }
  .cv-center { padding: 14px 0 8px; gap: 12px; }
  .cv-caption { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  #quickProgress::-webkit-progress-value, .ai-launcher, .cg-hero .ca-start-tile { transition: none; }
}