.wk-chat { position: fixed; right: 18px; bottom: 18px; z-index: 9999; font-family: Arial, sans-serif; }

.wk-chat__fab{
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: visible;

  display: flex;
  align-items: center;
  justify-content: center;

  background: radial-gradient(circle at 30% 30%, #10345f, #081427 72%);
  box-shadow:
    0 14px 34px rgba(0,0,0,.42),
    0 0 24px rgba(0,181,255,.32);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease;
}

.wk-chat__fab::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,181,255,.30);
  animation: wkPulse 2s infinite;
  z-index: -1;
}

@keyframes wkPulse{
  0%{
    transform: scale(1);
    opacity: .65;
  }
  70%{
    transform: scale(1.65);
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}

.wk-chat__fab:hover{
  transform: scale(1.08);
  box-shadow:
    0 18px 42px rgba(0,0,0,.5),
    0 0 34px rgba(0,229,255,.5);
  filter: brightness(1.06);
}

.wk-chat__fab:active{
  transform: scale(.96);
}

.wk-chat__fab-icon{
  display: flex;
  align-items: center;
  justify-content: center;
}

.wk-chat__fab-icon svg{
  width: 36px;
  height: 36px;
  display: block;
}
.wk-chat__fab.is-hidden{ display:none; }

.wk-chat__panel{
  width: 340px; max-width: calc(100vw - 28px);
  height: 470px; max-height: calc(100vh - 28px);
  background: #0b1220;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.30);
  overflow: hidden;
  display: none;
}
.wk-chat__panel.is-open{ display: flex; flex-direction: column; }

.wk-chat__header{
  padding: 12px 12px;
  background: linear-gradient(135deg, rgba(30,167,255,.25), rgba(255,255,255,.06));
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.wk-chat__title{ display:flex; align-items:center; gap:10px; color:#fff; }
.wk-chat__badge{
  font-size: 12px; padding: 4px 8px; border-radius: 999px;
  background: rgba(30,167,255,.25);
  border: 1px solid rgba(30,167,255,.35);
}
.wk-chat__name{ font-weight: 700; font-size: 14px; line-height: 1.1; }
.wk-chat__sub{ font-size: 12px; opacity: .78; margin-top: 2px; }

.wk-chat__close{
  border:none; background: transparent; color: rgba(255,255,255,.85);
  cursor:pointer; font-size: 18px; width: 34px; height: 34px; border-radius: 10px;
}
.wk-chat__close:hover{ background: rgba(255,255,255,.08); }

.wk-chat__body{
  padding: 12px;
  background: #0b1220;
  flex: 1;
  overflow: hidden;
}
.wk-chat__msgs{
  height: 100%;
  overflow: auto;
  padding-right: 6px;
}
.wk-msg{ margin: 10px 0; display:flex; flex-direction: column; gap: 6px; }
.wk-msg__bubble{
  max-width: 85%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.35;
  white-space: pre-line;
}
.wk-msg--bot .wk-msg__bubble{
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
}
.wk-msg--me{ align-items: flex-end; }
.wk-msg--me .wk-msg__bubble{
  background: rgba(30,167,255,.20);
  color: #fff;
  border: 1px solid rgba(30,167,255,.30);
}
.wk-msg--typing .wk-msg__bubble{ opacity: .85; }

.wk-msg__extra{ margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; }
.wk-chat__wa{
  display:inline-block; margin-top: 0;
  background: rgba(34,197,94,.16);
  border: 1px solid rgba(34,197,94,.28);
  color: #d7ffe4;
  padding: 9px 12px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 13px;
}
.wk-chat__wa:hover{ filter: brightness(1.08); }

.wk-chat__footer{
  padding: 10px;
  display:flex; gap: 8px;
  background: rgba(255,255,255,.03);
  border-top: 1px solid rgba(255,255,255,.08);
}
.wk-chat__input{
  flex:1; border:none; outline:none;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 13px;
}
.wk-chat__input::placeholder{ color: rgba(255,255,255,.55); }
.wk-chat__send{
  border:none; cursor:pointer;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(30,167,255,.25);
  border: 1px solid rgba(30,167,255,.35);
  color: #fff;
  font-weight: 700;
}
.wk-chat__send:hover{ filter: brightness(1.1); }

@media (max-width: 420px){
  .wk-chat{ right: 10px; bottom: 10px; }
  .wk-chat__panel{ width: calc(100vw - 20px); height: 72vh; }
}
/* ==============================
   Tooltip Celeste PRO (rectangular + glow)
============================== */

.wk-chat__tooltip{
  position: absolute;
  right: 88px;
  bottom: 8px;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 16px;
  border-radius: 12px;                 /* ✅ más rectangular */
  min-width: 235px;
  max-width: 280px;

  /* ✅ fondo celeste translúcido */
  background: linear-gradient(
    135deg,
    rgba(34, 211, 238, .18),
    rgba(56, 189, 248, .10)
  );

  border: 1px solid rgba(34, 211, 238, .22);

  box-shadow:
    0 22px 55px rgba(0,0,0,.50),
    0 0 24px rgba(34, 211, 238, .22);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  color: rgba(255,255,255,.96);
  font-size: 13px;
  line-height: 1.25;

  opacity: 0;
  transform: translateX(16px) scale(.97);
  pointer-events: none;

  transition:
    opacity .35s cubic-bezier(.22,.61,.36,1),
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .4s ease;
}

.wk-chat__tooltip.show{
  opacity: 1;
  transform: translateX(0) scale(1);
  box-shadow:
    0 26px 65px rgba(0,0,0,.60),
    0 0 34px rgba(34, 211, 238, .30);
}

/* ✅ lucecita (más apartadita y elegante) */
.wk-chat__tooltip-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(34, 211, 238, 1);
  box-shadow:
    0 0 0 6px rgba(34, 211, 238, .12),
    0 0 20px rgba(34, 211, 238, .55);
  flex-shrink: 0;

  animation: wkDotPulse 1.8s ease-in-out infinite;
}

@keyframes wkDotPulse{
  0%,100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.25); opacity: 1; }
}

