/* ══════════════════════════════════════════════════════════════════
   Receitas Portugal — a conversa
   Mobile-first. Sem build, sem framework, sem dependência externa.
   As cores estão em variáveis: trocar aqui muda a página inteira.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --azul:#0084ff;
  --azul-escuro:#0068cc;
  --verde:#16a34a;
  --verde-escuro:#15803d;
  --online:#31a24c;
  --balao:#f0f0f0;
  --texto:#050505;
  --texto-fraco:#65676b;
  --linha:#e4e6eb;
  --fundo:#ffffff;
  --navy:#22364d;

  /* Altura real da janela no telemóvel: a barra do browser some e volta, e
     100vh mede sempre a MAIOR das duas — o rodapé ficaria escondido debaixo
     dela. O JS escreve --vh a cada resize; o valor abaixo vale antes disso. */
  --vh:1vh;
}

*,*::before,*::after{box-sizing:border-box;}

html,body{
  margin:0;padding:0;height:100%;
  background:var(--fundo);
  color:var(--texto);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
body{
  /* Sem realce de toque e sem seleção acidental: é para parecer uma app,
     não uma página. O texto dos balões volta a ser selecionável abaixo. */
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
}

/* ─────────────── o telemóvel ─────────────── */
.app{
  display:flex;flex-direction:column;
  height:calc(var(--vh)*100);
  width:100%;max-width:640px;margin:0 auto;
  background:var(--fundo);
  overflow:hidden;
  position:relative;
}
@supports (height:100dvh){ .app{height:100dvh;} }

/* ─────────────── cabeçalho ─────────────── */
.topo{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;
  padding-top:calc(10px + env(safe-area-inset-top));
  flex-shrink:0;
  background:var(--fundo);
  border-bottom:1px solid var(--linha);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  z-index:20;
}
.topo__voltar{
  background:none;border:0;padding:2px;margin:0;cursor:pointer;
  display:flex;align-items:center;color:var(--azul);
}
.topo__voltar svg{width:24px;height:24px;}

.avatar{
  position:relative;flex-shrink:0;
  width:36px;height:36px;border-radius:50%;
  background:var(--balao);
  overflow:visible;
}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}
.avatar--pontinho::after{
  content:"";position:absolute;right:-1px;bottom:-1px;
  width:11px;height:11px;border-radius:50%;
  background:var(--online);border:2px solid var(--fundo);
}

