/* clone-overrides.css — complementos mínimos ao CSS real (assets/index.css, copiado 1:1).
   Tudo aqui é necessidade do clone (não estava no original). */
:root { }
/* modal: botão X no head (o original usa .drawer-close só no mobile) */
.modal-head .icon-btn { flex: none; }
/* icone dentro dos e-ico/feed-ico/st-ico */
.e-ico svg, .feed-ico svg, .st-ico svg, .i-logo svg { width: 20px; height: 20px; }
.empty .e-ico svg { width: 24px; height: 24px; }
/* rail interna do detalhe da instância reusa .modal-rail mas sem min-height do modal-body */
.inst-body { display: grid; grid-template-columns: 190px 1fr; min-height: 420px; }
.inst-body > .modal-rail { border-right: 1px solid var(--border-subtle); }
@media (max-width: 820px) { .inst-body { grid-template-columns: 1fr; } .inst-body > .modal-rail { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border-subtle); } }
/* avatar com inicial (En do bundle) */
.avatar-lg { width: 46px; height: 46px; border-radius: 12px; font-size: 16px; }
.avatar-xl { width: 56px; height: 56px; border-radius: 14px; font-size: 20px; }
/* pg playground: lista de operacoes */
.pg-list { display: flex; flex-direction: column; gap: 6px; max-height: 62vh; overflow-y: auto; }
.pg-ico-btn { display: grid; place-items: center; width: 26px; }
/* checkbox switch da callout de webhook extra */
.mono { font-family: var(--mono); }
/* faz o qrcode img caber na qr-box */
.qr-box img { width: 100%; height: 100%; object-fit: contain; }
/* link simples */
.link-btn { background: none; border: none; cursor: pointer; font: inherit; }

/* --------------------------------------------------------------------------
   Operations UI refresh — workflow/orchestration patterns inspired by Mobbin
   references (workflow builders, support inboxes and developer consoles).
   -------------------------------------------------------------------------- */
.eyebrow { display:block; margin-bottom:6px; font-size:10px; line-height:1; font-weight:800; letter-spacing:.14em; color:var(--text-dim); }
.ops-page-head { align-items:center; }
.ops-page-head .actions { align-items:center; }

.status-badge { display:inline-flex; align-items:center; gap:7px; min-height:26px; padding:4px 9px; border:1px solid var(--border-card); border-radius:999px; font-size:11px; font-weight:700; color:var(--text-secondary); background:var(--bg-card); white-space:nowrap; }
.status-badge i, .health-dot { width:7px; height:7px; border-radius:50%; background:var(--text-dim); flex:none; }
.status-badge.ok { color:var(--ok); border-color:color-mix(in srgb,var(--ok) 30%,var(--border-card)); background:var(--ok-bg); }
.status-badge.ok i, .health-dot.ok { background:var(--ok); }
.status-badge.warn { color:var(--warn); border-color:color-mix(in srgb,var(--warn) 30%,var(--border-card)); background:var(--warn-bg); }
.status-badge.warn i, .health-dot.warn { background:var(--warn); }
.status-badge.danger { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 30%,var(--border-card)); background:var(--danger-bg); }
.status-badge.danger i, .health-dot.danger { background:var(--danger); }
.status-badge.info { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 30%,var(--border-card)); background:color-mix(in srgb,var(--accent) 9%,var(--bg-card)); }
.status-badge.info i, .health-dot.info { background:var(--accent); }
.status-badge.off i { background:var(--text-dim); }

.ops-health-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.health-card { min-width:0; padding:15px 16px; background:var(--bg-card); border:1px solid var(--border-card); border-radius:14px; }
.health-card.emphasis { border-color:color-mix(in srgb,var(--accent) 25%,var(--border-card)); background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 7%,var(--bg-card)),var(--bg-card)); }
.hc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.hc-icon { width:32px; height:32px; display:grid; place-items:center; color:var(--text-secondary); background:var(--bg-elevated); border:1px solid var(--border-subtle); border-radius:9px; }
.hc-icon svg { width:17px; height:17px; }
.hc-value { font-size:25px; line-height:1.05; font-weight:800; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.hc-value small { font-size:13px; color:var(--text-dim); font-weight:700; letter-spacing:0; }
.hc-value.hc-text { font-size:17px; line-height:26px; letter-spacing:.02em; }
.hc-label { margin-top:5px; font-size:12.5px; font-weight:700; color:var(--text-secondary); }
.hc-foot { margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--text-dim); }

.ops-main-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(320px,.8fr); gap:14px; margin-bottom:14px; }
.ops-secondary-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ops-panel { padding:0; overflow:hidden; }
.ops-panel > .panel-head-row { padding:15px 16px 13px; margin:0; border-bottom:1px solid var(--border-subtle); }
.ops-panel > .panel-head-row h3 { margin-bottom:1px; }
.ops-list { display:flex; flex-direction:column; }
.ops-list-row { min-height:64px; display:flex; align-items:center; gap:11px; padding:11px 16px; border-bottom:1px solid var(--border-subtle); transition:background .12s; }
.ops-list-row:last-child { border-bottom:none; }
.ops-list-row:hover { background:var(--bg-card-hover); }
.ops-list-row > .icon { width:15px; color:var(--text-dim); }
.ops-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--bg-elevated)); border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border-card)); }
.ops-avatar svg { width:17px; height:17px; }
.ops-list-main { min-width:0; flex:1; display:flex; flex-direction:column; }
.ops-list-main b { font-size:12.5px; }
.ops-list-main span { margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--text-dim); }
.ops-empty-mini { display:flex; align-items:center; gap:12px; padding:25px 18px; color:var(--text-muted); }
.ops-empty-mini > span { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:var(--bg-elevated); }
.ops-empty-mini b { color:var(--text-primary); font-size:13px; }
.ops-empty-mini p { font-size:11.5px; }

.readiness-meter { padding:16px; border-bottom:1px solid var(--border-subtle); }
.rm-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.rm-top b { font-size:20px; letter-spacing:-.03em; }
.rm-top span { font-size:11px; color:var(--text-dim); }
.rm-track { height:7px; overflow:hidden; border-radius:99px; background:var(--bg-elevated); }
.rm-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent-base),var(--accent)); }
.readiness-issues { display:flex; flex-direction:column; }
.issue-row { display:flex; align-items:center; gap:10px; min-height:59px; padding:9px 14px; border-bottom:1px solid var(--border-subtle); }
.issue-row:last-child { border-bottom:none; }
.issue-row:hover { background:var(--bg-card-hover); }
.issue-row > span:nth-child(2) { display:flex; flex:1; min-width:0; flex-direction:column; }
.issue-row b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.issue-row small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10.5px; color:var(--text-dim); }
.issue-row > svg { color:var(--text-dim); }
.ri-status { min-width:58px; padding:3px 6px; border-radius:6px; text-align:center; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; background:var(--bg-elevated); color:var(--text-secondary); }
.ri-status.ok { color:var(--ok); background:var(--ok-bg); }
.ri-status.warn { color:var(--warn); background:var(--warn-bg); }
.ri-status.danger { color:var(--danger); background:var(--danger-bg); }
.ri-status.info { color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--bg-elevated)); }
.issue-done { display:flex; align-items:center; gap:10px; padding:18px 16px; color:var(--ok); }
.issue-done span { display:flex; flex-direction:column; }
.issue-done small { color:var(--text-dim); }

.mini-flow { display:flex; align-items:center; gap:9px; padding:22px 16px 16px; overflow-x:auto; }
.mini-node { min-width:150px; display:flex; align-items:center; gap:9px; padding:10px; border:1px solid var(--border-card); border-radius:10px; background:var(--bg-input); }
.mini-node > span { width:28px; height:28px; display:grid; place-items:center; flex:none; color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,transparent); border-radius:8px; }
.mini-node b, .mini-node small { display:block; }
.mini-node b { font-size:11.5px; }
.mini-node small { color:var(--text-dim); font-size:9.5px; }
.mini-arrow { color:var(--text-dim); }
.mini-destinations { display:flex; gap:6px; }
.mini-destinations span { padding:7px 9px; border:1px solid var(--border-card); border-radius:8px; background:var(--bg-input); font-size:10px; color:var(--text-secondary); }
.callout { display:flex; align-items:flex-start; gap:9px; margin-top:14px; padding:12px 14px; border:1px solid color-mix(in srgb,var(--warn) 28%,var(--border-card)); border-radius:10px; background:color-mix(in srgb,var(--warn) 7%,var(--bg-card)); font-size:11.5px; color:var(--text-secondary); }
.callout.compact { margin:0 16px 16px; }
.callout.warn { border-color:color-mix(in srgb,var(--warn) 35%,var(--border-card)); }
.callout.info { border-color:color-mix(in srgb,var(--accent) 28%,var(--border-card)); background:color-mix(in srgb,var(--accent) 7%,var(--bg-card)); }
.callout > svg { margin-top:1px; flex:none; color:var(--warn); }
.callout.info > svg { color:var(--accent); }
.callout > span { flex:1; }

.activity-compact { display:flex; flex-direction:column; padding:4px 16px 8px; }
.activity-row { min-height:47px; display:flex; align-items:center; gap:9px; border-bottom:1px solid var(--border-subtle); }
.activity-row:last-child { border-bottom:none; }
.activity-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); }
.activity-row > div { min-width:0; flex:1; display:flex; flex-direction:column; }
.activity-row b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; }
.activity-row small, .activity-row time { font-size:9.8px; color:var(--text-dim); }

