/* Media preview styles for chat, posts, profiles and shorts
	 Provides compact thumbnails and a fullscreen lightbox overlay.
*/

.msg-media { display: inline-block; vertical-align: middle; margin: 6px 6px 6px 0; }
.msg-media img.msg-media-thumb { max-width: 220px; max-height: 160px; border-radius: 6px; display: block; cursor: zoom-in; object-fit: cover; }
.msg-media video.msg-video-thumb { max-width: 480px; max-height: 320px; border-radius: 6px; display: block; cursor: pointer; background: #000; }
.msg-media iframe.msg-media-iframe { width: 480px; height: 270px; border-radius: 6px; display: block; }
.msg-audio { display: block; margin: 6px 0; }

/* Small / compact previews used in lists */
.msg-media.compact img.msg-media-thumb { max-width: 120px; max-height: 90px; }
.msg-media.compact video.msg-video-thumb { max-width: 160px; max-height: 120px; }

/* Lightbox overlay */
#moodsync-lightbox-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.92); display: none; align-items: center; justify-content: center; z-index: 99999; }
#moodsync-lightbox-overlay.active { display: flex; }
#moodsync-lightbox-overlay .lb-inner { max-width: 95%; max-height: 95%; }
#moodsync-lightbox-overlay img, #moodsync-lightbox-overlay video, #moodsync-lightbox-overlay iframe { max-width: 100%; max-height: 100%; border-radius: 6px; }
#moodsync-lightbox-overlay .lb-close { position: absolute; top: 18px; right: 20px; color: #fff; font-size: 28px; cursor: pointer; }

/* responsive adjustments */
@media (max-width: 640px) {
	.msg-media img.msg-media-thumb, .msg-media video.msg-video-thumb { max-width: 100%; height: auto; }
	.msg-media iframe.msg-media-iframe { width: 100%; height: auto; }
}

/* simple live badge overlay for shorts and thumbnails */
.live-badge { position: absolute; top: 8px; left: 8px; background: #e53935; color: #fff; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: bold; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.media-thumb-wrap { position: relative; display: inline-block; }

/* accessibility focus */
.msg-media:focus { outline: 3px solid rgba(100,150,255,0.5); }