/* Nuya — Mockups propostos v2
   Mantém a linguagem visual original: Inter, roxo primário, lavanda,
   cantos arredondados (pills), fundos branco/bege. Só muda layout e hierarquia.
*/

// ═════════════════════════════════════════════════════════════════
// Count-up hook
// ═════════════════════════════════════════════════════════════════
function useCountUp(target, { duration = 1400, decimals = 1, delay = 200 } = {}) {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    let raf, start;
    const timer = setTimeout(() => {
      const tick = (t) => {
        if (!start) start = t;
        const p = Math.min((t - start) / duration, 1);
        const eased = 1 - Math.pow(1 - p, 3);
        setVal(target * eased);
        if (p < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
    }, delay);
    return () => { clearTimeout(timer); if (raf) cancelAnimationFrame(raf); };
  }, [target]);
  return val.toFixed(decimals);
}

// ═════════════════════════════════════════════════════════════════
// HOME v2 — mesmo sistema visual, layout repriorizado
// ═════════════════════════════════════════════════════════════════
function HomeProposedV2() {
  const score = useCountUp(8.2, { duration: 1600, decimals: 1, delay: 300 });
  return (
    <div style={{ height: '100%', background: 'white', position: 'relative', overflow: 'hidden' }}>
      {/* Header greeting */}
      <div style={{ padding: '16px 20px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 40, height: 40, borderRadius: 20, background: '#e8e3fb', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#402e94', fontWeight: 600, fontFamily: 'Inter' }}>C</div>
            <div>
              <div style={{ fontSize: 11, color: 'rgba(64,46,148,0.6)', fontFamily: 'Inter' }}>Bom dia,</div>
              <div style={{ fontSize: 16, fontWeight: 700, color: '#402e94', fontFamily: 'Inter', letterSpacing: '-0.01em' }}>Cami</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <div style={{ width: 36, height: 36, borderRadius: 18, background: '#f8f6f1', border: '1px solid #fbe2e2', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#402e94', position: 'relative' }}>
              {Ico.bell('#402e94')}
              <div style={{ position: 'absolute', top: 8, right: 9, width: 7, height: 7, borderRadius: 4, background: '#ff7a5c', border: '1.5px solid white' }} />
            </div>
          </div>
        </div>
      </div>

      {/* Score hero card — lavanda grande */}
      <div style={{ margin: '18px 20px 0', background: 'linear-gradient(135deg, #efeafd 0%, #ddd2f6 100%)', borderRadius: 28, padding: '20px 22px', position: 'relative', overflow: 'hidden', animation: 'scaleIn 0.7s cubic-bezier(0.16,1,0.3,1) both' }}>
        <img src="assets/shape-sunburst-blue.png" style={{ position: 'absolute', width: 200, right: -60, top: -60, opacity: 0.16, pointerEvents: 'none', animation: 'spinSlow 40s linear infinite' }} alt=""/>
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <div style={{ fontSize: 11, color: '#402e94', opacity: 0.7, fontFamily: 'Inter', fontWeight: 500 }}>Health Score</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 2 }}>
              <div style={{ fontSize: 54, fontWeight: 700, color: '#402e94', fontFamily: 'Inter', letterSpacing: '-0.04em', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>{score}</div>
              <div style={{ fontSize: 16, color: 'rgba(64,46,148,0.5)', fontWeight: 500 }}>/10</div>
            </div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, marginTop: 8, background: 'white', padding: '5px 10px', borderRadius: 999, fontSize: 10, fontWeight: 600, color: '#2e7d4f', animation: 'slideInUp 0.6s 1.3s cubic-bezier(0.16,1,0.3,1) both' }}>
              <span style={{ fontSize: 11 }}>↑</span> +0.3 este mês
            </div>
          </div>
          <div style={{ background: 'white', borderRadius: 999, padding: '5px 10px', fontSize: 10, fontWeight: 600, color: '#402e94', animation: 'slideInUp 0.6s 1.3s cubic-bezier(0.16,1,0.3,1) both' }}>Muito bom</div>
        </div>

        {/* Barras de sistemas (substitui as 8 bolinhas decorativas) */}
        <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, position: 'relative' }}>
          {[
            { n: 'Cardio', v: 92, c: '#402e94' },
            { n: 'Metab.', v: 74, c: '#c04626' },
            { n: 'Sono', v: 88, c: '#402e94' },
            { n: 'Energia', v: 81, c: '#402e94' },
          ].map((s, i) => (
            <div key={i} style={{ animation: `slideInUp 0.5s ${0.6 + i*0.1}s cubic-bezier(0.16,1,0.3,1) both` }}>
              <div style={{ height: 4, background: 'rgba(64,46,148,0.15)', borderRadius: 2, overflow: 'hidden' }}>
                <div style={{ width: `${s.v}%`, height: '100%', background: s.c, borderRadius: 2, transformOrigin: 'left', animation: `growBar 0.9s ${0.8 + i*0.1}s cubic-bezier(0.16,1,0.3,1) both` }} />
              </div>
              <div style={{ fontSize: 9, color: 'rgba(64,46,148,0.7)', marginTop: 5, fontFamily: 'Inter', fontWeight: 500 }}>{s.n}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Duas ações primárias (não 6) */}
      <div style={{ padding: '14px 20px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <div style={{ background: 'linear-gradient(135deg, #4d3aa8 0%, #372582 100%)', borderRadius: 22, padding: '14px 14px 12px', color: 'white', minHeight: 88, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', overflow: 'hidden', boxShadow: '0 4px 12px -4px rgba(64,46,148,0.35)' }}>
          <img src="assets/shape-sparkle-lilac.png" style={{ position: 'absolute', width: 80, right: -18, top: -18, opacity: 0.22, pointerEvents: 'none' }} alt=""/>
          <div style={{ width: 28, height: 28, borderRadius: 14, background: 'rgba(255,255,255,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>{Ico.folder('white')}</div>
          <div style={{ position: 'relative' }}>
            <div style={{ fontSize: 13, fontWeight: 700, fontFamily: 'Inter' }}>Importar exame</div>
            <div style={{ fontSize: 10, opacity: 0.75, marginTop: 1 }}>PDF ou foto</div>
          </div>
        </div>
        <div style={{ background: 'linear-gradient(135deg, #e8efff 0%, #c9dbf5 100%)', borderRadius: 22, padding: '14px 14px 12px', color: '#402e94', minHeight: 88, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', overflow: 'hidden' }}>
          <img src="assets/shape-sunburst-blue.png" style={{ position: 'absolute', width: 90, right: -26, bottom: -30, opacity: 0.22, pointerEvents: 'none' }} alt=""/>
          <div style={{ width: 28, height: 28, borderRadius: 14, background: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', boxShadow: '0 2px 6px rgba(64,46,148,0.12)' }}>{Ico.spark('#402e94')}</div>
          <div style={{ position: 'relative' }}>
            <div style={{ fontSize: 13, fontWeight: 700, fontFamily: 'Inter' }}>Falar com Nuya</div>
            <div style={{ fontSize: 10, opacity: 0.7, marginTop: 1 }}>Tire dúvidas</div>
          </div>
        </div>
      </div>

      {/* Seção "Hoje" */}
      <div style={{ padding: '18px 20px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: '#402e94', fontFamily: 'Inter' }}>Seu dia</div>
          <div style={{ fontSize: 10, color: 'rgba(64,46,148,0.55)', fontFamily: 'Inter', fontWeight: 500 }}>Terça · 21 abr</div>
        </div>

        {/* Streak banner — padrão celebração de meta */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: '#dcefe0', borderRadius: 20, marginBottom: 6, animation: 'bounceIn 0.8s 1.6s cubic-bezier(0.16,1,0.5,1) both' }}>
          <img src="assets/shape-star8-green.png" style={{ width: 28, height: 28, flexShrink: 0, animation: 'pulse 2.4s ease-in-out infinite', animationDelay: '2.2s' }} alt=""/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, fontWeight: 700, color: '#2e7d4f', fontFamily: 'Inter' }}>14 dias de Losartana ✓</div>
            <div style={{ fontSize: 10, color: 'rgba(46,125,79,0.75)' }}>Seu maior streak este ano</div>
          </div>
        </div>

        {/* Item 1 — medicamento tomado */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', background: 'white', border: '1px solid #fbe2e2', borderRadius: 20, marginBottom: 6, animation: 'slideInUp 0.5s 1.8s cubic-bezier(0.16,1,0.3,1) both' }}>
          <div style={{ width: 32, height: 32, borderRadius: 16, background: '#dcefe0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{Ico.pill('#2e7d4f')}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: '#402e94', fontFamily: 'Inter', textDecoration: 'line-through', opacity: 0.6 }}>Losartana 50mg</div>
            <div style={{ fontSize: 10, color: 'rgba(64,46,148,0.55)' }}>07:00 · tomado</div>
          </div>
          <div style={{ fontSize: 11, color: '#2e7d4f' }}>✓</div>
        </div>

        {/* Item 2 — consulta */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', background: 'white', border: '1px solid #fbe2e2', borderRadius: 20, marginBottom: 6, animation: 'slideInUp 0.5s 1.95s cubic-bezier(0.16,1,0.3,1) both' }}>
          <div style={{ width: 32, height: 32, borderRadius: 16, background: '#e8e3fb', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{Ico.cal('#402e94')}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: '#402e94', fontFamily: 'Inter' }}>Dra. Helena — Endócrino</div>
            <div style={{ fontSize: 10, color: 'rgba(64,46,148,0.55)' }}>14:30 · em 5h</div>
          </div>
          <div style={{ background: '#402e94', color: 'white', fontSize: 10, padding: '4px 10px', borderRadius: 999, fontWeight: 600 }}>Ver</div>
        </div>

        {/* Item 3 — suplemento noite */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', background: 'white', border: '1px solid #fbe2e2', borderRadius: 20, animation: 'slideInUp 0.5s 2.1s cubic-bezier(0.16,1,0.3,1) both' }}>
          <div style={{ width: 32, height: 32, borderRadius: 16, background: '#fbf1d2', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{Ico.flask('#402e94')}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: '#402e94', fontFamily: 'Inter' }}>Vitamina D — 1 cápsula</div>
            <div style={{ fontSize: 10, color: 'rgba(64,46,148,0.55)' }}>22:00 · após jantar</div>
          </div>
          <div style={{ width: 22, height: 22, borderRadius: 11, border: '1.5px solid #fbe2e2' }} />
        </div>
      </div>

      <TabBarCurrent active={0}/>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════
// HISTÓRICO v2 — mantém ideia, mas com linguagem original
// ═════════════════════════════════════════════════════════════════
function HistoricoProposedV2() {
  return (
    <div style={{ height: '100%', background: 'white', padding: '0 20px', position: 'relative', overflow: 'hidden' }}>
      {/* Back + title */}
      <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 32, height: 32, borderRadius: 16, background: '#f8f6f1', border: '1px solid #fbe2e2', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#402e94' }}>←</div>
        <div>
          <div style={{ fontSize: 18, fontWeight: 700, color: '#402e94', fontFamily: 'Inter', letterSpacing: '-0.01em' }}>Meu Histórico</div>
          <div style={{ fontSize: 10, color: 'rgba(64,46,148,0.6)' }}>Evolução ao longo do tempo</div>
        </div>
      </div>

      {/* Segmented period pills */}
      <div style={{ display: 'flex', gap: 4, marginTop: 14, background: '#f8f6f1', borderRadius: 999, padding: 4, border: '1px solid #fbe2e2' }}>
        {['3 meses', '6 meses', '1 ano', 'Tudo'].map((p, i) => (
          <div key={p} style={{
            flex: 1, textAlign: 'center', padding: '7px 0', borderRadius: 999,
            background: i === 2 ? '#402e94' : 'transparent',
            color: i === 2 ? 'white' : 'rgba(64,46,148,0.55)',
            fontSize: 10, fontWeight: 600, fontFamily: 'Inter',
          }}>{p}</div>
        ))}
      </div>

      {/* Hero trend card — lavanda */}
      <div style={{ marginTop: 14, background: 'linear-gradient(135deg, #efeafd 0%, #ddd2f6 100%)', borderRadius: 24, padding: '14px 16px 12px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <div style={{ fontSize: 10, color: 'rgba(64,46,148,0.7)', fontWeight: 500 }}>Colesterol LDL</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 2 }}>
              <div style={{ fontSize: 30, fontWeight: 700, color: '#402e94', fontFamily: 'Inter', letterSpacing: '-0.03em' }}>142</div>
              <div style={{ fontSize: 11, color: 'rgba(64,46,148,0.6)' }}>mg/dL</div>
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 10, color: '#c04626', background: 'white', padding: '4px 10px', borderRadius: 999, fontWeight: 600 }}>↑ Acima</div>
            <div style={{ fontSize: 9, color: 'rgba(64,46,148,0.6)', marginTop: 5 }}>ideal &lt;100</div>
          </div>
        </div>
        {/* Linha com banda de referência */}
        <svg width="100%" height="68" viewBox="0 0 280 68" style={{ marginTop: 8 }}>
          <rect x="0" y="36" width="280" height="16" fill="white" opacity="0.4" rx="4" />
          <line x1="0" y1="36" x2="280" y2="36" stroke="#402e94" strokeDasharray="2,3" strokeWidth="0.8" opacity="0.35"/>
          <path d="M8 54 L60 50 L112 42 L164 32 L216 22 L272 14" stroke="#402e94" strokeWidth="2" fill="none" strokeLinecap="round"
            strokeDasharray="400" strokeDashoffset="400"
            style={{ animation: 'drawLine 1.8s 0.5s cubic-bezier(0.65,0,0.35,1) forwards', '--draw-len': '400' }}/>
          {[[8,54],[60,50],[112,42],[164,32],[216,22]].map(([x,y],i)=>
            <circle key={i} cx={x} cy={y} r="3" fill="white" stroke="#402e94" strokeWidth="1.5"
              style={{ opacity: 0, animation: `fadeIn 0.3s ${0.8 + i*0.2}s forwards` }}/>
          )}
          <circle cx="272" cy="14" r="5" fill="#c04626" style={{ opacity: 0, animation: 'bounceIn 0.6s 2.0s cubic-bezier(0.16,1,0.5,1) forwards' }}/>
          <circle cx="272" cy="14" r="9" fill="#c04626" opacity="0.2" style={{ animation: 'pulse 1.8s 2.3s ease-in-out infinite', transformOrigin: '272px 14px' }}/>
        </svg>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 9, color: 'rgba(64,46,148,0.55)', fontWeight: 500 }}>
          <span>Dez</span><span>Fev</span><span>Abr</span>
        </div>
      </div>

      {/* Celebração — marcador em faixa há X meses */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: '#dcefe0', borderRadius: 18, marginTop: 10, animation: 'bounceIn 0.7s 2.6s cubic-bezier(0.16,1,0.5,1) both' }}>
        <img src="assets/shape-star8-green.png" style={{ width: 26, height: 26, flexShrink: 0, animation: 'pulse 2.4s 3s ease-in-out infinite' }} alt=""/>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11.5, fontWeight: 700, color: '#2e7d4f', fontFamily: 'Inter' }}>Glicemia na faixa há 6 meses</div>
          <div style={{ fontSize: 9.5, color: 'rgba(46,125,79,0.75)' }}>Continue assim — próxima meta: 12 meses</div>
        </div>
      </div>

      {/* Section header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 14, marginBottom: 8 }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: '#402e94', fontFamily: 'Inter' }}>Marcadores</div>
        <div style={{ fontSize: 10, color: 'rgba(64,46,148,0.55)' }}>12 ativos</div>
      </div>

      {/* Lista densa arredondada */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {[
          { n: 'Glicemia jejum', v: '98', u: 'mg/dL', s: 'normal', c: '#2e7d4f', bg: '#dcefe0' },
          { n: 'Hemoglobina', v: '13.2', u: 'g/dL', s: 'normal', c: '#2e7d4f', bg: '#dcefe0' },
          { n: 'TSH', v: '4.8', u: 'μIU/mL', s: 'limite', c: '#c47a07', bg: '#fbf1d2' },
          { n: 'Vitamina D', v: '22', u: 'ng/mL', s: 'baixo', c: '#1565c0', bg: '#dde9f8' },
        ].map((r, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '10px 14px', background: 'white',
            border: '1px solid #fbe2e2', borderRadius: 18,
            animation: `slideInUp 0.5s ${2.8 + i*0.1}s cubic-bezier(0.16,1,0.3,1) both`,
          }}>
            <div style={{ width: 4, height: 28, background: r.c, borderRadius: 2 }} />
            <div style={{ flex: 1, fontSize: 12, fontWeight: 600, color: '#402e94', fontFamily: 'Inter' }}>{r.n}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 3 }}>
              <div style={{ fontSize: 15, fontWeight: 700, color: '#402e94', fontFamily: 'Inter' }}>{r.v}</div>
              <div style={{ fontSize: 9, color: 'rgba(64,46,148,0.5)' }}>{r.u}</div>
            </div>
            <div style={{ fontSize: 9, color: r.c, background: r.bg, padding: '3px 9px', borderRadius: 999, fontWeight: 600 }}>{r.s}</div>
          </div>
        ))}
      </div>
      <TabBarCurrent active={1}/>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════
// CHAT v2 — mantém bolhas roxas, mas com data cards inline
// ═════════════════════════════════════════════════════════════════
function ChatProposedV2() {
  return (
    <div style={{ height: '100%', background: 'white', position: 'relative', display: 'flex', flexDirection: 'column' }}>
      {/* Header */}
      <div style={{ padding: '14px 20px 12px', borderBottom: '1px solid #fbe2e2', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 36, height: 36, borderRadius: 18, background: 'linear-gradient(135deg, #efeafd 0%, #ddd2f6 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#402e94' }}>{Ico.spark('#402e94')}</div>
          <div>
            <div style={{ fontSize: 14, fontWeight: 700, color: '#402e94', fontFamily: 'Inter' }}>Nuya IA</div>
            <div style={{ fontSize: 9, color: 'rgba(64,46,148,0.55)', display: 'flex', alignItems: 'center', gap: 4 }}>
              <span style={{ width: 5, height: 5, borderRadius: 3, background: '#2e7d4f' }} /> Contexto carregado
            </div>
          </div>
        </div>
        <div style={{ width: 32, height: 32, borderRadius: 16, background: '#f8f6f1', border: '1px solid #fbe2e2', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#402e94', fontSize: 14 }}>⋯</div>
      </div>

      <div style={{ flex: 1, padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 10, overflow: 'hidden' }}>
        {/* Date pill */}
        <div style={{ alignSelf: 'center', fontSize: 9, color: 'rgba(64,46,148,0.5)', background: '#f8f6f1', padding: '4px 10px', borderRadius: 999, fontWeight: 600 }}>Terça · 21 abr</div>

        {/* Assistant — bolha lavanda (mantém estilo original) */}
        <div style={{ alignSelf: 'flex-start', maxWidth: '85%', background: '#e8e3fb', borderRadius: '20px 20px 20px 6px', padding: '10px 14px', fontSize: 12, color: '#402e94', lineHeight: 1.5, fontFamily: 'Inter', animation: 'slideInRight 0.5s 0.2s cubic-bezier(0.16,1,0.3,1) both' }}>
          Olá Cami! Seu LDL subiu para <strong style={{ color: '#c04626' }}>142 mg/dL</strong> — o ideal é abaixo de 100.
        </div>

        {/* Data card inline (NOVA) — mesmo estilo de cards do app */}
        <div style={{ alignSelf: 'flex-start', maxWidth: '90%', background: 'white', border: '1px solid #fbe2e2', borderRadius: 18, padding: '10px 14px', boxShadow: '0 1px 3px rgba(64,46,148,0.05)', animation: 'slideInRight 0.5s 0.6s cubic-bezier(0.16,1,0.3,1) both' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div style={{ fontSize: 10, fontWeight: 700, color: '#402e94', fontFamily: 'Inter' }}>LDL — últimos 6 meses</div>
            <div style={{ fontSize: 9, color: '#c04626', fontWeight: 700 }}>+18%</div>
          </div>
          <svg width="100%" height="36" viewBox="0 0 240 36" style={{ marginTop: 6 }}>
            <path d="M4 30 L50 28 L96 24 L142 18 L188 14 L236 8" stroke="#402e94" strokeWidth="2" fill="none" strokeLinecap="round"
              strokeDasharray="260" strokeDashoffset="260"
              style={{ animation: 'drawLine 1.2s 1.0s cubic-bezier(0.65,0,0.35,1) forwards', '--draw-len': '260' }}/>
            <circle cx="236" cy="8" r="3.5" fill="#c04626" style={{ opacity: 0, animation: 'bounceIn 0.5s 2.0s forwards' }}/>
          </svg>
        </div>

        {/* User — bolha roxa (mantém estilo original) */}
        <div style={{ alignSelf: 'flex-end', maxWidth: '80%', background: '#402e94', color: 'white', borderRadius: '20px 20px 6px 20px', padding: '10px 14px', fontSize: 12, lineHeight: 1.5, fontFamily: 'Inter', animation: 'slideInLeft 0.5s 2.3s cubic-bezier(0.16,1,0.3,1) both' }}>
          Como posso reduzir?
        </div>

        {/* Typing indicator (NOVA) — 3 pontos pulando */}
        <div style={{ alignSelf: 'flex-start', background: '#e8e3fb', borderRadius: '20px 20px 20px 6px', padding: '12px 16px', display: 'flex', gap: 4, animation: 'fadeIn 0.3s 2.9s both' }}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: '#402e94', animation: 'typingDot 1.2s 2.9s infinite' }}/>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: '#402e94', animation: 'typingDot 1.2s 3.05s infinite' }}/>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: '#402e94', animation: 'typingDot 1.2s 3.2s infinite' }}/>
        </div>

        {/* Assistant reply com lista numerada (nova) */}
        <div style={{ alignSelf: 'flex-start', maxWidth: '90%', background: '#e8e3fb', borderRadius: '20px 20px 20px 6px', padding: '12px 14px', fontSize: 12, color: '#402e94', lineHeight: 1.5, fontFamily: 'Inter', animation: 'slideInRight 0.5s 4.0s cubic-bezier(0.16,1,0.3,1) both' }}>
          <div style={{ marginBottom: 8 }}>Três alavancas com maior impacto:</div>
          {['Reduzir gorduras saturadas', 'Aeróbico 150 min / semana', 'Aumentar fibras solúveis'].map((x, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 8, marginBottom: i < 2 ? 5 : 0, animation: `slideInUp 0.4s ${4.3 + i*0.12}s cubic-bezier(0.16,1,0.3,1) both` }}>
              <div style={{ width: 16, height: 16, borderRadius: 8, background: '#402e94', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 700, flexShrink: 0, marginTop: 1 }}>{i+1}</div>
              <div style={{ fontSize: 11.5 }}>{x}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Suggestion chips */}
      <div style={{ padding: '0 20px 6px', display: 'flex', gap: 6, overflow: 'hidden' }}>
        {['Plano alimentar', 'Ver evolução', 'Avisar cardio?'].map((s) => (
          <div key={s} style={{
            fontSize: 10, padding: '7px 12px', borderRadius: 999,
            background: '#f8f6f1', border: '1px solid #fbe2e2',
            fontWeight: 600, color: '#402e94', whiteSpace: 'nowrap', fontFamily: 'Inter',
          }}>{s}</div>
        ))}
      </div>
      {/* Input — mantém pill roxo, só mais alto */}
      <div style={{ padding: '8px 20px 86px' }}>
        <div style={{
          height: 48, background: '#f8f6f1', borderRadius: 24, border: '1px solid #fbe2e2',
          display: 'flex', alignItems: 'center', padding: '0 6px 0 18px', gap: 8,
        }}>
          <div style={{ flex: 1, fontSize: 12, color: 'rgba(64,46,148,0.5)', fontFamily: 'Inter' }}>Pergunte sobre sua saúde…</div>
          <div style={{ width: 36, height: 36, borderRadius: 18, background: 'linear-gradient(135deg, #4d3aa8 0%, #372582 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 10px rgba(64,46,148,0.3)' }}>
            {Ico.send('white')}
          </div>
        </div>
      </div>
      <TabBarCurrent active={3}/>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════
// CALENDÁRIO v2 — linguagem original (pills, pastéis, arredondado)
// ═════════════════════════════════════════════════════════════════
function CalendarProposedV2() {
  const days = ['D','S','T','Q','Q','S','S'];
  const grid = [null,null,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
  return (
    <div style={{ height: '100%', background: 'white', padding: '0 20px', position: 'relative', overflow: 'hidden' }}>
      {/* Header */}
      <div style={{ marginTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 18, fontWeight: 700, color: '#402e94', fontFamily: 'Inter', letterSpacing: '-0.01em' }}>Abril 2026</div>
          <div style={{ fontSize: 10, color: 'rgba(64,46,148,0.6)' }}>3 consultas · 2 exames</div>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          <div style={{ width: 32, height: 32, borderRadius: 16, background: '#f8f6f1', border: '1px solid #fbe2e2', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#402e94' }}>{Ico.search('#402e94')}</div>
          <div style={{ width: 32, height: 32, borderRadius: 16, background: 'linear-gradient(135deg, #4d3aa8 0%, #372582 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 10px rgba(64,46,148,0.3)' }}>{Ico.plus('white')}</div>
        </div>
      </div>

      {/* Mini calendar */}
      <div style={{ marginTop: 12, background: 'white', border: '1px solid #fbe2e2', borderRadius: 22, padding: '12px 10px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 2, marginBottom: 6 }}>
          {days.map((d, i) => <div key={i} style={{ textAlign: 'center', fontSize: 9, color: 'rgba(64,46,148,0.5)', fontWeight: 600, fontFamily: 'Inter' }}>{d}</div>)}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 2 }}>
          {grid.map((d, i) => {
            if (!d) return <div key={i} />;
            const today = d === 21;
            const hasEvent = [3,9,15,24,28].includes(d);
            const eventColor = d === 24 ? '#402e94' : '#c47a07';
            return (
              <div key={i} style={{
                aspectRatio: 1, borderRadius: 999, display: 'flex', flexDirection: 'column',
                alignItems: 'center', justifyContent: 'center', gap: 2,
                background: today ? '#402e94' : 'transparent',
                color: today ? 'white' : '#402e94',
                fontSize: 11, fontWeight: today ? 700 : 500, fontFamily: 'Inter',
                boxShadow: today ? '0 0 0 0 rgba(64,46,148,0.4)' : 'none',
                animation: today ? 'pulse 2.4s ease-in-out infinite' : 'none',
              }}>
                <div>{d}</div>
                {hasEvent && !today && <div style={{ width: 4, height: 4, borderRadius: 2, background: eventColor }} />}
              </div>
            );
          })}
        </div>
      </div>

      {/* Legend */}
      <div style={{ display: 'flex', gap: 12, marginTop: 10, fontSize: 9, color: 'rgba(64,46,148,0.7)', fontFamily: 'Inter', fontWeight: 500 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 6, height: 6, borderRadius: 3, background: '#402e94' }} />Consulta</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 6, height: 6, borderRadius: 3, background: '#c47a07' }} />Exame</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 6, height: 6, borderRadius: 3, background: '#2e7d4f' }} />Medicação</div>
      </div>

      {/* Agenda */}
      <div style={{ marginTop: 16 }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: '#402e94', fontFamily: 'Inter', marginBottom: 8 }}>Próximos 7 dias</div>
        {[
          { d: '21', m: 'abr', day: 'Hoje', t: '14:30', title: 'Dra. Helena · Endócrino', sub: 'Hospital Sírio Libanês', c: '#402e94', bg: '#e8e3fb' },
          { d: '24', m: 'abr', day: 'Sex', t: '08:00', title: 'Exame de sangue', sub: 'Lab Fleury · em jejum', c: '#c47a07', bg: '#fbf1d2' },
          { d: '28', m: 'abr', day: 'Ter', t: 'diário', title: 'Vitamina D · fim do curso', sub: '7 dias restantes', c: '#2e7d4f', bg: '#dcefe0' },
        ].map((r, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '10px 12px', background: 'white', border: '1px solid #fbe2e2',
            borderRadius: 20, marginBottom: 6,
            animation: `slideInUp 0.5s ${0.4 + i*0.12}s cubic-bezier(0.16,1,0.3,1) both`,
          }}>
            <div style={{ width: 44, height: 44, borderRadius: 14, background: r.bg, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <div style={{ fontSize: 16, fontWeight: 700, color: r.c, fontFamily: 'Inter', lineHeight: 1, letterSpacing: '-0.02em' }}>{r.d}</div>
              <div style={{ fontSize: 8, color: r.c, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 1 }}>{r.m}</div>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                <div style={{ fontSize: 9, color: 'rgba(64,46,148,0.6)', fontWeight: 600 }}>{r.day} · {r.t}</div>
              </div>
              <div style={{ fontSize: 12, fontWeight: 600, color: '#402e94', fontFamily: 'Inter', marginTop: 1 }}>{r.title}</div>
              <div style={{ fontSize: 10, color: 'rgba(64,46,148,0.55)' }}>{r.sub}</div>
            </div>
            <div style={{ color: 'rgba(64,46,148,0.4)' }}>{Ico.chevR('currentColor')}</div>
          </div>
        ))}
      </div>
      <TabBarCurrent active={4}/>
    </div>
  );
}

Object.assign(window, {
  HomeProposedV3: HomeProposedV2,
  HistoricoProposedV3: HistoricoProposedV2,
  ChatProposedV3: ChatProposedV2,
  CalendarProposedV3: CalendarProposedV2,
});