/* Flow orchestration */
.flow-context { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; padding:11px 12px; margin-bottom:14px; background:var(--bg-card); border:1px solid var(--border-card); border-radius:12px; }
.flow-context > div { min-width:260px; }
.context-label { display:block; margin:0 0 5px 2px; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }
.flow-context .input { min-height:36px; padding:7px 10px; }
.context-chip { min-height:36px; display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--border-card); border-radius:9px; background:var(--bg-input); color:var(--text-secondary); font-size:10.5px; }
.flow-board { margin-bottom:14px; overflow:hidden; border:1px solid var(--border-card); border-radius:14px; background:var(--bg-card); }
.flow-board-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 17px; border-bottom:1px solid var(--border-subtle); }
.flow-board-head h3 { font-size:14px; }
.flow-board-head p { margin-top:2px; color:var(--text-dim); font-size:11px; }
.workflow-canvas { display:grid; grid-template-columns:190px minmax(110px,.7fr) 190px minmax(260px,1.6fr); align-items:center; gap:0; min-height:290px; padding:28px 24px; background-image:radial-gradient(color-mix(in srgb,var(--text-dim) 17%,transparent) .7px, transparent .7px); background-size:18px 18px; }
.workflow-stage { min-width:0; position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:15px; text-align:left; color:var(--text-primary); background:var(--bg-card); border:1px solid var(--border-card); border-radius:12px; box-shadow:0 10px 30px -28px #000; }
button.workflow-stage { width:100%; font-family:inherit; cursor:pointer; }
button.workflow-stage:hover { border-color:color-mix(in srgb,var(--accent) 35%,var(--border-card)); }
.workflow-stage.source { border-color:color-mix(in srgb,var(--ok) 28%,var(--border-card)); }
.workflow-stage.router { border-color:color-mix(in srgb,var(--accent) 28%,var(--border-card)); }
.workflow-stage.target.active { border-color:color-mix(in srgb,var(--ok) 30%,var(--border-card)); }
.workflow-stage.target.configured { border-color:color-mix(in srgb,var(--warn) 30%,var(--border-card)); }
.node-kicker { font-size:8.5px; font-weight:800; letter-spacing:.11em; color:var(--text-dim); }
.node-icon { width:34px; height:34px; display:grid; place-items:center; margin:3px 0 4px; color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--bg-elevated)); border-radius:9px; }
.node-icon svg { width:18px; height:18px; }
.workflow-stage b { font-size:12.5px; }
.workflow-stage small { width:100%; min-height:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; color:var(--text-dim); }
.node-state { margin-top:6px; padding:3px 6px; border-radius:5px; background:var(--bg-elevated); color:var(--text-dim); font:800 8.5px var(--mono); text-transform:uppercase; }
.node-state.ok { color:var(--ok); background:var(--ok-bg); }
.node-state.warn { color:var(--warn); background:var(--warn-bg); }
.node-state.danger { color:var(--danger); background:var(--danger-bg); }
.workflow-connector { display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--text-dim); }
.workflow-connector span { display:block; width:100%; height:1px; background:var(--border-card); position:relative; }
.workflow-connector span:after { content:""; position:absolute; right:-1px; top:-3px; border-left:5px solid var(--text-dim); border-top:3px solid transparent; border-bottom:3px solid transparent; }
.workflow-connector b { padding:0 6px; background:var(--bg-card); font-size:8.5px; font-family:var(--mono); font-weight:600; }
.workflow-branch { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding-left:30px; }
.workflow-branch:before { content:""; position:absolute; left:0; top:50%; width:30px; height:1px; background:var(--border-card); }
.workflow-branch .branch-line { position:absolute; left:29px; top:18%; bottom:18%; width:1px; background:var(--border-card); }
.workflow-branch .workflow-stage:before { content:""; position:absolute; left:-31px; top:50%; width:30px; height:1px; background:var(--border-card); }
.flow-details { grid-template-columns:1fr 1fr; }
.capability-list { display:flex; flex-direction:column; }
.cap-row { display:flex; align-items:center; gap:10px; min-height:68px; padding:12px 16px; border-bottom:1px solid var(--border-subtle); }
.cap-row:last-child { border-bottom:none; }
.cap-row > span:first-child { width:30px; height:30px; display:grid; place-items:center; flex:none; border-radius:8px; background:var(--bg-elevated); color:var(--text-secondary); }
.cap-row > div { min-width:0; flex:1; display:flex; flex-direction:column; }
.cap-row b { font-size:12px; }
.cap-row small { margin-top:2px; color:var(--text-dim); font-size:10.5px; }
.step-list { list-style:none; padding:4px 16px 8px; margin:0; }
.step-list li { display:flex; align-items:center; gap:10px; min-height:68px; border-bottom:1px solid var(--border-subtle); }
.step-list li:last-child { border-bottom:none; }
.step-list li > span { width:26px; height:26px; display:grid; place-items:center; flex:none; border:1px solid var(--border-card); border-radius:50%; background:var(--bg-elevated); color:var(--text-dim); font-size:10px; font-weight:800; }
.step-list li.done > span { color:var(--ok); border-color:color-mix(in srgb,var(--ok) 35%,var(--border-card)); background:var(--ok-bg); }
.step-list li > div { min-width:0; flex:1; display:flex; flex-direction:column; }
.step-list b { font-size:11.5px; }
.step-list small { color:var(--text-dim); font-size:10px; }

/* Observability */
.obs-health { margin-bottom:14px; }
.log-head { align-items:center; }
.log-filters { display:flex; gap:8px; }
.log-filters .input { min-width:170px; min-height:34px; padding:6px 9px; font-size:11px; }
.runtime-table-wrap { width:100%; overflow:auto; }
.runtime-table { width:100%; border-collapse:collapse; }
.runtime-table th { padding:9px 13px; text-align:left; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); background:var(--bg-elevated); border-bottom:1px solid var(--border-subtle); }
.runtime-table td { max-width:640px; padding:10px 13px; font-size:11px; color:var(--text-secondary); border-bottom:1px solid var(--border-subtle); vertical-align:top; }
.runtime-table tr:last-child td { border-bottom:none; }
.runtime-table tbody tr:hover { background:var(--bg-card-hover); }
.runtime-table td:first-child { white-space:nowrap; color:var(--text-dim); font-size:9.5px; }
.table-link { color:var(--text-primary); font-weight:700; }
.table-link:hover { color:var(--accent); }
.table-empty { padding:30px !important; text-align:center; color:var(--text-dim) !important; }
.log-pill { display:inline-flex; min-width:45px; justify-content:center; padding:3px 5px; border-radius:5px; font:800 8.5px var(--mono); background:var(--bg-elevated); }
.log-pill.error { color:var(--danger); background:var(--danger-bg); }
.log-pill.warn { color:var(--warn); background:var(--warn-bg); }
.log-pill.ok { color:var(--ok); background:var(--ok-bg); }
.log-pill.info { color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--bg-elevated)); }

/* Production readiness */
.golive-hero { display:grid; grid-template-columns:1.15fr 1fr; gap:0; margin-bottom:14px; overflow:hidden; background:var(--bg-card); border:1px solid var(--border-card); border-radius:14px; }
.golive-score { display:flex; align-items:center; gap:18px; padding:20px; border-right:1px solid var(--border-subtle); }
.golive-score h2 { margin-top:5px; font-size:18px; }
.golive-score p { margin-top:3px; color:var(--text-dim); font-size:11px; }
.score-ring { --score:0; width:84px; height:84px; display:grid; place-items:center; flex:none; position:relative; border-radius:50%; background:conic-gradient(var(--accent) calc(var(--score) * 1%), var(--border-card) 0); }
.score-ring:after { content:""; position:absolute; inset:8px; border-radius:50%; background:var(--bg-card); }
.score-ring span { position:relative; z-index:1; font-size:22px; font-weight:800; }
.score-ring small { font-size:11px; color:var(--text-dim); }
.golive-env { display:grid; grid-template-columns:1fr 1fr; }
.golive-env > div { padding:17px; border-right:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.golive-env > div:nth-child(2n) { border-right:none; }
.golive-env > div:nth-last-child(-n+2) { border-bottom:none; }
.golive-env span, .golive-env b { display:block; }
.golive-env span { margin-bottom:4px; font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); }
.golive-env b { font-size:12px; }
.txt-ok { color:var(--ok) !important; }
.txt-warn { color:var(--warn) !important; }
.golive-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; overflow-x:auto; }
.golive-toolbar .segmented { flex:none; }
.readiness-list { display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
.readiness-card { display:grid; grid-template-columns:54px minmax(0,1fr) auto; gap:0; overflow:hidden; background:var(--bg-card); border:1px solid var(--border-card); border-radius:12px; }
.readiness-card.status-blocked { border-left:3px solid var(--danger); }
.readiness-card.status-attention { border-left:3px solid var(--warn); }
.readiness-card.status-partial { border-left:3px solid var(--accent); }
.readiness-card.status-ready { border-left:3px solid var(--ok); }
.readiness-index { display:grid; place-items:center; color:var(--text-dim); font:800 12px var(--mono); background:var(--bg-elevated); border-right:1px solid var(--border-subtle); }
.readiness-body { padding:14px 16px; }
.readiness-card-head { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.readiness-category { font-size:8.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--text-dim); }
.readiness-card h3 { font-size:13px; }
.readiness-summary { margin-top:2px; font-size:11px; font-weight:600; color:var(--text-secondary); }
.readiness-detail { margin-top:5px; max-width:950px; font-size:10.5px; color:var(--text-dim); }
.readiness-action { display:flex; align-items:center; padding:12px 14px; border-left:1px solid var(--border-subtle); }

/* Instance control */
.instance-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin:-6px 0 14px; overflow:hidden; border:1px solid var(--border-card); border-radius:11px; background:var(--bg-card); }
.instance-summary > div { min-width:0; padding:10px 12px; border-right:1px solid var(--border-subtle); }
.instance-summary > div:last-child { border-right:none; }
.instance-summary span, .instance-summary b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.instance-summary span { margin-bottom:2px; font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.instance-summary b { font-size:10.5px; color:var(--text-secondary); }
.instance-shell .modal-pane { padding:20px 22px; }
.instance-rail .mr-label:not(:first-child) { margin-top:13px; }
.instance-rail button[data-tab="perigo"] { color:var(--danger); }

@media (max-width: 1120px) {
  .ops-health-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ops-main-grid, .ops-secondary-grid, .flow-details { grid-template-columns:1fr; }
  .workflow-canvas { grid-template-columns:160px 80px 160px 1fr; padding:22px 16px; }
  .workflow-branch { grid-template-columns:1fr; }
  .workflow-branch .branch-line { top:12%; bottom:12%; }
  .golive-hero { grid-template-columns:1fr; }
  .golive-score { border-right:none; border-bottom:1px solid var(--border-subtle); }
  .instance-summary { grid-template-columns:repeat(3,1fr); }
  .instance-summary > div:nth-child(3) { border-right:none; }
  .instance-summary > div:nth-child(-n+3) { border-bottom:1px solid var(--border-subtle); }
}
@media (max-width: 820px) {
  .workflow-canvas { grid-template-columns:1fr; gap:10px; }
  .workflow-connector { min-height:34px; }
  .workflow-connector span { width:1px; height:28px; }
  .workflow-connector span:after { right:-3px; top:auto; bottom:-1px; border-top:5px solid var(--text-dim); border-left:3px solid transparent; border-right:3px solid transparent; border-bottom:none; }
  .workflow-branch { padding:24px 0 0; }
  .workflow-branch:before { left:50%; top:0; width:1px; height:24px; }
  .workflow-branch .branch-line, .workflow-branch .workflow-stage:before { display:none; }
  .golive-toolbar { align-items:flex-start; flex-direction:column; }
  .readiness-card { grid-template-columns:42px 1fr; }
  .readiness-action { grid-column:2; padding:0 16px 14px; border-left:none; }
  .instance-summary { grid-template-columns:1fr 1fr; }
  .instance-summary > div { border-right:1px solid var(--border-subtle) !important; border-bottom:1px solid var(--border-subtle); }
  .instance-summary > div:nth-child(2n) { border-right:none !important; }
  .instance-summary > div:last-child { border-bottom:none; }
  .log-filters { width:100%; }
  .log-filters .input { min-width:0; flex:1; }
  .log-head { align-items:flex-start !important; flex-direction:column; }
}
@media (max-width: 580px) {
  .ops-health-grid { grid-template-columns:1fr; }
  .ops-page-head .actions { width:100%; }
  .ops-page-head .actions .btn { flex:1; justify-content:center; }
  .status-badge { font-size:10px; }
  .ops-list-row .status-badge { display:none; }
  .golive-env { grid-template-columns:1fr; }
  .golive-env > div { border-right:none !important; border-bottom:1px solid var(--border-subtle) !important; }
  .golive-env > div:last-child { border-bottom:none !important; }
  .golive-score { align-items:flex-start; }
  .score-ring { width:70px; height:70px; }
  .instance-summary { grid-template-columns:1fr; }
  .instance-summary > div { border-right:none !important; }
}

/* Progressive create/connect flow */
.quick-create { padding:18px 20px 22px; }
.quick-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:22px; }
.quick-step { display:flex; align-items:center; gap:8px; min-width:0; padding:9px 10px; border:1px solid var(--border-card); border-radius:9px; color:var(--text-dim); background:var(--bg-input); }
.quick-step span { width:22px; height:22px; display:grid; place-items:center; flex:none; border-radius:50%; background:var(--bg-elevated); font-size:9px; font-weight:800; }
.quick-step b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10.5px; }
.quick-step.on { color:var(--text-primary); border-color:color-mix(in srgb,var(--accent) 30%,var(--border-card)); background:color-mix(in srgb,var(--accent) 6%,var(--bg-input)); }
.quick-step.on span { color:#fff; background:var(--accent-base); }
.quick-create-main { max-width:640px; }
.quick-defaults { display:grid; grid-template-columns:minmax(180px,.8fr) 1fr 1fr; gap:9px; align-items:stretch; margin-top:18px; padding-top:17px; border-top:1px solid var(--border-subtle); }
.quick-defaults > div { display:flex; flex-direction:column; justify-content:center; }
.quick-defaults > div b { font-size:12px; }
.quick-defaults > div small { margin-top:2px; color:var(--text-dim); font-size:10px; }
.quick-toggle { display:flex; align-items:flex-start; gap:8px; padding:10px; border:1px solid var(--border-card); border-radius:9px; background:var(--bg-input); cursor:pointer; }
.quick-toggle:hover { border-color:color-mix(in srgb,var(--accent) 28%,var(--border-card)); }
.quick-toggle input { margin-top:2px; accent-color:var(--accent); }
.quick-toggle span { display:flex; flex-direction:column; }
.quick-toggle b { font-size:10.5px; }
.quick-toggle small { margin-top:2px; color:var(--text-dim); font-size:9.5px; }
@media (max-width: 720px) {
  .quick-steps, .quick-defaults { grid-template-columns:1fr; }
  .quick-step:not(.on) { display:none; }
}

/* ================================================================
   Agent Platform — productized multi-agent WhatsApp experience
   ================================================================ */
.agent-runtime-strip { display:flex; align-items:center; gap:10px; margin:-3px 0 14px; padding:10px 12px; border:1px solid var(--border-card); border-radius:10px; background:var(--bg-card); }
.agent-runtime-strip > div { display:flex; flex-direction:column; min-width:0; }
.agent-runtime-strip b { font-size:10.5px; }
.agent-runtime-strip small { margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-dim); font-size:9.5px; }
.agent-runtime-strip code { padding:4px 7px; border-radius:6px; background:var(--bg-elevated); color:var(--text-secondary); font:9px var(--mono); }
.runtime-led { width:8px; height:8px; flex:none; border-radius:50%; background:var(--text-dim); box-shadow:0 0 0 4px color-mix(in srgb,var(--text-dim) 10%,transparent); }
.runtime-led.ok { background:var(--ok); box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 11%,transparent); }
.runtime-led.warn { background:var(--warn); box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 11%,transparent); }
.runtime-chip { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border:1px solid var(--border-card); border-radius:999px; color:var(--text-secondary); background:var(--bg-elevated); font:700 9px var(--mono); text-transform:uppercase; letter-spacing:.05em; }

