/* Agent configuration: shared Datalyse surfaces and container-aware layouts.
   The live chat iframe and orb palette are deliberately outside this stylesheet. */
.ai-agent-editor .ai-tab-panels { container:agentpanel / inline-size; padding:24px; scrollbar-gutter:stable; }
.ai-agent-editor .ai-panel { min-width:0; color:var(--dt-text); }
.ai-agent-editor .ai-panel :is(.ai-grid-2,.ai-col,.ai-card,.ai-card-body,.el-aset-content) { min-width:0; }
.ai-agent-editor .ai-panel .ai-grid-2 { gap:16px; align-items:start; }
.ai-agent-editor .ai-panel .ai-card { margin-bottom:18px; border:0; border-radius:12px; background:var(--dt-surface); box-shadow:none; overflow:visible; }
.ai-agent-editor .ai-panel .ai-card-header { display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid transparent; background:transparent; }
.ai-agent-editor .ai-panel .ai-card-header > div:not(.ai-card-icon) { min-width:0; flex:1; }
.ai-agent-editor .ai-panel .ai-card-header h3 { margin:0; font-size:14px; line-height:1.4; font-weight:600; color:var(--dt-text); }
.ai-agent-editor .ai-panel .ai-card-header p { margin:3px 0 0; font-size:12px; line-height:1.5; color:var(--dt-muted); }
.ai-agent-editor .ai-panel .ai-card-icon { display:grid; place-items:center; width:30px; height:30px; flex:none; border:0; border-radius:8px; color:var(--dt-muted); background:var(--dt-surface-2); font-size:15px; box-shadow:none; }
.ai-agent-editor .ai-panel .ai-card-body { padding:18px; }
.ai-agent-editor .ai-panel :is(.ai-input,.ai-select,.ai-lang-trigger) { min-height:38px; border:0; border-radius:8px; padding:8px 11px; background:var(--dt-field-bg); color:var(--dt-text); font-size:13px; box-shadow:none; }
.ai-agent-editor .ai-panel .ai-textarea { padding:12px; border:0; border-radius:10px; font-size:13px; line-height:1.6; background:var(--dt-field-bg); color:var(--dt-text); resize:vertical; }
.ai-agent-editor .ai-panel .ai-field > label { font-size:12px; line-height:1.4; font-weight:500; color:var(--dt-text); }
.ai-agent-editor .ai-panel :is(.ai-btn,.el-studio-btn-ghost,.el-aset-btn-ghost,.el-aset-apply-btn,.el-spot-small-btn,.el-aset-btn-primary) { min-height:32px; padding:7px 11px; border:0; border-radius:8px; background:var(--dt-surface-2); color:var(--dt-text); font-size:12px; font-weight:500; box-shadow:none; transform:none; }
.ai-agent-editor .ai-panel :is(.ai-btn-primary,.el-aset-btn-primary) { background:var(--dt-cta) !important; color:var(--dt-cta-fg) !important; border-color:transparent; }
.ai-agent-editor .ai-panel :is(.ai-btn,.el-studio-btn-ghost,.el-aset-btn-ghost):hover { background:var(--dt-hover); transform:none; }
.ai-agent-editor .ai-panel .ai-btn:disabled { opacity:.5; cursor:not-allowed; }
.ai-agent-editor .ai-panel :is(.ai-preset,.ai-mode-option,.ai-size-option,.ai-pos-option) { border:0; border-radius:8px; color:var(--dt-muted); background:var(--dt-surface-2); box-shadow:none; font-size:12px; }
.ai-agent-editor .ai-panel :is(.ai-preset.active,.ai-mode-option.selected,.ai-size-option.selected,.ai-pos-option.selected) { color:var(--dt-text); border-color:transparent; background:var(--dt-active); box-shadow:none; }
.ai-agent-editor .ai-panel .ai-slider { accent-color:var(--dt-cta); }
.ai-agent-editor .ai-panel .ai-slider-value { color:var(--dt-text); background:var(--dt-surface-2); border:0; border-radius:6px; font-size:11px; }
.ai-agent-editor .ai-panel :is(.ai-switch-slider,.ai-switch.sm .ai-switch-slider) { box-shadow:none; }
.ai-agent-editor .ai-panel .ai-switch input:checked + .ai-switch-slider { background:var(--dt-cta); }
.ai-agent-editor .ai-panel input[type=checkbox] { accent-color:var(--dt-cta); }
.ai-agent-editor .ai-panel :is(.ai-table,.ai-rag-files) { width:100%; font-size:12px; }
.ai-agent-editor .ai-panel .ai-table th { text-transform:none; font-size:11px; font-weight:500; letter-spacing:0; }
.ai-agent-editor .ai-panel .ai-table td { padding:10px; }
.ai-agent-editor .ai-panel :is(.ai-rag-empty,.ai-table-empty,.ai-welcome-empty) { padding:28px 16px; text-align:center; color:var(--dt-muted); font-size:12px; }
.ai-agent-editor .ai-panel :is(.ai-rag-empty,.ai-table-empty) i { font-size:24px; color:var(--dt-faint); }

