/* static/css/reader.css - v6: 移除所有移动端适配逻辑 */
:root {
    /* --- 颜色和主题变量 --- */
    --reader-bg-light: #f4f4f4; --reader-bg-dark: #1a1a1a; --reader-text-light: #333; --reader-text-dark: #e0e0e0; --sidebar-bg-light: #ffffff; --sidebar-bg-dark: #2c2c2c; --sidebar-border-light: #e0e0e0; --sidebar-border-dark: #444; --sidebar-link-light: #007bff; --sidebar-link-dark: #58a6ff; --sidebar-link-active-bg-light: #007bff; --sidebar-link-active-bg-dark: #58a6ff; --sidebar-link-active-text-light: #ffffff; --sidebar-link-active-text-dark: #1a1a1a; --bubble-left-bg-light: #ffffff; --bubble-left-bg-dark: #333333; --bubble-left-text-light: #000000; --bubble-left-text-dark: #e0e0e0; --bubble-right-bg-light: #95ec69; --bubble-right-bg-dark: #2a8a00; --bubble-right-text-light: #000000; --bubble-right-text-dark: #ffffff; --bubble-right-alt-bg-light: #007bff; --bubble-right-alt-bg-dark: #0056b3; --bubble-right-alt-text-light: #ffffff; --bubble-right-alt-text-dark: #ffffff; --misc-text-light: #888; --misc-text-dark: #aaa; --button-bg-light: #f0f0f0; --button-bg-dark: #444; --button-hover-bg-light: #e0e0e0; --button-hover-bg-dark: #555; --slider-thumb-bg-light: var(--sidebar-link-light); --slider-thumb-bg-dark: var(--sidebar-link-dark); --slider-track-bg-light: #ccc; --slider-track-bg-dark: #555; --settings-panel-bg-light: #ffffff; --settings-panel-bg-dark: #2c2c2c; --settings-panel-border-light: #e0e0e0; --settings-panel-border-dark: #444;
    /* --- 尺寸和间距变量 --- */
    --avatar-size: 40px; --avatar-radius: 50%; --bubble-radius: 12px; --base-font-size: 16px; --name-font-size: 12px; --misc-font-size: 14px; --timestamp-font-size: 12px; --content-max-width: 800px; --sidebar-width: 250px; --transition-speed: 0.3s; --dynamic-font-size-multiplier: 1.0;
    
    /* Default bubble theme (Blue) */
    --bubble-right-bg-final: var(--bubble-right-alt-bg-light);
    --bubble-right-text-final: var(--bubble-right-alt-text-light);
}
/* --- 主题切换应用 --- */
body.theme-dark { 
    --reader-bg: var(--reader-bg-dark); 
    --reader-text: var(--reader-text-dark); 
    --sidebar-bg: var(--sidebar-bg-dark); 
    --sidebar-border: var(--sidebar-border-dark); 
    --sidebar-link: var(--sidebar-link-dark); 
    --sidebar-link-active-bg: var(--sidebar-link-active-bg-dark); 
    --sidebar-link-active-text: var(--sidebar-link-active-text-dark); 
    --bubble-left-bg: var(--bubble-left-bg-dark); 
    --bubble-left-text: var(--bubble-left-text-dark); 
    --misc-text: var(--misc-text-dark); 
    --settings-panel-bg: var(--settings-panel-bg-dark); 
    --settings-panel-border: var(--settings-panel-border-dark); 
    --button-bg: var(--button-bg-dark); 
    --button-hover-bg: var(--button-hover-bg-dark); 
    --slider-thumb-bg: var(--slider-thumb-bg-dark); 
    --slider-track-bg: var(--slider-track-bg-dark);
    
    /* Default dark bubble theme */
    --bubble-right-bg-final: var(--bubble-right-alt-bg-dark);
    --bubble-right-text-final: var(--bubble-right-alt-text-dark);
}
body.theme-light { --reader-bg: var(--reader-bg-light); --reader-text: var(--reader-text-light); --sidebar-bg: var(--sidebar-bg-light); --sidebar-border: var(--sidebar-border-light); --sidebar-link: var(--sidebar-link-light); --sidebar-link-active-bg: var(--sidebar-link-active-bg-light); --sidebar-link-active-text: var(--sidebar-link-active-text-light); --bubble-left-bg: var(--bubble-left-bg-light); --bubble-left-text: var(--bubble-left-text-light); --misc-text: var(--misc-text-light); --settings-panel-bg: var(--settings-panel-bg-light); --settings-panel-border: var(--settings-panel-border-light); --button-bg: var(--button-bg-light); --button-hover-bg: var(--button-hover-bg-light); --slider-thumb-bg: var(--slider-thumb-bg-light); --slider-track-bg: var(--slider-track-bg-light); }
body.bubble-theme-green { --bubble-right-bg-final: var(--bubble-right-bg-light); --bubble-right-text-final: var(--bubble-right-text-light); } body.bubble-theme-green.theme-dark { --bubble-right-bg-final: var(--bubble-right-bg-dark); --bubble-right-text-final: var(--bubble-right-text-dark); } body.bubble-theme-blue { --bubble-right-bg-final: var(--bubble-right-alt-bg-light); --bubble-right-text-final: var(--bubble-right-alt-text-light); } body.bubble-theme-blue.theme-dark { --bubble-right-bg-final: var(--bubble-right-alt-bg-dark); --bubble-right-text-final: var(--bubble-right-alt-text-dark); }

