/* ═══════════════════════════════════════════════════════════
   Llama Llama Hostel — Widget de asistente "Llamita"
   Reutiliza los tokens del sitio (--clay, --bone, --ink, fuentes…).
   Todo bajo el prefijo .llb para no colisionar con la web.
   ═══════════════════════════════════════════════════════════ */
.llb, .llb *{ box-sizing:border-box; }
.llb{
  --llb-shadow:0 24px 60px -22px rgba(27,42,68,.55);
  --llb-radius:16px;
}

/* ── Lanzador ──────────────────────────────────────────────── */
.llb__launcher{
  position:fixed; right:22px; bottom:22px; z-index:700;
  display:inline-flex; align-items:center; gap:10px;
  padding:0 20px 0 16px; height:58px; border:0; border-radius:100px;
  background:var(--clay); color:#fff; cursor:pointer;
  font-family:var(--body); font-weight:700; font-size:.97rem;
  box-shadow:0 16px 34px -14px rgba(199,64,36,.7);
  transition:transform .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.llb__launcher:hover{ transform:translateY(-2px); background:var(--clay-d); }
.llb__launcher:active{ transform:translateY(0); }
.llb__launcher svg{ width:26px; height:30px; fill:#fff; flex:none; }
.llb__launcher .llb__pulse{
  position:absolute; inset:0; border-radius:100px; z-index:-1;
  box-shadow:0 0 0 0 rgba(199,64,36,.55);
  animation:llb-pulse 2.6s var(--ease) infinite;
}
@keyframes llb-pulse{ 0%{ box-shadow:0 0 0 0 rgba(199,64,36,.5);} 70%{ box-shadow:0 0 0 16px rgba(199,64,36,0);} 100%{ box-shadow:0 0 0 0 rgba(199,64,36,0);} }
.llb__launcher[aria-expanded="true"]{ opacity:0; pointer-events:none; transform:scale(.9); }

/* Globo de saludo (primera visita) */
.llb__nudge{
  position:fixed; right:22px; bottom:90px; z-index:699;
  max-width:230px; padding:12px 16px; border-radius:14px 14px 4px 14px;
  background:#fff; color:var(--ink); font-family:var(--body); font-size:.9rem; line-height:1.4;
  box-shadow:var(--llb-shadow); border:1px solid var(--hair);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.llb__nudge.is-show{ opacity:1; transform:none; }
.llb__nudge b{ color:var(--clay); }

/* ── Panel ─────────────────────────────────────────────────── */
.llb__panel{
  position:fixed; right:22px; bottom:22px; z-index:701;
  width:min(390px, calc(100vw - 32px));
  height:min(620px, calc(100vh - 44px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bone); border-radius:var(--llb-radius);
  box-shadow:var(--llb-shadow); border:1px solid var(--hair);
  opacity:0; transform:translateY(16px) scale(.98); transform-origin:bottom right;
  pointer-events:none;
  transition:opacity .32s var(--ease), transform .32s var(--ease);
}
.llb__panel.is-open{ opacity:1; transform:none; pointer-events:auto; }

/* Cabecera */
.llb__head{
  display:flex; align-items:center; gap:12px;
  padding:15px 16px; background:var(--clay); color:#fff; flex:none;
}
.llb__head-badge{
  width:40px; height:40px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:rgba(255,255,255,.16);
}
.llb__head-badge svg{ width:20px; height:23px; fill:#fff; }
.llb__head-txt{ min-width:0; line-height:1.2; }
.llb__head-txt b{
  display:block; font-family:var(--disp); font-weight:600; font-size:1.08rem;
  font-variation-settings:"SOFT" 20,"WONK" 1,"opsz" 30; letter-spacing:-.02em;
}
.llb__head-txt span{
  display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
.llb__dot{ width:7px; height:7px; border-radius:50%; background:#7CE0A3; box-shadow:0 0 0 0 rgba(124,224,163,.7); animation:llb-live 2s ease-in-out infinite; }
@keyframes llb-live{ 0%,100%{ box-shadow:0 0 0 0 rgba(124,224,163,.6);} 50%{ box-shadow:0 0 0 5px rgba(124,224,163,0);} }
.llb__close{
  margin-left:auto; width:34px; height:34px; flex:none; border:0; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; cursor:pointer; font-size:1.2rem; line-height:1;
  transition:background-color .25s var(--ease);
}
.llb__close:hover{ background:rgba(255,255,255,.28); }

/* Mensajes */
.llb__log{
  flex:1; overflow-y:auto; padding:18px 16px 8px;
  display:flex; flex-direction:column; gap:12px;
  scrollbar-width:thin; scrollbar-color:var(--hair) transparent;
}
.llb__log::-webkit-scrollbar{ width:7px; }
.llb__log::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--ink) 18%, transparent); border-radius:7px; }
.llb__msg{
  max-width:85%; padding:11px 14px; border-radius:14px;
  font-family:var(--body); font-size:.94rem; line-height:1.5; white-space:pre-wrap; word-wrap:break-word;
  animation:llb-in .34s var(--ease);
}
@keyframes llb-in{ from{ opacity:0; transform:translateY(8px);} }
.llb__msg--bot{ align-self:flex-start; background:#fff; color:var(--ink); border:1px solid var(--hair); border-bottom-left-radius:5px; }
.llb__msg--user{ align-self:flex-end; background:var(--clay); color:#fff; border-bottom-right-radius:5px; }
.llb__msg a{ color:inherit; font-weight:700; text-underline-offset:3px; }
.llb__msg--bot a{ color:var(--clay-d); }
.llb__msg strong{ font-weight:700; }

/* Indicador de escritura */
.llb__typing{ align-self:flex-start; display:inline-flex; gap:5px; padding:14px 16px; background:#fff; border:1px solid var(--hair); border-radius:14px; border-bottom-left-radius:5px; }
.llb__typing i{ width:7px; height:7px; border-radius:50%; background:var(--slate); animation:llb-bounce 1.3s ease-in-out infinite; }
.llb__typing i:nth-child(2){ animation-delay:.18s; }
.llb__typing i:nth-child(3){ animation-delay:.36s; }
@keyframes llb-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-5px); opacity:1; } }

/* Sugerencias rápidas */
.llb__chips{ display:flex; flex-wrap:wrap; gap:8px; padding:4px 16px 12px; }
.llb__chip{
  border:1px solid var(--hair); background:#fff; color:var(--ink-3); cursor:pointer;
  padding:8px 13px; border-radius:100px; font-family:var(--body); font-weight:600; font-size:.83rem;
  transition:background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.llb__chip:hover{ background:var(--clay); color:#fff; border-color:var(--clay); }

/* Barra de entrada */
.llb__form{
  flex:none; display:flex; align-items:flex-end; gap:9px;
  padding:12px 12px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--hair); background:var(--bone);
}
.llb__input{
  flex:1; resize:none; max-height:120px; min-height:44px;
  padding:11px 14px; border:1.5px solid var(--hair); border-radius:12px; background:#fff;
  font-family:var(--body); font-size:.94rem; line-height:1.4; color:var(--ink);
  transition:border-color .22s var(--ease);
}
.llb__input:focus{ outline:none; border-color:var(--clay); }
.llb__send{
  width:44px; height:44px; flex:none; border:0; border-radius:12px; cursor:pointer;
  background:var(--clay); color:#fff; display:grid; place-items:center;
  transition:background-color .25s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.llb__send:hover{ background:var(--clay-d); }
.llb__send:active{ transform:scale(.94); }
.llb__send:disabled{ opacity:.45; cursor:default; }
.llb__send svg{ width:19px; height:19px; fill:#fff; }

.llb__foot{
  margin:0; padding:0 16px 10px; text-align:center;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.04em;
  color:color-mix(in srgb, var(--ink) 42%, transparent);
}

/* Móvil: dejar libre la barra inferior del sitio (.mbar) */
@media (max-width:760px){
  .llb__launcher{ bottom:calc(64px + env(safe-area-inset-bottom)); right:14px; height:52px; }
  .llb__nudge{ bottom:calc(124px + env(safe-area-inset-bottom)); right:14px; }
  .llb__panel{
    right:0; left:0; bottom:0; margin:0 auto;
    width:100%; height:88vh; height:88dvh;
    border-radius:var(--llb-radius) var(--llb-radius) 0 0;
  }
}

@media (prefers-reduced-motion:reduce){
  .llb__launcher, .llb__panel, .llb__nudge, .llb__msg, .llb__send{ transition:none; animation:none; }
  .llb__pulse, .llb__dot, .llb__typing i{ animation:none; }
}