/* ═══════════════════════════════════════════════════════════════
   reader-shared.css — reader 与 bookshelf 共享样式
   （右面板 #search 公用 + 书架书籍列表/工具栏公用）

   来源（2026-08-02 提取合并）：
     ├─ right-panel.css（右面板 tab 体系）
     └─ bookshelf.css 的共享分节（topbar / 卡片 / 行 / chip / 分页 /
        开书遮罩 / 通用按钮 / Toast / 部分全局 reset）
   依赖：reader-theme.css 的 --light-* / --dark-* 变量。
   差异（宽度 / 折叠 / 拖拽 / 三栏布局）留在各页面 css：
     - reader.css    : #search 宽度 380px、body.right-collapsed、body.is-resizing #toc,#search
     - bookshelf.css : 独立书架三栏（.bs-toolbar/.bs-toc/右面板 tab 内容等）、#search 300px、.bs-shell.*
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   第 1 部分：右面板 #search 公用（原 right-panel.css）
   ═══════════════════════════════════════════════════════════════ */

/* ── 右面板拖拽手柄 ──────────────────────────────────────────── */
.resize-handle-search {position:absolute; top:0; left:0; width:8px; height:100%; cursor:col-resize; display:flex; align-items:center; justify-content:center; z-index:5; transition:background-color 150ms ease;}
.resize-handle-search .handle-icon {font-size:18px; opacity:0.45; pointer-events:none;}

/* ── #search 基础布局（含默认宽度 380px；bookshelf 用加载顺序覆盖为 300px）── */
#search {position:relative; flex:0 0 380px; width:380px; min-width:0; max-width:600px; display:flex; flex-direction:column; overflow:hidden; transition:width 220ms ease,flex-basis 220ms ease;}
.theme-light #search button {color:var(--light-color);}
.theme-dark #search button {color:var(--dark-color);}

/* ── 面板头 ──────────────────────────────────────────────────── */
.panel-header {display:flex; align-items:center; height:var(--title-bar-height); padding:0 8px 0 14px; flex-shrink:0;}
.panel-title {flex:1; font-size:13px; font-weight:500; opacity:.7;}
.panel-close,button.close {display:flex; align-items:center; justify-content:center; padding:4px; border:none; border-radius:4px; background:transparent; cursor:pointer; opacity:.6; transition:opacity 150ms,background-color 150ms;}
.panel-close .material-symbols-rounded,button.close .material-symbols-rounded {font-size:16px; pointer-events:none;}
.panel-close:hover,button.close:hover {opacity:1;}
.theme-light .panel-header {background-color:var(--light-titlebar-background-color); border-bottom:1px solid var(--light-toc-item-split); color:var(--light-color);}
.theme-dark .panel-header {border-bottom:1px solid var(--dark-toc-item-split); color:var(--dark-color);}
.theme-light .panel-close:hover,.theme-light button.close:hover {background-color:var(--light-toc-item-hover);}
.theme-dark .panel-close:hover,.theme-dark button.close:hover {background-color:var(--dark-toc-item-hover);}

