/* ============ Voice Tree — core AI Operator showcase ============ */
.vt{margin-top:40px}

/* controls */
.vt-controls{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:26px}
.vt-hint{font-size:13px; color:var(--ink-3)}

/* incoming call */
.vt-incoming-wrap{display:flex; justify-content:center}
.vt-incoming{display:flex; align-items:center; gap:13px; padding:15px 22px; border-radius:16px; background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-line); box-shadow:var(--sh-2), var(--glass-inset); min-width:min(440px,92%); transition:.3s}
.vt-incoming.glow{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent), var(--sh-2); border-color:var(--accent-line)}
.vt-incoming.risk.glow{box-shadow:0 0 0 3px color-mix(in srgb,var(--risk) 16%,transparent), var(--sh-2); border-color:#f0d2cd}
.vt-pip{width:11px;height:11px;border-radius:50%; background:var(--success); flex-shrink:0; box-shadow:0 0 0 0 color-mix(in srgb,var(--success) 55%,transparent); animation:pip 1.7s infinite}
.vt-inc-tx{flex:1; min-width:0}
.vt-inc-k{font-size:11.5px; color:var(--ink-3); font-weight:600}
.vt-inc-route{color:var(--accent-700); font-family:var(--mono); font-size:10.5px}
.vt-inc-q{font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--ink); margin-top:4px; line-height:1.35; text-wrap:pretty}
.vt-inc-tag{font-family:var(--mono); font-size:11px; color:var(--ink-4); white-space:nowrap; align-self:flex-start}

/* fan label */
.vt-fan{position:relative; height:46px; display:flex; align-items:center; justify-content:center; opacity:.35; transition:.4s}
.vt-fan.on{opacity:1}
.vt-fan::before{content:""; position:absolute; top:0; left:50%; width:2px; height:22px; background:var(--accent-line); transform:translateX(-50%)}
.vt-fan-lbl{position:relative; z-index:1; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-700); background:var(--accent-soft); border:1px solid var(--accent-line); padding:5px 12px; border-radius:100px}

/* columns */
.vt-cols{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; position:relative; padding-top:16px}
.vt-cols::before{content:""; position:absolute; top:0; left:10%; right:10%; height:2px; background:var(--accent-line); border-radius:2px}
@media(max-width:880px){ .vt-cols{grid-template-columns:1fr; gap:18px} .vt-cols::before{display:none} }
.vt-col{display:flex; flex-direction:column; align-items:stretch; position:relative; cursor:pointer; transition:opacity .4s, filter .4s}
.vt-col.dim{opacity:.38; filter:saturate(.55)}
.vt-col.dim:hover{opacity:.62}
.vt-col.active{opacity:1}
.vt-col::before{content:""; position:absolute; top:-16px; left:50%; width:2px; height:16px; background:var(--border-2); transform:translateX(-50%); transition:.3s}
.vt-col.active::before{background:var(--accent)}
@media(max-width:880px){ .vt-col::before{display:none} }

/* nodes */
.vt-node{background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-line); border-radius:14px; padding:13px 15px; box-shadow:var(--sh-1), var(--glass-inset); opacity:0; transform:translateY(10px); transition:opacity .45s, transform .45s, box-shadow .3s}
.vt-node.on{opacity:1; transform:none}