/* Keep the prompt editor as one surface, rather than a card inside a card. */
.ai-agent-editor #panel-personality .ai-card { border:0; border-radius:0; box-shadow:none; background:transparent; }
.ai-agent-editor #panel-personality .ai-card-header { padding:0 0 12px; border:0; }
.ai-agent-editor #panel-personality .ai-card-body { padding:0; }
.ai-agent-editor #panel-personality .ai-card-icon { display:none; }
.ai-agent-editor #panel-personality .ai-card-header h3 { font-size:13px; font-weight:500; }
.ai-agent-editor #panel-personality .ai-grid-agent-main { display:block; }
.ai-agent-editor #panel-personality .ai-col { display:block; }
.ai-agent-editor #panel-personality .ai-card:has(#agent_name) { padding-top:20px; border-top:1px solid transparent; }
.ai-agent-editor #panel-personality .ai-card:has(#personality-lang-texts) { padding-top:20px; border-top:1px solid transparent; }
.ai-agent-editor #lang-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ai-agent-editor .studio-country { background:var(--dt-surface-2); }
.ai-agent-editor .studio-country > summary { padding:13px 14px; font-size:13px; }
.ai-agent-editor [data-toggle-voice] { display:inline-flex; align-items:center; gap:6px; min-height:32px; max-width:100%; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Spotlight: real metrics, neutral cards, no colored decorative frames. */
.ai-agent-editor .el-spot-top-bar { gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.ai-agent-editor .el-spot-title { margin:4px 0 0; color:var(--dt-text); font-size:18px; font-weight:600; letter-spacing:-.02em; }
.ai-agent-editor .el-spot-kicker { color:var(--dt-muted); font-size:10px; letter-spacing:.06em; }
.ai-agent-editor :is(.el-spot-main-card,.el-spot-bento-card,.el-spot-top-card) { background:var(--dt-surface); border:0; border-radius:12px; box-shadow:none; }
.ai-agent-editor .el-spot-bento-grid { gap:12px; }
.ai-agent-editor .el-spot-bento-card { padding:16px; }
.ai-agent-editor .el-spot-bento-title { color:var(--dt-text); font-size:13px; font-weight:500; }
.ai-agent-editor .el-spot-bento-sub { color:var(--dt-muted); font-size:12px; line-height:1.5; }
.ai-agent-editor .el-spot-metric-big { font-size:28px; line-height:1.2; font-weight:500; color:var(--dt-text); }
.ai-agent-editor .el-spot-bento-arrow { color:var(--dt-muted); }
.ai-agent-editor .el-spot-progress { background:var(--dt-surface-2); }
.ai-agent-editor .el-spot-progress > div { background:var(--dt-cta); }

/* Knowledge: upload area and statistics fit even beside a full-height chat. */
.ai-agent-editor #panel-knowledge .ai-rag-upload-zone { min-height:170px; padding:24px 16px; border:1px dashed transparent; border-radius:10px; background:var(--dt-field-bg); color:var(--dt-muted); }
.ai-agent-editor #panel-knowledge .ai-rag-upload-zone:is(:hover,:focus-within,.dragover) { background:var(--dt-field-hover); }
.ai-agent-editor #panel-knowledge .ai-rag-upload-zone > i { margin-bottom:10px; font-size:26px; background:var(--dt-surface-2); color:var(--dt-muted); box-shadow:none; }
.ai-agent-editor #panel-knowledge .ai-rag-upload-zone p { font-size:13px; color:var(--dt-text); }
.ai-agent-editor #panel-knowledge .ai-rag-stats { gap:10px; }
.ai-agent-editor #panel-knowledge .ai-rag-stat { padding:12px; border:0; border-radius:10px; background:var(--dt-surface-2); }
.ai-agent-editor #panel-knowledge .ai-rag-stat-icon { width:28px; height:28px; background:var(--dt-surface-2); color:var(--dt-muted); box-shadow:none; }
.ai-agent-editor #panel-knowledge .ai-rag-stat-value { font-size:16px; font-weight:500; }
.ai-agent-editor #panel-knowledge .ai-rag-stat-label { font-size:11px; }

/* Workflow canvas: readable branches, scroll contained in the panel. */
.ai-agent-editor .el-wf-studio-toolbar { display:flex; flex-direction:column; align-items:stretch; gap:12px; margin-bottom:14px; }
.ai-agent-editor .el-wf-studio-toolbar > div { flex-wrap:wrap; }
.ai-agent-editor .el-wf-badge { background:var(--dt-surface-2); border:1px solid transparent; color:var(--dt-text); border-radius:7px; font-size:11px; }
.ai-agent-editor #elWfActiveTemplateName { color:var(--dt-muted) !important; line-height:1.5; }
.ai-agent-editor #elStudioWorkflowCanvas { border:1px solid transparent; border-radius:12px; overflow:auto; background-color:var(--dt-surface-2); background-image:radial-gradient(var(--dt-border-strong) .7px,transparent .7px); background-size:18px 18px; }
.ai-agent-editor .el-wf-node-box { max-width:43%; padding:14px; background:var(--dt-surface); border:0; border-radius:10px; box-shadow:none; }
.ai-agent-editor .el-wf-node-box:hover { border-color:transparent; background:var(--dt-hover); }
.ai-agent-editor .el-wf-node-title { color:var(--dt-text); font-size:12px; font-weight:500; }
.ai-agent-editor .el-wf-node-desc { color:var(--dt-muted); font-size:11px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.ai-agent-editor .el-wf-cond-pill { max-width:44%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:var(--dt-cta); color:var(--dt-cta-fg); border:0; font-size:10px; }
.ai-agent-editor .el-wf-node-pill { color:var(--dt-text); background:var(--dt-surface); border:0; box-shadow:none; font-size:11px; }

/* Widget settings retain the selected palette; only their surrounding UI is neutral. */
.ai-agent-editor #panel-widget .ai-color-picker { display:flex; flex-wrap:wrap; gap:10px; }
.ai-agent-editor #panel-widget .ai-color-option { width:32px; height:32px; border-radius:50%; border:2px solid transparent; box-shadow:none; }
.ai-agent-editor #panel-widget .ai-color-option.selected { outline:1px solid var(--dt-border-strong); outline-offset:3px; }
.ai-agent-editor #panel-widget .ai-size-icon { color:var(--dt-muted); background:transparent; }
.ai-agent-editor #panel-widget .ai-code-block { min-width:0; max-width:100%; border:0; border-radius:10px; background:var(--dt-surface-2); }
.ai-agent-editor #panel-widget pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:11px; }
.ai-agent-editor #panel-widget .ai-card-body:has(#elWidgetTabIframe) { background:var(--dt-surface-2) !important; border-radius:0 0 12px 12px; }

/* Settings: one navigation surface and full-width controls on narrow panels. */
.ai-agent-editor .el-aset-subtabs { display:flex; gap:18px; padding:0; border-bottom-width:1px; border-bottom-style:solid; margin-bottom:18px; overflow-x:auto; }
.ai-agent-editor .el-aset-subtab { flex:none; position:relative; padding:10px 0 12px; border:0; border-radius:0; font-size:12px; }
.ai-agent-editor .el-aset-layout { display:grid; grid-template-columns:160px minmax(0,1fr); gap:20px; }
.ai-agent-editor .el-aset-sidebar { width:auto; min-width:0; padding:0; }
.ai-agent-editor .el-aset-side-group { font-size:10px; color:var(--dt-muted); }
.ai-agent-editor .el-aset-side-item { border-radius:8px; font-size:12px; padding:9px 10px; color:var(--dt-muted); background:transparent; }
.ai-agent-editor .el-aset-side-item.active { background:var(--dt-active); color:var(--dt-text); }
.ai-agent-editor .el-aset-context-card { padding:18px; border:0; border-radius:12px; background:var(--dt-surface); box-shadow:none; }
.ai-agent-editor .el-aset-context-title { font-size:15px; font-weight:600; color:var(--dt-text); }
.ai-agent-editor .el-aset-context-desc { font-size:12px; line-height:1.6; color:var(--dt-muted); }
.ai-agent-editor .el-aset-context-actions { display:flex; gap:8px; flex-wrap:wrap; }
.ai-agent-editor .el-aset-md-editor-wrap { margin-top:18px; border:0; border-radius:10px; overflow:hidden; background:var(--dt-field-bg); }
.ai-agent-editor .el-aset-md-editor-wrap:focus-within { background:var(--dt-field-hover); }
.ai-agent-editor .el-aset-md-bar { padding:10px; background:transparent; border-bottom:1px solid transparent; gap:8px; flex-wrap:wrap; }
.ai-agent-editor #elStudioAgentsMdInput { min-height:260px; width:100%; padding:14px; border:0; background:transparent; color:var(--dt-text); font-size:12px; line-height:1.65; resize:vertical; }
.ai-agent-editor .el-aset-guard-row { display:flex; align-items:center; gap:18px; padding:14px; border:0; border-radius:10px; background:var(--dt-surface-2); }
.ai-agent-editor .el-aset-guard-row > div { min-width:0; flex:1; }
.ai-agent-editor .el-aset-guard-row strong { display:block; font-size:13px; font-weight:500; color:var(--dt-text); }
.ai-agent-editor .el-aset-guard-row small { display:block; margin-top:5px; font-size:12px; line-height:1.5; color:var(--dt-muted); }

/* The agent-name picker uses the same clean select engine as the rest of Datalyse. */
.ai-agent-editor .ai-studio-agent-select .dui-select__trigger { min-height:38px; border:0 !important; border-radius:9px; padding:7px 11px; color:var(--dt-text); box-shadow:none !important; }
.ai-agent-editor .ai-studio-agent-select .dui-select__value { font-size:14px; font-weight:500; }
.ai-studio-agent-select-menu.dui-select__dropdown { width:clamp(280px,30vw,380px) !important; max-width:calc(100vw - 32px); padding:5px; border:0; border-radius:10px; background:var(--dt-overlay); box-shadow:none; }
.ai-studio-agent-select-menu .dui-select__search-wrap { margin:0; padding:8px; border:0; border-bottom:1px solid transparent; border-radius:0; background:transparent; }
.ai-studio-agent-select-menu .dui-select__search { min-height:34px; border:0 !important; box-shadow:none !important; background:transparent !important; color:var(--dt-text); font-size:12px; }
.ai-studio-agent-select-menu .dui-select__option { padding:10px; border-radius:6px; font-size:12px; line-height:1.4; }
.ai-studio-agent-select-menu .dui-select__option:hover,.ai-studio-agent-select-menu .dui-select__option.selected { background:var(--dt-active); color:var(--dt-text); }

@container agentpanel (max-width:680px) {
    .ai-agent-editor .ai-panel .ai-grid-2 { grid-template-columns:minmax(0,1fr) !important; }
    .ai-agent-editor .el-aset-layout { grid-template-columns:minmax(0,1fr); gap:14px; }
    .ai-agent-editor .el-aset-sidebar { display:flex; flex-direction:row; gap:6px; overflow-x:auto; padding-bottom:4px; }
    .ai-agent-editor .el-aset-side-group { display:none; }
    .ai-agent-editor .el-aset-side-item { width:auto; flex:none; white-space:nowrap; padding:8px; }
    .ai-agent-editor .ai-voice-filters { grid-template-columns:minmax(0,1fr) !important; }
    .ai-agent-editor #panel-personality.active { display:block; }
    .ai-agent-editor .ai-panel .ai-card-header { align-items:flex-start; }
}
@container agentpanel (max-width:440px) {
    .ai-agent-editor .el-spot-bento-grid,.ai-agent-editor .el-spot-rec-grid { grid-template-columns:minmax(0,1fr); }
    .ai-agent-editor .ai-rag-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ai-agent-editor .ai-panel .ai-card-header { flex-wrap:wrap; }
    .ai-agent-editor .el-wf-graph-stage { min-width:480px; }
}
@media(max-width:700px) {
    .ai-agent-editor .ai-tab-panels { padding:18px 12px; }
    .ai-agent-editor .ai-header-main { align-items:flex-start; gap:12px; }
    .ai-agent-editor .ai-header-actions { display:flex; flex-wrap:wrap; width:100%; margin:0; }
    .ai-agent-editor .ai-header-actions > button { flex:0 1 auto; }
}
@media(forced-colors:active) {
    .ai-agent-editor :is(.ai-input,.ai-select,.ai-textarea,.ai-lang-trigger,.ai-studio-agent-select .dui-select__trigger):focus-visible,
    .ai-agent-editor .el-aset-md-editor-wrap:focus-within,
    .ai-studio-agent-select-menu .dui-select__search-wrap:focus-within { outline:2px solid Highlight !important; }
}
.ai-agent-editor .studio-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.ai-agent-editor .studio-panel-heading h3 { margin:0; font-size:18px; font-weight:600; color:var(--dt-text); }
.ai-agent-editor .studio-panel-heading p { margin:5px 0 0; font-size:12px; color:var(--dt-muted); }
.ai-agent-editor #panel-history .el-spot-recent { margin-top:0; }
.ai-agent-editor #panel-history .el-spot-conv__row { padding:14px; }
.ai-agent-editor #panel-history .el-spot-recent__empty { padding:40px 20px; border:0; margin:0; }

.ai-agent-editor #panel-history .el-spot-recent__head { display:none; }

.ai-agent-editor .el-wf-empty { min-height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:28px; color:var(--dt-muted); text-align:center; }
.ai-agent-editor .el-wf-empty > i { font-size:28px; }
.ai-agent-editor .el-wf-empty h3 { margin:0; color:var(--dt-text); font-size:16px; font-weight:600; }
.ai-agent-editor .el-wf-empty p { margin:0 0 6px; max-width:340px; font-size:13px; line-height:1.6; }
.ai-agent-editor [data-wf-node] { cursor:pointer; }
.ai-agent-editor [data-wf-node]:focus-visible { outline:2px solid var(--dt-border-strong); outline-offset:4px; }
.ai-agent-editor .aag-wf-stage[data-workflow-empty="true"] > :not(.el-wf-empty) { display:none !important; }
@media(forced-colors:active) { .ai-agent-editor [data-wf-node]:focus-visible { outline-color:Highlight; } }