.globe-with-avatars {
            position: relative;
            width: 100%;
            height: 100%;
            min-height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            --rotate: 10deg;
            --base-rotate: 10deg;
        }

        .globe-with-avatars__globe {
            position: relative;
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            aspect-ratio: 1;
        }

        .globe-with-avatars__globe__container {
            width: 100%;
            height: 100%;
            position: relative;
            cursor: grab;
            outline: none;
        }

        .globe-with-avatars__globe__container:active {
            cursor: grabbing;
        }

        .globe-with-avatars__globe__container canvas {
            width: 100%;
            height: 100%;
            display: block;
            /* border-radius: 50%; */
        }

        .globe-with-avatars__avatars {
            position: absolute;
            top: 0;
            left: 0;
            width: 99%;
            height: 99%;
            border-radius: 50%;
            overflow: hidden;
            pointer-events: none;
        }

        .globe-with-avatars__avatar-group {
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: center center;
            pointer-events: auto;
            --offset: 0.22em;
        }

        .globe-with-avatars__avatar-group--hide {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .globe-with-avatars__avatar-group--is-group {
            --offset: 50px;
            /* Fixed pixel value for consistent fan-out distance */
        }

        .globe-with-avatars__avatar-group--is-group .avatar--count {
            transition: opacity 0.3s ease;
        }

        .globe-with-avatars__avatar-group--expanded {
            opacity: 1;
            z-index: 1000 !important;
        }

        /* Avatar Container */
        .avatar-con {
            position: relative;
            width: 35px;
            height: 35px;
            --avatar-ix: 0;
            --avatar-rotate: 0deg;
            /* Size will be set dynamically via inline styles */
        }

        .avatar-con--group {
            position: relative;
            width: 35px;
            height: 35px;
            /* Size will be set dynamically via inline styles */
        }

        /* Avatar Button */
        .avatar {
            position: relative;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            border: none;
            padding: 0;
            cursor: pointer;
            overflow: hidden;
            background: transparent;
            transition:
                transform 0.2s ease,
                box-shadow 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            /* Size will be set dynamically via inline styles */
        }

        .avatar:hover {
            transform: scale(1.5);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 1000;
        }

        .avatar:focus {
            outline: none;
            outline-offset: none;
        }

        /* Avatar Image */
        .avatar__image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            display: block;
        }

        /* Avatar Content (shown on hover) */
        .avatar__content {
            position: absolute;
            bottom: -60px;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            padding: 8px 12px;
            border-radius: 8px;
            white-space: nowrap;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            opacity: 0;
            pointer-events: none;
            transition:
                opacity 0.2s ease,
                bottom 0.2s ease;
            z-index: 1001;
            min-width: 100px;
            text-align: center;
        }

        .avatar__content__flag {
            font-size: 20px;
            line-height: 1;
            margin-bottom: 4px;
        }

        .avatar__content__main {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin: 0;
            line-height: 1.2;
        }

        .avatar__content__sub {
            font-size: 12px;
            color: #666;
            margin: 2px 0 0 0;
            line-height: 1.2;
        }

        /* Avatar Color Variants */
        .avatar--pink {
            background: linear-gradient(135deg, #ff6b9d 0%, #ff8fb3 100%);
        }

        .avatar--peach {
            background: linear-gradient(135deg, #ffb88c 0%, #ffd4a3 100%);
        }

        .avatar--purple {
            background: linear-gradient(135deg, #a78bfa 0%, #c4b5fd 100%);
        }

        .avatar--secondary {
            background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 100%);
        }

        .avatar--tertiary {
            background: linear-gradient(135deg, #34d399 0%, #6ee7b7 100%);
        }

        .avatar--green {
            background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
        }

        /* Count Avatar (for groups) */
        .avatar--count {
            background: #6366f1;
            color: white;
            font-weight: 600;
            font-size: 14px;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .avatar--count .avatar__content {
            display: block !important;
            position: static !important;
            opacity: 1 !important;
            visibility: visible !important;
            background: transparent;
            box-shadow: none;
            padding: 0;
            margin: 0;
            min-width: auto;
            transform: none;
            bottom: auto;
            left: auto;
            font-size: 14px;
            font-weight: 600;
            color: white;
            line-height: 1;
            text-align: center;
        }

        .avatar--count .avatar__content__flag,
        .avatar--count .avatar__content__main,
        .avatar--count .avatar__content__sub {
            display: none;
        }

        /* Grouped Avatars - Circular Arrangement */
        .avatar-con--group .avatar-con {
            position: absolute;
            top: 50%;
            left: 50%;
            /* Start collapsed at center, fan out on hover */
            transform: translate(-50%, -50%) rotate(var(--avatar-rotate)) translateY(0) rotate(calc(-1 * var(--avatar-rotate)));
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition:
                opacity 0.3s ease,
                transform 0.3s ease,
                visibility 0.3s ease;
        }

        /* Show individual avatars on hover - fan out in circle */
        .globe-with-avatars__avatar-group--is-group:hover .avatar-con--group .avatar-con {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            /* Fan out from center using the offset */
            transform: translate(calc(cos(var(--avatar-index) * (360deg / var(--group-size))) * 45px),
                    calc(sin(var(--avatar-index) * (360deg / var(--group-size))) * 45px));
        }

        /* Hide count button on hover */
        .globe-with-avatars__avatar-group--is-group:hover .avatar--count {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .avatar-con--group .avatar {
            transition: transform 0.3s ease;
        }

        .avatar-con--group:hover .avatar {
            z-index: 1000;
        }

        /* Responsive Design */
        @media (max-width: 768px) {

            .avatar-con,
            .avatar {
                width: 35px;
                height: 35px;
            }

            .avatar__content {
                font-size: 12px;
                padding: 6px 10px;
            }
        }

        @media (max-width: 480px) {

            .avatar-con,
            .avatar {
                width: 35px;
                height: 35px;
            }

            .avatar__content {
                font-size: 11px;
                padding: 4px 8px;
                min-width: 80px;
            }
        }

        /* Avatar Group Hover Effects */
        .avatar-con--group {
            position: relative;
            transition: transform 0.3s ease;
        }

        .avatar-con--group:hover {
            z-index: 1000;
            /* Ensure group appears above others on hover */
        }

        .avatar-con--group:hover .avatar-con--individual {
            transform: translate(calc(cos(var(--avatar-index) * (360deg / var(--group-size))) * (45px)),
                    calc(sin(var(--avatar-index) * (360deg / var(--group-size))) * (45px)));
            opacity: 1;
            visibility: visible;
            transition: all 0.3s ease-out;
            transition-delay: calc(var(--avatar-index) * 0.05s);
        }

        .avatar-con--individual {
            opacity: 0;
            visibility: hidden;
            transform: translate(0, 0) scale(0.5);
            transition: all 0.2s ease-in;
            z-index: 100;
        }

        .avatar-con--individual:hover {
            z-index: 1000;
        }

        /* Count button hover effect */
        .avatar-con--group:hover .avatar--count {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        /* Individual avatar hover effects */
        .avatar-con--individual .avatar:hover {
            transform: scale(1.5);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        }

        /* Ensure avatars stay on top of globe */
        .globe-with-avatars__avatars {
            pointer-events: none;
            /* Let clicks pass through to globe */
        }

        .globe-with-avatars__avatars .avatar-con,
        .globe-with-avatars__avatars .avatar {
            pointer-events: auto;
            /* But allow interaction with avatars */
        }

        /* Smooth avatar movement when globe rotates */
        .globe-with-avatars__avatar-group {
            position: absolute;
            transition: transform 0.1s linear;
            will-change: transform;
        }

        /* Avatar visibility transitions */
        .globe-with-avatars__avatar-group {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 1;
            transition:
                opacity 0.3s ease-out,
                transform 0.1s linear,
                visibility 0.3s ease-out;
            will-change: transform, opacity;
            pointer-events: auto;
        }

        /* Hide invisible avatars completely */
        .globe-with-avatars__avatar-group[data-visible="false"] {
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
            transition: opacity 0.2s ease-in, visibility 0.2s ease-in 0.2s;
        }

        /* Smooth movement during dragging */
        .is-dragging .globe-with-avatars__avatar-group {
            transition: transform 0.05s linear, opacity 0.15s ease-out;
        }

        /* Ensure smooth appearance */
        .globe-with-avatars__avatar-group:not([data-visible="true"]) {
            opacity: 0;
            transform: scale(0.8);
        }