/* ===== CHATBOT SENCILLO SERMACOM (responsive + hotfix) ===== */
:root {
  /* Paleta base (luego me pasas tus colores y los mapeamos aquí) */
  --scb-bg: #0f1115;
  --scb-panel: #151922;
  --scb-panel-2: #1b2030;
  --scb-text: #e8e8e8;
  --scb-muted: #a5a9b5;

  /* Permite heredar el primario de tu sitio si existe */
  --brand-primary: var(--azul-profesional, #3b82f6);
  --brand-primary-2: #60a5fa;

  --scb-accent: var(--brand-primary);
  --scb-accent-2: var(--brand-primary-2);
  --scb-success: #25d366;

  --scb-border: rgba(255,255,255,0.12);
  --scb-shadow: 0 10px 30px rgba(0,0,0,.35);

  --scb-radius: 16px;
  --scb-radius-sm: 12px;
  --scb-radius-lg: 20px;

  --scb-z: 9999;
  --scb-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

  /* Safe areas iOS + gaps base */
  --scb-gap-x: max(18px, env(safe-area-inset-right));
  --scb-gap-y: max(18px, env(safe-area-inset-bottom));
}

/* Contenedor raíz */
.scb-root {
  position: fixed;
  right: var(--scb-gap-x);
  bottom: var(--scb-gap-y);
  z-index: var(--scb-z);
  font-family: var(--scb-font);
  /* ✅ MODIFICADO: Cambiado a flex-end y flex-direction para posicionamiento a la izquierda */
  display: flex;
  align-items: flex-end; /* Alinea los ítems en la parte inferior */
  flex-direction: row-reverse; /* Pone la burbuja a la derecha, el texto a la izquierda */
  gap: 12px; /* Espacio entre el texto y la burbuja */
}

/* Opción izquierda: añade .left al root si la quieres del otro lado */
.scb-root.left { left: var(--scb-gap-x); right: auto; flex-direction: row; } /* Ajuste para el modo 'left' */

/* === Burbuja === */
.scb-bubble{
  width: clamp(52px, 6.5vw, 64px);
  height: clamp(52px, 6.5vw, 64px);
  border: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--scb-accent), var(--scb-accent-2));
  box-shadow: var(--scb-shadow);
  display: grid; place-items: center; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.scb-bubble:hover{ transform: translateY(-2px) scale(1.02); }
.scb-bubble:focus-visible{ outline: 2px solid var(--scb-accent-2); outline-offset: 2px; }
.scb-bubble-img{
  width: clamp(26px, 3.4vw, 34px);
  height: clamp(26px, 3.4vw, 34px);
  filter: brightness(0) invert(1);
}

/* === Ventana (FIXED por defecto para que nunca se salga) === */
.scb-window{
  position: fixed;
  right: var(--scb-gap-x);
  bottom: calc(var(--scb-gap-y) + 80px); /* 64px burbuja + 16px margen */
  width: clamp(300px, 90vw, 380px);
  max-height: min(72vh, 560px);
  background: linear-gradient(180deg, var(--scb-panel), var(--scb-panel-2));
  color: var(--scb-text);
  border: 1px solid var(--scb-border);
  border-radius: var(--scb-radius-lg);
  box-shadow: var(--scb-shadow);
  display: none;
  overflow: hidden;
  backdrop-filter: saturate(120%) blur(2px);
  box-sizing: border-box;
}
.scb-window[aria-hidden="false"]{ display: flex; flex-direction: column; }

/* Si el root está a la izquierda, la ventana también */
/* ✅ MODIFICADO: Ajuste para el modo 'left' */
.scb-root.left .scb-window{
  left: var(--scb-gap-x);
  right: auto;
}

/* === Header === */
.scb-header{
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--scb-border);
  padding: 12px 12px 12px 10px;
}
.scb-header-left{ display:flex; gap:10px; align-items:center; }
.scb-header-avatar{ width:36px; height:36px; border-radius:50%; border:1px solid var(--scb-border); }
.scb-header-texts h2{
  font-size: clamp(14px, 1.4vw, 16px);
  margin: 0; font-weight: 700; color: #fff;
}
.scb-subtitle{ font-size: 12px; color: var(--scb-muted); margin: 2px 0 0; }

