html, body { overscroll-behavior: none; }
* { scrollbar-width: thin; scrollbar-color: #2b3b4d transparent; }
textarea { field-sizing: content; }

/* Huecos publicitarios: reservan tamaño para que la página no salte al cargar */
.ad-slot { display: none; align-items: center; justify-content: center; background: #111b26; overflow: hidden; }
.ad-slot.on { display: flex; }
.ad-header { width: 100%; min-height: 50px; }
.ad-side { width: 250px; min-height: 250px; }
@media (min-width: 768px) { .ad-header { min-height: 90px; } }
.ad-slot .ad-ph { font-size: 11px; color: #5b6b7d; border: 1px dashed #2b3b4d; padding: 6px 10px; border-radius: 6px; }

/* Anuncio nativo dentro del chat */
.ad-native { border: 1px solid #243447; background: #111b26; border-radius: 12px; padding: 8px; margin: 6px 0; }
.ad-native small { color: #5b6b7d; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }

/* Mensajes */
.msg { max-width: 85%; }
.msg.me { margin-left: auto; }
.bubble { border-radius: 14px; padding: 6px 10px; background: #182533; word-break: break-word; }
.msg.me .bubble { background: #2b5278; }
.sys { text-align: center; font-size: 12px; color: #6b7c8f; padding: 2px 8px; }

/* Multimedia difuminada hasta que el usuario decide verla */
.media-wrap { position: relative; display: inline-block; overflow: hidden; border-radius: 10px; }
.media-wrap img, .media-wrap video { max-width: min(260px, 70vw); max-height: 260px; display: block; }
.media-wrap.blurred img, .media-wrap.blurred video { filter: blur(24px); pointer-events: none; }
.media-wrap .reveal { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.35); font-size: 13px; }
.media-wrap.blurred .reveal { display: flex; }
.flag { font-size: 11px; color: #6b7c8f; margin-left: 6px; cursor: pointer; }
.flag:hover { color: #fb7185; }

/* Onda de audio */
.wave { display: flex; align-items: center; gap: 2px; height: 28px; }
.wave i { display: block; width: 3px; border-radius: 2px; background: #7aa7d6; }
.audio-card { display: flex; align-items: center; gap: 8px; min-width: 180px; }
.audio-card button { width: 32px; height: 32px; border-radius: 9999px; background: #2b9af3; }

/* Las imágenes desbloqueadas se amplían a pantalla completa al tocarlas */
.media-wrap img { cursor: zoom-in; }
.media-wrap.blurred img { cursor: default; }