/* Sidebar derecho colapsable en modo oscuro */
#chatSidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  height: 100vh;
  background-color: #1a1a1a;
  overflow: hidden;
  transition: width 0.5s ease;
  z-index: 1000;
  transform: translateX(100%);
  padding: 10px;
  border-left: 1px solid #333;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Cuando el sidebar está abierto */
#chatSidebar.open {
  width: 355px;
  transform: translateX(0);
}

/* Estilos del botón para abrir/cerrar el sidebar en modo oscuro */
#chatToggleButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #2563eb;
  color: white;
  padding: 12px 16px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, right 0.3s ease; /* Transición suave */
}

/* Mover el botón hacia la izquierda cuando el sidebar está abierto */
#chatToggleButton.move-left {
  right: calc(var(--sidebar-width) + 30px); /* Mover el botón hacia la izquierda el ancho de la sidebar más margen */
}



/* Ajustar el contenido principal cuando el sidebar está abierto */
main[role="main"] {
  transition: margin-right 0.5s ease;
}

main[role="main"].shifted {
  margin-right: 300px;
}

/* Estilos del contenido dentro del chat en modo oscuro */
#chatSidebar h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #f0f0f0;
}

#chatContent {
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px;
  background-color: #333333;
  border-radius: 5px;
  margin-bottom: 10px;
  color: #f0f0f0;
}

#chatContent p {
  margin: 5px 0;
  font-size: 14px;
}

/* Colores para los diferentes departamentos */
#chatContent .logistica {
  color: #9b5de5;
}

#chatContent .contabilidad {
  color: #a1a1a1;
}

#chatContent .gerencia {
  color: #f25f5c;
}

/* Contenedor del input y botón de enviar */
#chatInputContainer {
  display: flex;
  padding: 10px;
  align-items: center; /* Alinear el input y el botón verticalmente */
  background-color: #1f1f1f; /* Fondo oscuro similar al ejemplo */
  border-top: 1px solid #444; /* Borde superior */
}

#chatInputContainer input {
  flex-grow: 1;/* El input ocupa todo el espacio disponible */
  border: none;
  border-radius: 5px;
  background-color: #333; /* Fondo oscuro para el input */
  color: #f0f0f0; /* Texto claro */
  padding: 10px;
  margin-right: 10px;
  height: 40px; /* Altura fija */
  flex-shrink: 0;/* No se encoge */
}

#chatInputContainer input::placeholder {
  color: #888; /* Color del placeholder */
}

#chatInputContainer button {
  background-color: transparent; /* Botón con fondo transparente */
  color: #f0f0f0; /* Color de texto claro */
  border: none;
  cursor: pointer;
  padding: 10px;
  font-size: 13px; /* Tamaño de texto simple */
  height: 40px; /* Mantener la altura del botón igual al input */
}

#chatInputContainer button:hover {
  color: #2563eb; /* Color azul al pasar el ratón */
}