/* The chain analysis bubblemap (bubblemap.js). Self-contained and always
   dark, like the scanner it comes from, so it looks the same in the scan
   report and as the home page's example. Yellow marks what the analysis
   found; nothing glows or pulses. */

.bm {
  --bm-bg: #0e1014; --bm-stage: #0a0c0f; --bm-panel: #14161b; --bm-panel-2: #1a1d23;
  --bm-line: #22252c; --bm-line-2: #2e323a; --bm-text: #e9ebef; --bm-text-2: #aab0bb; --bm-muted: #7d8492;
  --bm-yellow: #f2d600; --bm-yellow-ink: #15171b;
  --bm-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  container-type: inline-size;
  background: var(--bm-bg); color: var(--bm-text); border: 1px solid var(--bm-line); border-radius: 12px; overflow: hidden;
  font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; color-scheme: dark;
}
.bm *, .bm *::before, .bm *::after { box-sizing: border-box; }
.bm p { margin: 0; }
.bm button { font: inherit; color: inherit; }
.bm :focus-visible { outline: 2px solid var(--bm-yellow); outline-offset: 2px; border-radius: 4px; }

.bm-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; border-bottom: 1px solid var(--bm-line); }
.bm-title { font-size: 13.5px; color: var(--bm-text-2); }
.bm-title b { color: var(--bm-text); font-weight: 600; }
.bm-modes { display: inline-flex; padding: 2px; gap: 2px; background: var(--bm-panel); border: 1px solid var(--bm-line); border-radius: 8px; }
.bm-modes button { min-height: 30px; padding: 0 11px; border: 0; border-radius: 6px; background: transparent; color: var(--bm-text-2); font-size: 13px; font-weight: 500; cursor: pointer; }
.bm-modes button:hover { color: var(--bm-text); }
.bm-modes button[aria-pressed="true"] { background: var(--bm-panel-2); color: var(--bm-text); box-shadow: inset 0 0 0 1px var(--bm-line-2); }

.bm-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
@container (max-width: 760px) { .bm-body { grid-template-columns: minmax(0, 1fr); } .bm-info { border-left: 0; border-top: 1px solid var(--bm-line); } }

.bm-stage { position: relative; background: var(--bm-stage); overflow: hidden; }
.bm-svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.bm-stage.is-zoomed .bm-svg { cursor: move; }
.bm-dot { fill: rgba(255, 255, 255, .07); }

.bm-link { stroke: var(--bm-yellow); stroke-width: 1.1; opacity: .55; }
.bm-link.is-direct { stroke-dasharray: 4 3; opacity: .8; }
.bm-node, .bm-hub { cursor: grab; touch-action: none; transition: opacity .15s ease; }
.bm.is-dragging .bm-node, .bm.is-dragging .bm-hub { cursor: grabbing; }
.bm-node { fill: rgba(170, 176, 187, .1); stroke: rgba(170, 176, 187, .42); stroke-width: 1; }
.bm-node.is-unread { stroke-dasharray: 2 2; opacity: .55; }
.bm-node.in-group { fill: rgba(242, 214, 0, .2); stroke: var(--bm-yellow); stroke-width: 1.5; }
.bm-node.in-group.is-hedged { fill: rgba(242, 214, 0, .06); stroke: rgba(242, 214, 0, .5); stroke-dasharray: 3 2; }
.bm-node:hover { stroke: var(--bm-text); stroke-width: 1.8; }
.bm-node.is-sel { stroke: var(--bm-text); stroke-width: 2.5; }
.bm-hub { fill: var(--bm-yellow); }
.bm-hub.is-deposit { fill: var(--bm-stage); stroke: var(--bm-yellow); stroke-width: 1.6; }
.bm-hub:hover { stroke: var(--bm-text); stroke-width: 1.6; }
.bm-name { font: 500 9.5px var(--bm-mono); fill: var(--bm-text-2); pointer-events: none; }
.bm-letter { font: 700 10.5px var(--bm-mono); fill: var(--bm-yellow); pointer-events: none; }
.bm .is-dim { opacity: .14; }
.bm-link.is-dim { opacity: .05; }
/* fresh-wallet view: yellow marks the fresh wallets; money ties step back */
.bm.is-fresh-mode .bm-node { fill: rgba(170, 176, 187, .1); stroke: rgba(170, 176, 187, .42); stroke-width: 1; stroke-dasharray: none; }
.bm.is-fresh-mode .bm-node.is-fresh { fill: rgba(242, 214, 0, .22); stroke: var(--bm-yellow); stroke-width: 1.5; }
.bm.is-fresh-mode .bm-node:not(.is-fresh):not(.is-old) { fill: transparent; stroke: rgba(170, 176, 187, .2); stroke-dasharray: 2 2; }
.bm.is-fresh-mode .bm-node.is-sel { stroke: var(--bm-text); stroke-width: 2.5; }
.bm.is-fresh-mode .bm-link, .bm.is-fresh-mode .bm-hub, .bm.is-fresh-mode .bm-letter { opacity: .08; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .bm-node, .bm-hub { transition: none; } }