.agent-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.agent-card { min-width:0; padding:15px; border:1px solid var(--border-card); border-radius:13px; background:var(--bg-card); color:inherit; transition:.18s ease; }
.agent-card:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--accent) 35%,var(--border-card)); box-shadow:0 12px 26px color-mix(in srgb,#000 8%,transparent); }
.agent-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.agent-orb { width:34px; height:34px; display:grid; place-items:center; flex:none; border-radius:10px; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--bg-elevated)); border:1px solid color-mix(in srgb,var(--accent) 17%,var(--border-card)); }
.agent-orb .icon { width:17px; height:17px; }
.agent-orb.lg { width:40px; height:40px; border-radius:12px; }
.agent-orb.lg .icon { width:20px; height:20px; }
.agent-card h3 { margin:0 0 2px; font-size:13.5px; }
.agent-card > p { color:var(--text-secondary); font-size:10.5px; }
.agent-objective { min-height:42px; margin:10px 0; overflow:hidden; color:var(--text-dim); font-size:10.5px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.agent-meta { display:flex; flex-wrap:wrap; gap:6px; padding:10px 0; border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.agent-meta span { display:inline-flex; align-items:center; gap:4px; padding:4px 6px; border-radius:6px; background:var(--bg-elevated); color:var(--text-dim); font-size:8.5px; }
.agent-meta .icon { width:11px; height:11px; }
.agent-card-foot { display:flex; justify-content:space-between; gap:10px; margin-top:10px; font-size:9.5px; color:var(--text-dim); }
.agent-card-foot b { color:var(--text-secondary); }
.agent-empty { display:flex; min-height:360px; flex-direction:column; align-items:center; justify-content:center; padding:40px; text-align:center; border:1px dashed var(--border-card); border-radius:14px; background:color-mix(in srgb,var(--bg-card) 90%,transparent); }
.agent-empty .e-ico { width:48px; height:48px; display:grid; place-items:center; margin-bottom:13px; border-radius:14px; background:color-mix(in srgb,var(--accent) 9%,var(--bg-elevated)); color:var(--accent); }
.agent-empty h3 { font-size:15px; }
.agent-empty p { max-width:500px; margin:5px 0 16px; color:var(--text-dim); font-size:11px; }
.agent-empty-flow { display:flex; align-items:center; gap:8px; margin-top:24px; color:var(--text-dim); font-size:9.5px; }
.agent-empty-flow span { padding:5px 8px; border:1px solid var(--border-card); border-radius:7px; background:var(--bg-card); }
.agent-empty-flow b { font-weight:400; }

.agent-create-pane { min-height:0 !important; }
.field-label { display:block; margin:18px 0 8px; color:var(--text-secondary); font-size:10px; font-weight:700; }
.template-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.template-card { display:grid; grid-template-columns:34px 1fr; grid-template-rows:auto auto; gap:2px 9px; padding:12px; text-align:left; border:1px solid var(--border-card); border-radius:10px; background:var(--bg-input); color:var(--text-primary); cursor:pointer; }
.template-card > span { grid-row:1 / span 2; width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:var(--bg-elevated); color:var(--text-secondary); }
.template-card .icon { width:16px; height:16px; }
.template-card b { font-size:10.5px; }
.template-card small { color:var(--text-dim); font-size:9px; line-height:1.35; }
.template-card:hover, .template-card.active { border-color:color-mix(in srgb,var(--accent) 42%,var(--border-card)); background:color-mix(in srgb,var(--accent) 6%,var(--bg-input)); }
.template-card.active > span { color:var(--accent); background:color-mix(in srgb,var(--accent) 11%,var(--bg-elevated)); }

/* Agent Studio */
.studio-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:12px; }
.back-link { display:inline-flex; margin-bottom:8px; color:var(--text-dim); font-size:9.5px; }
.back-link:hover { color:var(--accent); }
.studio-title-row { display:flex; align-items:center; gap:10px; }
.studio-title-row h1 { font-size:19px; letter-spacing:-.02em; }
.studio-title-row p { margin-top:2px; color:var(--text-dim); font-size:10px; }
.agent-studio { display:grid; grid-template-columns:170px minmax(420px,1fr) minmax(285px,360px); min-height:620px; overflow:hidden; border:1px solid var(--border-card); border-radius:14px; background:var(--bg-card); }
.studio-rail { padding:12px 9px; border-right:1px solid var(--border-subtle); background:var(--bg-elevated); }
.studio-rail-label { display:block; padding:4px 8px 8px; color:var(--text-dim); font-size:8px; font-weight:800; letter-spacing:.09em; }
.studio-rail > button { width:100%; display:flex; align-items:center; gap:8px; padding:8px; margin-bottom:2px; border:none; border-radius:7px; color:var(--text-secondary); background:transparent; font-size:10px; font-weight:650; cursor:pointer; }
.studio-rail > button:hover { background:var(--bg-card-hover); color:var(--text-primary); }
.studio-rail > button.active { color:var(--text-primary); background:var(--bg-card); box-shadow:inset 0 0 0 1px var(--border-card); }
.studio-rail > button .icon { width:14px; height:14px; }
.studio-rail > button em { min-width:18px; margin-left:auto; padding:2px 4px; border-radius:99px; background:var(--bg-input); color:var(--text-dim); font:700 8px var(--mono); text-align:center; }
.studio-rail-note { margin-top:16px; padding:10px; border:1px solid var(--border-subtle); border-radius:8px; background:color-mix(in srgb,var(--accent) 4%,var(--bg-card)); }
.studio-rail-note b, .studio-rail-note small { display:block; }
.studio-rail-note b { margin-bottom:3px; font-size:9px; }
.studio-rail-note small { color:var(--text-dim); font-size:8.5px; line-height:1.4; }
.studio-main { min-width:0; background:var(--bg-card); }
.studio-section { padding:20px; }
.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--border-subtle); }
.section-heading h2 { margin:3px 0; font-size:16px; }
.section-heading p { max-width:600px; color:var(--text-dim); font-size:10.5px; line-height:1.45; }
.studio-form { display:grid; gap:12px; }
.studio-form.two { grid-template-columns:1fr 1fr; }
.studio-form .full { grid-column:1 / -1; }
.textarea { min-height:88px; resize:vertical; line-height:1.45; }
.textarea.tall { min-height:132px; }
.optional { color:var(--text-dim); font-weight:500; }
.studio-save { display:flex; align-items:center; justify-content:flex-end; gap:12px; padding-top:16px; margin-top:17px; border-top:1px solid var(--border-subtle); }
.save-hint { margin-right:auto; color:var(--text-dim); font-size:9.5px; }