.scb-header-right{ display:flex; gap:6px; }
.scb-icon-btn{
  min-width: 36px; height: 32px;
  border:1px solid var(--scb-border); border-radius:10px; background:transparent;
  color:#cfd3db; cursor:pointer;
  transition: background .2s ease, transform .2s ease;
}
.scb-icon-btn:hover{ background: rgba(255,255,255,0.06); transform: translateY(-1px); }
.scb-icon-btn:focus-visible{ outline:2px solid var(--scb-accent-2); outline-offset: 2px; }

/* === Cuerpo === */
.scb-body{
  padding: 12px;
  overflow: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.scb-msg{ display:flex; gap:10px; }
.scb-msg-avatar img{ width:28px; height:28px; border-radius:50%; border:1px solid var(--scb-border); }
.scb-msg-bubble{
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--scb-border);
  padding: 10px 12px; border-radius: 12px; max-width: 85%;
}
.scb-msg-bubble p{
  margin: 0 0 8px; font-size: 13px; color: #eaeef9; line-height: 1.45;
}
.scb-msg-bubble p:last-child{ margin-bottom: 0; }
.scb-msg-user .scb-msg-bubble{
  background: color-mix(in oklab, var(--scb-accent) 22%, transparent);
  border-color: color-mix(in oklab, var(--scb-accent) 45%, transparent);
  margin-left: auto;
}

/* === Chips === */
.scb-quick{ display:flex; flex-wrap:wrap; gap:8px; }
.scb-chip{
  border:1px solid var(--scb-border);
  background: transparent; color:#eaf0ff; font-size: 12px;
  padding: 8px 12px; border-radius: 999px; cursor:pointer;
  transition: background .2s ease, transform .2s ease;
  min-height: 34px; /* mejor tap target */
}
.scb-chip:hover{ background: rgba(255,255,255,0.08); transform: translateY(-1px); }
.scb-chip:focus-visible{ outline:2px solid var(--scb-accent-2); outline-offset:2px; }

/* === Footer acciones === */
.scb-footer{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px; border-top:1px solid var(--scb-border); background:rgba(255,255,255,0.03);
}
.scb-back{
  border:1px solid var(--scb-border); background:transparent; color:#e5e9f4;
  font-size:13px; padding:9px 12px; border-radius:10px; cursor:pointer;
  transition: background .2s ease, opacity .2s ease;
}
.scb-back:disabled{ opacity:.5; cursor:not-allowed; }
.scb-back:hover:not(:disabled){ background: rgba(255,255,255,0.06); }
.scb-back:focus-visible{ outline:2px solid var(--scb-accent-2); outline-offset:2px; }

.scb-whatsapp{
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: linear-gradient(135deg, var(--scb-success), #1ebe5d);
  color:#072b0c; font-weight:700; font-size:13px; padding:10px 12px; border-radius:10px;
  border:1px solid rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease;
  min-height: 38px;
}
.scb-whatsapp:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37,211,102,.3); }

/* === Utils === */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}


/* ===== ✅ INICIO: ESTILOS PARA LA ANIMACIÓN (MODIFICADOS) ✅ ===== */

