/* ============================================================
   flove.css · shared common CSS for flove app launchers
   ============================================================
   Sections:
     1. Theme (dark/light toggle)
     2. Sound toggle
     3. Wizy suggestion chips
     4. Reduced motion
   ============================================================ */

/* ── 1. Theme (dark/light) ── */

:root {
  --bg: #ffffff;
  --ink: #1a1a1a;
  --mut: #666666;
  --line: #e0e0e0;
  --accent: #6b46c1;
  --accent-hover: #553c9a;
  --surface: #f8f9fa;
  --surface-hover: #e9ecef;
  --shadow: rgba(0,0,0,0.1);
  --transition: 0.3s ease;
}

:root.dark {
  --bg: #0b0b0f;
  --ink: #e9eaf2;
  --mut: #a3a7b4;
  --line: #1e2133;
  --accent: #9d7fff;
  --accent-hover: #b794ff;
  --surface: #11131a;
  --surface-hover: #1a1d2e;
  --shadow: rgba(0,0,0,0.3);
}

body {
  background: var(--bg);
  color: var(--ink);
  transition: background var(--transition), color var(--transition);
}

.theme-toggle {
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 1.2rem;
  padding: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
}

.theme-toggle:hover {
  background: var(--surface-hover);
  transform: scale(1.1);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── 2. Sound toggle ── */
/* Checkbox-driven: add <input type="checkbox" id="opt-sound" class="ctl">
   somewhere in the page (hidden). Label it with:
   <label class="sound-toggle" for="opt-sound">…</label>
   CSS uses :has() to style the track. JS reads #opt-sound.checked. */

.sound-toggle {
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 1.1rem;
  padding: 0.4rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  user-select: none;
  -webkit-user-select: none;
}

.sound-toggle:hover {
  background: var(--surface-hover);
  transform: scale(1.1);
}

.sound-toggle:active {
  transform: scale(0.95);
}

.sound-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Icon swap: show 🔇 when off, 🔊 when on */
.sound-toggle::before { content: '🔇'; }
body:has(#opt-sound:checked) .sound-toggle::before { content: '🔊'; }

/* ── 3. Wizy suggestion chips ── */
/* Rendered by wizy.js — wizy.render(container, summary) */

.wizy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 8px 0;
}

.wizy-chip {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  padding: 7px 14px;
  font: 500 0.82rem/1.3 var(--font-ui, system-ui, sans-serif);
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
  max-width: 260px;
}

.wizy-chip:hover {
  border-color: var(--accent);
  color: var(--accent-hover);
  background: var(--surface-hover);
  transform: translateY(-1px);
}

.wizy-chip--on,
.wizy-chip:active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(0.97);
}

.wizy-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── 4. Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
  body, .theme-toggle, .sound-toggle, .wizy-chip {
    transition: none !important;
  }
  .theme-toggle:hover, .sound-toggle:hover {
    transform: none;
  }
  .wizy-chip:hover {
    transform: none;
  }
}