/* Language Coach Mark Styles */

.lang-coach-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999998; /* Below the header elements but above everything else */
    pointer-events: none; /* Let clicks pass through except for backdrop */
    transition: opacity 0.25s ease-in-out;
    opacity: 0;
}

.lang-coach-overlay.visible {
    opacity: 1;
    pointer-events: auto; /* Catch taps to dismiss */
}

/* Transparent backdrop to catch clicks */
.lang-coach-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    cursor: pointer;
}

/* Soft animated pulse ring */
.lang-coach-ring {
    position: absolute;
    border-radius: 50%;
    background: var(--primary-color, #E05A10);
    opacity: 0;
    transform: scale(1);
    animation: langCoachPulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) 3 forwards;
    pointer-events: none;
    z-index: 999999;
}

@keyframes langCoachPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 0.4;
    }
}

/* Curved arrow */
.lang-coach-arrow {
    position: absolute;
    width: 24px;
    height: 24px;
    z-index: 999999;
    pointer-events: none;
    color: var(--primary-color, #E05A10); /* SVG stroke uses currentColor */
}

/* Speech bubble */
.lang-coach-bubble {
    position: absolute;
    background: white; /* Material design style */
    color: #1F2937; /* Dark text */
    padding: 12px 16px;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Soft shadow */
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    z-index: 999999;
    white-space: nowrap;
    opacity: 0;
    animation: langCoachFadeIn 0.25s ease-out forwards;
}

/* Ensure bubble works in dark mode if website uses dark theme */
html[data-theme="dark"] .lang-coach-bubble {
    background: #2D3748;
    color: #F7FAFC;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

@keyframes langCoachFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}