/* ==========================================================================
   PSBMG DeepChat — mantiene tu CSS original + sticky + mejoras visuales
   ========================================================================== */

/* Defaults como tu snippet */
:root{
  --psbmg-border: 2px;     /* grosor borde degradado */
  --psbmg-radius: 20px;    /* radio exterior */
  --psbmg-green: #3232C7;  /* color 1 */
  --psbmg-blue:  #98F065;  /* color 2 */
}

/* Scope por instancia (se sobreescribe con style="" en los shortcodes) */
.psbmg-chat-scope{
  --psbmg-border: 2px;
  --psbmg-radius: 20px;
  --psbmg-green: #3232C7;
  --psbmg-blue:  #98F065;
}

/* =========================
   Chat inline (grande)
   ========================= */

.psbmg-chat-wrap{
  max-width: 100%;
  margin: 0 auto;
}

/* mantenemos tu altura (variable) */
.psbmg-chat-wrap--inline{
  max-width: var(--psbmg-max-width, 100%);
  height: var(--psbmg-chat-height, 550px);
}

@media (max-width: 1024px){
  .psbmg-chat-wrap--inline{
    height: var(--psbmg-chat-height-mobile, 70vh);
    min-height: var(--psbmg-chat-min-height-mobile, 520px);
  }
}

