// Mobile bedside view — Neural Wire, compressed to a phone
const M_BG='#0b0b0c', M_BG2='#111112', M_PANEL='#141311', M_LINE='#1e1d1a', M_INK='#e6d8b8', M_DIM='#6f6a5f', M_CYAN='#4fd1c5', M_MAG='#d46aa6', M_AMBER='#e8b44a', M_GREEN='#7fd67f', M_RED='#ff5548';
const mSans='"JetBrains Mono", ui-monospace, monospace', mMono='"JetBrains Mono", ui-monospace, monospace', mDisplay='"JetBrains Mono", ui-monospace, monospace';

function NeuralMobile() {
  return (
    <div style={{width:'100%', height:'100%', background:M_BG, color:M_INK, fontFamily:mSans, overflow:'auto', display:'flex', flexDirection:'column'}}>
      <style>{`@keyframes mpulse{0%,100%{opacity:1}50%{opacity:.4}}`}</style>
      {/* status bar */}
      <div style={{padding:'14px 20px 6px', display:'flex', justifyContent:'space-between', fontFamily:mMono, fontSize:11, color:M_INK}}>
        <span>9:41</span><span>●●●●○ 5G 87%</span>
      </div>
      {/* header */}
      <div style={{padding:'10px 20px 16px', borderBottom:`1px solid ${M_LINE}`}}>
        <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:8}}>
          <div style={{width:28, height:28, borderRadius:8, background:M_AMBER, display:'grid', placeItems:'center', fontFamily:mDisplay, fontSize:16, color:M_BG}}>A</div>
          <div>
            <div style={{fontFamily:mDisplay, fontSize:14, letterSpacing:'0.28em'}}>ARCA</div>
            <div style={{fontFamily:mMono, fontSize:9, color:M_DIM}}>14:07 · $12.41 today</div>
          </div>
          <div style={{marginLeft:'auto', width:32, height:32, borderRadius:8, border:`1px solid ${M_LINE}`, display:'grid', placeItems:'center', color:M_DIM}}>⚙</div>
        </div>
        <div style={{fontFamily:mSans, fontSize:18, lineHeight:1.3, color:M_INK}}>
          <span style={{color:M_AMBER}}>Thinking</span> · running code review on <span style={{color:M_CYAN}}>deck-calc/joist.py</span>
        </div>
      </div>

      {/* live turn mini */}
      <div style={{padding:16}}>
        <div style={{fontFamily:mMono, fontSize:9, color:M_DIM, letterSpacing:'0.2em', marginBottom:8}}>LIVE TURN · +4.21s</div>
        <div style={{background:M_PANEL, border:`1px solid ${M_LINE}`, borderRadius:10, padding:14}}>
          {[
            {k:'tool',   c:M_CYAN,  l:'Read joist.py',          s:'412 lines · 38ms'},
            {k:'tool',   c:M_CYAN,  l:'Bash pytest',            s:'14 passed · 1.8s'},
            {k:'think',  c:M_AMBER, l:'Verify §7.3 formula',    s:'planning'},
            {k:'spawn',  c:M_MAG,   l:'↳ structural-eng',       s:'pid 29118'},
            {k:'recv',   c:M_GREEN, l:'formula matches',        s:'streaming now', active:true},
          ].map((s,i)=>(
            <div key={i} style={{display:'grid', gridTemplateColumns:'10px 1fr auto', gap:10, padding:'6px 0', borderBottom: i<4?`1px solid ${M_LINE}`:'none', alignItems:'center'}}>
              <span style={{width:8, height:8, borderRadius:'50%', background:s.c, boxShadow:`0 0 6px ${s.c}`, animation:s.active?'mpulse 1.2s infinite':'none'}}/>
              <div>
                <div style={{fontFamily:mSans, fontSize:13, color:M_INK}}>{s.l}</div>
                <div style={{fontFamily:mMono, fontSize:10, color:M_DIM}}>{s.s}</div>
              </div>
              <span style={{fontFamily:mMono, fontSize:9, color:s.c, letterSpacing:'0.1em'}}>{s.k.toUpperCase()}</span>
            </div>
          ))}
        </div>
      </div>

      {/* fleet */}
      <div style={{padding:'0 16px 16px'}}>
        <div style={{display:'flex', justifyContent:'space-between', marginBottom:8}}>
          <div style={{fontFamily:mMono, fontSize:9, color:M_DIM, letterSpacing:'0.2em'}}>FLEET · 7 AGENTS</div>
          <div style={{fontFamily:mMono, fontSize:9, color:M_CYAN}}>+ SPAWN</div>
        </div>
        <div style={{display:'grid', gap:6}}>
          {ARCA_AGENTS.slice(0,5).map(a=>(
            <div key={a.id} style={{display:'grid', gridTemplateColumns:'auto 1fr auto', gap:10, padding:'10px 12px', background:M_PANEL, border:`1px solid ${M_LINE}`, borderRadius:10, alignItems:'center'}}>
              <span style={{width:10, height:10, borderRadius:'50%', background:AGENT_STATE_COLOR[a.state], boxShadow:`0 0 6px ${AGENT_STATE_COLOR[a.state]}`, animation:['thinking','streaming','tool-call'].includes(a.state)?'mpulse 1.4s infinite':'none'}}/>
              <div>
                <div style={{fontFamily:mMono, fontSize:12.5, color:a.role==='orchestrator'?M_CYAN:M_INK}}>{a.role==='orchestrator'?'▸ ':''}{a.name}</div>
                <div style={{fontFamily:mMono, fontSize:10, color:M_DIM}}>{a.state} · {a.model}</div>
              </div>
              <div style={{fontFamily:mMono, fontSize:10.5, color:M_AMBER}}>${a.spend.toFixed(2)}</div>
            </div>
          ))}
        </div>
      </div>

      {/* quick actions */}
      <div style={{padding:'0 16px 16px'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8}}>
          <button style={{padding:'14px', background:M_AMBER, color:M_BG, border:'none', borderRadius:10, fontFamily:mMono, fontSize:11, letterSpacing:'0.18em', fontWeight:600}}>▶ SPAWN</button>
          <button style={{padding:'14px', background:'transparent', color:M_RED, border:`1px solid ${M_RED}`, borderRadius:10, fontFamily:mMono, fontSize:11, letterSpacing:'0.18em'}}>■ KILL IDLE</button>
        </div>
      </div>

      {/* cost strip */}
      <div style={{padding:'0 16px 20px', marginTop:'auto'}}>
        <div style={{background:M_PANEL, border:`1px solid ${M_LINE}`, borderRadius:10, padding:14, display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8}}>
          <div><div style={{fontFamily:mMono, fontSize:8.5, color:M_DIM, letterSpacing:'0.2em'}}>TODAY</div><div style={{fontFamily:mDisplay, fontSize:20, color:M_CYAN}}>${ARCA_COSTS.today}</div></div>
          <div><div style={{fontFamily:mMono, fontSize:8.5, color:M_DIM, letterSpacing:'0.2em'}}>WEEK</div><div style={{fontFamily:mDisplay, fontSize:20}}>${ARCA_COSTS.week}</div></div>
          <div><div style={{fontFamily:mMono, fontSize:8.5, color:M_DIM, letterSpacing:'0.2em'}}>MONTH</div><div style={{fontFamily:mDisplay, fontSize:20, color:M_AMBER}}>${ARCA_COSTS.month}</div></div>
        </div>
      </div>

      {/* home bar */}
      <div style={{padding:'8px 0 10px', display:'flex', justifyContent:'center'}}>
        <div style={{width:120, height:4, borderRadius:3, background:M_INK, opacity:0.8}}/>
      </div>
    </div>
  );
}
Object.assign(window, { NeuralMobile });