/* --- 基础和全局样式 --- */
html { width: 100%; height: 100%; margin: 0; padding: 0; overflow-x: hidden !important; }
body { background-color: var(--reader-bg); color: var(--reader-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: calc(var(--base-font-size) * var(--dynamic-font-size-multiplier)); display: flex; transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease; height: 100%; margin: 0; padding: 0; width: 100%; max-width: 100vw; overflow: hidden; /* Body 不滚动，内部滚动 */ }
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }

/* --- 主布局容器 --- */
.reader-container { display: flex; width: 100%; height: 100vh; position: relative; overflow: hidden; max-width: 100%; }

/* --- 章节侧边栏 --- */
.chapter-sidebar {
    width: var(--sidebar-width); height: 100%; background-color: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border);
    display: flex; flex-direction: column; flex-shrink: 0;
    transition: width var(--transition-speed) ease, padding var(--transition-speed) ease, border var(--transition-speed) ease; /* 移除 transform */
    overflow: hidden; z-index: 10; position: relative;
}
/* 桌面端关闭状态 */
.chapter-sidebar:not(.open) {
    width: 0; border-right-width: 0; padding-left: 0; padding-right: 0;
    /* 确保内部元素也快速隐藏 */
    > * { visibility: hidden; opacity: 0; transition: opacity 0.1s ease; }
}
.chapter-sidebar.open { /* 确保打开状态样式正确 */
    width: var(--sidebar-width); padding-left: initial; padding-right: initial; border-right-width: 1px;
    > * { visibility: visible; opacity: 1; }
}
.chapter-sidebar-header { padding: 10px 15px; border-bottom: 1px solid var(--sidebar-border); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.chapter-sidebar-header h2 { margin: 0; font-size: 1.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; transition: opacity var(--transition-speed) ease; }
#chapter-list { list-style: none; padding: 0; margin: 10px 0; overflow-y: auto; flex-grow: 1; transition: opacity var(--transition-speed) ease; } #chapter-list li a { display: block; padding: 10px 15px; color: var(--sidebar-link); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 4px; margin: 2px 5px; transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease; } #chapter-list li a:hover { background-color: rgba(0, 0, 0, 0.05); } body.theme-dark #chapter-list li a:hover { background-color: rgba(255, 255, 255, 0.05); } #chapter-list li a.active { background-color: var(--sidebar-link-active-bg); color: var(--sidebar-link-active-text); font-weight: bold; }

/* --- 主内容区域 --- */
.story-content-area { flex-grow: 1; height: 100%; display: flex; flex-direction: column; overflow: hidden; width: 100%; min-width: 0; max-width: 100%; }

/* --- 顶部标题栏 --- */
#story-header { padding: 8px 15px; background-color: var(--sidebar-bg); border-bottom: 1px solid var(--sidebar-border); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; z-index: 5; position: relative; width: 100%; }
#story-title { 
    font-size: 1.2em; 
    text-align: center; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    width: auto; 
    max-width: 50%; 
    margin: 0; 
}
.header-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
#story-header button { background: none; border: 1px solid var(--sidebar-border); border-radius: 4px; padding: 5px 8px; cursor: pointer; color: var(--reader-text); transition: color var(--transition-speed) ease, border-color var(--transition-speed) ease, background-color var(--transition-speed) ease; font-size: 0.9em; flex-shrink: 0; } #story-header button:hover { background-color: var(--button-hover-bg); }
/* 显示/隐藏按钮 - 现在所有按钮默认显示 */
#chapter-toggle-btn-open, #desktop-open-sidebar-btn, #chapter-toggle-btn-close, #desktop-close-sidebar-btn {
    display: inline-block; /* 都显示 */
    border: none; font-size: 1.5em; padding: 5px; background-color: transparent !important;
}
#chapter-toggle-btn-open, #desktop-open-sidebar-btn { margin-right: 10px; }
#chapter-toggle-btn-close, #desktop-close-sidebar-btn { color: var(--misc-text); padding: 2px 5px; font-size: 1.8em; line-height: 1; }
#chapter-toggle-btn-close:hover, #desktop-close-sidebar-btn:hover { color: var(--reader-text); }
#auto-play-btn.playing { background-color: var(--slider-thumb-bg); color: white !important; border-color: var(--slider-thumb-bg); } body.theme-dark #auto-play-btn.playing { color: var(--reader-bg-dark) !important; }

