/* Shared by contact/video cards, their dialogs, and admin previews. */
.contact-directory-scroll .contact-card-icon,
.contact-modal .contact-detail-icon,
.contact-platforms .video-platform-icon,
.media-modal .media-detail-icon,
:is(#contact-list-container, #media-list-container) :is(.contact-icon-preview, .media-icon-preview) {
    --icon-accent: var(--contact-icon-color, #65d9ff);
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: visible;
    color: var(--icon-accent);
    background: #10243d;
    border: 1px solid var(--icon-accent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--icon-accent) 24%, transparent),
        inset 0 0 10px color-mix(in srgb, var(--icon-accent) 10%, transparent);
    transition: none;
}

.contact-card-icon::after,
.contact-detail-icon::after,
.contact-icon-preview::after,
.video-platform-icon::after,
.media-detail-icon::after,
.media-icon-preview::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 20px color-mix(in srgb, var(--icon-accent) 44%, transparent);
    opacity: 0;
    transition: opacity 220ms ease-out;
}

.contact-card-item:is(:hover, :focus-visible) .contact-card-icon::after,
.contact-icon-preview:hover::after,
.video-platform-card:is(:hover, :focus-visible) .video-platform-icon::after,
.media-icon-preview:hover::after {
    opacity: 1;
}

.contact-directory-scroll .contact-card-item,
.contact-platforms .video-platform-card {
    border-color: color-mix(in srgb, var(--contact-icon-color, #65d9ff) 28%, #20334a);
    box-shadow: inset 0 0 12px color-mix(in srgb, var(--contact-icon-color, #65d9ff) 5%, transparent);
}

.contact-directory-scroll .contact-card-item:is(:hover, :focus-visible),
.contact-platforms .video-platform-card:is(:hover, :focus-visible) {
    border-color: var(--contact-icon-color, #65d9ff);
}

:is(#contact-list-container, #media-list-container) :is(.contact-icon-preview, .media-icon-preview) {
    width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 0;
    margin: 10px 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

:is(#contact-list-container, #media-list-container) :is(.contact-icon-preview, .media-icon-preview):empty {
    display: none;
}

:is(#contact-list-container, #media-list-container) :is(.contact-icon-preview, .media-icon-preview) .icon-preview-svg {
    width: 28px;
    height: 28px;
    color: inherit;
}

:is(#contact-list-container, #media-list-container) :is(.contact-icon-preview, .media-icon-preview) :is(svg, img) {
    width: 28px;
    height: 28px;
    max-width: 100%;
    object-fit: contain;
}

/* Preserve transparent cut-outs and stroke-only SVGs; image assets stay original. */
:is(.contact-card-icon, .contact-detail-icon, .contact-icon-preview, .video-platform-icon, .media-detail-icon, .media-icon-preview) svg {
    color: var(--contact-icon-color, #65d9ff);
    fill: currentColor;
}

:is(.contact-card-icon, .contact-detail-icon, .contact-icon-preview, .video-platform-icon, .media-detail-icon, .media-icon-preview) svg [fill]:not([fill="none"]) {
    fill: currentColor !important;
}

:is(.contact-card-icon, .contact-detail-icon, .contact-icon-preview, .video-platform-icon, .media-detail-icon, .media-icon-preview) svg [stroke]:not([stroke="none"]),
:is(.contact-card-icon, .contact-detail-icon, .contact-icon-preview, .video-platform-icon, .media-detail-icon, .media-icon-preview) svg[stroke]:not([stroke="none"]) {
    stroke: currentColor !important;
}

:is(.contact-card-icon, .contact-detail-icon, .contact-icon-preview, .video-platform-icon, .media-detail-icon, .media-icon-preview) svg [fill="none"],
:is(.contact-card-icon, .contact-detail-icon, .contact-icon-preview, .video-platform-icon, .media-detail-icon, .media-icon-preview) svg[fill="none"] {
    fill: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .contact-card-icon::after,
    .contact-detail-icon::after,
    .contact-icon-preview::after,
    .video-platform-icon::after,
    .media-detail-icon::after,
    .media-icon-preview::after {
        transition: none;
    }
}

/* Keep the configured accent on hover, overriding legacy platform SVG colors. */
.contact-platforms .video-platform-card .video-platform-icon svg {
    color: var(--contact-icon-color, #65d9ff);
}