/* ============================================================
   KALLY — widget de produção (Assistente Virtual da Trilobit)
   Foto viva (vídeo) + chat. Canto inferior ESQUERDO (o WhatsApp
   fica no direito). Sem áudio. Cores/fontes do site Trilobit.
   ============================================================ */
#kally-widget{
  --kw-navy:#0b2240; --kw-navy2:#16365f; --kw-accent:#1e72e8; --kw-accent2:#4f95f0;
  --kw-ease:cubic-bezier(0.22,1,0.36,1);
  position:fixed; left:24px; bottom:22px; z-index:1200;
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  font-family:"IBM Plex Sans",-apple-system,Segoe UI,Roboto,sans-serif;
}
#kally-widget *{ box-sizing:border-box; }

/* ---------- launcher (a Kally viva) ---------- */
.kw-launcher{ cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:7px;
  animation:kw-entra .55s var(--kw-ease) .2s both; }
@keyframes kw-entra{ from{opacity:0; transform:translateY(24px) scale(.6)} to{opacity:1; transform:none} }
.kw-float{ animation:kw-flutua 3.6s ease-in-out infinite; }
@keyframes kw-flutua{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.kw-ava{ position:relative; width:84px; height:84px; border-radius:50%; overflow:hidden;
  border:3px solid #fff; background:var(--kw-navy);
  box-shadow:0 10px 26px rgba(11,34,64,.4); transition:transform .2s var(--kw-ease); }
.kw-launcher:hover .kw-ava{ transform:scale(1.05); }
.kw-ava::after{ content:""; position:absolute; inset:-4px; border-radius:50%; opacity:0; pointer-events:none;
  box-shadow:0 0 0 4px rgba(30,114,232,.5); }
.kw-ava.kw-speaking::after{ opacity:1; animation:kw-ring 1s infinite; }
@keyframes kw-ring{ 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.16);opacity:0} }
.kw-ava video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .28s ease; }
.kw-ava video.on{ opacity:1; }

/* ---------- balão de dica ---------- */
.kw-bubble{ background:#fff; color:#1a2740; padding:8px 13px; border-radius:16px; font-size:13px; font-weight:600;
  box-shadow:0 10px 26px rgba(4,16,33,.18); max-width:210px; text-align:center; line-height:1.35;
  opacity:0; transform:translateY(6px); transition:opacity .3s var(--kw-ease), transform .3s var(--kw-ease); }
.kw-bubble.on{ opacity:1; transform:none; }
.kw-bubble::after{ content:""; position:absolute; bottom:-7px; left:38px; border:7px solid transparent; border-top-color:#fff; border-bottom:0; }
.kw-launcher{ position:relative; }
.kw-bubble{ position:relative; }

/* ---------- chat ---------- */
.kw-chat{ width:322px; max-width:calc(100vw - 40px); height:432px; max-height:calc(100vh - 200px);
  background:#fff; border-radius:20px; overflow:hidden; display:none; flex-direction:column;
  box-shadow:0 24px 60px rgba(4,16,33,.34); border:1px solid rgba(30,114,232,.12); }
.kw-chat.open{ display:flex; animation:kw-sobe .26s var(--kw-ease); }
@keyframes kw-sobe{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
.kw-head{ background:linear-gradient(120deg,var(--kw-navy),var(--kw-navy2) 55%,var(--kw-accent)); color:#fff;
  padding:12px 14px; display:flex; align-items:center; gap:10px; }
.kw-head-av{ width:42px; height:42px; border-radius:50%; object-fit:cover; object-position:50% 20%;
  border:2px solid rgba(255,255,255,.85); flex:0 0 auto; background:var(--kw-navy2); }
.kw-name{ font-family:"Saira","IBM Plex Sans",sans-serif; font-style:italic; font-weight:700; font-size:15px; line-height:1.1; }
.kw-status{ font-size:11px; opacity:.9; height:13px; }
.kw-x{ margin-left:auto; background:rgba(255,255,255,.18); border:none; color:#fff; width:27px; height:27px;
  border-radius:50%; cursor:pointer; font-size:17px; line-height:1; }
.kw-msgs{ flex:1; padding:14px; overflow-y:auto; background:#f6f9fd; }
.kw-msg{ margin-bottom:13px; padding:10px 13px; border-radius:16px; max-width:82%; font-size:14px; line-height:1.45;
  position:relative; white-space:pre-wrap; word-wrap:break-word; animation:kw-fade .3s ease-in; }
@keyframes kw-fade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.kw-msg.bot{ background:linear-gradient(135deg,var(--kw-accent),#1657b8); color:#fff; margin-right:auto; margin-left:36px; border-bottom-left-radius:3px; }
.kw-msg.user{ background:linear-gradient(135deg,var(--kw-navy2),var(--kw-navy)); color:#fff; margin-left:auto; border-bottom-right-radius:3px; }
.kw-msg.bot::before{ content:""; position:absolute; left:-36px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%; border:2px solid rgba(255,255,255,.9);
  background:var(--kw-face,#1e72e8) center 20%/cover no-repeat; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.kw-msg.bot a{ color:#fff; text-decoration:underline; }
.kw-typing{ font-style:italic; color:#6c7d95; font-size:13px; padding:0 14px 8px; display:none; background:#f6f9fd; }
.kw-typing.on{ display:block; }
.kw-inp{ display:flex; gap:8px; padding:11px; background:#fff; border-top:1px solid rgba(30,114,232,.1); align-items:center; }
.kw-inp input{ flex:1; padding:10px 13px; border:1px solid rgba(30,114,232,.25); border-radius:20px; font-size:14px; font-family:inherit; color:#14233a; }
.kw-inp input:focus{ outline:none; border-color:var(--kw-accent); box-shadow:0 0 0 3px rgba(30,114,232,.12); }
.kw-send{ width:42px; height:42px; flex:0 0 auto; border:none; border-radius:50%; cursor:pointer; color:#fff; font-size:16px;
  background:linear-gradient(135deg,var(--kw-accent),var(--kw-navy2)); display:flex; align-items:center; justify-content:center; }
.kw-send:disabled{ opacity:.5; cursor:default; }

@media (max-width:520px){
  #kally-widget{ left:14px; bottom:14px; }
  .kw-ava{ width:68px; height:68px; }
  .kw-chat{ width:calc(100vw - 28px); height:calc(100vh - 150px); }
  .kw-bubble{ max-width:170px; }
}
@media (prefers-reduced-motion: reduce){
  .kw-launcher,.kw-float{ animation:none; }
  .kw-bubble,.kw-chat.open,.kw-msg{ animation:none; transition:none; }
  .kw-ava.kw-speaking::after{ animation:none; opacity:1; }
}