/* ── tab 标签页体系 ──────────────────────────────────────────── */
.tabs {display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden;}
.nav-tabs {display:flex; flex-wrap:nowrap; margin:0; padding:2px 8px 0; gap:0; overflow-x:auto; overflow-y:hidden; list-style:none; flex-shrink:0;}
.tab-item {position:relative; display:flex; align-items:center; gap:5px; padding:8px 18px 6px 14px; border:1px solid transparent; border-bottom: 1px solid var(--light-search-tabs-border-color);border-image: initial;border-radius: 4px 4px 0px 0px; cursor:pointer; font-size:13px; white-space:nowrap; user-select:none; flex-shrink:0; transition:opacity 150ms ease,border-color 150ms ease,background-color 150ms ease;}
.tab-item.active {border:1px solid var(--light-search-tabs-border-color); border-bottom: 1px solid transparent;}
.theme-dark .tab-item {border-bottom-color: var(--dark-search-tabs-border-color);}
.theme-dark .tab-item.active {border:1px solid var(--dark-search-tabs-border-color);; border-bottom: 1px solid transparent;}
.tab-label {pointer-events:none;}
.tab-close {position:absolute; top:2px; right:3px; width:12px; height:12px; border:none; border-radius:50%; background:transparent; padding:0; display:flex; align-items:center; justify-content:center; font-size:16px; line-height:16px; cursor:pointer; opacity:0; transition:opacity 150ms,background-color 150ms;}
.tab-item:hover .tab-close,.tab-item.active .tab-close {opacity:.5;}
.tab-close:hover {opacity:1 !important; background-color:rgba(200,0,0,.18);}
.tab-content {flex:1; overflow-y:auto; overflow-x:hidden; margin: 0px 8px 10px 8px; border: 1px solid var(--light-search-tabs-border-color); border-top: 1px solid transparent;}
.theme-dark .tab-content {border-left: 1px solid var(--dark-search-tabs-border-color);}
.tab-pane {display:none; padding:12px 8px;}
.tab-pane.active {display:block;}
.tab-pane[data-tab-pane='bookmark'] {min-height:0;}
.tab-pane.active[data-tab-pane='bookmark'] {display:flex; flex-direction:column; height:100%; min-height:0;}
.tab-pane[data-tab-pane='search'] {min-height:0;}
.tab-pane.active[data-tab-pane='search'] {display:flex; flex-direction:column; height:100%; min-height:0;}
.tab-pane[data-tab-pane='preferences'] {min-height:0; padding:0;}
.tab-pane.active[data-tab-pane='preferences'] {display:flex; flex-direction:column; height:100%; min-height:0; padding:0;}
.tab-pane[data-tab-pane='translation_console'] {min-height:0; padding:0;}
.tab-pane.active[data-tab-pane='translation_console'] {display:flex; flex-direction:column; height:100%; min-height:0; padding:0;}
/* ai_chat（AI 对话面板）—— 与上面 4 个 tab 同款的高度链，**缺不得**：
   少了这两条时 .tab-pane 仍是默认 display:block，高度由内容决定 →
   面板内 .jbook-chat{height:100%} 的百分比没有参照而失效 →
   本该滚动的 .jbook-chat-list 被消息撑高、自己不产生滚动条 →
   滚动落回 .tab-content（它 overflow-y:auto）→ **顶栏与输入框跟着消息一起滚走**。
   padding:0 是因为面板内部（顶栏 / 消息流 / 输入容器）各自带留白，用默认 12px 8px 会双重留白。 */
.tab-pane[data-tab-pane='ai_chat'] {min-height:0; padding:0;}
.tab-pane.active[data-tab-pane='ai_chat'] {display:flex; flex-direction:column; height:100%; min-height:0; padding:0;}
.tab-pane h3 {font-size:14px;}
.tab-other {flex: 1 1 0%;pointer-events: none;border-bottom: 1px solid var(--light-search-tabs-border-color);}
.theme-dark .tab-other {border-bottom: 1px solid var(--dark-search-tabs-border-color);}
.theme-light .tab-item:hover {opacity:.9; background-color:var(--light-toc-item-hover);}
.theme-dark .tab-item:hover {opacity:.9; background-color:var(--dark-toc-item-hover);}
.theme-light .tab-item.active,.theme-dark .tab-item.active {opacity:1;}

/* ═══════════════════════════════════════════════════════════════
第 2 部分：bookshelf 共享（从 bookshelf.css 提取）
═══════════════════════════════════════════════════════════════ */

/* ── 全局 reset（原 bookshelf.css 分节 1 的 * / body 部分）── */
*, *::before, *::after {box-sizing: border-box;}
body {margin:0; height:100vh; display:flex; font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif,"宋体"; font-size:14px;}
body,p,th,td,h1,h2,h3,h4,ul,li,dl,dt,dd,form {margin:0; padding:0; font-weight:normal;}

/* ── 书籍内容区（原分节 5）── */
.bs-content {flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden;}

/* 顶部搜索/状态/排序栏 */
.bs-topbar {display: flex; align-items: center; gap: 12px; padding: 4px 24px 4px 14px; border-bottom: 1px solid var(--light-toc-item-split); flex-shrink: 0; flex-wrap: wrap;}

