/* ============================================================
   Icecream Style Web Reader — стили
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    height: 100vh;
    background-color: #2c3e50; /* тёмный фон, книга контрастно выделяется */
    overflow: hidden;
}

/* --- САЙДБАР (строгий плоский дизайн) --- */
.sidebar {
    width: 260px;
    background-color: #2b2b36;   /* тёмно-графитовый */
    color: #b5b5be;              /* неактивный текст */
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 10px rgba(0,0,0,0.5);
    z-index: 100;
}

.sidebar-header {
    padding: 24px 20px;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;              /* активный текст */
    border-bottom: 1px solid #3f3f4e;
    margin-bottom: 10px;
}

.nav-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Пункты меню: при наведении светлеют до #383846,
   активный — оранжевая полоска слева #f39c12 */
.nav-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
    border-left: 4px solid transparent;
    position: relative;
    font-size: 14px;
}

.nav-item:last-child { margin-top: auto; } /* «Настройки» прижаты к низу */

.nav-icon { width: 20px; height: 20px; margin-right: 15px; fill: currentColor; flex: none; }

.nav-item:hover { background-color: #383846; color: #ffffff; }
.nav-item.active { background-color: #383846; color: #ffffff; border-left-color: #f39c12; }

/* Скрытый input поверх пункта «Добавить книгу» */
#file-input {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}

/* --- ГЛАВНАЯ ОБЛАСТЬ --- */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 0;
}

/* Контейнер книги: сепия/слоновая кость, закруглённые края, внешняя тень */
.book-container {
    position: relative;
    width: 860px;
    height: 580px;
    background: #fdf6e3;
    border-radius: 5px 15px 15px 5px;
    box-shadow:
        inset 4px 0 10px rgba(0,0,0,0.05),
        inset -4px 0 10px rgba(0,0,0,0.05),
        0 20px 40px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Масштабирование на узких экранах */
@media (max-width: 1180px) { .book-container { zoom: 0.85; } }
@media (max-width: 1020px) { .book-container { zoom: 0.7; } }
@media (max-width: 860px)  { .book-container { zoom: 0.55; } }
@media (max-width: 700px)  { .book-container { zoom: 0.45; } }

/* Корешок: градиент имитирует внутреннюю тень от сгиба страниц */
.book-spine {
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: 60px; margin-left: -30px;
    background: linear-gradient(to right,
        rgba(255,255,255,0) 0%,
        rgba(0,0,0,0.05) 40%,
        rgba(0,0,0,0.15) 50%,
        rgba(0,0,0,0.05) 60%,
        rgba(255,255,255,0) 100%);
    z-index: 10;
    pointer-events: none;
}

/* Вьюпорт строго по ширине двух колонок */
.book-viewport {
    width: 760px;
    height: 500px;
    overflow: hidden;
    position: relative;
    z-index: 12;
}

.book-content {
    height: 100%;
    column-width: 340px;
    column-gap: 80px;
    transition: transform 0.4s ease-in-out;
    text-align: justify;             /* выравнивание по ширине */
    line-height: 1.6;
    font-size: 18px;
    font-family: 'Georgia', serif;   /* элегантная типографика */
    color: #333;
    overflow-wrap: anywhere;
}

.book-content p { text-indent: 1.5em; margin-top: 0; margin-bottom: 0.5em; } /* красная строка */
.book-content h2 { column-span: none; }
/* уведомление о частичном OCR-распознавании */
.book-content .ocr-note {
    text-indent: 0; font-size: 0.85em; font-style: italic; opacity: 0.75;
    border-left: 3px solid #f39c12; padding-left: 10px;
}

/* Невидимые кликабельные зоны на левой/правой половине разворота.
   z-index 13 — НАД вьюпортом (иначе зоны не получают клики), но ПОД кнопками */
.click-zone {
    position: absolute; top: 0; bottom: 0; width: 42%;
    cursor: pointer; z-index: 13;
}
.zone-prev { left: 2%; }
.zone-next { right: 2%; }

/* Кнопки листания по краям */
.nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.03);
    border: none; font-size: 24px; padding: 20px 10px;
    cursor: pointer; border-radius: 5px; transition: 0.2s; z-index: 20;
    color: #333;
}
.nav-btn:hover { background: rgba(0,0,0,0.1); }
.nav-prev { left: 10px; }
.nav-next { right: 10px; }

