/* =========================================================
   Lissy · asistente de liss
   Estados (atributos en .lissy):
     data-bot   = idle | hover | thinking
     data-panel = closed | opening | open | closing
   Usa los colores de la página (--violeta, --tinta…) con respaldo.
   ========================================================= */
.lissy{
  --lv:var(--violeta,#7C5CFF); --lp:var(--profundo,#6A48F0); --ll:var(--lavanda,#B3A1FF);
  --lt:var(--tinta,#111316); --ln:var(--niebla,#F4F3F8); --lg:var(--gris,#4E4B5E);
  --lw:#fff; --lline:var(--linea,#E4E2EC);
  --lease:cubic-bezier(.2,.7,.2,1);
  --lift:0px;                 /* sube si hay otro botón fijo abajo (celular) */
  --edge:20px;
  position:fixed; right:var(--edge); bottom:calc(var(--edge) + var(--lift) + env(safe-area-inset-bottom));
  z-index:45; font-family:var(--texto,'Manrope',system-ui,sans-serif); color:var(--lt);
  transition:bottom .45s var(--lease);
}
.lissy *,.lissy *::before,.lissy *::after{box-sizing:border-box}
.lissy-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Botón flotante ---------- */
.lissy-fab{
  position:relative; display:block; width:76px; height:84px; padding:0; border:0; background:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent; border-radius:24px;
  transition:opacity .25s ease, transform .35s var(--lease);
}
.lissy-fab:focus-visible{outline:3px solid var(--lp);outline-offset:4px}
.lissy-glow{
  position:absolute; left:50%; top:46%; width:92px; height:92px; margin:-46px 0 0 -46px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,92,255,.45) 0%, rgba(124,92,255,0) 68%);
  opacity:.7; animation:lissy-breathe 6s ease-in-out infinite; transition:opacity .3s ease, transform .3s var(--lease);
}
.lissy-bot{
  position:absolute; left:6px; top:2px; width:64px; height:64px;
  animation:lissy-float 4.8s ease-in-out infinite; will-change:transform;
}
.lissy-bot img{
  width:100%; height:100%; display:block; object-fit:contain;
  transition:transform .4s var(--lease); transform-origin:50% 80%;
  filter:drop-shadow(0 6px 10px rgba(106,72,240,.28));
}
.lissy-shadow{
  position:absolute; left:50%; bottom:4px; width:40px; height:8px; margin-left:-20px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(17,19,22,.28), rgba(17,19,22,0));
  animation:lissy-shadow 4.8s ease-in-out infinite;
}
.lissy-dot{
  position:absolute; right:7px; top:10px; width:13px; height:13px; border-radius:50%;
  background:#22C55E; box-shadow:0 0 0 3px var(--lw);
}
@keyframes lissy-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes lissy-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.78);opacity:.6}}
@keyframes lissy-breathe{0%,100%{opacity:.55}50%{opacity:.85}}

/* hover: se inclina hacia ti y brilla un poco más */
.lissy[data-bot="hover"] .lissy-bot img{transform:rotate(-7deg) scale(1.07)}
.lissy[data-bot="hover"] .lissy-glow{opacity:1;transform:scale(1.12)}

