/* ═══════════════════════════════════════════════════════════════════════
   LOVE MILES TRAVEL · assistente flutuante

   Desktop: bolha em baixo à direita, painel de 384px ancorado ao canto.
   Telemóvel: o painel abre em folha, do fundo até ao topo, porque um
   painelzinho de 384px num ecrã de 375px é uma caixa dentro de uma caixa.
   ═══════════════════════════════════════════════════════════════════════ */

.ag{
  --ag-l: 96px;                 /* lado da bolha fechada */
  position:fixed; right:clamp(1rem,3vw,1.75rem); bottom:clamp(1rem,3vw,1.75rem);
  z-index:70; display:flex; flex-direction:column; align-items:flex-end; gap:.75rem;
}

/* ─────────── a bolha ─────────── */

.ag__bolha{
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.25rem .85rem 1.05rem; border:0; cursor:pointer;
  border-radius:999px; background:var(--olive); color:#fff;
  font-family:var(--f-body); font-size:.95rem; font-weight:600; letter-spacing:-.01em;
  box-shadow:0 10px 30px -8px rgba(4,34,42,.5), 0 2px 6px rgba(4,34,42,.2);
  transition:transform .28s var(--ease), background .28s var(--ease), box-shadow .28s var(--ease);
}
.ag__bolha:hover{ background:var(--olive-lift); transform:translateY(-2px) }
.ag__bolha:focus-visible{ outline:3px solid var(--surf); outline-offset:3px }
.ag__bolha-ic, .ag__bolha-x{ display:grid; place-items:center; width:26px; height:26px; flex:none }
.ag__bolha svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.ag__bolha-x{ display:none }
.ag.is-aberto .ag__bolha-ic{ display:none }
.ag.is-aberto .ag__bolha-x{ display:grid }
.ag.is-aberto .ag__bolha{ background:var(--abyss-2) }

/* ponto de chamada, discreto e só uma vez */
.ag__ponto{
  position:absolute; top:6px; right:8px; width:10px; height:10px; border-radius:50%;
  background:#F2603C; box-shadow:0 0 0 3px var(--olive);
}
.ag__ponto[hidden]{ display:none }

/* ─────────── o painel ─────────── */

.ag__painel{
  width:min(384px, calc(100vw - 2rem)); height:min(600px, calc(100vh - 8rem));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:0 30px 70px -22px rgba(4,34,42,.55), 0 4px 14px rgba(4,34,42,.12);
  animation:agEntra .34s var(--ease) both;
}
.ag__painel[hidden]{ display:none }
@keyframes agEntra{ from{ opacity:0; transform:translateY(14px) scale(.97) } to{ opacity:1; transform:none } }