.wk-chat__tooltip-text strong{
  display:block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
}

.wk-chat__tooltip-text span{
  display:block;
  margin-top: 2px;
  font-size: 12px;
  opacity: .78;
}

/* flechita celeste suave */
.wk-chat__tooltip::after{
  content:"";
  position:absolute;
  right:-6px;
  bottom: 18px;
  width: 12px;
  height: 12px;
  background: rgba(34, 211, 238, .16);
  border-right: 1px solid rgba(34, 211, 238, .22);
  border-bottom: 1px solid rgba(34, 211, 238, .22);
  transform: rotate(45deg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ✅ El tooltip nunca debe bloquear clicks */
.wk-chat__tooltip{
  pointer-events: none !important;
}

/* ✅ Si el chat está abierto, ocultar tooltip sí o sí */
.wk-chat__panel.is-open ~ .wk-chat__tooltip{
  display: none !important;
}

/* =========================================================
   WEIKANG SHOP - WAI UI PRO
   Botones rápidos como el diseño aprobado:
   Renovar de esquina a esquina + 2 columnas debajo.
========================================================= */
.wk-chat{
  --wk-bg: #071120;
  --wk-panel: #0b1424;
  --wk-border: rgba(255,255,255,.12);
  --wk-glow-blue: rgba(30,167,255,.24);
  --wk-glow-green: rgba(0,255,142,.18);
}

.wk-chat__panel{
  width: 390px;
  height: 540px;
  background:
    radial-gradient(circle at 100% 40%, rgba(0,255,160,.10), transparent 30%),
    linear-gradient(180deg, #0c1728 0%, #071120 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 24px 70px rgba(0,0,0,.55),
    0 0 36px rgba(30,167,255,.12);
}

.wk-chat__header{
  padding: 14px 16px;
  min-height: 54px;
  background:
    radial-gradient(circle at 0% 0%, rgba(30,167,255,.30), transparent 46%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

.wk-chat__badge{
  font-size: 12px;
  font-weight: 800;
  padding: 5px 10px;
  color: #e8f8ff;
  background: rgba(30,167,255,.18);
  border: 1px solid rgba(30,167,255,.55);
  box-shadow: 0 0 18px rgba(30,167,255,.16) inset;
}

.wk-chat__name{
  font-size: 15px;
  letter-spacing: .2px;
}

.wk-chat__sub{
  font-size: 12px;
}

.wk-chat__body{
  padding: 16px;
  background: transparent;
}

.wk-msg__bubble{
  max-width: 92%;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.42;
}

.wk-msg--bot .wk-msg__bubble{
  background: linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.055));
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

.wk-msg__extra.wk-quick-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 12px;
}

.wk-chat__wa.wk-quick-btn{
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  color: #f2fff8;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .25px;
  text-align: center;
  text-transform: uppercase;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,255,160,.16), transparent 42%),
    linear-gradient(135deg, rgba(0,130,72,.34), rgba(0,62,56,.42));
  border: 1px solid rgba(0,210,112,.52);
  box-shadow:
    inset 0 0 20px rgba(0,255,160,.08),
    0 10px 24px rgba(0,0,0,.20);
  cursor: pointer;
}

.wk-chat__wa.wk-quick-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow:
    inset 0 0 24px rgba(0,255,160,.12),
    0 14px 30px rgba(0,0,0,.28),
    0 0 18px rgba(0,255,142,.13);
}