.page-counter { position: absolute; bottom: 20px; color: #999; font-size: 14px; }
.status-msg   { position: absolute; top: 16px; color: #e74c3c; font-size: 13px; }

/* --- ТЕМЫ ФОНА КНИГИ --- */
.book-container.theme-light { background: #ffffff; }
.book-container.theme-light .book-content, .book-container.theme-light .nav-btn { color: #222222; }
.book-container.theme-gray  { background: #e8eaed; }
.book-container.theme-gray  .book-content, .book-container.theme-gray .nav-btn  { color: #2c3e50; }
.book-container.theme-dark  { background: #26262b; }
.book-container.theme-dark  .book-content, .book-container.theme-dark .nav-btn  { color: #d8d5cf; }
.book-container.theme-dark  .nav-btn:hover { background: rgba(255,255,255,0.12); }

/* --- КНОПКА «НА ВЕСЬ ЭКРАН» --- */
.fullscreen-btn {
    position: absolute; top: 16px; right: 20px; z-index: 50;
    background: rgba(255,255,255,0.08); color: #b5b5be;
    border: 1px solid rgba(255,255,255,0.15);
    font-size: 20px; width: 42px; height: 42px;
    border-radius: 8px; cursor: pointer; transition: 0.2s;
}
.fullscreen-btn:hover { background: rgba(255,255,255,0.18); color: #ffffff; }

/* --- ПАНЕЛЬ НАСТРОЕК (выезжает слева, рядом с сайдбаром) --- */
.settings-panel {
    position: fixed; top: 0; bottom: 0; left: 260px;
    width: 270px; padding: 20px;
    background: #2b2b36; color: #b5b5be;
    box-shadow: 2px 0 10px rgba(0,0,0,0.5);
    transform: translateX(-105%);
    transition: transform 0.25s ease, visibility 0.25s;
    visibility: hidden;       /* закрытая панель не перехватывает клики */
    pointer-events: none;
    z-index: 300;
    overflow-y: auto;
}
.settings-panel.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

.settings-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 17px; font-weight: 600; color: #ffffff;
    padding-bottom: 14px; margin-bottom: 14px;
    border-bottom: 1px solid #3f3f4e;
}
.settings-close {
    background: none; border: none; color: #b5b5be;
    font-size: 22px; cursor: pointer; line-height: 1;
}
.settings-close:hover { color: #ffffff; }

.settings-group { margin-bottom: 22px; }
.settings-label { font-size: 13px; margin-bottom: 10px; }

/* Образцы тем: кружки с реальным цветом фона */
.theme-row { display: flex; gap: 10px; }
.theme-btn {
    width: 36px; height: 36px; border-radius: 50%;
    border: 2px solid transparent; cursor: pointer; transition: 0.2s;
}
.theme-btn:hover { transform: scale(1.1); }
.theme-btn.selected { border-color: #f39c12; }
.theme-sepia { background: #fdf6e3; }
.theme-light { background: #ffffff; }
.theme-gray  { background: #e8eaed; }
.theme-dark  { background: #26262b; border: 1px solid #555; }

.settings-select {
    width: 100%; padding: 9px 10px;
    background: #383846; color: #ffffff;
    border: 1px solid #4a4a58; border-radius: 6px;
    font-size: 13px; cursor: pointer;
}
.settings-range { width: 100%; accent-color: #f39c12; cursor: pointer; }

.settings-btn {
    width: 100%; padding: 11px;
    background: #383846; color: #ffffff;
    border: 1px solid #4a4a58; border-radius: 6px;
    font-size: 14px; cursor: pointer; transition: 0.2s;
}
.settings-btn:hover { background: #444452; }

/* В полноэкранном режиме панель настроек открывается от левого края */
:fullscreen .settings-panel, :-webkit-full-screen .settings-panel { left: 0; }

/* --- ПАНЕЛЬ БИБЛИОТЕКИ --- */
.lib-count { font-size: 12px; color: #8f8f99; margin-left: 8px; }

.book-card {
    display: flex; align-items: center;
    padding: 12px 10px; margin-bottom: 8px;
    background: #383846; border-radius: 8px;
    cursor: pointer; transition: 0.2s;
    border-left: 4px solid transparent;
}
.book-card:hover { background: #444452; border-left-color: #f39c12; }
.book-card.current { border-left-color: #f39c12; }

.book-card .book-title {
    flex: 1; font-size: 13px; color: #ffffff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.book-card .book-meta { font-size: 11px; color: #8f8f99; margin-top: 3px; }

.book-card .book-delete {
    background: rgba(231,76,60,0.12); border: none; color: #e08080;
    font-size: 14px; cursor: pointer;
    flex: none; width: 28px; height: 28px;
    border-radius: 6px; transition: 0.2s;
    margin-left: 8px;
}
.book-card .book-delete:hover { background: #e74c3c; color: #ffffff; }

/* Полоса прогресса чтения в карточке */
.progress-wrap { margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.progress-bar {
    flex: 1; height: 4px; border-radius: 2px;
    background: #2b2b36; overflow: hidden;
}
.progress-fill { height: 100%; background: #f39c12; border-radius: 2px; }
.progress-pct { font-size: 11px; color: #b5b5be; flex: none; min-width: 32px; text-align: right; }

.library-empty {
    text-align: center; color: #8f8f99;
    font-size: 13px; padding: 30px 10px; line-height: 1.6;
}

/* Подсказка в полноэкранном режиме */
.fs-hint {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.55); color: #fff;
    padding: 8px 16px; border-radius: 20px;
    font-size: 13px; z-index: 400;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.fs-hint.visible { opacity: 1; }