/* apps/onlineBookCity/onlineBookCity.css — 线上书城专属样式 */



/* ---- 容器 ---- */
.obc-container {
  position: relative;    /* ★ 加这行，作为子元素 absolute 定位的基准 */
  display: grid;
  grid-template-rows: 1fr auto;  /* 内容区占满，tab 栏自动高度 */
  grid-template-areas:
  "content"    /* ← 第一行：内容区 */
  "tabbar";    /* ← 第二行：tab 栏 */
  height: 100%;
  background: #f8f8f8;
}

/* ---- 内容区 ---- */
.obc-content {
  grid-area: content;    /* ← 对应 grid-template-areas 里的 "content" */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

/* ---- Tab 栏 ---- */
.obc-tab-bar {
  grid-area: tabbar;     /* ← 对应 grid-template-areas 里的 "tabbar" */
  display: flex;
  background: white;
  border-top: 1px solid #eee;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.obc-tab {
  flex: 1;
  min-width: 0;
  padding: 12px 8px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: #888;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s;
  position: relative;
}

.obc-tab-active {
  color: #8e24aa;
  font-weight: 600;
  background: rgba(142, 36, 170, 0.08);  /* ← 浅紫色背景 */
}

.obc-tab-disabled {
  color: #ccc;
  cursor: not-allowed;
}


/* ---- 页面标题 ---- */
.obc-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
}

/* ---- 占位 ---- */
.obc-placeholder {
  text-align: center;
  padding: 60px 20px;
}

/* ---- 书架 ---- */
/* ============================================================
   书架 — 双栏布局
   ============================================================ */

.obc-bookshelf {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.obc-bookshelf-layout {
  display: flex;
  flex: 1;              /* ← 填满剩余高度 */
  min-height: 0;        /* ← 允许flex收缩 */
  gap: 0;
  margin: 0 -16px;
}

/* ---- 左侧分类栏 ---- */
.obc-shelf-sidebar {
  width: 22%;
  min-width: 72px;
  max-width: 110px;
  border-right: 1px solid #eee;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 4px;
  flex-shrink: 0;
}

.obc-shelf-sidebar-title {
  font-size: 12px;
  font-weight: 600;
  color: #999;
  padding: 8px 8px 6px;
  letter-spacing: 0.5px;
}

.obc-shelf-cat-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.obc-shelf-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #555;
  transition: background 0.15s;
  position: relative;
}

.obc-shelf-cat-item:active {
  background: #f0f0f0;
}

.obc-shelf-cat-active {
  background: #f3e5f5 !important;
  color: #8e24aa;
  font-weight: 600;
}

.obc-shelf-cat-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.obc-shelf-cat-count {
  font-size: 11px;
  color: #bbb;
  margin-left: 4px;
  flex-shrink: 0;
}

.obc-shelf-cat-active .obc-shelf-cat-count {
  color: #ce93d8;
}


.obc-shelf-cat-add {
  font-size: 12px;
  color: #8e24aa;
  padding: 8px;
  cursor: pointer;
  border-radius: 8px;
  margin-top: 4px;
  text-align: center;
}

.obc-shelf-cat-add:active {
  background: #f3e5f5;
}

/* ---- 右侧主区域 ---- */
.obc-shelf-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 16px;
}

.obc-shelf-header {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 12px;
  flex-shrink: 0;             /* 防止被压缩 */
  line-height: 1.4;           /* 固定行高 */
}

.obc-shelf-book-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;        /* ← 加这行，防止横向溢出 */
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 16px;
}

/* 每本书 — 简约分割线划分 */
.obc-shelf-book-card {
  user-select: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}

.obc-shelf-book-card:last-child {
  border-bottom: none;
}

.obc-shelf-book-card:active {
  background: #f8f8f8;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
}

/* 顶部行：封面 + 基本信息（flex 一行） */
.obc-shelf-book-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* 封面：固定宽度，3:4 比例 */
.obc-shelf-book-cover {
  width: 75px;
  min-width: 68px;
  max-width: 75px;
  aspect-ratio: 3/4;
  background: #e8e8e8;
  border-radius: 6px;
  flex-shrink: 0;
}

/* 右侧信息区 */
.obc-shelf-book-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}


.obc-shelf-book-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obc-shelf-book-author {
  font-size: 12px;
  color: #999;
}

.obc-shelf-book-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.obc-shelf-tag {
  font-size: 10px;
  color: #8e24aa;
  background: #f3e5f5;
  padding: 1px 8px;
  border-radius: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 72px;
}

