/* Comment widget - "Marker" design language.
   Self-contained: graphite layers, one highlighter-yellow accent,
   Space Grotesk UI + JetBrains Mono details. Nothing here inherits
   from the host site on purpose - it must read as its own instrument
   floating over any page. All motion is GSAP-driven (comments.js);
   CSS keeps only hover states and the reduced-motion fallbacks.
   Fonts are injected as a <link> by comments.js. */

.cb-root {
  --cb-accent: #ffd43b;
  --cb-accent-ink: #161304;
  --cb-bg: #101214;
  --cb-bg2: #171a1f;
  --cb-bg3: #1f232a;
  --cb-line: rgba(255, 255, 255, 0.08);
  --cb-text: #f2f4f6;
  --cb-muted: #9aa3ad;
  --cb-danger: #ff7a70;
  --cb-radius: 10px;
  --cb-radius-s: 8px;
  --cb-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45);
  --cb-font: 'Space Grotesk', system-ui, sans-serif;
  --cb-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
  font-family: var(--cb-font);
  color: var(--cb-text);
  text-align: left;
}

.cb-root [hidden] { display: none; }

.cb-root button { font-family: inherit; }

/* ---------- dock (bottom right) ---------- */

.cb-dock {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.cb-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 52px;
  min-height: 52px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  background: var(--cb-accent);
  color: var(--cb-accent-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--cb-shadow), 0 0 0 1px rgba(255, 212, 59, 0.25);
}
.cb-fab:hover { background: #ffdd66; }
.cb-fab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cb-fab svg { display: block; }
.cb-fab-add { padding: 0; }
.cb-fab-view {
  background: var(--cb-bg2);
  color: var(--cb-text);
  box-shadow: var(--cb-shadow), 0 0 0 1px var(--cb-line);
  font-weight: 600;
}
.cb-fab-view:hover { background: var(--cb-bg3); }
.cb-count {
  min-width: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--cb-accent);
  color: var(--cb-accent-ink);
  font-family: var(--cb-mono);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

/* ---------- pick mode ---------- */

body.cb-picking { cursor: crosshair; }

.cb-spot {
  position: fixed;
  z-index: 940;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(8, 9, 11, 0.55);
  pointer-events: none;
}
/* marching ants: animated dash offset on an svg rect, 1.5px stroke */
.cb-ants {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}
.cb-ants rect {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  rx: 6px;
  fill: none;
  stroke: var(--cb-accent);
  stroke-width: 1.5px;
  stroke-dasharray: 7 5;
}
.cb-ants-fallback rect { animation: cb-ants-march 0.5s linear infinite; }
@keyframes cb-ants-march {
  to { stroke-dashoffset: -12; }
}
.cb-spot-tag {
  position: absolute;
  top: -30px;
  left: 0;
  max-width: 320px;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--cb-bg);
  color: var(--cb-accent);
  font-family: var(--cb-mono);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cb-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 946;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 16px;
  border-radius: 999px;
  background: var(--cb-bg);
  box-shadow: var(--cb-shadow), 0 0 0 1px var(--cb-line);
  color: var(--cb-text);
  font-size: 13px;
  font-weight: 500;
}
.cb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cb-accent);
}
.cb-banner kbd {
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--cb-bg3);
  color: var(--cb-muted);
  font-family: var(--cb-mono);
  font-size: 11px;
}
.cb-banner .cb-btn { padding: 6px 14px; font-size: 12px; }

/* ---------- pins ---------- */

.cb-marker {
  position: absolute;
  z-index: 945;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  /* tip sits on the exact click point */
  transform: translate(-50%, -100%);
}
.cb-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 26px;
  padding: 0 4px;
  border-radius: 999px 999px 999px 2px;
  background: var(--cb-accent);
  color: var(--cb-accent-ink);
  font-family: var(--cb-mono);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 212, 59, 0.35);
}
.cb-pin::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 6px;
  height: 6px;
  background: var(--cb-accent);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 1px;
}
.cb-mc {
  position: absolute;
  right: -7px;
  top: -7px;
  min-width: 16px;
  padding: 1px 4px;
  border-radius: 999px;
  background: var(--cb-bg);
  color: var(--cb-accent);
  font-family: var(--cb-mono);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 0 0 1px var(--cb-line);
}
.cb-ring {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--cb-accent);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ---------- flash on jump ---------- */

.cb-flashbox {
  position: absolute;
  z-index: 944;
  border-radius: 8px;
  pointer-events: none;
}

/* ---------- composer popover ---------- */

