#chat {
  max-height: 100%;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 10px;
  font-family: sans-serif;
  background-color: #f9f9f9;
}


/* Área de escritura --------------------------------------------------- */
#input{
  width:100%;
  padding:10px;
  font-size:1em;
  resize:none;          /* <‑‑ el usuario ya NO puede arrastrar el borde    */
 box-sizing:border-box;
}



.msg {
  margin: 4px 0;
  white-space: pre-wrap;
}

.hora {
  font-size: 0.75em;
  background-color: #ddd;
  border-radius: 5px;
  padding: 1px 6px;
  margin-right: 6px;
  color: #333;
}

/* Botones estilo index.html original */
.chat-controls {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-controls button {
  background-color: #212529;
  color: white;
  border: none;
  padding: 6px 12px;
  font-size: 0.9em;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.chat-controls button:hover {
  background-color: #343a40;
}









/* 1) El “container” dentro del chat ocupa todo el ancho y quita el padding de Bootstrap */
#chatContainer .container {
  width: 100% !important;
 max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
gap: 8px;
}


#galeriasecreta .container {
  width: 100% !important;
 max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
gap: 8px;
}




/* 2) Forzar que los botones estén en fila debajo del textarea */
.input-area {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px;
}
.button-container {
  display: left !important;
  gap: 8px;
}
.button-container button {
  flex: 1 1 auto;
}




#chat.chat{max-height:400px;overflow-y:auto;border:1px solid #ccc;padding:10px;margin-bottom:10px;}




.galeria-wrapper {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.galeria-contenedor {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0.7rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 3px 16px rgba(0,0,0,0.08);
  min-height: 180px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.imagen-principal {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 55vh;
  object-fit: contain;
  background: #222;
  border: none;
  margin: 0 auto;
  box-sizing: border-box;
}





.control-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.32);
  color: #fff;
  border: none;
  padding: 1.1rem 1.3rem;
  font-size: 2.3rem;
  cursor: pointer;
  z-index: 999;
  border-radius: 50%;
  transition: background 0.2s;
  opacity: 0.8;
  outline: none;
}
.control-btn:hover {
  background-color: rgba(0,0,0,0.57);
  opacity: 1;
}
.control-left {
  left: 0;
}
.control-right {
  right: 0;
}


.ocultar-btn {
  margin-top: 12px;
  margin-left: 8px;
  margin-bottom: 18px;
  display: block;
  align-self: flex-start;
}



@media (max-width: 767.98px) {
  .container, .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .galeria-contenedor {
    max-width: 100%;
    padding: 0.3rem;
    border-radius: 8px;
  }
  .imagen-principal {
    max-height: 32vh;
  }
}

/* Imagen nunca más grande que el contenedor real */
.imagen-principal {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 55vh;
  object-fit: contain;
  background: #222;
  border: none;
  margin: 0 auto;
  box-sizing: border-box;
}



.custom-file-upload {
  cursor: pointer;
  /* Mismo estilo de Bootstrap */
}
.custom-file-upload input[type="file"] {
  display: none;
}