/* ========================================
   Premium Vocabulary Panel - Left Slide-In
   ======================================== */

/* Backdrop (very subtle, allows card visibility) */
/* z-index: 3000+ to overlay quiz mode (2500) */
.vocab-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(44, 44, 44, 0.15);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.vocab-panel-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* Main Panel Container - Light Gray Frosted Glass */
/* z-index: 3100 to overlay quiz mode (2500) and backdrop (3000) */
.vocab-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 380px;
    max-width: 90vw;
    background: rgba(245, 245, 247, 0.92);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-right: 1px solid rgba(44, 44, 44, 0.08);
    box-shadow: 8px 0 40px rgba(44, 44, 44, 0.07);
    z-index: 3100;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    color: #1d1d1f;
    /* Force visibility so the panel escapes any inherited `visibility: hidden`
       from ancestors — notably `body.mobile-home #app` on the mobile landing,
       which would otherwise leave only the backdrop (frost) visible when the
       search button is tapped. The panel is already hidden off-screen via
       transform when not `.open`. */
    visibility: visible;
}

.vocab-panel.open {
    transform: translateX(0);
}

/* ========================================
   Panel Header with Search
   ======================================== */
.panel-header {
    padding: 20px;
    border-bottom: 1px solid rgba(44, 44, 44, 0.06);
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.4);
}

.panel-header-row {
    display: flex;
    align-items: center;
    gap: 0;
}

.panel-header-row .panel-search {
    flex: 1;
    min-width: 0;
}

/* Cancel button — hidden on desktop (desktop has keyboard Esc).
   NOTE: components.css has a global `button { box-shadow: 0 4px 15px ...;
   background: white }` rule. We explicitly null out background, shadow,
   border-radius, and hover transform or the Cancel text looks like a
   floating pill with a drop shadow. */
.panel-cancel {
    display: none;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    color: var(--color-accent, #3D5A80);
    font-family: var(--font-ui, 'Inter', -apple-system, sans-serif);
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}
.panel-cancel:hover,
.panel-cancel:active {
    background: transparent;
    box-shadow: none;
    transform: none;
}
.panel-cancel:focus { outline: none; }
.panel-cancel:focus-visible {
    outline: 2px solid var(--color-accent, #3D5A80);
    outline-offset: 2px;
    border-radius: 4px;
}

.panel-search {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 12px 16px;
    border: 1px solid rgba(44, 44, 44, 0.08);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(44, 44, 44, 0.02);
}

.panel-search:focus-within {
    border-color: #3D5A80;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 3px rgba(61, 90, 128, 0.06);
}

.panel-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #86868b;
    line-height: 1;
}

.panel-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #1d1d1f;
    font-size: 1.1rem;
    font-weight: 500;
    font-family: inherit;
}

.panel-search-input:focus {
    outline: none;
}

.panel-search-input::placeholder {
    color: #767676;
}

/* Typeahead ghost text — Google-style inline completion */
.search-typeahead-wrapper {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
}

.search-ghost {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    font-size: 1.1rem;
    font-weight: 500;
    font-family: inherit;
    color: transparent;
}

.search-ghost-typed {
    visibility: hidden;
    white-space: pre;
}

.search-ghost-completion {
    color: #86868b;
    opacity: 0.45;
    white-space: pre;
}

/* Result count — hidden on desktop by default */
.panel-result-count {
    display: none;
}

.panel-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(44, 44, 44, 0.05);
    border: none;
    color: #86868b;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.panel-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* ========================================
   Panel Content (Scrollable Results)
   ======================================== */
.panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(44,44,44,0.15) transparent;
    overscroll-behavior: contain;
}

.panel-content::-webkit-scrollbar {
    width: 6px;
}

.panel-content::-webkit-scrollbar-thumb {
    background: rgba(44, 44, 44, 0.15);
    border-radius: 3px;
}

.panel-content::-webkit-scrollbar-thumb:hover {
    background: rgba(44, 44, 44, 0.25);
}

/* ========================================
   Result Items - Refined Light Theme
   ======================================== */
