CHATSPACE

CHATSPACE

#chat-box { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; background-color: #0b141a; /* Usamos el filtro de 0.6 para que se vea un poquito más la imagen pero sin tapar el texto */ background-image: linear-gradient(rgba(11, 20, 26, 0.7), rgba(11, 20, 26, 0.7)), url('./assets/logo.webp'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; } /* Contenedor general de la burbuja */ /* MENSAJE ENVIADO (DERECHA) - Verde Transparente */ /* Contenedor general de la burbuja */ .msg-burbuja { max-width: 85%; padding: 6px 15px; border-radius: 18px; font-size: 15px; min-height: auto position: relative; word-wrap: break-word; margin: 4px 0; /* Bajamos la sombra para que no ensucie la transparencia */ box-shadow: 0 4px 15px rgba(0,0,0,0.2); white-space: pre-wrap; /* ESTO ES CLAVE: El efecto de vidrio empañado */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* ... (todo tu código anterior se queda igual) ... */ display: flex; flex-direction: column; /* Texto arriba, info abajo */ } .msg-info { align-self: flex-end; /* Empuja la hora y checks a la derecha */ font-size: 10px; opacity: 0.7; margin-top: 2px; margin-left: 10px; /* Separación mínima del texto */ display: flex; align-items: center; gap: 3px; /* Espacio entre hora y checks */ } .checks { color: #4fc3f7; /* Color azulito claro para el visto */ } /* MENSAJE ENVIADO (DERECHA) */ .msg-derecha { align-self: flex-end; /* Cambiamos a RGBA: el 0.5 es 50% transparente */ background: linear-gradient(135deg, rgba(0, 92, 75, 0.5) 0%, rgba(0, 77, 64, 0.5) 100%); color: #ffffff; border-bottom-right-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.1); /* Un borde finito para que se note el corte */ } /* MENSAJE RECIBIDO (IZQUIERDA) */ .msg-izquierda { align-self: flex-start; /* Gris oscuro al 50% de transparencia */ background: rgba(32, 44, 51, 0.5); color: #ffffff; border-bottom-left-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.1); } /* Hora y Checks */ .status { font-size: 11px; float: right; margin: 8px -4px -4px 12px; opacity: 0.8; /* Le subí un poco la opacidad para que se lea sobre Goku */ font-weight: 300; } #msg-text { flex: 1; /* Que ocupe todo el espacio central */ background: #2a2a2a; /* Color de fondo gris oscuro, como tus burbujas */ color: white; /* Letra blanca */ border-radius: 20px; /* Bordes redondeados y suaves */ padding: 10px 15px; /* Espacio interno para que el texto no esté pegado */ border: none; /* Sin el borde cuadrado y feo */ outline: none; /* Que no se ponga azul al hacer clic */ font-family: inherit; /* Misma fuente que el resto del chat */ resize: none; /* Quita la esquina para agrandar que traen los textarea */ min-height: 40px; /* Altura inicial bajita */ max-height: 120px; /* Que no crezca hasta tapar todo */ overflow-y: auto; /* Si el mensaje es muy largo, sale scroll interno */ margin: 0 5px; /* Un pelín de separación con el ID y el botón */ } .menu-mensaje { position: absolute; background: #2a3942; border: 1px solid #ffd700; border-radius: 10px; padding: 5px 0; z-index: 20000; box-shadow: 0 4px 15px rgba(0,0,0,0.5); display: none; /* Se activa con JS */ } .menu-mensaje div { padding: 10px 20px; color: white; font-size: 14px; cursor: pointer; } .menu-mensaje div:hover { background: #3b4a54; } #mi-id-display { font-size: 11px; color: #ffd700; margin-top: 5px; font-family: monospace; } .btn-qr-dropis { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background: #ffd700; border: none; border-radius: 50%; width: 35px; height: 35px; cursor: pointer; font-size: 18px; } .msg-burbuja[data-enviado="3"]::after { content: " ✓✓"; font-size: 10px; color: #34b7f1; } /* MODALES */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 10000; justify-content: center; align-items: center; /* Añadimos esto para la suavidad */ transition: all 0.5s ease; animation: fadeIn 0.5s; } .modal-content { background: #fff; padding: 25px; border-radius: 20px; width: 85%; max-width: 320px; text-align: center; color: #333; /* Opcional: que el cuadrito también suba un poquito al aparecer */ animation: slideUp 0.5s; } /* Las reglas de las animaciones (van afuera de las llaves) */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }