/* Content managers respond to the available editor width, including split windows. */
.agent-editor-workspace { container-type: inline-size; container-name: agent-workspace; min-width: 0; }
body.studio-product-ui .agent-section-heading { gap: 18px; flex-wrap: wrap; }
body.studio-product-ui .agent-section-heading > div { flex: 1 1 260px; min-width: 0; }
body.studio-product-ui .environment-use-case { flex: 0 1 230px; min-width: 0; max-width: 100%; }
body.studio-product-ui .environment-use-case select { width: 100%; min-width: 0; }
body.studio-product-ui :is(.editor-card,.knowledge-editor-stack,.widget-config-builder,.environment-control-card,.form-grid,label,fieldset) { min-width: 0; }
body.studio-product-ui :is(input,select,textarea) { max-width: 100%; }
body.studio-product-ui .agent-section-heading :is(h3,p),
body.studio-product-ui .agent-sidebar-identity strong { overflow-wrap: anywhere; }

.games-manager-layout { display: grid; grid-template-columns: minmax(200px,260px) minmax(0,1fr); gap: 20px; align-items: start; }
.game-setting-list { display: grid; gap: 8px; }
.game-setting-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 10px; background: white; padding: 4px 14px 4px 0; }
.game-setting-row.active { border-color: #bfdbfe; background: #eff6ff; }
.game-setting-select { flex: 1; min-width: 0; padding: 14px; border: 0; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.game-setting-select strong { display: block; color: #172033; font-size: 13px; overflow-wrap: anywhere; }
.game-setting-select small { display: block; margin-top: 5px; color: #64748b; font-size: 11px; line-height: 1.5; }
.game-setting-row .widget-toggle { flex-shrink: 0; }
.widget-toggle { position: relative; min-height: 44px; }
.widget-toggle input { inset: 0; width: 100%; height: 100%; min-height: 44px; margin: 0; padding: 0; z-index: 1; cursor: pointer; }
.widget-toggle > i,.widget-toggle > span { pointer-events: none; }
.widget-toggle input:focus-visible + i { outline: 2px solid #2563eb; outline-offset: 4px; }
.game-settings-form { display: grid; gap: 18px; margin: 0; }
.game-settings-heading { border-bottom: 1px solid var(--border); padding-bottom: 18px; }
.game-settings-heading h4 { font-size: 21px; margin: 5px 0 7px; }
.game-settings-heading > p:last-child { margin: 0; color: #64748b; line-height: 1.6; }
.game-settings-form textarea { min-height: 80px; resize: vertical; }
.game-settings-form label { display: grid; gap: 7px; }
.game-rows { display: grid; gap: 16px; }
.game-config-row { display: grid; gap: 16px; margin: 0; padding: 16px; border: 1px solid var(--border); border-radius: 10px; }
.game-config-row legend { padding: 0 6px; font-weight: 600; font-size: 12px; }
.game-config-row > .quiet-button { justify-self: start; color: #64748b; }
.game-image-field { display: grid; gap: 12px; min-width: 0; }
.game-image-field .secondary-button { justify-self: start; }
.game-image-preview { width: 100%; height: 120px; object-fit: contain; background: repeating-conic-gradient(#f1f5f9 0 25%,#fff 0 50%) 0 0/16px 16px; border: 1px solid var(--border); border-radius: 8px; }
.game-sprite-settings { display: grid; gap: 14px; }
.game-sprite-settings h4 { margin: 0; }
.game-setting-note { padding: 14px 16px; border-radius: 8px; background: #f8fafc; color: #475569; line-height: 1.7; }
.game-save-actions { border-top: 1px solid var(--border); padding-top: 18px; }
.games-status { margin-top: 16px; }
.widget-quick-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px; }
.widget-quick-actions p { flex-basis: 100%; color: #64748b; font-size: 12px; margin: 0; }
.widget-quick-actions button { min-height: 42px; }

.knowledge-rich-editor:empty { display: none; }
.knowledge-rich-editor { border: 1px solid #cbd5e1; border-radius: 10px; background: white; overflow: clip; }
.knowledge-rich-editor:focus-within { border-color: #60a5fa; box-shadow: 0 0 0 2px #dbeafe; }
.knowledge-editor-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid var(--border); background: #f8fafc; }
.knowledge-editor-toolbar button,.knowledge-editor-link button { min-height: 36px; border: 0; padding: 6px 9px; border-radius: 5px; background: transparent; color: #475569; font: 500 12px Poppins,sans-serif; cursor: pointer; }
.knowledge-editor-toolbar button:hover { background: #e2e8f0; color: #172033; }
.knowledge-editor-toolbar button[aria-pressed="true"] { background: #dbeafe; color: #1d4ed8; }
.knowledge-editor-toolbar button:disabled { opacity: .4; cursor: default; }
.knowledge-editor-toolbar select { width: 132px; min-height: 36px; padding: 5px 8px; margin-right: 4px; background: white; font-size: 12px; }
.knowledge-editor-link { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; padding: 12px; border-bottom: 1px solid var(--border); }
.knowledge-editor-link[hidden] { display: none; }
.knowledge-editor-link label { flex: 1 1 220px; }
.knowledge-editor-content .tiptap { min-height: 300px; max-height: 650px; overflow-y: auto; padding: 20px 22px; color: #1e293b; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; outline: none; }
.knowledge-editor-content .tiptap > :first-child { margin-top: 0; }
.knowledge-editor-content .tiptap :is(h1,h2,h3) { color: #172033; line-height: 1.4; margin: 1.3em 0 .5em; }
.knowledge-editor-content .tiptap h1 { font-size: 24px; }
.knowledge-editor-content .tiptap h2 { font-size: 20px; }
.knowledge-editor-content .tiptap h3 { font-size: 17px; }
.knowledge-editor-content .tiptap p { margin: .6em 0; }
.knowledge-editor-content .tiptap :is(ul,ol) { padding-left: 24px; }
.knowledge-editor-content .tiptap blockquote { margin: 16px 0; padding: 0 0 0 16px; border-left: 3px solid #93c5fd; color: #475569; }
.knowledge-editor-content .tiptap a { color: #1d4ed8; text-decoration: underline; }
.knowledge-editor-content .tiptap pre { white-space: pre-wrap; padding: 12px; border-radius: 6px; background: #f1f5f9; }
.knowledge-editor-count { margin: 0; padding: 8px 14px; border-top: 1px solid #f1f5f9; color: #64748b; font-size: 11px; text-align: right; }
.knowledge-editor-count.is-over-limit { color: #b91c1c; }

/* Engagement keeps editable copy together and secondary timing controls folded away. */
body.studio-product-ui .engagement-builder { padding: 0; gap: 20px; }
.engagement-layout { display: grid; grid-template-columns: minmax(0,1fr) 304px; gap: 24px; align-items: start; }
.engagement-controls { display: grid; gap: 18px; min-width: 0; }
body.studio-product-ui .engagement-card { display: grid; gap: 18px; padding: 22px; margin: 0; }
.engagement-card > header h4 { margin: 0 0 5px; font-size: 16px; letter-spacing: -.02em; }
.engagement-card > header p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.6; }
.engagement-card textarea { min-height: 74px; resize: vertical; }
.engagement-dependent { display: grid; gap: 14px; padding: 0; margin: 0; border: 0; }
.engagement-builder [hidden] { display: none !important; }
.engagement-builder .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
body.studio-product-ui .engagement-switch { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; min-height: 48px; margin: 0; cursor: pointer; }
.engagement-switch > span { display: grid; gap: 5px; }
.engagement-switch strong { font-size: 13px; font-weight: 600; }
.engagement-switch small { font-size: 12px; font-weight: 400; line-height: 1.5; color: #64748b; }
body.studio-product-ui .engagement-switch input { position: absolute; inset: 0; min-height: 44px; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; z-index: 1; cursor: pointer; }
.engagement-switch i { position: relative; display: block; width: 36px; height: 21px; flex-shrink: 0; border-radius: 20px; background: #cbd5e1; transition: background .15s; }
.engagement-switch i::after { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; background: white; border-radius: 50%; box-shadow: 0 1px 3px #0002; content: ''; transition: transform .15s; }
.engagement-switch input:checked + i { background: #2563eb; }
.engagement-switch input:checked + i::after { transform: translateX(15px); }
.engagement-switch input:focus-visible + i { outline: 2px solid #2563eb; outline-offset: 4px; }
.engagement-items { display: grid; gap: 10px; }
.engagement-empty { margin: 0; padding: 16px; color: #64748b; font-size: 12px; line-height: 1.6; border: 1px dashed #cbd5e1; border-radius: 8px; }
.engagement-list-row { position: relative; min-width: 0; border: 1px solid #e2e8f0; border-radius: 8px; background: #fbfcfe; }
.engagement-callout-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 12px; align-items: center; }
body.studio-product-ui .engagement-callout-row label { font-size: 11px; color: #64748b; }
.engagement-row-actions { display: flex; gap: 2px; }
.engagement-row-actions button { width: 30px; height: 36px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #64748b; font: 400 19px Arial,sans-serif; cursor: pointer; }
.engagement-row-actions button:hover { color: #1d4ed8; background: #eff6ff; }
.engagement-row-actions button.is-remove:hover { color: #b91c1c; background: #fee2e2; }
.engagement-row-actions button:disabled { opacity: .25; cursor: default; background: transparent; }
.engagement-question-row > .engagement-row-actions { position: absolute; top: 12px; right: 10px; }
.engagement-question-details { padding: 0; border: 0; }
.engagement-question-details > summary { display: grid; gap: 4px; padding: 16px 110px 16px 16px; cursor: pointer; list-style: none; }
.engagement-question-details > summary::-webkit-details-marker { display: none; }
.engagement-question-details > summary strong { font-size: 12px; overflow-wrap: anywhere; }
.engagement-question-details > summary strong::before { display: inline-block; margin-right: 7px; content: '›'; color: #64748b; transition: transform .15s; }
.engagement-question-details[open] > summary strong::before { transform: rotate(90deg); }
.engagement-question-details > summary > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #64748b; font-size: 11px; line-height: 1.6; }
.engagement-question-fields { display: grid; gap: 14px; padding: 0 16px 16px; }
.engagement-add { justify-self: start; min-height: 40px; }
.engagement-advanced { border-top: 1px solid #e2e8f0; border-bottom: 0; padding: 14px 0 0; }
.engagement-advanced > summary { cursor: pointer; color: #475569; font-size: 12px; line-height: 1.7; }
.engagement-advanced > summary small { display: block; margin-left: 15px; color: #64748b; font-size: 11px; font-weight: 400; }
.engagement-advanced[open] > summary { margin-bottom: 16px; }
.engagement-advanced > label { margin-top: 16px; }
.engagement-advanced > .field-note { margin: 12px 0 0; }
.engagement-preview { position: sticky; top: 86px; min-width: 0; padding: 0; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 10px; background: white; }
.engagement-preview-heading { padding: 18px; color: #172033; cursor: pointer; font-size: 12px; }
.engagement-preview-heading span { display: block; margin: 5px 0 0 15px; color: #64748b; font-size: 11px; }
.engagement-preview-tabs { display: flex; gap: 4px; padding: 4px; margin: 0 16px 16px; background: #f1f5f9; border-radius: 7px; }
.engagement-preview-tabs button { flex: 1; min-width: 0; padding: 9px 5px; border: 0; border-radius: 5px; background: transparent; color: #64748b; font: 500 11px Poppins,sans-serif; cursor: pointer; }
.engagement-preview-tabs button[aria-pressed="true"] { color: #1e293b; background: white; box-shadow: 0 1px 3px #0f172a13; }
.engagement-preview-stage { padding: 22px 18px; margin: 0 16px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; }
.engagement-preview-stage > div { display: grid; gap: 14px; }
.engagement-preview-bubble { margin: 0; padding: 14px; border: 1px solid #e2e8f0; border-radius: 10px 10px 10px 2px; background: white; color: #334155; font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.engagement-preview-launcher { width: fit-content; max-width: 100%; padding: 12px 16px; border: 0; border-radius: 24px; background: #17233b; color: white; font: 500 12px Poppins,sans-serif; overflow-wrap: anywhere; cursor: pointer; }
.engagement-preview-next { justify-self: start; padding: 4px 0; min-height: 32px; border: 0; background: transparent; color: #2563eb; font: 500 11px Poppins,sans-serif; cursor: pointer; }
.engagement-preview-speaker { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.engagement-preview-speaker > span { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; background: #dbeafe; color: #2563eb; border-radius: 50%; }
.engagement-preview-helper,.engagement-preview-muted { margin: 0; color: #64748b; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.engagement-preview-questions { display: flex; flex-wrap: wrap; gap: 7px; }
.engagement-preview-questions button { max-width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid #bfdbfe; border-radius: 16px; color: #1d4ed8; background: #eff6ff; font: 400 11px/1.5 Poppins,sans-serif; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.engagement-preview-reply { margin: 0 0 0 20px; padding: 12px; border-radius: 10px 10px 2px 10px; background: #dbeafe; color: #1e40af; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; white-space: pre-wrap; }
.engagement-preview-note { padding: 0 18px; margin: 14px 0 18px; color: #64748b; font-size: 10px; line-height: 1.7; }
.engagement-savebar { position: sticky; bottom: 16px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #e2e8f0; border-radius: 10px; background: white; box-shadow: 0 4px 20px #0f172a0b; }
.engagement-savebar > div { display: grid; gap: 4px; flex: 1; min-width: 0; }
.engagement-savebar [data-engagement-dirty] { color: #64748b; font-size: 12px; }
.engagement-savebar [data-engagement-dirty].is-dirty { color: #92400e; }
.engagement-savebar button { white-space: nowrap; min-height: 40px; }
.engagement-savebar .inline-status:empty { display: none; }
@container agent-workspace (max-width: 900px) {
  .engagement-layout { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .engagement-preview { grid-row: 1; position: static; }
  .engagement-preview-stage { max-width: 500px; }
}
@container agent-workspace (max-width: 540px) {
  body.studio-product-ui .engagement-card { padding: 16px; }
  .engagement-callout-row { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .engagement-row-actions { justify-content: flex-end; }
  .engagement-row-actions button { width: 40px; height: 40px; }
  .engagement-question-row > .engagement-row-actions { position: static; margin: 0 8px 4px; }
  .engagement-question-details > summary { padding: 14px; }
  .engagement-question-fields { padding: 0 14px 14px; }
  .engagement-savebar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 12px; bottom: 8px; }
  .engagement-savebar > div { grid-column: 1 / -1; }
  .engagement-savebar button { padding: 9px 4px; font-size: 11px; }
}

@container agent-workspace (max-width: 1000px) {
  body.studio-product-ui :is(.environment-builder-layout,.avatar-editor-layout,.knowledge-library-layout,.knowledge-manager.agent-scoped .knowledge-library-layout) { grid-template-columns: minmax(0,1fr); }
  body.studio-product-ui .environment-preview-column { position: relative; top: auto; }
  body.studio-product-ui .widget-common-fields { grid-template-columns: minmax(0,1fr); }
  body.studio-product-ui .widget-type-step { grid-template-columns: minmax(0,1fr); }
  body.studio-product-ui .widget-type-step label { grid-row: auto; }
  body.studio-product-ui .widget-type-step > p { grid-column: 1; max-width: none; }
}
@container agent-workspace (max-width: 720px) {
  .games-manager-layout { grid-template-columns: minmax(0,1fr); }
  .game-setting-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .game-setting-select { padding: 10px; }
  .game-setting-select small { display: none; }
  body.studio-product-ui .editor-layout { grid-template-columns: minmax(0,1fr); }
  body.studio-product-ui :is(.form-grid.two,.form-grid.three,.widget-common-fields) { grid-template-columns: minmax(0,1fr); }
  body.studio-product-ui .knowledge-editor-stack > .editor-card { padding: 16px; }
}
@media (max-width: 560px) {
  body.studio-product-ui .studio-topbar { height: auto; min-height: 100px; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; padding: 10px 14px 0; }
  body.studio-product-ui .studio-topbar > .studio-top-nav.studio-nav { grid-row: 2; grid-column: 1 / -1; margin: 0; width: 100%; justify-content: stretch; }
  body.studio-product-ui .studio-topbar > .studio-top-nav.studio-nav button { flex: 1; min-height: 42px; padding: 8px 12px; }
  body.studio-product-ui .session-actions { grid-column: 2; grid-row: 1; }
  body.studio-product-ui .profile-menu > summary { min-width: 0; min-height: 42px; }
  body.studio-product-ui .profile-popover { width: min(320px,calc(100vw - 28px)); }
  body.studio-product-ui .studio-content { padding-top: 20px; }
  body.studio-product-ui .agent-section-heading { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
  body.studio-product-ui .agent-section-heading > div { min-width: 0; }
  body.studio-product-ui .agent-section-heading h3 { font-size: 23px; line-height: 1.35; }
  body.studio-product-ui .environment-use-case { width: 100%; }
  body.studio-product-ui .agent-nav-toggle { max-width: 170px; }
  .game-setting-list { gap: 6px; }
  .game-setting-row { padding-right: 8px; gap: 4px; }
  .game-setting-select strong { font-size: 12px; }
  .game-setting-row .widget-toggle > span { display: none; }
  .game-settings-form { padding: 16px; }
  .game-config-row { padding: 12px; }
  .knowledge-editor-content .tiptap { min-height: 270px; max-height: 60vh; padding: 16px; font-size: 16px; }
  .knowledge-editor-toolbar button { min-height: 40px; }
  body.studio-product-ui :is(input,textarea,select):not([type="color"]):not([type="checkbox"]):not([type="range"]) { font-size: 16px; }
}