.botmode-section{position:relative;min-height:92vh;padding:clamp(4rem,8vw,7rem) clamp(1rem,6vw,6rem);border-top:1px solid rgba(255,39,56,.22);border-bottom:1px solid rgba(40,239,255,.16);background:linear-gradient(180deg,rgba(3,4,6,.72),rgba(3,4,6,.93));overflow:hidden}.botmode-head{position:relative;z-index:4;max-width:900px}.botmode-stage{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:1.25rem;margin-top:2rem;min-height:620px}.botmode-canvas-shell{position:relative;min-height:620px;border:1px solid rgba(255,39,56,.42);background:radial-gradient(circle at 50% 45%,rgba(40,239,255,.09),transparent 34%),rgba(3,5,8,.58);clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);overflow:hidden;box-shadow:0 28px 90px rgba(0,0,0,.58),inset 0 0 45px rgba(255,39,56,.04)}#botmode3d{position:absolute;inset:0;width:100%;height:100%;display:block}.botmode-canvas-hud{position:absolute;left:1rem;right:1rem;top:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;pointer-events:none;font:800 .68rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em}.botmode-canvas-hud span{padding:.55rem .7rem;border:1px solid rgba(40,239,255,.28);background:rgba(3,6,10,.72);backdrop-filter:blur(12px)}.botmode-canvas-hud .bot-live{color:#28efff}.botmode-canvas-hud .bot-scope{color:#ff6572}.botmode-panel{display:flex;flex-direction:column;gap:1rem}.botmode-card{border:1px solid rgba(255,39,56,.3);background:linear-gradient(145deg,rgba(9,12,18,.95),rgba(3,5,8,.84));padding:1rem;box-shadow:0 22px 70px rgba(0,0,0,.45);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}.botmode-card h3{margin:0 0 .75rem;color:#f7fbff;font-size:.86rem;letter-spacing:.1em}.botmode-state{display:grid;grid-template-columns:1fr auto;gap:.55rem .8rem;font:700 .68rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}.botmode-state span{color:#82909c}.botmode-state strong{text-align:right;color:#28efff}.botmode-state .warn{color:#ff7a18}.bot-agents{display:grid;gap:.55rem}.bot-agent{display:grid;grid-template-columns:auto 1fr auto;gap:.65rem;align-items:center;padding:.65rem;border:1px solid rgba(40,239,255,.12);background:rgba(2,5,8,.55);cursor:pointer;transition:160ms ease}.bot-agent:hover,.bot-agent.active{border-color:var(--agent-color,#28efff);box-shadow:0 0 22px color-mix(in srgb,var(--agent-color,#28efff) 22%,transparent);transform:translateX(3px)}.bot-agent-dot{width:.62rem;height:.62rem;border-radius:50%;background:var(--agent-color,#28efff);box-shadow:0 0 14px var(--agent-color,#28efff)}.bot-agent b{font-size:.72rem;letter-spacing:.06em}.bot-agent small{color:#8b98a5;font:600 .62rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}.bot-workflow{display:grid;grid-template-columns:repeat(7,minmax(72px,1fr));gap:.4rem}.bot-step{padding:.68rem .4rem;text-align:center;border:1px solid rgba(255,39,56,.22);background:rgba(3,5,8,.62);color:#8997a3;font:800 .6rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}.bot-step.active{color:#041014;border-color:#28efff;background:#28efff;box-shadow:0 0 20px rgba(40,239,255,.28)}.botmode-actions{display:flex;gap:.6rem;flex-wrap:wrap}.botmode-button{border:1px solid rgba(255,39,56,.42);background:rgba(4,7,11,.86);color:#f7fbff;padding:.68rem .85rem;font:900 .66rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;cursor:pointer}.botmode-button:hover{border-color:#28efff;color:#28efff}.botmode-button.primary{background:#28efff;color:#031015;border-color:#28efff}.botmode-button[disabled]{opacity:.45;cursor:not-allowed}.botmode-json{max-height:180px;overflow:auto;margin:0;padding:.8rem;background:#020407;border:1px solid rgba(40,239,255,.15);color:#93f7ff;font:600 .62rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}.botmode-note{color:#93a0ac;font-size:.76rem;line-height:1.55}.botmode-note strong{color:#ff6572}@media(max-width:980px){.botmode-stage{grid-template-columns:1fr}.botmode-canvas-shell{min-height:520px}.bot-workflow{grid-template-columns:repeat(4,1fr)}}@media(max-width:620px){.botmode-section{padding-left:1rem;padding-right:1rem}.botmode-canvas-shell{min-height:430px}.botmode-canvas-hud{font-size:.56rem}.bot-workflow{grid-template-columns:repeat(2,1fr)}}
