/*
 * Archivo: assets/css/chat-style.css
 * Descripción: Estilos para el plugin Chat Avanzado.
 *
 * Características:
 * - Diseño de tres columnas en escritorio: Salas | Mensajes | Usuarios en línea.
 * - Interfaz responsiva en móvil con toggles para Salas y Usuarios.
 * - Scroll interno en las listas y contenedor de mensajes.
 */

:root {
  /* Variables de tema */
  --ca-bg: #f4f7fb;
  --ca-primary: #4a90e2;
  --ca-secondary: #ffffff;
  --ca-border: #d0d7de;
  --ca-text: #333333;
  --ca-accent: #50e3c2;
  --ca-radius: 12px;
  --ca-shadow: rgba(0, 0, 0, 0.1);
  --ca-gap: 12px;
  --ca-header-height: 40px;
  --ca-footer-height: 56px;
}

/* Contenedor principal */
#ca-login,
#ca-chat {
  background: var(--ca-secondary);
  max-width: 1200px;
  margin: var(--ca-gap) auto;
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius);
  box-shadow: 0 2px 8px var(--ca-shadow);
  padding: var(--ca-gap);
  box-sizing: border-box;
}

/* Ocultar elementos hasta inicialización JS */
.ca-hidden {
  display: none;
}

/* Chat principal: ocupa viewport completo */
#ca-chat {
  display: flex;
  flex-direction: column;
  height: calc(100vh - (2 * var(--ca-gap)));
  overflow: hidden;
}

/* Layout de escritorio: tres columnas */
.ca-chat-layout {
  display: flex;
  flex: 1;
  gap: var(--ca-gap);
  overflow: hidden;
}

/* Estilo común de columnas */
.ca-col {
  background: var(--ca-secondary);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius);
  padding: var(--ca-gap);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Títulos de columnas laterales */
.ca-col-rooms h3,
.ca-col-users h3 {
  font-size: 0.85em;
  margin: 0 0 var(--ca-gap);
  font-weight: 500;
  color: var(--ca-primary);
}

/* Columnas laterales: ancho fijo */
.ca-col-rooms,
.ca-col-users {
  flex: 0 0 20%;
  max-width: 240px;
}

/* Listas de salas y usuarios con scroll */
.ca-col-rooms ul,
.ca-col-users ul {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  min-height: 0;
}

/* Columna de mensajes */
.ca-col-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Contenedor de mensajes con scroll interno */
#ca-messages {
  flex: 1;
  padding: var(--ca-gap);
  background: var(--ca-bg);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius);
  overflow-y: auto;
  min-height: 0;
}

/* Mensajes individuales */
.ca-message {
  padding: 6px;
  margin-bottom: 6px;
  background: var(--ca-secondary);
  border-radius: var(--ca-radius);
  box-shadow: 0 1px 2px var(--ca-shadow);
}
.ca-highlight {
  border-left: 4px solid var(--ca-accent);
  padding-left: 4px;
}

/* Encabezado del chat */
.ca-chat-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--ca-header-height);
  margin-bottom: var(--ca-gap);
  position: relative;
  box-sizing: border-box;
}
.ca-chat-header h3 {
  margin: 0;
  font-size: 1em;
  font-weight: 500;
  color: var(--ca-primary);
}

/* Botones toggle (solo en móvil) */
.ca-chat-header button {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(145deg, #50e3c2, #4a90e2);
  color: var(--ca-secondary);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1.2em;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  box-shadow: 2px 2px 5px var(--ca-shadow);
  transition: transform 0.2s;
}
.ca-chat-header button#ca-toggle-rooms {
  left: var(--ca-gap);
}
.ca-chat-header button#ca-toggle-users {
  right: var(--ca-gap);
}

/* Resaltar sala o usuario en hover */
.ca-room-item:hover,
#ca-users-list li:hover {
  background: #f0f0f0;
  cursor: pointer;
}

/* Formulario de envío */
#ca-send-form {
  display: flex;
  gap: var(--ca-gap);
  padding-top: var(--ca-gap);
  border-top: 1px solid var(--ca-border);
  background: var(--ca-secondary);
  flex-shrink: 0;
}
#ca-send-input {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius);
  box-sizing: border-box;
}
#ca-send-form button {
  padding: 8px 16px;
  border: none;
  background: var(--ca-primary);
  color: var(--ca-secondary);
  border-radius: var(--ca-radius);
  cursor: pointer;
}

/* Responsive: móvil */
@media (max-width: 768px) {
  /* Ocultar columnas laterales */
  .ca-col-rooms,
  .ca-col-users {
    display: none;
  }
  /* Mostrar toggles */
  .ca-chat-header button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Chat fullscreen */
  #ca-chat {
    height: 100vh;
    padding: 0;
  }
  .ca-chat-layout {
    flex-direction: column;
    height: calc(100% - var(--ca-header-height));
  }

  /* Scroll mensajes */
  #ca-messages {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Formulario sticky */
  #ca-send-form {
    position: sticky;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
  }
}