:root{
  --bg:#0f1720;
  --panel:#0b1220;
  --muted:#94a3b8;
  --accent:#10b981;
  --bubble:#11202a;
  --me:#063a2b;
  --glass: rgba(255,255,255,0.03);
  --card-radius:12px;
  --text:#e6eef6;
  --gap:12px;
  --height:100svh;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body,#app{height:100%}

body{
  background:linear-gradient(180deg, rgba(7,10,13,1) 0%, rgba(8,14,18,1) 100%);
  color:var(--text);
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  height:var(--height);
  overflow:hidden;
}

/* ===== Layout general ===== */
#app{
  display:flex;
  gap:var(--gap);
  height:100%;
  padding:12px;
}

/* ===== Sidebar ===== */
#sidebar{
  width:92px;
  background:var(--panel);
  border-radius:12px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  min-width:92px;
}

#profile-preview{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

#avatar-preview{
  width:56px;
  height:56px;
  border-radius:12px;
  background:var(--glass);
  background-size:cover;
  background-position:center;
}

#name-preview{
  font-size:12px;
  color:var(--muted);
  text-align:center;
  word-break:break-word;
}

/* ===== Groups ===== */
#groups-header{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:4px 6px;
  color:var(--muted);
  font-size:12px;
}

#btn-new-group{
  background:transparent;
  border:none;
  color:var(--accent);
  font-size:18px;
  padding:6px;
  border-radius:8px;
  cursor:pointer;
}

#groups-list{
  list-style:none;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:4px;
  align-items:center;
}

.group-item{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:pointer;
}

.group-item .g-dot{
  width:44px;
  height:44px;
  border-radius:10px;
  background:var(--glass);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:12px;
}

.group-item.active .g-dot{
  outline:2px solid var(--accent);
}

/* ===== Main ===== */
#main{
  flex:1;
  min-width:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:12px;
  padding:12px;

  display:flex;
  flex-direction:column;
  gap:10px;

  /* clave para que messages haga scroll bien */
  min-height:0;
}

/* Contenedor mensajes (scroll) */
#messages{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Barra "escribiendo" (no tapa nada) */
#typing-bar{
  display:none;
  padding:6px 10px;
  font-size:12px;
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.15);
  backdrop-filter: blur(6px);
  border-radius:10px;
}

/* Mensajes */
.message{
  display:flex;
  gap:8px;
  align-items:flex-end;
  width:100%;
}

.avatar{
  width:40px;
  height:40px;
  border-radius:8px;
  background:var(--bubble);
  background-size:cover;
  background-position:center;
  flex:0 0 40px;
}

/* bubble wrap */
.msg-bubble{
  max-width:min(72%, 720px);
  background:var(--bubble);
  padding:8px 10px;
  border-radius:10px;
  color:var(--text);
  font-size:14px;

  /* 🔥 evita que se salga */
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.msg-meta{
  font-size:11px;
  color:var(--muted);
  margin-top:4px;

  /* evita romper layout */
  max-width:min(72%, 720px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* my message (derecha) */
.message.me{
  flex-direction:row-reverse;
}

.message.me .msg-bubble{
  background:linear-gradient(180deg,var(--me),rgba(6,58,43,0.85));
  text-align:left; /* mejor legibilidad, si quieres derecha pon right */
}

/* ===== Composer ===== */
#composer{
  display:flex;
  gap:8px;
  border-radius:10px;
  padding:8px;
  background:var(--glass);
}

#input-message{
  flex:1;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:16px;
  padding:8px;
  outline:none;
  min-width:0;
}

#send-btn{
  background:var(--accent);
  color:#05221a;
  border:none;
  padding:10px 12px;
  border-radius:8px;
  font-weight:600;
  min-width:64px;
  cursor:pointer;
}

/* ===== Modal ===== */
#modal-backdrop{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(2,6,11,0.6);
}

#modal{
  width:92%;
  max-width:420px;
  border-radius:12px;
  overflow:hidden;
}

