/* Floating Theme Toggle - Top-left, accessible, minimal */

:root {
  --tt-size: 44px;
  --tt-track: 56px;
  --tt-height: 30px;
  --tt-bg: #e5e7eb; /* light track base */
  --tt-bg-dark: #111827; /* dark track base */
  --tt-handle: #ffffff;
  --tt-focus: #3b82f6;
  --tt-accent: #60a5fa; /* accent for glow */
  --tt-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Prevent FOUC (Flash of Unstyled Content) during theme switches */
html {
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hide any legacy header toggle instances */
.header-right .toggleWrapper,
.header-right .theme-toggle { display: none !important; }

.theme-toggle-fixed {
  position: fixed;
  top: max(12px, env(safe-area-inset-top) + 8px);
  left: max(12px, env(safe-area-inset-left) + 8px);
  z-index: 3000;
  /* Transparent container to blend with header */
  background: transparent;
  border: none;
  border-radius: 9999px;
  padding: 0;
  box-shadow: none;
}

/* Top buckets for JS to toggle (no inline styles required) */
.theme-toggle-fixed.ttop-12{ top: 12px; }
.theme-toggle-fixed.ttop-24{ top: 24px; }
.theme-toggle-fixed.ttop-36{ top: 36px; }
.theme-toggle-fixed.ttop-48{ top: 48px; }
.theme-toggle-fixed.ttop-64{ top: 64px; }
.theme-toggle-fixed.ttop-80{ top: 80px; }
.theme-toggle-fixed.ttop-96{ top: 96px; }
.theme-toggle-fixed.ttop-112{ top: 112px; }
.theme-toggle-fixed.ttop-128{ top: 128px; }

[data-theme="dark"] .theme-toggle-fixed { background: transparent; box-shadow: none; }

[data-theme="dark"] .theme-toggle-icon { color: #cbd5e1; }

.theme-toggle { position: relative; display: inline-block; }

.theme-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}

.theme-toggle-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  -webkit-user-select: none;
  user-select: none;
  padding: 6px 8px;
  border-radius: 9999px;
  transition: background-color 200ms ease;
}

.theme-toggle-track {
  position: relative;
  width: var(--tt-track);
  height: var(--tt-height);
  background: linear-gradient(135deg, #f5f7fb, var(--tt-bg));
  border-radius: 9999px;
  transition: background 280ms ease, box-shadow 280ms ease, filter 280ms ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), inset 0 -6px 12px rgba(0,0,0,0.05);
  overflow: hidden;
  background-size: 200% 100%;
}

.theme-toggle-track::before {
  /* soft highlight/gloss */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.45), rgba(255,255,255,0));
  pointer-events: none;
}

.theme-toggle-track::after {
  /* decorative: sun rays in light, stars in dark */
  content: "";
  position: absolute;
  inset: 0;
  opacity: .25;
  transition: opacity 280ms ease, transform 280ms ease, filter 280ms ease;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,213,128,0.7) 0 8px, transparent 9px) no-repeat 8px center / 18px 18px,
    radial-gradient(circle at 75% 30%, rgba(255,255,255,0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 65%, rgba(255,255,255,0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 65% 50%, rgba(255,255,255,0.8) 0 1px, transparent 2px);
}

.theme-toggle-handle {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(var(--tt-height) - 6px);
  height: calc(var(--tt-height) - 6px);
  background: radial-gradient( circle at 35% 35%, #ffffff 0 40%, #f3f4f6 41% 100%);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.22), inset 0 -2px 6px rgba(0,0,0,.06);
  transition: transform 320ms cubic-bezier(.2,.8,.2,1.2), box-shadow 220ms ease, background 260ms ease, filter 260ms ease;
}

.theme-toggle-label:hover .theme-toggle-handle {
  box-shadow: 0 4px 12px rgba(0,0,0,.28), inset 0 -2px 6px rgba(0,0,0,.06);
}

.theme-toggle-icon { 
  width: 18px; height: 18px; display: inline-block; color: #6b7280; 
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.2));
  transition: color 240ms ease, transform 240ms ease;
}

