/* ========== PALETA ========== */
:root{
  --chat--color--primary:#008c8c;   /* turquesa */
  --chat--color--secondary:#f4b400; /* dorado */
  --chat--color-white:#fff;
  --chat--color-light:#f9f9f9;
  --chat--color-dark:#222;
  --chat--color-border:#e5e7eb;
}

/* ========== WRAPPER: IZQUIERDA / CAPAS ALTAS ========== */
.chat-window-wrapper{
  position:fixed;
  left:1.5rem;
  bottom:1.5rem;
  right:auto!important;
  top:auto!important;
  z-index:999999;
}

/* ========== VENTANA ========== */
.chat-window{
  background:#fff;
  border:1px solid var(--chat--color-border);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  overflow:hidden;
  width:380px!important;
  max-height:85vh;
  display:flex;
  flex-direction:column;
}

.chat-window{margin-top:0!important;margin-bottom: 66px;}

/* ========== CABECERA ========== */
.chat-layout .chat-header{
  background:#fff;
  color:var(--chat--color-dark);
  border-bottom:1px solid var(--chat--color-border);
  padding:.75rem 1rem 1rem;
  text-align:left;
  flex-shrink:0;
}

.chat-layout .chat-header h1{
  font-size:1rem;
  font-weight:700;
  color:var(--chat--color--primary);
  margin:0 0 .25rem 0;
}

.chat-layout .chat-header p{
  color:#555;
  font-size:.9rem;
  margin:0;
}

/* ========== MENSAJES ========== */
.chat-body{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
}

.chat-message.chat-message-from-bot{
  background:var(--chat--color-light);
  color:var(--chat--color-dark);
  border-radius:12px 12px 12px 0;
  padding:.8rem 1rem;
  margin:8px 10px;
}

.chat-message.chat-message-from-user{
  background:var(--chat--color--primary);
  color:#fff;
  border-radius:16px 16px 0 16px;
  padding:.8rem 1rem;
  margin:8px 10px;
}

/* ========== ENTRADA ========== */
.chat-inputs{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.6rem;
  border-top:1px solid var(--chat--color-border);
  background:#fff;
  flex-shrink:0;
}

.chat-inputs textarea{
  flex:1;
  width:100%;
  border:1px solid var(--chat--color-border);
  border-radius:20px;
  padding:.85rem 1rem;
  font-size:.95rem;
  line-height:1.4;
  resize:none;
  outline:none;
  background:#fff;
  color:var(--chat--color-dark);
  transition:all .2s ease;
}

.chat-inputs textarea:focus{
  border-color:var(--chat--color--primary);
  box-shadow:0 0 0 2px rgba(0,140,140,.15);
}

/* Botón enviar */
.chat-input-send-button{
  background:var(--chat--color--primary);
  color:#fff;
  border:none;
  border-radius:50%;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, transform .2s ease;
  flex-shrink:0;
}
.chat-input-send-button:hover{ 
  background:#007676; 
  transform:scale(1.05); 
}

/* ========== BOTÓN FLOTANTE (cerrado) ========== */
.chat-window-toggle{
  background-color:var(--chat--color--primary);
  color:#fff;
  left:1.5rem!important;
  right:auto!important;
  bottom:1.5rem;
  border-radius:50%;
  width:58px;
  height:58px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  position:fixed;
  z-index:999998;
}
.chat-window-toggle:hover{ 
  background:#007676; 
  transform:scale(1.05); 
}

/* ========== TIPOGRAFÍA ========== */
.chat-layout, .chat-message, .chat-inputs textarea{
  font-family:"Montserrat","Segoe UI",sans-serif;
  line-height:1.5;
}

/* ========== MÓVIL: OPTIMIZADO ========== */
@media (max-width:768px){
  .chat-window-wrapper{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    padding:0!important;
    margin:0!important;
  }

  .chat-window{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:85vh!important;
    margin:1rem!important;
    border-radius:16px!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    box-shadow:0 -4px 24px rgba(0,0,0,.15)!important;
  }

  /* Cabecera fija */
  .chat-layout .chat-header{
    position:sticky!important;
    top:0!important;
    z-index:10!important;
    border-radius:16px 16px 0 0;
  }

  /* Área de mensajes con scroll */
  .chat-body{
    max-height:calc(85vh - 160px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
  }

  /* Input fijo abajo */
  .chat-inputs{
    position:sticky!important;
    bottom:0!important;
    z-index:10!important;
    background:#fff!important;
    border-radius:0 0 16px 16px;
    padding:.75rem!important;
  }

  .chat-inputs textarea{
    font-size:.9rem!important;
    padding:.75rem!important;
  }

  .chat-input-send-button{
    width:40px!important;
    height:40px!important;
  }

  /* Botón flotante en móvil - abajo a la izquierda */
  .chat-window-toggle{
    position:fixed!important;
    left:1rem!important;
    right:auto!important;
    bottom:1rem!important;
    width:56px!important;
    height:56px!important;
  }

  /* Mensajes más compactos */
  .chat-message{
    margin:6px 8px!important;
    padding:.7rem .9rem!important;
    font-size:.9rem!important;
  }

  /* Ajustes para pantallas muy pequeñas */
  @supports (height: 100dvh) {
    .chat-window{
      max-height:85dvh!important;
      margin-bottom: 80px!Important;
    }
    .chat-body{
      max-height:calc(85dvh - 160px)!important;
    }
  }
}

/* ========== MÓVILES PEQUEÑOS (< 400px) ========== */
@media (max-width:400px){
  .chat-window{
    margin:.75rem!important;
  }

  .chat-layout .chat-header h1{
    font-size:.9rem!important;
  }

  .chat-layout .chat-header p{
    font-size:.85rem!important;
  }

  .chat-inputs{
    padding:.6rem!important;
    gap:.5rem!important;
  }

  .chat-input-send-button{
    width:38px!important;
    height:38px!important;
  }

  .chat-window-toggle{
    width:52px!important;
    height:52px!important;
  }
}

/* ========== ANIMACIÓN DE ESCRITURA ========== */
.chat-message-typing .chat-message-typing-circle{
  background-color:var(--chat--color--secondary);
}

/* ========== MEJORAS DE ACCESIBILIDAD ========== */
@media (prefers-reduced-motion: reduce) {
  *{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
  }
}