/**
 * auto-toggle.css
 * Phase 2A.5 — styling for the Auto Mode toggle button (sibling of observe-toggle).
 * Positioned just LEFT of the observe-toggle (which is bottom-right).
 */

.auto-toggle-btn {
  position: fixed;
  bottom: 16px;
  right: 84px; /* 16px (observe right) + 56px (observe width) + 12px gap */
  height: 56px;
  min-width: 56px;
  padding: 0 14px;
  border-radius: 28px;
  border: none;
  background: rgba(20, 20, 30, 0.85);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  z-index: 10001;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}

.auto-toggle-btn:hover {
  transform: scale(1.05);
}

.auto-toggle-btn.active {
  background: #cc8844;
}

/* Phase 2A.5: hooks for future visual cue when user-input has paused auto.
   Body class set by main.js if needed. (Spec Q4: deferred — toggle button
   state is the canonical signal.) */
body.auto-mode .auto-toggle-btn {
  box-shadow: 0 0 12px rgba(204, 136, 68, 0.55);
}