/* Layout next to your existing map */
.ss-map-row { display:flex; gap:16px; }
.ss-map-col { flex:1; min-width:0; }

/* Tools bar (stays above your map) */
.ss-tools { display:flex; align-items:center; gap:8px; margin:8px 0; flex-wrap:wrap; }
.ss-tools input[type="number"]{ width:64px; }
.ss-help { opacity:.7; font-size:12px; margin-left:auto; }

/* Agents rail */
.ss-agents-panel { width:260px; padding:12px; border-left:1px solid var(--divider,#2a2a2a); }
.ss-ap-title{ font-weight:700; margin:0 0 10px; }
.ss-ap-grid { display:grid; grid-template-columns:1fr; gap:10px; }
.ss-agent-pill {
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  border:1px solid rgb(255 255 255 / 8%); color:#111; font-weight:700; cursor:grab;
}
.ss-agent-pill:active{ cursor:grabbing; }
.ss-agent-initials{ width:32px;height:32px;border-radius:999px;background:rgb(0 0 0 / 12%);display:grid;place-items:center;font-size:12px; }
.ss-agent-name{ color:#111; }

/* Overlay layers placed inside your existing map container (position:relative) */
.ss-agent-layer { position:absolute; inset:0; pointer-events:none; }
.ss-draw-layer { position:absolute; inset:0; pointer-events:auto; }
.ss-marker {
  position:absolute; transform:translate(-50%,-50%); width:32px; height:32px; border-radius:999px;
  border:2px solid #111; display:grid; place-items:center; font-weight:800; color:#111; cursor:pointer;
  pointer-events:auto;
}
.ss-pop { position:fixed; background:#222; color:#fff; padding:6px 8px; border-radius:8px; border:1px solid #333; z-index:10000; }
.ss-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }