/* Reel gradient ring (Instagram-style for reels) */
.reel-ring {
    display: inline-block;
    padding: 3px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0095f6, #00d4ff, #0095f6);
}

.reel-ring.viewed {
    background: linear-gradient(135deg, #c7c7c7, #a0a0a0);
}

.reel-thumbnail {
    display: block;
    width: 120px;
    height: 194px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #fff;
    background-color: #fff;
}

.reel-ring.viewed .reel-thumbnail {
    opacity: 0.7;
}

/* Common preview styling (video and GIF) */
.reel-preview {
    display: block;
    width: 120px;
    height: 194px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #fff;
    background-color: #000;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.reel-preview.active {
    opacity: 1;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0095f6;
}

.reel-ring.viewed .reel-preview {
    opacity: 0.4;
}

.reel-ring.viewed .reel-preview.active {
    opacity: 0.7;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #a0a0a0;
}

/* Legacy video preview styling */
.reel-video-preview:not(.reel-preview) {
    display: block;
    width: 120px;
    height: 194px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #fff;
    background-color: #000;
}

.reel-ring.viewed .reel-video-preview:not(.reel-preview) {
    opacity: 0.7;
}

.reel-video-preview.playing {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0095f6;
}

.reel-ring.viewed .reel-video-preview.playing {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #a0a0a0;
}

/* Legacy class for backwards compatibility */
.imaged.reel {
    width: 120px !important;
    height: 194px !important;
    object-fit: cover;
    border-radius: 10px;
}

/* Reel scroll item styling */
.reel-scroll .scroll-item {
    display: block;
}

/* Dark mode overrides for reel rings */
body.dark-mode-active .reel-thumbnail {
    border-color: #0F1C2F;
    background-color: #0F1C2F;
}

/* Dark mode for common preview */
body.dark-mode-active .reel-preview {
    border-color: #0F1C2F;
}

body.dark-mode-active .reel-preview.active {
    box-shadow: 0 0 0 2px #0F1C2F, 0 0 0 4px #0095f6;
}

body.dark-mode-active .reel-ring.viewed .reel-preview.active {
    box-shadow: 0 0 0 2px #0F1C2F, 0 0 0 4px #555;
}

/* Dark mode for legacy video preview */
body.dark-mode-active .reel-video-preview:not(.reel-preview) {
    border-color: #0F1C2F;
}

body.dark-mode-active .reel-video-preview.playing {
    box-shadow: 0 0 0 2px #0F1C2F, 0 0 0 4px #0095f6;
}

body.dark-mode-active .reel-ring.viewed .reel-video-preview.playing {
    box-shadow: 0 0 0 2px #0F1C2F, 0 0 0 4px #555;
}