/**
 * Ask Richard AI - Floating CTA Button Styles
 * FIXED: Fully responsive, no gray close background, smaller text
 */

/* ========================================
   CSS Custom Properties (Design Tokens)
   ======================================== */
:root {
    /* Colors */
    --arcta-glow-color: rgba(184, 149, 106, 0.6);
    --arcta-glow-color-strong: rgba(184, 149, 106, 0.9);
    --arcta-tooltip-bg: rgba(26, 26, 30, 0.95);
    --arcta-tooltip-text: #f5f5f7;
    --arcta-tooltip-shadow: rgba(0, 0, 0, 0.3);
    --arcta-border-glow: rgba(184, 149, 106, 0.3);

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

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

/* ========================================
   CTA Wrapper
   ======================================== */
#ask-richard-cta-wrapper {
    position: fixed;
    bottom: var(--arcta-offset-bottom);
    right: var(--arcta-offset-right);
    z-index: 999998;
    pointer-events: auto;
}

#ask-richard-cta-wrapper~#ask-richard-cta-wrapper {
    display: none !important;
}

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

@keyframes arcta-float {

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

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

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

/* ========================================
   Glow Effect
   ======================================== */
.ask-richard-cta-glow {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--arcta-glow-color) 0%, transparent 70%);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}

/* ========================================
   Avatar Image - RESPONSIVE
   ======================================== */
.ask-richard-cta-avatar {
    width: calc(var(--arcta-button-size) - 8px);
    height: calc(var(--arcta-button-size) - 8px);
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    aspect-ratio: 1 / 1;
}

/* ========================================
   Tooltip - RESPONSIVE with SMALLER TEXT
   ======================================== */
.ask-richard-cta-tooltip {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--arcta-tooltip-bg);
    color: var(--arcta-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(--arcta-tooltip-shadow);
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ask-richard-cta-tooltip.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Tooltip arrow */
.ask-richard-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(--arcta-tooltip-bg);
    z-index: -1;
}

/* ========================================
   Tooltip Close Button - NO BACKGROUND AT ALL
   ======================================== */
.ask-richard-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;
}

.ask-richard-cta-tooltip-close:hover {
    opacity: 1;
}

/* Close icon image - show just the X */
.ask-richard-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);
}

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

/* ========================================
   Hover States
   ======================================== */
.ask-richard-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(--arcta-glow-color),
        0 0 30px 8px rgba(184, 149, 106, 0.25);
    border-color: var(--arcta-glow-color-strong);
}

.ask-richard-cta-button:hover .ask-richard-cta-glow {
    opacity: 0.6;
}

.ask-richard-cta-button:hover .ask-richard-cta-avatar {
    transform: scale(1.02);
}

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

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

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

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