function ChatScreen(){
  const [msgs,setMsgs] = React.useState([
    {from:'agent',text:"Morning. You've got a late meeting today — want dinner moved to 20:30 and made lighter?",time:'07:12',chips:['Yes, move it','Keep as is']},
    {from:'user',text:'Move it, and something I can cook in 15 minutes.',time:'07:14'},
    {from:'agent',text:'Done. Miso salmon with greens and rice — 15 minutes, 610 kcal, hits your protein target for the day.',time:'07:14'},
  ]);
  const [typing,setTyping] = React.useState(false);
  const [draft,setDraft] = React.useState('');
  const send = (text) => {
    if(!text.trim()) return;
    setMsgs(m=>[...m,{from:'user',text,time:'09:04'}]); setDraft(''); setTyping(true);
    setTimeout(()=>{ setTyping(false); setMsgs(m=>[...m,{from:'agent',text:"Swapped it — Thursday's dinner is now lentil ragù. That covers the iron gap too.",time:'09:04',chips:['Show recipe','Undo']}]); },1400);
  };
  return (<div style={{position:'relative',flex:1,display:'flex',flexDirection:'column',overflow:'hidden'}}>
    <Mesh opacity={.5} style={{inset:'-40% -30% auto -30%',height:360}} />
    <div style={{position:'relative',display:'flex',alignItems:'center',gap:12,padding:'8px 20px 14px'}}>
      <AgentOrb size={38} state={typing?'thinking':'idle'} />
      <div style={{flex:1}}>
        <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:19,color:'var(--text-strong)'}}>Suko</div>
        <div style={{fontSize:12,color:'var(--jade-700)',fontWeight:600}}>{typing?'Thinking…':'Knows your plan, labs and last 30 logs'}</div>
      </div>
      <IconButton icon="history" label="History" tone="card" />
    </div>
    <div style={{position:'relative',flex:1,overflowY:'auto',padding:'6px 16px 12px',display:'flex',flexDirection:'column',gap:12}}>
      {msgs.map((m,i)=>(
        <ChatBubble key={i} from={m.from} time={m.time} chips={m.chips ? m.chips.map(c=> <Tag key={c} onClick={()=>send(c)}>{c}</Tag>) : null}>{m.text}</ChatBubble>
      ))}
      {typing ? <ChatBubble from="agent" typing /> : null}
    </div>
    <div style={{position:'relative',display:'flex',gap:10,alignItems:'center',padding:'10px 16px 14px',background:'var(--gradient-glass)',backdropFilter:'blur(var(--blur-glass))',borderTop:'1px solid rgba(255,255,255,.7)'}}>
      <IconButton icon="camera" label="Log with a photo" tone="soft" />
      <input value={draft} onChange={e=>setDraft(e.target.value)} onKeyDown={e=> e.key==='Enter' && send(draft)} placeholder="Ask Suko anything…"
        style={{flex:1,minWidth:0,height:46,padding:'0 18px',borderRadius:'var(--radius-pill)',border:'1px solid var(--border-default)',background:'var(--surface-card)',fontSize:15,outline:'none'}} />
      <IconButton icon="arrow-up" label="Send" tone="accent" onClick={()=>send(draft)} />
    </div>
  </div>);
}
Object.assign(window,{ChatScreen});