.studio-test { display:flex; min-width:0; flex-direction:column; border-left:1px solid var(--border-subtle); background:color-mix(in srgb,var(--bg-elevated) 64%,var(--bg-card)); }
.test-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:14px; border-bottom:1px solid var(--border-subtle); }
.test-head h3 { margin-top:3px; font-size:12px; }
.agent-test-thread { min-height:0; flex:1; padding:13px; overflow-y:auto; }
.test-placeholder { height:100%; min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:22px; color:var(--text-dim); text-align:center; }
.test-placeholder .icon { width:22px; height:22px; margin-bottom:7px; }
.test-placeholder b { margin-bottom:4px; color:var(--text-secondary); font-size:10px; }
.test-placeholder span { max-width:240px; font-size:9px; line-height:1.4; }
.test-placeholder.small { min-height:110px; }
.test-composer { padding:10px; border-top:1px solid var(--border-subtle); }
.test-composer textarea { width:100%; min-height:72px; margin-bottom:7px; padding:9px; resize:vertical; border:1px solid var(--border-card); border-radius:8px; background:var(--bg-input); color:var(--text-primary); font:10.5px inherit; outline:none; }
.test-composer textarea:focus { border-color:color-mix(in srgb,var(--accent) 48%,var(--border-card)); }
.test-composer .btn { width:100%; justify-content:center; }
.chat-bubble { max-width:90%; margin-bottom:9px; padding:8px 10px; border-radius:10px; font-size:9.5px; line-height:1.45; }
.chat-bubble.user { margin-left:auto; color:#fff; background:var(--accent-base); border-bottom-right-radius:3px; }
.chat-bubble.agent { margin-right:auto; border:1px solid var(--border-card); background:var(--bg-card); border-bottom-left-radius:3px; }
.bubble-name { display:block; margin-bottom:3px; color:var(--accent); font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.test-loading { display:flex; align-items:center; gap:6px; padding:10px; color:var(--text-dim); font-size:9px; }
.test-loading .icon { width:13px; height:13px; }
.trace-card { margin-top:14px; padding:9px; border:1px solid var(--border-card); border-radius:8px; background:var(--bg-card); }
.trace-head { display:flex; align-items:center; justify-content:space-between; color:var(--text-dim); font-size:8.5px; }
.trace-head b { color:var(--text-secondary); }
.trace-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:8px 0; }
.trace-stats span { padding:5px; border-radius:5px; background:var(--bg-elevated); color:var(--text-dim); font-size:7.5px; }
.trace-stats b { display:block; margin-top:1px; color:var(--text-secondary); font-size:8px; }
.trace-sources { display:flex; flex-direction:column; gap:5px; }
.trace-sources > div { display:flex; align-items:flex-start; gap:6px; padding-top:6px; border-top:1px solid var(--border-subtle); }
.trace-sources .icon { width:11px; height:11px; margin-top:2px; color:var(--accent); }
.trace-sources p { min-width:0; }
.trace-sources b, .trace-sources small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trace-sources b { font-size:8.5px; }
.trace-sources small, .trace-empty { margin-top:1px; color:var(--text-dim); font-size:7.5px; }

.kb-selector, .rule-list, .version-list { display:flex; flex-direction:column; gap:7px; }
.kb-select-card { display:grid; grid-template-columns:auto 34px 1fr auto; align-items:center; gap:9px; padding:10px; border:1px solid var(--border-card); border-radius:9px; background:var(--bg-input); cursor:pointer; }
.kb-select-card:hover { border-color:color-mix(in srgb,var(--accent) 28%,var(--border-card)); }
.kb-select-card input { accent-color:var(--accent); }
.kb-select-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--bg-elevated)); }
.kb-select-icon .icon { width:16px; height:16px; }
.kb-select-card b, .kb-select-card small { display:block; }
.kb-select-card b { font-size:10px; }
.kb-select-card small { margin-top:2px; color:var(--text-dim); font-size:8.5px; }
.kb-select-card em { padding:3px 6px; border-radius:99px; background:var(--ok-bg); color:var(--ok); font-size:7.5px; font-style:normal; font-weight:800; }
.rule-row { display:grid; grid-template-columns:105px 1fr 32px; gap:7px; align-items:center; }
.rule-row .input { min-width:0; }
.rule-type { font-size:9px; }
.icon-btn.danger { color:var(--danger); }
.tool-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tool-card { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:9px; padding:11px; border:1px solid var(--border-card); border-radius:9px; background:var(--bg-input); cursor:pointer; }
.tool-card.compact { padding:9px; }
.tool-card > input { position:absolute; opacity:0; pointer-events:none; }
.tool-card > span { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; background:var(--bg-elevated); color:var(--text-secondary); }
.tool-card > span .icon { width:15px; height:15px; }
.tool-card b, .tool-card small { display:block; }
.tool-card b { font-size:9.5px; }
.tool-card small { margin-top:2px; color:var(--text-dim); font-size:8.5px; line-height:1.35; }
.toggle-ui { width:28px; height:16px; position:relative; border-radius:99px; background:var(--border-card); transition:.15s; }
.toggle-ui:after { content:""; width:12px; height:12px; position:absolute; top:2px; left:2px; border-radius:50%; background:#fff; transition:.15s; box-shadow:0 1px 3px #0003; }
.tool-card input:checked ~ .toggle-ui { background:var(--accent-base); }
.tool-card input:checked ~ .toggle-ui:after { transform:translateX(12px); }
.model-profiles { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.model-card { display:flex; min-height:125px; flex-direction:column; align-items:flex-start; padding:12px; border:1px solid var(--border-card); border-radius:9px; background:var(--bg-input); cursor:pointer; }
.model-card input { position:absolute; opacity:0; }
.model-card > span { font-size:17px; }
.model-card b { margin-top:11px; font-size:10px; }
.model-card small { margin-top:3px; color:var(--text-dim); font-size:8.5px; line-height:1.4; }
.model-card.active, .model-card:has(input:checked) { border-color:color-mix(in srgb,var(--accent) 40%,var(--border-card)); background:color-mix(in srgb,var(--accent) 6%,var(--bg-input)); }
.advanced-box { margin-top:12px; border:1px solid var(--border-card); border-radius:9px; background:var(--bg-input); }
.advanced-box summary { padding:10px 12px; cursor:pointer; color:var(--text-secondary); font-size:9.5px; font-weight:700; }
.advanced-box[open] summary { border-bottom:1px solid var(--border-subtle); }
.advanced-box .studio-form { padding:12px; }
.version-row { display:flex; align-items:center; gap:9px; padding:10px; border:1px solid var(--border-card); border-radius:8px; background:var(--bg-input); }
.version-dot { width:7px; height:7px; flex:none; border-radius:50%; background:var(--accent); }
.version-row > div { min-width:0; flex:1; }
.version-row b, .version-row small { display:block; }
.version-row b { font-size:9.5px; }
.version-row small { color:var(--text-dim); font-size:8px; }

/* Knowledge */
.knowledge-explainer { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:9px; margin-bottom:14px; padding:11px; border:1px solid var(--border-card); border-radius:11px; background:var(--bg-card); }
.knowledge-explainer > div { display:grid; grid-template-columns:32px 1fr; grid-template-rows:auto auto; gap:0 8px; min-width:0; }
.knowledge-explainer > div > span { grid-row:1 / span 2; width:32px; height:32px; display:grid; place-items:center; border-radius:8px; background:var(--bg-elevated); color:var(--accent); }
.knowledge-explainer .icon { width:15px; height:15px; }
.knowledge-explainer b { font-size:9.5px; }
.knowledge-explainer small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-dim); font-size:8px; }
.knowledge-explainer > i { color:var(--text-dim); font-style:normal; }
.kb-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.kb-card { padding:15px; border:1px solid var(--border-card); border-radius:13px; background:var(--bg-card); color:inherit; transition:.18s; }
.kb-card:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--accent) 32%,var(--border-card)); }
.kb-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; }
.kb-card-head > span:first-child { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--bg-elevated)); }
.kb-card h3 { font-size:13px; }
.kb-card > p { height:32px; margin-top:3px; overflow:hidden; color:var(--text-dim); font-size:9.5px; line-height:1.45; }
.kb-stats { display:grid; grid-template-columns:repeat(3,1fr); margin:12px 0; overflow:hidden; border:1px solid var(--border-subtle); border-radius:8px; }
.kb-stats div { padding:8px; border-right:1px solid var(--border-subtle); background:var(--bg-elevated); }
.kb-stats div:last-child { border-right:none; }
.kb-stats b, .kb-stats span { display:block; }
.kb-stats b { font:800 12px var(--mono); }
.kb-stats span { margin-top:1px; color:var(--text-dim); font-size:7.5px; }
.kb-card-foot { display:flex; justify-content:space-between; gap:8px; color:var(--text-dim); font-size:8.5px; }
.kb-card-foot b { color:var(--text-secondary); }
.knowledge-health { grid-template-columns:repeat(4,minmax(0,1fr)); }
.knowledge-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,380px); gap:12px; }
.source-list { display:flex; flex-direction:column; }
.source-row { display:grid; grid-template-columns:34px minmax(0,1fr) auto 30px 30px; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--border-subtle); }
.source-row:last-child { border-bottom:none; }
.source-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; background:var(--bg-elevated); color:var(--text-secondary); }
.source-icon .icon { width:15px; height:15px; }
.source-main { min-width:0; }
.source-main b, .source-main small, .source-main em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.source-main b { font-size:9.5px; }
.source-main small { margin-top:2px; color:var(--text-dim); font-size:8px; }
.source-main em { margin-top:2px; color:var(--danger); font-size:7.5px; font-style:normal; }
.retrieval-preview { align-self:start; }
.kb-results { margin-top:10px; }
.retrieval-mode { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.retrieval-mode small { color:var(--text-dim); font-size:8px; }
.retrieval-hit { margin-bottom:7px; padding:8px; border:1px solid var(--border-card); border-radius:7px; background:var(--bg-input); }
.retrieval-hit > div { display:flex; justify-content:space-between; gap:7px; }
.retrieval-hit b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8.5px; }
.retrieval-hit > div span { flex:none; color:var(--text-dim); font:7px var(--mono); }
.retrieval-hit small { display:block; margin:2px 0 5px; color:var(--accent); font-size:7.5px; }
.retrieval-hit p { color:var(--text-dim); font-size:8px; line-height:1.4; }
.source-tabs { margin-bottom:12px; }
.source-text { min-height:220px; }
.file-drop { position:relative; display:flex; min-height:150px; flex-direction:column; align-items:center; justify-content:center; padding:20px; border:1px dashed var(--border-card); border-radius:10px; background:var(--bg-input); text-align:center; }
.file-drop > span { color:var(--accent); }
.file-drop .icon { width:22px; height:22px; }
.file-drop b { margin:6px 0 2px; font-size:10px; }
.file-drop small { color:var(--text-dim); font-size:8.5px; }
.file-drop input { position:absolute; inset:0; opacity:0; cursor:pointer; }

