:root {
    --ios-spinner-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg%3E%3Crect x='14.6' y='2.4' width='2.8' height='8.2' rx='1.4' opacity='.18'/%3E%3Crect x='14.6' y='2.4' width='2.8' height='8.2' rx='1.4' opacity='.28' transform='rotate(45 16 16)'/%3E%3Crect x='14.6' y='2.4' width='2.8' height='8.2' rx='1.4' opacity='.38' transform='rotate(90 16 16)'/%3E%3Crect x='14.6' y='2.4' width='2.8' height='8.2' rx='1.4' opacity='.48' transform='rotate(135 16 16)'/%3E%3Crect x='14.6' y='2.4' width='2.8' height='8.2' rx='1.4' opacity='.60' transform='rotate(180 16 16)'/%3E%3Crect x='14.6' y='2.4' width='2.8' height='8.2' rx='1.4' opacity='.73' transform='rotate(225 16 16)'/%3E%3Crect x='14.6' y='2.4' width='2.8' height='8.2' rx='1.4' opacity='.86' transform='rotate(270 16 16)'/%3E%3Crect x='14.6' y='2.4' width='2.8' height='8.2' rx='1.4' transform='rotate(315 16 16)'/%3E%3C/g%3E%3C/svg%3E");
    --openai-spinner-mask: var(--ios-spinner-mask);
}

@keyframes ios-spinner-turn { to { transform: rotate(360deg); } }

/* Repeated root classes outrank page-local legacy loaders without changing visibility. */
:root:root :is(.ios-spinner, .spinner, .xspin, .xloader, .boot-ring, .sys-spinner, .status-spinner, .settings-btn-spinner, .apg-spin, .animate-spin, svg.spin, .fa-spinner, .fa-circle-notch, .vds-buffering-spinner, #contactForm[aria-busy="true"] .contact-send-arrow),
:root:root .buffering-spinner::after {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    background: currentColor !important;
    -webkit-mask: var(--ios-spinner-mask) center / contain no-repeat !important;
    mask: var(--ios-spinner-mask) center / contain no-repeat !important;
    -webkit-mask-composite: initial !important;
    mask-composite: initial !important;
    animation: ios-spinner-turn 800ms steps(8, end) infinite !important;
    transform-origin: center !important;
    flex-shrink: 0;
    vertical-align: middle;
}

.ios-spinner { display: inline-block; width: 36px; height: 36px; color: var(--spinner-color, var(--accent, currentColor)); }
:root:root :is(svg.spin, svg.animate-spin, .vds-buffering-spinner) > *,
:root:root :is(.fa-spinner, .fa-circle-notch)::before { visibility: hidden !important; }
:root:root #contactForm[aria-busy="true"] .contact-send-arrow { font-size: 0; }

@media (prefers-reduced-motion: reduce) {
    :root:root :is(.ios-spinner, .spinner, .xspin, .xloader, .boot-ring, .sys-spinner, .status-spinner, .settings-btn-spinner, .apg-spin, .animate-spin, svg.spin, .fa-spinner, .fa-circle-notch, .vds-buffering-spinner, #contactForm[aria-busy="true"] .contact-send-arrow),
    :root:root .buffering-spinner::after { animation: none !important; }
}