/* ============ МОБІЛЬНА АДАПТАЦІЯ РІДЕРА ============ */

/* Планшети (до 1024px) */
@media (max-width: 1024px) {
    .reader-container {
        max-width: 100%;
        padding: 30px 20px;
    }
    
    .book-title {
        max-width: 300px;
    }
    
    .settings-panel {
        width: 350px;
    }
}

/* Малі планшети та великі телефони (до 768px) */
@media (max-width: 768px) {
    /* Хедер */
    .reader-header {
        height: 56px;
        padding: 0 12px;
        background: var(--bg-primary, #ffffff) !important;
        z-index: 1000;
        position: sticky;
        top: 0;
        width: 100%;
        touch-action: manipulation;
        pointer-events: auto !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        isolation: isolate;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1 !important;
        border-bottom: 1px solid var(--border-color, #e2e8f0);
    }
    
    .back-text {
        display: none;
    }
    
    .book-title {
        max-width: 200px;
        font-size: 15px;
    }
    
    /* Ховаємо кнопки шрифту на мобільних */
    .font-size-controls {
        display: none;
    }
    
    .icon-btn {
        width: 40px;
        height: 40px;
    }
    
    .reader-container {
        margin-top: 56px;
        padding: 20px 15px;
        min-height: calc(100vh - 56px);
    }
    
    .book-content {
        font-size: 16px;
        padding: 10px 0;
    }
    
    .word {
        padding: 2px 4px;
        margin: -2px -4px;
    }
    
    /* Панель налаштувань - використовуємо right, не left */
    .settings-panel {
        width: 100%;
        right: -100%;
        left: auto;
        top: 56px;
        height: calc(100vh - 56px);
        position: fixed;
        z-index: 1000;
        transition: right 0.3s ease-out;
        background-color: var(--bg-primary, #ffffff) !important;
        border-right: 1px solid var(--border-color, #e2e8f0);
        box-shadow: none;
        overflow-y: auto;
    }
    
    .settings-panel.open {
        right: 0;
        left: auto;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    }
    
    /* ============ ВИДАЛЕНО ПРОБЛЕМНІ ПРАВИЛА ============ */
    /* НЕ додаємо pointer-events: auto !important до кнопок */
    
    .reader-sidebar {
        top: 56px;
        height: calc(100vh - 56px);
        width: 280px;
    }
    
    .translation-overlay {
        top: 56px;
        padding: 20px;
    }
    
    .translation-overlay h3 {
        font-size: 20px;
    }
    
    .spinner {
        width: 50px;
        height: 50px;
    }
    
    .progress-bar {
        width: 250px;
    }
    
    .navigation {
        margin: 20px 0 30px 0;
        padding: 0 10px;
    }
    
    .pagination {
        padding: 6px 12px;
        gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .page-number {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
    }
    
    .page-nav {
        min-width: 32px;
        height: 32px;
    }
    
    .page-dots {
        font-size: 13px;
        padding: 0 2px;
    }
    
    .modal-content {
        max-width: 90%;
        max-height: 90vh;
    }
    
    .notification-container {
        top: 70px;
        right: 15px;
        left: 15px;
        max-width: none;
        pointer-events: none;
    }
    
    .notification {
        width: 100%;
        pointer-events: auto;
    }
    
    .ad-content {
        padding: 30px 20px;
        max-width: 90%;
    }
    
    .ad-block {
        min-height: 150px;
    }
    
    .ad-timer {
        font-size: 20px;
    }
    
    .scroll-top-btn {
        bottom: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
    }
    
    .voice-select {
        font-size: 12px !important;
        padding: 8px 6px;
    }
    
    .voice-select optgroup {
        font-size: 13px !important;
        font-weight: 600;
    }
    
    .voice-select option {
        font-size: 11px !important;
        padding: 4px 4px !important;
        white-space: normal;
        word-break: break-word;
    }
    
    .settings-item:has(.voice-select) {
        min-width: 100%;
    }
}

/* Решта медіазапитів залишається без змін... */

/* ============ ДОДАТКОВІ ВИПРАВЛЕННЯ ============ */
.icon-btn,
.page-number,
.page-nav,
.back-link,
.settings-panel button,
.mode-btn,
.theme-btn,
.close-btn,
.menu-item,
.tts-button {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.icon-btn,
.page-number,
.page-nav,
.back-link,
.mode-btn,
.theme-btn,
.close-btn {
    touch-action: manipulation;
}

#word-context-menu {
    z-index: 10001 !important;
}

.page-number,
.page-nav {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

@media (max-width: 360px) {
    .page-number,
    .page-nav {
        min-width: 40px;
        min-height: 40px;
    }
}

@supports (-webkit-touch-callout: none) {
    .icon-btn,
    .page-number,
    .page-nav,
    .back-link {
        -webkit-tap-highlight-color: rgba(139, 92, 246, 0.2);
    }
    
    * {
        -webkit-tap-highlight-color: transparent;
    }
}

.settings-panel {
    pointer-events: auto;
}

/* ============ ВИДАЛЕНО БЛОК З POINTER-EVENTS: AUTO !important ============ */
/* Більше не додаємо ці правила, які були в новій версії:
.settings-panel button,
.settings-panel .icon-btn,
.settings-panel .theme-icon-btn {
    pointer-events: auto !important;
    z-index: 10002;
}
*/

button, 
.btn, 
.icon-btn, 
.page-number, 
.page-nav, 
.back-link,
.mode-btn,
.theme-btn,
.close-btn,
.menu-item,
.tts-button,
[role="button"],
a[href],
input[type="button"],
input[type="submit"] {
    cursor: pointer;
    pointer-events: auto !important;
}

.settings-panel *,
.reader-sidebar *,
.modal-content * {
    pointer-events: auto;
}