/* Simplified automations */
.automation-layout { display:grid; grid-template-columns:250px minmax(0,1fr); min-height:540px; overflow:hidden; border:1px solid var(--border-card); border-radius:14px; background:var(--bg-card); }
.automation-list { border-right:1px solid var(--border-subtle); background:var(--bg-elevated); }
.automation-list-head { display:flex; justify-content:space-between; padding:12px; border-bottom:1px solid var(--border-subtle); font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); }
.automation-list-head span { font:800 9px var(--mono); }
.automation-item { width:100%; display:grid; grid-template-columns:8px 1fr auto; align-items:center; gap:8px; padding:10px 11px; border:none; border-bottom:1px solid var(--border-subtle); background:transparent; color:var(--text-primary); text-align:left; cursor:pointer; }
.automation-item:hover, .automation-item.active { background:var(--bg-card); }
.automation-item.active { box-shadow:inset 2px 0 var(--accent); }
.automation-state { width:7px; height:7px; border-radius:50%; background:var(--text-dim); }
.automation-state.active { background:var(--ok); }
.automation-state.paused { background:var(--warn); }
.automation-item div { min-width:0; }
.automation-item b, .automation-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.automation-item b { font-size:9.5px; }
.automation-item small { margin-top:2px; color:var(--text-dim); font-size:8px; }
.automation-item em { color:var(--text-dim); font-size:7.5px; font-style:normal; text-transform:uppercase; }
.automation-canvas-wrap { min-width:0; padding:18px; }
.automation-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--border-subtle); }
.automation-toolbar h2 { margin:3px 0; font-size:15px; }
.automation-toolbar p { color:var(--text-dim); font-size:9.5px; }
.simple-flow { display:grid; grid-template-columns:minmax(150px,1fr) 38px minmax(180px,1.15fr) 38px minmax(165px,1fr); align-items:center; gap:4px; margin:36px auto 24px; max-width:900px; }
.simple-node { min-width:0; position:relative; padding:12px; border:1px solid var(--border-card); border-radius:10px; background:var(--bg-card); }
.simple-node.trigger { border-top:2px solid var(--ok); }
.simple-node.agent { border-top:2px solid var(--accent); }
.simple-node > .node-icon { width:32px; height:32px; display:grid; place-items:center; margin:9px 0; border-radius:8px; background:var(--bg-elevated); color:var(--text-secondary); }
.simple-node .node-icon .icon { width:15px; height:15px; }
.simple-node b, .simple-node small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.simple-node b { font-size:10px; }
.simple-node small { margin-top:2px; color:var(--text-dim); font-size:8px; }
.simple-node > em { display:inline-flex; margin-top:8px; padding:3px 5px; border-radius:99px; font-size:7px; font-style:normal; font-weight:800; text-transform:uppercase; }
.simple-node > em.ok { color:var(--ok); background:var(--ok-bg); }
.simple-node > em.warn { color:var(--warn); background:var(--warn-bg); }
.simple-arrow { text-align:center; color:var(--text-dim); font-size:17px; }
.simple-outcomes { display:flex; flex-direction:column; gap:7px; }
.simple-node.outcome { display:grid; grid-template-columns:28px 1fr; gap:8px; align-items:center; padding:9px; }
.simple-node.outcome .node-icon { width:28px; height:28px; margin:0; }
.runtime-underlay { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; max-width:920px; margin:0 auto 18px; padding:10px; border:1px dashed var(--border-card); border-radius:10px; background:var(--bg-elevated); }
.runtime-underlay > div { display:grid; grid-template-columns:25px 1fr; grid-template-rows:auto auto; gap:0 6px; min-width:0; }
.runtime-underlay > div > span { grid-row:1 / span 2; width:25px; height:25px; display:grid; place-items:center; color:var(--text-dim); }
.runtime-underlay .icon { width:12px; height:12px; }
.runtime-underlay b, .runtime-underlay small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.runtime-underlay b { font-size:8px; }
.runtime-underlay small { color:var(--text-dim); font-size:7px; }

@media (max-width: 1220px) {
  .agent-grid, .kb-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .agent-studio { grid-template-columns:160px minmax(400px,1fr); }
  .studio-test { grid-column:1 / -1; min-height:430px; border-top:1px solid var(--border-subtle); border-left:none; }
  .agent-test-thread { min-height:240px; }
  .knowledge-layout { grid-template-columns:1fr; }
}
@media (max-width: 900px) {
  .agent-studio { grid-template-columns:1fr; }
  .studio-rail { display:flex; gap:4px; overflow-x:auto; border-right:none; border-bottom:1px solid var(--border-subtle); }
  .studio-rail-label, .studio-rail-note { display:none; }
  .studio-rail > button { width:auto; flex:none; }
  .automation-layout { grid-template-columns:1fr; }
  .automation-list { display:flex; overflow-x:auto; border-right:none; border-bottom:1px solid var(--border-subtle); }
  .automation-list-head { display:none; }
  .automation-item { min-width:220px; border-right:1px solid var(--border-subtle); border-bottom:none; }
  .simple-flow { grid-template-columns:1fr; gap:8px; }
  .simple-arrow { transform:rotate(90deg); }
  .runtime-underlay { grid-template-columns:1fr 1fr; }
  .knowledge-explainer { grid-template-columns:1fr 1fr; }
  .knowledge-explainer > i { display:none; }
  .knowledge-health { grid-template-columns:1fr 1fr; }
}
@media (max-width: 680px) {
  .agent-grid, .kb-grid { grid-template-columns:1fr; }
  .template-grid, .tool-grid, .model-profiles, .studio-form.two { grid-template-columns:1fr; }
  .studio-form .full { grid-column:auto; }
  .studio-head { align-items:flex-start; flex-direction:column; }
  .studio-head .actions { width:100%; }
  .studio-head .actions .btn { flex:1; }
  .agent-empty-flow { display:none; }
  .rule-row { grid-template-columns:90px 1fr 30px; }
  .knowledge-explainer { grid-template-columns:1fr; }
  .source-row { grid-template-columns:32px minmax(0,1fr) auto; }
  .source-row > .status-badge { display:none; }
  .source-row .icon-btn { grid-row:2; }
  .runtime-underlay { grid-template-columns:1fr; }
}

/* ---------- Agent conversations / live inbox ---------- */
.conversation-layout{display:grid;grid-template-columns:minmax(290px,360px) minmax(0,1fr);gap:16px;min-height:620px}
.conversation-list,.conversation-thread{border:1px solid var(--border);background:var(--card);border-radius:18px;overflow:hidden}
.conversation-list{display:flex;flex-direction:column;align-self:start;max-height:calc(100vh - 190px);overflow-y:auto}
.conversation-item{width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:11px;align-items:start;padding:14px;border:0;border-top:1px solid var(--border);background:transparent;color:var(--text);text-align:left;cursor:pointer}
.conversation-item:hover,.conversation-item.active{background:var(--hover,rgba(128,128,128,.07))}
.conversation-item.active{box-shadow:inset 3px 0 0 var(--accent)}
.conversation-avatar{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2,#f2f4f7);font-weight:800;font-size:12px;color:var(--text-soft)}
.conversation-item>div{min-width:0}.conversation-title{display:flex;align-items:center;gap:7px;min-width:0}.conversation-title b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-item small{display:block;margin-top:3px;color:var(--text-dim);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-item p{margin:6px 0 0;color:var(--text-soft);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-item time{font-size:10px;color:var(--text-dim);white-space:nowrap}
.conversation-status{font-style:normal;font-size:9px;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--border);border-radius:999px;padding:2px 5px;color:var(--text-dim)}.conversation-status.handoff{border-color:rgba(245,158,11,.35);color:#b7791f}.conversation-status.error{border-color:rgba(239,68,68,.35);color:#dc2626}
.conversation-empty{display:flex;min-height:270px;padding:30px;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:var(--text-dim);gap:8px}.conversation-empty svg{width:28px;height:28px}.conversation-empty b{color:var(--text)}.conversation-empty p{max-width:260px;margin:0;font-size:12px;line-height:1.5}
.conversation-thread{display:flex;flex-direction:column;min-width:0}.conversation-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--border)}.conversation-head h2{margin:3px 0;font-size:19px}.conversation-head p{margin:0;color:var(--text-dim);font-size:12px}
.conversation-messages{display:flex;flex-direction:column;gap:12px;padding:22px;min-height:300px;max-height:450px;overflow-y:auto;background:linear-gradient(180deg,transparent,rgba(128,128,128,.025))}
.conversation-bubble{max-width:min(78%,720px);padding:11px 13px;border:1px solid var(--border);border-radius:15px;background:var(--card);align-self:flex-start}.conversation-bubble.assistant{align-self:flex-end;background:var(--surface-2,#f8fafc)}.conversation-bubble.system{max-width:90%;align-self:center;background:transparent;border-style:dashed}.conversation-bubble>span{display:block;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);margin-bottom:5px}.conversation-bubble p{white-space:pre-wrap;margin:0;font-size:13px;line-height:1.55}.conversation-bubble time{display:block;font-size:9px;color:var(--text-dim);margin-top:7px;text-align:right}
.conversation-trace{border-top:1px solid var(--border);padding:18px 20px}.conversation-trace h3{margin:0}.trace-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-top:14px}.trace-grid>div{border:1px solid var(--border);border-radius:11px;padding:9px;background:var(--surface-2,rgba(128,128,128,.04));min-width:0}.trace-grid small{display:block;color:var(--text-dim);font-size:9px;text-transform:uppercase;letter-spacing:.05em}.trace-grid b{display:block;margin-top:4px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trace-sources{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;align-items:center}.trace-sources>b{font-size:11px}.trace-sources>span{font-size:10px;padding:5px 7px;border:1px solid var(--border);border-radius:999px;color:var(--text-soft)}
@media(max-width:1050px){.conversation-layout{grid-template-columns:300px minmax(0,1fr)}.trace-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.conversation-layout{grid-template-columns:1fr}.conversation-list{max-height:330px}.conversation-thread{min-height:500px}.conversation-head{flex-direction:column}.conversation-bubble{max-width:90%}.trace-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Trust-first light UI + memory/permissions/human inbox ---------- */
:root[data-theme="light"]{
  --bg-main:#f7f9fc;
  --bg-sidebar:#fbfcfe;
  --bg-card:#ffffff;
  --bg-card-hover:#f5f7fb;
  --bg-input:#ffffff;
  --bg-elevated:#f8fafc;
  --border-subtle:#edf0f5;
  --border-card:#e4e8ef;
  --text-primary:#172033;
  --text-secondary:#4b5567;
  --text-muted:#6b7280;
  --text-dim:#98a2b3;
  --accent:#5368e8;
  --accent-base:#465bd6;
  --accent-hover:#3f51c7;
  --accent-glow:rgba(70,91,214,.14);
}
:root[data-theme="light"] .agent-card,
:root[data-theme="light"] .agent-studio,
:root[data-theme="light"] .kb-card,
:root[data-theme="light"] .conversation-list,
:root[data-theme="light"] .conversation-thread,
:root[data-theme="light"] .conversation-context,
:root[data-theme="light"] .automation-layout,
:root[data-theme="light"] .panel{
  box-shadow:0 8px 30px rgba(31,41,55,.045);
}
:root[data-theme="light"] .btn-primary{box-shadow:0 6px 16px rgba(70,91,214,.14)}
:root[data-theme="light"] .input:focus{box-shadow:0 0 0 3px rgba(83,104,232,.10)}

.memory-mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}
.memory-mode-card{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:start;padding:14px;border:1px solid var(--border-card);border-radius:13px;background:var(--bg-card);cursor:pointer;transition:.15s ease}
.memory-mode-card:hover{border-color:color-mix(in srgb,var(--accent) 30%,var(--border-card));background:var(--bg-card-hover)}
.memory-mode-card.active{border-color:color-mix(in srgb,var(--accent) 50%,var(--border-card));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)}
.memory-mode-card input{position:absolute;opacity:0;pointer-events:none}
.memory-mode-card>span{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--accent) 8%,var(--bg-elevated));color:var(--accent)}
.memory-mode-card>span svg{width:17px;height:17px}.memory-mode-card b,.memory-mode-card small{display:block}.memory-mode-card b{font-size:12px}.memory-mode-card small{margin-top:3px;color:var(--text-muted);font-size:10.5px;line-height:1.45}
.memory-settings{margin-top:6px}
.permission-panel{margin:14px 0;padding:14px;border:1px solid var(--border-card);border-radius:13px;background:var(--bg-elevated)}
.permission-panel .panel-head-row{margin-bottom:12px}.permission-panel h3{font-size:13px}.permission-panel .studio-form{margin-top:4px}
.endpoint-list{display:flex;flex-direction:column;gap:7px}.endpoint-row{display:grid;grid-template-columns:32px minmax(0,1fr) 30px;gap:9px;align-items:center;padding:9px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-card)}
.endpoint-row>span{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg-elevated))}.endpoint-row>span svg{width:14px;height:14px}.endpoint-row div{min-width:0}.endpoint-row b,.endpoint-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.endpoint-row b{font-size:11px}.endpoint-row small{font-size:9.5px;color:var(--text-dim)}

