/**
 * Reading Progress Tracker Styles
 * Bottom indicator with chapter/section info and progress bar matching top bar
 */

/* Hide on welcome page - no chapter selected */
body:has(.welcome-page-active) .reading-progress-indicator,
body:has(.book-welcome-page) .reading-progress-indicator {
    display: none !important;
}

.reading-progress-indicator {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-primary, #ffffff);
    border-top: 1px solid var(--border-color, #e5e7eb);
    padding: 6px 16px 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, opacity 0.3s ease;
    font-size: 0.8125rem;
}

/* When chatbot panel is open, add right padding to avoid overlap */
.chat-panel:not(.collapsed) ~ .reading-progress-indicator,
body:has(.chat-panel:not(.collapsed)) .reading-progress-indicator {
    padding-right: calc(var(--chat-panel-width, 360px) + 16px);
}

/* When chatbot panel is collapsed (vertical bar), still add right padding in LTR */
body:has(.chat-panel.collapsed.position-right) .reading-progress-indicator {
    padding-right: calc(var(--chat-collapsed-width, 50px) + 16px);
}

/* RTL: pad left instead */
[dir="rtl"] .chat-panel:not(.collapsed) ~ .reading-progress-indicator,
body[dir="rtl"]:has(.chat-panel:not(.collapsed)) .reading-progress-indicator {
    padding-right: 16px;
    padding-left: calc(var(--chat-panel-width, 360px) + 16px);
}

/* RTL: collapsed panel on left side */
body[dir="rtl"]:has(.chat-panel.collapsed) .reading-progress-indicator {
    padding-left: calc(var(--chat-collapsed-width, 50px) + 16px);
}

.reading-progress-indicator.hidden {
    transform: translateY(100%);
    opacity: 0;
}

/* Top row: chapter/section + stats */
.progress-tracker-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 20px;
}

.progress-tracker-chapter {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary, #1f2937);
    font-weight: 600;
    font-size: 0.8125rem;
}

.progress-tracker-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: var(--text-secondary, #6b7280);
    font-size: 0.75rem;
}

.progress-percent-text {
    color: var(--text-primary, #1f2937);
    font-weight: 600;
    direction: ltr;
    unicode-bidi: embed;
}

.progress-separator {
    opacity: 0.4;
}

.progress-time-text {
    color: var(--text-secondary, #6b7280);
}

/* Bottom progress bar — matches top bar gradient */
.reading-progress-indicator .tracker-bar {
    position: relative;
    width: calc(100% + 32px);
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    margin: 0 -16px;
    overflow: hidden;
}

.reading-progress-indicator .tracker-bar .tracker-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color, #2c5aa0), var(--gold-color, #d4af37));
    width: 0%;
    transition: width 0.2s ease;
}

/* RTL support */
[dir="rtl"] .progress-tracker-chapter {
    text-align: right;
}

[dir="rtl"] .progress-tracker-stats {
    direction: rtl;
}

/* Mobile adjustments */
@media (max-width: 965px) {
    .reading-progress-indicator {
        display: none !important;
    }
}

/* Dark theme */
[data-theme="dark"] .reading-progress-indicator {
    background: var(--bg-primary, #1f2937);
    border-top-color: var(--border-color, #374151);
}

[data-theme="dark"] .tracker-bar {
    background: rgba(255, 255, 255, 0.1);
}

/* Sepia theme */
[data-theme="sepia"] .reading-progress-indicator {
    background: var(--bg-primary, #f4ecd8);
    border-top-color: var(--border-color, #d4c5a9);
}

[data-theme="sepia"] .tracker-bar {
    background: #d4c8b4;
}

/* High contrast theme */
[data-theme="high-contrast"] .reading-progress-indicator {
    background: #000000;
    border-top-color: #ffffff;
}

[data-theme="high-contrast"] .tracker-bar {
    background: #333333;
}

[data-theme="high-contrast"] .tracker-fill {
    background: #ffff00 !important;
}

[data-theme="high-contrast"] .progress-tracker-chapter,
[data-theme="high-contrast"] .progress-percent-text {
    color: #ffffff;
}

[data-theme="high-contrast"] .progress-tracker-stats {
    color: #cccccc;
}

/* Print - hide */
@media print {
    .reading-progress-indicator {
        display: none !important;
    }
}