.bot-stage { --bot-green:#53f78e; position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; overflow:hidden; background:#020604; color:#edfff2; font-family:Inter,system-ui,sans-serif; color-scheme:dark; touch-action:manipulation; }
.bot-stage::backdrop { background:transparent; }
.bot-stage [hidden],.bot-loading[hidden] { display:none!important; }
.bot-viewport,.bot-viewport canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.bot-toolbar { position:absolute; z-index:2; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 32px; pointer-events:none; }
.bot-wordmark { font:500 12px/1.4 Consolas,monospace; letter-spacing:.16em; color:#a7cbb4; display:flex; align-items:center; gap:12px; }
.bot-wordmark i { width:4px; height:4px; background:var(--bot-green); border-radius:50%; }
.bot-wordmark small { font-size:10px; letter-spacing:.08em; }
.bot-toolbar>div { display:flex; gap:10px; pointer-events:auto; }
.bot-stage button { font:500 12px/1.25 Inter,system-ui,sans-serif; color:#d1eddb; border:1px solid #335040; background:#09170ee6; padding:11px 15px; border-radius:999px; cursor:pointer; min-height:42px; transition:background .2s,color .2s,border-color .2s; }
.bot-stage button:hover { color:#fff; border-color:#72cd93; background:#103221; }
.bot-stage button:focus-visible,.bot-loading button:focus-visible { outline:2px solid #92ffb7; outline-offset:4px; }
.bot-stage button[aria-pressed=true] { color:#b9ffd0; border-color:#59ad77; background:#164729; }
.bot-stage button:disabled { opacity:.5; cursor:default; }
.bot-stage kbd { font:10px Consolas,monospace; margin-left:10px; opacity:.6; }
.bot-stage .bot-exit { position:absolute; z-index:3; left:24px; bottom:max(20px,env(safe-area-inset-bottom)); display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 10px; border:1px solid transparent; border-radius:4px; background:transparent; color:#92ad9c; font:11px/1.4 Consolas,"Liberation Mono",Menlo,monospace; }
.bot-stage .bot-exit:hover { background:#09170ed9; border-color:#335040; color:#d6f4e0; }
.bot-stage .bot-exit kbd { display:inline-block; margin:0; padding:2px 5px; border:1px solid #395242; border-radius:3px; opacity:1; color:#c1dfcc; font-size:10px; }
.bot-phase { position:absolute; z-index:2; left:0; right:0; bottom:76px; text-align:center; color:#acbfb1; font:10px/1.5 Consolas,monospace; text-transform:uppercase; letter-spacing:.18em; pointer-events:none; }
.bot-conversation { position:absolute; z-index:2; left:50%; bottom:clamp(24px,5vh,58px); transform:translateX(-50%); width:min(520px,calc(100% - 40px)); text-align:center; }
.bot-eyebrow { margin:0 0 10px; color:#88b898; font:9px/1.5 Consolas,monospace; letter-spacing:.18em; }
.bot-conversation h2 { min-height:1.3em; font-family:Consolas,"Liberation Mono",Menlo,monospace; font-size:clamp(20px,2.1vw,28px); font-weight:400; line-height:1.3; letter-spacing:.01em; margin:0 0 15px; color:var(--bot-green); text-shadow:0 0 16px #53f78e24; white-space:nowrap; }
.bot-conversation [data-bot-headline-code] { color:#b0ffca; font:inherit; letter-spacing:inherit; }
.bot-message { position:relative; display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid #304e3a; border-radius:13px; text-align:left; background:#08140cf2; }
.bot-message>span { font:20px Consolas,monospace; color:#68c889; }
.bot-message label { position:absolute; top:11px; left:43px; color:#b8d7c3; font-size:11px; }
.bot-message input { width:100%; min-width:0; padding:18px 0 0; font:11px/1.4 Inter,system-ui,sans-serif; border:0; background:transparent; color:#799983; opacity:1; }
.bot-message input::placeholder { color:#799983; opacity:1; }
.bot-message button { flex:none; width:34px; min-height:34px; padding:6px; font-size:19px; }
.bot-connection { max-width:410px; margin:10px auto 0; font-size:10px; line-height:1.6; color:#809a88; }
.bot-cursor { position:absolute; z-index:5; inset:0; overflow:hidden; pointer-events:none!important; user-select:none; }
.bot-cursor * { pointer-events:none!important; }
.bot-cursor-core { position:absolute; left:0; top:0; box-sizing:border-box; width:13px; height:13px; margin:-6.5px 0 0 -6.5px; border:1px solid #78c492bb; border-radius:2px; }
.bot-cursor-core i { position:absolute; left:50%; top:50%; width:2px; height:2px; transform:translate(-50%,-50%); background:#d1ffe0; }
.bot-cursor-core b { position:absolute; left:15px; top:8px; color:#8bd8a2; font:400 8px/1 Consolas,"Liberation Mono",Menlo,monospace; letter-spacing:.05em; opacity:.7; }
.bot-cursor[data-hit=true] .bot-cursor-core { border-color:#a1f2bd; box-shadow:0 0 7px #7be79d20; }
.bot-cursor[data-control=true] .bot-cursor-core { border-color:#c8ffdc; border-radius:4px; }
.bot-cursor-trail { position:absolute; left:0; top:0; color:#6ebc87; opacity:0; font:8px/1 Consolas,"Liberation Mono",Menlo,monospace; }
.bot-stage[data-cursor-visible=true],.bot-stage[data-cursor-visible=true] * { cursor:none!important; }
.bot-loading { position:fixed; z-index:2147483646; bottom:max(24px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); box-sizing:border-box; width:min(610px,calc(100vw - 32px)); padding:16px 16px 15px 19px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px; background:#040c08fa; color:#c1f6d1; border:1px solid #356747; border-left:2px solid #63d28b; border-radius:6px; box-shadow:0 12px 60px #0007,inset 0 1px #92ffb708; font:12px/1.5 Consolas,"Liberation Mono",Menlo,monospace; text-align:left; letter-spacing:0; color-scheme:dark; }
.bot-loading-terminal { position:relative; min-width:0; overflow:hidden; }
.bot-loading-heading { display:flex; align-items:center; gap:8px; min-height:14px; margin-bottom:8px; color:#91bb9f; font-size:9px; line-height:1.5; letter-spacing:.13em; white-space:nowrap; }
.bot-loading-indicator { flex:none; width:4px; height:4px; background:#71e697; box-shadow:0 0 7px #71e69724; }
.bot-loading-binary { display:flex; gap:7px; margin-left:auto; overflow:hidden; max-width:150px; color:#578466; font-size:8px; letter-spacing:.08em; user-select:none; }
.bot-loading-binary i { display:block; font-style:normal; animation:bot-loading-fragment 6.4s linear infinite; }
.bot-loading-binary i:nth-child(2) { animation-delay:-2.2s; color:#76b08a; }
.bot-loading-binary i:nth-child(3) { animation-delay:-4.1s; }
.bot-loading-signal { position:relative; display:flex; align-items:flex-start; gap:8px; min-height:3.1em; padding-right:7px; font-size:13px; line-height:1.55; }
.bot-loading-prompt { flex:none; color:#58d47f; }
.bot-loading-message { min-width:0; color:#c6f9d5; }
.bot-loading-cursor { flex:none; width:5px; height:13px; margin-top:3px; margin-left:-3px; background:#78df9b; opacity:.65; animation:bot-loading-cursor 1.4s steps(1,end) infinite; }
.bot-loading-echo { position:absolute; top:0; left:16px; right:7px; color:#78dfa0; opacity:0; pointer-events:none; clip-path:inset(34% 0 51% 0); animation:bot-loading-echo 5.8s linear infinite; }
.bot-loading-log { display:block; min-height:15px; margin-top:5px; color:#7fac8c; font-size:9px; line-height:1.5; }
.bot-loading-scan { position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,#67ce8938 24%,#67ce8917 75%,transparent); opacity:0; pointer-events:none; animation:bot-loading-scan 7.2s linear infinite; }
.bot-loading button,.bot-stage .bot-loading button { align-self:center; min-width:80px; min-height:44px; margin:0; border:1px solid #497d5b; border-radius:4px; padding:10px 13px; background:#102719; color:#d1f7dc; font:12px/1.3 Consolas,"Liberation Mono",Menlo,monospace; cursor:pointer; transition:background .15s,border-color .15s; }
.bot-loading button:hover,.bot-stage .bot-loading button:hover { background:#183b25; border-color:#81c596; color:#edfff2; }
.bot-loading[data-motion=false] .bot-loading-binary i,.bot-loading[data-motion=false] .bot-loading-cursor,.bot-loading[data-motion=false] .bot-loading-echo,.bot-loading[data-motion=false] .bot-loading-scan { animation:none; }
.bot-loading[data-motion=false] .bot-loading-cursor { opacity:.65; }
.bot-loading[data-motion=false] .bot-loading-echo,.bot-loading[data-motion=false] .bot-loading-scan { opacity:0; transform:none; }
.bot-loading[data-step=error] { border-left-color:#9abc9f; }
.bot-loading[data-step=error] .bot-loading-binary,.bot-loading[data-step=error] .bot-loading-cursor,.bot-loading[data-step=error] .bot-loading-log { visibility:hidden; }
@keyframes bot-loading-cursor { 0%,46%,100% { opacity:.7; } 47%,82% { opacity:.2; } }
@keyframes bot-loading-fragment { 0%,84%,89%,100% { transform:translateX(0); opacity:.8; } 85% { transform:translateX(2px); opacity:.55; } 86.5% { transform:translateX(-1px); opacity:.72; } 88% { transform:translateX(1px); opacity:.65; } }
@keyframes bot-loading-echo { 0%,90%,96%,100% { opacity:0; transform:translateX(0); } 91% { opacity:.22; transform:translateX(1.5px); } 93% { opacity:.1; transform:translateX(-1px); } 95% { opacity:.17; transform:translateX(.5px); } }
@keyframes bot-loading-scan { 0%,87%,96%,100% { opacity:0; transform:translateY(0); } 88% { opacity:.6; transform:translateY(15px); } 94% { opacity:.35; transform:translateY(70px); } }
@media(max-width:1000px) { .bot-conversation { bottom:max(80px,calc(env(safe-area-inset-bottom) + 68px)); } .bot-stage .bot-exit { left:14px; bottom:max(14px,env(safe-area-inset-bottom)); } }
@media(max-width:760px) { .bot-toolbar { padding:16px; align-items:flex-start; } .bot-wordmark small { display:none; } .bot-toolbar>div { gap:6px; } .bot-toolbar button { font-size:10px; padding:10px 12px; } .bot-eyebrow { font-size:8px; } .bot-conversation h2 { margin-bottom:10px; } .bot-connection { font-size:9px; } .bot-loading { gap:12px; padding:13px 12px; bottom:max(16px,env(safe-area-inset-bottom)); } .bot-loading-binary { max-width:42px; } .bot-loading-signal { font-size:12px; } .bot-loading-log { font-size:8px; } .bot-loading button,.bot-stage .bot-loading button { min-width:72px; padding-inline:10px; } }
@media(max-height:600px) and (min-width:600px) { .bot-conversation { left:auto; right:20px; transform:none; width:min(340px,44vw); bottom:72px; } .bot-conversation h2 { font-size:clamp(20px,2.4vw,28px); } }
@media(max-height:650px) and (max-width:599px) { .bot-conversation { bottom:max(72px,calc(env(safe-area-inset-bottom) + 60px)); } .bot-conversation h2 { font-size:22px; margin-bottom:8px; } .bot-connection { margin-top:7px; } }
@media(prefers-reduced-motion:reduce) { .bot-stage button,.bot-loading button { transition:none; } .bot-loading-terminal * { animation:none!important; } .bot-loading-echo,.bot-loading-scan { opacity:0!important; } .bot-cursor { display:none!important; } .bot-stage[data-cursor-visible=true],.bot-stage[data-cursor-visible=true] * { cursor:revert!important; } }
@media(forced-colors:active) { .bot-loading { background:Canvas; color:CanvasText; border-color:ButtonText; box-shadow:none; } .bot-loading-message,.bot-loading-heading,.bot-loading-log { color:CanvasText; } .bot-loading button,.bot-stage .bot-loading button { background:ButtonFace; color:ButtonText; border-color:ButtonText; } .bot-loading-binary,.bot-loading-echo,.bot-loading-scan,.bot-cursor { display:none!important; } .bot-stage[data-cursor-visible=true],.bot-stage[data-cursor-visible=true] * { cursor:revert!important; } }