.obc-shelf-tag-empty {
  color: #bbb;
  background: #f5f5f5;
}

.obc-shelf-book-words {
  font-size: 12px;
  color: #bbb;
}

/* 摘要：独立一行，在封面+信息下面 */
.obc-shelf-book-synopsis {
  font-size: 13px;
  color: #888;
  line-height: 1.5;
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}


/* ★ 长按操作面板 */
.obc-book-action-overlay {
  user-select: none;
  position: absolute;
  inset: 0;
  z-index: 180;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: obc-action-in 0.2s ease;
}

@keyframes obc-action-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.obc-book-action-backdrop {
  flex: 2;                        /* 占 40% 高度 */
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.obc-book-action-panel {
  flex: 3;                        /* 占 60% 高度 */
  background: white;
  border-radius: 20px 20px 0 0;
  padding: 20px 20px 30px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  animation: obc-panel-up 0.25s ease;
  overflow-y: auto;
}

@keyframes obc-panel-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.obc-book-action-info {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}

.obc-book-action-cover {
  width: 64px;
  aspect-ratio: 3/4;
  background: #e8e8e8;
  border-radius: 8px;
  flex-shrink: 0;
}

.obc-book-action-meta {
  flex: 1;
  min-width: 0;
}

.obc-book-action-title {
  font-size: 17px;
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obc-book-action-author {
  font-size: 13px;
  color: #999;
  margin-top: 4px;
}

.obc-book-action-divider {
  height: 1px;
  background: #f0f0f0;
  margin-bottom: 12px;
}

.obc-book-action-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.obc-book-action-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 15px;
  color: #333;
  transition: background 0.1s;
}

.obc-book-action-item:active {
  background: #f5f5f5;
}

.obc-book-action-icon {
  font-size: 20px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}



/* ---- 详情页 ---- */
.obc-detail {
  padding-bottom: 24px;
}

.obc-detail-header {
  text-align: center;
  padding: 20px 0;
  position: relative;
}

.obc-back-btn {
  position: absolute;
  top: 8px;
  left: 0;
  border: none;
  background: transparent;
  font-size: 15px;
  color: #8e24aa;
  cursor: pointer;
  padding: 8px;
}


.obc-detail-title {
  font-size: 22px;
  font-weight: 700;
  color: #333;
}

.obc-detail-author {
  font-size: 13px;
  color: #999;
  margin-top: 4px;
}

.obc-detail-stats {
  font-size: 12px;
  color: #bbb;
  margin-top: 2px;
}


.obc-detail-section {
  margin-top: 24px;
}

.obc-detail-section-title {
  font-size: 15px;
  font-weight: 600;
  color: #555;
  margin-bottom: 10px;
}






/* ---- 阅读器 ---- */
.obc-reader {
  padding-bottom: 24px;
}

.obc-reader-header {
  position: relative;
  padding: 8px 0 16px;
  border-bottom: 1px solid #eee;
  margin-bottom: 16px;
}

.obc-reader-title {
  font-size: 14px;
  color: #888;
  text-align: center;
}

.obc-reader-content {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 0 4px;
}

.obc-reader-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  gap: 10px;
}

/* ---- 创作中心 ---- */
.obc-studio-landing {
  padding: 40px 0;
}

.obc-edit-header {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.obc-edit-title {
  flex: 2;
}

.obc-edit-author {
  flex: 1;
}

.obc-edit-section {
  margin-bottom: 20px;
}

.obc-edit-section-label {
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin-bottom: 8px;
}

.obc-chapter-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.obc-chapter-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: white;
  border-radius: 8px;
  font-size: 13px;
}

.obc-chapter-num {
  color: #8e24aa;
  font-weight: 600;
  flex-shrink: 0;
}

.obc-chapter-title {
  color: #333;
  flex-shrink: 0;
}


.obc-edit-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

/* ---- 设置页 ---- */
.obc-settings-section {
  background: white;
  border-radius: 14px;
  padding: 16px;
}

.obc-settings-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #555;
  margin-bottom: 12px;
}

.obc-preset-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.obc-preset-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  background: #f8f8f8;
  border: 1px solid #eee;
}

.obc-preset-active {
  border-color: #8e24aa;
  background: #f3e5f5;
}

.obc-preset-info {
  flex: 1;
  min-width: 0;
}

