/* ═══════════════════════════════════════════════════════════════
   J-Bot Theme Toggle button
   Slots into the vitals ribbon before the clock. Uses --jbot-*
   tokens so it re-skins with the active theme.
   ═══════════════════════════════════════════════════════════════ */

#jbot-theme-toggle {
  /* Reset button chrome */
  appearance: none;
  border: 1px solid var(--jbot-border);
  background: var(--jbot-bg-panel);
  color: var(--jbot-fg-dim);

  font-family: var(--jbot-font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;

  padding: 3px 9px;
  margin-left: auto;           /* push toward the right (clock is rightmost via its own margin-left) */
  border-radius: 3px;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: 4px;

  transition: border-color var(--jbot-transition, 0.25s ease),
              color var(--jbot-transition, 0.25s ease),
              background var(--jbot-transition, 0.25s ease),
              box-shadow var(--jbot-transition, 0.25s ease);
}

#jbot-theme-toggle:hover,
#jbot-theme-toggle:focus-visible {
  border-color: var(--jbot-accent);
  color: var(--jbot-accent);
  background: var(--jbot-bg-panel-hi);
  box-shadow: 0 0 6px var(--jbot-accent-glow, transparent);
  outline: none;
}

#jbot-theme-toggle:active {
  transform: translateY(1px);
}

/* Per-theme glyph tint (cyberpunk: accent green, indigo: accent blue) */
#jbot-theme-toggle[data-theme="cyberpunk"] {
  color: var(--jbot-accent);
}
#jbot-theme-toggle[data-theme="indigo"] {
  color: var(--jbot-fg-dim);
}

@media (max-width: 560px) {
  #jbot-theme-toggle {
    font-size: 9px;
    padding: 2px 6px;
    letter-spacing: 1px;
  }
}