/* DataModeIndicator — floating chip + popover, bottom-left.
   Sits beneath the queue rail; well away from the Tweaks panel. */

.data-mode {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 1200;
  font-family: var(--font-body, "Plus Jakarta Sans", sans-serif);
  pointer-events: auto;
}

.data-mode__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-elevated, #FFFDF9);
  border: 1px solid var(--stroke, rgba(10,10,10,0.10));
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink, #1A1A1A);
  box-shadow: 0 2px 12px rgba(10,10,10,0.06);
  transition: background 120ms ease;
}
.data-mode__pill:hover { background: var(--bg-paper, #ECEAE6); }

.data-mode__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #16a34a;          /* mock = green (working, local) */
  box-shadow: 0 0 0 2px rgba(22,163,74,0.18);
}
.data-mode__pill--supabase .data-mode__dot {
  background: #2563eb;          /* supabase = blue (live) */
  box-shadow: 0 0 0 2px rgba(37,99,235,0.18);
}

.data-mode__l {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.1;
}
.data-mode__m {
  font-size: 11px;
  letter-spacing: 0.4px;
  font-weight: 600;
}

.data-mode__count {
  font-size: 11px;
  background: rgba(22,163,74,0.12);
  color: #166534;
  padding: 2px 6px;
  border-radius: 2px;
}

.data-mode__panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 280px;
  background: var(--bg-elevated, #FFFDF9);
  border: 1px solid var(--stroke, rgba(10,10,10,0.10));
  border-radius: 3px;
  padding: 14px;
  box-shadow: 0 8px 28px rgba(10,10,10,0.14);
  display: grid;
  gap: 10px;
}

.data-mode__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.data-mode__seg {
  display: inline-flex;
  border: 1px solid var(--stroke, rgba(10,10,10,0.12));
  border-radius: 3px;
  overflow: hidden;
}
.data-mode__seg-btn {
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  background: transparent;
  color: var(--ink, #1A1A1A);
  border: 0;
  cursor: pointer;
}
.data-mode__seg-btn.is-on {
  background: var(--ink, #1A1A1A);
  color: var(--bg-elevated, #FFFDF9);
}

.data-mode__hint {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft, #5a5a5a);
  line-height: 1.4;
}

.data-mode__actions {
  display: flex; gap: 6px; flex-wrap: wrap;
}

[data-mode="banzai"] .data-mode__pill {
  background: var(--bg-elevated, #1E1E1B);
  color: var(--fg1, #F5F5F5);
  border-color: var(--stroke, rgba(255,255,255,0.10));
}
[data-mode="banzai"] .data-mode__panel {
  background: var(--bg-elevated, #1E1E1B);
  color: var(--fg1, #F5F5F5);
  border-color: var(--stroke, rgba(255,255,255,0.10));
}
[data-mode="banzai"] .data-mode__hint { color: rgba(245,245,245,0.7); }
[data-mode="banzai"] .data-mode__seg-btn { color: var(--fg1, #F5F5F5); }
[data-mode="banzai"] .data-mode__seg-btn.is-on {
  background: var(--fg1, #F5F5F5);
  color: var(--ink, #1A1A1A);
}