/* Glass-Note Tooltip Styles */
/* Apple-style translucent glass tooltips for French vocabulary */

:root {
    --tooltip-bg: rgba(255, 255, 255, 0.95);
    --tooltip-border: rgba(255, 255, 255, 0.6);
    --tooltip-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08);
    --tooltip-glow: 0 0 20px rgba(10, 102, 255, 0.1);
    --tooltip-radius: 16px;
    --tooltip-nub-size: 12px;
    --tooltip-nub-height: 8px;
    --tooltip-max-width: 360px; /* Increased from 280px to prevent unnecessary wrapping */
    --tooltip-padding: 24px;
    --tooltip-z-index: 1000;
    --transition-opening: 700ms; /* Smooth, premium feel */
    --transition-closing: 450ms; /* Slightly faster close for responsiveness */
    --easing-opening: cubic-bezier(0.4, 0, 0.2, 1); /* Match button premium easing */
    --easing-closing: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth closing */
}

/* Trigger styling for French vocabulary words */
.french-word {
    /* Underlines are disabled so tooltip triggers inherit the cleaner
       headline styling. Visual affordances are provided by the themed
       background/highlight rules in styles.css. */
    text-decoration: none !important;
    cursor: pointer;
    color: inherit !important; /* Inherit color from parent to match surrounding text */
    
    /* CRITICAL: Static positioning - no relative/absolute to prevent layout shifts */
    position: static !important;
    
    /* CRITICAL: Inline-block with vertical-align to prevent text reflow */
    display: inline-block !important;
    vertical-align: baseline !important;
    
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    
    /* CRITICAL: box-sizing prevents layout shifts from border/padding changes */
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    
    /* Enhanced visibility for clickable word groups - makes them pop */
    /* Pill-shaped design matching search bar with glass morphism */
    border: 1px solid rgba(15, 23, 42, 0.15) !important; /* Match search bar border style */
    background: rgba(255, 255, 255, 0.7) !important; /* Glass morphism background matching search bar */
    /* Backdrop blur removed for testing */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 20px !important; /* Pill-shaped matching search bar */
    padding: 2px 8px !important; /* Tighter vertical padding for horizontal emphasis */
    margin: 0 1px !important; /* Tighter grouping for visual cohesion */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; /* Inner highlight only - no outer shadows */
    
    /* Match VocaMatch button typography */
    font-size: 17px !important; /* Increased from 15px for better readability on desktop */
    font-weight: 400 !important; /* Match summary text font-weight */
    letter-spacing: normal !important; /* Match button letter-spacing */
    line-height: normal !important; /* Match button line-height */
    color: inherit !important; /* Inherit color from parent to match summary-text */
    
    /* Premium smooth transitions - slower and more refined */
    transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Enable native touch behaviors */
    touch-action: manipulation;
    
    /* Prevent background from bleeding into adjacent lines when text wraps */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    
    /* Mobile polish - remove native tap highlights */
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none;
    outline: none !important;
    -webkit-focus-ring-color: transparent;
    user-select: none !important;
    -webkit-user-select: none !important;
    
    /* CRITICAL: No transform, will-change, or contain - completely static */
    transform: none !important;
    will-change: auto !important;
    /* Removed contain: paint as it can cause repaints */
    
    /* CRITICAL: Lock all dimensions to prevent any size changes */
    min-width: auto !important;
    max-width: none !important;
    min-height: auto !important;
    max-height: none !important;
    width: auto !important;
    height: auto !important;
}

