/* ══ 划词评论 ══ 复用 css.frag 的飞书 token，亮暗色跟随主页面 */

/* 划中的原文 */
mark.cmt-hl{background:rgba(255,146,10,.20);border-bottom:2px solid var(--orange);
  border-radius:2px;padding:1px 0;cursor:pointer;color:inherit}
mark.cmt-hl:hover{background:rgba(255,146,10,.34)}
mark.cmt-hl.done{background:rgba(52,199,36,.15);border-bottom-color:var(--green)}
mark.cmt-hl.done:hover{background:rgba(52,199,36,.26)}
mark.cmt-hl.cur{box-shadow:0 0 0 2px var(--brand)}

/* 选中文字后浮出来的小按钮 */
#cmt-bar{position:absolute;z-index:70;display:none;gap:6px;padding:5px;
  background:var(--bg);border:1px solid var(--border);border-radius:9px;box-shadow:var(--sd-2)}
#cmt-bar.on{display:flex}
#cmt-bar button{font:inherit;font-size:13px;font-weight:500;color:var(--on-brand);
  background:var(--brand);border:0;border-radius:6px;padding:6px 13px;cursor:pointer}
#cmt-bar button:hover{background:var(--brand-6)}

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

/* 右侧评论面板 */
#cmt-panel{position:fixed;top:0;right:0;bottom:0;width:min(390px,100vw);z-index:80;
  background:var(--bg);border-left:1px solid var(--border);box-shadow:-8px 0 28px rgba(0,0,0,.10);
  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);
  display:flex;align-items:center;gap:10px}
#cmt-panel header h3{margin:0;font-size:15.5px;font-weight:600;color:var(--text-1)}
#cmt-panel header .me{margin-left:auto;font-size:12.5px;color:var(--text-3)}
#cmt-panel header .me b{color:var(--text-2);font-weight:600}
#cmt-panel header button.x{font:inherit;font-size:20px;line-height:1;color:var(--text-3);
  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)}
#cmt-filter button{font:inherit;font-size:12.5px;color:var(--text-2);background:var(--fill-1);
  border:1px solid transparent;border-radius:6px;padding:5px 11px;cursor:pointer}
#cmt-filter button.on{background:var(--brand-1);border-color:var(--brand-3);color:var(--brand);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:13.5px;color:var(--text-3);line-height:1.9}

/* 一个讨论串 */
.cmt-t{border:1px solid var(--border);border-radius:10px;background:var(--bg);
  padding:13px 14px;margin-bottom:10px;cursor:pointer}
.cmt-t:hover{border-color:var(--brand-3)}
.cmt-t.cur{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.cmt-t.done{background:var(--fill-1)}
.cmt-t .q{font-size:12.5px;color:var(--text-3);line-height:1.65;margin-bottom:9px;
  padding-left:9px;border-left:2px solid var(--orange);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cmt-t.done .q{border-left-color:var(--green)}
.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:12px;font-weight:600;padding:1px 8px;border-radius:4px}
.cmt-who.xj{background:var(--brand-1);color:var(--brand)}
.cmt-who.us{background:var(--orange-1);color:var(--orange)}
.cmt-m .t{font-size:11.5px;color:var(--text-4);font-variant-numeric:tabular-nums}
.cmt-m .b{font-size:13.5px;color:var(--text-2);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-2)}
.cmt-act button{font:inherit;font-size:12.5px;color:var(--text-3);background:none;border:0;
  cursor:pointer;padding:0}
.cmt-act button:hover{color:var(--brand)}
.cmt-act button.danger:hover{color:var(--red,#F54A45)}
.cmt-act .done-tag{margin-left:auto;font-size:12px;font-weight:600;color:var(--green)}

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

/* 身份弹窗 */
#cmt-mask{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.42);padding:20px}
#cmt-mask.on{display:flex}
#cmt-who{width:min(410px,100%);background:var(--bg);border-radius:14px;padding:26px 26px 22px;
  box-shadow:var(--sd-2)}
#cmt-who h3{margin:0 0 6px;font-size:17px;font-weight:700;color:var(--text-1)}
#cmt-who p{margin:0 0 18px;font-size:13.5px;color:var(--text-3);line-height:1.75}
#cmt-who label{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin:0 0 7px}
#cmt-who input{width:100%;font:inherit;font-size:14px;color:var(--text-1);background:var(--bg);
  border:1px solid var(--border);border-radius:8px;padding:9px 12px}
#cmt-who input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-2)}
#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-2);background:var(--bg);
  border:1px solid var(--border);border-radius:9px;padding:11px;cursor:pointer}
#cmt-sides button.on{border-color:var(--brand);background:var(--brand-1);color:var(--brand);font-weight:600}
#cmt-who .err{font-size:12.5px;color:#F54A45;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:13.5px;color:#fff;background:rgba(0,0,0,.82);border-radius:8px;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}
}