.vocab-panel .vocab-search-result,
.panel-result {
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(44, 44, 44, 0.025);
    border: 1px solid rgba(44, 44, 44, 0.03);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    display: flex;
    align-items: center;
    gap: 14px;
    opacity: 0;
    animation: panelResultFadeIn 0.25s ease forwards;
}

/* Thumbnail — mobile-only. Hidden on desktop (hover mini-preview handles it) */
.result-thumb {
    display: none;
}

@keyframes panelResultFadeIn {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Staggered animation */
.vocab-panel .vocab-search-result:nth-child(1) { animation-delay: 0ms; }
.vocab-panel .vocab-search-result:nth-child(2) { animation-delay: 30ms; }
.vocab-panel .vocab-search-result:nth-child(3) { animation-delay: 60ms; }
.vocab-panel .vocab-search-result:nth-child(4) { animation-delay: 90ms; }
.vocab-panel .vocab-search-result:nth-child(5) { animation-delay: 120ms; }
.vocab-panel .vocab-search-result:nth-child(n+6) { animation-delay: 150ms; }

.vocab-panel .vocab-search-result:hover,
.vocab-panel .vocab-search-result.selected {
    background: rgba(44, 44, 44, 0.045);
    border-color: rgba(44, 44, 44, 0.06);
    transform: translateX(3px);
}

/* Previewing state - subtle accent tint */
.vocab-panel .vocab-search-result.previewing {
    border-left: 3px solid #3D5A80;
    background: rgba(61, 90, 128, 0.06);
    padding-left: 13px; /* Compensate for border */
}

.vocab-panel .vocab-search-result:active {
    transform: scale(0.99) translateX(3px);
    background: rgba(44, 44, 44, 0.06);
}

/* Text Hierarchy - Refined Light Theme
   Japanese: Primary (black) - the word to learn
   Romanization: Accent (indigo) - pronunciation aid
   English: Secondary (dark gray) - the meaning
   Meta: Tertiary (medium gray) - supplementary info
*/
.vocab-panel .result-japanese {
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
    font-size: 1.4em;
    font-weight: 600;
    color: #000000;
    margin-bottom: 5px;
    letter-spacing: 0.01em;
}

.vocab-panel .result-details {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.88em;
    color: #6e6e73;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vocab-panel .result-romanization {
    font-style: italic;
    color: #3D5A80;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.vocab-panel .result-separator {
    color: #c7c7cc;
    font-weight: 300;
}

.vocab-panel .result-english {
    color: #3a3a3c;
    font-weight: 450;
}

/* Highlight matches - subtle indigo underline effect */
.vocab-panel .result-japanese mark,
.vocab-panel .result-romanization mark,
.vocab-panel .result-english mark {
    background: rgba(61, 90, 128, 0.12);
    color: inherit;
    border-radius: 3px;
    padding: 1px 4px;
    margin: 0 -1px;
}

/* Part of speech badge - refined pill */
.vocab-panel .result-badge {
    padding: 2px 8px;
    background: rgba(61, 90, 128, 0.08);
    border: none;
    border-radius: 6px;
    font-size: 0.72em;
    font-weight: 600;
    color: #3D5A80;
    text-transform: lowercase;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Category tag - muted neutral */
.vocab-panel .result-category {
    padding: 2px 8px;
    background: rgba(44, 44, 44, 0.035);
    border-radius: 6px;
    font-size: 0.68em;
    font-weight: 500;
    color: #8e8e93;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
}

/* Progress dots */
.vocab-panel .progress-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(44, 44, 44, 0.12);
}

.vocab-panel .progress-dot.known {
    background: rgba(163, 177, 138, 0.9);
    box-shadow: 0 0 4px rgba(163, 177, 138, 0.24);
}

.vocab-panel .progress-dot.learning {
    background: rgba(194, 130, 114, 0.9);
    box-shadow: 0 0 4px rgba(194, 130, 114, 0.24);
}

/* ========================================
   Empty & Loading States
   ======================================== */
.vocab-panel .vocab-search-empty,
.vocab-panel .vocab-search-loading {
    padding: 40px 20px;
    text-align: center;
}

.vocab-panel .vocab-search-empty-icon {
    font-size: 3em;
    margin-bottom: 12px;
    opacity: 0.4;
}

.vocab-panel .vocab-search-empty-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.95em;
    color: #86868b;
    line-height: 1.5;
}

