/* =========================
   VADEWEBS CHATBOT STYLES
   Colores:
   - Verde:  #23A892
   - Negro:  #020108
   - Blanco: #F8F8FF
========================= */

/* Launcher */
#vw-launcher{
  position:fixed;
  bottom:24px;
  right: 24px;
  left:auto;
  background:#23A892;
  color:#020108;
  border:0;  
  border-radius:999px;
  font-weight:800;  
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  cursor:pointer;
  z-index:99999;
  transition: transform .12s ease;
}

#vw-launcher:hover{
  transform:translateY(-1px); 
}

@media (max-width:480px){
  #vw-launcher{
    right: 12px;
    bottom: 18px;
    width: 130px;
  }
}

/* Chat (arranca oculto, se abre al click) */
#vw-chat{
  position:fixed;
  left:50%;
  top: 50%;
  transform: translate(-50%, -50%);
  bottom:90px;
  width: min(900px, calc(100vw - 32px));
  height: min(720px, calc(100vh - 32px));
  max-width:calc(100vw - 48px);  
  max-height:calc(100vh - 140px);
  background:#F8F8FF;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.28);
  display: flex; 
  flex-direction:column;
  z-index:99999;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  opacity: 0;
  pointer-events: none;
}

#vw-chat.open{
  opacity: 1;
  pointer-events: auto;
}    
    
/* Tablet/móvil */
@media (max-width: 768px){
  #vw-chat{
    left: 25px;
    right: 25px;

    top: 25px;              /* <-- CLAVE: anula el top:50% */
    bottom: 90px;           /* deja espacio al footer / launcher si existe */

    transform: none;
    width: auto;
    height: auto;           /* <-- CLAVE: no fuerces height + top + bottom a la vez */
    max-height: none;
  }
}

@media (max-width:480px){
  #vw-chat{
    left: 25px;
    right: 25px;

    top: 25px;              /* <-- CLAVE */
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)); /* iOS friendly */

    transform: none;
    width: auto;
    height: auto;
    border-radius: 18px;
  }
}

/* Cabecera */
.vw-header{
  background: #4ab5a5;
  color: #020108;
  padding: 16px 16px 12px;
  border-bottom: 1px solid #00000030;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0 10px 22px #23a89263, 0 2px 6px #23a89254;
  flex-shrink: 0;
  flex: 0 0 auto;
}

/* Contenido header centrado */
.vw-header-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

/* Cerrar */
#vw-close{
  position:absolute;
  right:12px;
  top:10px;
  background:transparent;
  color:#020108;
  border:0;
  font-size:30px;
  cursor:pointer;
  line-height:1;
}

/* Logo: IMG (no background-image) */
.vw-logo{
  width: 75px;
  height: 44px;
  border-radius: 12px;
  background: #f8f8ff00;
  object-fit: contain;
  display: block;
  box-shadow: 0 10px 20px #0000008f;
}

/* Títulos */
.vw-title{
  font-weight:800;
  font-size:18px;
  line-height:1.1;
}
.vw-sub{
  font-size:14px;
  opacity:.85;
  margin-top:0;
}

/* Mensajes: FLEX REAL (sin cálculos) */
.vw-messages{
  flex:1 1 auto;
  min-height:0;            /* << CLAVE: evita que “empuje” y rompa header */
  overflow-y:auto;
  overflow-x: hidden;
  padding:14px;
  padding-bottom: 12px;
  background:#23a89203;
}

/* Globos */
.vw-bubble{
  max-width: 70%;
  padding: 11px 13px;
  border-radius: 16px;
  margin: 15px 0;
  white-space: pre-line;
  line-height: 1.35;
  box-shadow: 0 10px 22px #23a89226, 0 2px 6px #23a89245;
}

/* Bot */
.vw-bot{
  background: #F8F8FF;
  color: #020108;
  border: 0.2px solid;
  border-color: #23a8924a;
}

/* Usuario */
.vw-user{
  background: #23a89245;
  color: #020108;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  border: 0.2px solid;
  border-color: #23a8924a;
}

/* Acciones */
.vw-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

.vw-btn{
  background: #F8F8FF;
  color: #020108;
  border: 0;
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease;
  box-shadow: 0 10px 22px #23a89226, 0 2px 6px #23a89245;
}

.vw-btn:hover{
  transform: translateY(-1px);
  background: #F8F8FF;
  color: #020108;
}

/* Input */
.vw-input{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #F8F8FF;
  border-top: 1px solid #00000030;
  box-shadow: 0 10px 22px #23a892, 0 2px 6px #23a892;
  margin-top: auto;         /* asegura que se quede abajo */
  position: sticky;         /* se queda visible aunque scroll */
  bottom: 0;
  z-index: 5;
}

#vw-text{
  flex:1;
  border:1px solid rgba(0,0,0,.18);
  border-radius:999px;
  padding:10px 12px;
  outline:none;
  background:#F8F8FF;
  color:#020108;
  box-shadow: 0 10px 20px #0000008f;
}

#vw-send{
  background: #F8F8FF;
  color: #020108;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 10px 20px #0000008f;
}

/* =========================
   Overlay (fondo liso)
========================= */
#vw-overlay{
  position: fixed;
  inset: 0;
  background: #0b0f14;     /* color liso */
  opacity: .75;            /* intensidad */
  display: none;
  z-index: 99990;
}

#vw-overlay.active{ 
  display:block; 
}

/* Teaser (globo) */
#vw-teaser{
  position: fixed;
  bottom: 76px;      /* encima del launcher */
  right: 24px;
  max-width: 280px;
  background: #F8F8FF;
  color: #020108;
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
  z-index: 99999;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

#vw-teaser.show{
  opacity: 1;
  transform: translateY(0);
}

#vw-teaser:after{
  content:"";
  position:absolute;
  right: 22px;
  bottom: -8px;
  border-width: 8px 8px 0 8px;
  border-style: solid;
  border-color: #F8F8FF transparent transparent transparent;
}

/* móvil: un poco más centrado */
@media (max-width: 768px) {
  #vw-teaser {
    right: 16px;
    bottom: 72px;
    max-width: 240px;
  }
}