.vt-node.head{}
.vt-dot-row{display:flex; align-items:center; gap:8px}
.vt-dot{width:9px;height:9px;border-radius:50%; flex-shrink:0; background:var(--ink-4)}
.vt-node.accent .vt-dot{background:var(--accent)} .vt-node.risk .vt-dot{background:var(--risk)} .vt-node.ok .vt-dot{background:var(--success)}
.vt-head-l{font-size:14.5px; font-weight:700; letter-spacing:-.01em}
.vt-intent{display:block; margin-top:7px; font-family:var(--mono); font-size:10px; color:var(--ink-3); word-break:break-word}
.vt-node.head.accent{border-color:var(--accent-line); background:color-mix(in srgb,var(--accent) 5%,var(--glass))}
.vt-node.head.risk{border-color:#f0d2cd; background:color-mix(in srgb,var(--risk) 5%,var(--glass))}
.vt-node.head.ok{border-color:var(--success-line); background:color-mix(in srgb,var(--success) 5%,var(--glass))}

/* reply node */
.vt-node.reply{position:relative; padding:13px 15px; background:rgba(255,255,255,.6); min-height:84px}
.vt-node-lab{font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px}
.vt-reply-tx{font-size:12.5px; line-height:1.45; color:var(--ink); font-weight:500}
.vt-q{font-family:Georgia,serif; font-size:22px; color:var(--accent); opacity:.35; margin-right:3px; line-height:0; vertical-align:-4px}

/* mid (AI decision) node */
.vt-node.mid{background:color-mix(in srgb,var(--accent) 7%, var(--glass)); border-color:var(--accent-line)}
.vt-node.mid.ok{background:color-mix(in srgb,var(--success) 7%, var(--glass)); border-color:var(--success-line)}
.vt-node.mid.risk{background:color-mix(in srgb,var(--risk) 7%, var(--glass)); border-color:#f0d2cd}
.vt-mid-t{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-700)}
.vt-node.mid.ok .vt-mid-t{color:var(--success)} .vt-node.mid.risk .vt-mid-t{color:var(--risk)}
.vt-mid-s{font-size:12px; line-height:1.4; color:var(--ink-2); margin-top:5px}

/* arrows */
.vt-arrow{height:22px; position:relative; opacity:0; transition:opacity .4s}
.vt-arrow.on{opacity:1}
.vt-arrow::before{content:""; position:absolute; left:50%; top:3px; width:2px; height:11px; background:var(--border-strong); transform:translateX(-50%)}
.vt-arrow::after{content:""; position:absolute; left:50%; top:11px; width:7px; height:7px; border-right:2px solid var(--border-strong); border-bottom:2px solid var(--border-strong); transform:translate(-50%,-2px) rotate(45deg)}

/* outcome node */
.vt-node.out{padding:14px 15px}
.vt-node.out.accent{background:var(--accent-soft); border-color:var(--accent-line)}
.vt-node.out.risk{background:var(--risk-soft); border-color:#f0d2cd}
.vt-node.out.ok{background:var(--success-soft); border-color:var(--success-line)}
.vt-badge{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:4px 9px; border-radius:100px; color:#fff; margin-bottom:9px}
.vt-node.out.accent .vt-badge{background:var(--accent)} .vt-node.out.risk .vt-badge{background:var(--risk)} .vt-node.out.ok .vt-badge{background:var(--success)}
.vt-ot{font-size:13px; font-weight:700; letter-spacing:-.01em; line-height:1.2}
.vt-node.out.accent .vt-ot{color:var(--accent-700)} .vt-node.out.risk .vt-ot{color:var(--risk)} .vt-node.out.ok .vt-ot{color:var(--success)}
.vt-os{font-size:11.5px; color:var(--ink-2); margin-top:4px; line-height:1.35}
.vt-metric{display:flex; align-items:baseline; gap:7px; margin-top:11px; padding-top:11px; border-top:1px solid rgba(20,27,41,.08)}
.vt-metric .v{font-size:20px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.vt-node.out.accent .v{color:var(--accent-700)} .vt-node.out.risk .v{color:var(--risk)} .vt-node.out.ok .v{color:var(--success)}
.vt-metric .l{font-size:10.5px; color:var(--ink-3); line-height:1.25}

/* cockpit button as outcome */
.vt-cockpit-btn{margin-top:11px; width:100%; padding:10px; border-radius:10px; border:0; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:700; letter-spacing:-.01em; background:var(--accent); color:#fff; transition:.16s; box-shadow:0 1px 2px rgba(20,27,41,.12)}
.vt-cockpit-btn:hover{background:var(--accent-700); transform:translateY(-1px)}
.vt-node.out.ok .vt-cockpit-btn{background:var(--success)}
.vt-node.out.ok .vt-cockpit-btn:hover{background:color-mix(in srgb,var(--success) 82%,#000)}

/* inline reduced cockpit — payoff */
.vt-cockpit-zone{max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.2,.7,.2,1)}
.vt-cockpit-zone.open{max-height:900px}
.vt-cockpit-inner{margin-top:30px; animation:vtFade .45s ease}
@keyframes vtFade{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.vt-cockpit-cap{display:flex; align-items:center; gap:14px; margin-bottom:8px}
.vt-cockpit-cap .ln{flex:1; height:1px; background:var(--accent-line)}
.vt-cockpit-cap .t{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-700); white-space:nowrap; text-align:center}
.vt-cockpit-scale{zoom:.66}
@supports not (zoom:1){ .vt-cockpit-scale{transform:scale(.66); transform-origin:top center} }
.vt-cockpit-scale .keyphrase{display:none}

/* deep-dive divider (kept) */
.vr-deep{margin-top:46px}
.vr-deep-h{display:flex; align-items:center; gap:13px; margin-bottom:8px}
.vr-deep-h .t{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap}
.vr-deep-h .ln{flex:1; height:1px; background:var(--border)}