.fb-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 9998;
  background: #111; color: #fff; border: 0; border-radius: 999px;
  padding: 10px 16px; font: 600 13px/1 system-ui, sans-serif;
  cursor: pointer; box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.fb-toggle.is-on { background: #b73f10; }

body.fb-active { cursor: crosshair; }

.fb-pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: #b73f10; color: #fff; font: 700 12px/28px system-ui, sans-serif;
  text-align: center; box-shadow: 0 3px 10px rgba(0,0,0,.25);
  cursor: pointer; z-index: 9990; user-select: none;
}
.fb-pin.is-resolved { background: rgba(120,120,120,.4); color: transparent; }
.fb-pin.is-resolved::after { content: "✓"; color: #fff; }
.fb-pin.is-ghost { background: rgba(183,63,16,.5); }

.fb-popover {
  position: absolute; transform: translate(8px, 8px);
  width: 280px; background: #fff; border: 1px solid #ddd; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 12px; z-index: 9999;
  font: 13px/1.4 system-ui, sans-serif; color: #222;
}
.fb-popover input, .fb-popover textarea {
  width: 100%; box-sizing: border-box; padding: 6px 8px; margin: 4px 0;
  border: 1px solid #ccc; border-radius: 4px; font: inherit;
}
.fb-popover textarea { min-height: 70px; resize: vertical; }
.fb-popover .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.fb-popover button { padding: 6px 12px; border-radius: 4px; cursor: pointer; font: inherit; }
.fb-popover button.primary { background: #111; color: #fff; border: 0; }
.fb-popover button.secondary { background: #fff; border: 1px solid #ccc; }
.fb-popover .err { color: #b00; font-size: 12px; margin-top: 4px; }
.fb-popover .read { white-space: pre-wrap; }
.fb-popover .meta { color: #888; font-size: 11px; margin-top: 6px; }

.fb-mobile-panel { display: none; }

@media (max-width: 767px) {
  .fb-popover { width: calc(100vw - 32px); left: 16px !important; transform: none; }

  body.fb-active .fb-mobile-panel {
    display: block; position: fixed; left: 0; right: 0; bottom: 0;
    background: #fff; border-top: 1px solid #ddd; padding: 12px 16px 16px;
    box-shadow: 0 -8px 24px rgba(0,0,0,.12); z-index: 9997;
    max-height: 50vh; overflow-y: auto;
    font: 13px/1.4 system-ui, sans-serif;
  }
  .fb-mobile-panel h2 { font-size: 14px; margin: 0 0 8px; }
  .fb-mobile-panel ol { margin: 0 0 12px; padding-left: 20px; }
  .fb-mobile-panel li { margin-bottom: 6px; }
  .fb-mobile-panel input,
  .fb-mobile-panel textarea {
    width: 100%; box-sizing: border-box; padding: 6px 8px; margin-bottom: 6px;
    border: 1px solid #ccc; border-radius: 4px; font: inherit;
  }
  .fb-mobile-panel button.add {
    background: #111; color: #fff; border: 0; padding: 8px 14px;
    border-radius: 4px; cursor: pointer; font: inherit;
  }
}