.theme-toggle-icon.sun::before { content: "☀"; }
.theme-toggle-icon.moon::before { content: "🌙"; }

.theme-toggle-label:hover .theme-toggle-icon { transform: translateY(-1px); }
.theme-toggle-label:active .theme-toggle-handle { transform: translateX(0) scale(0.98); }

.theme-toggle-input:focus-visible + .theme-toggle-label .theme-toggle-track {
  outline: 3px solid var(--tt-focus);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 0 0 4px rgba(59,130,246,0.2);
}

/* Checked state */
.theme-toggle-input:checked + .theme-toggle-label .theme-toggle-track {
  background: linear-gradient(135deg, #0b1220, var(--tt-bg-dark));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), inset 0 -8px 14px rgba(0,0,0,.35);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}

.theme-toggle-input:checked + .theme-toggle-label .theme-toggle-handle {
  transform: translateX(calc(var(--tt-track) - var(--tt-height))) scale(1.02);
  background: radial-gradient( circle at 60% 45%, #dbeafe 0 35%, #93c5fd 36% 100%);
  box-shadow: 0 4px 14px rgba(0,0,0,.34), 0 0 0 4px rgba(96,165,250,.08);
  animation: tt-pop 420ms cubic-bezier(.2,.9,.2,1.2) 1;
}

/* Decorative state differences for ::after */
.theme-toggle-input:checked + .theme-toggle-label .theme-toggle-track::after {
  opacity: .6;
  transform: translateX(2px);
  background:
    radial-gradient(circle at 80% 50%, rgba(179, 198, 255, 0.6) 0 8px, transparent 9px) no-repeat calc(100% - 8px) center / 18px 18px,
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.9) 0 1.2px, transparent 2px),
    radial-gradient(circle at 35% 65%, rgba(255,255,255,0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 45%, rgba(255,255,255,0.85) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.85) 0 1px, transparent 2.2px);
  animation: tt-twinkle 2600ms ease-in-out infinite alternate;
}

/* Icons tint per theme */
[data-theme="dark"] .theme-toggle-icon { color: #cbd5e1; }
[data-theme="dark"] .theme-toggle-icon.sun { color: #9ca3af; }
[data-theme="dark"] .theme-toggle-icon.moon { color: #e5e7eb; }

/* Icon dynamics per state */
.theme-toggle-input:not(:checked) + .theme-toggle-label .sun { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle-input:not(:checked) + .theme-toggle-label .moon { opacity: .65; transform: translateY(1px) scale(.96); }
.theme-toggle-input:checked + .theme-toggle-label .sun { opacity: .55; transform: rotate(-15deg) scale(.95); }
.theme-toggle-input:checked + .theme-toggle-label .moon { opacity: 1; transform: translateY(0) scale(1.02); }

/* Hover shimmer */
.theme-toggle-label:hover .theme-toggle-track { background-position: 100% 0; }

/* On very small screens keep it reachable */
@media (max-width: 480px) {
  .theme-toggle-fixed { 
    top: max(8px, env(safe-area-inset-top) + 6px); 
    left: max(8px, env(safe-area-inset-left) + 6px); 
    padding: 5px 10px;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle-handle { transition: none !important; }
  .theme-toggle-track, .theme-toggle-track::after { transition: none !important; }
  .theme-toggle-input:checked + .theme-toggle-label .theme-toggle-handle { animation: none !important; }
}

/* High-contrast mode tweaks */
@media (forced-colors: active) {
  .theme-toggle-track { box-shadow: none; }
  .theme-toggle-input:focus-visible + .theme-toggle-label .theme-toggle-track { outline-color: Highlight; }
}

/* Keyframes */
@keyframes tt-pop {
  0% { transform: translateX(calc(var(--tt-track) - var(--tt-height))) scale(0.98); }
  60% { transform: translateX(calc(var(--tt-track) - var(--tt-height))) scale(1.05); }
  100% { transform: translateX(calc(var(--tt-track) - var(--tt-height))) scale(1.02); }
}

@keyframes tt-twinkle {
  0% { opacity: .35; }
  100% { opacity: .75; }
}