/* Animación de entrada: aparece y se mueve un poco hacia arriba */
@keyframes scb-text-pop-in {
  0% { opacity: 0; transform: translateY(10px) scale(0.8); }
  70% { opacity: 1; transform: translateY(-5px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Animación de "hablar": un sutil movimiento de la burbuja de texto */
@keyframes scb-text-speaking {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.scb-bubble-text {
  background: var(--scb-panel-2);
  color: var(--scb-text);
  padding: 8px 14px;
  border-radius: var(--scb-radius-sm);
  border: 1px solid var(--scb-border);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  margin-bottom: 10px; /* Alineación vertical con la burbuja */

  /* Para el "triángulo" de bocadillo */
  position: relative;
  /* La punta debe ir hacia la derecha (hacia la burbuja) */
  border-bottom-right-radius: 2px; /* Reducir para que la punta se vea más nítida */

  /* Animación */
  animation: 
    scb-text-pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, /* Animación de pop-in al aparecer */
    scb-text-speaking 1.5s ease-in-out 2.5s infinite alternate; /* Animación de "hablar" que empieza después */
  
  /* Transición para ocultar suavemente */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* El "triángulo" del bocadillo */
.scb-bubble-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -7px; /* A la derecha, pegado al borde */
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-left: 8px solid var(--scb-panel-2); /* Color del fondo del bocadillo */
  border-bottom: 8px solid transparent;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.1)); /* Sombra para que la punta se vea con el borde */
}

/* Borde del triángulo */
.scb-bubble-text::before {
  content: '';
  position: absolute;
  bottom: -1px; /* Ligeramente más abajo para que se superponga con el borde del bocadillo */
  right: -9px; /* A la derecha, pegado al borde */
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-left: 9px solid var(--scb-border); /* Color del borde */
  border-bottom: 9px solid transparent;
  z-index: -1; /* Detrás del triángulo principal */
}

/* Ocultar el texto cuando el chat está abierto */
.scb-root.scb-is-open .scb-bubble-text {
  opacity: 0;
  transform: translateX(5px) scale(0.9); /* Pequeña escala para el efecto de cerrar */
  pointer-events: none; /* Evita interacciones cuando está oculto */
  animation: none; /* Detiene todas las animaciones */
}

/* Ajuste para el modo 'left' */
.scb-root.left .scb-bubble-text {
  /* La punta debe ir hacia la izquierda (hacia la burbuja) */
  border-bottom-right-radius: var(--scb-radius-sm); /* Volver al radio normal */
  border-bottom-left-radius: 2px; /* Reducir el de la izquierda */
  animation: 
    scb-text-pop-in-left 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
    scb-text-speaking 1.5s ease-in-out 2.5s infinite alternate;
}

/* Animación de entrada para el modo 'left' */
@keyframes scb-text-pop-in-left {
  0% { opacity: 0; transform: translateY(10px) scale(0.8); }
  70% { opacity: 1; transform: translateY(-5px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.scb-root.left .scb-bubble-text::after {
  right: auto;
  left: -7px; /* A la izquierda */
  border-top: 8px solid transparent;
  border-right: 8px solid var(--scb-panel-2); /* Color del fondo del bocadillo */
  border-left: none; /* Quitamos el borde izquierdo */
  border-bottom: 8px solid transparent;
  filter: drop-shadow(-1px 1px 0 rgba(0,0,0,0.1)); /* Sombra hacia la izquierda */
}

.scb-root.left .scb-bubble-text::before {
  right: auto;
  left: -9px; /* A la izquierda */
  border-top: 9px solid transparent;
  border-right: 9px solid var(--scb-border); /* Color del borde */
  border-left: none; /* Quitamos el borde izquierdo */
  border-bottom: 9px solid transparent;
}


/* ===== ✅ FIN: ESTILOS PARA LA ANIMACIÓN (MODIFICADOS) ✅ ===== */


/* ===== Breakpoints ===== */
@media (max-width: 768px){
  .scb-window{ width: clamp(300px, 94vw, 380px); max-height: min(72vh, 520px); }
  .scb-msg-bubble p{ font-size: 13px; }
}

@media (max-width: 480px){
  /* ocupa el ancho disponible entre left/right y respeta safe areas */
  .scb-window{
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    width: auto;
    margin: 0 auto;
    bottom: calc(var(--scb-gap-y) + 72px);
    max-height: min(70vh, 520px);
  }
  .scb-body{ padding: 10px; gap: 10px; }
  .scb-chip{ padding: 8px 10px; }
  .scb-header-avatar{ width:32px; height:32px; }
  .scb-bubble-text { display: none; } /* Ocultamos el texto en móviles para no saturar */
}

/* Menos movimiento */
@media (prefers-reduced-motion: reduce){
  .scb-bubble, .scb-icon-btn, .scb-chip, .scb-whatsapp, .scb-back { transition: none; }
  .scb-bubble-text { animation: none; }
}