/* ===========================================
    Módulo: base.css
    - Variables de diseño
    - Estilos globales (reset, body, etc.)
    =========================================== */

:root {
    --header-bg: #4a90e2;
    --text-color: #34495e;
    --my-message-bg: #48c774;
    --other-message-bg: #f1f0f0;
    --sidebar-bg: #ffffff;
    --left-sidebar-width: 280px;
    --right-sidebar-width: 240px;
    --border-color: #e9eef2;
    --notification-red: #e74c3c;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: 'Inter', sans-serif;
    background: #f4f7f9;
    margin: 0;
    overflow: auto; /* permitir scroll cuando la app lo necesite */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* --- Arreglo para el Avatar por Defecto (Método del Contenedor) --- */
/* Le ponemos el fondo gris al CONTENEDOR, no a la imagen */
.default-avatar-wrapper {
    background-color: #e0e0e0;
}

/* UTIL: ocultar por clase (reemplaza uso de inline styles en muchos sitios) */
.hidden { display: none !important; }

/* Aseguramos que .lobby-view (cuando esté dentro del SPA) se centre correctamente */
.lobby-view {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  box-sizing: border-box;
  padding: 1rem;
}




/* ===========================================
   Vista inicial: lobby visible, chat oculto
   =========================================== */
#chatView {
  display: none;
}

#lobbyView {
  display: block;
}