/* 共读：书架 → 目录 → 阅读。2026-10-02 从 index.html 拆出来；加载顺序见 index.html 的 <link>，前后顺序就是层叠顺序，别乱调 */
  /* ── 共读 ── */
  /* ── 共读：书架 → 目录 → 阅读。面板在 .app 外面，颜色都写死不走聊天页变量。
     我们留下的痕迹(进度、当前章、批注点、选中段落、记下/回复)统一用灰粉，跟发送键同一个色 ── */
  .rn-view{ flex:1; overflow-y:auto; padding:18px 20px 28px; scrollbar-width:none; }
  .rn-view::-webkit-scrollbar{ width:0; height:0; }
  #readingReader.rn-view{ padding-bottom:110px; }
  .rn-empty{ color:var(--text-faint); font-family:var(--font-cn); font-size:13.5px; padding:20px 2px; }

  .rn-book-card{
    position:relative; border-radius:16px; padding:16px 18px; margin-bottom:12px; cursor:pointer;
    background:var(--card-bg); border:1px solid var(--card-line); box-shadow:var(--card-shadow);
    transition:opacity .15s var(--ease-soft);
  }
  .rn-book-card:active{ opacity:.75; }
  .rn-book-tools{ position:absolute; top:12px; right:14px; display:flex; gap:2px; }
  .rn-book-tool{
    width:26px; height:26px; padding:0; border:0; background:none; border-radius:8px; cursor:pointer;
    color:var(--text-faint); display:grid; place-items:center;
    transition:color .15s var(--ease-soft), background .15s var(--ease-soft);
  }
  .rn-book-tool:hover{ color:#6E7684; background:rgba(255,255,255,.5); }
  .rn-book-tool svg{ width:14px; height:14px; display:block; }
  .rn-book-title{ font-family:var(--font-cn); font-weight:500; font-size:16px; color:var(--text); padding-right:64px; margin-bottom:3px; }
  .rn-book-note{ font-family:var(--font-cn); font-size:11.5px; color:var(--text-faint); margin-bottom:8px; }
  .rn-book-meta{ font-family:var(--font-cn); font-size:11.5px; color:var(--text-faint); margin-bottom:10px; }
  .rn-book-bar{ height:3px; border-radius:2px; background:rgba(120,132,160,.16); overflow:hidden; }
  .rn-book-fill{ height:100%; border-radius:2px; background:#BDA0A1; transition:width .3s var(--ease-soft); }
  .rn-upload-btn{
    width:100%; padding:14px; border-radius:14px; cursor:pointer;
    border:1.5px dashed rgba(120,132,160,.32); background:none;
    color:var(--text-faint); font-family:var(--font-cn); font-size:13.5px;
    transition:color .15s var(--ease-soft), border-color .15s var(--ease-soft);
  }
  .rn-upload-btn:hover{ color:#6E7684; border-color:rgba(189,160,161,.7); }
  .rn-upload-status{ font-size:12px; color:var(--text-faint); text-align:center; margin-top:8px; }

  .rn-book-meta-line{ font-family:var(--font-cn); font-size:12px; color:var(--text-faint); margin-bottom:14px; padding:0 2px; }
  .rn-ch-item{
    display:flex; align-items:center; gap:12px; padding:12px 6px; border-radius:10px; cursor:pointer;
    border-bottom:1px solid rgba(60,72,100,.08);
    transition:background .15s var(--ease-soft);
  }
  .rn-ch-item:hover, .rn-ch-item:active{ background:rgba(255,255,255,.4); }
  .rn-ch-num{ font-family:var(--font-en); font-size:13px; color:var(--text-faint); min-width:24px; }
  .rn-ch-name{ font-family:var(--font-cn); font-size:14px; color:var(--text); flex:1 1 auto; min-width:0; }
  .rn-ch-cur .rn-ch-name{ color:#8A6A6A; font-weight:500; }
  .rn-ch-dot{ width:6px; height:6px; border-radius:50%; background:#BDA0A1; flex:none; opacity:0; }
  .rn-ch-dot.has-anno{ opacity:1; }

  .rn-reader-nav{ display:flex; align-items:center; gap:8px; margin-bottom:20px; }
  .rn-reader-nav .rn-book-tool svg{ width:15px; height:15px; }
  .rn-reader-ch-title{
    flex:1 1 auto; min-width:0; text-align:center;
    font-family:var(--font-cn); font-weight:500; font-size:14px; color:#6E7684;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .rn-para{
    position:relative; font-family:var(--font-cn); font-size:14px; line-height:1.9; color:var(--text);
    margin-bottom:3px; padding:7px 9px; border-radius:10px; cursor:pointer;
    transition:background .15s var(--ease-soft);
  }
  .rn-para:hover{ background:rgba(255,255,255,.35); }
  .rn-para.selected{ background:rgba(189,160,161,.16); }
  .rn-para-marker{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#BDA0A1; margin-left:5px; vertical-align:middle; }

  /* 批注：段落后面浮出来的对话，跟聊天气泡一个语言——实白圆角，不要侧边框 */
  .rn-anno-block{
    margin:2px 8px 16px; border-radius:16px; cursor:pointer; overflow:hidden;
    background:#fff; box-shadow:0 8px 20px rgba(64,76,112,.08);
  }
  .rn-anno-summary{ display:flex; align-items:center; gap:6px; padding:10px 13px; font-size:12px; color:var(--text-faint); }
  .rn-anno-summary-chev{ margin-left:auto; width:12px; height:12px; flex:none; transition:transform .2s var(--ease-soft); }
  .rn-anno-block.open .rn-anno-summary-chev{ transform:rotate(90deg); }
  .rn-anno-body{
    display:grid; grid-template-rows:0fr; opacity:0;
    transition:grid-template-rows .32s var(--ease-soft), opacity .24s ease;
  }
  .rn-anno-block.open .rn-anno-body{ grid-template-rows:1fr; opacity:1; }
  .rn-anno-clip{ min-height:0; overflow:hidden; }
  .rn-anno-body-in{ padding:0 13px 12px; }
  .rn-anno-anchor{ font-family:var(--font-cn); font-size:11px; color:var(--text-faint); line-height:1.55; margin-bottom:7px; }
  .rn-anno-note{ font-family:var(--font-cn); font-size:12.5px; color:var(--text); line-height:1.65; }
  .rn-anno-who, .rn-reply-who{ display:flex; justify-content:space-between; gap:8px; font-size:10px; color:var(--text-faint); margin-top:5px; }
  .rn-reply-who{ margin-top:3px; }
  .rn-anno-del{ cursor:pointer; flex:none; }
  .rn-anno-del:hover{ color:#6E7684; }
  .rn-reply{ margin-top:9px; padding-top:9px; border-top:1px solid rgba(60,72,100,.1); }
  .rn-reply-text{ font-family:var(--font-cn); font-size:12.5px; color:var(--text); line-height:1.6; }
  .rn-reply-form{ display:flex; gap:7px; margin-top:10px; }
  .rn-reply-input{
    flex:1 1 auto; min-width:0; padding:7px 10px; border-radius:8px; resize:none; overflow:hidden;
    border:1px solid rgba(60,72,100,.14); background:rgba(120,132,160,.06);
    font-family:var(--font-cn); font-size:12px; line-height:1.4; color:var(--text); outline:0;
  }
  .rn-reply-send, .rn-anno-bar-submit{
    flex:none; border:0; cursor:pointer; white-space:nowrap;
    background:rgba(189,160,161,.22); color:#8A6A6A; font-family:var(--font-cn);
  }
  .rn-reply-send{ padding:7px 12px; border-radius:8px; font-size:11px; }
  .rn-reply-send:disabled, .rn-anno-bar-submit:disabled{ opacity:.5; cursor:default; }

  .rn-ch-nav-bottom{ display:flex; justify-content:space-between; padding:22px 4px 4px; }
  .rn-ch-nav-bottom button{ border:0; background:none; cursor:pointer; color:var(--text-faint); font-family:var(--font-cn); font-size:13px; padding:6px 0; }
  .rn-ch-nav-bottom button:hover{ color:#6E7684; }

  /* 选中段落后从底部浮出的批注输入条 */
  .rn-anno-bar{
    position:absolute; left:0; right:0; bottom:0; z-index:4;
    padding:12px 20px calc(env(safe-area-inset-bottom) + 12px);
    background:rgba(255,255,255,.64);
    -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 -1px 0 rgba(255,255,255,.4);
  }
  .rn-anno-bar-quote{ font-family:var(--font-cn); font-size:11px; color:var(--text-faint); margin-bottom:7px; line-height:1.5; }
  .rn-anno-bar-row{ display:flex; gap:9px; align-items:flex-end; }
  .rn-anno-bar-input{
    flex:1 1 auto; min-width:0; padding:9px 12px; border-radius:11px; resize:none;
    border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.55);
    font-family:var(--font-cn); font-size:13px; line-height:1.5; color:var(--text); outline:0;
  }
  .rn-anno-bar-submit{ padding:9px 15px; border-radius:11px; font-size:12px; }
  .period-cal-cell{ width:calc(100%/7); display:flex; justify-content:center; align-items:center; padding:2px 0; box-sizing:border-box; }
  .period-cal-day{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--text-soft); position:relative; cursor:pointer; flex-shrink:0; }
  .period-cal-day.today{ font-weight:700; color:var(--text); box-shadow: inset 0 0 0 1.5px var(--accent); }
  .period-cal-day.selected{ box-shadow: inset 0 0 0 2px var(--accent); }
  .period-cal-day.has-entries::after{ content:""; position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--dot-color, var(--accent)); }
  .settings-row{ padding:11px 15px; border-top:1px solid var(--hairline); }
  .settings-row:first-child{ border-top:0; }
  .settings-row-label{ display:flex; align-items:center; gap:12px; margin-bottom:9px; }
  .settings-inline{ display:flex; gap:7px; align-items:center; justify-content:space-between; padding-left:31px; }
  .settings-inline .menu-sub{ margin-top:0; flex:1 1 auto; min-width:0; }
  .settings-input{
    flex:1 1 auto; min-width:0; padding:7px 10px 7px 2px; border-radius:8px;
    border:1px solid var(--field-line); background:var(--field-bg);
    font-family:var(--font-cn); font-size:12px; color:var(--text); outline:0;
  }
  .settings-input::placeholder{ color:var(--text-faint); }
  .settings-btn, .settings-file-label{
    flex:none; padding:7px 11px; border-radius:8px; cursor:pointer;
    background:none; border:1px solid var(--accent); color:var(--accent);
    font-size:11px; font-family:var(--font-cn); display:inline-block;
  }
  .settings-fold-btn{ display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; border-top:1px solid var(--field-line); padding:14px 2px 10px; font-size:13px; color:var(--text-soft); cursor:pointer; font-family:var(--font-cn); }
  .fold-chev{ width:16px; height:16px; transition:transform .25s; }
  .settings-fold-btn.open .fold-chev{ transform:rotate(90deg); }
  .settings-fold-body{ display:flex; flex-direction:column; gap:10px; }
  .settings-fold-body.hidden{ display:none; }
  .code-preview-modal{ position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; background:#fff; }
  .code-preview-bar{ height:44px; display:flex; align-items:center; padding:0 12px; gap:10px; background:#f5f1eb; border-bottom:1px solid rgba(0,0,0,.1); flex-shrink:0; }
  .code-preview-close{ background:none; border:none; font-size:22px; cursor:pointer; color:#555; line-height:1; padding:0 4px; }
  .code-preview-iframe{ flex:1; border:none; width:100%; }
  .meta{
    display:inline; margin-left: 8px; white-space: nowrap;
    font-family: var(--font-en), var(--font-cn); font-weight: 500;
    font-size: 10px; letter-spacing: .02em; color: var(--text-faint); user-select:none;
    vertical-align: baseline;
  }
  .meta .tick{ color: var(--tick); margin-left: 7px; letter-spacing:0; }
  .meta .state{ color: var(--c-accent); }
  .meta .fail{ color:#c0533f; cursor:pointer; }
  .row.human .meta,
  .row.ai .meta{ color: var(--text-faint); }
  .row.human .meta .tick,
  .row.ai .meta .tick{ color: var(--tick); }
  /* 发送中:小时钟(Telegram 既视感),转完即送达 → 同位换成 ✓✓ */
  .meta .tick.clock{ color: var(--tick); }
  .meta .tick.clock svg{ width: 1.05em; height: 1.05em; vertical-align: -0.18em; }