/* BeyondMed Meet — only the two camera/join loading animations.
   The rest of the in-room interface still uses MiroTalk's existing themes. */
#loadingDiv {
    color: #f8fbff;
    background:
        radial-gradient(circle at 50% 0%, rgba(12, 143, 249, 0.12), transparent 57%),
        linear-gradient(155deg, rgba(19, 28, 45, .98), rgba(12, 19, 33, .98));
    border: 1px solid rgba(12, 143, 249, .2);
    box-shadow: 0 22px 68px rgba(0, 7, 21, .36), inset 0 1px rgba(255,255,255,.035);
}
#loadingDiv h1 {
    color: #f9fbff;
    text-shadow: 0 2px 18px rgba(12, 143, 249, .1);
}
#loadingDiv p,
#loadingDiv pre {
    color: #cbd7e7;
}

#loadingDiv .spinner-ring,
#initVideoLoader .spinner-ring {
    border-color: rgba(12, 143, 249, 0.16);
    border-top-color: #F37006;
    box-shadow: 0 0 28px rgba(243, 112, 6, .09);
}
#loadingDiv .spinner-ring::before,
#initVideoLoader .spinner-ring::before {
    border-color: rgba(243, 112, 6, 0.12);
    border-top-color: #0C8FF9;
}
#loadingDiv .spinner-logo,
#initVideoLoader .spinner-logo {
    width: 68px;
    height: 68px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(12, 143, 249, 0.18));
}

@media (prefers-reduced-motion: reduce) {
    #loadingDiv .spinner-ring,
    #loadingDiv .spinner-ring::before,
    #initVideoLoader .spinner-ring,
    #initVideoLoader .spinner-ring::before,
    #loadingDiv .spinner-logo,
    #initVideoLoader .spinner-logo {
        animation-duration: 5s;
    }
}