/* Tasha — widget de chat flutuante (recepcionista virtual do Espaço Daiki).
   Partilhado entre todas as páginas — ver assets/tasha-widget.js para a
   lógica. Nunca editar isto separadamente por página; edita aqui e o
   efeito propaga-se a todas as páginas que incluem este ficheiro. */
/* ══ POPUP LUNA ══ */
#tasha-btn {
  position:fixed; bottom:28px; right:28px; z-index:500;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:none;
  animation: tashaFloat 3s ease-in-out infinite;
}
@keyframes tashaFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

#tasha-bubble {
  background:#CC0000; color:#fff;
  font-family:'Jost',sans-serif; font-size:.72rem; font-weight:400;
  padding:8px 14px; border-radius:16px 16px 4px 16px;
  white-space:nowrap; box-shadow:0 4px 20px rgba(204,0,0,.35);
  animation: bubblePop .4s ease;
  max-width:200px; text-align:center; line-height:1.4;
}
@keyframes bubblePop { from{opacity:0;transform:scale(.8) translateY(8px)} to{opacity:1;transform:scale(1) translateY(0)} }

#tasha-doll {
  width:84px; height:84px; background:#fff;
  border-radius:50%; border:3px solid #CC0000;
  box-shadow:0 6px 28px rgba(204,0,0,.3);
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s;
  overflow:hidden;
}
#tasha-btn:hover #tasha-doll { transform:scale(1.08); }

/* Tasha avatar */
.tasha-avatar { width:100%; height:100%; object-fit:cover; object-position:center top; transform:scale(1.15); transform-origin:center top; display:block; }

/* ══ POPUP WINDOW ══ */
#tasha-popup {
  position:fixed; bottom:116px; right:28px; z-index:499;
  width:360px; background:#fff;
  border:1px solid #E2E2E2; border-top:3px solid #CC0000;
  box-shadow:0 12px 60px rgba(0,0,0,.14);
  display:none; flex-direction:column;
  border-radius:2px;
  transform-origin:bottom right;
  animation:popupIn .3s cubic-bezier(.22,.68,0,1.2);
}
#tasha-popup.open { display:flex; }
@keyframes popupIn { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }

#tasha-popup .pop-hdr {
  padding:14px 18px; background:#CC0000;
  display:flex; align-items:center; gap:12px;
}
#tasha-popup .pop-hdr .pop-doll {
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.4); overflow:hidden;
}
.pop-doll-avatar { width:100%; height:100%; object-fit:cover; object-position:center top; transform:scale(1.15); transform-origin:center top; display:block; }
#tasha-popup .pop-ttl { font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:#fff; font-weight:400; }
#tasha-popup .pop-st  { font-size:.6rem; color:rgba(255,255,255,.7); margin-top:2px; }
#tasha-popup .pop-close {
  margin-left:auto; background:transparent; border:none;
  color:rgba(255,255,255,.7); font-size:1.1rem; line-height:1;
  padding:4px; transition:color .2s;
}
#tasha-popup .pop-close:hover { color:#fff; }

/* Mobile/tablet — o botão flutuante ocupa menos espaço (fica em cima de
   botões que terminem no canto inferior direito) e o popup nunca pode
   ter width fixa de 360px: em ecrãs até ~390px de largura isso
   ultrapassava a margem esquerda do ecrã (chegava a left:-13px, parte
   do chat ficava sempre cortada e inacessível). */
@media(max-width:640px){
  #tasha-btn{bottom:18px;right:16px}
  #tasha-doll{width:60px;height:60px;border-width:2px}
  #tasha-bubble{max-width:150px;font-size:.68rem;padding:7px 12px}
  #tasha-popup{right:12px;left:12px;width:auto;bottom:90px}
  #pop-msgs{height:44vh;max-height:320px}
}

#pop-msgs {
  padding:16px; display:flex; flex-direction:column; gap:10px;
  height:260px; overflow-y:auto; background:#F8F6F3;
}
#pop-msgs::-webkit-scrollbar { width:4px; }
#pop-msgs::-webkit-scrollbar-thumb { background:rgba(204,0,0,.2); border-radius:2px; }

.pop-msg { display:flex; gap:8px; align-items:flex-end; }
.pop-av {
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:#fff; border:1px solid rgba(204,0,0,.25);
  display:flex; align-items:center; justify-content:center;
}
.pop-bub {
  background:#fff; border:1px solid #E2E2E2;
  border-radius:0 10px 10px 10px;
  padding:9px 13px; font-size:.8rem; line-height:1.65;
  color:#111; max-width:calc(100% - 40px);
  white-space:pre-line;
}
.pop-bub strong { color:#CC0000; }
.pop-msg.usr { flex-direction:row-reverse; }
.pop-msg.usr .pop-bub { border-radius:10px 0 10px 10px; background:#CC0000; color:#fff; border-color:#CC0000; }
.pop-bub a.tasha-link { display:inline-block; margin-top:8px; background:#CC0000; color:#fff!important; text-decoration:none; font-size:.68rem; font-weight:500; letter-spacing:.02em; padding:7px 13px; border-radius:6px; transition:background .2s; }
.pop-bub a.tasha-link:hover { background:#A00000; }
.pop-msg.usr .pop-bub a.tasha-link { background:#fff; color:#CC0000!important; }

/* typing indicator */
.typing-bub { display:flex; gap:4px; align-items:center; padding:10px 13px; }
.typing-bub span {
  width:6px; height:6px; background:#CC0000; border-radius:50%; opacity:.4;
  animation:typDot 1.2s ease-in-out infinite;
}
.typing-bub span:nth-child(2) { animation-delay:.2s; }
.typing-bub span:nth-child(3) { animation-delay:.4s; }
@keyframes typDot { 0%,60%,100%{opacity:.2;transform:translateY(0)} 30%{opacity:1;transform:translateY(-4px)} }

.pop-chips {
  padding:8px 14px 10px; display:flex; flex-wrap:wrap; gap:6px;
  background:#F8F6F3; border-top:1px solid #E2E2E2;
}
.pop-chip {
  font-size:.65rem; color:#CC0000; border:1px solid rgba(204,0,0,.25);
  padding:5px 12px; border-radius:20px; background:#fff;
  font-family:'Jost',sans-serif; font-weight:400; transition:all .2s;
}
.pop-chip:hover { background:#CC0000; color:#fff; border-color:#CC0000; }

.pop-inp {
  padding:12px 14px; display:flex; gap:10px; align-items:center;
  border-top:1px solid #E2E2E2; background:#fff;
}
.pop-inp input {
  flex:1; background:transparent; border:none; outline:none;
  font-family:'Jost',sans-serif; font-size:.82rem; color:#111;
}
.pop-inp input::placeholder { color:#aaa; }
.pop-send {
  width:32px; height:32px; background:#CC0000; border:none;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:background .2s; flex-shrink:0;
}
.pop-send:hover { background:#E60000; }
.pop-send svg { width:11px; fill:#fff; }