/* Chatwoot-inspired inbox: list / thread / operational context. */
.conversation-layout{grid-template-columns:minmax(280px,330px) minmax(430px,1fr) minmax(235px,285px);gap:12px;align-items:start}
.conversation-list,.conversation-thread,.conversation-context{border:1px solid var(--border-card);background:var(--bg-card);border-radius:14px;overflow:hidden}
.conversation-list-top{position:sticky;top:0;z-index:2;background:var(--bg-card);border-bottom:1px solid var(--border-subtle)}
.conversation-list-top .automation-list-head{border-bottom:0}
.conversation-filters{display:flex;gap:5px;overflow-x:auto;padding:0 10px 10px}
.conversation-filters button{display:inline-flex;align-items:center;gap:5px;flex:none;padding:5px 8px;border:1px solid var(--border-card);border-radius:999px;background:var(--bg-card);color:var(--text-muted);font-size:9px;font-weight:700}
.conversation-filters button.active{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,var(--border-card));background:color-mix(in srgb,var(--accent) 7%,var(--bg-card))}
.conversation-filters em{font-style:normal;color:var(--text-dim);font-size:8px}
.conversation-status.bot{border-color:color-mix(in srgb,var(--ok) 28%,var(--border-card));color:var(--ok);background:var(--ok-bg)}
.conversation-status.human{border-color:color-mix(in srgb,var(--warn) 32%,var(--border-card));color:#b7791f;background:var(--warn-bg)}
.conversation-status.snoozed{border-color:color-mix(in srgb,var(--accent) 28%,var(--border-card));color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--bg-card))}
.conversation-status.resolved{color:var(--text-muted);background:var(--bg-elevated)}
.conversation-return{color:var(--accent)!important;font-size:9px!important}
.conversation-messages{min-height:340px;max-height:calc(100vh - 410px);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 1.5%,var(--bg-card)),var(--bg-card))}
.conversation-bubble.operator{align-self:flex-end;border-color:color-mix(in srgb,var(--warn) 28%,var(--border-card));background:color-mix(in srgb,var(--warn) 7%,var(--bg-card))}
.human-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:12px 16px;border-top:1px solid var(--border-subtle);background:var(--bg-card)}
.human-composer textarea{min-height:56px;max-height:130px;resize:vertical;padding:10px 11px;border:1px solid var(--border-card);border-radius:10px;background:var(--bg-input);color:var(--text-primary);font:inherit;font-size:12px}
.human-composer>.btn{align-self:end}.human-composer>small{grid-column:1/-1;color:var(--text-dim);font-size:9.5px}
.conversation-context{position:sticky;top:76px;max-height:calc(100vh - 96px);overflow:auto}
.conversation-context section{padding:15px;border-bottom:1px solid var(--border-subtle)}.conversation-context section:last-child{border-bottom:0}.conversation-context h3{margin:3px 0 5px;font-size:14px}.conversation-context p{margin:0;color:var(--text-muted);font-size:10.5px;line-height:1.5}.context-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px}
.memory-list{display:flex;flex-direction:column;gap:7px;margin-top:10px}.memory-list>div{padding:8px;border:1px solid var(--border-subtle);border-radius:9px;background:var(--bg-elevated)}.memory-list span{display:block;margin-bottom:3px;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}.memory-list p{font-size:9.5px!important;color:var(--text-secondary)!important}

@media(max-width:1250px){.conversation-layout{grid-template-columns:300px minmax(0,1fr)}.conversation-context{grid-column:1/-1;position:static;display:grid;grid-template-columns:repeat(3,1fr);max-height:none}.conversation-context section{border-bottom:0;border-right:1px solid var(--border-subtle)}.conversation-context section:last-child{border-right:0}}
@media(max-width:850px){.memory-mode-grid{grid-template-columns:1fr}.conversation-layout{grid-template-columns:1fr}.conversation-context{grid-template-columns:1fr}.conversation-context section{border-right:0;border-bottom:1px solid var(--border-subtle)}.conversation-messages{max-height:460px}.human-composer{grid-template-columns:1fr}.human-composer>.btn{width:100%}}

/* 2026-09 Automation Studio + inbox polish */
.automation-v2{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:640px;border:1px solid var(--border-card);border-radius:16px;overflow:hidden;background:var(--bg-card)}
.automation-v2>.automation-list{border-right:1px solid var(--border-subtle);max-height:calc(100vh - 180px);overflow:auto}
.automation-workbench{min-width:0;display:flex;flex-direction:column;min-height:640px}.automation-workbench>.automation-toolbar{padding:14px 16px;border-bottom:1px solid var(--border-subtle)}
.automation-builder{display:grid;grid-template-columns:185px minmax(560px,1fr) 285px;min-height:590px;min-width:0;overflow:hidden}
.node-palette{padding:12px;border-right:1px solid var(--border-subtle);overflow:auto;background:color-mix(in srgb,var(--bg-elevated) 50%,var(--bg-card))}.node-palette>button{width:100%;display:grid;grid-template-columns:30px 1fr 18px;align-items:center;gap:8px;padding:9px;margin:0 0 6px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text-primary);text-align:left;cursor:pointer}.node-palette>button:hover{border-color:var(--border-card);background:var(--bg-card)}.node-palette>button>span{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--bg-elevated);color:var(--accent)}.node-palette b,.node-palette small{display:block}.node-palette b{font-size:10.5px}.node-palette small{font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}
.canvas-shell{min-width:0;overflow:auto;background:var(--bg-elevated)}.canvas-grid{position:relative;width:1400px;height:900px;background-image:radial-gradient(color-mix(in srgb,var(--text-dim) 18%,transparent) 1px,transparent 1px);background-size:20px 20px}.flow-canvas{position:absolute;inset:0}.flow-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.flow-edges path{fill:none;stroke:color-mix(in srgb,var(--accent) 45%,var(--border-card));stroke-width:2}.flow-edges text{font-size:9px;fill:var(--text-dim)}
.flow-node{position:absolute;left:0;top:0;width:220px;min-height:88px;display:grid;grid-template-columns:28px 36px minmax(0,1fr) 26px;align-items:center;gap:7px;padding:10px;border:1px solid var(--border-card);border-radius:12px;background:var(--bg-card);box-shadow:0 8px 28px rgba(0,0,0,.08);user-select:none}.flow-node.selected{outline:2px solid color-mix(in srgb,var(--accent) 60%,transparent);border-color:var(--accent)}.flow-node.trigger{border-left:3px solid var(--accent)}.flow-node.ai{border-left:3px solid #8b5cf6}.flow-node.logic{border-left:3px solid #f59e0b}.flow-node.action{border-left:3px solid #10b981}.flow-node.tool{border-left:3px solid #0ea5e9}.flow-node.data{border-left:3px solid #64748b}.flow-node-drag,.flow-node-menu{border:0;background:transparent;color:var(--text-dim);cursor:pointer;padding:4px}.flow-node-drag{cursor:grab}.flow-node-drag:active{cursor:grabbing}.flow-node-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--bg-elevated);color:var(--accent)}.flow-node small,.flow-node b,.flow-node p{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flow-node small{font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}.flow-node b{font-size:11px;margin-top:2px}.flow-node p{font-size:9px;color:var(--text-dim);margin:3px 0 0}
.flow-inspector{padding:14px;border-left:1px solid var(--border-subtle);overflow:auto;background:var(--bg-card);max-height:calc(100vh - 180px)}.flow-inspector-head{display:flex;gap:9px;align-items:center;padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid var(--border-subtle)}.flow-inspector-head small{font-size:8px;color:var(--text-dim);text-transform:uppercase}.flow-inspector-head h3{margin:2px 0 0;font-size:13px}.flow-inspector-actions{display:grid;gap:8px;margin-top:14px}.flow-inspector-empty{padding:20px 8px;color:var(--text-dim);font-size:11px}.flow-inspector .textarea{min-height:90px}.danger{color:var(--danger)!important}
.llm-settings-pane{min-width:min(680px,80vw)}.llm-usage-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;margin:12px 0;border:1px solid var(--border-card);border-radius:12px;background:var(--bg-elevated)}.llm-usage-card b,.llm-usage-card small{display:block}.llm-usage-card b{font-size:18px}.llm-usage-card small{margin-top:4px;color:var(--text-dim);font-size:10.5px}.managed-llm-choice{display:flex;gap:12px;align-items:flex-start;padding:18px;border:1px dashed var(--border-card);border-radius:12px}.managed-llm-choice>span{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,var(--bg-card));color:var(--accent)}.managed-llm-choice p{margin:4px 0 0;color:var(--text-dim);font-size:11px;line-height:1.5}
/* scroll ownership: cada painel rola internamente, evitando scroll duplo/quebrado */
.agent-studio{height:calc(100vh - 165px);min-height:620px}.studio-main,.studio-rail,.studio-test{min-height:0;overflow:auto}.agent-test-thread{max-height:none}.conversation-layout{height:calc(100vh - 180px);min-height:620px;overflow:hidden}.conversation-list,.conversation-thread,.conversation-context{min-height:0;max-height:100%;overflow:auto}.conversation-thread{display:flex;flex-direction:column}.conversation-messages{flex:1;min-height:220px;max-height:none}.human-composer,.conversation-trace,.conversation-head{flex:none}.modal-card,.modal{max-height:calc(100vh - 28px)}.modal-body,.modal-pane{min-height:0;overflow:auto}
@media(max-width:1250px){.automation-builder{grid-template-columns:160px minmax(520px,1fr)}.flow-inspector{grid-column:1/-1;border-left:0;border-top:1px solid var(--border-subtle);max-height:none}.automation-workbench{overflow:auto}.conversation-layout{height:auto;overflow:visible}}
@media(max-width:820px){.automation-v2{grid-template-columns:1fr}.automation-v2>.automation-list{display:flex;max-height:180px;border-right:0;border-bottom:1px solid var(--border-subtle);overflow:auto}.automation-builder{grid-template-columns:1fr}.node-palette{display:flex;overflow:auto;border-right:0;border-bottom:1px solid var(--border-subtle)}.node-palette>button{min-width:180px}.canvas-shell{height:540px}.flow-inspector{border-left:0}.agent-studio{height:auto}.conversation-layout{height:auto}}