.vocab-panel .vocab-search-empty-text strong {
    color: #1d1d1f;
}

.vocab-panel .vocab-search-spinner {
    width: 28px;
    height: 28px;
    border: 2.5px solid rgba(61, 90, 128, 0.12);
    border-top-color: #3D5A80;
    border-radius: 50%;
    animation: panelSpin 0.8s linear infinite;
    margin: 0 auto 12px;
}

@keyframes panelSpin {
    to { transform: rotate(360deg); }
}

/* ========================================
   Panel Footer (Keyboard Hints)
   ======================================== */
.panel-footer {
    padding: 12px 20px;
    border-top: 1px solid rgba(44, 44, 44, 0.06);
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.5);
}

.panel-hint {
    font-size: 0.75rem;
    color: #86868b;
    font-weight: 500;
    font-family: 'Inter', -apple-system, sans-serif;
}

/* ========================================
   Card Preview Mode Styling
   Clean preview - no border or badge, just smooth content swap
   ======================================== */
.flashcard.preview-mode {
    /* No visual indicators - seamless preview */
    transition: none;
}

/* ========================================
   Desktop Wide: Constrain text line length
   ======================================== */
@media (min-width: 1200px) {
    .mini-preview-english,
    .vocab-panel .result-details {
        max-width: 70ch;
    }
}

/* ========================================
   Mobile: Full-screen overlay, Kotoba 和の感性 aesthetic
   Matches mobile-landing + learn-mode warm paper language.
   Design principles (in order of importance):
     1. Subtraction before addition (one textured surface max)
     2. Content IS the decoration (images + JP type carry the warmth)
     3. Scarcity gives meaning (gold earned, not sprayed)
     4. Cards rest, not float
   ======================================== */