.obc-preset-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.obc-preset-model {
  font-size: 11px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

.obc-preset-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.obc-preset-use-btn,
.obc-preset-del-btn {
  border: none;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.obc-preset-use-btn {
  color: #8e24aa;
  background: rgba(142, 36, 170, 0.1);
}

.obc-preset-del-btn {
  color: #e53935;
}

/* ---- 通用组件 ---- */
.obc-input {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.obc-input:focus {
  border-color: #8e24aa;
}

.obc-textarea {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.5;
}

.obc-textarea:focus {
  border-color: #8e24aa;
}

.obc-btn {
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
  transition: opacity 0.2s;
}

.obc-btn:active {
  opacity: 0.7;
}

.obc-btn-primary {
  background: #8e24aa;
  color: white;
}

.obc-btn-secondary {
  background: white;
  border: 1px solid #ddd;
  color: #555;
}

/* ============================================================ */
/*  发现页                                                       */
/* ============================================================ */

.obc-discover {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ---- 类别栏 ---- */
.obc-category-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
  flex-shrink: 0;
  scrollbar-width: none;
}

.obc-category-bar::-webkit-scrollbar {
  display: none;
}

.obc-cat-btn {
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: 16px;
  border: 1px solid #ddd;
  background: white;
  color: #666;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.obc-cat-active {
  background: #8e24aa;
  color: white;
  border-color: #8e24aa;
}

.obc-cat-add-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px dashed #8e24aa;
  background: transparent;
  color: #8e24aa;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- 内容区（可上下滚动） ---- */
.obc-discover-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden; 
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;
}

/* ---- 区块通用 ---- */
.obc-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.obc-section-label {
  font-size: 15px;
  font-weight: 600;
  color: #444;
}

.obc-section-action {
  border: none;
  background: transparent;
  color: #8e24aa;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

/* ---- 金榜推荐（～1/4屏高，横向滚动） ---- */
.obc-golden-section {
  margin-bottom: 20px;
}

.obc-golden-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 8px;
  scrollbar-width: none;
}

.obc-golden-scroll::-webkit-scrollbar {
  display: none;
}

.obc-golden-card {
  flex: 0 0 calc(20% - 9.6px);   /* 20% = 五分之一，9.6px = gap(12px) / 5 张均摊 */
  max-width: 120px;
  cursor: pointer;
  transition: transform 0.1s;
}

.obc-golden-card:active {
  transform: scale(0.95);
}

.obc-golden-cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  background: #ccc;
  margin-bottom: 6px;
}

.obc-golden-highlight {
  font-size: 11px;
  color: #888;
  line-height: 1.3;
  /* display: -webkit-box; */
  /* -webkit-line-clamp: 2; */
  /* -webkit-box-orient: vertical; */
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

/* ---- 新作展示（～1/3屏高，两列） ---- */
.obc-new-works-section {
  margin-bottom: 20px;
}

.obc-new-works-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  padding: 8px 0;
}

.obc-new-work-item {
  font-size: 14px;
  color: #333;
  padding: 8px 4px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.2s;
}

.obc-new-work-item:active {
  color: #8e24aa;
}

.obc-new-work-empty {
  visibility: hidden;
}

/* ---- 卡片式单本展示（两列） ---- */
.obc-card-section {
  margin-bottom: 20px;
}

.obc-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.obc-discover-card {
  width: 100%;              /* 占据 grid 列宽，不溢出 */
  max-width: 100%;          /* 防止内容撑宽 */
   height: 200px;           /* ← 固定高度，不被内容撑开 */
  overflow: hidden;         /* 内容超出就隐藏 */
  background: white;
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: transform 0.1s;
  box-sizing: border-box;   /* padding 计入宽高 */
}

.obc-discover-card:active {
  transform: scale(0.97);
}

.obc-card-top {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.obc-card-cover {
  width: 56px;
  height: 74px;
  border-radius: 6px;
  flex-shrink: 0;
  background: #bbb;
}

.obc-card-info {
  flex: 1;
  min-width: 0;
}

.obc-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obc-card-author {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.obc-card-highlight {
  font-size: 11px;
  color: #8e24aa;
  margin-top: 4px;
  /* display: -webkit-box; */
  /* -webkit-line-clamp: 2; */
  /* -webkit-box-orient: vertical; */
  overflow: hidden;
  word-break: break-all;
}

.obc-card-summary {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
  /* display: -webkit-box; */
  /* -webkit-line-clamp: 2; */
  /* -webkit-box-orient: vertical; */
  overflow: hidden;
}


/* ============================================================ */
/*  详情页                                                       */
/* ============================================================ */

.obc-detail-page {
  /* 整体不撑宽 */
  max-width: 100%;
  overflow: hidden;
}

/* ---- 顶部返回栏 ---- */
.obc-detail-topbar {
  padding: 4px 0 12px;
}

/* ---- 第一部分：封面 + 信息（～1/3屏高） ---- */
.obc-detail-header-section {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: 100%;
  overflow: hidden;
}

.obc-detail-cover-wrap {
  flex-shrink: 0;
}

.obc-detail-cover {
  width: 90px;
  height: 120px;
  background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
  border-radius: 8px;
}

.obc-detail-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.obc-detail-title {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obc-detail-author {
  font-size: 14px;
  color: #888;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obc-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.obc-detail-tag {
  font-size: 11px;
  color: #8e24aa;
  background: #f3e5f5;
  padding: 2px 10px;
  border-radius: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80px;
}

.obc-detail-tag-empty {
  color: #bbb;
  background: #f5f5f5;
}

.obc-detail-wordcount {
  font-size: 13px;
  color: #999;
  margin-top: 10px;
}

/* ---- 第二部分：功能按钮区（一行四等分） ---- */
.obc-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  margin: 12px 0 16px 0;   /* margin-top 从 16px 改 12px，让按钮上移 */
  max-width: 100%;
}

.obc-detail-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  border: none;
  background: #f5f5f5;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  color: #666;
  white-space: nowrap;
}

.obc-detail-action-btn:active {
  transform: scale(0.95);
}

.obc-action-icon {
  font-size: 22px;
}

.obc-action-label {
  font-size: 11px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.obc-action-collected {
  background: #e8f5e9;
  border-color: #a5d6a7;
}

.obc-action-collected .obc-action-label {
  color: #2e7d32;
}

/* ---- 第三部分：简介区 ---- */
.obc-detail-section {
  margin-bottom: 16px;
  max-width: 100%;
  overflow: hidden;
}

.obc-detail-section-title {
  font-size: 15px;
  font-weight: 600;
  color: #444;
  margin-bottom: 10px;
}

.obc-detail-synopsis-wrap {
  max-width: 100%;
  overflow: hidden;
}

.obc-detail-synopsis {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  word-break: break-all;
  max-width: 100%;
  overflow: hidden;
}

.obc-synopsis-clamped {
  max-height: 10em;        /* 约 3.5 行 */
  position: relative;
}

.obc-synopsis-toggle {
  border: none;
  background: transparent;
  color: #8e24aa;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  margin-top: 4px;
}

/* ---- 第四部分：章节目录 ---- */
.obc-detail-chapter-section {
  padding-bottom: 20px;
}

.obc-detail-chapter-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 100%;
}

/* ★ 一行布局：序号 | 标题 | 摘要，高度固定 */
.obc-detail-chapter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  height: 44px;              /* ← 固定高度，不被内容撑开 */
  box-sizing: border-box;
  overflow: hidden;
  padding-right: 40px;    /* ★ 加这行，给 ⋮ 留空间 */
}

.obc-detail-chapter-row:active {
  background: #f3e5f5;
}

/* 序号：紫色圆底 */
.obc-chapter-num {
  font-size: 12px;
  color: #8e24aa;
  font-weight: 600;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background: #f3e5f5;
  border-radius: 50%;
}

/* 标题：固定宽度占比，超长省略 */
.obc-chapter-title {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  flex-shrink: 0;
  max-width: 38%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 44px;
}

/* 摘要：右侧弹性区，超长可横向滚动 */
.obc-chapter-summary {
  font-size: 13px;
  color: #999;
  flex: 1;
  min-width: 0;
  overflow: auto;
  white-space: nowrap;
  line-height: 44px;
  /* 隐藏滚动条但保留滚动功能 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.obc-chapter-summary::-webkit-scrollbar {
  display: none;
}

/* 摘要为空时占位提示 */
.obc-chapter-summary:empty::before {
  content: '（无摘要）';
  color: #ddd;
}

/* ★ 章节操作按钮 ⋮ */
.obc-chapter-more {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 18px;
  color: #bbb;
  cursor: pointer;
  border-radius: 50%;
  z-index: 2;
  user-select: none;
}

.obc-chapter-more:active {
  background: #f0f0f0;
  color: #666;
}

/* ★ 章节操作菜单 */
.obc-chapter-menu {
  position: fixed;
  z-index: 150;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  padding: 6px 0;
  min-width: 140px;
  animation: obc-menu-in 0.15s ease;
}

@keyframes obc-menu-in {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.obc-chapter-menu-item {
  padding: 10px 16px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
}

.obc-chapter-menu-item:active {
  background: #f5f5f5;
}

.obc-chapter-menu-item:last-child {
  border-bottom: none;
}