/* tooltip.css - Themed Version */

.tooltip {
    position: absolute;
    /* Reintroduce theme variables and color-mix */
    background-color: color-mix(in srgb, var(--background-color, #121212) 50%, transparent); /* Added fallback */
    color: var(--text-color, #e0e0e0); /* Added fallback */
    border: 1px solid color-mix(in srgb, var(--text-color, #e0e0e0) 30%, transparent); /* Added fallback */
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    /* --- End Theme Variables --- */
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 11px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    white-space: normal;
    max-width: 250px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Ensure all themed properties transition */
    transition: opacity 0.2s ease, visibility 0s linear 0.2s, background-color var(--transition-speed, 0.3s) ease, color var(--transition-speed, 0.3s) ease, border-color var(--transition-speed, 0.3s) ease;
}

.tooltip.visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s; /* Applies to opacity and visibility transitions */
}

/* Optional: Add focus styles for accessibility on triggers */
.tooltip-trigger:focus + .tooltip {
    /* You might want to show tooltip on focus too, requires JS changes */
    /* Or just add an outline to the trigger */
}
.tooltip-trigger:focus {
     outline: 2px solid var(--accent-color, #ff8c42);
     outline-offset: 2px;
     border-radius: 2px; /* Optional visual improvement */
}