/* Shared by /Rank and /RankEffectsPreview; scoped to ranking news/video popups. */
.media-popup-preview .news-window,
.media-popup-preview .video-window { width: min(560px, calc(100vw - 24px)) !important; }
.media-popup-preview .media-popup-list { display: grid; gap: 12px; min-width: 0; }
.media-popup-preview .news-list-item,
.media-popup-preview .video-card-body {
    margin: 0;
    padding: 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: 1px solid var(--rfx-line);
    border-radius: 10px;
    background: var(--rfx-stripe);
    color: var(--rfx-text);
}
.media-popup-preview .news-item-content { display: grid; gap: 12px; min-width: 0; }
.media-popup-preview .news-item-header { display: grid; gap: 8px; background: transparent; color: inherit; }
.media-popup-preview .news-item-title,
.media-popup-preview .video-wrapper .box2 > p:first-child a {
    display: block;
    font-size: 16px;
    line-height: 1.65;
    font-weight: 600;
    color: var(--rfx-text);
    white-space: normal;
    overflow-wrap: anywhere;
    text-decoration: none;
}
.media-popup-preview .news-item-title:hover,
.media-popup-preview .video-wrapper .box2 > p:first-child a:hover { color: var(--rfx-accent); text-decoration: underline; }
.media-popup-preview .news-item-meta,
.media-popup-preview .video-wrapper .box3 { color: var(--rfx-muted); font-size: 12px; }
.media-popup-preview .news-item-footer { display: grid; gap: 12px; }
.media-popup-preview .news-source-tags,
.media-popup-preview .news-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.media-popup-preview .news-source-badge,
.media-popup-preview .news-tag,
.media-popup-preview .video-body .el-tag {
    display: inline-block;
    border-radius: 5px;
    background: var(--rfx-head);
    border: 1px solid var(--rfx-line);
    padding: 3px 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--rfx-accent);
    white-space: normal;
    overflow-wrap: anywhere;
}
.media-popup-preview .news-source-badge { color: var(--rfx-muted); background: var(--rfx-surface); }
.media-popup-preview .news-stats { padding-top: 10px; border-top: 1px solid var(--rfx-line); color: var(--rfx-muted); font-size: 12px; }
.media-popup-preview .stat-group { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
.media-popup-preview .video-wrapper { display: block; position: relative; min-width: 0; }
.media-popup-preview .video-wrapper .option-img-area { position: absolute; top: 0; right: 0; }
.media-popup-preview .video-wrapper .option-img { width: 20px; height: 20px; }
.media-popup-preview .video-wrapper:has(.option-img-area) .box2 > p:first-child { padding-right: 28px; }
.media-popup-preview .video-wrapper .box1,
.media-popup-preview .video-wrapper .box6 { display: none; }
.media-popup-preview .video-wrapper .box2 { padding: 0; min-width: 0; }
.media-popup-preview .video-wrapper p { margin: 0 0 10px; }
.media-popup-preview .video-wrapper .yt-contraction-area { display: flex; gap: 6px; flex-wrap: wrap; }
.media-popup-preview .video-container { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--rfx-head); }
.media-popup-preview .video-container iframe { display: block; width: 100%; height: 100%; border: 0; }
.media-popup-preview .video-wrapper .box3 { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; background: transparent; }
.media-popup-preview .video-wrapper .box3 p { margin: 0; }
.media-popup-preview .video-wrapper .box3 a { color: var(--rfx-muted); }
.media-popup-preview .video-wrapper .box4 { padding-top: 10px; margin-top: 12px; border-top: 1px solid var(--rfx-line); background: transparent; font-size: 12px; color: var(--rfx-muted); }
.media-popup-preview .video-body .chat-summary { margin-top: 12px; padding: 12px; background: var(--rfx-surface); border: 1px solid var(--rfx-line); border-radius: 8px; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.media-popup-preview .video-body .chat-summary img { max-width: 100%; height: auto; }
.media-popup-preview .video-body .chat-summary pre { white-space: pre-wrap; }
.media-popup-preview .media-popup-state { padding: 28px 16px; text-align: center; color: var(--rfx-muted); line-height: 1.7; }
.media-popup-preview .media-popup-state strong { display: block; color: var(--rfx-text); font-size: 15px; margin-bottom: 4px; }
.media-popup-preview .media-popup-retry { margin-top: 12px; padding: 6px 16px; border: 1px solid var(--rfx-line); border-radius: 6px; background: var(--rfx-head); color: var(--rfx-accent); }
.media-popup-preview .media-popup-spinner { display: block; width: 24px; height: 24px; border: 2px solid var(--rfx-line); border-top-color: var(--rfx-accent); border-radius: 50%; margin: 0 auto 12px; animation: media-popup-spin .8s linear infinite; }
@keyframes media-popup-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .media-popup-preview .media-popup-spinner { animation: none; } }
@media (max-width: 480px) {
    .media-popup-preview .news-window,.media-popup-preview .video-window { width: calc(100vw - 16px) !important; }
    .media-popup-preview .news-list-item,.media-popup-preview .video-card-body { padding: 12px; }
}