// ai-chat-dashboard.jsx — Logged-in AI Chatbot control room

const ACTIVE_BOTS = [
  { user: 'shadowfern_42', persona: 'Lore nerd', hue: 295, msgs: 14, lastMsg: 'told you the rotate works KEKW', region: 'DE-FRA', uptime: '2h 14m', status: 'active' },
  { user: 'kicktastic',    persona: 'Hype-train', hue: 25,  msgs: 28, lastMsg: 'CLUTCH THIS BRO',                region: 'US-NYC', uptime: '2h 14m', status: 'active' },
  { user: 'casualkj',      persona: 'Casual viewer', hue: 142, msgs: 9, lastMsg: 'gg',                              region: 'GB-LON', uptime: '2h 14m', status: 'active' },
  { user: 'newviewer22',   persona: 'Newcomer', hue: 200, msgs: 4, lastMsg: 'do you stream every day?',            region: 'CA-TOR', uptime: '47m',    status: 'active' },
  { user: 'silent_lurk88', persona: 'Casual viewer', hue: 142, msgs: 0, lastMsg: '—',                                region: 'JP-TYO', uptime: '2h 14m', status: 'idle' },
  { user: 'mod_curious',   persona: 'Lore nerd', hue: 295, msgs: 6, lastMsg: 'what build are we on?',              region: 'NL-AMS', uptime: '1h 02m', status: 'cooldown' },
];

const FEED = [
  { time: '21:14:08', user: 'kicktastic',    persona: 'Hype-train',    hue: 25,  text: 'CLUTCH THIS BRO', flagged: false },
  { time: '21:14:02', user: 'shadowfern_42', persona: 'Lore nerd',     hue: 295, text: 'told you the rotate works KEKW', flagged: false },
  { time: '21:13:51', user: 'newviewer22',   persona: 'Newcomer',      hue: 200, text: 'do you stream every day?', flagged: false },
  { time: '21:13:42', user: 'casualkj',      persona: 'Casual viewer', hue: 142, text: 'gg', flagged: false },
  { time: '21:13:30', user: 'kicktastic',    persona: 'Hype-train',    hue: 25,  text: 'LETS GOOOO', flagged: false },
  { time: '21:13:18', user: 'shadowfern_42', persona: 'Lore nerd',     hue: 295, text: 'wait you tried this last week and got rolled lol', flagged: false },
  { time: '21:13:04', user: 'mod_curious',   persona: 'Lore nerd',     hue: 295, text: '[BLOCKED — mentioned competitor "rivalbot"]', flagged: true },
  { time: '21:12:47', user: 'casualkj',      persona: 'Casual viewer', hue: 142, text: 'how is he this clean lol', flagged: false },
  { time: '21:12:30', user: 'kicktastic',    persona: 'Hype-train',    hue: 25,  text: 'unreal frag', flagged: false },
];

