/* ═══════════════════════════════════════════════════════════════════
   EduSaaS — assistente flutuante
   Carregado depois de edusaas.css
   ═══════════════════════════════════════════════════════════════════ */

/* Pilha dos botões flutuantes, de baixo para cima:
   assistente (20px) · WhatsApp (90px) · voltar ao topo (154px).
   O !important evita depender da ordem em que as folhas carregam. */
.wa    { right: 20px !important; bottom: 90px !important; }
.totop { right: 20px !important; bottom: 154px !important; }

.chat { position: fixed; right: 20px; bottom: 20px; z-index: 80; }

/* ── Botão ───────────────────────────────────────────────────────── */
.chat__launch {
  position: relative;
  width: 58px; height: 58px; border-radius: 50%; border: 0;
  background: linear-gradient(132deg, var(--blue) 0%, var(--navy) 88%);
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 12px 30px -10px rgba(10,42,94,.85);
  transition: transform .18s cubic-bezier(.34,1.4,.5,1), box-shadow .2s ease;
}
.chat__launch:hover { transform: scale(1.06); box-shadow: 0 16px 36px -10px rgba(10,42,94,.9); }
.chat__launch svg { width: 27px; height: 27px; grid-area: 1 / 1; transition: opacity .2s ease, transform .25s ease; }
.chat__icon-close { opacity: 0; transform: rotate(-45deg) scale(.6); }
.chat.is-open .chat__icon-open { opacity: 0; transform: rotate(45deg) scale(.6); }
.chat.is-open .chat__icon-close { opacity: 1; transform: none; }

.chat__ping {
  position: absolute; top: 3px; right: 3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--green-light); border: 2.5px solid var(--paper);
}
.chat__ping::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--green-light); animation: chatPing 2.6s ease-out infinite;
}
@keyframes chatPing {
  0%   { transform: scale(.85); opacity: .9; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { opacity: 0; }
}
.chat.is-open .chat__ping, .chat.is-seen .chat__ping { display: none; }

/* ── Painel ──────────────────────────────────────────────────────── */
.chat__panel {
  position: absolute; right: 0; bottom: 72px;
  width: 370px; max-height: min(78vh, 560px);
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 26px 64px -22px rgba(10,42,94,.55), 0 2px 10px rgba(10,42,94,.08);
  transform-origin: bottom right;
  animation: chatIn .28s cubic-bezier(.22,1.1,.36,1) both;
}

/* O atributo hidden tem de vencer o display:flex acima, senao o painel
   fica sempre aberto e o botao de fechar nao produz efeito nenhum. */
.chat__panel[hidden] { display: none; }

@keyframes chatIn {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.chat__head {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 14px 14px 16px;
  background: linear-gradient(118deg, var(--navy-deep) 0%, var(--navy) 60%, var(--blue) 160%);
  color: #fff;
}
.chat__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.14); display: grid; place-items: center; flex: 0 0 auto;
}
.chat__avatar svg { width: 21px; height: 21px; }
.chat__ident { flex: 1; min-width: 0; line-height: 1.3; }
.chat__ident strong { display: block; font-size: .96rem; font-weight: 600; }
.chat__status { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: #A9C3E6; }
.chat__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green-light); }
.chat__x {
  background: none; border: 0; color: #A9C3E6; padding: 6px; border-radius: 50%;
  display: grid; place-items: center; transition: color .16s ease, background-color .16s ease;
}
.chat__x svg { width: 18px; height: 18px; }
.chat__x:hover { color: #fff; background: rgba(255,255,255,.12); }

/* ── Mensagens ───────────────────────────────────────────────────── */
.chat__log {
  flex: 1; overflow-y: auto; padding: 18px 16px 6px;
  background: var(--mist);
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin;
}
.chat__log::-webkit-scrollbar { width: 6px; }
.chat__log::-webkit-scrollbar-thumb { background: var(--mist-2); border-radius: 3px; }

.chat__msg {
  max-width: 84%; padding: 11px 14px; font-size: .92rem; line-height: 1.55;
  border-radius: 15px; animation: chatMsg .32s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes chatMsg { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.chat__msg--bot {
  align-self: flex-start; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-bottom-left-radius: 5px;
}
.chat__msg--me {
  align-self: flex-end; background: var(--blue); color: #fff;
  border-bottom-right-radius: 5px;
}
.chat__msg a { color: var(--blue); font-weight: 600; }
.chat__msg--me a { color: #fff; text-decoration: underline; }

.chat__link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
  font-size: .88rem; font-weight: 600; color: var(--blue); text-decoration: none;
}
.chat__link::after { content: '›'; font-size: 1.15rem; line-height: 1; }
.chat__link:hover { text-decoration: underline; }

.chat__typing { display: flex; gap: 4px; align-items: center; padding: 13px 15px; }
.chat__typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
  animation: chatDot 1.25s ease-in-out infinite;
}
.chat__typing i:nth-child(2) { animation-delay: .16s; }
.chat__typing i:nth-child(3) { animation-delay: .32s; }
@keyframes chatDot { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ── Sugestões ───────────────────────────────────────────────────── */
.chat__chips {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 12px 16px; background: var(--mist);
  border-top: 1px solid transparent;
}
.chat__chips:empty { display: none; }
.chat__chips button {
  background: var(--paper); border: 1.5px solid var(--mist-2); border-radius: 999px;
  padding: 7px 14px; font-size: .84rem; font-weight: 600; color: var(--navy);
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
  animation: chatMsg .3s ease both;
}
.chat__chips button:hover { border-color: var(--blue); background: var(--blue); color: #fff; }
.chat__chips button.chat__chip--wa { border-color: var(--green); color: var(--green); }
.chat__chips button.chat__chip--wa:hover { background: var(--green); border-color: var(--green); color: #fff; }

/* ── Campo de escrita ────────────────────────────────────────────── */
.chat__form {
  display: flex; gap: 8px; align-items: center;
  padding: 11px 12px; border-top: 1px solid var(--line); background: var(--paper);
}
.chat__form input {
  flex: 1; min-width: 0; padding: 11px 14px; font: inherit; font-size: .91rem;
  color: var(--ink); background: var(--mist);
  border: 1.5px solid transparent; border-radius: 999px;
  transition: border-color .16s ease, background-color .16s ease;
}
.chat__form input:focus { outline: none; border-color: var(--blue); background: var(--paper); }
.chat__form button {
  width: 40px; height: 40px; flex: 0 0 auto; border: 0; border-radius: 50%;
  background: var(--blue); color: #fff; display: grid; place-items: center;
  transition: background-color .16s ease, transform .14s ease;
}
.chat__form button:hover { background: var(--navy); transform: scale(1.05); }
.chat__form button svg { width: 18px; height: 18px; }

.chat__foot {
  margin: 0; padding: 0 16px 12px; background: var(--paper);
  font-size: .74rem; color: var(--muted); text-align: center;
}

/* ── Ecrãs pequenos ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .chat { right: 16px; bottom: 16px; }
  .chat__launch { width: 52px; height: 52px; }
  .wa    { right: 16px !important; bottom: 80px !important; }
  .totop { right: 16px !important; bottom: 138px !important; }
  .chat__panel {
    position: fixed; right: 10px; left: 10px; bottom: 80px;
    width: auto; max-height: min(72vh, 500px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat__panel, .chat__msg, .chat__chips button { animation: none; }
  .chat__ping::after { animation: none; }
  .chat__launch:hover { transform: none; }
}