/* G-Claw: Mode switch styles (Lay Person Mode) - UPDATED to support both .mode-toggle and .gclaw-toggle */
:root.lay-mode, .lay-mode {
  --electric-blue: #FF4EC7; /* pink/purple accent for lay mode */
  --electric-blue-dim: rgba(255, 78, 199, 0.12);
  --electric-blue-glow: rgba(255, 78, 199, 0.28);
}

/* Legacy: original mode-toggle (kept for compatibility) */
.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-left: 16px;
}

.mode-toggle .switch {
  position: relative;
  width: 48px;
  height: 26px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 3px;
  cursor: pointer;
  transition: background 0.2s ease;
  border: 1px solid rgba(255,255,255,0.04);
  overflow: hidden;
}

.mode-toggle .switch .knob {
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transform: translateX(0);
  transition: transform 0.18s ease, background 0.18s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

body.lay-mode .mode-toggle .switch {
  background: var(--electric-blue);
  border-color: rgba(0,0,0,0.12);
}
body.lay-mode .mode-toggle .switch .knob {
  transform: translateX(22px);
  background: white;
}

/* New: G-Claw specific toggle styles (used by injected script) */
.gclaw-toggle-wrap { display:inline-flex; align-items:center; gap:10px; margin-left:16px; }
.gclaw-toggle-label { font-size:0.9rem; color:var(--text-secondary); font-weight:600; white-space:nowrap; }
.gclaw-toggle-right { font-size:0.9rem; color:var(--text-secondary); font-weight:600; white-space:nowrap; }

.gclaw-toggle {
  position: relative;
  width: 56px;
  height: 30px;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  display: inline-block;
  padding: 4px;
  overflow: hidden; /* ensure dot never escapes */
}
.gclaw-toggle:focus { outline: 2px solid rgba(255,255,255,0.06); outline-offset: 2px; }
.gclaw-toggle .dot {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  background: var(--electric-blue);
  border-radius: 50%;
  transition: left 0.22s cubic-bezier(.2,.9,.2,1), background 0.18s ease, transform 0.18s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}
.gclaw-toggle .label-on, .gclaw-toggle .label-off { position: absolute; top: 6px; font-size:0.65rem; color:transparent; opacity:0; transition:opacity .18s; }
.gclaw-toggle .label-on { left:8px; }
.gclaw-toggle .label-off { right:8px; opacity:1; color:var(--text-secondary); }

body.lay-mode .gclaw-toggle .dot { left: 30px; background: linear-gradient(90deg,#ff7ab6,#a34ef0); }
body.lay-mode .gclaw-toggle .label-on { opacity:1; color:var(--text-secondary); }
body.lay-mode .gclaw-toggle .label-off { opacity:0; color:transparent; }

/* Helper explanation boxes */
.gclaw-explain{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);padding:14px;border-radius:12px;margin-top:12px;color:var(--text-secondary)}

/* Make existing buttons use accent variable where appropriate (safe fallback) */
.btn, button { background: var(--electric-blue); }
body.lay-mode .btn, body.lay-mode button { background: var(--electric-blue); }

/* small responsive tweaks */
@media (max-width: 640px) {
  .mode-toggle { display: none; }
  .gclaw-toggle-label, .gclaw-toggle-right { display: none; }
  .lay-overlay .panel { padding: 18px; }
}

/* Accessibility & visibility fixes for Lay mode */
/* Undo gradient text tricks that use -webkit-text-fill-color: transparent */
body.lay-mode * {
  color: inherit !important;
  opacity: 1 !important;
  -webkit-text-fill-color: unset !important;
  text-fill-color: unset !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* Ensure the toggle dot is constrained and moved with transform only (prevents overflow/jank)
   Left/inline styles from old injected scripts may still set 'left' — we force transform to be the
   source of truth and hide any overflow. */
.gclaw-toggle { overflow: hidden; }
.gclaw-toggle .dot { left: auto !important; transform: translateX(0) !important; }
body.lay-mode .gclaw-toggle .dot { left: auto !important; transform: translateX(calc(100% - var(--h))) !important; }

/* Safe fallback for any buttons */
.btn, button { background: var(--electric-blue); }
body.lay-mode .btn, body.lay-mode button { background: var(--electric-blue); }