/* --- 可滚动的内容区域 --- */
.story-scroll-container { 
    flex-grow: 1; 
    overflow-y: auto; 
    padding: 20px 15px; 
    position: relative; 
    cursor: pointer; 
    width: 100%; 
    user-select: none; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
}
.story-dialog-list { list-style: none; padding: 0; margin: 0 auto; max-width: var(--content-max-width); display: flex; flex-direction: column; width: 100%; }
#bottom-spacer { height: 45vh; flex-shrink: 0; }

/* --- 对话/消息项 --- */
.story-dialog-item, .story-dialog-misc-item { margin-bottom: 15px; opacity: 0; transform: translateY(15px); animation: messageFadeIn 0.5s ease-out forwards; display: flex; width: 100%; }
.story-dialog-item.left { justify-content: flex-start; } .story-dialog-item.right { justify-content: flex-end; }
.avatar { width: var(--avatar-size); height: var(--avatar-size); flex-shrink: 0; margin-top: 5px; } .story-dialog-item.left .avatar { margin-right: 10px; } .story-dialog-item.right .avatar { margin-left: 10px; order: 1; } .avatar-content { width: 100%; height: 100%; border-radius: var(--avatar-radius); background-color: #ccc; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; font-weight: bold; color: white; font-size: calc(var(--avatar-size) * 0.5); overflow: hidden; }
.content-box { max-width: 75%; display: flex; flex-direction: column; min-width: 0; } .story-dialog-item.left .content-box { align-items: flex-start; } .story-dialog-item.right .content-box { align-items: flex-end; } .name { font-size: calc(var(--name-font-size) * var(--dynamic-font-size-multiplier)); color: var(--misc-text); margin-bottom: 3px; padding: 0 5px; }
.message-content-box { display: flex; width: auto; } .story-dialog-item.right .message-content-box { justify-content: flex-end; } .message-bubble-wrap { position: relative; max-width: 100%; }
.message-bubble { padding: 10px 15px; border-radius: var(--bubble-radius); word-wrap: break-word; word-break: break-word; line-height: 1.6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); font-size: calc(var(--base-font-size) * var(--dynamic-font-size-multiplier)); margin: 0; transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease; text-align: left; display: inline-block; max-width: 100%; }
.story-dialog-item.left .message-bubble { background-color: var(--bubble-left-bg); color: var(--bubble-left-text); border-top-left-radius: 4px; } .story-dialog-item.right .message-bubble { background-color: var(--bubble-right-bg-final); color: var(--bubble-right-text-final); border-top-right-radius: 4px; }
.story-dialog-misc-item { justify-content: center; margin: 15px 0; } .story-dialog-misc-item .text { color: var(--misc-text); font-size: calc(var(--misc-font-size) * var(--dynamic-font-size-multiplier)); text-align: center; padding: 3px 10px; background-color: rgba(128, 128, 128, 0.1); border-radius: 10px; display: inline-block; max-width: 90%; } body.theme-dark .story-dialog-misc-item .text { background-color: rgba(200, 200, 200, 0.1); }
.story-dialog-item.image-type .message-bubble, .story-dialog-item.audio-type .message-bubble { padding: 5px; background-color: transparent !important; box-shadow: none; display: block; } .story-dialog-item.image-type img.image { max-width: 100%; max-height: 300px; border-radius: var(--bubble-radius); display: block; cursor: zoom-in; } .story-dialog-item.audio-type .message-bubble { display: inline-flex; align-items: center; background-color: var(--bubble-left-bg) !important; color: var(--bubble-left-text) !important; min-width: 100px; justify-content: space-between; cursor: pointer; border-radius: var(--bubble-radius); padding: 10px 15px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; } .story-dialog-item.right.audio-type .message-bubble{ background-color: var(--bubble-right-bg-final) !important; color: var(--bubble-right-text-final) !important; } .icon-audio-playing { display: inline-block; width: 15px; height: 15px; position: relative; margin-right: 8px; } .icon-audio-playing i { display: block; position: absolute; bottom: 0; width: 3px; background-color: currentColor; border-radius: 1px; animation: audioWave 0.8s infinite ease-in-out; } .icon-audio-playing .icon-part1 { left: 0; height: 60%; animation-delay: -0.4s; } .icon-audio-playing .icon-part2 { left: 6px; height: 100%; animation-delay: -0.2s; } .icon-audio-playing .icon-part3 { left: 12px; height: 80%; animation-delay: 0s; } .audio-duration { font-size: var(--timestamp-font-size); } .btn-audio-action { display: inline-block; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid currentColor; margin-left: 8px; } .message-bubble.playing .btn-audio-action { width: 8px; height: 12px; border: none; position: relative; } .message-bubble.playing .btn-audio-action::before, .message-bubble.playing .btn-audio-action::after { content: ''; position: absolute; top: 0; width: 3px; height: 100%; background-color: currentColor; } .message-bubble.playing .btn-audio-action::before { left: 0; } .message-bubble.playing .btn-audio-action::after { right: 0; }
@keyframes audioWave { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1.0); } }
.story-end-marker { text-align: center; padding: 30px 20px; color: var(--misc-text); } .story-end-marker .warn-text { font-weight: bold; margin-bottom: 15px; font-size: calc(var(--misc-font-size) * var(--dynamic-font-size-multiplier)); } .story-end-marker img.qrcode { max-width: 150px; height: auto; margin-top: 10px; border: 1px solid var(--sidebar-border); padding: 5px; } .story-end-marker div:last-child { font-size: calc(var(--timestamp-font-size) * var(--dynamic-font-size-multiplier)); margin-top: 10px; }
@keyframes messageFadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.settings-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); width: 90%; max-width: 350px; background-color: var(--settings-panel-bg); border: 1px solid var(--settings-panel-border); border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); padding: 20px; padding-top: 45px; z-index: 1001; opacity: 0; visibility: hidden; transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) ease, transform var(--transition-speed) ease; } .settings-panel.visible { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .settings-panel h3 { margin-top: 0; margin-bottom: 20px; text-align: center; color: var(--reader-text); } .setting-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; } .setting-item label { margin-right: 10px; color: var(--reader-text); flex-shrink: 0; } .setting-item hr { width: 100%; border: none; border-top: 1px solid var(--sidebar-border); margin: 15px 0; } .close-settings-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 1.8em; line-height: 1; cursor: pointer; color: var(--misc-text); padding: 5px; z-index: 1002; } .close-settings-btn:hover { color: var(--reader-text); } .speed-controls { display: flex; align-items: center; flex-grow: 1; justify-content: flex-end; } #speed-slider { width: 120px; height: 5px; cursor: pointer; appearance: none; background: var(--slider-track-bg); border-radius: 3px; outline: none; transition: background-color var(--transition-speed) ease; margin: 0 8px; } #speed-slider::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; background: var(--slider-thumb-bg); border-radius: 50%; cursor: pointer; } #speed-slider::-moz-range-thumb { width: 16px; height: 16px; background: var(--slider-thumb-bg); border-radius: 50%; cursor: pointer; border: none; } #speed-label { font-size: 0.9em; color: var(--misc-text); min-width: 30px; text-align: right; } .font-size-controls { display: flex; align-items: center; gap: 10px; } .font-size-controls button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--sidebar-border); background-color: var(--button-bg); color: var(--reader-text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2em; transition: background-color 0.2s; } .font-size-controls button:hover { background-color: var(--button-hover-bg); } #font-size-indicator { min-width: 40px; text-align: center; font-size: 0.9em; color: var(--misc-text); }
.settings-overlay, .sidebar-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) ease; } .sidebar-overlay { z-index: 9; display: none; /* 默认桌面隐藏 */} .settings-overlay { z-index: 1000; display: none; /* 默认桌面隐藏 */ } .settings-overlay.visible, .sidebar-overlay.visible { opacity: 1; visibility: visible; } /* visible 类控制显示 */
/* Fullscreen mode behavior */
body.fullscreen-active #story-header { 
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
body.fullscreen-active #story-header.visible {
    transform: translateY(0);
}
body.fullscreen-active .story-content-area { 
    height: 100vh; 
    padding-top: 0; /* Content takes full height */
}
/* 默认显示所有按钮，不再区分 mobile/desktop */
.mobile-only-btn, .desktop-only-btn { display: inline-block; }


/* 注意：移除了 @media (max-width: 768px) 块 */
/* 可能需要根据需要在基础样式中微调移动端体验 */
/* 例如，确保 header controls 在小屏幕上能放下 */
@media (max-width: 400px) { /* 极小屏幕调整 */
    #story-title { font-size: 1em; margin: 0 5px;}
    .header-controls { gap: 3px; }
    #story-header button { padding: 3px 5px; font-size: 0.8em; }
     #speed-label { display: none; } /* 在非常小的屏幕上隐藏速度标签 */
     #speed-slider { width: 80px; }
}