@media (max-width: 768px) {
    .vocab-panel {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border-right: none;
        border-top: none;
        transform: translateY(100%);
        box-shadow: none;
        /* Warm paper ground + seasonal tint — matches mobile-grid-container */
        background:
            radial-gradient(ellipse 90% 70% at 50% 15%, var(--seasonal-tint, rgba(201, 169, 110, 0.04)) 0%, transparent 70%),
            var(--color-paper);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        color: var(--color-ink);
        /* iOS sheet curve — expo-out, calm shoji-slide, not springy */
        transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
        /* Safe area padding for notched phones */
        padding-top: env(safe-area-inset-top, 0);
    }

    .vocab-panel.open {
        transform: translateY(0);
    }

    /* Washi paper grain — matches mobile-grid + landing */
    .vocab-panel::before {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0.025;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
        background-size: 300px 300px;
    }

    /* Header — transparent over paper, frosted on scroll.
       Right gutter (20px) is slightly wider than left (20px as well) so the
       Cancel button has air against the viewport edge. */
    .vocab-panel .panel-header {
        padding: 10px 20px 8px;
        padding-top: calc(10px + env(safe-area-inset-top, 0));
        background: transparent;
        border-bottom: none;
        transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
    }

    /* Frosted header — activated on scroll via JS, matches mg-header--solid */
    .vocab-panel .panel-header.panel-header--frosted {
        background: rgba(240, 237, 232, 0.88);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 1px 0 rgba(216, 210, 200, 0.4);
    }

    /* Mobile header row: search field + Cancel text button */
    .vocab-panel .panel-header-row {
        gap: 8px;
    }

    /* BARE-LINE SEARCH (one surface rule)
       Strip the pill. Hairline underline replaces it.
       Icon, input, and inline ✕ sit on the paper directly. */
    .vocab-panel .panel-search {
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--color-divider);
        border-radius: 0;
        padding: 10px 2px 10px 0;
        gap: 12px;
        box-shadow: none;
        transition: border-color 0.3s ease;
    }

    .vocab-panel .panel-search:focus-within {
        background: transparent;
        border-color: var(--color-ink);
        box-shadow: none;
    }

    .vocab-panel .panel-search-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--color-faint);
        font-size: 0;
        transition: color 0.3s ease;
    }

    .vocab-panel .panel-search:focus-within .panel-search-icon {
        color: var(--color-ink);
    }

    .vocab-panel .panel-search-input {
        font-size: 17px; /* Native iOS size, still no zoom */
        font-family: var(--font-ui);
        font-weight: 400;
        color: var(--color-ink);
        caret-color: var(--color-accent);
    }

    .vocab-panel .panel-search-input::placeholder {
        color: var(--color-faint);
        font-weight: 400;
        font-family: var(--font-jp), var(--font-ui);
        letter-spacing: 0.02em;
    }

    /* Ghost typeahead — match mobile input metrics exactly */
    .vocab-panel .search-ghost {
        font-size: 17px;
        font-weight: 400;
        font-family: var(--font-ui);
    }
    .vocab-panel .search-ghost-completion {
        color: var(--color-faint);
        opacity: 0.4;
    }

    /* Unified close button (✕).
       One control, dual role: tap once to clear text, tap again (empty)
       to close the panel. handleClearButton() in vocab-search.js handles
       the state machine. Always visible — a close affordance shouldn't
       hide and seek. The Cancel text button is redundant and dropped
       on mobile. */
    .vocab-panel .panel-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        background: rgba(44, 44, 44, 0.07);
        color: var(--color-ink);
        border: none;
        border-radius: var(--radius-full);
        font-size: 15px;
        line-height: 1;
        padding: 0;
        position: relative;
        flex-shrink: 0;
        box-shadow: none;
        transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }
    /* Expanded hit area (44pt) without visual bloat */
    .vocab-panel .panel-close::before {
        content: "";
        position: absolute;
        inset: -7px;
    }
    .vocab-panel .panel-close:hover,
    .vocab-panel .panel-close:active {
        background: rgba(44, 44, 44, 0.14);
        color: var(--color-ink);
        transform: scale(0.94);
    }

    /* Cancel text button — dropped on mobile. The ✕ close button above
       is self-explanatory. Leaving markup in place for desktop/accessibility
       tooling but hiding it on mobile. */
    .vocab-panel .panel-cancel {
        display: none !important;
    }

    /* No drag handle needed for full-screen */
    .panel-header::before {
        display: none;
    }

    /* Content area — calmer gutter; safe-area bottom so last row escapes
       the home indicator when keyboard dismisses */
    .vocab-panel .panel-content {
        padding: 6px 20px calc(32px + env(safe-area-inset-bottom, 0));
        scroll-padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* ========================================
       RESULT COUNT — quiet tally above results
       ======================================== */
    .vocab-panel .panel-result-count {
        display: none;
        font-family: var(--font-ui);
        font-size: 11px;
        font-weight: 500;
        color: var(--color-faint);
        letter-spacing: 0.06em;
        padding: 12px 0 2px;
    }
    .vocab-panel .panel-result-count.visible {
        display: block;
    }

    /* ========================================
       EMPTY STATE — recent chips + example hints
       Calmer than a list. Teaches what's searchable.
       ======================================== */
    .vocab-panel .vocab-search-recent-label {
        display: block;
        font-family: var(--font-ui);
        font-size: 11px;
        font-weight: 500;
        color: var(--color-faint);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 18px 0 10px;
    }

    .vocab-panel .vocab-search-recent-empty {
        font-family: var(--font-ui);
        color: var(--color-faint);
        font-size: 14px;
        padding: 20px 0 8px;
        letter-spacing: 0.01em;
    }

    /* Horizontal chip rail — recent or example starters */
    .vocab-panel .vocab-search-chip-row {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding: 4px 0 8px;
        margin: 0 -20px 8px;
        padding-left: 20px;
        padding-right: 20px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .vocab-panel .vocab-search-chip-row::-webkit-scrollbar { display: none; }

    .vocab-panel .vocab-search-chip {
        flex-shrink: 0;
        scroll-snap-align: start;
        display: inline-flex;
        align-items: center;
        height: 38px;
        padding: 0 16px;
        border-radius: var(--radius-full);
        background: rgba(250, 250, 247, 0.75);
        border: 1px solid rgba(44, 44, 44, 0.07);
        box-shadow: none;
        color: var(--color-ink);
        font-family: var(--font-jp);
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.01em;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        transition: background 0.18s ease, transform 0.18s ease;
    }
    .vocab-panel .vocab-search-chip:hover,
    .vocab-panel .vocab-search-chip:active {
        background: rgba(201, 169, 110, 0.12);
        transform: scale(0.97);
        box-shadow: none;
    }

    .vocab-panel .vocab-search-chip .chip-roma {
        font-family: var(--font-ui);
        font-style: italic;
        font-weight: 400;
        font-size: 12px;
        color: var(--color-faint);
        margin-left: 8px;
        letter-spacing: 0.01em;
    }

    /* Example hint copy under the chip row. Named `vocab-search-tip`
       (not `-hint`) to dodge a legacy collision with an absolute-
       positioned desktop keyboard-shortcut pill styled in
       vocab-search.css. Explicit display:block keeps the rule clear. */
    .vocab-panel .vocab-search-tip {
        display: block;
        font-family: var(--font-ui);
        font-size: 13px;
        font-weight: 400;
        color: var(--color-faint);
        line-height: 1.55;
        padding: 18px 0 4px;
        letter-spacing: 0.01em;
    }
    .vocab-panel .vocab-search-tip em {
        font-style: normal;
        color: var(--color-stone);
    }

    /* ========================================
       RESULT ROWS — image + text, one hairline
       ======================================== */
    .vocab-panel .vocab-search-result {
        display: grid;
        grid-template-columns: 58px 1fr;
        gap: 18px;
        align-items: center;
        padding: 18px 0;
        background: transparent;
        border: none;
        border-bottom: none;
        border-radius: 0;
        margin-bottom: 0;
        /* Ultra-subtle stagger — micro-breathe, items settle into place */
        animation: mobileResultEnter 160ms ease-out both;
        position: relative;
        /* Long-press delighter conflict: iOS Safari's default behavior for
           long-press on text is to open the selection callout (Copy / Look
           Up / Share). That fires BEFORE our 320ms audio timer, hijacking
           the gesture. Disable text selection + iOS callout on the row so
           the long-press reaches our handler cleanly. */
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    .vocab-panel .vocab-search-recent-item {
        padding: 18px 0;
        background: transparent;
        border: none;
        border-bottom: none;
        border-radius: 0;
        margin-bottom: 0;
        position: relative;
    }
    /* Gradient fade divider for recent items */
    .vocab-panel .vocab-search-recent-item::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 24px;
        height: 0.5px;
        background: linear-gradient(90deg, transparent, var(--color-divider) 10%, var(--color-divider) 90%, transparent);
        pointer-events: none;
    }
    .vocab-panel .vocab-search-recent-item:last-child::before {
        display: none;
    }

    /* Gradient fade divider — starts after thumbnail, fades at edges.
       Uses ::before to keep ::after free for audio-playing gold sweep. */
    .vocab-panel .vocab-search-result::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 76px;
        right: 24px;
        height: 0.5px;
        background: linear-gradient(90deg, transparent, var(--color-divider) 10%, var(--color-divider) 90%, transparent);
        pointer-events: none;
    }
    .vocab-panel .vocab-search-result:last-child::before {
        display: none;
    }

    /* Mobile stagger timing — tighter than desktop (20ms vs 30ms) */
    @keyframes mobileResultEnter {
        from { opacity: 0; transform: translateY(4px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .vocab-panel .vocab-search-result:nth-child(1) { animation-delay: 0ms; }
    .vocab-panel .vocab-search-result:nth-child(2) { animation-delay: 20ms; }
    .vocab-panel .vocab-search-result:nth-child(3) { animation-delay: 40ms; }
    .vocab-panel .vocab-search-result:nth-child(4) { animation-delay: 60ms; }
    .vocab-panel .vocab-search-result:nth-child(5) { animation-delay: 80ms; }
    .vocab-panel .vocab-search-result:nth-child(6) { animation-delay: 100ms; }
    .vocab-panel .vocab-search-result:nth-child(7) { animation-delay: 115ms; }
    .vocab-panel .vocab-search-result:nth-child(n+8) { animation-delay: 130ms; }

    /* Active tap feedback — warm amber wash, not gray. 160ms release. */
    .vocab-panel .vocab-search-result:active {
        background: rgba(201, 169, 110, 0.08);
        transform: none;
        border-color: var(--color-divider);
    }

    /* Kill hover/selected states on mobile — no keyboard, no cursor */
    .vocab-panel .vocab-search-result:hover,
    .vocab-panel .vocab-search-result.selected,
    .vocab-panel .vocab-search-result.previewing,
    .vocab-panel .vocab-search-result.preview-expanded {
        background: transparent;
        border-color: var(--color-divider);
        transform: none;
        padding-left: 0;
        flex-direction: row;
        align-items: center;
    }
    .vocab-panel .vocab-search-result.previewing .result-compact,
    .vocab-panel .vocab-search-result.preview-expanded .result-compact {
        display: flex;
    }
    .vocab-panel .vocab-search-result .mini-preview {
        display: none !important;
    }

    /* Thumbnail — 58×58 rounded warm paper tile, matches mg-thumb.
       This IS the decoration. Muji would be proud. */
    .vocab-panel .result-thumb {
        display: block;
        width: 58px;
        height: 58px;
        border-radius: var(--radius-lg);
        background: var(--color-card);
        overflow: hidden;
        flex-shrink: 0;
        position: relative;
        box-shadow:
            0 2px 6px rgba(44, 28, 10, 0.06),
            0 0 0 0.5px rgba(216, 210, 200, 0.6);
    }
    .vocab-panel .result-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        opacity: 0;
        transition: opacity 0.25s ease;
    }
    .vocab-panel .result-thumb img.loaded {
        opacity: 1;
    }
    /* Placeholder — a single ink stroke for words without images */
    .vocab-panel .result-thumb.no-image::before {
        content: "言";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-jp);
        font-size: 22px;
        color: var(--color-divider);
    }

    /* Learning status dot — thumbnail corner, scarcity-compliant.
       Only learning (amber) and known (sage) get a dot. New = nothing. */
    .vocab-panel .result-thumb .status-dot {
        position: absolute;
        top: -2px;
        right: -2px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 1.5px solid var(--color-paper);
        z-index: 1;
        opacity: 0;
        animation: statusDotAppear 250ms ease-out 200ms forwards;
    }
    .vocab-panel .result-thumb .status-dot--learning {
        background: var(--color-gold);
    }
    .vocab-panel .result-thumb .status-dot--known {
        background: #6B7F5C;
    }
    @keyframes statusDotAppear {
        from { opacity: 0; transform: scale(0.4); }
        to   { opacity: 1; transform: scale(1); }
    }

    /* Right-side status dot — vertically centered, right edge.
       Only rendered for known (sage) and learning (gold). New = absent. */
    .vocab-panel .result-status-dot {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        opacity: 0;
        animation: statusDotAppear 250ms ease-out 200ms forwards;
    }
    .vocab-panel .result-status-dot--known {
        background: #5a7a3e;
    }
    .vocab-panel .result-status-dot--learning {
        background: #b8860b;
    }

    /* Accent line — left-edge ribbon, matches mg-accent-line.
       Replaces dots as primary status signal on mobile. */
    .vocab-panel .result-accent-line {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 2.5px;
        height: 55%;
        border-radius: 0 2px 2px 0;
        opacity: 0;
        animation: statusDotAppear 250ms ease-out 200ms forwards;
    }
    .vocab-panel .result-accent-line--known {
        background: var(--color-moss);
    }
    .vocab-panel .result-accent-line--learning {
        background: var(--color-gold);
    }

    /* Hide part-of-speech badge + status dot entirely on mobile.
       The learn-mode card surfaces this; the scan list doesn't need it. */
    .vocab-panel .result-meta {
        display: none !important;
    }

    /* Text column — stacked, generous ma */
    .vocab-panel .result-compact {
        display: block;
        min-width: 0;
    }
    .vocab-panel .result-main {
        min-width: 0;
    }

    /* Japanese word — warm sumi ink, matches mg-japanese */
    .vocab-panel .result-japanese {
        font-family: var(--font-jp);
        font-size: 22px;
        font-weight: 400;
        color: var(--color-jp-text);
        margin-bottom: 4px;
        line-height: 1.4;
        letter-spacing: 0.03em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Romaji · English row — tertiary rhythm */
    .vocab-panel .result-details {
        font-family: var(--font-ui);
        font-size: 13px;
        color: var(--color-romaji);
        line-height: 1.45;
        display: block;
    }
    .vocab-panel .result-romanization {
        color: var(--color-romaji);
        font-style: italic;
        font-weight: 400;
    }
    .vocab-panel .result-separator {
        color: var(--color-divider);
        margin: 0 6px;
        font-weight: 300;
    }
    .vocab-panel .result-english {
        color: var(--color-stone);
        font-weight: 400;
    }

    /* SUMI-BRUSH highlight — ink underline stroke, not a pill
       The match looks like paper-and-ink, not a tag.
       The gold sits in the same 62%/38% ratio as a sumi brush stroke. */
    .vocab-panel .result-japanese mark,
    .vocab-panel .result-romanization mark,
    .vocab-panel .result-english mark {
        background: linear-gradient(
            transparent 62%,
            rgba(201, 169, 110, 0.28) 62%,
            rgba(201, 169, 110, 0.28) 92%,
            transparent 92%
        );
        color: inherit;
        padding: 0 1px;
        margin: 0;
        border-radius: 0;
    }
    .vocab-panel .result-japanese mark {
        background: linear-gradient(
            transparent 70%,
            rgba(201, 169, 110, 0.32) 70%,
            rgba(201, 169, 110, 0.32) 96%,
            transparent 96%
        );
    }

    /* Long-press audio state — kintsugi gold hairline beneath the word.
       The ONLY place gold appears on mobile search — earned by holding.
       This is the transcendent moment: "this app treats Japanese as a sound." */
    .vocab-panel .vocab-search-result.audio-playing {
        background: transparent;
    }
    .vocab-panel .vocab-search-result.audio-playing .result-japanese {
        color: var(--color-jp-text);
    }
    .vocab-panel .vocab-search-result.audio-playing::after {
        content: "";
        position: absolute;
        left: 76px;
        right: 0;
        bottom: 0;
        height: 1.5px;
        background: var(--color-gold);
        opacity: 0.6;
        transform-origin: left center;
        animation: audioWaveSweep 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    @keyframes audioWaveSweep {
        0%   { transform: scaleX(0); opacity: 0.8; }
        60%  { transform: scaleX(1); opacity: 0.6; }
        100% { transform: scaleX(1); opacity: 0; }
    }

    /* Audio pulse on thumbnail — kintsugi ring breathes outward.
       Pairs with the gold hairline sweep for a cohesive audio moment. */
    .vocab-panel .vocab-search-result.audio-playing .result-thumb {
        animation: thumbAudioPulse 0.6s ease-in-out 2;
    }
    @keyframes thumbAudioPulse {
        0%, 100% {
            box-shadow:
                0 2px 6px rgba(44, 28, 10, 0.06),
                0 0 0 0.5px rgba(216, 210, 200, 0.6);
        }
        50% {
            box-shadow:
                0 0 0 3px rgba(201, 169, 110, 0.2),
                0 2px 6px rgba(44, 28, 10, 0.06),
                0 0 0 0.5px rgba(201, 169, 110, 0.15);
        }
    }

    /* Footer — desktop keyboard hints hidden on mobile */
    .vocab-panel .panel-footer {
        display: none;
    }

    /* ========================================
       NO-RESULTS STATE — calm Japanese phrase
       Not an error, not an illustration. Just breath.
       ======================================== */
    .vocab-panel .vocab-search-empty {
        padding: 72px 20px 48px;
        text-align: center;
    }
    .vocab-panel .vocab-search-empty-icon {
        display: none; /* the SVG magnifying glass is chrome, drop it */
    }
    .vocab-panel .vocab-search-empty-text {
        font-family: var(--font-ui);
        color: var(--color-faint);
        font-size: 14px;
        line-height: 1.7;
    }
    .vocab-panel .vocab-search-empty-text::before {
        content: "見つかりません";
        display: block;
        font-family: var(--font-jp);
        font-size: 20px;
        color: var(--color-stone);
        letter-spacing: 0.04em;
        margin-bottom: 12px;
        font-weight: 400;
    }
    .vocab-panel .vocab-search-empty-text strong {
        color: var(--color-ink);
        font-weight: 500;
    }

    /* Loading spinner — gold ink, smaller */
    .vocab-panel .vocab-search-loading {
        padding: 40px 20px;
    }
    .vocab-panel .vocab-search-spinner {
        width: 22px;
        height: 22px;
        border-width: 2px;
        border-color: rgba(201, 169, 110, 0.15);
        border-top-color: var(--color-gold);
    }

    /* Branding slide-out — slightly faster than panel entrance */
    body.vocab-panel-open .app-branding-topleft {
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
    }
}

/* Vocab panel available in all modes (video learn, revision, focus, standard) */

/* ========================================
   Slide Branding Out When Panel Opens
   ======================================== */
body.vocab-panel-open .app-branding-topleft {
    transform: translateX(-120%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease;
}

/* Hide old search modal elements when panel is active */
body:has(.vocab-panel) .search-modal,
body:has(.vocab-panel) .search-modal-overlay {
    display: none !important;
}

/* ========================================
   MINI-PREVIEW CARDS (All Modes)
   Elegant preview on hover, replaces compact view
   ======================================== */

/* Compact result row - default view */
.result-compact {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

/* Mini-preview container - hidden by default, always full width */
.mini-preview {
    display: none;
    width: 100%;
    box-sizing: border-box;
    padding: 14px;
    background: rgba(61, 90, 128, 0.06);
    border-radius: 14px;
    gap: 14px;
    align-items: center;
    animation: miniPreviewFadeIn 0.2s ease-out;
}

@keyframes miniPreviewFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* Show mini-preview on hover - HIDE compact, SHOW preview */
.vocab-search-result.previewing,
.vocab-search-result.preview-expanded {
    flex-direction: column;
    align-items: stretch;
}

.vocab-search-result.previewing .result-compact,
.vocab-search-result.preview-expanded .result-compact {
    display: none;
}

.vocab-search-result.previewing .mini-preview,
.vocab-search-result.preview-expanded .mini-preview {
    display: flex;
    width: 100%;
}

/* Mini-preview image thumbnail */
.mini-preview-image {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: 0 3px 12px rgba(44, 44, 44, 0.07);
}

/* Mini-preview text content */
.mini-preview-content {
    flex: 1;
    min-width: 0;
}

.mini-preview-japanese {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2C2C2C;
    margin-bottom: 2px;
    line-height: 1.3;
}

.mini-preview-roma {
    font-size: 0.85rem;
    color: #3D5A80;
    margin-bottom: 3px;
    font-weight: 500;
}

.mini-preview-english {
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.35;
    margin-bottom: 4px;
}

.mini-preview-pos {
    display: inline-block;
    font-size: 0.7rem;
    color: #3D5A80;
    background: rgba(61, 90, 128, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 500;
}

/* ========================================
   REVISION MODE: Preview-Only Indicator
   ======================================== */

/* Revision mode: no pointer cursor (can't jump) */
.vocab-search-result.revision-preview-mode {
    cursor: default;
    position: relative;
}

/* Visual indicator for preview-only */
.vocab-search-result.revision-preview-mode::before {
    content: '👁️';
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.75rem;
    opacity: 0.4;
    z-index: 1;
}

/* Expanded state styling */
.vocab-search-result.preview-expanded {
    background: rgba(61, 90, 128, 0.08);
}

/* Revision mode panel header hint */
body.revision-mode .vocab-panel .panel-header::after {
    content: 'Preview Only';
    display: block;
    font-size: 0.75rem;
    color: #3D5A80;
    opacity: 0.7;
    margin-top: 4px;
}