#modal-content{
  background:linear-gradient(180deg,#071018,#0b1a22);
  padding:18px;
  border-radius:12px;
  color:var(--text);
}

.hidden{display:none !important}

#modal h2{
  text-align:center;
  margin-bottom:12px;
  font-size:18px;
}

.field{display:block;margin-bottom:10px}

.field input{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.03);
  color:var(--text);
  outline:none;
}

.field input:focus{
  border-color: rgba(16,185,129,0.35);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.12);
}

.modal-actions{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:6px;
}

.modal-actions button{
  padding:10px 14px;
  border-radius:8px;
  border:none;
  background:var(--accent);
  color:#05221a;
  cursor:pointer;
}

/* ===== Mobile ===== */
@media (max-width:520px){
  #app{padding:8px}
  #sidebar{width:76px;padding:8px;min-width:76px}
  #avatar-preview{width:48px;height:48px}
  #name-preview{display:none}
  #groups-list .g-dot{width:40px;height:40px}
  #send-btn{min-width:48px;padding:8px}
  .msg-bubble{max-width:82%;}
}
#image-upload-form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.upload-button {
  background: var(--accent);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
}

.hidden {
  display: none;
}
/* Estilo para las imágenes subidas en el chat */
.uploaded-image {
  max-width: 100%;
  max-height: 300px; /* Puedes ajustar la altura máxima según lo que necesites */
  border-radius: 8px;
  margin-top: 10px;
}
/* Estilo para el botón de subir imagen */
.upload-button {
  background: var(--accent);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

/* Hacer que el campo de entrada de archivo esté oculto */
.hidden {
  display: none;
}

/* Estilos adicionales para cuando se pasa el ratón sobre el botón */
.upload-button:hover {
  background: var(--muted);
}
.uploaded-image {
  max-width: 100%;  /* Asegura que la imagen no se desborde del contenedor */
  max-height: 300px;  /* Establece una altura máxima para las imágenes */
  border-radius: 8px;  /* Da bordes redondeados a la imagen */
  margin-top: 10px;  /* Agrega espacio arriba de la imagen */
}
#main {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 12px;
}

#messages {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#image-upload-container {
  margin-top: 10px;  /* Espacio entre los mensajes y el botón */
  display: flex;
  gap: 10px;
  justify-content: center;  /* Centra el botón dentro del contenedor */
}

.upload-button {
  background: var(--accent);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

.upload-button:hover {
  background: var(--muted);
}

.hidden {
  display: none;
}

/* Asegurarse de que el input de archivos se muestra correctamente */
#input-message {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 16px;
  padding: 8px;
  outline: none;
}
@media (max-width: 520px) {
  #image-upload-container {
    flex-direction: column; /* Coloca el botón y el input uno debajo del otro */
    align-items: center;  /* Centra el contenido */
  }

  .upload-button {
    width: 100%;  /* Hace que el botón ocupe el 100% del ancho en móviles */
    padding: 12px;
  }
}
/* Estilos generales del contenedor principal */
#main {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px;
}

/* Contenedor de mensajes donde se mostrará el chat */
#messages {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Contenedor para el botón de carga de imágenes */
#image-upload-container {
  margin-top: 10px;  /* Espacio entre los mensajes y el botón */
  display: flex;
  justify-content: center; /* Centra el botón */
  gap: 10px;
}

.upload-button {
  background: var(--accent);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

.upload-button:hover {
  background: var(--muted);
}

/* Ocultar el campo de entrada de archivo */
.hidden {
  display: none;
}

/* Ajuste para el formulario de mensajes */
#input-message {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 16px;
  padding: 8px;
  outline: none;
}

/* Estilo para los mensajes en el chat */
.uploaded-image {
  max-width: 100%;  /* Ajusta el tamaño de las imágenes */
  max-height: 300px;
  border-radius: 8px;
  margin-top: 10px;
}