/* Marco con degradado (igual que tu snippet) */
.psbmg-chat-frame{
  height: 100%;
  padding: var(--psbmg-border);
  border-radius: var(--psbmg-radius);
  background: linear-gradient(135deg, var(--psbmg-green) 0%, var(--psbmg-blue) 100%);
  box-sizing: border-box;
  /* Evita artefactos visuales donde el "borde" parece quedar por detrás */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Capa interior blanca (borde degradado visible) */
.psbmg-chat-inner{
  height: 100%;
  border-radius: calc(var(--psbmg-radius) - var(--psbmg-border));
  background: var(--psbmg-inner-bg, #fff);
  overflow: hidden; /* recorta esquinas SIN tocar overflow del deep-chat */
  box-sizing: border-box;
  position: relative; /* para VFX layer */
  z-index: 0;
  display: flex;
  flex-direction: column;
}

/* Bloqueo scroll (solo cuando activamos fullscreen móvil tipo ChatGPT) */
html.psbmg-deepchat-lock,
body.psbmg-deepchat-lock{
  overflow: hidden !important;
  height: 100% !important;
}

/* VFX layer (por defecto no hace nada). JS decide si inserta canvas */
.psbmg-vfx-layer{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Blobs: gradientes suaves moviéndose */
.psbmg-vfx-layer[data-vfx="blobs"]::before,
.psbmg-vfx-layer[data-vfx="blobs"]::after{
  content:"";
  position:absolute;
  border-radius: 999px;
  filter: blur(var(--psbmg-blobs-blur, 40px));
  pointer-events: none;
}

/* Blob 1 */
.psbmg-vfx-layer[data-vfx="blobs"]::before{
  width: var(--psbmg-blobs-size1, 380px);
  height: var(--psbmg-blobs-size1, 380px);
  opacity: var(--psbmg-blobs-opacity1, .22);
  background: radial-gradient(
    circle at var(--psbmg-blobs-at1, 30% 30%),
    var(--psbmg-blobs-color1, var(--psbmg-green)),
    transparent var(--psbmg-blobs-stop1, 60%)
  );
  animation: psbmgBlobMove var(--psbmg-blobs-duration1, 12s) ease-in-out infinite;
}

/* Blob 2 */
.psbmg-vfx-layer[data-vfx="blobs"]::after{
  width: var(--psbmg-blobs-size2, 460px);
  height: var(--psbmg-blobs-size2, 460px);
  opacity: var(--psbmg-blobs-opacity2, .18);
  background: radial-gradient(
    circle at var(--psbmg-blobs-at2, 60% 60%),
    var(--psbmg-blobs-color2, var(--psbmg-blue)),
    transparent var(--psbmg-blobs-stop2, 60%)
  );
  animation: psbmgBlobMove var(--psbmg-blobs-duration2, 16s) ease-in-out infinite;
}
@keyframes psbmgBlobMove{
  0%{ transform: translate(-20%, -10%) scale(1); }
  50%{ transform: translate(35%, 20%) scale(1.12); }
  100%{ transform: translate(-20%, -10%) scale(1); }
}

/* DeepChat ocupa todo el alto */
.psbmg-chat-inner deep-chat{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative;
  z-index: 1;
}

/* Padding de tu snippet */
deep-chat.psbmg-deep-chat{
  box-sizing: border-box;
  font-size: var(--psbmg-chat-font-size, inherit);
  padding: var(--psbmg-pad-top, 12px)
           var(--psbmg-pad-x, 10px)
           var(--psbmg-pad-bottom, 0px)
           var(--psbmg-pad-x, 10px);
}

@media (max-width: 1024px){
  deep-chat.psbmg-deep-chat{
    font-size: var(--psbmg-chat-font-size-mobile, var(--psbmg-chat-font-size, inherit));
    padding: var(--psbmg-pad-top-m, var(--psbmg-pad-top, 12px))
             var(--psbmg-pad-x-m, var(--psbmg-pad-x, 10px))
             var(--psbmg-pad-bottom-m, var(--psbmg-pad-bottom, 0px))
             var(--psbmg-pad-x-m, var(--psbmg-pad-x, 10px));
  }
}

.psbmg-sticky.is-fullscreen deep-chat.psbmg-deep-chat{
  /* En fullscreen el "max-width" lo controla el contenedor (chat-frame).
     Aquí dejamos que el webcomponent rellene el ancho disponible. */
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: var(--psbmg-pad-top-fs, var(--psbmg-pad-top-m, var(--psbmg-pad-top, 12px)))
           var(--psbmg-pad-x-fs, var(--psbmg-pad-x-m, var(--psbmg-pad-x, 10px)))
           var(--psbmg-pad-bottom-fs, var(--psbmg-pad-bottom-m, var(--psbmg-pad-bottom, 0px)))
           var(--psbmg-pad-x-fs, var(--psbmg-pad-x-m, var(--psbmg-pad-x, 10px)));
}

/* =========================
   Sticky
   ========================= */

.psbmg-sticky{
  position: fixed;
  right: var(--psbmg-sticky-right, 24px);
  bottom: var(--psbmg-sticky-bottom, 24px);
  z-index: var(--psbmg-sticky-z, 9999);
}

.psbmg-sticky-panel{
  width: var(--psbmg-sticky-width, 360px);
  height: var(--psbmg-sticky-height, 480px);
  display: none;
  /* Evita que el scroll "escape" a la página al hacer scroll dentro del chat */
  overscroll-behavior: contain;
}

@media (max-width: 1024px){
  .psbmg-sticky-panel{
    width: var(--psbmg-sticky-width-mobile, 92vw);
    height: var(--psbmg-sticky-height-mobile, 70vh);
  }
}

/* =========================
   UX móvil (opcional)
   - Evita saltos de altura con teclado / barras del navegador.
   - Requiere activar el check (o atributo) => añade .psbmg-mobile-ux y data-psbmg-mobile-ux="1".
   ========================= */
@media (max-width: 1024px){
  /* Inline: usa alto visible (visualViewport) como límite superior */
  .psbmg-chat-wrap--inline.psbmg-mobile-ux{
    height: min(var(--psbmg-chat-height-mobile, 70vh), calc(var(--psbmg-vvh, 100dvh) - 16px));
  }

  /* Sticky: sube el widget cuando aparece el teclado */
  .psbmg-sticky.psbmg-mobile-ux{
    bottom: calc(var(--psbmg-sticky-bottom, 24px) + var(--psbmg-kb, 0px));
    will-change: bottom;
  }

  /* Sticky: limita alto en base al viewport visible */
  .psbmg-sticky.psbmg-mobile-ux .psbmg-sticky-panel{
    height: min(var(--psbmg-sticky-height-mobile, 70vh), calc(var(--psbmg-vvh, 100dvh) - 16px));
    max-height: calc(var(--psbmg-vvh, 100dvh) - 16px);
  }

  /* Fullscreen + mobile UX:
     Importante: mantenemos el overlay a pantalla completa (cubre también la zona del teclado)
     y usamos padding-bottom con --psbmg-kb para que el input no quede detrás del teclado.
     Esto evita ver la web “por debajo” del teclado en iOS.
  */
  .psbmg-sticky.psbmg-mobile-ux.is-fullscreen{
    top: 0;
    bottom: 0;
    height: 100dvh;
  }

  .psbmg-sticky.psbmg-mobile-ux.is-fullscreen .psbmg-sticky-panel{
    height: 100dvh;
    max-height: 100dvh;
  }

  .psbmg-sticky.psbmg-mobile-ux.is-fullscreen .psbmg-sticky-body{
    padding-bottom: var(--psbmg-kb, 0px);
    box-sizing: border-box;
  }
}


/* Por defecto: cerrado => se ve el launcher */
.psbmg-sticky .psbmg-sticky-launcher{
  -webkit-appearance: none;
  appearance: none;
  width: var(--psbmg-sticky-launcher-size, 56px) !important;
  height: var(--psbmg-sticky-launcher-size, 56px) !important;
  min-width: var(--psbmg-sticky-launcher-size, 56px);
  min-height: var(--psbmg-sticky-launcher-size, 56px);
  border: none !important;
  border-radius: var(--psbmg-launcher-radius, 999px) !important;
  padding: 0 !important;
  margin: 0;
  overflow: hidden; /* asegura círculo perfecto aunque el tema fuerce estilos raros */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: var(--psbmg-launcher-text-color, #fff);
  background: linear-gradient(135deg, var(--psbmg-launcher-color1, var(--psbmg-green)) 0%, var(--psbmg-launcher-color2, var(--psbmg-blue)) 100%) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  line-height: 0;
}

.psbmg-sticky .psbmg-sticky-launcher svg{
  display: block;
}

.psbmg-sticky .psbmg-sticky-launcher:focus{
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 2px;
}

/* Abierto => panel visible, launcher oculto */
.psbmg-sticky.is-open .psbmg-sticky-panel{ display: block; }
.psbmg-sticky.is-open .psbmg-sticky-launcher{ display: none !important; }

/* Sticky panel: usamos TU marco degradado también */
.psbmg-sticky-panel .psbmg-chat-frame,
.psbmg-sticky-panel .psbmg-chat-inner{
  height: 100%;
}

/* Header dentro del inner (se conserva el marco) */
.psbmg-sticky-header,
.psbmg-inline-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--psbmg-header-bg, rgba(255,255,255,.92));
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-sizing: border-box;
  position: relative;
  z-index: 2;

  /* look “pro” (si el navegador lo soporta) */
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}


/*
  Fullscreen: cabecera totalmente limpia.
  Aunque la cabecera ya está por encima del VFX, en fullscreen solemos querer
  evitar cualquier transparencia para que no se aprecien blobs/vectors bajo el
  título.
*/
.psbmg-sticky.is-fullscreen .psbmg-sticky-header{
  background: var(--psbmg-sticky-header-bg-fs, #fff);
}

.psbmg-sticky-title{
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

/* Inline header (opcional) */
.psbmg-inline-title{
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
  color: #222;
}

.psbmg-inline-body{
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 1;
}

.psbmg-sticky-actions{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.psbmg-sticky-close,
.psbmg-sticky-fullscreen{
  border: none;
  background: transparent;
  cursor: pointer;

  width: var(--psbmg-sticky-action-size, 34px);
  height: var(--psbmg-sticky-action-size, 34px);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: var(--psbmg-sticky-action-font, 20px);
  line-height: 1;
  padding: 0;
  color: #333;
  border-radius: 10px;
}

.psbmg-sticky-close:hover,
.psbmg-sticky-fullscreen:hover{
  background: rgba(0,0,0,.06);
}


.psbmg-sticky-body{
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 1;
}

/* Asegura que deep-chat rellena el cuerpo del sticky */
.psbmg-sticky-body deep-chat{
  height: 100% !important;
}

/* =========================
   Fullscreen modo ChatGPT
   ========================= */

.psbmg-sticky.is-fullscreen{
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.psbmg-sticky.is-fullscreen .psbmg-sticky-panel{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  width: 100vw;
  height: 100dvh; /* mejor que 100vh en móvil */

  /* Fondo de la vista fullscreen (zona fuera del chat cuando hay max-width).
     Si no se define, hereda del fondo del panel. */
  background: var(--psbmg-fs-view-bg, var(--psbmg-inner-bg-fullscreen, var(--psbmg-inner-bg, #fff)));
}

/* Fullscreen + Mobile UX: usa el alto real visible (visualViewport) para evitar saltos con teclado */
@media (max-width: 1024px){
  .psbmg-sticky.psbmg-mobile-ux.is-fullscreen{
    top: 0;
    bottom: 0;
    height: 100dvh;
  }

  .psbmg-sticky.psbmg-mobile-ux.is-fullscreen .psbmg-sticky-panel{
    height: 100dvh;
    max-height: 100dvh;
  }

  .psbmg-sticky.psbmg-mobile-ux.is-fullscreen .psbmg-sticky-body{
    padding-bottom: var(--psbmg-kb, 0px);
    box-sizing: border-box;
  }
}

/* Bloqueo de scroll del documento cuando el sticky está en fullscreen (móvil) */
html.psbmg-deepchat-lock,
body.psbmg-deepchat-lock{
  overflow: hidden !important;
  height: 100% !important;
}

.psbmg-sticky.is-fullscreen .psbmg-chat-frame{
  border-radius: 0;

  /* En fullscreen, el max-width debe limitar el "panel" entero (incluyendo fondos/VFX),
     no sólo el webcomponent deep-chat. */
  width: min(100%, var(--psbmg-sticky-fullscreen-maxw, 100%));
  max-width: 100%;
  height: 100%;
  flex: 1 1 auto;
}

.psbmg-sticky.is-fullscreen .psbmg-chat-inner{
  border-radius: 0;
  background: var(--psbmg-inner-bg-fullscreen, var(--psbmg-inner-bg, #fff));
}

/* Fullscreen (opcional): sin marco degradado */
.psbmg-sticky[data-fs-noframe="1"].is-fullscreen .psbmg-chat-frame{
  padding: 0 !important;
  background: transparent !important;
}

.psbmg-sticky.is-fullscreen .psbmg-sticky-launcher{
  display: none;
}

/* =========================
   Preferencias accesibilidad
   ========================= */
@media (prefers-reduced-motion: reduce){
  .psbmg-vfx-layer[data-vfx="blobs"]::before,
  .psbmg-vfx-layer[data-vfx="blobs"]::after{
    animation: none;
  }
}


/* Fullscreen “card” (desktop): margen + radius + sombra (más pro) */
@media (min-width: 1025px){
  .psbmg-sticky[data-fs-card="1"].is-fullscreen .psbmg-sticky-panel{
    padding: var(--psbmg-fs-card-pad, 24px);
    box-sizing: border-box;
  }
  .psbmg-sticky[data-fs-card="1"].is-fullscreen .psbmg-chat-frame{
    border-radius: var(--psbmg-fs-card-radius, 18px) !important;
    box-shadow: var(--psbmg-fs-card-shadow, 0 24px 80px rgba(0,0,0,.18));
    overflow: hidden;
  }
  .psbmg-sticky[data-fs-card="1"].is-fullscreen .psbmg-chat-inner{
    border-radius: calc(var(--psbmg-fs-card-radius, 18px) - var(--psbmg-border)) !important;
  }
  .psbmg-sticky[data-fs-card="1"][data-fs-noframe="1"].is-fullscreen .psbmg-chat-inner{
    border-radius: var(--psbmg-fs-card-radius, 18px) !important;
  }
}