/* In-page comments — ported from the CRO dashboard, re-themed to Paeon's plain palette.
   One functional colour kept: a muted red for the unread signal. */
:root{ --cm-alert:#c0453f; }
:root[data-theme="dark"]{ --cm-alert:#e0655e; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --cm-alert:#e0655e; } }

.cmdock{position:fixed;right:16px;bottom:16px;z-index:92;display:flex;gap:8px;align-items:center}
.cmtoggle{appearance:none;border:1px solid var(--line);cursor:pointer;font:inherit;font-size:13px;font-weight:600;
  background:var(--fg);color:var(--bg);border-radius:999px;padding:9px 16px}
.cmtoggle.on{background:var(--surface);color:var(--fg)}
.cminboxbtn{appearance:none;border:1px solid var(--line);cursor:pointer;font:inherit;font-size:13px;font-weight:600;
  background:var(--surface);color:var(--fg);border-radius:999px;min-width:38px;height:38px;padding:0 12px;position:relative}
.cmunread{position:absolute;top:-6px;right:-6px;background:var(--cm-alert);color:#fff;font-size:10.5px;font-weight:700;
  font-style:normal;border-radius:999px;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;
  padding:0 4px;border:2px solid var(--bg)}

.cmcatch{position:fixed;inset:0;z-index:88;cursor:crosshair;background:transparent}
.cmbanner{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:94;background:var(--fg);color:var(--bg);
  font-size:12.5px;border-radius:999px;padding:7px 16px}
.cmbanner kbd{background:rgba(127,127,127,0.28);border-radius:4px;padding:1px 5px;font-family:var(--mono);font-size:11px}

.cmfeed{position:fixed;right:16px;top:16px;z-index:90;width:320px;max-height:calc(100vh - 32px);display:flex;
  flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 44px rgba(0,0,0,0.14);padding:14px}
.cmthead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex:none}
.cmfeed.collapsed{max-height:none;padding:10px 14px}
.cmfeed.collapsed .cmthead{margin-bottom:0}
.cmfeedtog{appearance:none;border:0;background:none;color:var(--fg);font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:6px}
.cmfeedcount{font-size:12.5px;font-weight:500;color:var(--muted)}
.cmfeedtog .cmunread{position:static;display:inline-flex;min-width:18px;height:18px;background:var(--cm-alert);border:none}
.cmfeedtitle{font-size:14px;font-weight:600;color:var(--fg)}
.cmx{appearance:none;border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;font-size:12px;
  border-radius:6px;padding:4px 10px;cursor:pointer}
.cmx:hover{color:var(--fg)}

.cminboxctl{display:flex;gap:6px;align-items:center}
.cminboxctl button{appearance:none;border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;
  font-size:12px;font-weight:600;border-radius:6px;padding:4px 10px;cursor:pointer}
.cminboxctl button.on{background:var(--surface-2);color:var(--fg)}

.cmlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;overflow-y:auto}
.cmlrow{appearance:none;border:1px solid var(--line);text-align:left;width:100%;cursor:pointer;display:flex;
  flex-direction:column;gap:3px;background:var(--surface);border-radius:9px;padding:10px 12px;font:inherit}
.cmlrow:hover{background:var(--surface-2)}
.cmlrow.done{opacity:0.55}
.cmlrow.unread{box-shadow:inset 3px 0 0 var(--cm-alert)}
.cmltarget{font-size:12.5px;font-weight:600;color:var(--fg);display:flex;align-items:center;gap:6px}
.cmltarget em{font-style:normal;font-weight:500;font-size:11px;color:var(--muted);background:var(--surface-2);
  border-radius:5px;padding:1px 6px}
.cmltext{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmlmeta{font-size:11px;color:var(--faint)}
.cmempty{list-style:none;font-size:12.5px;color:var(--muted);padding:12px 0}

.cmfeedthread{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.cmtarget{font-size:13px;font-weight:600;color:var(--fg)}
.cmview{font-size:11px;color:var(--muted);margin-top:2px}
.cmgoto{appearance:none;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font:inherit;
  font-size:12px;border-radius:7px;padding:4px 10px;cursor:pointer;margin:6px 0}
.cmmsgs{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:10px}
.cmmsgs li{display:flex;flex-direction:column;gap:3px;padding:9px 11px;border-radius:9px;background:var(--surface-2)}
.cmmsgs li.claude{background:var(--surface-2);border:1px solid var(--line)}
.cmwho{font-size:11.5px;font-weight:600;color:var(--muted)}
.cmwho i{font-style:normal;font-weight:400;color:var(--faint);margin-left:4px}
.cmbody{font-size:13.5px;color:var(--fg);white-space:pre-wrap;overflow-wrap:anywhere}
.cmreply{display:flex;gap:8px;align-items:flex-end}
.cmreply textarea{flex:1;min-height:44px}
.cmreplysend{flex:none;margin-bottom:2px}
.cmtactions{display:flex;justify-content:space-between;margin-top:10px}

.cmcompose{position:fixed;z-index:95;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,0.18);padding:14px;width:300px}
.cmctarget{font-size:12.5px;font-weight:600;color:var(--fg)}
.cmcview{font-size:11px;color:var(--muted);margin-top:2px}
.cmcompose textarea,.cmreply textarea{width:100%;margin-top:8px;min-height:64px;resize:vertical;border:1px solid var(--line);
  border-radius:8px;padding:8px;font:inherit;font-size:13px;color:var(--fg);background:var(--bg)}
.cmcbtns{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.cmcancel,.cmdel{appearance:none;border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;
  font-size:12.5px;font-weight:600;border-radius:8px;padding:5px 12px;cursor:pointer}
.cmsend,.cmresolve{appearance:none;border:1px solid var(--fg);background:var(--fg);color:var(--bg);font:inherit;
  font-size:12.5px;font-weight:600;border-radius:8px;padding:6px 14px;cursor:pointer}
.cmdel{color:var(--cm-alert);border-color:var(--cm-alert)}

.cmpins{position:fixed;inset:0;z-index:86;pointer-events:none}
.cmpin{position:fixed;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;width:22px;height:22px;
  border-radius:999px 999px 999px 2px;border:2px solid var(--bg);background:var(--fg);color:var(--bg);font-size:12px;
  font-weight:700;line-height:1;box-shadow:0 3px 10px rgba(0,0,0,0.28);display:flex;align-items:center;justify-content:center}
.cmpin.on{background:var(--muted)}
.cmpin.unread{background:var(--cm-alert);color:#fff}
.cmpin.lost{opacity:0.5;border-style:dashed}

.cmpreview{position:fixed;z-index:96;width:264px;pointer-events:none;background:var(--fg);color:var(--bg);border-radius:10px;
  padding:10px 12px;box-shadow:0 12px 30px rgba(0,0,0,0.28)}
.cmptarget{font-size:11.5px;font-weight:600;opacity:0.75;margin-bottom:4px}
.cmpbody{font-size:13px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.cmplast{font-size:12px;opacity:0.85;margin-top:6px;padding-top:6px;border-top:1px solid rgba(127,127,127,0.3)}
.cmplast b{opacity:1}
.cmpmore{font-size:10.5px;opacity:0.6;margin-top:6px}

@media (max-width:820px){
  .cmfeed{right:8px;left:8px;width:auto;top:8px}
}