/* OKELIS social plan — review and comment layer */
:root{--rv-navy:#021849;--rv-red:#E1330F;--rv-blue:#1B5AA8;--rv-line:#DDE1E8;--rv-muted:#8590A6}

#rv-layer{position:absolute;top:0;left:0;width:100%;height:0;pointer-events:none;z-index:60}
#rv-layer .mk{position:absolute;pointer-events:auto;cursor:pointer}
#rv-layer .mk.rect{border:2px solid var(--rv-red);background:rgba(225,51,15,.10);border-radius:3px}
#rv-layer .mk.point{width:0;height:0}
#rv-layer .mk .bub{position:absolute;top:-13px;left:-13px;width:26px;height:26px;border-radius:50%;
  background:var(--rv-red);color:#fff;font:600 12px/26px -apple-system,"SF Pro Text",Helvetica,sans-serif;
  text-align:center;box-shadow:0 2px 8px rgba(2,24,73,.34);border:2px solid #fff}
#rv-layer .mk.rect .bub{top:-13px;left:-13px}
#rv-layer .mk.done{opacity:.42}
#rv-layer .mk.done .bub{background:var(--rv-blue)}
#rv-layer .mk.sel .bub{transform:scale(1.18)}
#rv-layer .mk.sel{box-shadow:0 0 0 3px rgba(225,51,15,.28)}
#rv-layer.hide{display:none}

/* capture layer while adding */
#rv-capture{position:fixed;inset:0;z-index:80;cursor:crosshair;background:rgba(2,24,73,.06)}
#rv-marquee{position:fixed;border:2px dashed var(--rv-red);background:rgba(225,51,15,.10);
  z-index:81;pointer-events:none;border-radius:3px}

/* toolbar */
#rv-bar{position:fixed;left:18px;bottom:18px;z-index:90;display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--rv-line);border-radius:11px;padding:8px 10px;
  box-shadow:0 8px 30px rgba(2,24,73,.18);
  font:14px/1.4 -apple-system,"SF Pro Text",Helvetica,sans-serif}
#rv-bar button{font:500 13px/1 -apple-system,"SF Pro Text",Helvetica,sans-serif;padding:8px 12px;
  border-radius:7px;border:1px solid var(--rv-line);background:#fff;color:var(--rv-navy);cursor:pointer}
#rv-bar button:hover{background:#F6F7F9}
#rv-bar button.on{background:var(--rv-red);border-color:var(--rv-red);color:#fff}
#rv-bar button.pri{background:var(--rv-navy);border-color:var(--rv-navy);color:#fff}
#rv-bar .who{border:1px solid var(--rv-line);border-radius:7px;padding:7px 9px;width:120px;
  font:13px -apple-system,"SF Pro Text",Helvetica,sans-serif;color:var(--rv-navy)}
#rv-bar .ct{font-size:12px;color:var(--rv-muted);padding:0 2px}
#rv-bar .dot{width:7px;height:7px;border-radius:50%;background:#3BA55D}
#rv-bar .dot.off{background:#E1330F}

/* composer */
#rv-comp{position:absolute;z-index:95;width:300px;background:#fff;border:1px solid var(--rv-line);
  border-radius:11px;box-shadow:0 12px 40px rgba(2,24,73,.24);padding:14px;
  font:14px/1.5 -apple-system,"SF Pro Text",Helvetica,sans-serif}
#rv-comp textarea{width:100%;height:88px;resize:vertical;border:1px solid var(--rv-line);
  border-radius:7px;padding:9px;font:14px/1.5 -apple-system,"SF Pro Text",Helvetica,sans-serif;
  color:var(--rv-navy)}
#rv-comp .row{display:flex;gap:7px;margin-top:9px}
#rv-comp button{flex:1;padding:8px;border-radius:7px;border:1px solid var(--rv-line);background:#fff;
  cursor:pointer;font:500 13px -apple-system,"SF Pro Text",Helvetica,sans-serif;color:var(--rv-navy)}
