/** CRAiD Mobile — Doro chat (iOS + Android variants in one file) */
function DoroChatScreen({ scheme = 'ios' }) {
  const android = scheme === 'android';
  return (
    <div style={{ width: '100%', height: '100%', background: 'var(--bg)', display: 'flex', flexDirection: 'column', fontFamily: 'var(--font-sans)', paddingTop: android ? 0 : 54 }}>
      {/* Top bar */}
      <div style={{ padding: android ? '14px 16px' : '12px 20px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 12, background: '#fff' }}>
        <div style={{ width: 36, height: 36, borderRadius: '50%', backgroundImage: 'url(../../assets/brand-image-019.jpeg)', backgroundSize: 'cover' }} />
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.005em' }}>Doro</div>
          <div style={{ fontSize: 11, color: 'var(--primary)', display: 'flex', alignItems: 'center', gap: 5 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--craid-success)' }} />
            Online · Chief of Staff
          </div>
        </div>
        <button style={{ border: 0, background: 'rgba(236,22,245,0.10)', color: 'var(--primary)', padding: '6px 12px', borderRadius: 9999, fontSize: 11, fontWeight: 600, letterSpacing: '0.05em' }}>AGENT</button>
      </div>

      {/* Thread */}
      <div style={{ flex: 1, overflow: 'hidden', padding: '16px 14px', display: 'flex', flexDirection: 'column', gap: 10, background: 'var(--craid-lavender-soft)', minHeight: 0 }}>
        <div style={dateSep}>HEUTE · 9:42</div>
        <Bubble from="doro">Morgen. Ich habe über Nacht das Briefing von Bayer durchgegangen und drei Angles rausgezogen.</Bubble>
        <Bubble from="doro">Soll ich Carlo auf die Markt-Analyse setzen und Maja die Value-Props briefen?</Bubble>
        <Bubble from="me">Ja, mach. Hol Brandon dazu für den Pitch-Winkel.</Bubble>
        <Bubble from="doro" tag="Plan">
          <strong>Setup:</strong><br />
          · Carlo → Markt-Scan (heute 14:00)<br />
          · Maja → Value-Props (morgen EOD)<br />
          · Brandon → Pitch-Angle (Do)<br />
          Ich sync alles in Notion.
        </Bubble>
        <Bubble from="me">👍</Bubble>
      </div>

      {/* Composer */}
      <div style={{ padding: android ? '10px 12px 14px' : '10px 14px 22px', borderTop: '1px solid var(--border)', background: '#fff', display: 'flex', gap: 10, alignItems: 'center' }}>
        <button style={{ width: 36, height: 36, borderRadius: '50%', border: '1px solid var(--border)', background: '#fff', fontSize: 18, color: 'var(--fg-muted)' }}>+</button>
        <div style={{ flex: 1, padding: '10px 14px', borderRadius: 9999, border: '1px solid var(--border)', fontSize: 13, color: 'var(--fg-subtle)' }}>Message Doro…</div>
        <button style={{ width: 36, height: 36, borderRadius: '50%', border: 0, background: 'var(--primary)', color: '#fff', fontSize: 16 }}>↑</button>
      </div>
    </div>
  );
}

function Bubble({ from, tag, children }) {
  const mine = from === 'me';
  return (
    <div style={{ display: 'flex', justifyContent: mine ? 'flex-end' : 'flex-start' }}>
      <div style={{
        maxWidth: '78%',
        background: mine ? 'var(--primary)' : '#fff',
        color: mine ? '#fff' : 'var(--fg)',
        border: mine ? 'none' : '1px solid var(--border)',
        padding: tag ? '10px 14px' : '10px 14px',
        borderRadius: 18,
        borderBottomRightRadius: mine ? 4 : 18,
        borderBottomLeftRadius: mine ? 18 : 4,
        fontSize: 13.5, lineHeight: 1.45,
        boxShadow: mine ? 'none' : '0 1px 2px rgba(19,31,34,0.04)',
      }}>
        {tag && <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--primary)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 6 }}>{tag}</div>}
        {children}
      </div>
    </div>
  );
}

const dateSep = { alignSelf: 'center', fontSize: 10.5, fontWeight: 500, color: 'var(--fg-subtle)', letterSpacing: '0.1em', padding: '4px 10px', background: 'rgba(255,255,255,0.6)', borderRadius: 9999 };

Object.assign(window, { DoroChatScreen });