/* ---------- Tooltip ---------- */
.lissy-tip{
  position:absolute; right:84px; bottom:30px; display:flex; align-items:center; gap:4px;
  background:var(--lt); color:var(--lw); border-radius:14px; padding:10px 6px 10px 14px;
  font-size:14px; font-weight:700; white-space:nowrap; box-shadow:0 14px 30px -14px rgba(17,19,22,.7);
  opacity:0; transform:translateX(8px) scale(.96); transform-origin:right center; pointer-events:none;
  transition:opacity .35s ease, transform .4s var(--lease);
}
.lissy-tip::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;margin-top:-5px;background:var(--lt);transform:rotate(45deg);border-radius:2px}
.lissy-tip.show{opacity:1;transform:none;pointer-events:auto}
.lissy-tip-open{all:unset;cursor:pointer}
.lissy-tip-open:focus-visible,.lissy-tip-x:focus-visible{outline:2px solid var(--ll);outline-offset:2px;border-radius:6px}
.lissy-tip-x{all:unset;cursor:pointer;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;color:#A9A6B8;font-size:18px;line-height:1}
.lissy-tip-x:hover{color:var(--lw);background:rgba(255,255,255,.08)}

/* ---------- Panel ---------- */
.lissy-panel{
  position:absolute; right:0; bottom:0; width:380px; height:min(600px, calc(100vh - 120px)); height:min(600px, calc(100dvh - 120px));
  display:flex; flex-direction:column; background:var(--ln); border-radius:22px; overflow:hidden;
  box-shadow:0 30px 70px -24px rgba(17,19,22,.55), 0 0 0 1px rgba(17,19,22,.06);
  transform-origin:calc(100% - 38px) calc(100% - 40px);
  opacity:0; transform:translateY(12px) scale(.9); visibility:hidden;
  transition:opacity .28s ease, transform .38s var(--lease), visibility 0s linear .38s;
}
.lissy[data-panel="opening"] .lissy-panel,
.lissy[data-panel="open"] .lissy-panel{opacity:1;transform:none;visibility:visible;transition:opacity .28s ease, transform .38s var(--lease), visibility 0s}
/* el botón cede su lugar al panel */
.lissy[data-panel="opening"] .lissy-fab,
.lissy[data-panel="open"] .lissy-fab{opacity:0;transform:scale(.6);pointer-events:none}
.lissy[data-panel="open"] .lissy-fab{visibility:hidden}
.lissy[data-panel="open"] .lissy-tip,.lissy[data-panel="opening"] .lissy-tip{display:none}

.lissy-head{display:flex;align-items:center;gap:12px;padding:14px 12px 14px 16px;background:var(--lt);color:var(--lw)}
.lissy-ava{position:relative;flex:none;width:44px;height:44px;border-radius:14px;background:var(--noche,#1E1B2E);display:grid;place-items:center}
.lissy-ava img{width:38px;height:38px}
.lissy-ava::after{content:"";position:absolute;inset:-3px;border-radius:17px;border:2px solid var(--lv);opacity:0}
.lissy[data-bot="thinking"] .lissy-ava::after{animation:lissy-ring 1.4s ease-out infinite}
@keyframes lissy-ring{0%{opacity:.9;transform:scale(.92)}100%{opacity:0;transform:scale(1.18)}}
.lissy-who{flex:1;min-width:0}
.lissy-who h2{margin:0;font-family:var(--display,'Archivo Black',sans-serif);font-weight:400;font-size:19px;line-height:1.1;letter-spacing:-.01em}
.lissy-status{margin:2px 0 0;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#C9C6D6}
.lissy-status::before{content:"";width:8px;height:8px;border-radius:50%;background:#22C55E}
.lissy[data-bot="thinking"] .lissy-status::before{background:var(--ll);animation:lissy-breathe 1s ease-in-out infinite}
.lissy-min{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:var(--lw);cursor:pointer;transition:background .2s ease}
.lissy-min:hover{background:rgba(255,255,255,.1)}
.lissy-min:focus-visible{outline:2px solid var(--ll);outline-offset:2px}
.lissy-min svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}

.lissy-log{flex:1;overflow-y:auto;padding:18px 14px 8px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain;scroll-behavior:smooth}
.lissy-msg{max-width:86%;padding:11px 14px;border-radius:16px;font-size:15px;line-height:1.45;white-space:pre-line;word-wrap:break-word;animation:lissy-in .35s var(--lease)}
.lissy-msg.bot{align-self:flex-start;background:var(--lw);color:var(--lt);border-bottom-left-radius:6px;box-shadow:0 1px 0 rgba(17,19,22,.04)}
.lissy-msg.user{align-self:flex-end;background:var(--lp);color:var(--lw);border-bottom-right-radius:6px;font-weight:600}
.lissy-msg.note{background:transparent;color:var(--lg);font-size:13px;padding:2px 4px;box-shadow:none}
@keyframes lissy-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lissy-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.lissy-act{font:inherit;font-size:14px;font-weight:800;border:0;border-radius:999px;padding:8px 14px;background:var(--lt);color:var(--lw);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;transition:background .2s ease}
.lissy-act:hover{background:var(--lp)}
.lissy-act:focus-visible{outline:2px solid var(--lp);outline-offset:2px}

.lissy-typing{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;background:var(--lw);border-radius:16px;border-bottom-left-radius:6px}
.lissy-typing i{width:7px;height:7px;border-radius:50%;background:var(--lv);animation:lissy-dots 1.1s ease-in-out infinite}
.lissy-typing i:nth-child(2){animation-delay:.15s}.lissy-typing i:nth-child(3){animation-delay:.3s}
@keyframes lissy-dots{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}

.lissy-chips{display:flex;flex-wrap:wrap;gap:8px;padding:8px 14px 10px}
.lissy-chips::-webkit-scrollbar{display:none}
.lissy-chip{flex:none;font:inherit;font-size:14px;font-weight:700;color:var(--lp);background:var(--lw);border:1.5px solid #DCD5FF;border-radius:999px;padding:8px 14px;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}
.lissy-chip:hover{border-color:var(--lv);background:#F1EEFF}
.lissy-chip:focus-visible{outline:2px solid var(--lp);outline-offset:2px}

.lissy-form{display:flex;align-items:flex-end;gap:8px;padding:10px 12px 6px;background:var(--lw);border-top:1px solid var(--lline)}
.lissy-input{flex:1;min-height:44px;max-height:120px;resize:none;font:inherit;font-size:16px;line-height:1.4;color:var(--lt);border:1.5px solid var(--lline);border-radius:14px;padding:10px 12px;background:var(--ln);outline:none;transition:border-color .2s ease,background .2s ease}
.lissy-input:focus{border-color:var(--lv);background:var(--lw)}
.lissy-input::placeholder{color:#8C88A0}
.lissy-send{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:14px;background:var(--lp);color:var(--lw);cursor:pointer;transition:background .2s ease,transform .2s var(--lease),opacity .2s ease}
.lissy-send:hover{background:var(--lv)}
.lissy-send:active{transform:scale(.94)}
.lissy-send:disabled{opacity:.4;cursor:default}
.lissy-send:focus-visible{outline:2px solid var(--lp);outline-offset:2px}
.lissy-send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lissy-fine{margin:0;padding:2px 14px 10px;background:var(--lw);font-size:11.5px;color:#6E6A80;text-align:center}

/* ---------- Celular ---------- */
@media (max-width:560px){
  .lissy{--edge:14px}
  .lissy-fab{width:68px;height:76px}
  .lissy-bot{left:5px;width:58px;height:58px}
  .lissy-panel{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;height:min(620px,78vh);height:min(620px,78dvh);transform-origin:calc(100% - 40px) 100%}
  .lissy-tip{right:74px;bottom:26px}
}
/* mientras el chat está abierto en celular, el botón fijo de la página se esconde */
html.lissy-open .dock{transform:translateY(140%)!important}

/* pestaña oculta: no se anima nada */
.lissy.is-paused *{animation-play-state:paused!important}

/* menos movimiento */
@media (prefers-reduced-motion:reduce){
  .lissy *,.lissy *::before,.lissy *::after{animation:none!important}
  .lissy-panel,.lissy-fab,.lissy-tip,.lissy-bot img{transition:opacity .15s linear,visibility 0s!important;transform:none!important}
  .lissy-log{scroll-behavior:auto}
}