/* ═══════════════════════════════════════════════════════════════
   Lore Panel — Floating panel (matches LexiconPanel style)
   ═══════════════════════════════════════════════════════════════ */

/* ── Panel container (fixed, bottom-left) ── */
.lore-panel {
    position: fixed; bottom: 0; left: 1.5rem; width: 340px;
    background: #0d0d1a; border: 1px solid #1a3a6b; border-bottom: none;
    border-radius: 8px 8px 0 0; z-index: 1000;
    display: flex; flex-direction: column; max-height: 520px;
    transition: background 0.3s ease, border-color 0.3s ease;
    font-family: 'Cinzel', serif;
}

/* ── Header ── */
.lore-panel-header {
    background: #0a0a20; border-bottom: 1px solid #1a3a6b;
    padding: 0.5rem 1rem; display: flex; align-items: center;
    gap: 0.5rem; border-radius: 8px 8px 0 0;
}
.lore-panel-header span:first-child { color: #d4a843; font-size: 13px; font-weight: bold; flex: 1; }
.lore-panel-count {
    background: #1a1208; color: #d4a843; font-size: 11px; font-family: monospace;
    padding: 1px 6px; border-radius: 8px; border: 1px solid #333;
}
.lore-close-btn {
    background: none; border: none; color: #5a8aaa; cursor: pointer; font-size: 16px;
}

/* ── Search bar ── */
.lore-search-row { padding: 0.5rem; border-bottom: 1px solid #1a3a6b; }
.lore-search-input {
    width: 100%; background: #0a0a14; border: 1px solid #1a3a6b; border-radius: 6px;
    color: #7fc3e8; padding: 0.4rem 0.6rem; font-size: 13px; box-sizing: border-box;
}
.lore-search-input:focus { outline: none; border-color: #d4a843; }

/* ── Journal scroll area ── */
.lore-journal {
    flex: 1; overflow-y: auto; padding: 0.5rem;
    display: flex; flex-direction: column; gap: 0.25rem;
    scrollbar-width: thin; scrollbar-color: #333 #0a0a0a;
}
.lore-journal::-webkit-scrollbar { width: 6px; }
.lore-journal::-webkit-scrollbar-track { background: #0a0a0a; }
.lore-journal::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* ── Lore fragment entry ── */
.lore-entry {
    padding: 0.5rem 0.6rem;
    background: #0a0608;
    border-left: 3px solid #8b0000;
    border-radius: 0 6px 6px 0;
    animation: loreSlideIn 0.5s ease-out;
    transition: border-color 0.3s;
}
.lore-entry:hover { border-left-color: #d4a843; }
.lore-entry-title {
    font-size: 12px; color: #d4a843; letter-spacing: 1px; margin-bottom: 4px;
    text-transform: uppercase;
}
.lore-entry-text {
    font-family: 'Georgia', serif;
    font-size: 13px; line-height: 1.6; color: #bbb; font-style: italic;
}
.lore-entry-footer {
    display: flex; align-items: center; justify-content: space-between; margin-top: 4px;
}
.lore-entry-time { font-size: 10px; color: #444; font-family: monospace; }
.lore-play-btn {
    background: none; border: 1px solid #333; color: #666;
    width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
    font-size: 10px; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; padding: 0; line-height: 1;
}
.lore-play-btn:hover { border-color: #d4a843; color: #d4a843; }
.lore-play-btn.playing { border-color: #d4a843; color: #d4a843; background: #1a1208; }
.lore-entry-speaking { border-left-color: #d4a843; background: #120e08; }

/* ── Controls bar (footer) ── */
.lore-controls {
    display: flex; align-items: center; gap: 6px;
    padding: 0.4rem 0.6rem;
    border-top: 1px solid #1a3a6b;
}
.lore-btn {
    background: none; border: 1px solid #333; color: #888;
    padding: 3px 8px; border-radius: 4px; cursor: pointer;
    font-size: 11px; transition: all 0.2s;
}
.lore-btn:hover { border-color: #8b0000; color: #d4a843; }
.lore-btn.active { border-color: #d4a843; color: #d4a843; background: #1a1208; }
.lore-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Volume slider ── */
.lore-volume {
    flex: 0 0 60px;
    -webkit-appearance: none; appearance: none;
    height: 4px; background: #333; border-radius: 2px; outline: none;
}
.lore-volume::-webkit-slider-thumb {
    -webkit-appearance: none; width: 12px; height: 12px;
    border-radius: 50%; background: #d4a843; cursor: pointer;
}

/* ── Config drawer ── */
.lore-config {
    padding: 0.5rem 0.6rem;
    background: #0a0a0a; border-top: 1px solid #1a1a1a;
}
.lore-config-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.lore-config-label {
    font-size: 10px; letter-spacing: 1px; color: #666;
    min-width: 45px; text-transform: uppercase;
}
.lore-config select, .lore-config input[type="range"] {
    background: #111; border: 1px solid #333; color: #aaa;
    padding: 3px 6px; border-radius: 4px; font-size: 11px;
}

/* ── Status indicator ── */
.lore-status { font-size: 11px; color: #555; font-family: monospace; margin-left: auto; }
.lore-status.speaking { color: #d4a843; }

/* ── Empty / no-results ── */
.lore-empty { text-align: center; padding: 2rem 1rem; color: #5a8aaa; font-size: 13px; }
.lore-empty-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.lore-no-results { text-align: center; padding: 1rem; color: #5a8aaa; font-size: 13px; }

/* ── Fetching indicator ── */
.lore-fetching-indicator {
    font-size: 12px; animation: lorePulse 1s ease-in-out infinite;
}
.lore-status.fetching {
    color: #d4a843; animation: lorePulse 1s ease-in-out infinite;
    letter-spacing: 2px; font-size: 10px; text-transform: uppercase;
}

@keyframes loreSlideIn {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes lorePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ═══════════════════════════════════════════════════════════════
   Light theme overrides
   ═══════════════════════════════════════════════════════════════ */
[data-bs-theme="light"] .lore-panel { background: #FFFFFF; border-color: #E5E7EB; }
[data-bs-theme="light"] .lore-panel-header { background: #F9FAFB; border-bottom-color: #E5E7EB; }
[data-bs-theme="light"] .lore-panel-header span:first-child { color: #92400E; }
[data-bs-theme="light"] .lore-panel-count { background: #FEF3C7; color: #92400E; border-color: #E5E7EB; }
[data-bs-theme="light"] .lore-close-btn { color: #6B7280; }
[data-bs-theme="light"] .lore-search-row { border-bottom-color: #E5E7EB; }
[data-bs-theme="light"] .lore-search-input { background: #FFFFFF; border-color: #D1D5DB; color: #1F2937; }
[data-bs-theme="light"] .lore-search-input:focus { border-color: #B45309; }
[data-bs-theme="light"] .lore-entry { background: #FFFBF5; border-left-color: #DC7633; }
[data-bs-theme="light"] .lore-entry:hover { border-left-color: #B45309; }
[data-bs-theme="light"] .lore-entry-title { color: #92400E; }
[data-bs-theme="light"] .lore-entry-text { color: #4B5563; }
[data-bs-theme="light"] .lore-entry-time { color: #9CA3AF; }
[data-bs-theme="light"] .lore-entry-speaking { background: #FEF3C7; border-left-color: #B45309; }
[data-bs-theme="light"] .lore-play-btn { border-color: #D1D5DB; color: #9CA3AF; }
[data-bs-theme="light"] .lore-play-btn:hover { border-color: #B45309; color: #92400E; }
[data-bs-theme="light"] .lore-play-btn.playing { border-color: #B45309; color: #92400E; background: #FEF3C7; }
[data-bs-theme="light"] .lore-controls { border-top-color: #E5E7EB; }
[data-bs-theme="light"] .lore-btn { border-color: #D1D5DB; color: #6B7280; }
[data-bs-theme="light"] .lore-btn:hover { border-color: #DC7633; color: #92400E; }
[data-bs-theme="light"] .lore-btn.active { border-color: #B45309; color: #92400E; background: #FEF3C7; }
[data-bs-theme="light"] .lore-volume { background: #D1D5DB; }
[data-bs-theme="light"] .lore-volume::-webkit-slider-thumb { background: #B45309; }
[data-bs-theme="light"] .lore-config { background: #F9FAFB; border-top-color: #E5E7EB; }
[data-bs-theme="light"] .lore-config-label { color: #6B7280; }
[data-bs-theme="light"] .lore-config select { background: #fff; border-color: #D1D5DB; color: #374151; }
[data-bs-theme="light"] .lore-status { color: #9CA3AF; }
[data-bs-theme="light"] .lore-status.speaking { color: #B45309; }
[data-bs-theme="light"] .lore-empty { color: #9CA3AF; }
[data-bs-theme="light"] .lore-no-results { color: #6B7280; }
[data-bs-theme="light"] .lore-journal { scrollbar-color: #D1D5DB #FAFAF9; }
[data-bs-theme="light"] .lore-journal::-webkit-scrollbar-track { background: #FAFAF9; }
[data-bs-theme="light"] .lore-journal::-webkit-scrollbar-thumb { background: #D1D5DB; }