.topo__nome{flex:1;min-width:0;line-height:1.25;}
.topo__nome b{
  display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.topo__nome span{display:block;font-size:12px;color:var(--texto-fraco);}
.topo__acoes{display:flex;align-items:center;gap:18px;color:var(--azul);flex-shrink:0;}
.topo__acoes svg{width:22px;height:22px;display:block;}

/* ─────────────── a conversa ─────────────── */
.conversa{
  flex:1;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:16px 12px 10px;
  display:flex;flex-direction:column;gap:2px;
  scrollbar-width:thin;
}
.conversa::-webkit-scrollbar{width:6px;}
.conversa::-webkit-scrollbar-thumb{background:#d5d7db;border-radius:3px;}

.intro{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:12px 24px 26px;gap:6px;
}
.intro .avatar{width:64px;height:64px;}
.intro .avatar--pontinho::after{width:15px;height:15px;border-width:3px;right:1px;bottom:1px;}
.intro__nome{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:6px 0 0;}
.intro__laco{font-size:13px;color:var(--texto-fraco);margin:0;}

/* ─────────────── balões ─────────────── */
.linha{display:flex;align-items:flex-end;gap:8px;margin-top:2px;}
.linha--dela{justify-content:flex-start;}
.linha--minha{justify-content:flex-end;}
.linha__avatar{width:28px;height:28px;flex-shrink:0;align-self:flex-end;}
.linha__avatar.vazio{visibility:hidden;}

.balao{
  max-width:78%;
  padding:9px 13px;
  border-radius:18px;
  font-size:15px;line-height:1.36;
  word-wrap:break-word;overflow-wrap:anywhere;
  -webkit-user-select:text;user-select:text;
  animation:entra .24s cubic-bezier(.2,.8,.3,1);
}
.balao--dela{background:var(--balao);color:var(--texto);border-bottom-left-radius:5px;}
.balao--minha{background:var(--azul);color:#fff;border-bottom-right-radius:5px;}
.balao b,.balao strong{font-weight:700;}

@keyframes entra{
  from{opacity:0;transform:translateY(8px) scale(.97);}
  to{opacity:1;transform:none;}
}

/* ─────────────── "a escrever" / "a gravar" ─────────────── */
.pontinhos{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--balao);border-radius:18px;border-bottom-left-radius:5px;
  padding:13px 15px;
}
.pontinhos i{
  width:8px;height:8px;border-radius:50%;background:#9aa0a6;display:block;
  animation:pula 1.25s infinite ease-in-out;
}
.pontinhos i:nth-child(2){animation-delay:.18s;}
.pontinhos i:nth-child(3){animation-delay:.36s;}
@keyframes pula{
  0%,60%,100%{transform:translateY(0);opacity:.55;}
  30%{transform:translateY(-5px);opacity:1;}
}
.pontinhos--gravando i{background:#e8443a;}

/* ─────────────── áudio ─────────────── */
.audio{
  display:flex;align-items:center;gap:11px;
  background:var(--balao);border-radius:18px;border-bottom-left-radius:5px;
  padding:9px 15px 9px 12px;max-width:78%;
  animation:entra .24s cubic-bezier(.2,.8,.3,1);
}
.audio__play{
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  width:22px;height:22px;flex-shrink:0;color:var(--texto);
  display:flex;align-items:center;justify-content:center;
}
.audio__play svg{width:100%;height:100%;display:block;}
.onda{display:flex;align-items:center;gap:2px;height:24px;flex:1;min-width:108px;}
.onda i{display:block;width:2px;border-radius:1px;background:#a8adb3;transition:background .1s linear;}
.onda i.passou{background:var(--azul);}
.audio__tempo{
  font-size:12px;color:var(--texto-fraco);flex-shrink:0;
  font-variant-numeric:tabular-nums;min-width:32px;text-align:right;
}

/* ─────────────── cartão de PDF ─────────────── */
.pdf{
  max-width:82%;width:272px;
  border:1px solid var(--linha);border-radius:14px;overflow:hidden;
  background:var(--fundo);
  animation:entra .24s cubic-bezier(.2,.8,.3,1);
}
.pdf__topo{display:flex;align-items:center;gap:12px;padding:12px;background:#f7f8fa;}
.pdf__icone{
  width:42px;height:42px;border-radius:10px;flex-shrink:0;
  background:#fde8e8;color:#d93025;
  display:flex;align-items:center;justify-content:center;
}
.pdf__icone svg{width:22px;height:22px;}
.pdf__nome{min-width:0;line-height:1.3;}
.pdf__nome b{
  display:block;font-size:14px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pdf__nome span{display:block;font-size:12px;color:var(--texto-fraco);text-transform:uppercase;}
.pdf__abrir{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:11px;border:0;border-top:1px solid var(--linha);
  background:var(--fundo);color:var(--azul);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;
}
.pdf__abrir:active{background:#f2f3f5;}
.pdf__abrir svg{width:17px;height:17px;}

/* ─────────────── botões de escolha ─────────────── */
.escolhas{display:flex;flex-direction:column;gap:9px;margin:9px 0 4px;align-items:flex-end;}
.escolha{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:min(100%,430px);
  padding:14px 18px;border:0;border-radius:999px;
  background:var(--azul);color:#fff;
  font:inherit;font-size:15px;font-weight:600;text-align:left;
  cursor:pointer;text-decoration:none;
  transition:background .15s,transform .08s;
  animation:entra .24s cubic-bezier(.2,.8,.3,1);
}
.escolha:active{transform:scale(.985);}
.escolha:hover{background:var(--azul-escuro);}
.escolha svg{width:18px;height:18px;flex-shrink:0;opacity:.9;}
.escolha--verde{background:var(--verde);}
.escolha--verde:hover{background:var(--verde-escuro);}
.escolha--pulsa{animation:entra .24s cubic-bezier(.2,.8,.3,1),pulsa 1.9s .3s infinite;}
@keyframes pulsa{
  0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.42);}
  55%{box-shadow:0 0 0 12px rgba(22,163,74,0);}
}

/* ⚠️ Os <a> de checkout nascem no HTML e ficam escondidos AQUI, nunca por
   display:none via JS depois — a UTMify precisa de os ver no DOM no momento
   em que corre, senão nunca lhes escreve o xcod. Ver o README. */
.escondido{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ─────────────── barra de escrever ─────────────── */
.rodape{
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;padding:9px 12px;
  padding-bottom:calc(9px + env(safe-area-inset-bottom));
  border-top:1px solid var(--linha);background:var(--fundo);
}
.rodape__mais{color:var(--azul);display:flex;flex-shrink:0;}
.rodape__mais svg{width:25px;height:25px;}
.rodape__campo{
  flex:1;background:#f0f2f5;border-radius:999px;
  padding:9px 16px;color:#8a8d91;font-size:15px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rodape__joia{font-size:22px;line-height:1;flex-shrink:0;}

/* ═══════════════ o visor de PDF ═══════════════ */
.visor{
  position:fixed;inset:0;z-index:100;
  display:none;flex-direction:column;
  background:rgba(10,18,28,.55);
  padding:14px;
  animation:aparece .18s ease-out;
}
.visor[data-aberto="1"]{display:flex;}
@keyframes aparece{from{opacity:0;}to{opacity:1;}}

.visor__caixa{
  display:flex;flex-direction:column;
  width:100%;max-width:720px;margin:auto;
  height:100%;
  border-radius:16px;overflow:hidden;
  background:var(--fundo);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.visor__topo{
  display:flex;align-items:center;gap:12px;flex-shrink:0;
  padding:12px 14px;background:var(--navy);color:#fff;
}
.visor__icone{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:#e5484d;color:#fff;display:flex;align-items:center;justify-content:center;
}
.visor__icone svg{width:20px;height:20px;}
.visor__titulo{flex:1;min-width:0;line-height:1.3;}
.visor__titulo b{
  display:block;font-size:14px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.visor__titulo span{display:block;font-size:12px;opacity:.7;font-variant-numeric:tabular-nums;}
.visor__fechar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  border:0;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;
}
.visor__fechar svg{width:18px;height:18px;}

.visor__palco{
  flex:1;min-height:0;position:relative;
  overflow:auto;-webkit-overflow-scrolling:touch;
  background:#dbe5f0;
  background-image:radial-gradient(rgba(34,54,77,.13) 1px,transparent 1px);
  background-size:14px 14px;
  padding:14px;
  display:flex;justify-content:center;align-items:flex-start;
}
.visor__folha{
  display:block;max-width:100%;height:auto;
  box-shadow:0 4px 18px rgba(20,35,55,.22);
  border-radius:3px;background:#fff;
  /* A página é DESENHADA numa tela. Não há <img> nem <embed>, portanto não há
     "guardar imagem como" nem barra de PDF do browser com botão de download. */
  pointer-events:none;
}
.visor__aviso{
  margin:auto;max-width:340px;text-align:center;
  color:var(--navy);font-size:14px;line-height:1.5;
  background:rgba(255,255,255,.78);border-radius:12px;padding:22px 20px;
}
.visor__aviso b{display:block;margin-bottom:6px;font-size:15px;}

.visor__zoom{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:10px;z-index:2;
}
.visor__zoom button{
  width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(20,35,55,.3);
}
.visor__zoom button:disabled{opacity:.4;cursor:default;}
.visor__zoom svg{width:19px;height:19px;}

.visor__pe{
  flex-shrink:0;background:#fbfbfc;border-top:1px solid var(--linha);
  padding:12px;display:flex;flex-direction:column;align-items:center;gap:11px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
}
.visor__nav{display:flex;align-items:center;gap:14px;}
.visor__nav button{
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.visor__nav button:disabled{background:#e6e8eb;color:#a9aeb5;cursor:default;}
.visor__nav svg{width:20px;height:20px;}
.visor__conta{
  background:var(--navy);color:#fff;border-radius:12px;
  padding:11px 22px;font-size:15px;font-weight:600;
  font-variant-numeric:tabular-nums;min-width:88px;text-align:center;
}
.visor__conta small{opacity:.6;font-weight:400;}
.visor__voltar{
  display:flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:12px;cursor:pointer;
  background:var(--navy);color:#fff;
  padding:12px 30px;font:inherit;font-size:15px;font-weight:600;
}
.visor__voltar svg{width:17px;height:17px;}

/* ─────────────── ecrã largo: o telemóvel ao meio ─────────────── */
@media (min-width:700px){
  body{background:#f0f2f5;}
  .app{
    border-left:1px solid var(--linha);
    border-right:1px solid var(--linha);
  }
}

@media (prefers-reduced-motion:reduce){
  *{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}