/* global React, Reveal, Eyebrow, StepBadge, SlashMotif */
const { useState, useEffect, useRef } = React;

/* ============================================================
   SEÇÃO 2 — CONTA CORRENTE DO COLABORADOR
   ============================================================ */
function ContaCorrente() {
  return (
    <section className="gen-section" id="governanca" data-screen-label="02 Conta Corrente">
      <div className="gen-container">
        <div className="gen-grid gen-grid--12" style={{ alignItems: "stretch" }}>
          <div style={{ gridColumn: "span 5" }} className="gen-col-12-mobile">
            <Reveal><Eyebrow number="02 · 06">Governança da Equipe</Eyebrow></Reveal>
            <Reveal stagger={1}>
              <h2 className="gen-h2" style={{ marginTop: 0, marginBottom: 32 }}>
                Transparência de banco para sua equipe.<br />
                <span style={{ color: "var(--accent)" }}>Paz mental</span> para o seu caixa.
              </h2>
            </Reveal>
            <Reveal stagger={2}>
              <p className="gen-lead">
                Chega de "reuniões de cobrança" ou discussões no fim do mês para saber quem deve o quê.
                No GÊNESIS, cada profissional tem uma <strong style={{ color: "var(--fg)" }}>Conta Corrente individual</strong>,
                que funciona como um extrato bancário em tempo real.
              </p>
            </Reveal>
          </div>
          <div style={{ gridColumn: "span 7" }} className="gen-col-12-mobile gen-cc-phonecol">
            <Reveal stagger={2} className="gen-cc-phonereveal">
              <ExtratoBancarioMockup />
            </Reveal>
            <BankFloatingToasts />
          </div>
        </div>

        {/* Quadrados de benefícios — largura total, abaixo do texto + celular */}
        <Reveal stagger={1} as="div" className="gen-grid gen-grid--3 gen-cc-cards" style={{ marginTop: 56 }}>
          {[
            { n: "I", t: "Comissão Instantânea", d: "Serviço pago, comissão lançada no extrato do colaborador na hora." },
            { n: "II", t: "Vales e Consumo", d: "Vale, café ou produto: o sistema debita do saldo automaticamente." },
            { n: "III", t: "Fechamento em 1 Clique", d: "Sem cálculo manual — você confere um saldo já auditado e aceito." },
          ].map((f) => (
            <div key={f.n} className="gen-cc-card">
              <span className="gen-cc-card__bar" aria-hidden="true" />
              <div className="gen-cc-card__head">
                <StepBadge n={f.n} />
                <h3 className="gen-h3 gen-cc-card__t">{f.t}</h3>
              </div>
              <p className="gen-cc-card__d">{f.d}</p>
            </div>
          ))}
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .gen-col-12-mobile { grid-column: span 12 !important; grid-row: auto !important; }
        }
        /* Celular alinhado à altura do bloco de texto (título → texto) */
        .gen-cc-phonecol { position: relative; min-height: 460px; }
        .gen-cc-phonereveal { position: absolute; inset: 0; }
        .gen-cc-phonecol .mlb-root { height: 100%; width: 100%; }

        /* Quadrados de benefícios — tecnológico + luxuoso */
        .gen-cc-card {
          position: relative;
          border: 1px solid var(--line);
          border-radius: 18px;
          background:
            radial-gradient(130% 90% at 100% 0%, rgba(var(--accent-rgb),0.12), transparent 55%),
            linear-gradient(180deg, var(--bg-elev), var(--bg-elev-2));
          padding: 32px 30px;
          overflow: hidden;
          box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.05);
          transition: transform 420ms cubic-bezier(0.22,0.61,0.36,1), border-color 420ms ease, box-shadow 420ms ease;
        }
        .gen-cc-card::before {
          content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
          background-image:
            linear-gradient(var(--line) 1px, transparent 1px),
            linear-gradient(90deg, var(--line) 1px, transparent 1px);
          background-size: 28px 28px;
          -webkit-mask-image: radial-gradient(130% 80% at 100% 0%, #000, transparent 62%);
          mask-image: radial-gradient(130% 80% at 100% 0%, #000, transparent 62%);
        }
        .gen-cc-card::after {
          content: ""; position: absolute; top: 16px; right: 16px;
          width: 18px; height: 18px;
          border-top: 1px solid var(--accent); border-right: 1px solid var(--accent);
          opacity: 0.35; transition: opacity 420ms ease, box-shadow 420ms ease;
        }
        .gen-cc-card:hover {
          transform: translateY(-6px);
          border-color: rgba(var(--accent-rgb), 0.55);
          box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--accent-rgb), 0.20), 0 34px 70px -26px rgba(var(--accent-rgb), 0.35);
        }
        .gen-cc-card:hover::after { opacity: 1; box-shadow: 6px -6px 14px -6px rgba(var(--accent-rgb), 0.6); }
        .gen-cc-card__bar {
          position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
          background: linear-gradient(90deg, var(--accent), transparent 72%);
          transform: scaleX(0); transform-origin: left;
          transition: transform 520ms cubic-bezier(0.22,0.61,0.36,1);
        }
        .gen-cc-card:hover .gen-cc-card__bar { transform: scaleX(1); }
        .gen-cc-card__head { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
        .gen-cc-card__t { margin: 0; }
        .gen-cc-card__d { position: relative; z-index: 1; color: var(--fg-muted); margin: 0; font-size: 15px; line-height: 1.55; }
        .gen-cc-num { position: relative; z-index: 1; font-family: var(--ff-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.22em; margin-bottom: 16px; }
        .gen-cc-card .gen-stepbadge {
          position: relative; z-index: 1;
          border: 1.5px solid transparent !important;
          background:
            linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
            conic-gradient(from 140deg, rgba(var(--accent-rgb),0.85), rgba(var(--accent-rgb),0.12), rgba(var(--accent-rgb),0.85)) border-box;
          box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.05), inset 0 0 12px rgba(var(--accent-rgb),0.10);
          transition: box-shadow 420ms ease, transform 420ms ease;
        }
        .gen-cc-card:hover .gen-stepbadge {
          transform: rotate(-4deg);
          box-shadow: 0 0 0 5px rgba(var(--accent-rgb),0.08), 0 0 18px -2px rgba(var(--accent-rgb),0.5), inset 0 0 14px rgba(var(--accent-rgb),0.16);
        }

        @media (max-width: 880px) {
          .gen-cc-phonecol { position: static !important; min-height: 0 !important; }
          .gen-cc-phonereveal { position: static !important; inset: auto !important; }
          .gen-cc-phonecol .mlb-root { height: auto !important; }
          .gen-cc-phonecol .mlb-frame { height: auto !important; aspect-ratio: auto !important; max-width: 416px; margin: 0 auto; }
          .gen-cc-phonecol .mlb-fold { display: none !important; }
        }
      `}</style>
    </section>
  );
}

function ExtratoBancarioMockup() {
  return <MultiBarberLiveBank />;
}

/* ============================================================
   BANK FLOATING TOASTS — notificações com vida ao redor do celular
   ============================================================ */
function BankFloatingToasts() {
  const toasts = [
    { side: "left",  top: "20%", ic: "+", tone: "credit", k: "Comissão recebida", t: "Corte Premium · J. Silva", v: "+ R$ 55,00" },
    { side: "right", top: "46%", ic: "↑", tone: "credit", k: "Roberto transferiu", t: "para sua conta", v: "+ R$ 230,00" },
    { side: "left",  top: "62%", ic: "✓", tone: "ready",  k: "Saque liberado", t: "disponível agora", v: "R$ 500,00" },
    { side: "right", top: "26%", ic: "%", tone: "credit", k: "Margem do dia", t: "acima da meta", v: "73%" },
  ];
  const [i, setI] = React.useState(-1);
  React.useEffect(() => {
    let idx = 0;
    const start = setTimeout(() => setI(0), 1100);
    const id = setInterval(() => {
      idx = (idx + 1) % toasts.length;
      setI(idx);
    }, 2800);
    return () => { clearTimeout(start); clearInterval(id); };
  }, []);
  return (
    <div className="bft" aria-hidden="true">
      {toasts.map((to, k) => (
        <div
          key={k}
          className={"bft-card bft-card--" + to.side + " " + (i === k ? "is-show" : "")}
          style={{ top: to.top }}
        >
          <span className={"bft-ic bft-ic--" + to.tone}>{to.ic}</span>
          <div className="bft-body">
            <div className="bft-k">{to.k}</div>
            <div className="bft-t">{to.t}</div>
          </div>
          <div className={"bft-v bft-v--" + to.tone}>{to.v}</div>
        </div>
      ))}
      <style>{`
        .bft { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
        .bft-card {
          position: absolute; width: 224px;
          display: flex; align-items: center; gap: 11px;
          padding: 12px 14px; border-radius: 14px;
          background: var(--bg-elev); border: 1px solid var(--line-strong);
          backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
          box-shadow: 0 26px 60px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(var(--accent-rgb),0.08), 0 0 38px -10px rgba(var(--accent-rgb),0.45);
          opacity: 0; transform: translateY(14px) scale(0.92);
          transition: opacity 560ms cubic-bezier(0.22,0.61,0.36,1), transform 560ms cubic-bezier(0.22,0.61,0.36,1);
        }
        .bft-card--left  { left: -36px; transform-origin: right center; }
        .bft-card--right { right: -36px; transform-origin: left center; }
        .bft-card.is-show { opacity: 1; transform: translateY(0) scale(1); }
        .bft-ic {
          width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
          display: grid; place-items: center;
          font-family: var(--ff-mono); font-size: 15px; font-weight: 700;
        }
        .bft-ic--credit { background: rgba(var(--accent-rgb),0.16); color: var(--accent); }
        .bft-ic--ready  { background: rgba(255,206,106,0.18); color: #ffce6a; }
        .bft-body { flex: 1; min-width: 0; }
        .bft-k { font-size: 12.5px; font-weight: 600; color: var(--fg); line-height: 1.2; }
        .bft-t { font-size: 11px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .bft-v { font-family: var(--ff-condensed); font-size: 17px; letter-spacing: 0.01em; flex: 0 0 auto; }
        .bft-v--credit { color: var(--accent); }
        .bft-v--ready  { color: #ffce6a; }
        @media (max-width: 1180px) { .bft-card--left { left: -16px; } .bft-card--right { right: -16px; } .bft-card { width: 200px; } }
        @media (max-width: 880px) { .bft { display: none; } }
      `}</style>
    </div>
  );
}

/* ============================================================
   MULTI-BARBER LIVE BANK — vida, tecnologia, dinamismo
   ============================================================ */
function MultiBarberLiveBank() {
  const barbers = [
    { id: 1, name: "Segunda Almeida", initials: "SA", role: "Sênior", saldo: 1847.30, today: 312.50, status: "online", color: "var(--accent)" },
    { id: 2, name: "Terça Souza",    initials: "TS", role: "Pleno",  saldo: 2240.80, today: 218.00, status: "online", color: "var(--accent)" },
    { id: 3, name: "Quarta Pereira", initials: "QP", role: "Júnior", saldo:  984.10, today:  88.00, status: "online", color: "var(--accent)" },
    { id: 4, name: "Quinta Carvalho", initials: "QC", role: "Sênior", saldo: 1612.45, today: 245.50, status: "pausa",  color: "rgba(255,255,255,0.55)" },
  ];
  const txByBarber = {
    1: [
      { d: "09:14", desc: "Corte Premium · J. Silva",      v: 28.00,  t: "credito" },
      { d: "10:02", desc: "Barba + Hidratação · M. Costa", v: 42.50,  t: "credito" },
      { d: "11:30", desc: "Vale em dinheiro",              v: 80.00,  t: "debito"  },
      { d: "12:45", desc: "Pomada modeladora (consumo)",   v: 35.00,  t: "debito"  },
      { d: "14:20", desc: "Corte + Sobrancelha · R. Lima", v: 38.00,  t: "credito" },
      { d: "16:10", desc: "Coloração Premium · A. Santos", v: 95.00,  t: "credito" },
    ],
    2: [
      { d: "08:45", desc: "Degradê · F. Mendes",           v: 65.00,  t: "credito" },
      { d: "09:50", desc: "Barba Lenhador · T. Rocha",     v: 55.00,  t: "credito" },
      { d: "11:10", desc: "Café/Almoço (consumo)",         v: 32.00,  t: "debito"  },
      { d: "13:15", desc: "Corte Infantil · Cliente W.",   v: 35.00,  t: "credito" },
      { d: "15:30", desc: "Pacote Noivo · G. Borges",      v: 180.00, t: "credito" },
    ],
    3: [
      { d: "09:30", desc: "Corte Tradicional · P. Vieira", v: 40.00,  t: "credito" },
      { d: "11:00", desc: "Vale produto (creme)",          v: 28.00,  t: "debito"  },
      { d: "14:00", desc: "Barba Simples · L. Cabral",     v: 35.00,  t: "credito" },
      { d: "16:45", desc: "Hidratação · K. Reis",          v: 45.00,  t: "credito" },
    ],
    4: [
      { d: "08:30", desc: "Corte + Barba · D. Pinto",      v: 75.00,  t: "credito" },
      { d: "10:15", desc: "Coloração · E. Vargas",         v: 85.00,  t: "credito" },
      { d: "12:00", desc: "Adiantamento",                  v: 200.00, t: "debito"  },
      { d: "14:30", desc: "Degradê + Sobrancelha · S. Tavares", v: 50.00, t: "credito" },
      { d: "16:20", desc: "Pacote Premium · M. Vasconcelos",    v: 145.00, t: "credito" },
    ],
  };

  const [activeId, setActiveId] = useState(1);
  const [reveal, setReveal] = useState(0); // 0..N rows shown
  const [pulse, setPulse]   = useState(false);
  const ref = useRef(null);
  const animatedRef = useRef(false);
  const frameRef = useRef(null);
  const screenRef = useRef(null);

  // Escala o conteúdo do app para caber na largura do celular (print real)
  useEffect(() => {
    const frame = frameRef.current, screen = screenRef.current;
    if (!frame || !screen) return;
    const DESIGN = 400;
    const apply = () => {
      const mobile = window.matchMedia("(max-width: 880px)").matches;
      if (mobile) { screen.style.transform = "none"; screen.style.width = "100%"; return; }
      screen.style.width = DESIGN + "px";
      const w = frame.clientWidth;
      if (w > 0) screen.style.transform = "scale(" + (w / DESIGN) + ")";
    };
    apply();
    const ro = new ResizeObserver(apply);
    ro.observe(frame);
    window.addEventListener("resize", apply);
    return () => { ro.disconnect(); window.removeEventListener("resize", apply); };
  }, []);

  const active = barbers.find(b => b.id === activeId);
  const txs    = txByBarber[activeId] || [];

  // Trigger animation when in view (first time)
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !animatedRef.current) {
          animatedRef.current = true;
          // stream rows
          txs.forEach((_, i) => {
            setTimeout(() => setReveal(i + 1), 380 + i * 240);
          });
          // pulse the last row
          setTimeout(() => setPulse(true), 380 + txs.length * 240);
          setTimeout(() => setPulse(false), 380 + txs.length * 240 + 1200);
        }
      });
    }, { threshold: 0.25 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []); // eslint-disable-line

  // when changing barber, re-stream
  useEffect(() => {
    if (!animatedRef.current) return;
    setReveal(0);
    const list = txByBarber[activeId] || [];
    list.forEach((_, i) => {
      setTimeout(() => setReveal(i + 1), 120 + i * 130);
    });
  }, [activeId]); // eslint-disable-line

  const [hideBalance, setHideBalance] = useState(false);

  // Group transactions by day label for app feed
  const grouped = [{ label: "Hoje · 22 nov", items: txs }];
  // Sum today
  const todayIn  = txs.filter(t => t.t === "credito").reduce((a, b) => a + b.v, 0);
  const todayOut = txs.filter(t => t.t === "debito").reduce((a, b) => a + b.v, 0);

  return (
    <div ref={ref} className="mlb-root">
      <div className="mlb-frame" ref={frameRef}>
        <div className="mlb-screen" ref={screenRef}>
        {/* Status bar + dynamic island */}
        <div className="mlb-island" aria-hidden="true" />
        <div className="mlb-statusbar">
          <span className="mlb-sb-time">9:41</span>
          <span className="mlb-sb-icons">
            <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor"><rect y="7" width="3" height="4" rx="0.5"/><rect x="4.5" y="4.5" width="3" height="6.5" rx="0.5"/><rect x="9" y="2" width="3" height="9" rx="0.5"/><rect x="13.5" width="3" height="11" rx="0.5"/></svg>
            <svg width="16" height="11" viewBox="0 0 16 12" fill="none" stroke="currentColor" strokeWidth="1.3"><path d="M1 4.2 A11 11 0 0 1 15 4.2"/><path d="M3.4 6.8 A7.4 7.4 0 0 1 12.6 6.8"/><circle cx="8" cy="9.4" r="1" fill="currentColor"/></svg>
            <span className="mlb-sb-bat"><span /></span>
          </span>
        </div>
        {/* Top app bar — clean digital bank */}
        <div className="mlb-chrome">
          <span className="mlb-brand"><span className="mlb-dot mlb-dot--live" /> Gênesis <strong>Bank</strong></span>
          <span className="mlb-pill">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="5 13 10 18 19 6" /></svg>
            Auditado
          </span>
        </div>

        {/* Account tab strip — avatars row, "each barber has their own account" */}
        <div className="mlb-tabs">
          <div className="mlb-tabs-rail">
            {barbers.slice(0, 2).map((b) => {
              const sel = b.id === activeId;
              return (
                <button
                  key={b.id}
                  className={"mlb-tab " + (sel ? "is-active" : "")}
                  onClick={() => setActiveId(b.id)}
                >
                  <span className="mlb-avatar" aria-hidden="true">
                    <span>{b.initials}</span>
                    <span className={"mlb-status mlb-status--" + b.status} />
                  </span>
                  <span className="mlb-tab-meta">
                    <span className="mlb-tab-name">{b.name.split(" ")[0]}</span>
                    <span className="mlb-tab-bal">R$ {b.saldo.toFixed(2).replace('.', ',')}</span>
                  </span>
                </button>
              );
            })}
            <button className="mlb-tab-more" onClick={() => setActiveId(activeId >= barbers.length ? 1 : activeId + 1)} aria-label="Mais contas">+{barbers.length - 2}</button>
          </div>
          <span className="mlb-tabs-r">
            <span className="mlb-tabs-r-l">Total</span>
            <span className="mlb-tabs-r-v">
              <CountUpBRL value={barbers.reduce((a, b) => a + b.saldo, 0)} duration={1400} delay={600} prefix="R$ " />
            </span>
          </span>
        </div>

        {/* Personal account "app" — nubank-style */}
        <div className="mlb-app">
          {/* Greeting + bell */}
          <div className="mlb-greet">
            <div>
              <div className="mlb-hello">Olá, <strong>{active.name.split(" ")[0]}</strong></div>
              <div className="mlb-sub">Boa tarde · sua conta GÊNESIS</div>
            </div>
            <div className="mlb-greet-r">
              <span className="mlb-iconbtn" aria-label="Notificações">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 0 0 4 0"/></svg>
                <span className="mlb-iconbtn-dot" />
              </span>
              <span className="mlb-iconbtn" aria-label="Configurações">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>
              </span>
            </div>
          </div>

          {/* Big balance card */}
          <div className="mlb-bigcard">
            <div className="mlb-bigcard-h">
              <span>Saldo disponível</span>
              <button
                className="mlb-eye"
                onClick={() => setHideBalance(v => !v)}
                aria-label={hideBalance ? "Mostrar saldo" : "Ocultar saldo"}
              >
                {hideBalance ? (
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 10 8 10 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><path d="M6.61 6.61A13.5 13.5 0 0 0 2 12s3 8 10 8a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" y1="2" x2="22" y2="22"/></svg>
                ) : (
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                )}
              </button>
            </div>
            <div className="mlb-bigcard-val">
              {hideBalance ? <span className="mlb-blur">R$ ●●●●●</span> : (
                <>R$ <CountUpBRL value={active.saldo} duration={900} key={"bal-" + activeId} /></>
              )}
            </div>
            <div className="mlb-bigcard-meta">
              <span className="mlb-deltap">
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 15 12 9 18 15"/></svg>
                R$ {todayIn.toFixed(2).replace('.', ',')} entrou hoje
              </span>
              {todayOut > 0 && (
                <span className="mlb-deltan">
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
                  R$ {todayOut.toFixed(2).replace('.', ',')} saiu
                </span>
              )}
              <span className="mlb-spk"><FlowSparkline tx={txs} compact /></span>
            </div>
          </div>

          {/* Quick actions row */}
          <div className="mlb-actions">
            {[
              { lbl: "Pix",       svg: <path d="M12 2L2 12l10 10 10-10L12 2zm0 6l4 4-4 4-4-4 4-4z"/> },
              { lbl: "Sacar",     svg: <><rect x="2" y="6" width="20" height="12" rx="2"/><line x1="12" y1="12" x2="12" y2="12.01"/></> },
              { lbl: "Transferir",svg: <><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></> },
              { lbl: "Recibos",   svg: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></> },
              { lbl: "Vale",      svg: <><circle cx="12" cy="12" r="10"/><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/><line x1="12" y1="6" x2="12" y2="18"/></> },
              { lbl: "Histórico", svg: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></> },
            ].map((a, i) => (
              <button key={a.lbl} className="mlb-act" style={{ animationDelay: `${600 + i * 60}ms` }}>
                <span className="mlb-act-ic">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">{a.svg}</svg>
                </span>
                <span className="mlb-act-lbl">{a.lbl}</span>
              </button>
            ))}
          </div>

          {/* Activity */}
          <div className="mlb-activity">
            <div className="mlb-act-h">
              <span>Atividade</span>
              <a className="mlb-act-link">Ver tudo →</a>
            </div>
            {grouped.map((g) => (
              <div key={g.label}>
                <div className="mlb-day">{g.label}</div>
                <div className="mlb-feed">
                  {g.items.slice(0, 3).map((r, i) => {
                    const shown = i < reveal;
                    const isLastPulse = i === Math.min(g.items.length, 3) - 1 && pulse;
                    const isCredit = r.t === "credito";
                    return (
                      <div
                        key={activeId + "-" + i}
                        className={"mlb-fi " + (shown ? "in " : "") + (isLastPulse ? "pulse " : "")}
                      >
                        <span className={"mlb-fi-ic " + (isCredit ? "ic-up" : "ic-down")} aria-hidden="true">
                          {isCredit ? (
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
                          ) : (
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>
                          )}
                        </span>
                        <span className="mlb-fi-text">
                          <span className="mlb-fi-title">{isCredit ? "Recebido" : "Saída"} · {r.desc}</span>
                          <span className="mlb-fi-time">{r.d} · concluído</span>
                        </span>
                        <span className={"mlb-fi-val " + (isCredit ? "val-up" : "val-down")}>
                          {isCredit ? "+ " : "− "}R$ {r.v.toFixed(2).replace('.', ',')}
                        </span>
                      </div>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Bottom nav — cara de app de banco */}
        <div className="mlb-bnav" aria-hidden="true">
          {[
            { k: "Início", on: true, p: <path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/> },
            { k: "Extrato", p: <><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9h10M7 13h10M7 17h6"/></> },
            { k: "Pix", p: <path d="M12 3 4 12l8 9 8-9-8-9zm0 5 4 4-4 4-4-4 4-4z"/> },
            { k: "Cartão", p: <><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></> },
            { k: "Perfil", p: <><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></> },
          ].map((n) => (
            <span key={n.k} className={"mlb-bnav-i " + (n.on ? "is-on" : "")}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">{n.p}</svg>
              <span className="mlb-bnav-l">{n.k}</span>
            </span>
          ))}
        </div>
        <div className="mlb-home" aria-hidden="true" />
        </div>

        {/* Recorte inferior (fade + home) — só aparece quando o print é cortado */}
        <div className="mlb-fold" aria-hidden="true">
          <span className="mlb-fold-home" />
        </div>

        {/* Scanline / brackets */}
        <div className="mlb-scan" aria-hidden="true" />
        <div className="mlb-bracket mlb-bracket--tl" aria-hidden="true" />
        <div className="mlb-bracket mlb-bracket--tr" aria-hidden="true" />
        <div className="mlb-bracket mlb-bracket--bl" aria-hidden="true" />
        <div className="mlb-bracket mlb-bracket--br" aria-hidden="true" />
      </div>

      <MultiBarberBankStyles />
    </div>
  );
}

function CountUpBRL({ value, duration = 1000, delay = 0, prefix = "" }) {
  const [v, setV] = useState(0);
  useEffect(() => {
    let raf;
    const t0 = performance.now() + delay;
    const tick = (now) => {
      if (now < t0) { raf = requestAnimationFrame(tick); return; }
      const p = Math.min(1, (now - t0) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setV(value * eased);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [value, duration, delay]);
  const formatted = v.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  return <span style={{ fontVariantNumeric: "tabular-nums" }}>{prefix}{formatted}</span>;
}

function FlowSparkline({ tx, compact = false }) {
  // Cumulative balance trajectory
  const pts = [];
  let bal = 0;
  tx.forEach((r) => {
    bal += (r.t === "credito" ? r.v : -r.v);
    pts.push(bal);
  });
  const min = Math.min(0, ...pts);
  const max = Math.max(0, ...pts);
  const w = compact ? 96 : 220, h = compact ? 28 : 56, pad = 4;
  const xs = (i) => pad + (i * (w - pad * 2)) / Math.max(1, pts.length - 1);
  const ys = (y) => h - pad - ((y - min) / Math.max(1, max - min)) * (h - pad * 2);
  const d = pts.map((p, i) => (i === 0 ? "M" : "L") + xs(i).toFixed(1) + " " + ys(p).toFixed(1)).join(" ");
  const area = d + ` L ${xs(pts.length - 1).toFixed(1)} ${h - pad} L ${xs(0).toFixed(1)} ${h - pad} Z`;
  return (
    <svg width={w} height={h} className="mlb-spark" viewBox={`0 0 ${w} ${h}`}>
      <defs>
        <linearGradient id="mlbSparkFill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.32" />
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={area} fill="url(#mlbSparkFill)" />
      <path d={d} fill="none" stroke="var(--accent)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" className="mlb-spark-line" />
      {pts.map((p, i) => (
        <circle key={i} cx={xs(i)} cy={ys(p)} r="1.6" fill="var(--accent)" />
      ))}
    </svg>
  );
}

function MultiBarberBankStyles() {
  return (
    <style>{`
      .mlb-root { width: 100%; height: 100%; margin: 0 auto; position: relative; display: grid; place-items: center; }
      .mlb-root::before {
        content: ""; position: absolute; inset: -6% -16%;
        background: radial-gradient(56% 46% at 50% 28%, rgba(var(--accent-rgb),0.24), transparent 72%);
        filter: blur(34px); z-index: 0; pointer-events: none;
      }
      .mlb-frame {
        position: relative; z-index: 1;
        height: 100%; aspect-ratio: 9 / 19.5; width: auto; max-height: 900px;
        background: #060d14;
        border: 9px solid #1b2026;
        border-radius: 48px;
        box-shadow: 0 44px 100px -26px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.05) inset, 0 -2px 0 1px rgba(255,255,255,0.06) inset, 0 0 0 2px #0a0c0f;
        overflow: hidden;
      }
      .mlb-screen { transform-origin: top left; will-change: transform; }
      /* Recorte inferior do "print" — fade + barra de home */
      .mlb-fold {
        position: absolute; left: 0; right: 0; bottom: 0; height: 78px; z-index: 9;
        pointer-events: none; display: flex; align-items: flex-end; justify-content: center;
        padding-bottom: 9px;
        background: linear-gradient(180deg, transparent, #060d14 74%);
      }
      .mlb-fold-home { width: 132px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.6); }
      /* Status bar + island (cara de iPhone) */
      .mlb-island {
        position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
        width: 104px; height: 28px; background: #000; border-radius: 16px; z-index: 8;
        box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
      }
      .mlb-statusbar {
        display: flex; justify-content: space-between; align-items: center;
        padding: 15px 28px 8px; color: #fff;
        font-family: var(--ff-mono); font-size: 13px; font-weight: 600;
      }
      .mlb-sb-icons { display: inline-flex; align-items: center; gap: 6px; }
      .mlb-sb-bat { width: 22px; height: 11px; border: 1px solid rgba(255,255,255,0.55); border-radius: 3px; position: relative; display: inline-block; padding: 1.5px; }
      .mlb-sb-bat::after { content: ""; position: absolute; right: -3px; top: 3px; width: 2px; height: 5px; background: rgba(255,255,255,0.55); border-radius: 0 1px 1px 0; }
      .mlb-sb-bat > span { display: block; width: 100%; height: 100%; background: #fff; border-radius: 1px; }
      /* Bottom nav + home indicator */
      .mlb-bnav {
        display: grid; grid-template-columns: repeat(5, 1fr);
        padding: 7px 10px 3px; gap: 4px;
        border-top: 1px solid rgba(255,255,255,0.07);
        background: rgba(0,0,0,0.32);
      }
      .mlb-bnav-i { display: flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(255,255,255,0.42); }
      .mlb-bnav-i.is-on { color: var(--accent); }
      .mlb-bnav-l { font-family: var(--ff-body); font-size: 10px; letter-spacing: 0.01em; }
      .mlb-home { width: 132px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.55); margin: 7px auto 9px; }
      .mlb-bracket { display: none; }
      .mlb-chrome {
        display: flex; align-items: center; justify-content: space-between;
        padding: 13px 18px 6px;
        background: transparent;
      }
      .mlb-chrome-left, .mlb-chrome-right { display: flex; align-items: center; gap: 10px; }
      .mlb-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-body); font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.92); }
      .mlb-brand strong { font-weight: 700; color: var(--accent); }
      .mlb-eyebrow {
        font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.22em;
        color: rgba(255,255,255,0.6); text-transform: uppercase;
      }
      .mlb-stamp { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.18em; color: rgba(255,255,255,0.45); }
      .mlb-pill {
        display: inline-flex; align-items: center; gap: 5px;
        font-family: var(--ff-body); font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
        color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.4);
        padding: 5px 11px; border-radius: 999px;
        background: rgba(var(--accent-rgb), 0.10);
      }
      .mlb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }
      .mlb-dot--live {
        position: relative;
        box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.7);
        animation: mlb-pulse 1.8s ease-out infinite;
      }
      @keyframes mlb-pulse {
        0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.7); }
        70%  { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0); }
        100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
      }

      /* TAB STRIP — contas */
      .mlb-tabs {
        display: grid; grid-template-columns: 1fr auto; gap: 14px;
        align-items: center;
        padding: 6px 18px 12px;
        background: transparent;
      }
      .mlb-tabs-r-l {
        font-family: var(--ff-body); font-size: 10px; font-weight: 500;
        color: rgba(255,255,255,0.45);
      }
      .mlb-tab-more {
        appearance: none; border: 0; cursor: pointer; flex-shrink: 0;
        width: 38px; height: 38px; border-radius: 50%;
        background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7);
        font-family: var(--ff-body); font-size: 12px; font-weight: 600;
        transition: background 240ms ease, color 240ms ease;
      }
      .mlb-tab-more:hover { background: rgba(var(--accent-rgb),0.14); color: var(--accent); }
      .mlb-tabs-rail {
        display: flex; gap: 8px; overflow-x: auto; padding: 2px;
        scrollbar-width: none;
      }
      .mlb-tabs-rail::-webkit-scrollbar { display: none; }
      .mlb-tab {
        appearance: none; border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.03);
        display: inline-flex; align-items: center; gap: 9px;
        padding: 6px 14px 6px 6px; border-radius: 999px;
        cursor: pointer; color: inherit; flex-shrink: 0;
        transition: border-color 240ms ease, background 240ms ease, transform 240ms ease;
      }
      .mlb-tab:hover { border-color: rgba(255,255,255,0.22); transform: translateY(-1px); }
      .mlb-tab.is-active {
        border-color: var(--accent);
        background: rgba(var(--accent-rgb), 0.10);
        box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.18);
      }
      .mlb-tab-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
      .mlb-tab-name { font-size: 12px; color: #fff; font-weight: 500; }
      .mlb-tab-bal { font-family: var(--ff-body); font-size: 10.5px; color: rgba(255,255,255,0.55); }
      .mlb-tabs-r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
      .mlb-tabs-r-v { font-family: var(--ff-condensed); font-size: 16px; color: var(--accent); letter-spacing: 0.01em; }

      .mlb-avatar {
        width: 32px; height: 32px; border-radius: 50%;
        background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.20), rgba(var(--accent-rgb), 0.05));
        border: 1px solid rgba(var(--accent-rgb), 0.35);
        display: inline-flex; align-items: center; justify-content: center;
        font-family: var(--ff-mono); font-size: 11px; color: #fff;
        letter-spacing: 0.04em;
        position: relative;
        flex-shrink: 0;
      }
      .mlb-status {
        position: absolute; bottom: -2px; right: -2px;
        width: 9px; height: 9px; border-radius: 50%;
        border: 2px solid #0b1a2c;
      }
      .mlb-status--online { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
      .mlb-status--pausa  { background: #f59e0b; }

      /* APP — personal nubank-like view */
      .mlb-app { padding: 16px 20px 12px; }
      .mlb-greet { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
      .mlb-hello { font-family: var(--ff-condensed); font-size: 22px; color: #fff; letter-spacing: -0.01em; }
      .mlb-hello strong { font-weight: 700; }
      .mlb-sub { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; }
      .mlb-greet-r { display: flex; gap: 8px; }
      .mlb-iconbtn {
        position: relative;
        width: 36px; height: 36px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7);
        cursor: pointer;
        transition: background 240ms ease, color 240ms ease;
      }
      .mlb-iconbtn:hover { background: rgba(255,255,255,0.1); color: #fff; }
      .mlb-iconbtn-dot {
        position: absolute; top: 9px; right: 10px; width: 7px; height: 7px;
        background: var(--accent); border-radius: 50%;
        box-shadow: 0 0 6px var(--accent);
      }

      .mlb-bigcard {
        background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(255,255,255,0.02) 60%);
        border: 1px solid rgba(var(--accent-rgb), 0.18);
        border-radius: 16px;
        padding: 20px 22px;
        position: relative; overflow: hidden;
        box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.04) inset;
      }
      .mlb-bigcard::after {
        content: ""; position: absolute; inset: 0;
        background: radial-gradient(circle at 90% 0%, rgba(var(--accent-rgb), 0.18), transparent 50%);
        pointer-events: none;
      }
      .mlb-bigcard-h {
        display: flex; justify-content: space-between; align-items: center;
        font-size: 12px; color: rgba(255,255,255,0.65);
        margin-bottom: 4px;
      }
      .mlb-eye {
        appearance: none; border: 0; background: transparent;
        color: rgba(255,255,255,0.6); cursor: pointer; padding: 4px;
        border-radius: 6px; transition: background 240ms;
      }
      .mlb-eye:hover { background: rgba(255,255,255,0.06); color: #fff; }
      .mlb-bigcard-val {
        font-family: var(--ff-condensed); font-size: 38px; line-height: 1;
        color: #fff; letter-spacing: -0.01em;
        font-variant-numeric: tabular-nums;
      }
      .mlb-blur { filter: blur(0); letter-spacing: 0.12em; }
      .mlb-bigcard-meta {
        display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
        margin-top: 14px;
        font-family: var(--ff-mono); font-size: 11px;
      }
      .mlb-deltap { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
      .mlb-deltan { display: inline-flex; align-items: center; gap: 6px; color: #e08080; }
      .mlb-spk { margin-left: auto; }

      /* Quick actions */
      .mlb-actions {
        display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px;
        margin-top: 16px;
      }
      .mlb-act {
        appearance: none; border: 0; background: transparent; color: inherit;
        display: flex; flex-direction: column; align-items: center; gap: 8px;
        padding: 8px 2px; border-radius: 14px;
        cursor: pointer;
        border: 1px solid transparent;
        transition: background 240ms ease, transform 240ms ease;
        opacity: 0; transform: translateY(6px);
        animation: mlb-fadeup 480ms cubic-bezier(0.22,0.61,0.36,1) forwards;
      }
      @keyframes mlb-fadeup { to { opacity: 1; transform: translateY(0); } }
      .mlb-act:hover { background: rgba(var(--accent-rgb), 0.08); transform: translateY(-2px); }
      .mlb-act-ic {
        width: 40px; height: 40px; border-radius: 14px;
        background: rgba(var(--accent-rgb), 0.13);
        color: var(--accent);
        display: inline-flex; align-items: center; justify-content: center;
      }
      .mlb-act-lbl { font-size: 9.5px; color: rgba(255,255,255,0.7); white-space: nowrap; }

      /* Activity */
      .mlb-activity { margin-top: 16px; }
      .mlb-act-h {
        display: flex; justify-content: space-between; align-items: center;
        margin-bottom: 4px;
      }
      .mlb-act-h > span { font-family: var(--ff-body); font-size: 15px; font-weight: 600; color: #fff; letter-spacing: 0; }
      .mlb-act-link { font-family: var(--ff-body); font-size: 12px; color: var(--accent); cursor: pointer; }
      .mlb-day {
        font-family: var(--ff-body); font-size: 11px;
        color: rgba(255,255,255,0.4);
        padding: 12px 0 6px;
      }
      .mlb-feed { display: flex; flex-direction: column; gap: 2px; }
      .mlb-fi {
        display: grid; grid-template-columns: 36px 1fr auto;
        gap: 12px; align-items: center;
        padding: 12px 6px;
        border-radius: 8px;
        opacity: 0; transform: translateY(4px);
        transition: opacity 380ms ease, transform 380ms ease, background 240ms ease;
      }
      .mlb-fi.in { opacity: 1; transform: translateY(0); }
      .mlb-fi:hover { background: rgba(255,255,255,0.03); }
      .mlb-fi.pulse { background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.10), transparent); }
      .mlb-fi-ic {
        width: 36px; height: 36px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
      }
      .mlb-fi-ic.ic-up   { background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
      .mlb-fi-ic.ic-down { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55); }
      .mlb-fi-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
      .mlb-fi-title { font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .mlb-fi-time { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.06em; color: rgba(255,255,255,0.40); }
      .mlb-fi-val { font-family: var(--ff-mono); font-size: 13px; text-align: right; }
      .mlb-fi-val.val-up   { color: var(--accent); }
      .mlb-fi-val.val-down { color: #e08080; }

      .mlb-spark { display: block; }
      .mlb-spark-line {
        stroke-dasharray: 600;
        stroke-dashoffset: 600;
        animation: mlb-draw 1600ms cubic-bezier(0.22,0.61,0.36,1) 200ms forwards;
      }
      @keyframes mlb-draw { to { stroke-dashoffset: 0; } }

      .mlb-foot {
        display: flex; justify-content: space-between; align-items: center; gap: 16px;
        margin-top: 18px; padding: 12px 0 2px;
        border-top: 1px solid rgba(255,255,255,0.08);
        font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.20em;
        color: rgba(255,255,255,0.40); text-transform: uppercase;
      }
      .mlb-foot-l { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); }
      .mlb-foot-c { color: rgba(255,255,255,0.35); }

      /* SCAN + BRACKETS */
      .mlb-scan { display: none; }
      .mlb-scan--off {
        position: absolute; left: 0; right: 0; top: 0; height: 80px;
        background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), transparent);
        animation: mlb-scan 6s cubic-bezier(0.45,0,0.55,1) infinite;
        pointer-events: none; mix-blend-mode: screen;
      }
      @keyframes mlb-scan {
        0%   { transform: translateY(0); opacity: 0; }
        10%  { opacity: 1; }
        90%  { opacity: 1; }
        100% { transform: translateY(560px); opacity: 0; }
      }
      .mlb-bracket {
        position: absolute; width: 14px; height: 14px; pointer-events: none;
        border: 1px solid var(--accent);
        opacity: 0.7;
      }
      .mlb-bracket--tl { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; }
      .mlb-bracket--tr { top: -1px; right: -1px; border-left: 0;  border-bottom: 0; }
      .mlb-bracket--bl { bottom: -1px; left: -1px;  border-right: 0; border-top: 0; }
      .mlb-bracket--br { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }

      @media (max-width: 880px) {
        .mlb-tabs { grid-template-columns: 1fr; gap: 8px; }
        .mlb-tabs-r { flex-direction: row; gap: 8px; align-items: center; }
        .mlb-actions { grid-template-columns: repeat(3, 1fr); }
        .mlb-app { padding: 18px 14px 10px; }
        .mlb-bigcard-val { font-size: 30px; }
        .mlb-bigcard { padding: 16px; }
        .mlb-foot-c { display: none; }
      }
    `}</style>
  );
}

/* ============================================================
   SEÇÃO 3 — IA DE ATENDIMENTO
   ============================================================ */
function IAAtendimento() {
  const [tab, setTab] = useState(0);
  const tabs = [
    { id: "vendas", t: "Vendas no Autopiloto", sub: "Meta · Instagram · WhatsApp",
      d: "Conectamos o GÊNESIS aos seus anúncios. O lead clicou no Instagram? A IA inicia o atendimento no WhatsApp em segundos, qualifica o interesse e conduz o cliente até o agendamento." },
    { id: "cadencia", t: "Cadência de Presença", sub: "Lembretes · Confirmação",
      d: "O sistema envia lembretes automáticos com localização e política de cancelamento, reduzindo drasticamente o \"não comparecimento\"." },
    { id: "retencao", t: "Follow-up e Retenção", sub: "NPS · Recuperação ativa",
      d: "Horas após o serviço, a IA coleta a avaliação (NPS). Se o cliente não voltar em 30 ou 60 dias, o sistema detecta o padrão e dispara uma mensagem personalizada de recuperação para trazer o faturamento de volta." },
  ];
  const conversations = [
    [
      { side: "them", text: "Oi! Vi vocês no Insta. Quanto custa o corte degradê?" },
      { side: "me", text: "Olá! 👋 Sou a IA do GÊNESIS, atendo pelo Marcos. Corte degradê está R$ 65 com produto premium incluso. Posso já reservar um horário pra você?" },
      { side: "them", text: "Sexta de tarde?" },
      { side: "me", text: "Sexta 15:30 com o Marcos está livre. Confirmo? Mando o endereço com mapa no link." },
      { side: "them", text: "Pode confirmar!" },
      { side: "me", text: "✅ Agendado. Você recebe lembrete 24h e 1h antes. Até sexta!" },
    ],
    [
      { side: "me", text: "Oi Rafael! Confirmando seu horário amanhã 14:00 com o Lucas. 📍 R. Augusta, 1234. Caso precise remarcar, é só responder até 18h hoje." },
      { side: "them", text: "Confirmado!" },
      { side: "me", text: "Perfeito. Te espero. Qualquer coisa, é só chamar aqui." },
    ],
    [
      { side: "me", text: "Oi João! Faz 47 dias do seu último corte aqui. 👀 Quer agendar um horário esta semana? Tenho 3 vagas com o Marcos amanhã." },
      { side: "them", text: "Cara, esqueci completamente. Bora!" },
      { side: "me", text: "Amanhã 10:30, 14:00 ou 16:45 — qual prefere?" },
      { side: "them", text: "14:00" },
      { side: "me", text: "✅ Reservado. Bom te ter de volta!" },
    ]
  ];
  return (
    <section className="gen-section ia-light" id="ia-atendimento" data-screen-label="03 IA Atendimento">
      <div className="ia-bg" aria-hidden="true">
        <div className="ia-bg-grid" />
        <div className="ia-bg-blob ia-bg-blob--a" />
        <div className="ia-bg-blob ia-bg-blob--b" />
      </div>
      <div className="gen-container" style={{ position: "relative", zIndex: 1 }}>
        <div className="gen-grid gen-grid--12" style={{ alignItems: "start", rowGap: 48 }}>
          {/* Left — título + lead + abas */}
          <div style={{ gridColumn: "span 6" }} className="gen-col-12-mobile">
            <Reveal><Eyebrow number="03 · 06">IA + WhatsApp + Meta Ads</Eyebrow></Reveal>
            <Reveal stagger={1}>
              <h2 className="gen-h2 ia-h2" style={{ marginTop: 0, marginBottom: 32 }}>
                Seu WhatsApp <span style={{ color: "var(--accent)" }}>nunca dorme</span>.<br />
                Sua IA agenda, atende e recupera clientes.
              </h2>
            </Reveal>
            <Reveal stagger={2}>
              <p className="gen-lead ia-lead" style={{ maxWidth: "52ch" }}>
                Enquanto você foca no serviço ou na estratégia, o GÊNESIS opera o seu comercial.
                Nossa IA não é um "robozinho de menu", é um agente de vendas treinado para o seu negócio.
              </p>
            </Reveal>
          </div>
          {/* Phone mockup */}
          <div style={{ gridColumn: "span 6", display: "grid", placeItems: "center", position: "relative" }} className="gen-col-12-mobile">
            <PhoneWA conversation={conversations[tab]} tabKey={tab} />
            <FloatingChips tab={tab} />
          </div>
        </div>

        {/* Caixinhas de benefícios — abaixo do celular */}
        <div className="gen-grid gen-grid--3 ia-tabs-row" style={{ marginTop: 64, alignItems: "stretch" }}>
          {tabs.map((t, i) => {
            const active = tab === i;
            return (
              <button
                key={t.id}
                onClick={() => setTab(i)}
                className={"ia-tab " + (active ? "is-active" : "")}
              >
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
                  <span className="ia-tab-num">0{i + 1} / 03</span>
                  <span className="ia-tab-sub">{t.sub}</span>
                </div>
                <div className="gen-h3 ia-tab-title" style={{ marginBottom: 12 }}>
                  {t.t}
                </div>
                <p className="ia-tab-desc">{t.d}</p>
              </button>
            );
          })}
        </div>
      </div>
      <IALightStyles />
    </section>
  );
}

function FloatingChips({ tab }) {
  const sets = [
    [
      { lbl: "Lead capturado", t: "agora", side: "tl" },
      { lbl: "Resposta em 3s",  t: "auto", side: "br" },
      { lbl: "Agendamento confirmado", t: "Sex 15:30", side: "tr" },
    ],
    [
      { lbl: "Lembrete 24h",    t: "enviado", side: "tl" },
      { lbl: "Confirmação 1h",  t: "auto",    side: "br" },
      { lbl: "No-show evitado", t: "−72%",    side: "tr" },
    ],
    [
      { lbl: "Cliente inativo detectado", t: "47 dias", side: "tl" },
      { lbl: "Recuperação enviada",       t: "auto",    side: "tr" },
      { lbl: "Cliente reativado",         t: "+R$ 195", side: "br" },
    ],
  ];
  const chips = sets[tab] || [];
  return (
    <>
      {chips.map((c, i) => (
        <div key={tab + "-" + i} className={"ia-chip ia-chip--" + c.side} style={{ animationDelay: (1200 + i * 800) + "ms" }}>
          <span className="ia-chip-dot" />
          <span className="ia-chip-lbl">{c.lbl}</span>
          <span className="ia-chip-t">{c.t}</span>
        </div>
      ))}
    </>
  );
}

function PhoneWA({ conversation, tabKey }) {
  const [shown, setShown] = useState(0);
  const [typing, setTyping] = useState(false);
  const scrollRef = useRef(null);

  // Replay conversation when tab changes — em loop contínuo
  useEffect(() => {
    setShown(0); setTyping(false);
    let cancelled = false;
    const sleep = (ms) => new Promise(r => setTimeout(r, ms));
    const run = async () => {
      while (!cancelled) {
        setShown(0); setTyping(false);
        await sleep(500);
        for (let i = 0; i < conversation.length; i++) {
          if (cancelled) return;
          const msg = conversation[i];
          const isMine = msg.side === "me";
          // indicador de "digitando" antes da IA responder
          if (isMine) {
            setTyping(true);
            await sleep(1100);
            if (cancelled) return;
            setTyping(false);
          }
          setShown(i + 1);
          await sleep(isMine ? 950 : 1400);
        }
        // conversa concluída (agendamento) — segura e recomeça
        await sleep(4200);
      }
    };
    const start = setTimeout(run, 400);
    return () => { cancelled = true; clearTimeout(start); };
  }, [tabKey, conversation]);

  // Auto-scroll messages
  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [shown, typing]);

  // Get last "them" name for header
  return (
    <div className="ia-phone">
      {/* Side buttons */}
      <span className="ia-phone-mute" />
      <span className="ia-phone-vol ia-phone-vol--up" />
      <span className="ia-phone-vol ia-phone-vol--dn" />
      <span className="ia-phone-power" />

      <div className="ia-phone-inner">
        {/* Dynamic island */}
        <div className="ia-island" />

        {/* Status bar */}
        <div className="ia-status">
          <span className="ia-status-time">9:41</span>
          <span className="ia-status-r">
            <svg width="14" height="9" viewBox="0 0 18 12" fill="currentColor"><rect y="8" width="3" height="4" rx="0.5"/><rect x="5" y="5" width="3" height="7" rx="0.5"/><rect x="10" y="2" width="3" height="10" rx="0.5"/><rect x="15" width="3" height="12" rx="0.5"/></svg>
            <svg width="13" height="9" viewBox="0 0 16 12" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M1 4.5 A11 11 0 0 1 15 4.5"/><path d="M3.5 7 A7.5 7.5 0 0 1 12.5 7"/><circle cx="8" cy="9.5" r="1" fill="currentColor"/></svg>
            <span className="ia-status-bat"><span /></span>
          </span>
        </div>

        {/* WA header */}
        <div className="ia-wa-header">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#8696a0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="15 18 9 12 15 6" />
          </svg>
          <div className="ia-wa-avatar">
            <img src={(window.__resources && window.__resources.genesisG) || "genesis-g.png"} alt="Gênesis" />
          </div>
          <div className="ia-wa-meta">
            <div className="ia-wa-name">Gênesis IA</div>
            <div className="ia-wa-on"><span className="ia-wa-dot" /> online · digita por você</div>
          </div>
          <div className="ia-wa-icons">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8696a0" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8696a0" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z"/></svg>
          </div>
        </div>

        {/* Chat */}
        <div className="ia-wa-chat" ref={scrollRef}>
          <div className="ia-wa-day">HOJE</div>
          {conversation.slice(0, shown).map((m, i) => {
            const isMine = m.side === "me";
            return (
              <div key={tabKey + "-" + i} className={"ia-msg " + (isMine ? "ia-msg--mine" : "ia-msg--them")}>
                <div className="ia-msg-bubble">
                  <div className="ia-msg-text">{m.text}</div>
                  <div className="ia-msg-foot">
                    <span className="ia-msg-time">{formatT(i)}</span>
                    {isMine && (
                      <svg width="14" height="9" viewBox="0 0 16 11" fill="none" stroke="#53bdeb" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
                        <polyline points="1 6 5 10 11 1"/>
                        <polyline points="5 6 9 10 15 1"/>
                      </svg>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
          {typing && (
            <div className="ia-msg ia-msg--mine">
              <div className="ia-msg-bubble ia-typing">
                <span /><span /><span />
              </div>
            </div>
          )}
        </div>

        {/* Input */}
        <div className="ia-wa-input">
          <div className="ia-wa-inputbar">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#8696a0" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
            <span>Mensagem</span>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#8696a0" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#8696a0" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="4"/></svg>
          </div>
          <div className="ia-wa-mic">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
          </div>
        </div>

        {/* Home indicator */}
        <div className="ia-home" />
      </div>
    </div>
  );
}

function formatT(i) {
  const base = 14 * 60 + 22; // 14:22
  const m = base + i * 1;
  const hh = Math.floor(m / 60), mm = m % 60;
  return String(hh).padStart(2, "0") + ":" + String(mm).padStart(2, "0");
}

function IALightStyles() {
  return (
    <style>{`
      .ia-light {
        position: relative;
        overflow: hidden;
        isolation: isolate;
      }
      .ia-light .ia-h2 { color: var(--fg); }
      .ia-light .ia-lead { color: var(--fg-muted); }

      .ia-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
      .ia-bg-grid {
        position: absolute; inset: 0;
        background-image:
          linear-gradient(rgba(15,22,38,0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(15,22,38,0.04) 1px, transparent 1px);
        background-size: 56px 56px;
        mask-image: radial-gradient(circle at 70% 50%, #000 0%, transparent 75%);
      }
      .ia-bg-blob {
        position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5;
      }
      .ia-bg-blob--a { width: 480px; height: 480px; top: -120px; right: -80px; background: rgba(var(--accent-rgb), 0.18); }
      .ia-bg-blob--b { width: 360px; height: 360px; bottom: -100px; left: 10%; background: rgba(60, 226, 133, 0.16); }

      /* Tabs (light) */
      .ia-tab {
        appearance: none; text-align: left;
        display: flex; flex-direction: column; height: 100%;
        padding: 26px 28px 28px; border-radius: 16px;
        border: 1px solid rgba(var(--accent-rgb), 0.34);
        background:
          radial-gradient(130% 90% at 100% 0%, rgba(var(--accent-rgb),0.10), transparent 55%),
          linear-gradient(180deg, var(--bg-elev), var(--bg-elev-2));
        color: var(--fg);
        cursor: pointer;
        position: relative; overflow: hidden;
        transition: transform 420ms cubic-bezier(0.22,0.61,0.36,1), border-color 420ms ease, box-shadow 420ms ease;
        box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 34px -18px rgba(var(--accent-rgb), 0.4), 0 0 16px -6px rgba(var(--accent-rgb), 0.28);
      }
      .ia-tab > * { position: relative; z-index: 1; }
      .ia-tab::before {
        content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.6; z-index: 0;
        background-image:
          linear-gradient(var(--line) 1px, transparent 1px),
          linear-gradient(90deg, var(--line) 1px, transparent 1px);
        background-size: 28px 28px;
        -webkit-mask-image: radial-gradient(130% 80% at 100% 0%, #000, transparent 62%);
        mask-image: radial-gradient(130% 80% at 100% 0%, #000, transparent 62%);
      }
      .ia-tab::after {
        content: ""; position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; z-index: 1;
        border-top: 1px solid var(--accent); border-right: 1px solid var(--accent);
        opacity: 0.6; transition: opacity 420ms ease, box-shadow 420ms ease;
      }
      .ia-tab:hover {
        transform: translateY(-6px);
        border-color: rgba(var(--accent-rgb), 0.7);
        box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--accent-rgb), 0.28), 0 26px 60px -22px rgba(var(--accent-rgb), 0.55);
      }
      .ia-tab:hover::after { opacity: 1; box-shadow: 6px -6px 14px -6px rgba(var(--accent-rgb), 0.6); }
      .ia-tab.is-active {
        border-color: rgba(var(--accent-rgb), 0.34);
        box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 34px -18px rgba(var(--accent-rgb), 0.4), 0 0 16px -6px rgba(var(--accent-rgb), 0.28);
      }
      .ia-tab.is-active::after { opacity: 1; }
      .ia-tab-num { font-family: var(--ff-mono); font-size: 11px; color: var(--fg-dim); letter-spacing: 0.18em; }
      .ia-tab.is-active .ia-tab-num { color: var(--accent); }
      .ia-tab-sub { font-family: var(--ff-mono); font-size: 10px; color: var(--fg-dim); letter-spacing: 0.14em; }
      .ia-tab-title { color: var(--fg); }
      .ia-tab-desc { color: var(--fg-muted); margin: 0; font-size: 15px; line-height: 1.55; }

      /* Floating chips */
      .ia-chip {
        position: absolute; z-index: 3;
        display: inline-flex; align-items: center; gap: 8px;
        background: var(--bg-elev); color: var(--fg);
        padding: 8px 12px 8px 10px; border-radius: 999px;
        border: 1px solid var(--line);
        box-shadow: var(--shadow-md);
        font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.04em;
        opacity: 0; transform: translateY(8px);
        animation: ia-pop 600ms cubic-bezier(0.22,0.61,0.36,1) forwards;
      }
      .ia-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18); }
      .ia-chip-lbl { font-weight: 500; }
      .ia-chip-t { color: var(--fg-muted); padding-left: 6px; border-left: 1px solid var(--line); margin-left: 2px; }
      .ia-chip--tl { top: 12%; left: -2%; }
      .ia-chip--tr { top: 24%; right: -2%; }
      .ia-chip--br { bottom: 14%; right: -4%; }
      .ia-chip--bl { bottom: 18%; left: -4%; }
      @keyframes ia-pop {
        0% { opacity: 0; transform: translateY(10px) scale(0.92); }
        60%{ opacity: 1; transform: translateY(-2px) scale(1.02); }
        100%{ opacity: 1; transform: translateY(0) scale(1); }
      }

      /* PHONE — realistic iPhone */
      .ia-phone {
        position: relative;
        width: 320px; height: 660px;
        border-radius: 50px;
        background: linear-gradient(155deg, #1a1d24 0%, #0a0c12 100%);
        box-shadow:
          0 30px 60px rgba(15,22,38,0.22),
          0 10px 24px rgba(15,22,38,0.10),
          inset 0 0 0 2px rgba(255,255,255,0.04),
          inset 0 0 0 6px rgba(0,0,0,0.6);
        padding: 10px;
      }
      .ia-phone::before {
        content: ""; position: absolute; inset: 4px; border-radius: 46px;
        background: linear-gradient(155deg, rgba(255,255,255,0.04), transparent 30%);
        pointer-events: none;
      }
      .ia-phone-mute, .ia-phone-vol, .ia-phone-power {
        position: absolute; background: #0a0c12; border-radius: 2px;
      }
      .ia-phone-mute  { left: -2px; top: 110px; width: 3px; height: 28px; }
      .ia-phone-vol--up { left: -2px; top: 160px; width: 3px; height: 46px; }
      .ia-phone-vol--dn { left: -2px; top: 220px; width: 3px; height: 46px; }
      .ia-phone-power   { right: -2px; top: 180px; width: 3px; height: 64px; }

      .ia-phone-inner {
        position: relative;
        width: 100%; height: 100%;
        border-radius: 40px;
        overflow: hidden;
        background: #0b141a;
        display: flex; flex-direction: column;
      }
      .ia-island {
        position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
        width: 96px; height: 26px; border-radius: 16px;
        background: #000; z-index: 10;
      }

      .ia-status {
        display: flex; justify-content: space-between; align-items: center;
        padding: 14px 24px 6px;
        color: #fff;
        background: #1f2c33;
        font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
        font-size: 13px; font-weight: 600;
        position: relative; z-index: 5;
      }
      .ia-status-time { width: 60px; }
      .ia-status-r { display: inline-flex; align-items: center; gap: 5px; }
      .ia-status-bat {
        display: inline-block; width: 22px; height: 10px;
        border: 1px solid currentColor; border-radius: 2px;
        position: relative; opacity: 0.9;
      }
      .ia-status-bat::after {
        content: ""; position: absolute; right: -3px; top: 2px; width: 2px; height: 4px;
        background: currentColor; border-radius: 0 1px 1px 0;
      }
      .ia-status-bat > span {
        position: absolute; inset: 1px; right: 7px; background: currentColor; border-radius: 1px;
      }

      .ia-wa-header {
        background: #1f2c33;
        padding: 6px 14px 10px;
        display: flex; align-items: center; gap: 10px;
        color: #e9edef;
      }
      .ia-wa-avatar {
        width: 34px; height: 34px; border-radius: 50%;
        background: #0b141a;
        display: grid; place-items: center; overflow: hidden;
        box-shadow: 0 0 0 1px rgba(16,202,254,0.45), 0 0 12px -3px rgba(16,202,254,0.7);
      }
      .ia-wa-avatar img { width: 22px; height: 22px; object-fit: contain; }
      .ia-wa-meta { flex: 1; min-width: 0; }
      .ia-wa-name { font-size: 14px; font-weight: 600; }
      .ia-wa-on { font-size: 10.5px; color: #8696a0; display: inline-flex; align-items: center; gap: 5px; }
      .ia-wa-dot { width: 6px; height: 6px; border-radius: 50%; background: #25d366; box-shadow: 0 0 6px #25d366; animation: ia-pulse 1.8s ease-in-out infinite; }
      .ia-wa-icons { display: inline-flex; gap: 14px; }
      @keyframes ia-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

      .ia-wa-chat {
        flex: 1; padding: 12px 10px;
        display: flex; flex-direction: column; gap: 4px;
        overflow-y: auto;
        background:
          radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 16px 16px,
          #0b141a;
      }
      .ia-wa-chat::-webkit-scrollbar { display: none; }
      .ia-wa-day {
        align-self: center;
        background: #182229; color: #8696a0;
        font-size: 10px; padding: 4px 10px; border-radius: 8px;
        margin: 4px 0 8px;
        letter-spacing: 0.06em;
      }
      .ia-msg { display: flex; }
      .ia-msg--mine { justify-content: flex-end; }
      .ia-msg--them { justify-content: flex-start; }
      .ia-msg-bubble {
        max-width: 78%;
        padding: 7px 9px 5px;
        border-radius: 8px;
        position: relative;
        animation: ia-bubble 320ms cubic-bezier(0.22,0.61,0.36,1) both;
      }
      .ia-msg--mine .ia-msg-bubble { background: #005c4b; color: #e9edef; border-top-right-radius: 2px; }
      .ia-msg--them .ia-msg-bubble { background: #202c33; color: #e9edef; border-top-left-radius: 2px; }
      .ia-msg-text { font-size: 12.5px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; padding-right: 44px; }
      .ia-msg-foot {
        position: absolute; bottom: 4px; right: 8px;
        display: inline-flex; align-items: center; gap: 4px;
        font-size: 9.5px; color: rgba(233,237,239,0.55);
      }
      @keyframes ia-bubble {
        0%   { opacity: 0; transform: translateY(8px) scale(0.96); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
      }

      .ia-typing {
        padding: 10px 14px; min-width: 56px;
        display: inline-flex; align-items: center; gap: 4px;
      }
      .ia-typing > span {
        width: 6px; height: 6px; border-radius: 50%; background: rgba(233,237,239,0.6);
        animation: ia-typing 1.2s ease-in-out infinite;
      }
      .ia-typing > span:nth-child(2) { animation-delay: 0.15s; }
      .ia-typing > span:nth-child(3) { animation-delay: 0.3s; }
      @keyframes ia-typing { 0%,80%,100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-3px); opacity: 1; } }

      .ia-wa-input {
        padding: 8px 8px 10px; background: #1f2c33;
        display: flex; align-items: center; gap: 8px;
      }
      .ia-wa-inputbar {
        flex: 1; height: 36px; background: #2a3942; border-radius: 22px;
        display: inline-flex; align-items: center; gap: 8px;
        padding: 0 12px;
        color: #8696a0; font-size: 12.5px;
      }
      .ia-wa-inputbar > span { flex: 1; }
      .ia-wa-mic {
        width: 36px; height: 36px; border-radius: 50%;
        background: #00a884; display: grid; place-items: center;
        box-shadow: 0 4px 10px rgba(0,168,132,0.30);
      }

      .ia-home {
        position: absolute; left: 50%; transform: translateX(-50%); bottom: 6px;
        width: 110px; height: 4px; background: #fff; opacity: 0.7; border-radius: 2px; z-index: 10;
      }

      @media (max-width: 880px) {
        .ia-phone { width: 280px; height: 580px; }
        .ia-chip { font-size: 10px; padding: 6px 10px; }
        .ia-chip--tl, .ia-chip--bl { left: 4px; }
        .ia-chip--tr, .ia-chip--br { right: 4px; }
      }
    `}</style>
  );
}

Object.assign(window, { ContaCorrente, IAAtendimento });