#rv-comp button.pri{background:var(--rv-navy);border-color:var(--rv-navy);color:#fff}
#rv-comp .hint{font-size:11.5px;color:var(--rv-muted);margin-bottom:8px}

/* panel */
#rv-panel{position:fixed;top:0;right:0;width:372px;height:100vh;background:#fff;z-index:88;
  border-left:1px solid var(--rv-line);box-shadow:-8px 0 34px rgba(2,24,73,.12);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s ease;
  font:14px/1.55 -apple-system,"SF Pro Text",Helvetica,sans-serif}
#rv-panel.open{transform:none}
#rv-panel .hd{padding:16px 18px;border-bottom:1px solid var(--rv-line);display:flex;
  align-items:center;justify-content:space-between}
#rv-panel .hd b{font:500 16px -apple-system,"SF Pro Display",Helvetica,sans-serif;color:var(--rv-navy);
  letter-spacing:-.02em}
#rv-panel .hd button{border:none;background:none;font-size:20px;cursor:pointer;color:var(--rv-muted);
  line-height:1;padding:0 4px}
#rv-panel .fl{display:flex;gap:6px;padding:11px 18px;border-bottom:1px solid var(--rv-line)}
#rv-panel .fl button{font:500 12px -apple-system,Helvetica,sans-serif;padding:5px 11px;border-radius:20px;
  border:1px solid var(--rv-line);background:#fff;cursor:pointer;color:var(--rv-navy)}
#rv-panel .fl button.on{background:var(--rv-navy);border-color:var(--rv-navy);color:#fff}
#rv-panel .list{flex:1;overflow-y:auto;padding:8px 0}
#rv-panel .it{padding:13px 18px;border-bottom:1px solid #EBEEF3;cursor:pointer}
#rv-panel .it:hover{background:#F6F7F9}
#rv-panel .it.done{opacity:.55}
#rv-panel .it .top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
#rv-panel .it .n{width:21px;height:21px;border-radius:50%;background:var(--rv-red);color:#fff;
  font:600 11px/21px -apple-system,Helvetica,sans-serif;text-align:center;flex:none}
#rv-panel .it.done .n{background:var(--rv-blue)}
#rv-panel .it .a{font-weight:600;color:var(--rv-navy);font-size:13px}
#rv-panel .it .t{font-size:11.5px;color:var(--rv-muted);margin-left:auto}
#rv-panel .it p{font-size:13.5px;color:#43506B;white-space:pre-wrap;margin:0}
#rv-panel .it .where{font-size:11.5px;color:var(--rv-muted);margin-top:5px}
#rv-panel .it .rep{margin-top:8px;padding-left:11px;border-left:2px solid var(--rv-line)}
#rv-panel .it .rep div{margin-bottom:6px;font-size:13px}
#rv-panel .it .rep b{color:var(--rv-navy);font-size:12.5px}
#rv-panel .it .acts{display:flex;gap:7px;margin-top:9px}
#rv-panel .it .acts button{font:500 11.5px -apple-system,Helvetica,sans-serif;padding:4px 9px;
  border-radius:6px;border:1px solid var(--rv-line);background:#fff;cursor:pointer;color:var(--rv-navy)}
#rv-panel .empty{padding:34px 18px;text-align:center;color:var(--rv-muted);font-size:13.5px}
#rv-panel .ft{padding:11px 18px;border-top:1px solid var(--rv-line);font-size:11.5px;
  color:var(--rv-muted)}
@media(max-width:620px){#rv-panel{width:100%}#rv-bar .who{width:88px}}
@media print{#rv-bar,#rv-panel,#rv-layer,#rv-capture{display:none!important}}

/* thumbnail of the marked region, shown inside each comment */
#rv-panel .thumb{position:relative;margin-top:9px;border:1px solid var(--rv-line);
  border-radius:7px;overflow:hidden;background:#F6F7F9;max-width:250px}
#rv-panel .thumb img{width:100%;display:block}
#rv-panel .thumb span{position:absolute;border:2px solid var(--rv-red);border-radius:2px;
  background:rgba(225,51,15,.16);box-shadow:0 0 0 9999px rgba(255,255,255,.42)}