function AiChatDashboard() {
  const [platform, setPlatform] = React.useState('kick');
  const [killSwitch, setKillSwitch] = React.useState(false);
  const [listenLevel, setListenLevel] = React.useState(0.7);

  return (
    <Stage>
      <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', minHeight: '100%' }}>
        <DashSidebar active="aichatbot"/>
        <div style={{ padding: '24px 40px 80px', maxWidth: 1280 }}>
          <DashTopbar platform={platform} setPlatform={setPlatform}/>

          <div className="vb-row" style={{ marginTop: 28, marginBottom: 28, alignItems: 'flex-start', flexWrap: 'wrap', gap: 12 }}>
            <div>
              <div className="vb-row" style={{ gap: 10, marginBottom: 8, flexWrap: 'wrap' }}>
                <h1 className="vb-h1">AI Chatbot</h1>
                <span style={{ padding: '4px 10px', borderRadius: 999, background: 'oklch(0.78 0.18 295 / 0.14)', border: '1px solid oklch(0.78 0.18 295 / 0.3)', color: 'oklch(0.82 0.2 295)', fontSize: 11, fontWeight: 600, letterSpacing: '0.04em' }}>CREATOR PLAN</span>
                <span className="vb-live-pill"><span className="vb-dot vb-dot-pulse"/>LISTENING</span>
              </div>
              <p className="vb-body" style={{ fontSize: 14, color: 'var(--vb-fg-2)' }}>
                <span className="vb-mono" style={{ color: 'oklch(0.82 0.2 295)' }}>pump_it_up_live</span> · 6 personas active · <span style={{ color: 'oklch(0.85 0.18 142)' }}>0.8s</span> avg reply latency · <span style={{ color: 'var(--vb-fg-1)' }}>61 messages this stream</span>
              </p>
            </div>
            <span className="vb-spacer"/>
            <Btn variant="glass" icon={<IconCog size={14}/>}>Persona settings</Btn>
            <Btn variant={killSwitch ? 'primary' : 'glass'} icon={<IconBolt size={14}/>} onClick={() => setKillSwitch(!killSwitch)}
              style={{ marginLeft: 10, ...(killSwitch ? { background: 'oklch(0.7 0.24 25)', border: '1px solid oklch(0.7 0.24 25)', color: '#fff' } : {}) }}>
              {killSwitch ? 'Resume bots' : 'Kill switch'}
            </Btn>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
            <Glass style={{ padding: 22, position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: -40, right: -40, width: 160, height: 160, background: 'radial-gradient(circle, oklch(0.78 0.18 295 / 0.18), transparent 65%)', pointerEvents: 'none' }}/>
              <div style={{ position: 'relative' }}>
                <span className="vb-caption" style={{ display: 'block', marginBottom: 12 }}>Active bots</span>
                <span className="vb-mono" style={{ fontSize: 36, fontWeight: 700, letterSpacing: '-0.025em', display: 'block', marginBottom: 4, color: 'oklch(0.82 0.2 295)' }}>6<span style={{ fontSize: 18, color: 'var(--vb-fg-3)' }}> / 6</span></span>
                <span style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>5 active · 1 cooldown</span>
              </div>
            </Glass>
            <Glass style={{ padding: 22 }}>
              <span className="vb-caption" style={{ display: 'block', marginBottom: 12 }}>Messages this stream</span>
              <div className="vb-row" style={{ alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
                <span className="vb-mono" style={{ fontSize: 36, fontWeight: 600, letterSpacing: '-0.02em' }}>
                  <LiveCounter base={61} jitter={1} interval={4500}/>
                </span>
                <span style={{ fontSize: 12, color: 'oklch(0.85 0.18 142)' }}>+8/min</span>
              </div>
              <Sparkline data={[3,5,4,8,12,9,11,14,12,15,13,18,16,21,18]} color="oklch(0.78 0.18 295)" width={240} height={36}/>
            </Glass>
            <Glass style={{ padding: 22 }}>
              <span className="vb-caption" style={{ display: 'block', marginBottom: 12 }}>Detection score</span>
              <div className="vb-row" style={{ alignItems: 'baseline', gap: 8, marginBottom: 6 }}>
                <span className="vb-mono" style={{ fontSize: 36, fontWeight: 600, letterSpacing: '-0.02em', color: 'oklch(0.85 0.18 142)' }}>0.02</span>
                <span style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>safe · &lt; 0.05</span>
              </div>
              <div style={{ height: 6, background: 'rgba(255,255,255,0.06)', borderRadius: 3, overflow: 'hidden' }}>
                <div style={{ width: '4%', height: '100%', background: 'linear-gradient(90deg, oklch(0.85 0.18 142), oklch(0.78 0.18 200))', borderRadius: 3 }}/>
              </div>
            </Glass>
            <Glass style={{ padding: 22 }}>
              <span className="vb-caption" style={{ display: 'block', marginBottom: 12 }}>Engagement lift</span>
              <div className="vb-row" style={{ alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
                <span className="vb-mono" style={{ fontSize: 36, fontWeight: 600, letterSpacing: '-0.02em', color: 'oklch(0.7 0.23 295)' }}>+212<span style={{ fontSize: 22, color: 'var(--vb-fg-2)' }}>%</span></span>
              </div>
              <span style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>real chat msgs vs. control</span>
            </Glass>
          </div>

          <Glass style={{ padding: 24, marginBottom: 24, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: -80, right: -40, width: 320, height: 220, background: 'radial-gradient(ellipse, oklch(0.78 0.18 295 / 0.14), transparent 65%)', pointerEvents: 'none' }}/>
            <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 32, alignItems: 'center' }}>
              <div>
                <span className="vb-caption" style={{ display: 'block', marginBottom: 10 }}>Listening source</span>
                <div className="vb-row" style={{ gap: 10, marginBottom: 16 }}>
                  <span style={{ position: 'relative', width: 36, height: 36, borderRadius: 12, background: 'oklch(0.62 0.23 295 / 0.18)', border: '1px solid oklch(0.62 0.23 295 / 0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'oklch(0.82 0.2 295)' }}>
                    <IconMic size={16}/>
                    <span style={{ position: 'absolute', inset: -4, borderRadius: 16, border: '1px solid oklch(0.62 0.23 295 / 0.5)', animation: 'vb-mic-ping 1.6s ease-out infinite' }}/>
                  </span>
                  <div className="vb-col">
                    <span style={{ fontSize: 13, fontWeight: 600 }}>OBS audio bridge</span>
                    <span style={{ fontSize: 10, color: 'var(--vb-fg-3)' }}>Whisper-V3 · 320ms window · 14 langs</span>
                  </div>
                </div>
                <div className="vb-col" style={{ gap: 10 }}>
                  <ListenSource icon={<IconMic size={12}/>} label="Streamer mic" on={true}/>
                  <ListenSource icon={<IconChat size={12}/>} label="Chat history" on={true}/>
                  <ListenSource icon={<IconClip size={12}/>} label="Stream metadata" on={true}/>
                  <ListenSource icon={<IconViewers size={12}/>} label="Game audio" on={false}/>
                </div>
              </div>
              <div>
                <div className="vb-row" style={{ marginBottom: 10 }}>
                  <span className="vb-caption">Live transcript</span>
                  <span className="vb-spacer"/>
                  <span className="vb-mono" style={{ fontSize: 10, color: 'var(--vb-fg-3)' }}>last 60s</span>
                </div>
                <div style={{ padding: '14px 16px', background: 'rgba(0,0,0,0.3)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 12, marginBottom: 14, minHeight: 110 }}>
                  <p style={{ fontSize: 13, color: 'var(--vb-fg-1)', lineHeight: 1.6, fontStyle: 'italic' }}>
                    "<span style={{ color: 'var(--vb-fg-3)' }}>...okay so if I rotate left I can third-party that fight, watch this</span> — third party incoming, <span style={{ color: 'oklch(0.82 0.2 295)' }}>let's gooo did you see that, that's why you rotate west on this map every time</span>..."
                  </p>
                </div>
                <Waveform/>
                <div className="vb-row" style={{ marginTop: 12, gap: 10 }}>
                  <span style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>Reply rate</span>
                  <div style={{ flex: 1, position: 'relative', height: 4, background: 'rgba(255,255,255,0.06)', borderRadius: 2 }}>
                    <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: `${listenLevel * 100}%`, background: 'linear-gradient(90deg, oklch(0.85 0.18 142), oklch(0.7 0.23 295))', borderRadius: 2 }}/>
                  </div>
                  <span className="vb-mono" style={{ fontSize: 11, fontWeight: 600, color: 'oklch(0.82 0.2 295)', minWidth: 32, textAlign: 'right' }}>{Math.round(listenLevel * 100)}%</span>
                </div>
                <input type="range" className="vb-range" min="0" max="1" step="0.05" value={listenLevel} onChange={(e) => setListenLevel(+e.target.value)}
                  style={{ width: '100%', marginTop: 10 }}/>
              </div>
            </div>
          </Glass>

          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16, marginBottom: 24 }}>
            <Glass style={{ padding: 0, overflow: 'hidden' }}>
              <div className="vb-row" style={{ padding: '20px 24px 16px' }}>
                <div>
                  <h3 className="vb-h3">Active bots</h3>
                  <span style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>6 of 6 slots used · Creator plan</span>
                </div>
                <span className="vb-spacer"/>
                <Btn variant="glass" size="sm" icon={<IconPlus size={12}/>}>Add bot</Btn>
              </div>
              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead>
                  <tr style={{ borderTop: '1px solid rgba(255,255,255,0.04)', borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
                    {['Bot', 'Persona', 'Region', 'Msgs', 'Uptime', 'Status', ''].map((h) => (
                      <th key={h} style={{ padding: '10px 16px', textAlign: 'left', fontSize: 10, color: 'var(--vb-fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {ACTIVE_BOTS.map((b, i) => (
                    <tr key={b.user} style={{ borderBottom: i < ACTIVE_BOTS.length - 1 ? '1px solid rgba(255,255,255,0.03)' : 'none' }}>
                      <td style={{ padding: '12px 16px' }}>
                        <div className="vb-row" style={{ gap: 10 }}>
                          <Avatar name={b.user} size={26} hue={b.hue}/>
                          <div className="vb-col" style={{ minWidth: 0 }}>
                            <span style={{ fontSize: 12, fontWeight: 600, color: `oklch(0.85 0.18 ${b.hue})` }}>{b.user}</span>
                            <span style={{ fontSize: 10, color: 'var(--vb-fg-3)', maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{b.lastMsg}</span>
                          </div>
                        </div>
                      </td>
                      <td style={{ padding: '12px 16px' }}>
                        <span style={{ fontSize: 11, padding: '3px 8px', borderRadius: 4, background: `oklch(0.78 0.18 ${b.hue} / 0.12)`, color: `oklch(0.85 0.18 ${b.hue})`, fontWeight: 500 }}>{b.persona}</span>
                      </td>
                      <td style={{ padding: '12px 16px', fontSize: 11, color: 'var(--vb-fg-2)', fontFamily: 'var(--vb-font-mono)' }}>{b.region}</td>
                      <td style={{ padding: '12px 16px', fontSize: 12, color: 'var(--vb-fg-1)', fontFamily: 'var(--vb-font-mono)', fontWeight: 600 }}>{b.msgs}</td>
                      <td style={{ padding: '12px 16px', fontSize: 11, color: 'var(--vb-fg-2)', fontFamily: 'var(--vb-font-mono)' }}>{b.uptime}</td>
                      <td style={{ padding: '12px 16px' }}><BotStatusPill status={b.status}/></td>
                      <td style={{ padding: '12px 16px', textAlign: 'right' }}>
                        <button style={{ background: 'transparent', border: 'none', color: 'var(--vb-fg-3)', cursor: 'pointer', padding: 4 }}><IconChevron size={14}/></button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </Glass>

            <Glass style={{ padding: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
              <div className="vb-row" style={{ padding: '20px 24px 16px' }}>
                <div>
                  <h3 className="vb-h3">Live feed</h3>
                  <span style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>1 blocked by guardrails today</span>
                </div>
                <span className="vb-spacer"/>
                <span className="vb-live-pill"><span className="vb-dot vb-dot-pulse"/>LIVE</span>
              </div>
              <div style={{ borderTop: '1px solid rgba(255,255,255,0.04)', flex: 1, padding: '8px 0', maxHeight: 360, overflowY: 'auto' }}>
                {FEED.map((m, i) => (
                  <div key={i} className="vb-row" style={{ gap: 10, padding: '10px 24px', alignItems: 'flex-start', borderBottom: i < FEED.length - 1 ? '1px solid rgba(255,255,255,0.025)' : 'none' }}>
                    <span className="vb-mono" style={{ fontSize: 9, color: 'var(--vb-fg-3)', flexShrink: 0, marginTop: 2, width: 56 }}>{m.time}</span>
                    <Avatar name={m.user} size={20} hue={m.flagged ? 25 : m.hue}/>
                    <div className="vb-col" style={{ flex: 1, minWidth: 0 }}>
                      <div className="vb-row" style={{ gap: 6, flexWrap: 'wrap' }}>
                        <span style={{ fontSize: 11, fontWeight: 600, color: m.flagged ? 'oklch(0.7 0.24 25)' : `oklch(0.85 0.18 ${m.hue})` }}>{m.user}</span>
                        {!m.flagged && <span style={{ fontSize: 9, padding: '1px 5px', borderRadius: 3, background: `oklch(0.78 0.18 ${m.hue} / 0.12)`, color: `oklch(0.85 0.18 ${m.hue})`, fontWeight: 500 }}>{m.persona}</span>}
                        {m.flagged && <span style={{ fontSize: 9, padding: '1px 5px', borderRadius: 3, background: 'oklch(0.7 0.24 25 / 0.18)', color: 'oklch(0.85 0.18 25)', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Blocked</span>}
                      </div>
                      <span style={{ fontSize: 12, color: m.flagged ? 'var(--vb-fg-3)' : 'var(--vb-fg-1)', fontStyle: m.flagged ? 'italic' : 'normal', lineHeight: 1.45 }}>{m.text}</span>
                    </div>
                  </div>
                ))}
              </div>
            </Glass>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 24 }}>
            <Glass style={{ padding: 24 }}>
              <div className="vb-row" style={{ marginBottom: 18 }}>
                <h3 className="vb-h3">Persona mix</h3>
                <span className="vb-spacer"/>
                <Btn variant="glass" size="sm">Adjust</Btn>
              </div>
              <PersonaMixBar/>
              <div className="vb-col" style={{ gap: 10, marginTop: 18 }}>
                {[
                  { name: 'Hype-train', hue: 25, msgs: 28, pct: 46 },
                  { name: 'Lore nerd', hue: 295, msgs: 20, pct: 33 },
                  { name: 'Casual viewer', hue: 142, msgs: 9, pct: 15 },
                  { name: 'Newcomer', hue: 200, msgs: 4, pct: 6 },
                ].map((p) => (
                  <div key={p.name} className="vb-row" style={{ gap: 10 }}>
                    <span style={{ width: 10, height: 10, borderRadius: 5, background: `oklch(0.78 0.18 ${p.hue})` }}/>
                    <span style={{ fontSize: 12, color: 'var(--vb-fg-1)', flex: 1 }}>{p.name}</span>
                    <span className="vb-mono" style={{ fontSize: 12, color: 'var(--vb-fg-2)', minWidth: 28, textAlign: 'right' }}>{p.msgs}</span>
                    <span className="vb-mono" style={{ fontSize: 11, color: 'var(--vb-fg-3)', minWidth: 32, textAlign: 'right' }}>{p.pct}%</span>
                  </div>
                ))}
              </div>
            </Glass>

            <Glass style={{ padding: 24 }}>
              <div className="vb-row" style={{ marginBottom: 18 }}>
                <h3 className="vb-h3">Guardrails</h3>
                <span className="vb-spacer"/>
                <span style={{ fontSize: 10, color: 'oklch(0.85 0.18 142)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>● Healthy</span>
              </div>
              <div className="vb-col" style={{ gap: 12 }}>
                <Guardrail label="AutoMod-aware filters" desc="Reading 14 banned words from channel rules" on={true}/>
                <Guardrail label="Mod whitelist" desc="3 mods tagged · bots will not @-mention" on={true}/>
                <Guardrail label="Topic guardrails" desc="No competitor names, no bot disclosure, no links" on={true}/>
                <Guardrail label="Slow-mode awareness" desc="Currently respecting 5s slow-mode" on={true}/>
                <Guardrail label="Profanity scaling" desc="Auto-tunes by your channel's avg" on={false}/>
              </div>
            </Glass>
          </div>
        </div>
      </div>
      <style>{`
        @keyframes vb-mic-ping { 0%{transform:scale(1);opacity:0.6} 80%,100%{transform:scale(1.6);opacity:0} }
        @keyframes vb-wave { 0%,100% { transform: scaleY(0.3) } 50% { transform: scaleY(1) } }
      `}</style>
    </Stage>
  );
}

function ListenSource({ icon, label, on }) {
  return (
    <div className="vb-row" style={{ gap: 8, padding: '8px 10px', background: on ? 'rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.015)', border: '1px solid rgba(255,255,255,0.04)', borderRadius: 8 }}>
      <span style={{ width: 22, height: 22, borderRadius: 6, background: on ? 'oklch(0.78 0.18 295 / 0.15)' : 'rgba(255,255,255,0.04)', color: on ? 'oklch(0.82 0.2 295)' : 'var(--vb-fg-3)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{icon}</span>
      <span style={{ fontSize: 12, color: on ? 'var(--vb-fg-1)' : 'var(--vb-fg-3)', flex: 1 }}>{label}</span>
      <span style={{ width: 28, height: 16, borderRadius: 8, background: on ? 'oklch(0.85 0.18 142)' : 'rgba(255,255,255,0.1)', position: 'relative', transition: 'all 0.2s' }}>
        <span style={{ position: 'absolute', top: 2, [on ? 'right' : 'left']: 2, width: 12, height: 12, borderRadius: 6, background: '#fff', transition: 'all 0.2s' }}/>
      </span>
    </div>
  );
}

function BotStatusPill({ status }) {
  if (status === 'active') return <span style={{ fontSize: 10, padding: '3px 8px', borderRadius: 4, background: 'oklch(0.85 0.18 142 / 0.14)', color: 'oklch(0.85 0.18 142)', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 5, height: 5, borderRadius: 3, background: 'oklch(0.85 0.18 142)', boxShadow: '0 0 6px oklch(0.85 0.18 142)' }}/>ACTIVE</span>;
  if (status === 'idle') return <span style={{ fontSize: 10, padding: '3px 8px', borderRadius: 4, background: 'rgba(255,255,255,0.06)', color: 'var(--vb-fg-2)', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 5, height: 5, borderRadius: 3, background: 'var(--vb-fg-3)' }}/>IDLE</span>;
  return <span style={{ fontSize: 10, padding: '3px 8px', borderRadius: 4, background: 'oklch(0.82 0.2 25 / 0.14)', color: 'oklch(0.85 0.18 75)', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 5, height: 5, borderRadius: 3, background: 'oklch(0.85 0.18 75)' }}/>COOLDOWN</span>;
}

function PersonaMixBar() {
  const segs = [
    { hue: 25, pct: 46 },
    { hue: 295, pct: 33 },
    { hue: 142, pct: 15 },
    { hue: 200, pct: 6 },
  ];
  return (
    <div style={{ display: 'flex', height: 12, borderRadius: 6, overflow: 'hidden', gap: 2 }}>
      {segs.map((s, i) => (
        <div key={i} style={{ flex: s.pct, background: `linear-gradient(135deg, oklch(0.78 0.18 ${s.hue}), oklch(0.6 0.22 ${s.hue}))`, borderRadius: 3 }}/>
      ))}
    </div>
  );
}

function Guardrail({ label, desc, on }) {
  return (
    <div className="vb-row" style={{ gap: 12, padding: '10px 12px', background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.04)', borderRadius: 10 }}>
      <span style={{ width: 28, height: 28, borderRadius: 8, background: on ? 'oklch(0.85 0.18 142 / 0.16)' : 'rgba(255,255,255,0.04)', color: on ? 'oklch(0.85 0.18 142)' : 'var(--vb-fg-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        {on ? <IconCheck size={14}/> : <IconClose size={12}/>}
      </span>
      <div className="vb-col" style={{ flex: 1, minWidth: 0 }}>
        <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--vb-fg-1)' }}>{label}</span>
        <span style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>{desc}</span>
      </div>
      <span style={{ width: 28, height: 16, borderRadius: 8, background: on ? 'oklch(0.85 0.18 142)' : 'rgba(255,255,255,0.1)', position: 'relative' }}>
        <span style={{ position: 'absolute', top: 2, [on ? 'right' : 'left']: 2, width: 12, height: 12, borderRadius: 6, background: '#fff' }}/>
      </span>
    </div>
  );
}

function Waveform() {
  const bars = React.useMemo(() => Array.from({ length: 56 }, () => Math.random()), []);
  return (
    <div className="vb-row" style={{ gap: 2, height: 22, alignItems: 'center' }}>
      {bars.map((r, i) => (
        <span key={i} style={{
          flex: 1,
          height: '100%',
          minHeight: 2,
          background: i % 5 === 0 ? 'oklch(0.78 0.18 295)' : 'rgba(255,255,255,0.4)',
          borderRadius: 1,
          transformOrigin: 'center',
          animation: `vb-wave ${0.6 + r * 0.9}s ease-in-out infinite`,
          animationDelay: `${i * 0.04}s`,
        }}/>
      ))}
    </div>
  );
}

Object.assign(window, { AiChatDashboard });