/* Máquina VPS ao vivo + animações globais + agentes animados */
:root{--m-ok:#0a7d33;--m-warn:#a35200;--m-err:#c50f1f;--m-s1:#0062d1;--m-s2:#7c3aed;--m-s3:#0a7d33;--m-s4:#d97706;--m-card:var(--surface);--m-line:var(--line)}
html[data-theme="pro-dark"]{--m-ok:#3ecf6e;--m-warn:#f5a524;--m-err:#ff6166;--m-s1:#52a8ff;--m-s2:#a78bfa;--m-s3:#3ecf6e;--m-s4:#f5a524}
.nav-count.is-live{background:transparent;color:var(--m-ok);border:1px solid currentColor;font-size:9px;letter-spacing:.06em;animation:m-pulse 2s ease-in-out infinite}
.machine-content{display:flex;flex-direction:column;gap:16px}
.m-card{background:var(--m-card);border:1px solid var(--m-line);border-radius:10px;padding:16px 18px;animation:m-rise .45s cubic-bezier(.2,.7,.2,1) both}
.m-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.m-sub{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.m-grid-rings{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.m-grid-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.m-grid-rings>.m-card:nth-child(2),.m-grid-charts>.m-card:nth-child(2){animation-delay:.06s}
.m-grid-rings>.m-card:nth-child(3),.m-grid-charts>.m-card:nth-child(3){animation-delay:.12s}
.m-grid-rings>.m-card:nth-child(4),.m-grid-charts>.m-card:nth-child(4){animation-delay:.18s}
.m-ring{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.m-ring-box{position:relative;width:108px;height:108px;margin-bottom:6px}
.m-ring-svg{width:108px;height:108px;transform:rotate(-90deg)}
.m-ring-track{fill:none;stroke:var(--m-line);stroke-width:9}
.m-ring-arc{fill:none;stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1)}
.m-ring.is-ok .m-ring-arc{stroke:var(--m-ok)}.m-ring.is-warn .m-ring-arc{stroke:var(--m-warn)}.m-ring.is-err .m-ring-arc{stroke:var(--m-err)}
.m-ring.is-err .m-ring-box{animation:m-pulse 1.6s ease-in-out infinite}
.m-ring-value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.m-alert{border:1px solid color-mix(in srgb,var(--m-err) 35%,transparent);background:color-mix(in srgb,var(--m-err) 7%,var(--surface));color:var(--ink);border-radius:10px;padding:12px 16px;font-size:13px;animation:m-rise .4s both}
.m-alert strong{color:var(--m-err)}
.m-chart-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.m-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums}
.m-leg{display:inline-flex;align-items:center;gap:6px}.m-leg i{width:9px;height:9px;border-radius:2px;background:currentColor}
.m-chart-svg{width:100%;height:160px;display:block;overflow:visible}
.m-grid{stroke:var(--m-line);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.m-line{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:1000;stroke-dashoffset:1000;animation:m-draw 1.1s cubic-bezier(.3,.6,.2,1) forwards}
.m-area{opacity:.12;animation:m-fade .9s ease both}
.m-dot{animation:m-blink 1.6s ease-in-out infinite}
.s1{color:var(--m-s1);stroke:var(--m-s1);fill:var(--m-s1)}.s2{color:var(--m-s2);stroke:var(--m-s2);fill:var(--m-s2)}.s3{color:var(--m-s3);stroke:var(--m-s3);fill:var(--m-s3)}.s4{color:var(--m-s4);stroke:var(--m-s4);fill:var(--m-s4)}
.m-line.s1,.m-line.s2,.m-line.s3,.m-line.s4{fill:none}
.m-bar-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.m-bar-row{display:grid;grid-template-columns:minmax(110px,38%) 1fr 74px;align-items:center;gap:10px;font-size:12px}
.m-bar-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-family:var(--mono);font-size:11px}
.m-bar-val{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.m-bar-track{height:8px;background:var(--m-line);border-radius:99px;overflow:hidden}
.m-bar-fill{height:100%;width:0;border-radius:99px;background:var(--m-s1);transition:width .9s cubic-bezier(.2,.7,.2,1)}
.m-bar-fill.s2{background:var(--m-s2)}.m-bar-fill.s3{background:var(--m-s3)}.m-bar-fill.is-ok{background:var(--m-ok)}.m-bar-fill.is-warn{background:var(--m-warn)}.m-bar-fill.is-err{background:var(--m-err)}
.m-facts dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:10px 0 0;font-size:13px}.m-facts dt{color:var(--muted)}.m-facts dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
/* Agentes */
.agent-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:12px}
.agent{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:14px 8px 10px;border-radius:10px;border:1px solid var(--m-line);background:color-mix(in srgb,var(--canvas) 60%,var(--surface))}
.agent-svg{width:64px;height:64px;overflow:visible}
.agent-head,.agent-torso{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.agent-eye{fill:var(--ink)}.agent-antenna{stroke:var(--ink);stroke-width:2}.agent-arm{fill:var(--ink)}.agent-desk{fill:var(--muted);opacity:.4}
.agent-led{fill:var(--muted)}
.agent-name{font-size:13px;color:var(--ink)}.agent-role{font-size:11px;color:var(--muted);min-height:2.6em}
.agent-bubble{position:absolute;top:6px;right:8px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:99px;border:1px solid currentColor;color:var(--muted)}
.agent.is-work .agent-bubble{color:var(--m-ok)}.agent.is-warn .agent-bubble{color:var(--m-err)}
.agent.is-work .agent-body{animation:agent-bob 1.2s ease-in-out infinite;transform-origin:32px 52px}
.agent.is-work .agent-arm-l{animation:agent-type .32s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:right center}
.agent.is-work .agent-arm-r{animation:agent-type .32s ease-in-out .16s infinite alternate;transform-box:fill-box;transform-origin:left center}
.agent.is-work .agent-led{fill:var(--m-ok);animation:m-blink .9s steps(2) infinite}
.agent.is-warn .agent-led{fill:var(--m-err);animation:m-blink .6s steps(2) infinite}
.agent.is-warn .agent-body{animation:agent-shake 2.4s ease-in-out infinite;transform-origin:32px 52px}
.agent.is-idle .agent-eye{animation:agent-blink 4s infinite;transform-box:fill-box;transform-origin:center}
.agent.is-idle .agent-body{animation:agent-breathe 3.2s ease-in-out infinite;transform-origin:32px 52px}
/* Indicador global: Codex trabalhando */
.turn-indicator::before{content:"";width:18px;height:18px;flex-shrink:0;border-radius:5px;border:2px solid currentColor;background:radial-gradient(circle at 35% 45%,currentColor 1.6px,transparent 2px),radial-gradient(circle at 65% 45%,currentColor 1.6px,transparent 2px);animation:agent-bob 1s ease-in-out infinite}
html.codex-working .brand-mark{animation:m-pulse 1.4s ease-in-out infinite}
/* Animações gerais do painel */
.content-view:not([hidden]),.chat-view:not([hidden]){animation:m-view .32s cubic-bezier(.2,.7,.2,1)}
.kpi-card,.op-card,.quick-welcome-card,.service-section{animation:m-rise .45s cubic-bezier(.2,.7,.2,1) both;transition:transform .18s ease,box-shadow .18s ease}
.kpi-card:hover,.op-card:hover,.quick-welcome-card:hover{transform:translateY(-2px)}
.kpi-grid>:nth-child(2),.cards-grid>:nth-child(2){animation-delay:.04s}.kpi-grid>:nth-child(3),.cards-grid>:nth-child(3){animation-delay:.08s}.kpi-grid>:nth-child(4),.cards-grid>:nth-child(4){animation-delay:.12s}.kpi-grid>:nth-child(5),.cards-grid>:nth-child(5){animation-delay:.16s}.cards-grid>:nth-child(n+6){animation-delay:.2s}
.nav-button{transition:background .15s,color .15s,transform .15s}.nav-button:active{transform:scale(.98)}
.button,.mini-action{transition:background .15s,border-color .15s,transform .12s}.button:active,.mini-action:active{transform:scale(.97)}
.toast:not([hidden]){animation:m-toast .3s cubic-bezier(.2,.7,.2,1)}
@keyframes m-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes m-view{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes m-fade{from{opacity:0}}
@keyframes m-draw{to{stroke-dashoffset:0}}
@keyframes m-pulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes m-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes m-toast{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes agent-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes agent-type{from{transform:translateY(0)}to{transform:translateY(3px)}}
@keyframes agent-shake{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-4deg)}96%{transform:rotate(4deg)}}
@keyframes agent-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes agent-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@media(max-width:600px){.m-grid-charts{grid-template-columns:1fr}.m-bar-row{grid-template-columns:minmax(80px,40%) 1fr 64px}.m-ring-box,.m-ring-svg{width:92px;height:92px}}
@media(prefers-reduced-motion:reduce){.m-line{stroke-dashoffset:0;animation:none}.agent *{animation:none!important}}