.cb-pop {
  position: fixed;
  z-index: 970;
  width: min(344px, calc(100vw - 24px));
  border-radius: var(--cb-radius);
  background: var(--cb-bg);
  box-shadow: var(--cb-shadow), 0 0 0 1px var(--cb-line);
  overflow: hidden;
}
.cb-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  background: var(--cb-bg2);
  box-shadow: 0 1px 0 var(--cb-line);
}
.cb-pop-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cb-pop-target {
  padding: 9px 14px 0;
  color: var(--cb-muted);
  font-family: var(--cb-mono);
  font-size: 11px;
}
.cb-pop-body { padding: 10px 14px 14px; }
.cb-pop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* ---------- drawer (thread list) ---------- */

.cb-scrim {
  position: fixed;
  inset: 0;
  z-index: 960;
  background: rgba(6, 7, 9, 0.5);
}
.cb-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 965;
  width: min(392px, 94vw);
  background: var(--cb-bg);
  box-shadow: 1px 0 0 var(--cb-line), -24px 0 60px rgba(0, 0, 0, 0.45);
}
.cb-drawer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--cb-bg2);
  box-shadow: 0 1px 0 var(--cb-line);
}
.cb-drawer-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cb-drawer-head .cb-count { margin-left: auto; }
.cb-threads {
  padding: 6px 16px 28px;
  overflow-y: auto;
  max-height: calc(100vh - 53px);
}

.cb-thread {
  padding: 14px 0;
  box-shadow: 0 1px 0 var(--cb-line);
}
.cb-trow { display: flex; gap: 10px; }
.cb-ava {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cb-accent);
  color: var(--cb-accent-ink);
  font-family: var(--cb-mono);
  font-size: 12px;
  font-weight: 700;
}
.cb-tmain { flex: 1 1 auto; min-width: 0; }
.cb-tmeta {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cb-who { font-size: 13px; font-weight: 700; }
.cb-when {
  font-family: var(--cb-mono);
  font-size: 10px;
  color: var(--cb-muted);
}
.cb-chip {
  display: inline-block;
  margin-top: 5px;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--cb-bg3);
  color: var(--cb-accent);
  font-family: var(--cb-mono);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.cb-chip:hover,
.cb-chip:focus-visible {
  background: #2b313a;
  color: #ffe27a;
  outline: none;
}
.cb-text {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.cb-replies {
  margin-top: 10px;
  padding-left: 12px;
  box-shadow: inset 2px 0 0 var(--cb-bg3);
}
.cb-reply { padding: 8px 0; }
.cb-del {
  flex: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 2px 4px;
  border-radius: 5px;
  color: var(--cb-muted);
  cursor: pointer;
}
.cb-del svg { display: block; }
.cb-del:hover { color: var(--cb-danger); }
.cb-replybox {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: flex-start;
}

/* ---------- inputs + buttons ---------- */

.cb-input,
.cb-ta {
  display: block;
  font: inherit;
  font-size: 13.5px;
  color: var(--cb-text);
  background: var(--cb-bg2);
  border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius-s);
  padding: 9px 11px;
}
.cb-ta {
  width: 100%;
  min-height: 84px;
  margin-top: 10px;
  resize: vertical;
}
.cb-pop .cb-input { width: 100%; margin-top: 10px; }
.cb-input:focus,
.cb-ta:focus {
  outline: none;
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 1px var(--cb-accent);
}
.cb-input::placeholder,
.cb-ta::placeholder { color: var(--cb-muted); }
.cb-replybox .cb-input {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}
.cb-btn {
  border: none;
  border-radius: var(--cb-radius-s);
  padding: 9px 16px;
  background: var(--cb-bg3);
  color: var(--cb-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cb-btn:hover { background: #272c34; }
.cb-btn:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 1px; }
.cb-btn.cb-primary {
  background: var(--cb-accent);
  color: var(--cb-accent-ink);
}
.cb-btn.cb-primary:hover { background: #ffdd66; }
.cb-err {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--cb-danger);
}
.cb-x {
  min-width: 28px;
  min-height: 28px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--cb-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.cb-x:hover { color: var(--cb-text); background: var(--cb-bg3); }
.cb-empty {
  padding: 30px 8px;
  text-align: center;
  color: var(--cb-muted);
  font-size: 13px;
}
.cb-offline { color: var(--cb-danger); }

@media (max-width: 560px) {
  .cb-drawer { width: 100vw; }
  .cb-banner { left: 12px; right: 12px; justify-content: space-between; }
}