/* Hide empty contextual word spans to prevent empty pill backgrounds */
.french-word:empty {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Simplified titles: Remove pill styling, keep plain text appearance but maintain tooltip functionality */
/* CRITICAL: This must override ALL base .french-word styles to prevent white background */
.article-title .french-word {
    /* Remove all visual styling - make it look like plain text */
    border: none !important;
    border-width: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    /* CRITICAL: Remove inset box-shadow that creates white appearance */
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    
    /* CRITICAL: Force slice to prevent box-decoration-break from creating white boxes */
    box-decoration-break: slice !important;
    -webkit-box-decoration-break: slice !important;
    box-decoration-break: slice !important; /* Redundant but ensures override */
    
    /* CRITICAL: Change to inline to prevent inline-block from creating boxes */
    display: inline !important;
    vertical-align: baseline !important;
    
    /* Keep typography matching the title */
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
    
    /* Keep cursor and functionality */
    cursor: pointer;
    
    /* Transitions for premium focus effect (blur/color) - defined below */
    
    /* Keep touch behavior */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    
    /* CRITICAL: Remove any box-sizing that might affect rendering */
    box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
}

/* Prevent text selection highlighting on simplified title words */
.article-title .french-word::selection,
.article-title .french-word::-moz-selection {
    background: transparent !important;
    color: inherit !important;
}

/* Remove hover/active/focus states for simplified title words - keep them looking like plain text */
/* CRITICAL: Higher specificity to prevent white flickering from base hover rules */
.article-title .french-word:hover,
.article-title .french-word:active,
.article-title .french-word.active,
.article-title .french-word.is-pressing,
.article-title .french-word:focus,
.article-title .french-word:hover:not(.active),
.article-title .french-word:active:not(.active) {
    border: none !important;
    border-width: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    outline: none !important;
    /* CRITICAL: Maintain slice to prevent boxes on hover */
    box-decoration-break: slice !important;
    -webkit-box-decoration-break: slice !important;
    display: inline !important;
    /* Transitions for premium focus effect - defined in separate rule below */
}

/* Keep cursor pointer for simplified title words */
.article-title .french-word:focus-visible {
    outline: none !important;
}

/* Premium focus effect: Blue highlight + blur siblings (simplified titles only) */
/* When a word is hovered/active, blur other words and highlight selected word */
.article-title:has(.french-word:hover) .french-word:not(:hover),
.article-title:has(.french-word:active) .french-word:not(:active),
.article-title:has(.french-word.active) .french-word:not(.active),
.article-title:has(.french-word.is-pressing) .french-word:not(.is-pressing) {
    filter: blur(0.8px);
    opacity: 0.5;
    transition: filter 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Selected word: Solid blue color (no glow) */
.article-title .french-word:hover,
.article-title .french-word:active,
.article-title .french-word.active,
.article-title .french-word.is-pressing {
    color: var(--french-blue) !important; /* #2563eb - matches theme */
    text-shadow: none !important; /* No glow - just solid blue */
    filter: none !important; /* No blur on selected word */
    opacity: 1 !important;
    transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth transition for all words when not selected */
.article-title .french-word {
    transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1),
                filter 250ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover and Focus states handled above in combined selector */

/* ============================================
   ORIGINAL TITLE (SECONDARY TITLE) - Same plain text styling as simplified titles
   ============================================ */
/* Original titles: Remove pill styling, keep plain text appearance but maintain tooltip functionality */
/* CRITICAL: This must override ALL base .french-word styles to prevent white background */
.secondary-title .french-word {
    /* Remove all visual styling - make it look like plain text */
    border: none !important;
    border-width: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    /* CRITICAL: Remove inset box-shadow that creates white appearance */
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    
    /* CRITICAL: Force slice to prevent box-decoration-break from creating white boxes */
    box-decoration-break: slice !important;
    -webkit-box-decoration-break: slice !important;
    box-decoration-break: slice !important; /* Redundant but ensures override */
    
    /* CRITICAL: Change to inline to prevent inline-block from creating boxes */
    display: inline !important;
    vertical-align: baseline !important;
    
    /* Keep typography matching the title (inherits from .secondary-title) */
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
    
    /* Blue color by default - reverses to black on hover/tap */
    color: var(--french-blue) !important; /* #2563eb - blue by default */
    
    /* Keep cursor and functionality */
    cursor: pointer;
    
    /* Transitions for premium focus effect (blur/color) - defined below */
    
    /* Keep touch behavior */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    
    /* CRITICAL: Remove any box-sizing that might affect rendering */
    box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
}

/* Prevent text selection highlighting on original title words */
.secondary-title .french-word::selection,
.secondary-title .french-word::-moz-selection {
    background: transparent !important;
    color: inherit !important;
}

/* Remove hover/active/focus states for original title words - keep them looking like plain text */
/* CRITICAL: Higher specificity to prevent white flickering from base hover rules */
.secondary-title .french-word:hover,
.secondary-title .french-word:active,
.secondary-title .french-word.active,
.secondary-title .french-word.is-pressing,
.secondary-title .french-word:focus,
.secondary-title .french-word:hover:not(.active),
.secondary-title .french-word:active:not(.active) {
    border: none !important;
    border-width: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    outline: none !important;
    /* CRITICAL: Maintain slice to prevent boxes on hover */
    box-decoration-break: slice !important;
    -webkit-box-decoration-break: slice !important;
    display: inline !important;
    /* Transitions for premium focus effect - defined in separate rule below */
}

/* Keep cursor pointer for original title words */
.secondary-title .french-word:focus-visible {
    outline: none !important;
}

/* Premium focus effect: Blue highlight + blur siblings (original titles only) */
/* When a word is hovered/active, blur other words and highlight selected word */
.secondary-title:has(.french-word:hover) .french-word:not(:hover),
.secondary-title:has(.french-word:active) .french-word:not(:active),
.secondary-title:has(.french-word.active) .french-word:not(.active),
.secondary-title:has(.french-word.is-pressing) .french-word:not(.is-pressing) {
    filter: blur(0.8px);
    opacity: 0.5;
    transition: filter 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Selected word: Black color on hover/tap (reversed from normal blue) */
.secondary-title .french-word:hover,
.secondary-title .french-word:active,
.secondary-title .french-word.active,
.secondary-title .french-word.is-pressing {
    color: rgba(0, 0, 0, 0.85) !important; /* Black on hover/tap */
    text-shadow: none !important;
    filter: none !important; /* No blur on selected word */
    opacity: 1 !important;
    transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth transition for all words when not selected */
.secondary-title .french-word {
    transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1),
                filter 250ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   SUMMARY TEXT - Same interactive behavior as titles
   ============================================ */

/* Simplified summaries: Remove pill styling, keep plain text appearance but maintain tooltip functionality */
/* CRITICAL: This must override ALL base .french-word styles to prevent white background */
.summary-text .french-word {
    /* Remove all visual styling - make it look like plain text */
    border: none !important;
    border-width: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    /* CRITICAL: Remove inset box-shadow that creates white appearance */
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    
    /* CRITICAL: Force slice to prevent box-decoration-break from creating white boxes */
    box-decoration-break: slice !important;
    -webkit-box-decoration-break: slice !important;
    box-decoration-break: slice !important; /* Redundant but ensures override */
    
    /* CRITICAL: Change to inline to prevent inline-block from creating boxes */
    display: inline !important;
    vertical-align: baseline !important;
    
    /* Keep typography matching the summary */
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
    
    /* Keep cursor and functionality */
    cursor: pointer;
    
    /* CRITICAL: Override base transition - only allow color transitions */
    transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1),
                filter 250ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Keep touch behavior */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    
    /* CRITICAL: Remove any box-sizing that might affect rendering */
    box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
    
    /* CRITICAL: Override base position and transform */
    position: static !important;
    transform: none !important;
    will-change: auto !important;
    
    /* CRITICAL: Remove all base dimensions */
    min-width: auto !important;
    max-width: none !important;
    min-height: auto !important;
    max-height: none !important;
    width: auto !important;
    height: auto !important;
}

/* Prevent text selection highlighting on summary words */
.summary-text .french-word::selection,
.summary-text .french-word::-moz-selection {
    background: transparent !important;
    color: inherit !important;
}

/* Remove hover/active/focus states for summary words - keep them looking like plain text */
/* CRITICAL: Higher specificity to prevent white flickering from base hover rules */
.summary-text .french-word:hover,
.summary-text .french-word:active,
.summary-text .french-word.active,
.summary-text .french-word.is-pressing,
.summary-text .french-word:focus,
.summary-text .french-word:hover:not(.active),
.summary-text .french-word:active:not(.active) {
    border: none !important;
    border-width: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    outline: none !important;
    /* CRITICAL: Maintain slice to prevent boxes on hover */
    box-decoration-break: slice !important;
    -webkit-box-decoration-break: slice !important;
    display: inline !important;
    /* Transitions for premium focus effect - defined in separate rule below */
}

/* Keep cursor pointer for summary words */
.summary-text .french-word:focus-visible {
    outline: none !important;
}

/* Premium focus effect: Blue highlight + blur siblings (summaries only) */
/* When a word is hovered/active, blur other words and highlight selected word */
.summary-text:has(.french-word:hover) .french-word:not(:hover),
.summary-text:has(.french-word:active) .french-word:not(:active),
.summary-text:has(.french-word.active) .french-word:not(.active),
.summary-text:has(.french-word.is-pressing) .french-word:not(.is-pressing) {
    filter: blur(0.8px);
    opacity: 0.5;
    transition: filter 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Selected word: Solid blue color (no glow) */
.summary-text .french-word:hover,
.summary-text .french-word:active,
.summary-text .french-word.active,
.summary-text .french-word.is-pressing {
    color: var(--french-blue) !important; /* #2563eb - matches theme */
    text-shadow: none !important; /* No glow - just solid blue */
    filter: none !important; /* No blur on selected word */
    opacity: 1 !important;
    transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth transition for all words when not selected */
.summary-text .french-word {
    transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1),
                filter 250ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Match VocaMatch button interactive states */
/* Hover state - refined subtle lift effect (50% reduced) */
/* CRITICAL: Exclude simplified title AND summary words to prevent white flickering */
.french-word:hover:not(.active):not(.article-title .french-word):not(.summary-text .french-word):not(.secondary-title .french-word) {
    background: rgba(255, 255, 255, 0.75) !important; /* Reduced from 0.8 to 0.75 */
    border-color: rgba(15, 23, 42, 0.18) !important; /* Slightly more subtle */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 
        0 1.5px 5px rgba(0, 0, 0, 0.05), /* Reduced from 3px 10px */
        0 0.5px 1.5px rgba(0, 0, 0, 0.04), /* Reduced from 1px 3px */
        inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    transform: translateY(-0.25px) !important; /* Reduced from -0.5px for smoother feel */
}

/* Active/pressed state - refined subtle press feedback (50% reduced) */
/* CRITICAL: Exclude simplified title, summary, AND original title words to prevent white flickering */
.french-word:active:not(.active):not(.article-title .french-word):not(.summary-text .french-word):not(.secondary-title .french-word) {
    background: rgba(255, 255, 255, 0.72) !important; /* Slightly reduced */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateY(0) scale(0.99) !important; /* Reduced from 0.98 for smoother feel */
    box-shadow: 
        0 0.5px 2px rgba(0, 0, 0, 0.04), /* Reduced from 1px 4px */
        0 0.5px 1px rgba(0, 0, 0, 0.03), /* Reduced from 1px 2px */
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* Active state (when tooltip is open) - refined subtle depth (50% reduced) */
/* CRITICAL: Exclude simplified title, summary, AND original title words to prevent white flickering */
.french-word.active:not(.article-title .french-word):not(.summary-text .french-word):not(.secondary-title .french-word) {
    background: rgba(255, 255, 255, 0.8) !important; /* Reduced from 0.85 to 0.8 */
    border-color: rgba(15, 23, 42, 0.18) !important; /* Slightly more subtle */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.06), /* Reduced from 4px 12px */
        0 1px 2px rgba(0, 0, 0, 0.05), /* Reduced from 2px 4px */
        inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    transform: translateY(-0.5px) !important; /* Reduced from -1px for smoother feel */
}

/* Focus state - keep static to prevent layout shifts */
.french-word:focus {
    outline: none !important;
    outline-offset: 0 !important;
}

/* Legacy states - keep for compatibility but match base styling */
.french-word.is-pressing {
    /* Match base state */
    background: rgba(255, 255, 255, 0.7) !important;
    transform: none !important;
}

/* Keyboard accessibility - subtle focus indicator */
.french-word:focus-visible {
    outline: 2px solid rgba(15, 23, 42, 0.3) !important;
    outline-offset: 2px !important;
    border-radius: 20px !important;
}

/* Main tooltip container */
.glass-note-tooltip {
    position: absolute;
    background: var(--tooltip-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--tooltip-border);
    border-radius: var(--tooltip-radius);
    box-shadow: var(--tooltip-shadow);
    padding: var(--tooltip-padding);
    max-width: var(--tooltip-max-width);
    min-width: 220px;
    z-index: var(--tooltip-z-index);
    opacity: 0;
    transform: scale(0.97) translateY(4px); /* More subtle starting position for smoother feel */
    /* Smooth, premium closing animation */
    transition: 
        opacity var(--transition-closing) var(--easing-closing),
        transform var(--transition-closing) var(--easing-closing),
        box-shadow var(--transition-closing) var(--easing-closing);
    pointer-events: none;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, "Noto Sans", Ubuntu,
                 Cantarell, sans-serif;
}

.glass-note-tooltip.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
    /* Smooth, premium opening animation - matches button hover feel */
    transition: 
        opacity var(--transition-opening) var(--easing-opening),
        transform var(--transition-opening) var(--easing-opening),
        box-shadow var(--transition-opening) var(--easing-opening);
    box-shadow: 
        var(--tooltip-shadow),
        var(--tooltip-glow);
}

/* Tooltip content styles */
/* Desktop order: Translation → Cultural Note → Explanation */
.glass-note-tooltip .word-display {
    display: block; /* CRITICAL: Make block-level so margins work */
    font-weight: 700;
    font-style: italic; /* Translation in italic */
    font-size: 17px;
    color: #1a1a1c;
    margin-bottom: 16px; /* Space to cultural note */
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.glass-note-tooltip .note {
    display: block;
    font-size: 15px;
    color: #3c3c43; /* Match explanation color for consistency */
    line-height: 1.4;
    margin-top: 16px; /* Space from word-display (matches margin-bottom above) */
    margin-bottom: 10px; /* Space to explanation */
    font-style: italic;
    font-weight: 600; /* Increased to 600 for better visibility and attention */
    letter-spacing: -0.003em;
}

.glass-note-tooltip .definition {
    display: block;
    font-size: 15px;
    color: #3c3c43;
    line-height: 1.45;
    margin-top: 10px; /* Space from cultural note */
    margin-bottom: 0; /* Last element - no bottom margin */
    font-weight: 400;
    font-style: italic; /* Match cultural note style */
    letter-spacing: -0.005em;
}

/* Triangle nub pointing to trigger */
.glass-note-tooltip .nub {
    display: none;
}

.glass-note-tooltip .nub::before {
    display: none;
}

/* Nub positioning for different placements */
.glass-note-tooltip.placement-bottom .nub {
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
}

.glass-note-tooltip.placement-top .nub {
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
}

/* Mobile/tablet responsive design */
@media (max-width: 480px) {
    /* Simplified titles on mobile: Keep plain text appearance */
    .article-title .french-word {
        border: none !important;
        border-width: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        /* CRITICAL: Force slice to prevent white boxes on mobile */
        box-decoration-break: slice !important;
        -webkit-box-decoration-break: slice !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        letter-spacing: inherit !important;
        line-height: inherit !important;
        display: inline !important;
        transition: none !important;
        transform: none !important;
        box-sizing: content-box !important;
        -webkit-box-sizing: content-box !important;
    }
    
    /* Prevent text selection highlighting on mobile */
    .article-title .french-word::selection,
    .article-title .french-word::-moz-selection {
        background: transparent !important;
        color: inherit !important;
    }
    
    .article-title .french-word:hover,
    .article-title .french-word:active,
    .article-title .french-word.active,
    .article-title .french-word.is-pressing,
    .article-title .french-word:focus,
    .article-title .french-word:hover:not(.active),
    .article-title .french-word:active:not(.active) {
        border: none !important;
        border-width: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        transform: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        outline: none !important;
        /* CRITICAL: Maintain slice on mobile hover states */
        box-decoration-break: slice !important;
        -webkit-box-decoration-break: slice !important;
        display: inline !important;
        /* Transitions for premium focus effect - defined in separate rule below */
    }
    
    .article-title .french-word:focus-visible {
        outline: none !important;
    }
    
    /* Premium focus effect on mobile: Blue highlight + blur siblings */
    /* When a word is active/tapped, blur other words and highlight selected word */
    .article-title:has(.french-word:active) .french-word:not(:active),
    .article-title:has(.french-word.active) .french-word:not(.active),
    .article-title:has(.french-word.is-pressing) .french-word:not(.is-pressing) {
        filter: blur(0.8px);
        opacity: 0.5;
        transition: filter 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Selected word on mobile: Solid blue color (no glow) */
    .article-title .french-word:active,
    .article-title .french-word.active,
    .article-title .french-word.is-pressing {
        color: var(--french-blue) !important; /* #2563eb - matches theme */
        text-shadow: none !important; /* No glow - just solid blue */
        filter: none !important; /* No blur on selected word */
        opacity: 1 !important;
        transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Smooth transition for all words on mobile */
    .article-title .french-word {
        transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1),
                    filter 250ms cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Original titles on mobile: Keep plain text appearance (same as simplified titles) */
    .secondary-title .french-word {
        border: none !important;
        border-width: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        /* CRITICAL: Force slice to prevent white boxes on mobile */
        box-decoration-break: slice !important;
        -webkit-box-decoration-break: slice !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        letter-spacing: inherit !important;
        line-height: inherit !important;
    /* Blue color by default - reverses to black on hover/tap */
    color: var(--french-blue) !important; /* #2563eb - blue by default */
        display: inline !important;
        transition: none !important;
        transform: none !important;
        box-sizing: content-box !important;
        -webkit-box-sizing: content-box !important;
    }
    
    /* Prevent text selection highlighting on mobile */
    .secondary-title .french-word::selection,
    .secondary-title .french-word::-moz-selection {
        background: transparent !important;
        color: inherit !important;
    }
    
    .secondary-title .french-word:hover,
    .secondary-title .french-word:active,
    .secondary-title .french-word.active,
    .secondary-title .french-word.is-pressing,
    .secondary-title .french-word:focus,
    .secondary-title .french-word:hover:not(.active),
    .secondary-title .french-word:active:not(.active) {
        border: none !important;
        border-width: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        transform: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        outline: none !important;
        /* CRITICAL: Maintain slice on mobile hover states */
        box-decoration-break: slice !important;
        -webkit-box-decoration-break: slice !important;
        display: inline !important;
        /* Transitions for premium focus effect - defined in separate rule below */
    }
    
    .secondary-title .french-word:focus-visible {
        outline: none !important;
    }
    
    /* Premium focus effect on mobile: Blue highlight + blur siblings */
    /* When a word is active/tapped, blur other words and highlight selected word */
    .secondary-title:has(.french-word:active) .french-word:not(:active),
    .secondary-title:has(.french-word.active) .french-word:not(.active),
    .secondary-title:has(.french-word.is-pressing) .french-word:not(.is-pressing) {
        filter: blur(0.8px);
        opacity: 0.5;
        transition: filter 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Selected word on mobile: Black color on tap (reversed from normal blue) */
    .secondary-title .french-word:active,
    .secondary-title .french-word.active,
    .secondary-title .french-word.is-pressing {
        color: rgba(0, 0, 0, 0.85) !important; /* Black on tap */
        text-shadow: none !important;
        filter: none !important; /* No blur on selected word */
        opacity: 1 !important;
        transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Smooth transition for all words on mobile */
    .secondary-title .french-word {
        transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1),
                    filter 250ms cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Simplified summaries on mobile: Keep plain text appearance (same as titles) */
    .summary-text .french-word {
        border: none !important;
        border-width: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        /* CRITICAL: Force slice to prevent white boxes on mobile */
        box-decoration-break: slice !important;
        -webkit-box-decoration-break: slice !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        letter-spacing: inherit !important;
        line-height: inherit !important;
        display: inline !important;
        transition: none !important;
        transform: none !important;
        box-sizing: content-box !important;
        -webkit-box-sizing: content-box !important;
    }
    
    /* Prevent text selection highlighting on mobile summaries */
    .summary-text .french-word::selection,
    .summary-text .french-word::-moz-selection {
        background: transparent !important;
        color: inherit !important;
    }
    
    .summary-text .french-word:hover,
    .summary-text .french-word:active,
    .summary-text .french-word.active,
    .summary-text .french-word.is-pressing,
    .summary-text .french-word:focus,
    .summary-text .french-word:hover:not(.active),
    .summary-text .french-word:active:not(.active) {
        border: none !important;
        border-width: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        transform: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        outline: none !important;
        /* CRITICAL: Maintain slice on mobile hover states */
        box-decoration-break: slice !important;
        -webkit-box-decoration-break: slice !important;
        display: inline !important;
    }
    
    .summary-text .french-word:focus-visible {
        outline: none !important;
    }
    
    /* Premium focus effect on mobile: Blue highlight + blur siblings */
    /* When a word is active/tapped, blur other words and highlight selected word */
    .summary-text:has(.french-word:active) .french-word:not(:active),
    .summary-text:has(.french-word.active) .french-word:not(.active),
    .summary-text:has(.french-word.is-pressing) .french-word:not(.is-pressing) {
        filter: blur(0.8px);
        opacity: 0.5;
        transition: filter 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Selected word on mobile: Solid blue color (no glow) */
    .summary-text .french-word:active,
    .summary-text .french-word.active,
    .summary-text .french-word.is-pressing {
        color: var(--french-blue) !important; /* #2563eb - matches theme */
        text-shadow: none !important; /* No glow - just solid blue */
        filter: none !important; /* No blur on selected word */
        opacity: 1 !important;
        transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Smooth transition for all summary words on mobile */
    .summary-text .french-word {
        transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1),
                    filter 250ms cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Match VocaMatch button mobile styling */
    .french-word {
        padding: 2px 6px !important; /* Keep current height - perfect as requested */
        margin: 0 1px !important; /* Tight grouping to prevent overflow */
        border-radius: 20px !important; /* Pill-shaped matching buttons */
        border-width: 1px !important;
        border: 1px solid rgba(15, 23, 42, 0.15) !important;
        background: rgba(255, 255, 255, 0.7) !important;
        /* Backdrop blur removed for testing */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 
            inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; /* Inner highlight only - no outer shadows */
        font-size: 14px !important; /* Match button mobile font-size */
        font-weight: 400 !important; /* Match summary text font-weight */
        letter-spacing: normal !important;
        line-height: normal !important;
        transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* Match button transitions */
        position: static !important;
        vertical-align: baseline !important;
        /* Lock all dimensions */
        min-width: auto !important;
        max-width: none !important;
        min-height: auto !important;
        max-height: none !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Match VocaMatch button mobile interactive states */
    /* Hover state on mobile - refined subtle (50% reduced) */
    /* CRITICAL: Exclude simplified title, summary, AND original title words to prevent white flickering */
    .french-word:hover:not(.active):not(.article-title .french-word):not(.summary-text .french-word):not(.secondary-title .french-word) {
        background: rgba(255, 255, 255, 0.75) !important; /* Reduced from 0.8 */
        border-color: rgba(15, 23, 42, 0.18) !important; /* Slightly more subtle */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 
            0 1.5px 5px rgba(0, 0, 0, 0.05), /* Reduced from 3px 10px */
            0 0.5px 1.5px rgba(0, 0, 0, 0.04), /* Reduced from 1px 3px */
            inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
        transform: translateY(-0.25px) !important; /* Reduced from -0.5px */
    }

    /* Active/pressed state on mobile - refined subtle (50% reduced) */
    /* CRITICAL: Exclude simplified title, summary, AND original title words to prevent white flickering */
    .french-word:active:not(.active):not(.article-title .french-word):not(.summary-text .french-word):not(.secondary-title .french-word) {
        background: rgba(255, 255, 255, 0.72) !important; /* Slightly reduced */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: translateY(0) scale(0.99) !important; /* Reduced from 0.98 */
        box-shadow: 
            0 0.5px 2px rgba(0, 0, 0, 0.04), /* Reduced from 1px 4px */
            0 0.5px 1px rgba(0, 0, 0, 0.03), /* Reduced from 1px 2px */
            inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    }

    /* Active state (tooltip open) on mobile - refined subtle (50% reduced) */
    /* CRITICAL: Exclude simplified title, summary, AND original title words to prevent white flickering */
    .french-word.active:not(.article-title .french-word):not(.summary-text .french-word):not(.secondary-title .french-word) {
        background: rgba(255, 255, 255, 0.8) !important; /* Reduced from 0.85 */
        border-color: rgba(15, 23, 42, 0.18) !important; /* Slightly more subtle */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 
            0 2px 6px rgba(0, 0, 0, 0.06), /* Reduced from 4px 12px */
            0 1px 2px rgba(0, 0, 0, 0.05), /* Reduced from 2px 4px */
            inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
        transform: translateY(-0.5px) !important; /* Reduced from -1px */
    }
    
    /* Focus state on mobile */
    .french-word:focus {
        outline: none !important;
        outline-offset: 0 !important;
    }
    
    /* Legacy state - keep for compatibility */
    .french-word.is-pressing {
        background: rgba(255, 255, 255, 0.7) !important;
        transform: none !important;
    }
    
    /* Ensure all mobile states maintain padding/height */
    .french-word:active,
    .french-word.is-pressing,
    .french-word.active,
    .french-word:hover,
    .french-word:focus {
        padding: 2px 6px !important; /* CRITICAL: Keep height perfect as requested */
        margin: 0 1px !important;
        border-width: 1px !important;
        border-radius: 20px !important;
        box-sizing: border-box !important;
        font-size: 14px !important; /* Match button mobile font-size */
        font-weight: 400 !important; /* Match summary text font-weight */
        letter-spacing: normal !important;
        line-height: normal !important;
        outline: none !important;
        outline-offset: 0 !important;
        min-width: auto !important;
        max-width: none !important;
        min-height: auto !important;
        max-height: none !important;
        width: auto !important;
        height: auto !important;
    }
    
    .glass-note-tooltip {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        max-width: none;
        height: auto; /* Content-based height - same as bottom tooltip */
        border-radius: 0 0 24px 24px;
        backdrop-filter: blur(30px) saturate(180%);
        -webkit-backdrop-filter: blur(30px) saturate(180%);
        opacity: 1; /* Start fully opaque on mobile - no transparency during opening */
        transform: translateY(-100%) scale(0.98);
        padding: 30px 24px 26px 24px; /* Top: 30px, Right: 24px, Bottom: 26px, Left: 24px */
        /* Graceful mobile closing animation - opacity fades out on close */
        transition: 
            opacity var(--transition-closing) var(--easing-closing),
            transform var(--transition-closing) var(--easing-closing),
            box-shadow var(--transition-closing) var(--easing-closing);
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.15),
            0 2px 8px rgba(0, 0, 0, 0.08),
            inset 0 -1px 0 rgba(255, 255, 255, 0.7);
    }

    .glass-note-tooltip::before {
        border-radius: 0 0 24px 24px;
    }

    .glass-note-tooltip.visible {
        opacity: 1; /* Instantly opaque - no fade-in to prevent seeing content behind */
        transform: translateY(0) scale(1);
        /* Mobile opening animation - transform only, no opacity transition */
        transition: 
            transform var(--transition-opening) var(--easing-opening),
            box-shadow var(--transition-opening) var(--easing-opening);
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.15),
            0 2px 8px rgba(0, 0, 0, 0.08),
            inset 0 -1px 0 rgba(255, 255, 255, 0.7),
            0 0 24px rgba(10, 102, 255, 0.08);
    }
    

    .glass-note-tooltip .nub {
        display: none;
    }

    /* Top tooltip: Symmetric spacing - Explanation ↔ Cultural Note = Cultural Note ↔ Translation */
    /* Top tooltip order: Explanation → Cultural Note → Translation */
    .glass-note-tooltip .word-display {
        display: block; /* Ensure block-level on mobile too */
        font-size: 20px;
        margin-bottom: 14px;
        margin-top: 26px; /* Gap from cultural note - matches explanation→note gap (symmetric) */
        font-weight: 700;
        font-style: italic; /* Translation in italic */
    }

    .glass-note-tooltip .definition {
        font-size: 16px;
        margin-top: 8px;
        margin-bottom: 26px; /* Gap to cultural note - matches note→translation gap (symmetric) */
        line-height: 1.5;
    }

    .glass-note-tooltip .note {
        font-size: 16px;
        margin-top: 26px; /* Gap from explanation - matches explanation→note gap (symmetric) */
        margin-bottom: 26px; /* Gap to translation - matches note→translation gap (symmetric) */
        font-weight: 600; /* Increased to 600 for better visibility on mobile */
    }
    
    /* Bottom tooltip: Symmetric spacing - Translation ↔ Cultural Note = Cultural Note ↔ Explanation */
    /* Bottom tooltip order: Translation → Cultural Note → Explanation */
    .glass-note-tooltip.from-simplified-title .word-display {
        margin-top: 8px !important; /* Match top tooltip's first element spacing (8px) */
        margin-bottom: 26px; /* Gap to cultural note - matches note→explanation gap */
    }
    
    .glass-note-tooltip.from-simplified-title .note {
        margin-top: 26px; /* Gap from word-display - matches translation→note gap */
        margin-bottom: 26px; /* Gap to explanation - matches translation→note gap (symmetric) */
    }
    
    .glass-note-tooltip.from-simplified-title .definition {
        margin-top: 26px; /* Gap from note - matches translation→note gap (symmetric) */
        margin-bottom: 14px !important; /* Match top tooltip's last element spacing (14px) */
    }
    
    /* Simplified title tooltips open from bottom on mobile */
    .glass-note-tooltip.from-simplified-title {
        top: auto !important;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: none;
        width: 100%; /* Explicit width instead of left/right */
        height: auto !important; /* Match top tooltip - content-based height */
        min-height: auto !important; /* Prevent min-height from stretching */
        max-height: none !important; /* Remove any max-height constraints initially */
        border-radius: 24px 24px 0 0;
        opacity: 1; /* Start fully opaque on mobile - no transparency during opening */
        transform: translateY(100%) scale(0.98);
        padding: 30px 24px 26px 24px; /* Top: 30px, Right: 24px, Bottom: 26px, Left: 24px */
        /* Graceful mobile closing animation - opacity fades out on close */
        transition: 
            opacity var(--transition-closing) var(--easing-closing),
            transform var(--transition-closing) var(--easing-closing),
            box-shadow var(--transition-closing) var(--easing-closing);
        box-shadow: 
            0 -8px 32px rgba(0, 0, 0, 0.15),
            0 -2px 8px rgba(0, 0, 0, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.7);
        /* CRITICAL: Prevent stretching - align to bottom but don't fill */
        align-self: flex-end; /* If in flex container */
        flex-shrink: 1; /* Allow shrinking */
        flex-grow: 0; /* Don't grow to fill space */
    }
    
    .glass-note-tooltip.from-simplified-title::before {
        border-radius: 24px 24px 0 0;
    }
    
    .glass-note-tooltip.from-simplified-title.visible {
        opacity: 1; /* Instantly opaque - no fade-in to prevent seeing content behind */
        transform: translateY(0) scale(1);
        /* Mobile opening animation - transform only, no opacity transition */
        transition: 
            transform var(--transition-opening) var(--easing-opening),
            box-shadow var(--transition-opening) var(--easing-opening);
        box-shadow: 
            0 -8px 32px rgba(0, 0, 0, 0.15),
            0 -2px 8px rgba(0, 0, 0, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.7),
            0 0 24px rgba(10, 102, 255, 0.08);
    }
    
}

/* Tablet-specific adjustments */
@media (min-width: 481px) and (max-width: 768px) {
    .glass-note-tooltip {
        max-width: 360px; /* Increased from 320px for better text flow */
        padding: 22px;
    }

    .glass-note-tooltip .word-display {
        font-size: 17px;
    }

    .glass-note-tooltip .definition {
        font-size: 15px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --tooltip-bg: rgba(255, 255, 255, 0.95);
        --tooltip-border: rgba(0, 0, 0, 0.3);
        --tooltip-shadow: rgba(0, 0, 0, 0.3);
    }

    .glass-note-tooltip .word-display {
        color: #000000;
    }

    .glass-note-tooltip .definition {
        color: #1d1d1f;
    }

    .glass-note-tooltip .note {
        color: #424245;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .glass-note-tooltip {
        transition: 
            opacity 100ms ease-out,
            transform 100ms ease-out;
    }

    .glass-note-tooltip.visible {
        transition: 
            opacity 100ms ease-out,
            transform 100ms ease-out;
        transform: scale(1) translateY(0);
    }
    

    @media (max-width: 480px) {
        .glass-note-tooltip.visible {
            transition: 
                opacity 100ms ease-out,
                transform 100ms ease-out;
            transform: translateY(0) scale(1);
        }
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --tooltip-bg: rgba(40, 40, 42, 0.95);
        --tooltip-border: rgba(255, 255, 255, 0.25);
        --tooltip-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.4),
            0 2px 8px rgba(0, 0, 0, 0.3);
        --tooltip-glow: 0 0 20px rgba(10, 132, 255, 0.15);
    }

    .glass-note-tooltip .word-display {
        color: #ffffff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .glass-note-tooltip .definition {
        color: #e5e5e7;
    }

    .glass-note-tooltip .note {
        color: #a1a1a6;
    }

    .glass-note-tooltip .nub {
        border-top-color: rgba(40, 40, 42, 0.95);
    }

    .glass-note-tooltip .nub::before {
        border-top-color: rgba(255, 255, 255, 0.2);
    }
}

/* Focus management */
.glass-note-tooltip:focus {
    outline: none;
}

/* Ensure tooltip doesn't interfere with page layout */
.glass-note-tooltip {
    box-sizing: border-box;
}

/* Animation for very tall tooltips on mobile */
@media (max-width: 480px) {
    .glass-note-tooltip.tall-content {
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Ensure bottom tooltips also respect tall-content max-height */
    .glass-note-tooltip.from-simplified-title.tall-content {
        max-height: 60vh !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .glass-note-tooltip.tall-content::-webkit-scrollbar {
        width: 3px;
    }

    .glass-note-tooltip.tall-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .glass-note-tooltip.tall-content::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 1.5px;
    }
}