/* ========================================================================== */
/* V3 UX patch — integrations, zero-scroll inbox and n8n-style automation UI */
/* ========================================================================== */
.field-help{display:block;margin-top:5px;color:var(--text-dim);font-size:10.5px;line-height:1.45}.required-mark{margin-left:5px;color:var(--accent);font-size:8px;font-style:normal;text-transform:uppercase;letter-spacing:.06em}.integrations-page-content{max-width:1540px}.integration-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.integration-product-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:start;gap:12px;padding:16px;border:1px solid var(--border-card);border-radius:14px;background:var(--bg-main);min-width:0}.integration-product-card.native{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,var(--bg-card)),var(--bg-main));border-color:color-mix(in srgb,var(--accent) 24%,var(--border-card))}.integration-product-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--bg-elevated);color:var(--accent)}.integration-product-icon.chatwoot{color:#1f93ff}.integration-product-icon.typebot{color:#7c3aed}.integration-product-copy{min-width:0}.integration-product-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.integration-product-title h3{font-size:14px}.integration-product-copy p{margin-top:5px;color:var(--text-secondary);font-size:11.5px;line-height:1.5}.integration-product-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.integration-product-meta span{padding:3px 6px;border:1px solid var(--border-card);border-radius:6px;color:var(--text-dim);font-size:9px}.integration-form-intro{display:flex;gap:10px;padding:11px 12px;margin-bottom:14px;border:1px solid var(--border-card);border-radius:10px;background:var(--bg-elevated)}.integration-form-intro>span{width:30px;height:30px;display:grid;place-items:center;flex:none;color:var(--accent)}.integration-form-intro b{font-size:11.5px}.integration-form-intro p{margin-top:2px;color:var(--text-dim);font-size:10.5px;line-height:1.45}.channel-options{display:grid;gap:8px;margin:10px 0 14px}.channel-options .check-line{align-items:flex-start;padding:10px 11px;border:1px solid var(--border-card);border-radius:9px}.channel-options .check-line>span{display:block}.channel-options .check-line b,.channel-options .check-line small{display:block}.channel-options .check-line b{font-size:11px}.channel-options .check-line small{margin-top:2px;color:var(--text-dim);font-size:9.5px}

/* Inbox: list header never scrolls, empty inbox never creates a fake scrollbar. */
.conversation-page-content{display:flex;flex-direction:column;max-width:none!important;height:calc(100vh - var(--topbar-h));padding-bottom:18px!important;overflow:hidden}.conversation-page-head{flex:none;margin-bottom:14px}.conversation-page-content .conversation-layout{flex:1;height:auto!important;min-height:0!important;overflow:hidden!important;align-items:stretch}.conversation-page-content .conversation-list,.conversation-page-content .conversation-thread,.conversation-page-content .conversation-context{max-height:none!important;min-height:0!important}.conversation-page-content .conversation-list{overflow:hidden!important;align-self:stretch}.conversation-list-top{position:relative!important;top:auto!important;flex:none}.conversation-list-items{flex:1;min-height:0}.conversation-list-items.has-items{overflow-y:auto;overscroll-behavior:contain}.conversation-list-items.is-empty{overflow:hidden;display:grid;place-items:center}.conversation-list-items .conversation-empty{border-bottom:0;width:100%}.conversation-page-content .conversation-thread{overflow:hidden!important}.conversation-page-content .conversation-messages{flex:1;min-height:0!important;max-height:none!important;overflow-y:auto;overscroll-behavior:contain}.conversation-page-content .conversation-trace{flex:none;max-height:210px;overflow:auto}.conversation-page-content .conversation-context{overflow-y:auto;overscroll-behavior:contain}.trace-grid .trace-wide{grid-column:1/-1}.conversation-zero{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:0;padding:34px;text-align:center;border:1px solid var(--border-card);border-radius:16px;background:var(--bg-card);overflow:hidden}.conversation-zero-icon{width:52px;height:52px;display:grid;place-items:center;margin-bottom:12px;border-radius:15px;background:color-mix(in srgb,var(--accent) 10%,var(--bg-elevated));color:var(--accent)}.conversation-zero h2{font-size:18px}.conversation-zero>p{max-width:650px;margin-top:7px;color:var(--text-secondary);font-size:12px;line-height:1.55}.conversation-zero-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;width:min(760px,100%);margin:22px 0}.conversation-zero-steps>div{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:9px;text-align:left;padding:12px;border:1px solid var(--border-card);border-radius:10px;background:var(--bg-main)}.conversation-zero-steps span{grid-row:1/3;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--bg-elevated);color:var(--accent);font-size:10px;font-weight:800}.conversation-zero-steps b{font-size:10.5px}.conversation-zero-steps small{color:var(--text-dim);font-size:9px}.conversation-filter-empty{height:100%;min-height:0!important}

