:root {
    /* تم توحيد الشفافية لجميع المستطيلات لتدور كجسم واحد */
    --openai-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' transform='rotate(0 16 16)'/%3E%3Crect x='14.6' y='2.4' width='2.8' height='8.2' rx='1.4' transform='rotate(45 16 16)'/%3E%3Crect x='14.6' y='2.4' width='2.8' height='8.2' rx='1.4' transform='rotate(90 16 16)'/%3E%3Crect x='14.6' y='2.4' width='2.8' height='8.2' rx='1.4' transform='rotate(135 16 16)'/%3E%3Crect x='14.6' y='2.4' width='2.8' height='8.2' rx='1.4' transform='rotate(180 16 16)'/%3E%3Crect x='14.6' y='2.4' width='2.8' height='8.2' rx='1.4' transform='rotate(225 16 16)'/%3E%3Crect x='14.6' y='2.4' width='2.8' height='8.2' rx='1.4' 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");
}

@keyframes openaiSpinnerRotate {
    to { transform: rotate(360deg); }
}

/* ---- Canonical class + all legacy spinner classes across the app ---- */
.ios-spinner,
.spinner,
.xspin,
.xloader,
.boot-ring,
.sys-spinner {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    background: currentColor !important;
    -webkit-mask: var(--openai-spinner-mask) center / contain no-repeat !important;
    mask: var(--openai-spinner-mask) center / contain no-repeat !important;
    -webkit-mask-composite: initial !important;
    mask-composite: initial !important;
    /* دوران سلس مستمر لمدة ثانية واحدة */
    animation: openaiSpinnerRotate 1s linear infinite !important;
}

/* Default size if the element has none */
.ios-spinner {
    display: inline-block;
    width: 36px;
    height: 36px;
    color: rgba(255, 255, 255, 0.85);
}

/* ---- Video player buffering loader ---- */
.buffering-spinner::after {
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    -webkit-mask: var(--openai-spinner-mask) center / contain no-repeat !important;
    mask: var(--openai-spinner-mask) center / contain no-repeat !important;
    -webkit-mask-composite: initial !important;
    mask-composite: initial !important;
    animation: openaiSpinnerRotate 1s linear infinite !important;
    filter: none !important;
}

/* ---- SVG-based spinners (verify pages, register button) ---- */
svg.spin,
svg.animate-spin {
    background: currentColor !important;
    -webkit-mask: var(--openai-spinner-mask) center / contain no-repeat !important;
    mask: var(--openai-spinner-mask) center / contain no-repeat !important;
    animation: openaiSpinnerRotate 1s linear infinite !important;
    border-radius: 0 !important;
}

svg.spin > *,
svg.animate-spin > * {
    display: none !important;
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .ios-spinner,
    .spinner,
    .xspin,
    .xloader,
    .boot-ring,
    .sys-spinner,
    .buffering-spinner::after,
    svg.spin,
    svg.animate-spin {
        /* إبطاء الحركة لمن يفضلون تقليل الحركة في النظام */
        animation-duration: 2s !important;
    }
}