// vita-app.jsx — flow orchestration: splash → choose Vita → conversation → clinical history

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "persona": "calida",
  "waveStyle": "barras",
  "dark": true,
  "tts": true,
}/*EDITMODE-END*/;

// ── Screen background wrapper ───────────────────────────────────
function Stage({ t, children, pad = true }) {
  // Antes: position absolute sobre el lienzo fijo de 402x874 del marco de
  // iPhone. Ahora fluye: el alto lo decide el contenido y el shell se encarga
  // del scroll. `pad` se conserva por compatibilidad con las llamadas actuales.
  void pad;
  return (
    <div style={{
      position: 'relative', width: '100%',
      minHeight: '100%',
      background: 'transparent',
      fontFamily: "'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif",
      display: 'flex', flexDirection: 'column',
    }}>
      {children}
    </div>
  );
}

// ── 1. Splash ───────────────────────────────────────────────────
function Splash({ t, persona, waveStyle, onStart }) {
  const p = t.paleta;
  // El contenido se agrupa en una tarjeta centrada con ancho acotado. Antes
  // se estiraba a todo el ancho de la ventana y el botón quedaba pegado al
  // texto: en escritorio parecía un móvil deformado, no una pantalla web.
  return (
    <div style={{
      minHeight: '100vh', display: 'flex', flexDirection: 'column',
      background: p.bg, fontFamily: "'Inter', system-ui, sans-serif",
    }}>
      <div style={{ padding: '20px 24px', flexShrink: 0 }}>
        <VITAMark t={t} size={15} />
      </div>

      <div style={{
        flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: '24px 24px 56px',
      }}>
        <div style={{ width: '100%', maxWidth: 520, textAlign: 'center' }}>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <Waveform state="speaking" variant={waveStyle} accent={p.primary} accentDeep={p.primaryDark} size={180} />
          </div>

          <div style={{ fontSize: 13, fontWeight: 600, color: p.primary, letterSpacing: 1.6, textTransform: 'uppercase', marginTop: 18 }}>
            Conoce a
          </div>
          <h1 style={{ fontSize: 'clamp(44px, 7vw, 64px)', lineHeight: 1, fontWeight: 700, color: p.text, margin: '6px 0 0', letterSpacing: -1.5 }}>
            Vita
          </h1>

          <p style={{ fontSize: 17, lineHeight: 1.6, color: p.textMuted, maxWidth: 420, margin: '18px auto 0' }}>
            Tu médica de confianza, por voz. Te acompaña, recuerda tu historia y cuida tu longevidad — <span style={{ color: p.text, fontWeight: 600 }}>24 horas, todos los días.</span>
          </p>

          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', margin: '26px 0 32px' }}>
            {[['mic', 'Hablas, no escribes'], ['doc', 'Historia clínica viva'], ['shield', 'Datos cifrados']].map(([ic, txt]) => (
              <span key={txt} style={{
                display: 'inline-flex', alignItems: 'center', gap: 7,
                padding: '7px 13px', borderRadius: 999,
                background: p.surface, border: `1px solid ${p.border}`,
                fontSize: 13, fontWeight: 500, color: p.text,
              }}>{Icon[ic]({ s: 15, c: p.primary })} {txt}</span>
            ))}
          </div>

          <div style={{ maxWidth: 360, margin: '0 auto' }}>
            <BigButton t={t} onClick={onStart}>Empezar a conocernos</BigButton>
          </div>

          <div style={{ marginTop: 18, fontSize: 12.5, color: p.textMuted, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
            {Icon.shield({ s: 14, c: p.textMuted })} Tus datos son tuyos. VITA solo los custodia.
          </div>
        </div>
      </div>
    </div>
  );
}

function BigButton({ t, onClick, children, secondary }) {
  return (
    <button onClick={onClick} style={{
      width: '100%', padding: '17px 20px', borderRadius: 18, cursor: 'pointer',
      border: secondary ? `1.5px solid ${t.strokeStrong}` : 'none',
      background: secondary ? 'transparent' : `linear-gradient(135deg, ${t.accent}, ${t.accentDeep})`,
      color: secondary ? t.text : t.onAccent,
      fontFamily: "'Inter', system-ui, sans-serif", fontSize: 16.5, fontWeight: 700, letterSpacing: 0.2,
      boxShadow: secondary ? 'none' : `0 12px 30px ${hexA(t.accent, 0.4)}`,
      WebkitTapHighlightColor: 'transparent', transition: 'transform .15s',
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
    }}
    onMouseDown={e => e.currentTarget.style.transform = 'scale(0.98)'}
    onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'}
    onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
    >{children}</button>
  );
}

// ── 2. Choose your Vita ─────────────────────────────────────────
// Frase de muestra por personalidad. Cada una está escrita en el registro
// que le corresponde, así el paciente oye la diferencia real de tono, no
// sólo la de los diales de voz.
const MUESTRA_PERSONA = {
  calida: 'Hola, soy Vita. Me alegra mucho conocerte. Cuéntame, ¿cómo te has sentido estos días?',
  serena: 'Hola, soy Vita. Estoy aquí contigo. Respira tranquilo, y cuando quieras me cuentas cómo te sientes.',
  coach: '¡Hola! Soy Vita. Vamos a cuidar tu salud juntos. Cuéntame cómo te has sentido y arrancamos.',
  profesional: 'Hola, soy Vita, tu asistente de salud. Voy a hacerte algunas preguntas para conocer tu estado de salud. ¿Cómo te has sentido?',
  cercano: 'Hola, soy Vita. Estoy aquí para acompañarte en el cuidado de tu salud. Cuéntame, ¿cómo te has sentido estos días?',
  clinica: 'Hola, soy Vita, tu asistente de salud. Empecemos con calma: cuéntame cómo te has sentido últimamente.',
};

// Las personas de la voz principal se ofrecen siempre; las demás, sólo si el
// servidor tiene su voz configurada (VitaCore las consulta a /api/tts).
const PERSONAS_BASE = ['calida', 'serena', 'coach'];

function usePersonasDisponibles() {
  const [ids, setIds] = React.useState(PERSONAS_BASE);
  React.useEffect(() => {
    const nucleo = window.VitaCore;
    if (!nucleo || !nucleo.voz.personasDisponibles) return;
    let vigente = true;
    nucleo.voz.personasDisponibles()
      .then((lista) => { if (vigente && Array.isArray(lista) && lista.length) setIds(lista); })
      .catch(() => {});
    return () => { vigente = false; };
  }, []);
  return ids;
}

function ChooseVita({ t, current, waveStyle, onPick, onContinue, onBack, voice, tts }) {
  const p = t.paleta;
  const [sonando, setSonando] = React.useState(null);
  const disponibles = usePersonasDisponibles();
  // La persona elegida se muestra siempre, aunque su voz ya no esté configurada.
  const personas = Object.values(VITA_PERSONAS).filter((x) => disponibles.includes(x.id) || x.id === current.id);

  // Al elegir una personalidad se reproduce su muestra: la diferencia entre
  // Cálida, Serena y Coach está en la VOZ, así que enseñarla sólo por escrito
  // deja al paciente eligiendo a ciegas.
  const elegir = (personaId) => {
    onPick(personaId);
    if (!voice || !tts) return;
    voice.stopSpeaking();
    setSonando(personaId);
    voice.speak(
      MUESTRA_PERSONA[personaId] || MUESTRA_PERSONA.calida,
      VITA_PERSONAS[personaId],
      () => setSonando((actual) => (actual === personaId ? null : actual)),
    );
  };

  React.useEffect(() => () => { if (voice) voice.stopSpeaking(); }, []);

  const vozNoDisponible = voice && voice.voiceState === 'no_disponible';

  return (
    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', background: p.bg, fontFamily: "'Inter', system-ui, sans-serif" }}>
      <div style={{ padding: '20px 24px 0', flexShrink: 0 }}>
        <VITAMark t={t} size={15} />
      </div>

      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px 24px 48px' }}>
        <div style={{ width: '100%', maxWidth: 720 }}>
          <h2 style={{ fontSize: 'clamp(26px, 3.4vw, 34px)', fontWeight: 700, lineHeight: 1.15, color: p.text, margin: '0 0 8px', letterSpacing: -0.6 }}>
            ¿Cómo quieres que te acompañe?
          </h2>
          <p style={{ fontSize: 15, color: p.textMuted, margin: '0 0 8px', lineHeight: 1.55 }}>
            Elige la voz y el estilo con el que prefieres que te acompañe. Puedes cambiarlo cuando quieras.
          </p>
          <p style={{ fontSize: 13.5, color: p.primary, margin: '0 0 22px', display: 'flex', alignItems: 'center', gap: 6 }}>
            {Icon.volume({ s: 15, c: p.primary })}
            {vozNoDisponible ? 'La voz no está disponible ahora mismo.' : 'Toca una opción para escucharla.'}
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(300px, 100%), 1fr))', gap: 14, marginBottom: 26 }}>
            {personas.map((persona) => {
              const sel = persona.id === current.id;
              const activa = sonando === persona.id;
              return (
                <button key={persona.id} onClick={() => elegir(persona.id)} style={{
                  display: 'flex', flexDirection: 'column', gap: 12, textAlign: 'left', cursor: 'pointer',
                  padding: 18, borderRadius: 14, width: '100%',
                  border: `1.5px solid ${sel ? p.primary : p.border}`,
                  background: sel ? p.primarySoft : p.surface,
                  transition: 'border-color .18s, background .18s',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <div style={{ width: 52, height: 52, flexShrink: 0, display: 'grid', placeItems: 'center', borderRadius: 12, overflow: 'hidden', background: sel ? 'rgba(255,255,255,0.6)' : p.bg }}>
                      <Waveform state={activa ? 'speaking' : 'idle'} variant={waveStyle} accent={p.primary} accentDeep={p.primaryDark} size={52} />
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 16, fontWeight: 700, color: p.text }}>{persona.name}</div>
                      <div style={{ fontSize: 12.5, color: sel ? p.primaryDark : p.textMuted, fontWeight: 500 }}>{persona.tagline}</div>
                    </div>
                    <div style={{ width: 22, height: 22, borderRadius: '50%', flexShrink: 0,
                      border: `2px solid ${sel ? p.primary : p.borderStrong}`,
                      background: sel ? p.primary : 'transparent', display: 'grid', placeItems: 'center' }}>
                      {sel && Icon.check({ s: 13, c: '#fff', w: 3 })}
                    </div>
                  </div>

                  <div style={{ fontSize: 13.5, color: sel ? p.text : p.textMuted, lineHeight: 1.5 }}>{persona.desc}</div>

                  <div style={{ fontSize: 12, fontWeight: 600, color: activa ? p.primary : p.textMuted, display: 'flex', alignItems: 'center', gap: 6, marginTop: 'auto' }}>
                    {activa
                      ? <React.Fragment>{Icon.volume({ s: 14, c: p.primary })} Sonando…</React.Fragment>
                      : <React.Fragment>{Icon.volume({ s: 14, c: p.textMuted })} Escuchar</React.Fragment>}
                  </div>
                </button>
              );
            })}
          </div>

          <div style={{ display: 'flex', gap: 12, maxWidth: 460 }}>
            <BigButton t={t} secondary onClick={onBack}>Atrás</BigButton>
            <BigButton t={t} onClick={() => { if (voice) voice.stopSpeaking(); onContinue(); }}>
              Continuar {Icon.chevron({ s: 17, c: t.onAccent })}
            </BigButton>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Modo llamada ────────────────────────────────────────────────
// Envuelve VitaCore.llamada en un hook de React. Toda la lógica de turnos
// vive en el núcleo (src/domain/conversation/TurnTaking.ts); aquí sólo se
// refleja su estado para pintarlo.
function useModoLlamada(conv) {
  const [activa, setActiva] = React.useState(false);
  const [estado, setEstado] = React.useState('inactivo');
  const [parcial, setParcial] = React.useState('');
  const [errorEscucha, setErrorEscucha] = React.useState('');
  const nucleo = typeof window !== 'undefined' ? window.VitaCore : null;
  const soportado = !!(nucleo && nucleo.llamada.soportado());

  // La respuesta del turno se toma por ref: si se capturara en el closure,
  // cada turno usaría la transcripción de la primera llamada.
  const turnoRef = React.useRef(conv.turnoDeLlamada);
  turnoRef.current = conv.turnoDeLlamada;

  const colgar = React.useCallback(() => {
    if (nucleo) nucleo.llamada.terminar();
    setActiva(false);
    setEstado('inactivo');
    setParcial('');
  }, []);

  const llamar = React.useCallback((personaId) => {
    if (!nucleo || !soportado) return false;
    const ok = nucleo.llamada.iniciar(personaId || 'calida', {
      alCambiarEstado: (nuevo) => setEstado(nuevo),
      alTranscribir: (texto) => setParcial(texto),
      alTurnoDelPaciente: async (texto) => {
        setParcial('');
        return turnoRef.current(texto);
      },
      alError: (e) => setErrorEscucha((e && e.message) || 'Fallo en el micrófono'),
    });
    if (ok) { setActiva(true); setErrorEscucha(''); }
    return ok;
  }, [soportado]);

  const pausar = React.useCallback(() => { if (nucleo) nucleo.llamada.pausar(); }, []);
  const reanudar = React.useCallback(() => { if (nucleo) nucleo.llamada.reanudar(); }, []);

  // Colgar al desmontar: dejar el micrófono abierto tras salir de la
  // pantalla sería un fallo de privacidad, no sólo un descuido técnico.
  React.useEffect(() => colgar, []);

  const etiqueta = nucleo ? nucleo.llamada.etiqueta(estado) : '';
  const turnoDelPaciente = nucleo ? nucleo.llamada.esTurnoDelPaciente(estado) : false;

  return { activa, estado, parcial, soportado, llamar, colgar, pausar, reanudar,
    etiqueta, turnoDelPaciente, errorEscucha, limpiarError: () => setErrorEscucha('') };
}

// ── 3. Conversation ─────────────────────────────────────────────
function Conversation({ t, persona, waveStyle, tts, conv, returning, onToggleTheme, onToggleTTS, onShowProfile, onBack }) {
  const p = t.paleta;
  const voice = conv.voice;
  const scrollRef = React.useRef(null);
  const [text, setText] = React.useState('');
  const [showDocs, setShowDocs] = React.useState(false);

  const DOC_TYPES = [
    { label: 'Exámenes de laboratorio', icon: 'pulse' },
    { label: 'Fórmula médica', icon: 'doc' },
    { label: 'Mi historia clínica', icon: 'doc' },
    { label: 'Carné de vacunas', icon: 'shield' },
    { label: 'Foto / imagen médica', icon: 'plus' },
  ];

  const llamada = useModoLlamada(conv);

  // En modo llamada la fase la manda la máquina de turnos; fuera de él, los
  // indicadores sueltos de siempre.
  const phase = llamada.activa
    ? ({ escuchando: 'listening', esperando: 'listening', procesando: 'thinking', hablando: 'speaking' }[llamada.estado] || 'idle')
    : (voice.listening ? 'listening' : conv.loading ? 'thinking' : voice.speaking ? 'speaking' : 'idle');

  React.useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [conv.messages, conv.loading]);

  const submit = (val) => {
    const v = (val != null ? val : text).trim();
    if (!v || conv.loading) return;
    setText('');
    conv.send(v);
  };

  const micTap = () => {
    if (voice.speaking) { voice.stopSpeaking(); return; }
    if (voice.listening) { voice.stopListening(); return; }
    const ok = voice.startListening((final) => submit(final));
    if (!ok) {
      const el = document.getElementById('vita-input');
      el && el.focus();
    }
  };

  const profileCount = Object.keys(conv.profile).length;

  return (
    <Stage t={t}>
      {/* header */}
      <div style={{ paddingTop: 60, padding: '60px 18px 10px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          {returning && onBack
            ? <IconBtn t={t} onClick={onBack} title="Volver"><span style={{ display: 'flex', transform: 'rotate(180deg)' }}>{Icon.chevron({ s: 18, c: t.textSoft, w: 2.5 })}</span></IconBtn>
            : <VITAMark t={t} size={13} withWord={false} />}
          <div>
            <div style={{ fontSize: 14, fontWeight: 700, color: t.text, lineHeight: 1 }}>{returning ? 'Hablar con Vita' : 'Primer triage'}</div>
            <div style={{ fontSize: 11, color: t.muted, fontWeight: 500, marginTop: 2 }}>{returning ? 'Tu asistente de salud' : 'Hablado, con Vita'}</div>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <button onClick={onShowProfile} style={{
            display: 'flex', alignItems: 'center', gap: 7, cursor: 'pointer',
            padding: '5px 12px 5px 6px', borderRadius: 999, border: `1px solid ${t.stroke}`,
            background: t.dark ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.7)', WebkitTapHighlightColor: 'transparent',
          }}>
            <ProgressRing value={conv.progress} size={26} stroke={3} color={t.accent} track={t.stroke} />
            <span style={{ fontSize: 12.5, fontWeight: 700, color: t.text }}>{profileCount}</span>
          </button>
          <IconBtn t={t} onClick={onToggleTTS} active={tts} title="Voz de Vita">
            {tts ? Icon.volume({ s: 17, c: t.accent }) : Icon.volumeOff({ s: 17, c: t.textSoft })}
          </IconBtn>
          <IconBtn t={t} onClick={onToggleTheme} title="Tema">
            {t.dark ? Icon.sun({ s: 17 }) : Icon.moon({ s: 17 })}
          </IconBtn>
        </div>
      </div>

      {/* waveform presence */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: 2 }}>
        <Waveform state={phase} variant={waveStyle} accent={persona.accent} accentDeep={persona.accentDeep} size={128} />
        <StatePill phase={phase} t={t} persona={persona} />
      </div>

      {/* transcript */}
      <div ref={scrollRef} style={{ flex: 1, overflowY: 'auto', padding: '16px 18px 8px', display: 'flex', flexDirection: 'column', gap: 14, width: '100%', maxWidth: 820, margin: '0 auto' }}>
        {conv.messages.map((m, i) => (
          <MessageBubble key={i} m={m} t={t} latest={i === conv.messages.length - 1} />
        ))}
        {conv.loading && (
          <div style={{ display: 'flex', gap: 9, alignItems: 'flex-end' }}>
            <VitaDot t={t} size={24} active />
            <div style={{ padding: '13px 16px', borderRadius: '4px 17px 17px 17px', background: t.dark ? 'rgba(255,255,255,0.06)' : '#fff', border: `1px solid ${t.stroke}`, display: 'flex', gap: 5 }}>
              {[0,1,2].map(i => <span key={i} style={{ width: 7, height: 7, borderRadius: '50%', background: t.muted, animation: `vitaPulse 1.1s ${i*0.18}s ease-in-out infinite` }} />)}
            </div>
          </div>
        )}
        {conv.done && !conv.loading && !returning && (
          <button onClick={conv.onFinish} style={{
            margin: '6px auto 2px', padding: '13px 22px', borderRadius: 16, cursor: 'pointer', border: 'none',
            background: `linear-gradient(135deg, ${persona.accent}, ${persona.accentDeep})`, color: t.onAccent,
            fontFamily: "'Inter', system-ui, sans-serif", fontSize: 15.5, fontWeight: 700,
            boxShadow: `0 10px 26px ${hexA(persona.accent, 0.4)}`, display: 'flex', alignItems: 'center', gap: 8,
            animation: 'vitaIn .4s both', WebkitTapHighlightColor: 'transparent',
          }}>
            {Icon.sparkle({ s: 17, c: t.onAccent })} Ver mi análisis de salud
          </button>
        )}
        {!conv.done && !conv.loading && !returning && profileCount >= 6 && (
          <button onClick={conv.onFinish} style={{
            margin: '4px auto 0', padding: '9px 16px', borderRadius: 999, cursor: 'pointer',
            border: `1px solid ${t.stroke}`, background: t.dark ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.7)',
            color: t.textSoft, fontFamily: "'Inter', system-ui, sans-serif", fontSize: 12.5, fontWeight: 600,
            display: 'flex', alignItems: 'center', gap: 6, WebkitTapHighlightColor: 'transparent', animation: 'vitaIn .4s both',
          }}>
            Ya terminé · ver mi análisis {Icon.arrowRight({ s: 14, c: t.textSoft })}
          </button>
        )}
      </div>

      {/* live profile peek */}
      {profileCount > 0 && (
        <div style={{ display: 'flex', gap: 8, overflowX: 'auto', padding: '4px 18px 10px', width: '100%', maxWidth: 820, margin: '0 auto' }}>
          {Object.entries(conv.profile).slice(0, 8).map(([k, v]) => (
            <ProfileChip key={k} label={PROFILE_LABELS[k] || k} value={v} t={t} />
          ))}
        </div>
      )}

      {/* ── Barra de llamada ─────────────────────────────────────────
          Sustituye al pulsar-para-hablar. El estado es SIEMPRE visible:
          en una conversación por voz, no saber si te están oyendo es peor
          que un fallo técnico. */}
      {llamada.activa && (
        <div style={{ width: '100%', maxWidth: 820, margin: '0 auto', padding: '0 18px 10px' }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 14,
            padding: '14px 16px', borderRadius: 14,
            background: llamada.turnoDelPaciente ? p.primarySoft : p.surface,
            border: `1.5px solid ${llamada.turnoDelPaciente ? p.primary : p.border}`,
            transition: 'background .25s, border-color .25s',
          }}>
            <span style={{
              width: 40, height: 40, borderRadius: '50%', flexShrink: 0,
              display: 'grid', placeItems: 'center',
              background: llamada.turnoDelPaciente ? p.primary : p.bg,
              color: llamada.turnoDelPaciente ? '#fff' : p.textMuted,
              position: 'relative',
            }}>
              {llamada.estado === 'hablando'
                ? Icon.volume({ s: 19, c: p.textMuted })
                : Icon.mic({ s: 19, c: llamada.turnoDelPaciente ? '#fff' : p.textMuted })}
              {llamada.estado === 'escuchando' && (
                <span style={{ position: 'absolute', inset: -5, borderRadius: '50%',
                  border: `2px solid ${p.primary}`, animation: 'vitaRipple 1.4s ease-out infinite' }} />
              )}
            </span>

            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600,
                color: llamada.turnoDelPaciente ? p.primaryDark : p.textMuted }}>
                {llamada.estado === 'pausado' ? 'Llamada en pausa' : llamada.etiqueta}
              </div>
              <div style={{ fontSize: 13, color: p.text, marginTop: 2, minHeight: 18,
                overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                {llamada.parcial || (llamada.turnoDelPaciente ? 'Habla cuando quieras. Me callo sola cuando termines.' : '')}
              </div>
            </div>

            <button onClick={() => (llamada.estado === 'pausado' ? llamada.reanudar() : llamada.pausar())}
              title={llamada.estado === 'pausado' ? 'Reanudar' : 'Pausar'}
              style={{ width: 38, height: 38, borderRadius: 10, flexShrink: 0, cursor: 'pointer',
                border: `1px solid ${p.border}`, background: p.surface, color: p.text,
                display: 'grid', placeItems: 'center', fontSize: 15 }}>
              {llamada.estado === 'pausado' ? '▶' : '❚❚'}
            </button>

            <button onClick={llamada.colgar} title="Terminar llamada"
              style={{ height: 38, padding: '0 14px', borderRadius: 10, flexShrink: 0, cursor: 'pointer',
                border: 'none', background: p.danger, color: '#fff', fontSize: 13, fontWeight: 600 }}>
              Colgar
            </button>
          </div>
        </div>
      )}

      {/* Fallo del reconocedor: se muestra en pantalla, no sólo en consola */}
      {llamada.errorEscucha && (
        <div style={{ width: '100%', maxWidth: 820, margin: '0 auto', padding: '0 18px 10px' }}>
          <div style={{
            display: 'flex', alignItems: 'flex-start', gap: 10,
            padding: '12px 14px', borderRadius: 12,
            background: t.dark ? 'rgba(248,113,113,0.12)' : '#FEF2F2',
            border: `1px solid ${t.dark ? 'rgba(248,113,113,0.35)' : '#FECACA'}`,
          }}>
            <span style={{ flexShrink: 0, marginTop: 1 }}>{Icon.alert({ s: 16, c: p.danger })}</span>
            <div style={{ flex: 1, fontSize: 12.5, lineHeight: 1.5, color: p.text }}>
              {llamada.errorEscucha}
            </div>
            <button onClick={llamada.limpiarError} style={{
              border: 'none', background: 'transparent', cursor: 'pointer',
              color: p.textMuted, fontSize: 16, lineHeight: 1, padding: 2, flexShrink: 0,
            }}>×</button>
          </div>
        </div>
      )}

      {/* Invitación a la llamada, cuando no está activa */}
      {!llamada.activa && llamada.soportado && (
        <div style={{ width: '100%', maxWidth: 820, margin: '0 auto', padding: '0 18px 10px' }}>
          <button onClick={() => llamada.llamar(conv.personaId)} style={{
            width: '100%', padding: '11px 16px', borderRadius: 12, cursor: 'pointer',
            border: `1.5px solid ${p.border}`, background: p.surface, color: p.primaryDark,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
            fontSize: 13.5, fontWeight: 600,
          }}>
            {Icon.mic({ s: 17, c: p.primary })}
            Hablar con Vita como en una llamada
          </button>
        </div>
      )}

      {/* input bar */}
      <div style={{ position: 'relative', padding: '10px 16px 18px', display: 'flex', alignItems: 'center', gap: 10, width: '100%', maxWidth: 820, margin: '0 auto' }}>
        {/* attach menu */}
        {showDocs && (
          <>
            <div onClick={() => setShowDocs(false)} style={{ position: 'absolute', inset: 0, zIndex: 1 }} />
            <div style={{ position: 'absolute', left: 16, bottom: 92, zIndex: 2, width: 256, borderRadius: 18, overflow: 'hidden',
              background: t.dark ? t.surfaceSolid : '#FFFFFF', border: `1px solid ${t.stroke}`, boxShadow: t.shadow, animation: 'vitaIn .2s both' }}>
              <div style={{ padding: '11px 14px 7px', fontSize: 11.5, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', color: t.muted }}>Comparte tus documentos</div>
              {DOC_TYPES.map((d, i) => (
                <button key={i} onClick={() => { conv.attach(d.label); setShowDocs(false); }} style={{
                  width: '100%', display: 'flex', alignItems: 'center', gap: 11, padding: '11px 14px', cursor: 'pointer',
                  border: 'none', borderTop: `1px solid ${t.stroke}`, background: 'transparent', textAlign: 'left',
                  fontFamily: "'Inter', system-ui, sans-serif", fontSize: 14.5, fontWeight: 500, color: t.text, WebkitTapHighlightColor: 'transparent',
                }}>
                  <span style={{ width: 32, height: 32, borderRadius: 9, flexShrink: 0, display: 'grid', placeItems: 'center', background: hexA(persona.accent, 0.14) }}>{Icon[d.icon]({ s: 17, c: persona.accent })}</span>
                  {d.label}
                </button>
              ))}
            </div>
          </>
        )}

        <button onClick={() => setShowDocs(s => !s)} title="Adjuntar documentos" style={{
          width: 44, height: 44, borderRadius: 13, flexShrink: 0, cursor: 'pointer', display: 'grid', placeItems: 'center',
          border: `1px solid ${showDocs ? hexA(persona.accent, 0.5) : t.stroke}`,
          background: showDocs ? hexA(persona.accent, 0.14) : (t.dark ? 'rgba(255,255,255,0.05)' : '#fff'),
          color: showDocs ? persona.accent : t.textSoft, WebkitTapHighlightColor: 'transparent',
        }}>{Icon.clip({ s: 20, c: showDocs ? persona.accent : t.textSoft })}</button>

        <div style={{
          flex: 1, display: 'flex', alignItems: 'center', borderRadius: 16, padding: '4px 4px 4px 16px',
          background: t.dark ? 'rgba(255,255,255,0.06)' : '#FFFFFF', border: `1px solid ${t.stroke}`,
        }}>
          <input id="vita-input" disabled={llamada.activa && !llamada.turnoDelPaciente} value={voice.listening ? (voice.interim || '') : text}
            onChange={e => setText(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter') submit(); }}
            placeholder={voice.listening ? 'Escuchando…' : 'Escribe o toca el micrófono…'}
            readOnly={voice.listening}
            style={{
              flex: 1, border: 'none', outline: 'none', background: 'transparent',
              fontSize: 15.5, color: t.text, fontFamily: "'Inter', system-ui, sans-serif", minWidth: 0,
            }} />
          {text.trim() && !voice.listening && (
            <button onClick={() => submit()} style={{ width: 40, height: 40, borderRadius: 12, border: 'none', cursor: 'pointer', display: 'grid', placeItems: 'center', background: hexA(t.accent, 0.15), color: t.accent }}>
              {Icon.send({ s: 20, c: t.accent })}
            </button>
          )}
        </div>
        <button onClick={micTap} style={{
          width: 56, height: 56, borderRadius: '50%', flexShrink: 0, cursor: 'pointer',
          display: 'grid', placeItems: 'center', position: 'relative',
          background: (voice.listening || voice.speaking) ? `linear-gradient(135deg, ${persona.accent}, ${persona.accentDeep})` : (t.dark ? 'rgba(255,255,255,0.08)' : '#fff'),
          color: (voice.listening || voice.speaking) ? t.onAccent : t.accent,
          border: (voice.listening || voice.speaking) ? 'none' : `1px solid ${t.stroke}`,
          boxShadow: (voice.listening || voice.speaking) ? `0 8px 22px ${hexA(persona.accent, 0.5)}` : t.shadow,
          WebkitTapHighlightColor: 'transparent',
        }}>
          {voice.listening && <span style={{ position: 'absolute', inset: -4, borderRadius: '50%', border: `2px solid ${persona.accent}`, animation: 'vitaRipple 1.4s ease-out infinite' }} />}
          {voice.speaking ? Icon.volume({ s: 24, c: t.onAccent }) : Icon.mic({ s: 24 })}
        </button>
      </div>
    </Stage>
  );
}

Object.assign(window, { TWEAK_DEFAULTS, Stage, Splash, BigButton, ChooseVita, Conversation });