/* bp-review — portable design-review layer. Built Proper visual system.
   Namespaced .bpr-* to avoid host collisions. */
:root{
  --bpr-ink:#0d1420; --bpr-ink2:#151f2e; --bpr-line:#26313f;
  --bpr-lime:#d6f50a; --bpr-paper:#ffffff; --bpr-muted:#8a99ac;
  --bpr-text:#c9d4e0;
}
.bpr-hidden{display:none !important}

/* ---------- toolbar (top-center, BP bar) ---------- */
.bpr-bar{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:2147483000;
  display:flex;align-items:stretch;gap:2px;background:var(--bpr-ink);border:1px solid var(--bpr-line);
  border-radius:12px;padding:5px;box-shadow:0 12px 40px rgba(0,0,0,.45);
  font-family:'Space Grotesk',system-ui,sans-serif}
.bpr-bar *{box-sizing:border-box}
.bpr-tool{appearance:none;border:0;background:transparent;color:var(--bpr-text);cursor:pointer;
  font:600 13px/1 'Space Grotesk',system-ui,sans-serif;padding:9px 14px;border-radius:8px;
  display:flex;align-items:center;gap:8px;white-space:nowrap;transition:background .12s,color .12s}
.bpr-tool:hover{background:var(--bpr-ink2);color:#fff}
.bpr-tool.on{background:var(--bpr-lime);color:#0a1018}
.bpr-tool .ic{width:15px;height:15px;display:block}
.bpr-tool .ic *{stroke:currentColor}
.bpr-pill{min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--bpr-line);
  color:#fff;font:700 10px/18px 'Space Grotesk',sans-serif;text-align:center}
.bpr-tool.on .bpr-pill{background:rgba(10,16,24,.25);color:#0a1018}
.bpr-div{width:1px;background:var(--bpr-line);margin:4px 3px}
.bpr-id{display:flex;align-items:center;gap:7px;padding:0 12px 0 8px;color:var(--bpr-muted);
  font:600 12px/1 'Space Grotesk',sans-serif}
.bpr-id .av{width:22px;height:22px;border-radius:50%;color:#0a1018;font:700 9px/22px 'Space Grotesk',sans-serif;text-align:center;text-transform:uppercase}
.bpr-mode-hint{position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:2147483000;
  background:var(--bpr-lime);color:#0a1018;font:600 12px/1 'Space Grotesk',sans-serif;
  padding:8px 14px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.3);pointer-events:none}

/* ---------- comment-mode catch overlay ---------- */
.bpr-catch{position:fixed;inset:0;z-index:2147482500;cursor:crosshair;background:rgba(10,16,24,.03)}

/* ---------- pins (inside the board, counter-scaled) ---------- */
.bpr-layer{position:absolute;inset:0;pointer-events:none;z-index:900}
.bpr-layer.bpr-off{display:none}
.bpr-pin{position:absolute;pointer-events:auto;cursor:pointer;transform-origin:0 100%;
  transform:translate(-50%,-100%) scale(calc(1 / var(--bpz,1)))}
.bpr-pin .head{width:32px;height:32px;border-radius:50% 50% 50% 4px;background:var(--bpr-lime);
  border:2px solid #0a1018;display:flex;align-items:center;justify-content:center;
  font:800 13px/1 'Space Grotesk',sans-serif;color:#0a1018;box-shadow:0 5px 16px rgba(0,0,0,.4);
  transition:transform .1s}
.bpr-pin:hover .head{transform:scale(1.14)}
.bpr-pin.resolved .head{background:#eef1f5;border-color:#b9c4d1;color:#8a99ac}
.bpr-pin.active{z-index:5}
.bpr-pin.active .head{outline:4px solid rgba(214,245,10,.35);outline-offset:2px}

/* ---------- comment card ---------- */
.bpr-card{position:absolute;left:20px;top:-8px;width:308px;background:var(--bpr-paper);border-radius:14px;
  box-shadow:0 22px 60px rgba(0,0,0,.42);overflow:hidden;cursor:default;
  font-family:'Space Grotesk',system-ui,sans-serif;color:#16202e}
.bpr-card .chead{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid #eef1f5;background:#fafbfc}
.bpr-card .chead .scr{font:700 10px/1 'Space Mono',monospace;letter-spacing:.08em;color:#5c6b7d;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bpr-card .chead .x{margin-left:auto;cursor:pointer;color:#9aa7b5;font-size:16px;line-height:1;padding:2px 4px}
.bpr-card .chead .x:hover{color:#16202e}
.bpr-thread{max-height:300px;overflow-y:auto}
.bpr-note{padding:12px 14px;position:relative}
.bpr-note.reply{padding-left:34px;background:#fafbfc}
.bpr-note.reply::before{content:"";position:absolute;left:20px;top:0;bottom:0;width:2px;background:#e6eaef}
.bpr-note .meta{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.bpr-note .av{width:22px;height:22px;border-radius:50%;color:#fff;font:700 9px/22px 'Space Grotesk',sans-serif;text-align:center;text-transform:uppercase;flex:0 0 auto}
.bpr-note .nm{font-weight:700;font-size:12.5px;color:#16202e}
.bpr-note .tm{font:400 10px/1 'Space Mono',monospace;color:#9aa7b5;margin-left:auto}
.bpr-note .bd{font-size:13.5px;line-height:1.5;color:#2b3646;white-space:pre-wrap;word-break:break-word}
.bpr-actions{display:flex;gap:16px;padding:2px 14px 12px}
.bpr-link{appearance:none;border:0;background:transparent;color:#7a8aa0;font:600 11.5px/1 inherit;cursor:pointer;padding:0}
.bpr-link:hover{color:#16202e}
.bpr-link.ok:hover{color:#1a9d5b}
/* composer */
.bpr-comp{border-top:1px solid #eef1f5;background:#fafbfc}
.bpr-name{display:flex;padding:9px 12px 0}
.bpr-name input{flex:1;border:1px solid #e0e5ec;border-radius:8px;padding:7px 10px;font:600 12px/1 inherit;color:#16202e}
.bpr-foot{display:flex;gap:8px;padding:9px 12px 11px;align-items:flex-end}
.bpr-input{flex:1;border:1px solid #e0e5ec;border-radius:9px;padding:9px 11px;font:400 13px/1.45 inherit;resize:none;min-height:40px;max-height:130px;color:#16202e}
.bpr-input:focus{outline:2px solid var(--bpr-ink);border-color:var(--bpr-ink);outline-offset:-1px}
.bpr-send{appearance:none;border:0;background:var(--bpr-ink);color:#fff;font:700 12px/1 inherit;
  padding:0 15px;height:38px;border-radius:9px;cursor:pointer;flex:0 0 auto}
.bpr-send:hover{background:#1c2836}
.bpr-send:disabled{opacity:.4;cursor:default}

/* ---------- feedback inbox (drawer) ---------- */
.bpr-drawer{position:fixed;top:0;right:0;height:100vh;width:360px;background:var(--bpr-ink);
  border-left:1px solid var(--bpr-line);z-index:2147482000;transform:translateX(100%);
  transition:transform .26s cubic-bezier(.22,.8,.3,1);display:flex;flex-direction:column;
  font-family:'Space Grotesk',system-ui,sans-serif;color:var(--bpr-text)}
.bpr-drawer.open{transform:translateX(0);box-shadow:-16px 0 50px rgba(0,0,0,.4)}
.bpr-dhead{display:flex;align-items:center;gap:10px;padding:20px 20px 14px}
.bpr-dhead h3{margin:0;font-size:16px;font-weight:700;color:#fff}
.bpr-dhead .bpr-pill{margin-left:2px;background:var(--bpr-lime);color:#0a1018}
.bpr-dhead .dx{margin-left:auto;cursor:pointer;color:#7a8aa0;font-size:18px;line-height:1}
.bpr-dhead .dx:hover{color:#fff}
.bpr-filters{display:flex;gap:6px;padding:0 20px 14px}
.bpr-fil{appearance:none;border:1px solid var(--bpr-line);background:transparent;color:var(--bpr-muted);
  font:600 11px/1 inherit;padding:7px 12px;border-radius:999px;cursor:pointer}
.bpr-fil.on{background:var(--bpr-lime);color:#0a1018;border-color:var(--bpr-lime)}
.bpr-exp{margin-left:auto;color:#7a8aa0}
.bpr-list{flex:1;overflow-y:auto;padding:4px 0 20px}
.bpr-group{margin-top:6px}
.bpr-gh{display:flex;align-items:center;gap:8px;padding:9px 20px;cursor:pointer;
  font:700 10px/1 'Space Mono',monospace;letter-spacing:.1em;color:#7a8aa0;text-transform:uppercase}
.bpr-gh:hover{color:#c9d4e0}
.bpr-gh .gc{margin-left:auto;color:var(--bpr-lime)}
.bpr-gh .ch{transition:transform .15s}
.bpr-group.collapsed .ch{transform:rotate(-90deg)}
.bpr-group.collapsed .bpr-row{display:none}
.bpr-row{display:flex;gap:10px;padding:11px 20px 11px 22px;cursor:pointer;border-left:2px solid transparent}
.bpr-row:hover{background:var(--bpr-ink2);border-left-color:var(--bpr-lime)}
.bpr-row .av{width:22px;height:22px;border-radius:50%;color:#fff;font:700 9px/22px 'Space Grotesk',sans-serif;text-align:center;text-transform:uppercase;flex:0 0 auto;margin-top:1px}
.bpr-row .col{min-width:0;flex:1}
.bpr-row .rt{display:flex;align-items:center;gap:7px;margin-bottom:2px}
.bpr-row .rn{font:700 12px/1 'Space Grotesk',sans-serif;color:#e6edf4}
.bpr-row .rtm{font:400 9.5px/1 'Space Mono',monospace;color:#6b7a8c;margin-left:auto}
.bpr-row .rtx{font-size:12.5px;line-height:1.45;color:var(--bpr-text);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bpr-row .rr{font:400 10px/1 'Space Mono',monospace;color:#6b7a8c;margin-top:3px}
.bpr-row.resolved .rtx{color:#6b7a8c;text-decoration:line-through}
.bpr-empty{padding:48px 28px;text-align:center;color:#6b7a8c;font-size:13px;line-height:1.6}
.bpr-empty b{color:#c9d4e0;font-weight:600}

/* toast */
.bpr-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:2147483100;
  background:var(--bpr-ink);color:#fff;border:1px solid var(--bpr-line);border-radius:10px;
  padding:11px 18px;font:600 13px/1 'Space Grotesk',sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.4);
  opacity:0;transition:opacity .2s;pointer-events:none}
.bpr-toast.show{opacity:1}