/* Call conversation flow: shared surfaces, clear routing and editable goals. */
.ai-agent-editor #elStudioWorkflowCanvas { position:relative; min-height:440px; max-height:calc(100dvh - 310px); border-radius:20px; }
.call-flow-view { --call-flow-scale:1; display:flex; justify-content:center; min-width:max-content; padding:32px; box-sizing:content-box; }
.call-flow-sizer { position:relative; flex:none; width:calc(720px * var(--call-flow-scale)); height:calc(840px * var(--call-flow-scale)); }
.call-flow-stage { position:absolute; inset:0 auto auto 0; width:720px; height:840px; transform:scale(var(--call-flow-scale)); transform-origin:0 0; color:var(--dt-text); }
.call-flow-lines { position:absolute; inset:0; width:100%; height:100%; color:var(--dt-muted); pointer-events:none; opacity:.65; }
.call-flow-terminal { position:absolute; left:50%; transform:translateX(-50%); height:36px; padding:0 16px; display:flex; align-items:center; gap:8px; border-radius:999px; background:var(--dt-surface); color:var(--dt-muted); font-size:12px; font-weight:500; white-space:nowrap; }
.call-flow-terminal.start { top:20px; }
.call-flow-terminal.end { top:786px; }
.call-flow-step { position:absolute; box-sizing:border-box; width:260px; min-width:0; padding:16px 18px; border:0; border-radius:18px; background:var(--dt-surface); text-align:left; transition:background .15s; }
.call-flow-step.root { top:96px; left:230px; height:122px; }
.call-flow-step.left { top:432px; left:60px; height:138px; }
.call-flow-step.right { top:432px; left:400px; height:138px; }
.call-flow-step.closing { top:628px; left:230px; height:122px; }
.call-flow-step[data-wf-node]:hover,.call-flow-condition[data-wf-node]:hover { background:var(--dt-hover); }
.call-flow-step-type { display:flex; align-items:center; gap:7px; color:var(--dt-muted); font-size:10px; line-height:16px; margin-bottom:7px; }
.call-flow-step-type > i:first-child { font-size:14px; }
.call-flow-step-type .call-flow-edit { margin-left:auto; opacity:0; font-size:12px; }
.call-flow-step:is(:hover,:focus-visible) .call-flow-edit { opacity:1; }
.call-flow-step-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:600; line-height:20px; margin-bottom:5px; }
.call-flow-step-desc { color:var(--dt-muted); font-size:11px; line-height:17px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; overflow-wrap:anywhere; }
.call-flow-step.root .call-flow-step-desc,.call-flow-step.closing .call-flow-step-desc { -webkit-line-clamp:2; }
.call-flow-port { position:absolute; left:50%; width:7px; height:7px; transform:translate(-50%,-50%); border-radius:50%; background:var(--dt-muted); }
.call-flow-port.input { top:0; }
.call-flow-port.output { top:100%; }
.call-flow-router { position:absolute; top:260px; left:50%; transform:translateX(-50%); height:40px; display:flex; align-items:center; gap:8px; padding:0 14px; border-radius:12px; background:var(--dt-surface); font-size:11px; color:var(--dt-muted); }
.call-flow-router i { font-size:17px; }
.call-flow-condition { position:absolute; top:342px; display:flex; align-items:center; gap:9px; width:260px; height:56px; padding:10px 12px; box-sizing:border-box; background:var(--dt-surface); border-radius:14px; color:var(--dt-text); font-size:11px; line-height:16px; }
.call-flow-condition.left { left:60px; }
.call-flow-condition.right { left:400px; }
.call-flow-if { flex:none; font-size:10px; font-weight:600; color:var(--dt-muted); }
.call-flow-condition-text { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
.call-flow-condition > i { margin-left:auto; font-size:12px; color:var(--dt-muted); }
.call-flow-controls { display:flex; align-items:center; gap:4px; margin-left:auto; }
.call-flow-controls button { display:flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 8px; background:var(--dt-surface-2); color:var(--dt-text); border:0; border-radius:9px; font-size:12px; cursor:pointer; }
.call-flow-controls button:hover { background:var(--dt-hover); }
.call-flow-controls output { min-width:40px; text-align:center; font-size:11px; color:var(--dt-muted); }
.call-flow-controls button:focus-visible { outline:2px solid var(--dt-border-strong); outline-offset:2px; }
.ai-agent-editor .el-wf-studio-toolbar { flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }
.ai-agent-editor #elWfActiveTemplateName { display:none; }
.ai-agent-editor .el-wf-studio-toolbar > div { flex-wrap:nowrap; }
.ai-agent-editor .el-wf-badge { padding:0; font-size:13px; background:transparent; white-space:nowrap; }
.ai-agent-editor .el-wf-studio-toolbar .el-studio-btn-ghost { height:32px; font-size:11px; padding:0 10px; border:0; background:var(--dt-surface-2); }
.ai-agent-editor .el-wf-studio-toolbar button[onclick*=personality] { width:32px; padding:0; justify-content:center; }
.ai-agent-editor .el-wf-studio-toolbar button[onclick*=personality] span { display:none; }
.ai-agent-editor .call-flow-controls { margin-left:4px; }
.ai-agent-editor .call-flow-controls output { min-width:32px; }
@container agentpanel (max-width:520px) { .ai-agent-editor .el-wf-studio-toolbar { flex-wrap:wrap; } .ai-agent-editor .el-wf-studio-toolbar > div:last-child { width:100%; } .ai-agent-editor .call-flow-controls { margin-left:auto; } }
#elStudioTplModalCanvas .call-flow-view { --call-flow-scale:.7; }
@media(forced-colors:active) { .call-flow-controls button:focus-visible { outline-color:Highlight; } .call-flow-lines { opacity:1; } }