/* ANIMA UI Crystal Toggle v1.0.0
   Purpose: one tiny always-visible crystal that hides the floating ANIMA UI layer. */

:root {
    --anima-crystal-size: 42px;
    --anima-crystal-right: 14px;
    --anima-crystal-bottom: 22px;
    --anima-crystal-z: 2147483000;
}

#anima-ui-crystal-toggle,
.anima-ui-crystal-toggle {
    position: fixed !important;
    right: var(--anima-crystal-right) !important;
    bottom: var(--anima-crystal-bottom) !important;
    z-index: var(--anima-crystal-z) !important;
    width: var(--anima-crystal-size) !important;
    height: var(--anima-crystal-size) !important;
    min-width: var(--anima-crystal-size) !important;
    min-height: var(--anima-crystal-size) !important;
    max-width: var(--anima-crystal-size) !important;
    max-height: var(--anima-crystal-size) !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.78) !important;
    border-radius: 15px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.96), rgba(255,255,255,.35) 28%, rgba(132,93,255,.62) 52%, rgba(38,22,93,.92) 100%) !important;
    box-shadow:
        0 10px 30px rgba(31, 16, 76, .34),
        0 0 18px rgba(170, 131, 255, .55),
        inset 0 0 12px rgba(255,255,255,.72) !important;
    color: #ffffff !important;
    font: 700 16px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    opacity: .96 !important;
    transform: translateZ(0) !important;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, filter .18s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

#anima-ui-crystal-toggle:hover,
#anima-ui-crystal-toggle:focus-visible {
    transform: translateY(-2px) scale(1.04) !important;
    opacity: 1 !important;
    filter: saturate(1.14) brightness(1.06) !important;
    box-shadow:
        0 14px 36px rgba(31, 16, 76, .42),
        0 0 24px rgba(178, 139, 255, .75),
        inset 0 0 14px rgba(255,255,255,.78) !important;
    outline: none !important;
}

#anima-ui-crystal-toggle:active {
    transform: translateY(0) scale(.97) !important;
}

#anima-ui-crystal-toggle .anima-ui-crystal-gem {
    display: block !important;
    font-size: 19px !important;
    line-height: 1 !important;
    text-shadow: 0 0 10px rgba(255,255,255,.85), 0 2px 8px rgba(41,23,101,.5) !important;
    pointer-events: none !important;
}

#anima-ui-crystal-toggle .anima-ui-crystal-text {
    position: absolute !important;
    right: calc(100% + 9px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    white-space: nowrap !important;
    padding: 6px 9px !important;
    border-radius: 999px !important;
    background: rgba(36, 24, 66, .86) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.18) !important;
    font-size: 11px !important;
    letter-spacing: .02em !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .14s ease, visibility .14s ease !important;
    pointer-events: none !important;
}

#anima-ui-crystal-toggle:hover .anima-ui-crystal-text,
#anima-ui-crystal-toggle:focus-visible .anima-ui-crystal-text {
    opacity: 1 !important;
    visibility: visible !important;
}

body.anima-ui-crystal-is-hidden #anima-ui-crystal-toggle {
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.98), rgba(255,255,255,.42) 26%, rgba(255,70,129,.72) 55%, rgba(89,14,60,.94) 100%) !important;
    box-shadow:
        0 10px 30px rgba(76, 16, 47, .32),
        0 0 18px rgba(255, 122, 172, .55),
        inset 0 0 12px rgba(255,255,255,.72) !important;
}

/* Core hiding behavior. JS marks targets with data-anima-ui-crystal-target="1". */
[data-anima-ui-crystal-target="1"].anima-ui-crystal-hidden,
.anima-ui-crystal-hidden[data-anima-ui-crystal-target="1"] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: scale(.92) !important;
    transition: opacity .16s ease, visibility .16s ease, transform .16s ease !important;
}

/* Hard safety: never hide the crystal itself. */
#anima-ui-crystal-toggle,
#anima-ui-crystal-toggle * {
    visibility: visible !important;
    pointer-events: auto !important;
}

@media (max-width: 767px) {
    :root {
        --anima-crystal-size: 39px;
        --anima-crystal-right: 10px;
        --anima-crystal-bottom: 14px;
    }

    #anima-ui-crystal-toggle .anima-ui-crystal-text {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #anima-ui-crystal-toggle,
    #anima-ui-crystal-toggle .anima-ui-crystal-text,
    [data-anima-ui-crystal-target="1"].anima-ui-crystal-hidden {
        transition: none !important;
    }
}