/* 搜索框（旧版样式） */
.search-box {display: flex; align-items: center; background: #fff; border: 1px solid #e0e0e0; border-radius: 24px; padding: 8px 16px; flex: 1; min-width: 150px; max-width: 300px;}
.search-box .material-symbols-rounded {color: #999; margin-right: 8px; font-size: 20px;}
.search-box input {border: none; background: transparent; outline: none; flex: 1; font-size: 14px; color: var(--light-color);}
.search-box input::placeholder {color: #999;}
.search-clear {visibility: hidden; color: #999; cursor: pointer; user-select: none; flex-shrink: 0; font-size: 18px;}
.search-clear:hover {color: #333;}
.search-clear[hidden] {visibility: hidden;}
.search-clear:not([hidden]) {visibility: visible;}

/* 顶栏按钮（旧版样式） */
.btn {padding: 8px 16px; border: none; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: all 0.2s ease; flex-shrink: 0;}
.btn .material-symbols-rounded {font-size: 18px;}
.btn[hidden] {display: none;}
.btn-upload {background: #4CAF50; color: white;}
.btn-upload:hover {background: #45a049; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(76,175,80,.3);}
.btn-preload-all {background: #FF9800; color: white;}
.btn-preload-all:hover {background: #f57c00; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,152,0,.3);}
.btn-preload-all:disabled {opacity: .6; cursor: not-allowed; transform: none; box-shadow: none;}
.btn-manage {background: #2196F3; color: white;}
.btn-manage:hover {background: #1976D2; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(33,150,243,.3);}
.btn-close-bs {background: #757575; color: white;}
.btn-close-bs:hover {background: #616161; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(117,117,117,.3);}

/* compact 书架「查看全部」链接 */
.bs-facet-all-link {color: var(--bs-primary, #4a90d9); text-decoration: none; font-size: 12px;}
.bs-facet-all-link:hover {text-decoration: underline;}

/* 按钮组（右对齐） */
.bs-topbar-actions {display: flex; align-items: center; gap: 18px; margin-left: auto; flex-shrink: 0;}

/* 统计信息 */
.bookshelf-stats {font-size: 13px; color: #666; flex: none; white-space: nowrap;}

/* 排序下拉 */
.bs-sort-select {border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 6px; background: transparent; font-size: 12px; color: inherit; padding: 3px 6px; height: 28px; cursor: pointer; outline: none; margin-left: 30px; flex-shrink: 0;}

/* 列数调节：按钮 + 弹出面板 */
.bs-column-slider-wrap {position: relative; flex-shrink: 0;}
.bs-column-slider-btn {display: flex; align-items: end; gap: 4px; border: none; background: transparent; cursor: pointer; padding: 4px 6px; border-radius: 6px; color: var(--light-color);}
.bs-column-slider-btn:hover {background: var(--light-toc-item-hover);}
.bs-column-slider-icon {font-size: 18px; opacity: 0.6;}
.bs-column-slider-value {font-size: 13px; opacity: 0.85; min-width: 14px; text-align: center;}

/* 弹出面板 */
.bs-column-popup {position: absolute; top: 100%; right: 0; z-index: 100; margin-top: 4px; background: #fff; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12);}
.bs-column-popup[hidden] {display: none;}
.bs-column-popup-inner {display: flex; align-items: center; gap: 8px; padding: 10px 14px; white-space: nowrap;}
.bs-column-popup-label {font-size: 12px; opacity: 0.7;}
.bs-column-popup-val {font-size: 12px; font-weight: 600; min-width: 18px; text-align: center;}
.bs-column-slider {width: 80px; height: 4px; accent-color: #1d4ed8; cursor: pointer;}

/* 批量操作栏（在 #bs-content 流中不随滚动，负 margin 浮在书籍区上方） */
.bs-batch-bar {display: flex; align-items: center; gap: 8px; padding: 6px 14px; background-color: #e5e7eb; color: #374151; font-size: 13px; flex-shrink: 0; border-bottom: 1px solid #d1d5db; margin-bottom: -40px; position: relative; z-index: 10;}
.bs-batch-bar[hidden] {display: none;}
.bs-batch-action {padding: 4px 10px; border: 1px solid #9ca3af; border-radius: 6px; background: transparent; color: #374151; font-size: 12px; cursor: pointer; transition: background-color 150ms;}
.bs-batch-action:hover {background-color: rgba(0,0,0,.06);}
#bs-batch-cancel {margin-left: 16px;}

/* 书籍区容器 */
.bs-books-area {flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px; scrollbar-width: thin;}

/* 加载中 */
.bs-loading {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px 20px; color: var(--light-color); opacity: 0.6;}
.bs-loading[hidden] {display: none;}
.bs-spinner {width: 36px; height: 36px; border: 3px solid rgba(0,0,0,.12); border-top-color: #1d4ed8; border-radius: 50%; animation: bs-spin 0.7s linear infinite;}

/* 空状态 */
.bs-empty {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 80px 20px; text-align: center; opacity: 0.55;}
.bs-empty[hidden] {display: none;}
.bs-empty .material-symbols-rounded {font-size: 52px;}
.bs-empty-hint {margin-top: 4px;}

/* 书籍卡片（原分节 6） */
.bs-card-actions {position: absolute; top: 0px; right: 4px; left: 4px; display: flex; align-items: center; justify-content: flex-end; padding: 0px 4px; z-index: 2;}

/* 批量模式时 checkbox 显示，改为左右分开排列 */
.bs-shell.batch-mode .bs-card-actions {justify-content: space-between;}
.bs-card-actions-right {display: flex; align-items: center; gap: 1px;}
.bs-card-action {width: 24px; height: 24px; border: none; border-radius: 4px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--light-color, #333); opacity: 0.85; transition: opacity 0.15s, background 0.15s;}
.bs-card-action:hover {opacity: 1; background: rgba(0,0,0,0.08);}
.bs-card-action .material-symbols-rounded {font-size: 18px; color: #374151; /* 白色光晕：浅底时几乎不可见，深底时衬托图标 */ text-shadow: 0 0 3px #fff, 0 0 2px #fff;}
.bs-card-action-fav.is-fav .material-symbols-rounded,
#bs-rp-fav-icon.is-fav {font-variation-settings: 'FILL' 1; color: #e53935; opacity: 1;}
.bs-books-grid {display: grid; gap: 16px;}
.bs-books-grid[hidden] {display: none;}
.bs-book-card {cursor: pointer; border-radius: 8px; padding: 8px; transition: background-color 120ms; position: relative;}
.bs-book-card:hover {background-color: var(--light-toc-item-hover);}
.bs-book-card.selected {background-color: #dbeafe; outline: 2px solid #1d4ed8;}

/* 封面外层（保持宽高比，用于叠加状态徽章） */
.bs-book-cover-wrap {position: relative; margin-bottom: 8px;}
.bs-book-cover {position: relative; width: 100%; aspect-ratio: 1 / 1.414; background-color: #f5f5f5; border-radius: 4px; overflow: hidden; isolation: isolate; box-shadow: 0 3px 10px rgba(0,0,0,.15); transition: transform 200ms ease, box-shadow 200ms ease; display: flex; align-items: center; justify-content: center;}
.bs-book-cover img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;}
.bs-book-cover .bs-book-cover-placeholder {position: relative; z-index: 0; font-size: 42px; opacity: 0.3;}
.bs-book-card:hover .bs-book-cover {transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0,0,0,.22);}

/* ── 预加载状态区（封面右下角浮动）── */
.bs-book-status-bar {position: absolute; bottom: 12px; right: 10px; display: flex; align-items: center; gap: 4px;}
.bs-preload-btn {display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px; font-size: 11px; border: none; border-radius: 10px; background: rgba(255, 255, 255, 0.18); color: #444; cursor: pointer; transition: background 0.15s, box-shadow 0.15s; line-height: 1.5; box-shadow: 0 1px 4px rgba(0,0,0,0.18);}
.bs-preload-btn:hover {background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.28); color: #1976D2;}
.bs-preload-btn .material-symbols-rounded {font-size: 14px;}

/* 预加载状态徽标 */
.bs-preload-badge {display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; font-size: 11px; border-radius: 10px; font-weight: 500; /* line-height: 1.5; */ cursor: default; user-select: none;}
.bs-preload-badge .material-symbols-rounded {font-size: 13px;}
.bs-preload-badge.badge-loading {background: #e3f0fb; color: #2196F3; border: 1px solid #90CAF9;}
.bs-preload-badge.badge-ready {background: #d0ffd9; color: #388E3C; border: 1px solid #A5D6A7; cursor: default;}
.bs-preload-badge.badge-error {background: #ffebee; color: #c62828; border: 1px solid #EF9A9A; cursor: pointer;}
.bs-preload-badge.badge-error:hover {background: #fce4e4;}
@keyframes spin {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}

/* 悬浮"打开"按钮 */
.bs-book-open-btn {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 6px 14px; border: none; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; cursor: pointer; opacity: 0; transition: opacity 150ms; white-space: nowrap; pointer-events: none;}
.bs-book-card:hover .bs-book-open-btn {opacity: 1; pointer-events: auto;}

/* 批量模式复选框（作为 actions 条内行内元素） */
.bs-book-checkbox {width: 16px; height: 16px; display: none; accent-color: #1d4ed8; cursor: pointer; flex-shrink: 0; margin: 0;}
.bs-shell.batch-mode .bs-book-checkbox {display: inline-block;}

/* 书名+元数据容器（点击区域统一覆盖，避免间隙点不中） */
.bs-book-info {cursor: pointer;}

/* ── 卡片下部上传进度条（预加载方案 🆕：浮于封面底部，不占高度）── */
.bs-card-upload-bar {position: absolute; left: 0; right: 0; bottom: 3px; height: 8px; border-radius: 4px; background: rgba(243,177,92,.5); border:1px solid rgba(255,255,266,0.5); overflow: visible; z-index: 2;}
.bs-card-upload-fill {height: 100%; width: 0%; border-radius: 4px; background: #10a2fb; transition: width .2s;}
.bs-card-upload-pct {position: absolute; right: 45px; top: -17px; font-size: 13px; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.6);}
.bs-book-title {font-size: 12px; font-weight: 500; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 34px; color: var(--light-color);}

/* 副信息（格式/目录/大小）——flex 布局，gap 间距替代 ::after 分隔符 */
.bs-book-meta {display: flex; align-items: baseline; gap: 6px; padding: 0 5px 0 0px; margin-top: 3px; font-size: 11px; opacity: 0.5; overflow: hidden;}
.bs-book-meta-ext {flex-shrink: 0; width: 34px;}
.bs-book-meta-dir {flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.bs-book-meta-size {flex-shrink: 0; width: 48px; text-align: right;}

/* 书籍行（列表视图，原分节 7） */
.bs-books-list {display: flex; flex-direction: column; gap: 1px;}
.bs-books-list[hidden] {display: none;}
.bs-book-row {display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer; transition: background-color 120ms;}
.bs-book-row:hover {background-color: var(--light-toc-item-hover);}
.bs-book-row.selected {background-color: #dbeafe;}
.bs-book-row-cover {width: 36px; height: 50px; object-fit: cover; border-radius: 3px; flex-shrink: 0; background: #e0e0e0;}
.bs-book-row-info {flex: 1; min-width: 0;}
.bs-book-row-title {font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.bs-book-row-author {font-size: 11px; opacity: 0.55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.bs-book-row-ext {font-size: 11px; opacity: 0.5; width: 40px; flex-shrink: 0; text-align: center;}
.bs-book-row-dir {font-size: 11px; opacity: 0.5; width: 80px; flex-shrink: 0; text-align: left; overflow: hidden; text-overflow: ellipsis;}
.bs-book-row-size {font-size: 11px; opacity: 0.5; width: 60px; flex-shrink: 0; text-align: right;}
.bs-book-row-date {font-size: 11px; opacity: 0.5; width: 80px; flex-shrink: 0; text-align: right;}
.bs-book-row-tags {display: flex; gap: 4px; flex-wrap: wrap;}

/* 标签 Chip（原分节 8） */
.bs-tag-chip {display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; background-color: #e1e2e7; color: var(--light-color); cursor: default; white-space: nowrap;}
.bs-tag-chip .bs-chip-remove {border: none; background: transparent; cursor: pointer; padding: 0; line-height: 1; font-size: 12px; opacity: 0.6; display: flex; align-items: center;}
.bs-tag-chip .bs-chip-remove:hover {opacity: 1;}

/* 分页控件（原分节 9） */
.bs-pagination {display: flex; align-items: center; justify-content: center; padding: 10px 14px; flex-shrink: 0; gap: 4px; flex-wrap: wrap;}
.bs-page-btn {min-width: 44px; height: 32px; padding: 0 4px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 6px; background: transparent; color: var(--light-color); font-size: 13px; cursor: pointer; transition: background-color 120ms; flex-shrink: 0; text-align: center;}
.bs-page-btn:hover:not(:disabled) {background-color: var(--light-toc-item-hover);}
.bs-page-btn.active {background-color: #1d4ed8; color: #fff; border-color: #1d4ed8;}
.bs-page-btn:disabled {opacity: 0.4; cursor: not-allowed;}
.bs-page-info {font-size: 12px; opacity: 0.6; padding: 0 4px; flex-shrink: 0;}

/* 中间页码区：由 JS 动态设定宽度，避免挤到两侧按钮 */
.bs-page-nums {display: inline-flex; align-items: center; gap: 2px; justify-content: center; flex-shrink: 0;}

/* 页跳转输入框 */
.bs-page-goto-input {width: 48px; height: 28px; padding: 0 4px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 4px; font-size: 12px; text-align: center; background: transparent; color: inherit;}
.bs-page-goto-btn {height: 28px; padding: 0 8px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 4px; background: transparent; color: var(--light-color); font-size: 12px; cursor: pointer;}
.bs-page-goto-btn:hover {background-color: var(--light-toc-item-hover);}
.bs-page-size-select {height: 28px; padding: 0 4px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 4px; font-size: 12px; background: transparent; color: inherit; cursor: pointer;}

/* ── 书籍详情面板（book-detail-panel.js 共享组件，reader 右面板信息 Tab 也用）── */
.bs-rp-empty {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 20px; text-align: center; opacity: 0.4; flex: 1;}
.bs-rp-empty .material-symbols-rounded {font-size: 40px;}
.bs-rp-empty[hidden] {display: none;}
.bs-rp-detail-content {padding: 10px 0 10px 10px;}

/* 封面 */
.bs-rp-cover-wrap {text-align: center; margin-bottom: 12px;}
.bs-rp-cover {width: 70%; max-width: 230px; height: auto; max-height: 320px; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.2); object-fit: cover;}

/* 字段列表 */
.bs-rp-fields {display: flex; flex-direction: column; gap: 8px;}
.bs-rp-field {display: flex; align-items: center; gap: 6px;}
.bs-rp-field-label {font-size: 12px; font-weight: 600; opacity: 0.75; width: 30px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.03em;}
body[lang="en"] .bs-rp-field-label,
body[lang="fr"] .bs-rp-field-label,
body[lang="de"] .bs-rp-field-label,
body[lang="es"] .bs-rp-field-label {width: 80px;}
.bs-rp-field-value {flex: 1; min-width: 0; font-size: 12px; line-height: 1.5; word-break: break-all;}
.bs-rp-desc {-webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;}
.bs-rp-edit-btn {width: 22px; height: 20px; border: none; border-radius: 4px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 150ms; flex-shrink: 0;}
.bs-rp-field:hover .bs-rp-edit-btn {opacity: 0.6;}
.bs-rp-edit-btn:hover {opacity: 1 !important; background-color: var(--light-toc-item-hover);}
.bs-rp-edit-btn .material-symbols-rounded {font-size: 13px;}

/* 编辑状态：保存按钮红色高亮，与标签管理删除确认一致 */
.bs-rp-edit-btn[data-edit-mode="save"] {color: #dc2626; background: rgba(220,38,38,0.15);}
.bs-rp-edit-btn[data-edit-mode="save"]:hover {background: rgba(220,38,38,0.30);}

/* 只读元数据行 */
.bs-rp-meta-row {display: flex; gap: 8px; flex-wrap: wrap;}
.bs-rp-meta-item {display: flex; flex-direction: column; gap: 2px; flex: 1;}
.bs-rp-meta-full {flex: none; width: 100%;}
.bs-rp-meta-label {font-size: 12px; font-weight: 600; opacity: 0.5; text-transform: uppercase;}
.bs-rp-meta-value {font-size: 13px;}
.bs-rp-path {font-size: 13px; word-break: break-all; opacity: 0.9;}

/* 标签区域 */
.bs-rp-tags-section {display: flex; flex-direction: column; gap: 8px; margin-top: 2px;}
.bs-rp-tags {display: flex; flex-wrap: wrap; gap: 8px; min-height: 22px;}
.bs-rp-tags-header {display: flex; align-items: center;}
#search button.bs-rp-section-add-btn {margin-left: auto; display: inline-flex; align-items: center; gap: 3px; padding: 2px 10px; border: none; border-radius: 4px; background: transparent;        /* ← 新增：透出父容器背景 */ border: 1px solid var(--light-control-border-color, #c1c1c1); font-size: 12px; cursor: pointer; transition: background 150ms, transform 150ms, box-shadow 150ms;}
#search button.bs-rp-section-add-btn:hover {background-color: var(--light-toc-item-hover);}
.theme-dark #search button.bs-rp-section-add-btn:hover {background-color: var(--dark-toc-item-hover);}
#search button.bs-rp-section-add-btn .material-symbols-rounded {font-size: 13px;}
.bs-rp-add-tag-btn {display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border: 1px dashed var(--light-control-border-color, #c1c1c1); border-radius: 999px; background: transparent; font-size: 13px; cursor: pointer; color: var(--light-color); opacity: 0.65; align-self: flex-start;}
.bs-rp-add-tag-btn:hover {opacity: 1;}
.bs-rp-add-tag-btn .material-symbols-rounded {font-size: 13px;}

/* 操作按钮行 */
.bs-rp-actions {display: flex; gap: 8px; margin-top: 24px;}
.bs-rp-action-btn {flex: 1; justify-content: center; height: 34px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 8px; background: transparent; color: var(--light-color); font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: background-color 150ms; white-space: nowrap;}
.bs-rp-action-btn:hover {background-color: var(--light-toc-item-hover);}
.theme-dark .bs-rp-action-btn:hover {background-color: var(--dark-toc-item-hover);}
.bs-rp-action-btn .material-symbols-rounded {font-size: 16px;}
#bs-rp-open {flex: 1; justify-content: center;}

/* 保存栏 */
.bs-rp-save-bar {display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--light-toc-item-split);}
.bs-rp-save-bar[hidden] {display: none;}

/* 通用输入框（详情编辑） */
.bs-input {flex: none; width: 175px; height: 24px; padding: 0 10px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 6px; font-size: 13px; outline: none; background: #fff; color: #111; transition: border-color 150ms;}
.bs-input:focus {border-color: #1d4ed8;}

/* ── 开书遮罩 + loading（原 bookshelf.css 分节 11 的共享部分）── */
.bs-overlay {position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100;}
.bs-overlay[hidden] {display: none;}

/* 打开书籍时的 loading 指示器（覆在遮罩上） */
.bs-open-loading {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 102; display: flex; flex-direction: column; align-items: center; gap: 16px; color: #fff; font-size: 16px; font-weight: 500; letter-spacing: 0.5px;}
.bs-open-spinner {width: 40px; height: 40px; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: bs-spin 0.7s linear infinite;}

/* 遮罩上的上传进度条（独立于模板进度条） */
.bs-open-progress-track {width: 240px; max-width: 80vw; height: 10px; border: 1px solid rgba(255,255,255,.75); border-radius: 5px; background: rgba(255,255,255,.55); overflow: hidden;}
.bs-open-progress-fill {height: 100%; width: 0%; border-radius: 5px; background: #10a2fb; transition: width .2s;}
@keyframes bs-spin {to {transform: rotate(360deg);}}

/* 通用按钮（原分节 12） */
.bs-btn-primary {height: 32px; padding: 0 14px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 6px; background: transparent; color: var(--light-color); font-size: 13px; cursor: pointer; transition: background-color 150ms;}
.bs-btn-primary:hover {background-color: var(--light-toc-item-hover);}
.bs-btn-primary:disabled {opacity: 0.5; cursor: not-allowed;}
.bs-btn-secondary {height: 32px; padding: 0 14px; border: 1px solid var(--light-control-border-color, #c1c1c1); border-radius: 6px; background: transparent; color: var(--light-color); font-size: 13px; cursor: pointer; transition: background-color 150ms;}
.bs-btn-secondary:hover {background-color: var(--light-toc-item-hover);}
.bs-btn-danger {height: 32px; padding: 0 14px; border: none; border-radius: 6px; background-color: #dc2626; color: #fff; font-size: 13px; cursor: pointer; transition: background-color 150ms;}
.bs-btn-danger:hover {background-color: #b91c1c;}

/* Toast 提示（原分节 15） */
.bs-toast-container {position: fixed; bottom: 20px; right: 20px; z-index: 400; display: flex; flex-direction: column; gap: 8px; pointer-events: none;}
.bs-toast {padding: 10px 18px; border-radius: 8px; background: #1f2937; color: #fff; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.25); animation: bs-toast-in 0.25s ease; pointer-events: auto;}
.bs-toast.success {background: #16a34a;}
.bs-toast.error  {background: #dc2626;}
.bs-toast.info   {background: #1d4ed8;}
.bs-toast.warning {background: #d97706;}

/* ═══════════════════════════════════════════════════════════════
   第 3 部分：Dialog 内容样式（TagPicker 弹窗，book-detail-panel 共享）
   （从 bookshelf.css 提取，内容逐字一致）
   ═══════════════════════════════════════════════════════════════ */

/* ── 分类树 ──────────────────────────────────────────── */
.dlg-cat-tree {margin: -14px;  /* 抵消 dialog body 的 padding */ display: flex; flex-direction: column;}
.dlg-cat-body {flex: 1; overflow-y: auto;}
.dlg-cat-bar {display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid #e0e0e0; flex-shrink: 0;}
.dlg-cat-node {display: flex; align-items: center; gap: 4px; cursor: pointer; border-radius: 4px;}
.dlg-cat-node:hover {background: rgba(0,0,0,0.04);}
.dlg-cat-clear {display: flex; align-items: center; gap: 6px; padding: 6px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #e0e0e0; font-style: italic;}
.dlg-cat-node.dlg-cat-active {background: #dbeafe !important; color: #1d4ed8 !important; font-weight: 600;}
.dlg-cat-node.dlg-cat-active .material-symbols-rounded {color: #1d4ed8;}
.dlg-cat-node.expanded {font-weight: 600;}
.dlg-cat-subtree {margin-left: 0;}
.dlg-cat-clear {font-style: italic;}

/* ── 标签选择器 ────────────────────────────────────────── */
.dlg-tag-body {display: flex; flex-direction: column; gap: 8px; min-height: 0; height: 100%;}
.dlg-tag-search {width: 100%; padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; box-sizing: border-box;}
.dlg-tag-hint {font-size: 11px; color: #999; display: none;}
.dlg-tag-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; align-content: start;   /* 行之间从上往下排列，不拉伸 */}
.dlg-tag-item {display: flex; align-items: center; gap: 4px; padding: 3px 6px; cursor: pointer; border-radius: 3px; font-size: 13px; overflow: hidden;}
.dlg-tag-item:hover {background: rgba(0,0,0,0.04);}
.dlg-tag-item-text {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.dlg-tag-count {font-size: 12px; color: #999;}
.dlg-tag-bar {display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;}

/* ── 弹窗底部按钮 ────────────────────────────────────── */
.dlg-btn-cancel {padding: 5px 16px; border: 1px solid #ccc; border-radius: 4px; background: transparent; cursor: pointer; font-size: 13px;}
.dlg-btn-cancel:hover {background: rgba(0,0,0,0.04);}
.dlg-btn-confirm {padding: 5px 16px; border: none; border-radius: 4px; background: #1d4ed8; color: #fff; cursor: pointer; font-size: 13px;}
.dlg-btn-confirm:hover {opacity: .9;}

/* ── 深色主题 ────────────────────────────────────────── */
.theme-dark .dlg-cat-node:hover {background: rgba(255,255,255,0.05);}
.theme-dark .dlg-cat-node.dlg-cat-active {background: rgba(59,130,246,0.25) !important; color: #93c5fd !important;}
.theme-dark .dlg-cat-node.dlg-cat-active .material-symbols-rounded {color: #93c5fd;}
.theme-dark .dlg-tag-item:hover {background: rgba(255,255,255,0.05);}
.theme-dark .dlg-btn-cancel {border-color: #444; color: #ddd;}
.theme-dark .dlg-btn-cancel:hover {background: rgba(255,255,255,0.08);}
.theme-dark .dlg-btn-confirm {background: #3b82f6;}
.theme-dark .dlg-tag-search {border-color: #444; background: #2a2a2a; color: #ddd;}
@keyframes bs-toast-in {from {transform: translateX(100px); opacity: 0;} to  {transform: none; opacity: 1;}}