:root{
  --verde:#008069;
  --verde-claro:#00a884;
  --fundo:#efeae2;
  --in:#ffffff;
  --out:#d9fdd3;
  --texto:#111b21;
  --sub:#667781;
  --azul:#53bdeb;
  --link:#027eb5;
  --sombra:0 1px .5px rgba(11,20,26,.13);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--texto);
  background:#d1d7db;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

.app{
  position:relative;
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;
  max-width:480px;margin:0 auto;
  background:var(--fundo);
  overflow:hidden;
}
@media (min-width:560px){
  body{background:linear-gradient(var(--verde-claro) 0 130px,#d1d7db 130px)}
  .app{height:calc(100dvh - 40px);margin-top:20px;border-radius:10px;box-shadow:0 6px 24px rgba(11,20,26,.18)}
}

/* ---------- topo ---------- */
.topo{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;
  padding-top:max(10px,env(safe-area-inset-top));
  background:var(--verde);color:#fff;
  z-index:2;flex:none;
}
.avatar{
  width:42px;height:42px;border-radius:50%;flex:none;
  background:#dfe5e7 center/cover no-repeat;
  display:grid;place-items:center;
  font-weight:600;font-size:15px;color:var(--verde);
}
.info{min-width:0}
.nome{font-size:16.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status{font-size:13px;opacity:.85;min-height:16px;transition:opacity .2s}

/* ---------- conversa ---------- */
.chat{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:10px 5% 10px;
  display:flex;flex-direction:column;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23c9bfae' stroke-width='1.2' opacity='.55'%3E%3Ccircle cx='12' cy='14' r='3'/%3E%3Cpath d='M52 10c3-4 9-1 7 3l-7 7-7-7c-2-4 4-7 7-3z'/%3E%3Cpath d='M30 46l4 8 4-8'/%3E%3Ccircle cx='66' cy='52' r='2'/%3E%3Cpath d='M10 64h8M14 60v8'/%3E%3C/g%3E%3C/svg%3E");
}
.chip{
  align-self:center;background:#fff;color:var(--sub);
  font-size:12.5px;padding:5px 12px;border-radius:8px;
  box-shadow:var(--sombra);margin:4px 0 8px;text-transform:uppercase;
}
.aviso{
  align-self:center;background:#ffeecd;color:#54656f;
  font-size:12.5px;line-height:16px;padding:6px 12px;border-radius:8px;
  text-align:center;max-width:92%;margin-bottom:6px;box-shadow:var(--sombra);
}

.msg{
  position:relative;
  max-width:82%;
  margin-top:2px;
  padding:6px 8px 8px 9px;
  border-radius:8px;
  font-size:15px;line-height:20px;
  box-shadow:var(--sombra);
  overflow-wrap:anywhere;
  animation:entra .22s ease-out both;
}
.msg.in{align-self:flex-start;background:var(--in);transform-origin:left top}
.msg.out{align-self:flex-end;background:var(--out);transform-origin:right top}
.msg.cauda{margin-top:10px}
.msg.in.cauda{border-top-left-radius:0}
.msg.out.cauda{border-top-right-radius:0}
.msg.cauda::before{content:"";position:absolute;top:0;width:8px;height:13px}
.msg.in.cauda::before{left:-8px;background:var(--in);clip-path:polygon(0 0,100% 0,100% 100%)}
.msg.out.cauda::before{right:-8px;background:var(--out);clip-path:polygon(0 0,100% 0,0 100%)}
.msg b{font-weight:600}

.meta{
  float:right;position:relative;top:6px;
  margin:0 0 0 12px;
  display:inline-flex;align-items:center;gap:3px;
  font-size:11px;line-height:15px;color:var(--sub);
  white-space:nowrap;
}
.ticks{display:inline-flex;color:#8696a0;transition:color .25s}
.ticks .t2{opacity:0;transition:opacity .2s}
.ticks.entregue .t2,.ticks.lido .t2{opacity:1}
.ticks.lido{color:var(--azul)}

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

/* digitando… */
.msg.digitando{padding:13px 14px;display:flex;gap:4px}
.msg.digitando span{
  width:7px;height:7px;border-radius:50%;background:#9aa6ac;
  animation:pula 1.2s infinite ease-in-out;
}
.msg.digitando span:nth-child(2){animation-delay:.15s}
.msg.digitando span:nth-child(3){animation-delay:.3s}
@keyframes pula{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* botão dentro do balão (CTA) */
.msg .cta{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:10px -8px -8px -9px;padding:11px 10px;
  border-top:1px solid #e9edef;
  color:var(--link);font-weight:500;text-decoration:none;font-size:15px;
}
.msg .cta:active{background:#f5f6f6}

/* ---------- respostas por toque ---------- */
.opcoes{
  display:flex;flex-direction:column;align-items:stretch;gap:7px;
  padding:0 5%;
  max-height:55%;overflow-y:auto;flex:none;
}
.opcoes:not(:empty){padding-top:6px;padding-bottom:4px}
.opcao{
  font:inherit;font-size:15px;line-height:20px;
  background:#fff;color:var(--verde);
  border:1px solid rgba(0,128,105,.25);border-radius:22px;
  padding:11px 16px;text-align:center;cursor:pointer;
  box-shadow:var(--sombra);
  animation:sobe .28s ease-out both;
  transition:background .15s,transform .1s;
}
.opcao:hover{background:#f0faf7}
.opcao:active{transform:scale(.98)}
.opcao.principal{background:var(--verde-claro);color:#fff;border-color:transparent;font-weight:600}
.opcao.principal:hover{background:var(--verde)}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- barra de digitação ---------- */
.barra{
  display:flex;align-items:center;gap:8px;flex:none;
  padding:6px 8px 8px;
  padding-bottom:max(8px,env(safe-area-inset-bottom));
}
.barra input{
  flex:1;min-width:0;
  font:inherit;font-size:16px; /* 16px evita zoom no iPhone */
  padding:12px 18px;border:none;border-radius:24px;
  background:#fff;color:var(--texto);outline:none;
  box-shadow:var(--sombra);
}
.barra input:disabled{background:#f7f8f8;color:var(--sub)}
.barra input::placeholder{color:#8696a0}
.enviar{
  width:48px;height:48px;flex:none;border:none;border-radius:50%;
  background:var(--verde-claro);color:#fff;cursor:pointer;
  display:grid;place-items:center;
  transition:transform .1s,opacity .2s;
}
.enviar:active{transform:scale(.94)}
.enviar:disabled{opacity:.45;cursor:default}
.barra.oculta{display:none}

@media (prefers-reduced-motion:reduce){
  .msg,.opcao{animation:none}
}