/**
 * Tooltip fixes for the chat widget
 * This ensures the tooltip appears correctly on hover
 */

/* Animation for tooltip slide-in */
@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateX(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) translateX(-10px);
    }
}

/* Force tooltip to show on hover with higher specificity - LEFT SIDE POSITIONING */
.vg-assistant-button:hover .vg-assistant-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) translateX(-10px) !important;
    z-index: 10000 !important;
    animation: slideInLeft 0.3s ease-out !important;
}

/* Enhanced tooltip styling - LEFT SIDE POSITIONING */
.vg-assistant-tooltip {
    position: absolute !important;
    top: 50% !important;
    right: calc(100% + 20px) !important;
    transform: translateY(-50%) !important;
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    color: #f8fafc !important;
    padding: 10px 16px !important;
    border-radius: 25px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 10000 !important;
    min-width: 140px !important;
    text-align: center !important;
}

/* Arrow for tooltip */
.vg-assistant-tooltip::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 100% !important;
    transform: translateY(-50%) !important;
    border: 6px solid transparent !important;
    border-left-color: #1e293b !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
}

/* Light theme tooltip */
[data-theme="light"] .vg-assistant-tooltip {
    background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
    color: #1a2130 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .vg-assistant-tooltip::before {
    border-left-color: #ffffff !important;
}

/* Dark theme tooltip */
[data-theme="dark"] .vg-assistant-tooltip {
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    color: #f8fafc !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .vg-assistant-tooltip::before {
    border-left-color: #1e293b !important;
}