/* cabeçalho */
.ag__cab{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.95rem 1rem .95rem 1.1rem; background:var(--abyss); color:var(--on-dark); flex:none;
}
.ag__id{ display:flex; align-items:center; gap:.7rem; min-width:0 }
.ag__av{
  width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--teal-lift),var(--petrol));
}
.ag__av svg{ width:22px; height:22px; fill:#fff; opacity:.95 }
.ag__id-t{ display:flex; flex-direction:column; min-width:0 }
.ag__id-t b{ font-size:.92rem; font-weight:600; letter-spacing:-.01em }
.ag__estado{
  display:flex; align-items:center; gap:.4rem; font-style:normal;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--on-dark-3); margin-top:.15rem;
}
.ag__estado span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ag__pisca{ width:7px; height:7px; border-radius:50%; background:var(--on-dark-3); flex:none }
.ag__pisca.is-on{ background:var(--olive-lift); box-shadow:0 0 0 0 rgba(152,188,59,.7); animation:agPisca 2.2s infinite }
@keyframes agPisca{ 70%{ box-shadow:0 0 0 7px rgba(152,188,59,0) } 100%{ box-shadow:0 0 0 0 rgba(152,188,59,0) } }
.ag__x{
  background:none; border:0; color:var(--on-dark-2); cursor:pointer; padding:.4rem; flex:none;
  border-radius:8px; display:grid; place-items:center;
}
.ag__x svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round }
.ag__x:hover{ color:#fff; background:rgba(255,255,255,.1) }

/* conversa */
.ag__fluxo{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:1.1rem 1rem .6rem; display:flex; flex-direction:column; gap:.6rem;
  background:var(--paper); scroll-behavior:smooth;
}
.ag__m{ display:flex; max-width:88% }
.ag__m--bot{ align-self:flex-start }
.ag__m--eu{ align-self:flex-end }
.ag__b{
  padding:.7rem .9rem; border-radius:var(--r-m); font-size:.92rem; line-height:1.55;
  animation:agBolha .3s var(--ease) both;
}
@keyframes agBolha{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.ag__m--bot .ag__b{ background:var(--card); border:1px solid var(--line-2); border-bottom-left-radius:6px; color:var(--ink) }
.ag__m--eu .ag__b{ background:var(--petrol); color:#fff; border-bottom-right-radius:6px }
.ag__b b{ font-weight:600 }
.ag__m--eu .ag__b b{ color:#fff }

/* pontinhos de "a escrever" */
.ag__pts{ display:inline-flex; gap:4px; padding:.15rem 0 }
.ag__pts i{ width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:agPts 1.3s infinite }
.ag__pts i:nth-child(2){ animation-delay:.17s } .ag__pts i:nth-child(3){ animation-delay:.34s }
@keyframes agPts{ 0%,60%,100%{ opacity:.25; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-3px) } }

/* resumo do pedido */
.ag__resumo{
  align-self:flex-start; max-width:88%; margin-top:.2rem;
  background:var(--card); border:1px dashed var(--olive); border-radius:var(--r-m);
  padding:.75rem .9rem; font-size:.88rem;
}
.ag__resumo b{
  display:block; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--olive-deep); margin-bottom:.45rem; font-weight:500;
}
.ag__resumo ul{ margin:0; padding-left:1.05rem; display:flex; flex-direction:column; gap:.2rem; color:var(--ink-2) }

/* sugestões */
.ag__chips{
  display:flex; flex-wrap:wrap; gap:.4rem; padding:.6rem 1rem .2rem; flex:none;
  background:var(--paper); border-top:1px solid var(--line-2);
}
.ag__chips.is-vazio{ display:none }
.ag__chip{
  font-family:var(--f-body); font-size:.82rem; font-weight:500; line-height:1.3;
  padding:.5rem .8rem; border-radius:999px; cursor:pointer;
  background:var(--card); border:1px solid var(--line); color:var(--ink);
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.ag__chip:hover{ border-color:var(--olive); color:var(--olive-deep); background:#fff }
.ag__chip--fant{ background:transparent; border-style:dashed; color:var(--ink-3) }

.ag__zap{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-family:var(--f-body); font-size:.86rem; font-weight:600;
  padding:.65rem 1rem; border-radius:999px; background:#25D366; color:#062b13;
  transition:filter .2s var(--ease);
}
.ag__zap:hover{ filter:brightness(1.07) }
.ag__zap svg{ width:18px; height:18px; fill:currentColor; flex:none }

/* entrada */
.ag__forma{ display:flex; gap:.5rem; padding:.7rem 1rem .5rem; flex:none; background:var(--paper) }
.ag__in{
  flex:1; min-width:0; font-family:var(--f-body); font-size:.95rem; color:var(--ink);
  padding:.7rem .9rem; border-radius:999px; border:1px solid var(--line); background:var(--card);
}
.ag__in:focus{ outline:none; border-color:var(--olive); box-shadow:0 0 0 3px rgba(152,188,59,.22) }
.ag__env{
  flex:none; width:44px; height:44px; border:0; border-radius:50%; cursor:pointer;
  background:var(--olive); color:#fff; display:grid; place-items:center;
  transition:background .2s var(--ease);
}
.ag__env:hover{ background:var(--olive-lift) }
.ag__env svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round }

.ag__aviso{
  margin:0; padding:0 1rem .8rem; flex:none; background:var(--paper);
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.03em; line-height:1.45; color:var(--ink-3);
}

/* ─────────── telemóvel: folha a ecrã inteiro ─────────── */

@media (max-width:760px){
  .ag{ right:1rem; bottom:1rem; left:1rem; align-items:flex-end }

  .ag__bolha-t{ display:none }             /* só o ícone, para não tapar a página */
  .ag__bolha{ padding:.95rem; border-radius:50% }
  .ag.is-aberto .ag__bolha{ display:none } /* o painel tem o seu próprio X */

  .ag__painel{
    position:fixed; inset:0; width:100%; height:100dvh;
    border:0; border-radius:0; animation:agFolha .3s var(--ease) both;
    padding-bottom:env(safe-area-inset-bottom);
  }
  @keyframes agFolha{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }

  .ag__cab{ padding-top:max(.95rem, env(safe-area-inset-top)) }
  .ag__m{ max-width:92% }
  .ag__b{ font-size:.95rem }
  /* 16px impede o iOS de fazer zoom ao tocar no campo */
  .ag__in{ font-size:16px }
  .ag__chips{ padding:.6rem 1rem .25rem }
}

/* Com o painel aberto no telemóvel, a página por trás não deve deslizar. */
body.ag-aberto{ overflow:hidden }
@media (min-width:761px){ body.ag-aberto{ overflow:auto } }

/* O botão de WhatsApp solto sai de cena: uma coisa flutuante, não duas.
   O assistente oferece o WhatsApp como acção de fecho. */
.ag ~ .zap-float, .zap-float:has(~ .ag){ display:none }

@media (prefers-reduced-motion:reduce){
  .ag__painel, .ag__b{ animation:none }
  .ag__pts i, .ag__pisca{ animation:none }
  .ag__bolha{ transition:none }
}