/* Origin by https://github.com/jiang068/epubjs */
body {
    margin: 0;
    /* 不强制指定字体，让EPUB内容使用自己的字体设置 */
    font-family: inherit;
    background: #fff;
    color: #000;
    display: flex;
    height: 100vh;
    overflow: hidden;
}

body.night {
    background: #121212;
    color: #e0e0e0;
}

#toc {
    width: 220px;
    border-right: 1px solid #ccc;
    overflow-y: auto;
    padding: 0.5em;
    background: #f9f9f9;
    /* 为界面元素指定合适的字体 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "微软雅黑", sans-serif;
}

body.night #toc {
    background: #1f1f1f;
    border-color: #444;
    color: #e0e0e0;
}

/* 确保夜间模式下目录内容颜色正确 */
body.night #toc h2,
body.night #toc li {
    color: #e0e0e0 !important;
}

body.night #toc li:hover,
body.night #toc li.active {
    background: #0078d7;
    color: white !important;
}

#toc h2 {
    font-size: 1.2em;
    margin-top: 0;
}

#toc ul {
    list-style: none;
    padding-left: 0;
}

#toc li {
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 3px;
}

#toc li:hover,
#toc li.active {
    background: #0078d7;
    color: white;
}

#main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

#toolbar {
    background: #eee;
    padding: 0.1em 0.5em;
    /* 减少上下内边距 */
    display: flex;
    align-items: center;
    gap: 6px;
    /* 减少按钮间距 */
    user-select: none;
    /* 为工具栏指定合适的字体 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "微软雅黑", sans-serif;
    flex-wrap: nowrap;
    /* 不换行，保持水平排列 */
    min-height: 28px;
    /* 减少最小高度 */
    justify-content: space-between;
    /* 标题在左，按钮组在右 */
}

body.night #toolbar {
    background: #222;
    color: #e0e0e0;
}

#title {
    font-weight: bold;
    font-size: 1.1em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    /* 允许flex收缩 */
    flex: 1;
    /* 占用剩余空间 */
    margin-right: 10px;
    /* 与按钮组的间距 */
}

/* 按钮组容器 */
.toolbar-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
    /* 按钮间的小间距 */
    flex-shrink: 0;
    /* 按钮组不被压缩 */
}

button {
    padding: 0.1em 0.4em;
    /* 减少按钮内边距 */
    cursor: pointer;
    background: #0078d7;
    border: none;
    color: white;
    border-radius: 3px;
    font-size: 0.9em;
    /* 稍微减小字体 */
    /* 为按钮指定合适的字体 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "微软雅黑", sans-serif;
    flex-shrink: 0;
    /* 防止按钮被压缩 */
    white-space: nowrap;
    /* 防止按钮文字换行 */
}

button:disabled {
    background: #aaa;
    cursor: default;
}

#viewer {
    flex: 1;
    overflow: hidden;
}

#viewport {
    width: 100%;
    height: 100%;
    margin: 0 auto !important;
}

/* 滑动翻页动画效果 */
#viewport {
    transition: none;
    position: relative;
}

#viewport.swipe-transition {
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

/* 滑动过程中的视觉反馈 */
#viewport.swiping {
    transition: none;
}

/* 下一页滑动效果 */
#viewport.swipe-left {
    transform: translateX(-30px);
    opacity: 0.7;
}

/* 上一页滑动效果 */
#viewport.swipe-right {
    transform: translateX(30px);
    opacity: 0.7;
}

/* 滑动提示指示器 */
.swipe-indicator {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2em;
    color: rgba(0, 120, 215, 0.6);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 100;
}

.swipe-indicator.left {
    left: 10px;
}

.swipe-indicator.right {
    right: 10px;
}

.swipe-indicator.show {
    opacity: 1;
}

/* 图片自适应样式 - 温和设置，不破坏原始格式 */
#viewport iframe {
    width: 100%;
    height: 100%;
    /* 确保iframe内的内容可以使用自己的字体 */
    font-family: inherit !important;
}

/* 确保EPUB内容区域不被外层样式干扰 */
#viewport * {
    font-family: inherit !important;
}

/* 双页模式时，viewport宽度减半并居中 */
body.double-page #viewport {
    width: 50%;
    margin: 0 auto;
}

/* 手机端强制单页铺满 */
@media(max-width:768px) {
    #toc {
        display: none;
    }

    body.double-page #viewport {
        width: 100%;
    }

    /* 手机端工具栏优化 */
    #toolbar {
        padding: 0.2em 0.3em;
        gap: 5px;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    #title {
        font-size: 0.9em;
        max-width: calc(100vw - 320px);
        min-width: 80px;
        flex: 1;
        margin-right: 10px;
    }

    button {
        padding: 0.15em 0.4em;
        font-size: 0.85em;
        min-width: 30px;
        /* 增加触摸友好的最小高度 */
        min-height: 32px;
        touch-action: manipulation;
    }

    /* 优化重要按钮显示 */
    #prevBtn,
    #nextBtn,
    #modeToggleBtn,
    #tocToggleBtn {
        flex-shrink: 0;
    }

    /* 手机端viewport触摸优化 */
    #viewport {
        touch-action: pan-y pinch-zoom;
        -webkit-overflow-scrolling: touch;
    }

    /* 手机端隐藏翻页按钮（使用手势代替） */
    #prevBtn,
    #nextBtn {
        display: none;
    }

    /* 滑动指示器在手机端更明显 */
    .swipe-indicator {
        font-size: 2.5em;
        color: rgba(0, 120, 215, 0.8);
    }
}

/* 极小屏幕优化 */
@media(max-width:480px) {
    #title {
        max-width: calc(100vw - 200px);
        font-size: 0.8em;
    }

    button {
        padding: 0.1em 0.3em;
        font-size: 0.8em;
        min-width: 28px;
    }

    #pageToggleBtn {
        width: 35px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 极小屏幕隐藏双页按钮 */
    #pageToggleBtn {
        display: none;
    }
}

/* 所有按钮在所有设备上都显示 */
#pageToggleBtn,
#tocToggleBtn {
    display: inline-block;
}

/* 目录切换按钮样式 */
#tocToggleBtn {
    background: #28a745;
}

/* 页面模式按钮样式 */
#pageToggleBtn {
    background: #6f42c1;
}

/* 文字颜色按钮样式 */
#textColorBtn {
    background: #fd7e14;
}