.bm-tip {
  position: absolute; left: 0; top: 0; z-index: 2; max-width: min(340px, 80%); pointer-events: none;
  display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--bm-line-2); border-radius: 8px;
  background: rgba(20, 22, 27, .96); font-size: 12px; color: var(--bm-text-2);
}
.bm-tip b { color: var(--bm-text); font-weight: 600; font-size: 12.5px; }
.bm-tip code { font: 11.5px/1.4 var(--bm-mono); color: var(--bm-text); word-break: break-all; }
.bm-zoom { position: absolute; right: 10px; top: 10px; display: grid; gap: 4px; }
.bm-zoom button {
  min-width: 30px; height: 28px; padding: 0 6px; border: 1px solid var(--bm-line-2); border-radius: 6px;
  background: rgba(20, 22, 27, .9); color: var(--bm-text-2); font-size: 13px; cursor: pointer;
}
.bm-zoom button:hover { color: var(--bm-text); border-color: var(--bm-muted); }
.bm-zoom [data-z="fit"] { font-size: 11px; }
.bm-hud {
  position: absolute; left: 10px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 2px 12px; pointer-events: none;
  font: 11px var(--bm-mono); color: var(--bm-muted);
}

.bm-info { display: grid; align-content: start; gap: 10px; padding: 14px 16px; border-left: 1px solid var(--bm-line); background: var(--bm-panel); font-size: 13.5px; color: var(--bm-text-2); }
.bm-k { font-size: 12.5px; color: var(--bm-muted); }
.bm-big { font-size: 18px; color: var(--bm-text); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.bm-big b { font-weight: 700; font-size: 22px; }
.bm-name-big { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.bm-addr { display: flex; align-items: flex-start; gap: 8px; }
.bm-addr code { flex: 1; font: 11.5px/1.45 var(--bm-mono); color: var(--bm-text); word-break: break-all; }
.bm-copy { flex: none; padding: 2px 8px; border: 1px solid var(--bm-line-2); border-radius: 6px; background: transparent; color: var(--bm-text-2); font-size: 12px; cursor: pointer; }
.bm-copy:hover { color: var(--bm-text); border-color: var(--bm-muted); }
.bm-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; }
.bm-links a { color: var(--bm-text-2); text-decoration: underline; text-decoration-color: var(--bm-line-2); text-underline-offset: 3px; }
.bm-links a:hover { color: var(--bm-text); text-decoration-color: var(--bm-yellow); background: none; }
.bm-sub, .bm-hint { font-size: 12.5px; color: var(--bm-muted); }
.bm-hint { padding-top: 10px; border-top: 1px solid var(--bm-line); }
.bm-gl { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--bm-yellow); color: var(--bm-yellow-ink); font: 700 11px var(--bm-mono); font-style: normal; vertical-align: 1px; }
.bm-tag { display: inline-block; padding: 1px 8px; border: 1px solid var(--bm-line-2); border-radius: 999px; font-size: 12px; color: var(--bm-text-2); }
.bm-tag.is-signal { border-color: rgba(242, 214, 0, .4); color: var(--bm-yellow); }
.bm-picks { display: grid; gap: 4px; }
.bm-pick {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 36px;
  padding: 6px 10px; border: 1px solid var(--bm-line); border-radius: 8px; background: var(--bm-panel-2);
  font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; overflow-wrap: anywhere;
}
.bm-pick small { flex: none; color: var(--bm-muted); font-size: 12px; font-weight: 400; }
.bm-pick:hover { border-color: var(--bm-line-2); background: #20232a; }
.bm-bars { display: grid; gap: 6px; }
.bm-bar { display: grid; grid-template-columns: 56px 1fr 36px; gap: 8px; align-items: center; font-size: 12.5px; }
.bm-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-bar i { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--bm-line); }
.bm-bar i::after { content: ""; position: absolute; left: var(--rule-at); top: -3px; bottom: -3px; border-left: 1px solid var(--bm-text-2); }
.bm-bar em { display: block; height: 100%; border-radius: 4px; background: var(--bm-muted); }
.bm-bar.is-this em { background: var(--bm-yellow); }
.bm-bar b { text-align: right; color: var(--bm-text); font-weight: 600; }

.bm-key { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 9px 14px; border-top: 1px solid var(--bm-line); font-size: 12px; color: var(--bm-muted); }
.bm-key span { display: inline-flex; align-items: center; gap: 6px; }
.bm-key span::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.bm-key .k-grp::before { background: rgba(242, 214, 0, .2); box-shadow: inset 0 0 0 1.5px var(--bm-yellow); }
.bm-key .k-other::before { background: rgba(170, 176, 187, .1); box-shadow: inset 0 0 0 1px rgba(170, 176, 187, .42); }
.bm-key .k-unk::before { border: 1px dashed rgba(170, 176, 187, .35); }
.bm-key .k-hub::before { border-radius: 2px; background: var(--bm-yellow); }
.bm-key .k-dep::before { border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--bm-yellow); }
.bm-key .k-pay::before { width: 16px; height: 0; border-radius: 0; border-top: 1.5px dashed var(--bm-yellow); }