.wk-chat__wa.wk-quick-btn:active{
  transform: translateY(0) scale(.99);
}

.wk-quick--renew{
  grid-column: 1 / -1;
  min-height: 62px !important;
  font-size: 15px !important;
}

.wk-quick-icon{
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.wk-quick-label{
  white-space: nowrap;
}

.wk-quick--netflix .wk-quick-icon{
  color: #ff2333;
  background: rgba(255,0,0,.06);
  font-size: 30px;
  font-family: Arial Black, Impact, sans-serif;
}

.wk-quick--disney .wk-quick-icon{
  color: #ffffff;
  font-size: 12px;
  font-family: Georgia, serif;
  background: rgba(255,255,255,.06);
}

.wk-quick--chatgpt .wk-quick-icon{
  color: #dfffee;
  background: linear-gradient(135deg, rgba(16,185,129,.9), rgba(45,212,191,.75));
  font-size: 24px;
}

.wk-quick--prime .wk-quick-icon{
  color: #55c7ff;
  background: rgba(0,170,255,.06);
  font-size: 15px;
  font-weight: 900;
}

.wk-chat__footer{
  padding: 12px;
  gap: 10px;
  background: rgba(255,255,255,.035);
  border-top: 1px solid rgba(255,255,255,.10);
}

.wk-chat__input{
  min-height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 18px rgba(255,255,255,.025);
}

.wk-chat__send{
  min-width: 72px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(30,167,255,.36), rgba(13,74,122,.42));
  border: 1px solid rgba(30,167,255,.55);
}

@media (max-width: 420px){
  .wk-chat{ right: 8px; bottom: 8px; }
  .wk-chat__panel{
    width: calc(100vw - 16px);
    height: min(82vh, 560px);
    border-radius: 16px;
  }
  .wk-chat__body{ padding: 12px; }
  .wk-msg__extra.wk-quick-grid{ gap: 10px; }
  .wk-chat__wa.wk-quick-btn{
    min-height: 48px;
    gap: 7px;
    padding: 9px 8px;
    font-size: 11px;
    border-radius: 11px;
  }
  .wk-quick--renew{
    min-height: 52px !important;
    font-size: 12px !important;
  }
  .wk-quick-icon{
    min-width: 26px;
    height: 26px;
    font-size: 14px;
  }
  .wk-quick--netflix .wk-quick-icon{ font-size: 24px; }
  .wk-quick--disney .wk-quick-icon{ font-size: 9px; }
  .wk-quick--chatgpt .wk-quick-icon{ font-size: 19px; }
  .wk-quick--prime .wk-quick-icon{ font-size: 12px; }
  .wk-quick-label{ white-space: normal; }
}


/* =========================================================
   AJUSTE SOLICITADO - BOTONES RAPIDOS SIN LOGOS
   Solo cambia visual: renovar mas compacto y accesos en 2 columnas.
========================================================= */
.wk-msg__extra.wk-quick-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  justify-items: center !important;
}

.wk-chat__wa.wk-quick-btn{
  width: 100% !important;
  min-height: 50px !important;
  padding: 10px 8px !important;
  gap: 0 !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  letter-spacing: .2px !important;
  white-space: normal !important;
}

.wk-quick--renew{
  grid-column: 1 / -1 !important;
  width: 92% !important;
  justify-self: center !important;
  min-height: 54px !important;
  font-size: 14px !important;
}

.wk-quick-icon{
  display: none !important;
}

.wk-quick-label{
  white-space: normal !important;
}

@media (max-width: 420px){
  .wk-chat__wa.wk-quick-btn{
    min-height: 46px !important;
    font-size: 11px !important;
    padding: 9px 6px !important;
  }
  .wk-quick--renew{
    width: 92% !important;
    min-height: 50px !important;
    font-size: 12px !important;
  }
}


/* =========================================================
   WAI - Botón rápido REPORTAR ERROR
   Añadido sin tocar la lógica visual existente.
========================================================= */
.wk-quick--error{
  grid-column: 1 / -1 !important;
  width: 92% !important;
  justify-self: center !important;
  min-height: 54px !important;
  font-size: 14px !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 180, 60, .16), transparent 42%),
    linear-gradient(135deg, rgba(160, 62, 0, .36), rgba(80, 30, 0, .42)) !important;
  border: 1px solid rgba(255, 160, 60, .50) !important;
  color: #fff8ee !important;
}

@media (max-width: 420px){
  .wk-quick--error{
    width: 92% !important;
    min-height: 50px !important;
    font-size: 12px !important;
  }
}