* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0b0f; font-family: -apple-system, system-ui, sans-serif; }

#views { position: fixed; inset: 0; }
#views iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; visibility: hidden; }
#views iframe.active { visibility: visible; }

.switcher {
  position: fixed; z-index: 10;
  display: flex; align-items: center; gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: #14141a;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  user-select: none;
  touch-action: none;
  transition: opacity .2s, padding .2s;
}
.switcher.dragging { transition: none; cursor: grabbing; }

.grip { width: 10px; height: 28px; cursor: grab; border-radius: 6px;
  background-image: radial-gradient(rgba(255,255,255,.45) 1px, transparent 1.2px);
  background-size: 5px 5px; background-position: center; }

.buttons { display: flex; gap: 6px; }

.site-btn {
  width: 40px; height: 40px; padding: 0; border: 2px solid transparent;
  border-radius: 50%; background: rgba(255,255,255,0.08);
  cursor: pointer; position: relative; display: grid; place-items: center;
  color: #fff; font-weight: 600; font-size: 15px;
  opacity: .55; transition: opacity .15s, transform .15s, border-color .15s;
}
.site-btn:hover { opacity: .9; transform: scale(1.06); }
.site-btn.active { opacity: 1; border-color: #fff; }
.site-btn img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; -webkit-user-drag: none; }
.site-btn img.badge {
  position: absolute; right: -4px; bottom: -3px;
  width: 18px; height: 12px; border-radius: 2px;
  box-shadow: 0 0 0 1.5px rgba(20,20,26,.9), 0 1px 3px rgba(0,0,0,.5);
  pointer-events: none;
}

.ctl {
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.1); color: #ddd; cursor: pointer;
  font-size: 14px; line-height: 1;
}
.ctl:hover { background: rgba(255,255,255,0.2); }
.ctl { display: grid; place-items: center; padding: 0; }

.divider { width: 1px; height: 24px; background: rgba(255,255,255,0.15); margin: 0 2px; }

/* Sticky routing toggle */
.sticky-btn { width: 28px; height: 28px; color: #9a9aa6; }
.sticky-btn[aria-pressed="true"] { background: #3b82f6; color: #fff; }
.sticky-btn[aria-pressed="true"]:hover { background: #2f6fe0; }
.sticky-btn.no-routes[aria-pressed="true"] { background: #d97706; }  /* on, but sites aren't reporting routes */
/* While sticky is on, the active site's ring turns blue (visible when minimized too) */
.switcher.sticky .site-btn.active { border-color: #3b82f6; }

/* Expand button only exists in minimized mode */
.expand { display: none; width: 20px; height: 20px; }

/* Minimized: just the active site's icon (drag handle) + expand button */
.switcher.min { padding: 6px; gap: 6px; }
.switcher.min .site-btn { cursor: grab; }
.switcher.min .site-btn:hover { transform: none; }
.switcher.min.dragging .site-btn { cursor: grabbing; }
.switcher.min .grip, .switcher.min .ctl:not(.expand), .switcher.min .divider { display: none; }
.switcher.min .expand { display: grid; width: 26px; height: 26px; }
.switcher.min .site-btn:not(.active) { display: none; }
.switcher.min .site-btn { width: 44px; height: 44px; }