/* Your agents page. Same Izem tokens from brain.css; no new palette. */
.agents-page .nav-heading{margin:28px 12px 10px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.agent-main{padding:0 28px 32px;min-width:0}
.agent-note h1,.agent-head h1{font:normal clamp(30px,3vw,42px)/1.1 var(--display);letter-spacing:-1px;margin:0 0 8px}
.agent-note p{color:var(--muted)}
.agent-note a{color:var(--peach)}
.agent-error{color:var(--peach);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.agent-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:8px 0 22px;border-bottom:1px solid var(--line)}
.agent-facts{margin:0;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.agent-head .sound-button{color:var(--lilac)}
.agent-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;margin-top:24px;align-items:start}
.agent-chat{height:min(68dvh,720px)}
.agent-chat h2,.agent-work h2{font:normal 15px/1.3 var(--display);margin:0;color:var(--pearl)}
.agent-chat .msg{max-width:84%;display:flex;flex-direction:column;gap:4px}
.agent-chat .msg p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.6}
.agent-chat .msg.me{align-self:flex-end;background:rgba(133,233,227,.07);border:1px solid var(--line);border-radius:16px 16px 4px 16px;padding:10px 14px}
.agent-chat .msg.them{align-self:flex-start}
.agent-chat .msg time{font-size:10px;color:var(--muted)}
.agent-composer{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--line);align-items:flex-end}
.agent-composer textarea{flex:1;min-width:0;resize:none;background:transparent;border:1px solid var(--line);border-radius:14px;color:var(--pearl);padding:10px 12px;font:14px/1.5 var(--body)}
.agent-composer button:disabled{opacity:.5}
.agent-work{border:1px solid var(--line);border-radius:24px;padding:22px}
.agent-work-note{color:var(--muted);font-size:12px;margin:10px 0 0}
.agent-work-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.agent-work-list li{border-top:1px solid var(--line);padding-top:12px}
.agent-work-title{margin:0;font-size:13px;color:var(--pearl);overflow-wrap:anywhere}
.agent-work-meta{margin:4px 0 0;font-size:11px;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:860px){
 .agent-main{padding:0 12px 24px}
 .agent-grid{grid-template-columns:1fr}
 .agent-chat{height:62dvh}
 .agents-page .nav-heading{margin:20px 2px 8px;text-align:center;font-size:9px;letter-spacing:.08em}
}
/* Chat and Flow tabs */
.agent-tabs{display:flex;gap:8px;margin-top:20px}
.agent-tabs button{border:1px solid var(--line);background:transparent;color:var(--lilac);border-radius:20px;padding:8px 16px;font-size:12px}
.agent-tabs button[aria-selected="true"]{color:var(--peach);background:rgba(133,233,227,.07)}
/* Flow: a node canvas. Lines fan from the agent to every stage; colour is the stage's real state. */
.agent-flow{margin-top:20px;border:1px solid var(--line);border-radius:24px;padding:22px 24px 18px;background:linear-gradient(145deg,rgba(185,204,255,.04),rgba(185,204,255,.01))}
.flow-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.flow-head h2{font:normal 20px/1.2 var(--display);margin:0;color:var(--pearl)}
.flow-summary{margin:0;color:var(--muted);font-size:12px;flex:1}
.flow-next{display:grid;grid-template-columns:auto minmax(150px,auto) 1fr;align-items:center;gap:10px 16px;margin-top:18px;padding:14px 16px;border:1px solid rgba(133,233,227,.28);border-radius:14px;background:rgba(133,233,227,.045)}
.flow-next[data-mode="next"]{border-color:rgba(185,204,255,.34);background:rgba(185,204,255,.045)}
.flow-next[data-mode="attention"]{border-color:rgba(255,146,146,.46);background:rgba(255,146,146,.045)}
.flow-next[data-mode="attention"] .flow-next-kicker{color:rgb(255,146,146)}
.flow-next-kicker{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--peach)}
.flow-next strong{font:normal 17px/1.25 var(--display);color:var(--pearl)}
.flow-next>span:last-child{font-size:12px;line-height:1.6;color:var(--muted)}
.flow-canvas{position:relative;display:grid;grid-template-columns:minmax(120px,22%) 1fr;align-items:center;margin-top:18px;min-height:320px}
.flow-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.flow-line{fill:none;stroke-width:1.6;opacity:.85}
.flow-line.live{stroke:var(--peach);filter:drop-shadow(0 0 4px rgba(133,233,227,.55))}
.flow-line.broken{stroke:rgb(255,146,146);filter:drop-shadow(0 0 4px rgba(255,146,146,.45))}
.flow-line.not_connected{stroke:var(--lilac);stroke-dasharray:4 6;opacity:.45}
.flow-line.not_live{stroke:var(--muted);stroke-dasharray:2 7;opacity:.35}
.flow-source{display:flex;flex-direction:column;align-items:center;gap:8px;justify-self:start;z-index:1}
.flow-orb{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;border:1px solid var(--line);color:var(--peach);font:normal 26px/1 var(--display);background:radial-gradient(circle at 35% 30%,rgba(133,233,227,.28),rgba(21,30,53,.9) 70%);box-shadow:0 0 28px rgba(133,233,227,.25)}
.flow-orb-name{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lilac)}
.flow-stages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;z-index:1}
.flow-stage{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--plum)}
.flow-stage[data-state="live"]{border-color:rgba(133,233,227,.35)}
.flow-stage[data-state="broken"]{border-color:rgba(255,146,146,.45)}
.flow-stage[data-state="not_connected"],.flow-stage[data-state="not_live"]{opacity:.78}
.flow-stage[data-next="true"]{opacity:1;box-shadow:0 0 0 1px rgba(185,204,255,.16),0 12px 32px rgba(4,9,21,.25)}
.flow-stage[data-next="true"] .flow-step{color:var(--peach)}
.flow-step{font-size:11px;color:var(--muted);letter-spacing:.08em}
.flow-body p{margin:0}
.flow-label{font-size:14px;color:var(--pearl)}
.flow-detail{font-size:11px;color:var(--muted)}
.flow-note{font-size:11px;color:var(--lilac);margin-top:3px!important}
.flow-handoff{font-size:10px;color:var(--peach);margin-top:7px!important;letter-spacing:.02em}
.flow-value{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:92px}
.flow-value strong{font:normal 22px/1 var(--display);color:var(--pearl)}
.flow-stage[data-state="live"] .flow-value strong{color:var(--peach)}
.flow-stage[data-state="broken"] .flow-value strong{color:rgb(255,146,146)}
.flow-stage[data-state="not_connected"] .flow-value strong,.flow-stage[data-state="not_live"] .flow-value strong{font-size:12px;color:var(--muted)}
.flow-value span{font-size:10px;color:var(--muted);letter-spacing:.06em}
.flow-return{grid-column:2;display:flex;align-items:center;gap:12px;margin:14px 0 0;padding:12px 14px;border-top:1px solid var(--line);color:var(--muted);z-index:1}
.flow-return-mark{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(133,233,227,.35);border-radius:50%;color:var(--peach);font-size:18px;flex-shrink:0}
.flow-return strong{display:block;font-size:12px;color:var(--pearl);font-weight:500}
.flow-return p{margin:3px 0 0;font-size:11px;line-height:1.6}
.flow-legend{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:16px 0 0;font-size:11px;color:var(--muted)}
.flow-legend .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.dot.live{background:var(--peach)}.dot.broken{background:rgb(255,146,146)}.dot.not_connected{border:1px dashed var(--lilac)}.dot.not_live{border:1px dotted var(--muted)}
@media(max-width:860px){
 .agent-flow{padding:16px 12px}
 .flow-next{grid-template-columns:1fr;gap:5px;padding:14px}
 .flow-next strong{font-size:18px}
 .flow-next>span:last-child{font-size:16px;line-height:1.55}
 .flow-canvas{grid-template-columns:1fr;min-height:0}
 .flow-lines{display:none}
 .flow-source{flex-direction:row;margin-bottom:12px}
 .flow-orb{width:40px;height:40px;font-size:18px}
 .flow-stage{grid-template-columns:26px 1fr;}
 .flow-label{font-size:16px}
 .flow-detail,.flow-note{font-size:16px;line-height:1.55}
 .flow-handoff{font-size:14px}
 .flow-value{grid-column:2;align-items:flex-start;text-align:left}
 .flow-return{grid-column:1;margin-top:12px;padding:14px 4px}
 .flow-return p{font-size:15px}
}
/* The flow keeps going: moving light on live lines. Still for reduced motion. */
.flow-pulse{fill:none;stroke:var(--pearl);stroke-width:1.2;stroke-dasharray:3 22;opacity:.7;animation:flow-run 1.4s linear infinite}
.flow-dot{fill:var(--peach);filter:drop-shadow(0 0 5px rgba(133,233,227,.9))}
.flow-orb{animation:flow-breathe 3.2s ease-in-out infinite}
@keyframes flow-run{to{stroke-dashoffset:-50}}
@keyframes flow-breathe{50%{box-shadow:0 0 42px rgba(133,233,227,.42)}}
@media(prefers-reduced-motion:reduce){.flow-pulse,.flow-orb{animation:none}}
.flow-stage[data-alert="open"]{border-color:rgba(255,146,146,.6);box-shadow:0 0 0 1px rgba(255,146,146,.25),0 0 18px rgba(255,146,146,.12)}
.flow-alert{font-size:11px;color:rgb(255,146,146);margin-top:4px!important}
/* Automation node: one step hung off its stage on a dashed connector. Dashed while off, solid and lit once it is on. */
.flow-auto{position:relative;margin:10px 0 2px 14px;padding:9px 12px 10px;border:1px dashed rgba(185,204,255,.4);border-radius:12px;background:rgba(185,204,255,.03)}
.flow-auto::before{content:"";position:absolute;left:-14px;top:-10px;width:13px;height:24px;border-left:1px dashed rgba(185,204,255,.4);border-bottom:1px dashed rgba(185,204,255,.4);border-radius:0 0 0 9px}
.flow-auto[data-on="true"]{border-style:solid;border-color:rgba(133,233,227,.4);background:rgba(133,233,227,.04);box-shadow:0 0 14px rgba(133,233,227,.08)}
.flow-auto[data-on="true"]::before{border-style:solid;border-color:rgba(133,233,227,.4)}
.flow-auto-label{font-size:12px;color:var(--pearl)}
.flow-auto-does{font-size:11px;color:var(--muted);margin-top:2px!important}
.flow-auto-status{font-size:11px;color:var(--lilac);margin-top:4px!important}
.flow-auto[data-on="true"] .flow-auto-status{color:var(--peach)}
.flow-auto-toggle{margin-top:8px;font-size:11px;padding:4px 12px;border:1px solid var(--line);border-radius:14px;background:transparent;color:var(--lilac);cursor:pointer}
.flow-auto-toggle:disabled{opacity:.5}