/**
 * OptimismAI - Floating CTA Button Styles
 * FIXED: Fully responsive, no gray close background, smaller text
 * Positioned at the TOP (above Ask Richard and About)
 */

/* ========================================
   CSS Custom Properties (Design Tokens)
   ======================================== */
:root {
    /* OptimismAI Colors - Pink/Purple theme */
    --oacta-glow-color: rgba(232, 121, 249, 0.5);
    --oacta-glow-color-secondary: rgba(253, 186, 116, 0.5);
    --oacta-glow-color-strong: rgba(232, 121, 249, 0.8);
    --oacta-tooltip-bg: rgba(26, 26, 30, 0.95);
    --oacta-tooltip-text: #f5f5f7;
    --oacta-tooltip-shadow: rgba(0, 0, 0, 0.3);
    --oacta-border-glow: rgba(232, 121, 249, 0.4);

    /* Responsive sizing using vmin */
    --oacta-button-size: clamp(48px, 8vmin, 64px);
    /* TOP position - above About and Ask Richard */
    --oacta-offset-bottom: calc(clamp(16px, 3vmin, 24px) + (clamp(48px, 8vmin, 64px) + clamp(10px, 2vmin, 14px)) * 2);
    --oacta-offset-right: clamp(12px, 3vmin, 24px);

    /* Animation */
    --oacta-float-duration: 3.2s;
    --oacta-float-distance: 6px;
    --oacta-transition-speed: 0.3s;
}

/* ========================================
   CTA Wrapper
   ======================================== */
#optimism-ai-cta-wrapper {
    position: fixed;
    bottom: var(--oacta-offset-bottom);
    right: var(--oacta-offset-right);
    z-index: 999997;
    pointer-events: auto;
}

#optimism-ai-cta-wrapper~#optimism-ai-cta-wrapper {
    display: none !important;
}

/* ========================================
   Main CTA Button - RESPONSIVE CIRCULAR
   ======================================== */
.optimism-ai-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--oacta-button-size);
    height: var(--oacta-button-size);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: linear-gradient(145deg, #0a0a0a 0%, #1a1a1e 50%, #0a0a0a 100%);
    border: 2px solid var(--oacta-border-glow);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(232, 121, 249, 0.15),
        inset 0 0 20px rgba(232, 121, 249, 0.1);
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    text-decoration: none;
    outline: none;
    flex-shrink: 0;
    overflow: hidden;
    animation: oacta-float var(--oacta-float-duration) ease-in-out infinite;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

@keyframes oacta-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .optimism-ai-cta-button {
        animation: none;
    }
}

/* ========================================
   Glow Effect - Only appears on hover
   ======================================== */
.optimism-ai-cta-glow {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            rgba(232, 121, 249, 0.6) 0deg,
            rgba(253, 186, 116, 0.4) 120deg,
            rgba(232, 121, 249, 0.6) 240deg,
            rgba(253, 186, 116, 0.4) 360deg);
    /* Hidden by default - only shows on hover */
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Glow rotation animation - only when visible */
.optimism-ai-cta-button:hover .optimism-ai-cta-glow {
    opacity: 0.7;
    animation: oacta-glow-rotate 4s linear infinite;
}

@keyframes oacta-glow-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   Logo Image - RESPONSIVE
   ======================================== */
.optimism-ai-cta-logo {
    width: calc(var(--oacta-button-size) - 8px);
    height: calc(var(--oacta-button-size) - 8px);
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    aspect-ratio: 1 / 1;
    filter: brightness(1.05);
}

/* ========================================
   Tooltip - RESPONSIVE with SMALLER TEXT
   ======================================== */
.optimism-ai-cta-tooltip {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000000;
    background: var(--oacta-tooltip-bg);
    color: var(--oacta-tooltip-text);
    /* Responsive padding */
    padding: clamp(4px, 1vmin, 8px) clamp(24px, 4vmin, 36px) clamp(4px, 1vmin, 8px) clamp(8px, 2vmin, 14px);
    border-radius: clamp(4px, 1vmin, 8px);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    /* SMALLER TEXT */
    font-size: clamp(10px, 1.5vmin, 13px);
    font-weight: 500;
    white-space: nowrap;
    pointer-events: auto;
    box-shadow: 0 4px 16px var(--oacta-tooltip-shadow);
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.optimism-ai-cta-tooltip.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Tooltip arrow */
.optimism-ai-cta-tooltip::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: clamp(6px, 1vmin, 10px);
    height: clamp(6px, 1vmin, 10px);
    background: var(--oacta-tooltip-bg);
    z-index: -1;
}

/* ========================================
   Tooltip Close Button - NO BACKGROUND AT ALL
   ======================================== */
.optimism-ai-cta-tooltip-close {
    position: absolute;
    right: clamp(4px, 1vmin, 8px);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(12px, 2vmin, 18px);
    height: clamp(12px, 2vmin, 18px);
    display: flex;
    align-items: center;
    justify-content: center;
    /* COMPLETELY TRANSPARENT */
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
    padding: 0;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.optimism-ai-cta-tooltip-close:hover {
    opacity: 1;
}

/* Close icon image - show just the X */
.optimism-ai-cta-tooltip-close .close-icon {
    width: clamp(10px, 1.5vmin, 14px);
    height: clamp(10px, 1.5vmin, 14px);
    object-fit: contain;
    background: transparent !important;
    filter: brightness(0.6) contrast(1.2);
}

.optimism-ai-cta-tooltip-close:hover .close-icon {
    filter: brightness(0.9) contrast(1.2);
}

/* ========================================
   Hover States
   ======================================== */
.optimism-ai-cta-button:hover {
    animation-play-state: paused;
    transform: translateY(-3px) scale(1.08);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 0 4px var(--oacta-glow-color),
        0 0 30px 8px rgba(232, 121, 249, 0.3);
    border-color: var(--oacta-glow-color-strong);
}

.optimism-ai-cta-button:hover .optimism-ai-cta-logo {
    transform: scale(1.02);
}

/* ========================================
   Focus States
   ======================================== */
.optimism-ai-cta-button:focus {
    outline: none;
}

.optimism-ai-cta-button:focus-visible {
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 0 3px var(--oacta-glow-color-strong),
        0 0 0 6px rgba(255, 255, 255, 0.9);
}

/* ========================================
   Active State
   ======================================== */
.optimism-ai-cta-button:active {
    transform: translateY(0) scale(0.96);
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    #optimism-ai-cta-wrapper {
        display: none !important;
    }
}