/* Automation Studio V3 — the canvas owns the viewport, not the page scrollbar. */
.automation-page-content{max-width:none!important;height:calc(100vh - var(--topbar-h));padding:0!important;overflow:hidden!important}.automation-v3{height:100%;min-height:0;display:flex;flex-direction:column;background:var(--bg-main)}.automation-editor-top{height:58px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 14px;border-bottom:1px solid var(--border-subtle);background:var(--bg-card);z-index:7}.automation-editor-left,.automation-editor-actions{display:flex;align-items:center;gap:8px;min-width:0}.automation-title{min-width:0;padding-right:4px}.automation-title .eyebrow{font-size:7.5px}.automation-title h1{max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;line-height:1.25}.automation-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--bg-elevated)}.flow-viewport{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;background-color:var(--bg-elevated);background-image:radial-gradient(color-mix(in srgb,var(--text-dim) 22%,transparent) 1px,transparent 1px);background-size:20px 20px}.flow-viewport.panning{cursor:grabbing}.flow-world{position:absolute;left:0;top:0;width:1px;height:1px;transform-origin:0 0;will-change:transform}.flow-edges{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}.flow-edge-shadow,.flow-edge-line,.flow-edge-preview,.flow-edge-hit{fill:none;vector-effect:non-scaling-stroke}.flow-edge-shadow{stroke:var(--bg-card);stroke-width:6}.flow-edge-line{stroke:color-mix(in srgb,var(--text-dim) 65%,var(--border-card));stroke-width:2}.flow-edge-preview{stroke:var(--accent);stroke-width:2;stroke-dasharray:6 5}.flow-edge-hit{stroke:transparent;stroke-width:16;pointer-events:stroke;cursor:pointer}.flow-edge-hit:hover+.x{stroke:var(--accent)}
.flow-node{position:absolute!important;left:0!important;top:0!important;width:238px!important;min-height:88px!important;display:block!important;padding:0!important;border:1px solid var(--border-card)!important;border-radius:11px!important;background:var(--bg-card)!important;box-shadow:0 8px 24px rgba(0,0,0,.08)!important;user-select:none!important;cursor:grab;overflow:visible!important;will-change:transform}.flow-node:hover{border-color:color-mix(in srgb,var(--text-secondary) 48%,var(--border-card))!important;box-shadow:0 10px 28px rgba(0,0,0,.11)!important}.flow-node.dragging{cursor:grabbing;box-shadow:0 15px 34px rgba(0,0,0,.16)!important;z-index:5}.flow-node.selected{outline:2px solid color-mix(in srgb,var(--accent) 58%,transparent)!important;outline-offset:2px;border-color:var(--accent)!important}.flow-node.trigger{border-left:3px solid var(--accent)!important}.flow-node.ai{border-left:3px solid #8b5cf6!important}.flow-node.logic{border-left:3px solid #f59e0b!important}.flow-node.action{border-left:3px solid #10b981!important}.flow-node.tool{border-left:3px solid #0ea5e9!important}.flow-node.data{border-left:3px solid #64748b!important}.flow-node-main{height:86px;display:grid;grid-template-columns:38px minmax(0,1fr) 26px;align-items:center;gap:9px;padding:10px 9px 10px 11px}.flow-node-copy{min-width:0}.flow-node-copy small,.flow-node-copy b,.flow-node-copy p{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flow-node-copy small{font-size:7.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}.flow-node-copy b{margin-top:2px;font-size:11.5px}.flow-node-copy p{margin:4px 0 0;font-size:9px;color:var(--text-dim)}.flow-node .flow-node-icon{width:36px;height:36px}.flow-node-menu{border:0;background:transparent;color:var(--text-dim);cursor:pointer;padding:5px;border-radius:6px}.flow-node-menu:hover{background:var(--bg-elevated);color:var(--text-primary)}.flow-port{position:absolute;top:50%;width:14px;height:14px;padding:0;border:3px solid var(--bg-card);border-radius:50%;background:var(--text-dim);transform:translateY(-50%);z-index:4;cursor:crosshair}.flow-port.input{left:-8px}.flow-port.output{right:-8px}.flow-node:hover .flow-port,.flow-node.selected .flow-port{background:var(--accent)}.flow-port:hover{width:17px;height:17px;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)}
.canvas-ui{position:absolute;z-index:6}.node-library-toggle{left:14px;top:14px}.canvas-hint{left:50%;bottom:14px;transform:translateX(-50%);padding:6px 9px;border:1px solid var(--border-card);border-radius:8px;background:color-mix(in srgb,var(--bg-card) 92%,transparent);box-shadow:0 5px 18px rgba(0,0,0,.06);color:var(--text-dim);font-size:9px;pointer-events:none;white-space:nowrap}.canvas-controls{left:14px;bottom:14px;display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--border-card);border-radius:10px;background:var(--bg-card);box-shadow:0 8px 24px rgba(0,0,0,.08)}.canvas-controls .icon-btn{width:30px;height:30px;border:0;background:transparent}.canvas-zoom-label{min-width:48px;border:0;background:transparent;color:var(--text-secondary);font-size:10px;font-weight:700;cursor:pointer}
.node-library,.workflow-drawer,.automation-stage .flow-inspector{top:14px;bottom:14px;border:1px solid var(--border-card);border-radius:13px;background:var(--bg-card);box-shadow:0 22px 50px rgba(0,0,0,.16);opacity:0;pointer-events:none;transform:translateY(6px) scale(.985);transition:opacity .14s ease,transform .14s ease;overflow:hidden}.node-library.open,.workflow-drawer.open,.automation-stage .flow-inspector.open{opacity:1;pointer-events:auto;transform:none}.node-library{left:14px;width:350px;display:flex;flex-direction:column}.workflow-drawer{left:14px;width:335px;display:flex;flex-direction:column;padding:11px}.automation-stage .flow-inspector{right:14px;width:390px;max-height:none!important;padding:0!important;border-left:1px solid var(--border-card)!important;overflow-y:auto!important}.node-library-head,.workflow-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;border-bottom:1px solid var(--border-subtle)}.node-library-head b,.workflow-drawer-head b{display:block;font-size:12px}.node-library-head small,.workflow-drawer-head small{display:block;margin-top:1px;color:var(--text-dim);font-size:9px}.node-search{display:flex;align-items:center;gap:7px;margin:10px 11px 6px;padding:7px 9px;border:1px solid var(--border-card);border-radius:8px;background:var(--bg-input);color:var(--text-dim)}.node-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text-primary);font-size:11px}.node-library-list{flex:1;min-height:0;overflow-y:auto;padding:5px 9px 11px}.node-library-list section>span{display:block;padding:9px 5px 5px;font-size:8px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim)}.node-library-list button{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) 18px;align-items:center;gap:8px;padding:8px 7px;margin-bottom:3px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--text-primary);text-align:left}.node-library-list button:hover{border-color:var(--border-card);background:var(--bg-elevated)}.node-library-list button>div{min-width:0}.node-library-list button b,.node-library-list button small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-library-list button b{font-size:10.5px}.node-library-list button small{margin-top:1px;color:var(--text-dim);font-size:8.5px}.node-library-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:var(--bg-elevated);color:var(--accent);font-style:normal}.node-library-icon.ai{color:#8b5cf6}.node-library-icon.logic{color:#f59e0b}.node-library-icon.action{color:#10b981}.node-library-icon.tool{color:#0ea5e9}.node-library-icon.data{color:#64748b}.workflow-drawer-list{flex:1;min-height:0;overflow-y:auto;margin:5px -3px 10px}.workflow-drawer .automation-item{border-radius:9px;margin-bottom:3px}.workflow-drawer>.btn{flex:none}
.automation-stage .flow-inspector-head{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:36px minmax(0,1fr) 34px;gap:9px;align-items:center;margin:0!important;padding:12px 13px!important;border-bottom:1px solid var(--border-subtle)!important;background:var(--bg-card)}.automation-stage .flow-inspector-head .inspector-close{width:30px;height:30px}.automation-stage .flow-inspector>.field,.automation-stage .node-field-stack,.automation-stage .node-explainer,.automation-stage .node-connections,.automation-stage .flow-inspector>.btn-block,.automation-stage .flow-inspector-actions{margin-left:13px;margin-right:13px}.node-explainer{margin-top:13px;padding:11px;border:1px solid var(--border-card);border-radius:9px;background:var(--bg-elevated)}.node-explainer>b{display:block;font-size:10px}.node-explainer>p{margin-top:4px;color:var(--text-secondary);font-size:10px;line-height:1.5}.node-help-detail{display:flex;align-items:flex-start;gap:7px;margin-top:9px;padding-top:9px;border-top:1px solid var(--border-subtle);color:var(--text-dim);font-size:9.5px;line-height:1.45}.node-help-detail svg{margin-top:1px;flex:none}.automation-stage .flow-inspector>.field{margin-top:12px}.node-field-stack{display:grid;gap:11px;margin-top:11px}.node-field-stack>.field{margin:0}.node-toggle-row{display:grid;grid-template-columns:18px minmax(0,1fr) 34px;align-items:flex-start;gap:8px;padding:10px;border:1px solid var(--border-card);border-radius:9px;background:var(--bg-elevated);cursor:pointer}.node-toggle-row>input{margin-top:2px}.node-toggle-row b{display:block;font-size:10.5px}.node-toggle-row .field-help{margin-top:2px}.node-no-fields{padding:12px;border:1px dashed var(--border-card);border-radius:9px;color:var(--text-dim);font-size:10px}.node-connections{margin-top:14px;padding-top:12px;border-top:1px solid var(--border-subtle)}.node-connections-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.node-connections-head b{font-size:10px}.node-connections-head span{font-size:9px;color:var(--text-dim)}.node-connections>p{color:var(--text-dim);font-size:9.5px;line-height:1.45}.node-connection-row{display:grid;grid-template-columns:48px minmax(0,1fr) 28px;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid var(--border-subtle)}.node-connection-row>span{font-size:8px;text-transform:uppercase;color:var(--text-dim)}.node-connection-row>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9.5px}.node-connection-row .icon-btn{width:26px;height:26px}.automation-stage .flow-inspector-actions{display:grid;gap:7px;margin-top:14px;margin-bottom:14px;padding-top:12px;border-top:1px solid var(--border-subtle)}.automation-empty-page{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center;background:var(--bg-main)}.automation-empty-page .e-ico{width:52px;height:52px;display:grid;place-items:center;margin-bottom:12px;border-radius:15px;background:var(--bg-card);border:1px solid var(--border-card);color:var(--accent)}.automation-empty-page h1{font-size:22px}.automation-empty-page p{max-width:650px;margin:7px 0 18px;color:var(--text-secondary);font-size:12px;line-height:1.55}.automation-empty-page>small{margin-top:8px;color:var(--text-dim);font-size:10px}

@media(max-width:1180px){.integration-catalog{grid-template-columns:1fr}.automation-stage .flow-inspector{width:350px}.canvas-hint{display:none}.conversation-page-content{height:auto;min-height:calc(100vh - var(--topbar-h));overflow:visible}.conversation-page-content .conversation-layout{height:auto!important;min-height:640px!important;overflow:visible!important}.conversation-page-content .conversation-list,.conversation-page-content .conversation-thread,.conversation-page-content .conversation-context{max-height:640px!important}.conversation-page-content .conversation-context{max-height:none!important}}
@media(max-width:820px){.automation-page-content{height:auto;min-height:calc(100vh - var(--topbar-h));overflow:visible!important}.automation-v3{min-height:720px}.automation-editor-top{height:auto;align-items:flex-start;flex-direction:column}.automation-editor-actions{width:100%;overflow-x:auto;padding-bottom:2px}.automation-stage{min-height:640px}.node-library,.workflow-drawer,.automation-stage .flow-inspector{left:8px;right:8px;width:auto;top:8px;bottom:8px}.node-library-toggle{left:8px;top:8px}.canvas-controls{left:8px;bottom:8px}.conversation-zero-steps{grid-template-columns:1fr}.conversation-page-content{display:block}.conversation-page-content .conversation-layout{display:grid;grid-template-columns:1fr}.conversation-page-content .conversation-list{max-height:360px!important}.conversation-page-content .conversation-thread{min-height:620px;max-height:none!important}.conversation-page-content .conversation-context{max-height:none!important}.integration-product-card{grid-template-columns:40px minmax(0,1fr)}.integration-product-card>.btn{grid-column:2;justify-self:start}}
.flow-edge-label{font:700 9px var(--mono);fill:var(--text-dim);paint-order:stroke;stroke:var(--bg-elevated);stroke-width:5px;stroke-linejoin:round;pointer-events:none}.node-connection-row.with-label{grid-template-columns:45px minmax(0,1fr) 82px 28px}.edge-label-select{min-width:0;width:82px;padding:4px 5px;border:1px solid var(--border-card);border-radius:6px;background:var(--bg-input);color:var(--text-secondary);font:700 8.5px var(--mono)}
.node-output-guide{margin:11px 13px 0;padding:10px 11px;border:1px solid var(--border-card);border-radius:9px;background:var(--bg-main)}.node-output-guide>b{display:block;margin-bottom:7px;font-size:10px}.node-output-guide>div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;align-items:start;padding:6px 0;border-top:1px solid var(--border-subtle)}.node-output-guide>div:first-of-type{border-top:0;padding-top:0}.node-output-guide code{display:inline-flex;justify-content:center;padding:3px 5px;border-radius:5px;background:var(--bg-elevated);color:var(--accent);font:700 8.5px var(--mono)}.node-output-guide span{color:var(--text-dim);font-size:9px;line-height:1.4}