/* ══ 划词评论 ══ 移植自仙津 SRM 答疑页，配色换成本页的 token（岩青管交互、朱只做身份）
 * 这里只新增三个自己的 token，其余全部复用 index.html :root 里那一套，
 * 三态（bare / prefers-color-scheme / [data-theme]）与主页面同构。 */
:root{
  --on-interactive:#FFFFFF;   /* 岩青底上的字 */
  --hl:#C8912F;               /* 划中原文的下划线：沙金 */
  --hl-bg:rgba(200,145,47,.22);
  --hl-bg-hover:rgba(200,145,47,.36);
  --danger:#B93A25;
  --cmt-shadow:0 8px 28px rgba(27,25,23,.14);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --on-interactive:#171514;
    --hl:#D6B368; --hl-bg:rgba(214,179,104,.22); --hl-bg-hover:rgba(214,179,104,.34);
    --danger:#F09A87;
    --cmt-shadow:0 8px 28px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --on-interactive:#171514;
  --hl:#D6B368; --hl-bg:rgba(214,179,104,.22); --hl-bg-hover:rgba(214,179,104,.34);
  --danger:#F09A87;
  --cmt-shadow:0 8px 28px rgba(0,0,0,.5);
}

/* 划中的原文 */
mark.cmt-hl{background:var(--hl-bg);border-bottom:2px solid var(--hl);
  border-radius:2px;padding:1px 0;cursor:pointer;color:inherit}
mark.cmt-hl:hover{background:var(--hl-bg-hover)}
mark.cmt-hl.done{background:var(--ok-bg);border-bottom-color:var(--ok)}
mark.cmt-hl.cur{box-shadow:0 0 0 2px var(--interactive)}

/* 选中文字后浮出来的小按钮。fixed + 视口坐标，定位在 comments.js 的 placeBar() */
#cmt-bar{position:fixed;z-index:70;display:none;gap:6px;padding:5px;
  background:var(--surface);border:1px solid var(--border-default);border-radius:3px;
  box-shadow:var(--cmt-shadow)}
#cmt-bar.on{display:flex}
#cmt-bar button{font:inherit;font-size:13px;font-weight:600;color:var(--on-interactive);
  background:var(--interactive);border:0;border-radius:2px;padding:6px 13px;cursor:pointer}
#cmt-bar button:hover{background:var(--interactive-hover)}

/* 右下角入口 */
#cmt-fab{position:fixed;right:18px;bottom:18px;z-index:65;display:flex;align-items:center;gap:8px;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--on-interactive);background:var(--interactive);
  border:0;border-radius:3px;padding:11px 18px;cursor:pointer;box-shadow:var(--cmt-shadow)}
#cmt-fab:hover{background:var(--interactive-hover)}
#cmt-fab .n{background:rgba(255,255,255,.24);border-radius:2px;padding:1px 8px;font-size:12.5px;
  font-family:var(--fs-num);font-variant-numeric:tabular-nums}

/* 右侧评论面板 */
#cmt-panel{position:fixed;top:0;right:0;bottom:0;width:min(390px,100vw);z-index:80;
  background:var(--surface);border-left:1px solid var(--border-default);box-shadow:var(--cmt-shadow);
  display:flex;flex-direction:column;transform:translateX(102%);transition:transform .22s ease}
#cmt-panel.open{transform:none}
#cmt-panel header{flex:none;padding:16px 18px;border-bottom:1px solid var(--border-default);
  display:flex;align-items:center;gap:10px}
#cmt-panel header h3{margin:0;font-size:15px;font-weight:600;color:var(--text-primary)}
#cmt-panel header .me{margin-left:auto;font-size:12.5px;color:var(--text-tertiary);cursor:pointer}
#cmt-panel header .me b{color:var(--text-secondary);font-weight:600}
#cmt-panel header button.x{font:inherit;font-size:20px;line-height:1;color:var(--text-tertiary);
  background:none;border:0;cursor:pointer;padding:0 2px}
#cmt-filter{flex:none;display:flex;gap:6px;padding:10px 18px;border-bottom:1px solid var(--border-default)}
#cmt-filter button{font:inherit;font-size:12.5px;color:var(--text-secondary);background:var(--surface-sunken);
  border:1px solid transparent;border-radius:2px;padding:5px 11px;cursor:pointer}
#cmt-filter button.on{background:var(--interactive-bg);border-color:var(--interactive-border);
  color:var(--interactive-hover);font-weight:600}
#cmt-list{flex:1;overflow-y:auto;padding:12px 14px 28px}
#cmt-list .empty{padding:34px 14px;text-align:center;font-size:13px;color:var(--text-tertiary);line-height:1.9}

/* 一个讨论串 */
.cmt-t{border:1px solid var(--border-default);border-radius:2px;background:var(--surface);
  padding:13px 14px;margin-bottom:10px;cursor:pointer}
