:root {
    --thinking-orb-ink: #022f40;
    --thinking-orb-blue: #2563eb;
    --thinking-orb-cyan: #22d3ee;
    --thinking-orb-mint: #2dd4bf;
}

.thinking-orb {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 45%, rgba(219, 234, 254, .48), transparent 34%),
        rgba(248, 250, 252, .76);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    backdrop-filter: blur(10px) saturate(115%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease;
}

.thinking-orb.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.thinking-orb__panel {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(126px, auto) 10px;
    align-items: center;
    gap: 15px;
    min-width: min(310px, calc(100vw - 48px));
    padding: 13px 17px 13px 14px;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, .08), transparent 38%),
        linear-gradient(135deg, #031f2a 0%, var(--thinking-orb-ink) 58%, #063e50 100%);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 24px;
    box-shadow:
        0 24px 70px rgba(2, 47, 64, .24),
        0 6px 20px rgba(15, 23, 42, .14),
        inset 0 1px 0 rgba(255, 255, 255, .12);
    transform: translateY(8px) scale(.97);
    transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
}

.thinking-orb.is-visible .thinking-orb__panel {
    transform: translateY(0) scale(1);
}

.thinking-orb__panel::before {
    content: "";
    position: absolute;
    inset: -80% 40% -80% -20%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .08), transparent);
    transform: translateX(-65%) rotate(12deg);
    animation: thinking-orb-sheen 2.8s ease-in-out infinite;
}

.thinking-orb__visual {
    position: relative;
    width: 58px;
    height: 58px;
    isolation: isolate;
    filter: drop-shadow(0 8px 18px rgba(34, 211, 238, .2));
}

.thinking-orb__sphere,
.thinking-orb__core {
    position: absolute;
    border-radius: 50%;
}

.thinking-orb__sphere {
    inset: 5px;
    background-color: transparent;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .9) 0 1px, transparent 1.35px),
        radial-gradient(circle at 32% 28%, rgba(34, 211, 238, .95), transparent 42%),
        radial-gradient(circle at 72% 70%, rgba(37, 99, 235, .8), transparent 48%);
    background-size: 6px 6px, 100% 100%, 100% 100%;
    border: 1px solid rgba(125, 211, 252, .25);
    -webkit-mask-image: radial-gradient(circle, #000 46%, transparent 72%);
    mask-image: radial-gradient(circle, #000 46%, transparent 72%);
    mix-blend-mode: screen;
}

.thinking-orb__sphere--one {
    animation: thinking-orb-spin 2.4s linear infinite;
}

.thinking-orb__sphere--two {
    inset: 9px 2px;
    opacity: .72;
    transform: rotateX(64deg) rotateZ(18deg);
    animation: thinking-orb-cross 1.9s linear infinite reverse;
}

.thinking-orb__sphere--three {
    inset: 2px 10px;
    opacity: .6;
    transform: rotateY(65deg) rotateZ(-24deg);
    animation: thinking-orb-rise 2.1s ease-in-out infinite;
}

.thinking-orb__core {
    inset: 19px;
    z-index: -1;
    background: #67e8f9;
    box-shadow:
        0 0 12px rgba(103, 232, 249, .8),
        0 0 28px rgba(37, 99, 235, .65);
    animation: thinking-orb-breathe 1.45s ease-in-out infinite;
}

.thinking-orb__copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2px;
}

.thinking-orb__eyebrow {
    color: rgba(186, 230, 253, .72);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.thinking-orb__copy strong {
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.thinking-orb__pulse {
    position: relative;
    z-index: 1;
    width: 6px;
    height: 6px;
    background: var(--thinking-orb-mint);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(45, 212, 191, .55);
    animation: thinking-orb-pulse 1.5s ease-out infinite;
}

body.cesd-is-loading {
    cursor: progress;
}

@keyframes thinking-orb-spin {
    to { transform: rotate(360deg); }
}

@keyframes thinking-orb-cross {
    from { transform: rotateX(64deg) rotateZ(18deg); }
    to { transform: rotateX(64deg) rotateZ(378deg); }
}

@keyframes thinking-orb-rise {
    0%, 100% { transform: rotateY(65deg) rotateZ(-24deg) translateY(1px); }
    50% { transform: rotateY(65deg) rotateZ(156deg) translateY(-2px); }
}

@keyframes thinking-orb-breathe {
    0%, 100% { opacity: .68; transform: scale(.75); }
    50% { opacity: 1; transform: scale(1.12); }
}

@keyframes thinking-orb-pulse {
    0% { box-shadow: 0 0 0 0 rgba(45, 212, 191, .55); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(45, 212, 191, 0); }
}

@keyframes thinking-orb-sheen {
    0%, 22% { transform: translateX(-65%) rotate(12deg); }
    62%, 100% { transform: translateX(235%) rotate(12deg); }
}

@media (max-width: 480px) {
    .thinking-orb {
        padding: 18px;
    }

    .thinking-orb__panel {
        grid-template-columns: 52px minmax(0, 1fr) 8px;
        gap: 12px;
        min-width: 0;
        width: min(100%, 304px);
        border-radius: 21px;
    }

    .thinking-orb__visual {
        width: 52px;
        height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .thinking-orb,
    .thinking-orb__panel {
        transition: none;
    }

    .thinking-orb__panel::before,
    .thinking-orb__sphere,
    .thinking-orb__core,
    .thinking-orb__pulse {
        animation: none !important;
    }

    .thinking-orb__sphere--one { transform: rotate(24deg); }
    .thinking-orb__sphere--two { transform: rotateX(64deg) rotateZ(18deg); }
    .thinking-orb__sphere--three { transform: rotateY(65deg) rotateZ(-24deg); }
}