.cmt-t:hover{border-color:var(--border-strong)}
.cmt-t.cur{border-color:var(--interactive);box-shadow:0 0 0 1px var(--interactive)}
.cmt-t.done{background:var(--surface-sunken)}
.cmt-t .q{font-size:12.5px;color:var(--text-tertiary);line-height:1.65;margin-bottom:9px;
  padding-left:9px;border-left:2px solid var(--hl);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cmt-t.done .q{border-left-color:var(--ok)}
.cmt-m{margin-top:9px}
.cmt-m:first-of-type{margin-top:0}
.cmt-m .h{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.cmt-who{font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:2px}
.cmt-who.np{background:var(--interactive-bg);color:var(--interactive-hover)}
.cmt-who.us{background:var(--warn-bg);color:var(--warn)}
.cmt-m .t{font-size:11.5px;color:var(--text-tertiary);font-family:var(--fs-num);
  font-variant-numeric:tabular-nums}
.cmt-m .b{font-size:13px;color:var(--text-secondary);line-height:1.72;white-space:pre-wrap;word-break:break-word}
.cmt-act{display:flex;gap:12px;margin-top:11px;padding-top:9px;border-top:1px solid var(--border-subtle)}
.cmt-act button{font:inherit;font-size:12.5px;color:var(--text-tertiary);background:none;border:0;
  cursor:pointer;padding:0}
.cmt-act button:hover{color:var(--interactive)}
.cmt-act button.danger:hover{color:var(--danger)}
.cmt-act .done-tag{margin-left:auto;font-size:12px;font-weight:600;color:var(--ok)}

/* 输入区 */
.cmt-form{margin-top:10px}
.cmt-form textarea{width:100%;min-height:74px;font:inherit;font-size:13px;line-height:1.7;
  color:var(--text-primary);background:var(--surface);border:1px solid var(--border-default);
  border-radius:2px;padding:9px 11px;resize:vertical}
.cmt-form textarea:focus{outline:0;border-color:var(--interactive);box-shadow:0 0 0 2px var(--interactive-bg)}
.cmt-form .row{display:flex;align-items:center;gap:8px;margin-top:8px}
.cmt-form .row .hint{font-size:12px;color:var(--text-tertiary);margin-right:auto}
.cmt-btn{font:inherit;font-size:13px;font-weight:600;color:var(--on-interactive);background:var(--interactive);
  border:0;border-radius:2px;padding:7px 15px;cursor:pointer}
.cmt-btn:hover{background:var(--interactive-hover)}
.cmt-btn[disabled]{opacity:.5;cursor:default}
.cmt-btn.ghost{color:var(--text-secondary);background:var(--surface-sunken)}
.cmt-btn.ghost:hover{background:var(--surface-hover)}

/* 身份弹窗 */
#cmt-mask{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:rgba(27,25,23,.48);padding:20px}
#cmt-mask.on{display:flex}
#cmt-who{width:min(410px,100%);background:var(--surface);border-radius:3px;padding:26px 26px 22px;
  box-shadow:var(--cmt-shadow);border-top:3px solid var(--brand)}
#cmt-who h3{margin:0 0 6px;font-size:17px;font-weight:600;color:var(--text-primary)}
#cmt-who p{margin:0 0 18px;font-size:13px;color:var(--text-tertiary);line-height:1.75}
#cmt-who label{display:block;font-size:12.5px;font-weight:600;color:var(--text-secondary);margin:0 0 7px}
#cmt-who input{width:100%;font:inherit;font-size:14px;color:var(--text-primary);background:var(--surface);
  border:1px solid var(--border-default);border-radius:2px;padding:9px 12px}
#cmt-who input:focus{outline:0;border-color:var(--interactive);box-shadow:0 0 0 2px var(--interactive-bg)}
#cmt-sides{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 18px}
#cmt-sides button{font:inherit;font-size:14px;font-weight:500;color:var(--text-secondary);
  background:var(--surface);border:1px solid var(--border-default);border-radius:2px;padding:11px;cursor:pointer}
#cmt-sides button.on{border-color:var(--interactive);background:var(--interactive-bg);
  color:var(--interactive-hover);font-weight:600}
#cmt-who .err{font-size:12.5px;color:var(--danger);margin:0 0 10px;min-height:17px}
#cmt-who .acts{display:flex;gap:9px;justify-content:flex-end}

/* 轻提示 */
#cmt-toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:95;
  font-size:13px;color:#fff;background:rgba(27,25,23,.88);border-radius:2px;padding:9px 17px;
  opacity:0;pointer-events:none;transition:opacity .2s}
#cmt-toast.on{opacity:1}

@media print{#cmt-fab,#cmt-panel,#cmt-bar,#cmt-mask,#cmt-toast{display:none!important}}
@media (max-width:640px){
  #cmt-panel{width:100vw}
  #cmt-fab{right:12px;bottom:12px;padding:10px 15px}
}
@media (prefers-reduced-motion:reduce){#cmt-panel{transition:none}}