/* ============================================================
   Pet Buttons — core tokens, theming, buttons, shared UI
   ============================================================ */

:root {
  /* ---- pastel button faces (LIGHT default; dark overrides below) ---- */
  --c-coral:      oklch(0.855 0.075 30);
  --c-peach:      oklch(0.880 0.072 62);
  --c-butter:     oklch(0.905 0.075 96);
  --c-sage:       oklch(0.880 0.060 142);
  --c-mint:       oklch(0.885 0.058 172);
  --c-sky:        oklch(0.875 0.060 232);
  --c-periwinkle: oklch(0.850 0.062 272);
  --c-lilac:      oklch(0.860 0.060 312);
  --c-rose:       oklch(0.860 0.062 352);

  --rim-coral:      oklch(0.74 0.10 30);
  --rim-peach:      oklch(0.76 0.09 62);
  --rim-butter:     oklch(0.79 0.10 96);
  --rim-sage:       oklch(0.74 0.08 142);
  --rim-mint:       oklch(0.74 0.08 172);
  --rim-sky:        oklch(0.72 0.08 232);
  --rim-periwinkle: oklch(0.70 0.08 272);
  --rim-lilac:      oklch(0.72 0.08 312);
  --rim-rose:       oklch(0.72 0.08 352);

  --ink-coral:      oklch(0.34 0.09 30);
  --ink-peach:      oklch(0.36 0.08 62);
  --ink-butter:     oklch(0.40 0.08 96);
  --ink-sage:       oklch(0.36 0.08 142);
  --ink-mint:       oklch(0.34 0.07 172);
  --ink-sky:        oklch(0.30 0.07 232);
  --ink-periwinkle: oklch(0.30 0.08 272);
  --ink-lilac:      oklch(0.32 0.08 312);
  --ink-rose:       oklch(0.32 0.08 352);

  --r-lg: 34px; --r-md: 22px; --r-sm: 14px;
  --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-ui: 'Nunito', system-ui, sans-serif;
  --maxw-sub: 600px;
  --maxw-dom: 1180px;
}

/* ---- pastel button faces — DARK variants ----
   The light defaults are intentionally bright pastels; against a dark
   surface they glow harshly. Dark mode drops face lightness into the mid
   range so the bubble reads as "colored, not luminous", lowers rim
   lightness further for the shadow, and lifts ink to a near-white so
   labels stay legible against the now-darker face. */
:root[data-theme="dark"] {
  --c-coral:      oklch(0.585 0.105 30);
  --c-peach:      oklch(0.605 0.105 62);
  --c-butter:     oklch(0.625 0.110 96);
  --c-sage:       oklch(0.585 0.085 142);
  --c-mint:       oklch(0.580 0.085 172);
  --c-sky:        oklch(0.575 0.090 232);
  --c-periwinkle: oklch(0.555 0.090 272);
  --c-lilac:      oklch(0.560 0.088 312);
  --c-rose:       oklch(0.585 0.090 352);

  --rim-coral:      oklch(0.42 0.10 30);
  --rim-peach:      oklch(0.44 0.10 62);
  --rim-butter:     oklch(0.46 0.10 96);
  --rim-sage:       oklch(0.42 0.085 142);
  --rim-mint:       oklch(0.42 0.085 172);
  --rim-sky:        oklch(0.40 0.085 232);
  --rim-periwinkle: oklch(0.38 0.085 272);
  --rim-lilac:      oklch(0.40 0.085 312);
  --rim-rose:       oklch(0.42 0.085 352);

  --ink-coral:      oklch(0.95 0.025 30);
  --ink-peach:      oklch(0.96 0.025 62);
  --ink-butter:     oklch(0.97 0.030 96);
  --ink-sage:       oklch(0.96 0.025 142);
  --ink-mint:       oklch(0.96 0.025 172);
  --ink-sky:        oklch(0.96 0.025 232);
  --ink-periwinkle: oklch(0.96 0.025 272);
  --ink-lilac:      oklch(0.96 0.025 312);
  --ink-rose:       oklch(0.96 0.025 352);
}

/* ---- LIGHT (default) ---- */
:root, :root[data-theme="light"] {
  --bg:        oklch(0.972 0.012 80);
  --bg-2:      oklch(0.955 0.014 78);
  --surface:   oklch(0.995 0.004 90);
  --surface-2: oklch(0.985 0.006 88);
  --ink:       oklch(0.34 0.03 70);
  --ink-soft:  oklch(0.52 0.025 70);
  --ink-faint: oklch(0.66 0.02 70);
  --line:      oklch(0.90 0.012 80);
  --shadow:    0 6px 24px oklch(0.7 0.04 70 / 0.18);
  --shadow-lg: 0 30px 80px oklch(0.3 0.05 70 / 0.35);
  --tile-drop: 0 18px 26px oklch(0.6 0.05 70 / 0.18);
  --bg-glow-1: oklch(0.985 0.02 90);
  --bg-glow-2: oklch(0.95 0.03 320 / 0.5);
}

/* ---- DARK ---- */
:root[data-theme="dark"] {
  --bg:        oklch(0.235 0.012 280);
  --bg-2:      oklch(0.275 0.013 280);
  --surface:   oklch(0.305 0.014 280);
  --surface-2: oklch(0.345 0.015 280);
  --ink:       oklch(0.95 0.012 90);
  --ink-soft:  oklch(0.82 0.015 90);
  --ink-faint: oklch(0.66 0.018 280);
  --line:      oklch(0.40 0.018 280);
  --shadow:    0 8px 28px oklch(0.12 0.02 280 / 0.6);
  --shadow-lg: 0 30px 80px oklch(0.08 0.02 280 / 0.7);
  --tile-drop: 0 18px 30px oklch(0.12 0.02 280 / 0.55);
  --bg-glow-1: oklch(0.34 0.04 280 / 0.7);
  --bg-glow-2: oklch(0.32 0.05 320 / 0.45);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* Suppress accidental text-selection from drags, double-clicks, etc. Inputs
   and editable surfaces opt back in below. */
html { user-select: none; -webkit-user-select: none; }
input, textarea, [contenteditable] { user-select: text; -webkit-user-select: text; }
body {
  font-family: var(--font-ui);
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 12% -8%, var(--bg-glow-1) 0%, transparent 55%),
    radial-gradient(1000px 800px at 105% 110%, var(--bg-glow-2) 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .3s, color .3s;
}
#root { min-height: 100%; }

/* ============================================================
   Tactile talk button
   ============================================================ */
.talk {
  position: relative;
  border: none; cursor: pointer;
  border-radius: var(--r-lg);
  background: var(--face);
  aspect-ratio: 1 / 0.84;
  min-height: 116px;
  padding: 14px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px;
  color: var(--face-ink);
  box-shadow: 0 10px 0 var(--rim), var(--tile-drop), inset 0 3px 6px oklch(1 0 0 / 0.45);
  transform: translateY(0);
  transition: transform .08s cubic-bezier(.3,.8,.4,1), box-shadow .08s ease, filter .2s;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y;            /* allow vertical scroll; press logic owns the tap */
  overflow: hidden;
}
.talk:focus-visible { outline: 4px solid oklch(0.6 0.13 250); outline-offset: 4px; }
@media (hover: hover) { .talk:hover { filter: saturate(1.06) brightness(1.02); } }
.talk.pressed {
  transform: translateY(8px);
  box-shadow: 0 2px 0 var(--rim), 0 4px 10px oklch(0.5 0.05 70 / 0.18), inset 0 3px 6px oklch(1 0 0 / 0.4);
}
.talk.playing { animation: talk-pulse 1.1s ease-in-out infinite; }
@keyframes talk-pulse {
  0%,100% { box-shadow: 0 10px 0 var(--rim), 0 0 0 0 var(--glow, transparent), inset 0 3px 6px oklch(1 0 0 / 0.45); }
  50%     { box-shadow: 0 10px 0 var(--rim), 0 0 0 13px var(--glow, transparent), inset 0 3px 6px oklch(1 0 0 / 0.45); }
}
.talk-icon { font-size: clamp(34px, 8vw, 52px); line-height: 1; filter: drop-shadow(0 2px 1px oklch(1 0 0 / 0.5)); pointer-events: none; }
.talk-label {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(16px, 4.4vw, 24px); letter-spacing: -0.01em;
  text-align: center; text-wrap: balance; line-height: 1.05; pointer-events: none;
}
.talk-photo { width: clamp(54px, 13vw, 84px); height: clamp(54px, 13vw, 84px); border-radius: 18px; object-fit: cover;
  box-shadow: 0 3px 8px oklch(0.4 0.05 70 / 0.3), inset 0 0 0 3px oklch(1 0 0 / 0.6); pointer-events: none; }
.talk-photo-ph { width: clamp(54px,13vw,84px); height: clamp(54px,13vw,84px); border-radius: 18px; display: grid; place-items: center; font-size: 30px;
  background: repeating-linear-gradient(45deg, oklch(1 0 0 / 0.18) 0 8px, transparent 8px 16px), oklch(1 0 0 / 0.25); box-shadow: inset 0 0 0 3px oklch(1 0 0 / 0.5); }

/* progress ring */
.talk-ring { position: absolute; top: 11px; right: 11px; width: 28px; height: 28px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.talk.playing .talk-ring { opacity: 1; }
.talk-ring circle { fill: none; stroke-width: 5; }
.talk-ring .track { stroke: oklch(1 0 0 / 0.4); }
.talk-ring .bar { stroke: var(--face-ink); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .1s linear; }

.talk-admin-tag { position: absolute; top: 9px; left: 11px; font-size: 10.5px; font-weight: 800; font-family: var(--font-ui);
  text-transform: uppercase; letter-spacing: .08em; color: var(--face-ink); opacity: .5; }

/* screen-wide ripple */
.ripple-layer { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; transform: translate(-50%,-50%) scale(0); opacity: .45; animation: ripple-go .7s ease-out forwards; }
@keyframes ripple-go { to { transform: translate(-50%,-50%) scale(1); opacity: 0; } }

/* ============================================================
   Output bar
   ============================================================ */
.output { display: flex; align-items: center; gap: 16px; background: var(--surface); border-radius: var(--r-md);
  padding: 14px 18px; min-height: 74px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.output-text { flex: 1; font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 5.5vw, 30px);
  color: var(--ink); line-height: 1.1; letter-spacing: -0.01em; min-width: 0; }
.output-text.empty { color: var(--ink-faint); }
.output-replay { flex: none; border: none; cursor: pointer; width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-mint); color: var(--ink-mint); font-size: 23px; box-shadow: 0 4px 0 var(--rim-mint);
  transition: transform .1s, box-shadow .1s, opacity .2s; display: grid; place-items: center; }
.output-replay:active { transform: translateY(4px); box-shadow: 0 0 0 var(--rim-mint); }
.output-replay:disabled { opacity: .35; cursor: default; }

/* ============================================================
   Category tabs
   ============================================================ */
.tabs { display: flex; flex-wrap: wrap; gap: 9px; }
.tabs.scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  /* Breathing room between the scrollbar and whatever sits below
     (the button grid on mobile). */
  padding-bottom: 10px;
  margin-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  /* Show a slim, branded scrollbar so the affordance is obvious on desktop. */
  scrollbar-width: thin;
  scrollbar-color: var(--ink-faint) transparent;
  scroll-snap-type: x proximity;
  cursor: grab;
}
.tabs.scroll:active { cursor: grabbing; }
.tabs.scroll::-webkit-scrollbar { height: 8px; }
.tabs.scroll::-webkit-scrollbar-thumb { background: var(--ink-faint); border-radius: 999px; }
.tabs.scroll::-webkit-scrollbar-track { background: transparent; }
.tab { border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  font-family: var(--font-display); font-weight: 500; font-size: 16px; padding: 10px 18px; border-radius: 999px;
  cursor: pointer; display: flex; align-items: center; gap: 8px; white-space: nowrap; flex: none;
  transition: transform .1s, background .15s, color .15s, box-shadow .15s; }
.tab .dot { width: 12px; height: 12px; border-radius: 50%; }
/* When the tab is active the whole pill takes the category color, so the
   inner dot would disappear into the background. Flip it to the ink color
   so it stays visible in both light and dark mode. */
.tab.active .dot { background: var(--tab-ink, var(--ink)) !important; }
.tab:active { transform: translateY(1px); }
.tab.active { color: var(--tab-ink, var(--ink)); background: var(--tab-bg, var(--surface)); border-color: transparent; box-shadow: 0 3px 0 var(--tab-rim, var(--line)); }

/* ============================================================
   Board grid
   ============================================================ */
.board { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: clamp(12px, 3vw, 20px); align-content: start; }
.empty-board { grid-column: 1 / -1; text-align: center; padding: 50px 20px; color: var(--ink-faint); }
.empty-board .big { font-size: 50px; margin-bottom: 6px; }
.empty-board p { font-family: var(--font-display); font-size: 19px; margin: 4px 0; }

/* ============================================================
   Generic chrome: icon buttons, pills, toggle
   ============================================================ */
.icon-btn { border: none; background: var(--surface); color: var(--ink-soft); width: 50px; height: 50px; border-radius: 15px;
  font-size: 21px; cursor: pointer; box-shadow: 0 3px 0 var(--line); transition: transform .1s, box-shadow .1s, color .15s; display: grid; place-items: center; }
.icon-btn:hover { color: var(--ink); }
.icon-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }

.pill { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; padding: 7px 13px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); }
.pill .led { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); }
.pill.on .led { background: oklch(0.72 0.16 145); box-shadow: 0 0 0 3px oklch(0.72 0.16 145 / 0.25); animation: led 1.6s ease-in-out infinite; }
.pill.off .led { background: oklch(0.7 0.02 70); }
@keyframes led { 50% { opacity: .5; } }

/* ============================================================
   Modal
   ============================================================ */
.scrim { position: fixed; inset: 0; background: oklch(0.2 0.02 280 / 0.5); backdrop-filter: blur(5px); z-index: 40;
  display: grid; place-items: center; padding: 18px; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--surface); border-radius: 24px; width: min(560px, 100%); max-height: 92vh; overflow: auto;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line); animation: rise .25s cubic-bezier(.2,.9,.3,1.1); }
@keyframes rise { from { transform: translateY(18px) scale(.97); } }
.modal-head { padding: 20px 24px 4px; display: flex; align-items: flex-start; gap: 12px; }
.modal-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 23px; margin: 0; color: var(--ink); flex: 1; }
.modal-head p { margin: 4px 0 0; color: var(--ink-faint); font-size: 14px; font-weight: 600; }
.modal-body { padding: 12px 24px 24px; }

/* fields */
.field { margin-bottom: 16px; }
.field > label { display: block; font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 7px; }
.input, .select { width: 100%; font-family: var(--font-ui); font-size: 16px; font-weight: 600; color: var(--ink);
  padding: 12px 14px; border-radius: 13px; border: 1.5px solid var(--line); background: var(--bg); transition: border-color .15s, box-shadow .15s; }
.input:focus, .select:focus { outline: none; border-color: var(--c-sky); box-shadow: 0 0 0 4px oklch(0.7 0.07 232 / 0.3); }
.note { font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; font-weight: 600; line-height: 1.4; }

/* swatches + icon picker */
.swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.swatch { width: 40px; height: 40px; border-radius: 12px; cursor: pointer; border: 3px solid transparent;
  box-shadow: inset 0 2px 4px oklch(1 0 0 / 0.4), 0 2px 4px oklch(0.5 0.05 70 / 0.2); transition: transform .1s; }
.swatch:hover { transform: scale(1.08); }
.swatch.sel { border-color: var(--ink); }
/* Grouped icon picker: search input, jump chips, scrollable sections. */
.icon-picker { display: flex; flex-direction: column; gap: 10px; }
.icon-picker-search { padding: 9px 12px; font-size: 14px; }
.icon-picker-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-picker-chip {
  font-size: 12.5px; font-weight: 600; padding: 5px 10px;
  border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink-soft); cursor: pointer; transition: background .12s, color .12s;
}
.icon-picker-chip:hover { background: var(--surface-2); color: var(--ink); }
.icon-picker-scroll {
  max-height: 300px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: var(--ink-faint) transparent;
}
.icon-picker-scroll::-webkit-scrollbar { width: 8px; }
.icon-picker-scroll::-webkit-scrollbar-thumb { background: var(--ink-faint); border-radius: 999px; }
.icon-picker-section-title {
  margin: 0 0 6px; font-size: 11.5px; font-weight: 700;
  color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em;
}
.icon-grid-inline { max-height: none; overflow: visible; }

.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 7px; max-height: 184px; overflow: auto;
  padding: 4px; background: var(--bg); border-radius: 14px; border: 1px solid var(--line); }
.icon-pick { aspect-ratio: 1; font-size: 23px; border-radius: 11px; border: 2px solid transparent; background: var(--surface);
  cursor: pointer; transition: transform .1s, border-color .12s; display: grid; place-items: center; }
.icon-pick:hover { transform: scale(1.1); }
.icon-pick.sel { border-color: var(--ink); background: var(--surface-2); }

/* segmented */
.seg { display: flex; gap: 0; background: var(--bg-2); border-radius: 14px; padding: 4px; }
.seg button { flex: 1; border: none; background: transparent; font-family: var(--font-ui); font-weight: 700; font-size: 14px;
  color: var(--ink-soft); padding: 10px; border-radius: 11px; cursor: pointer; transition: background .15s, color .15s; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* dropzone + audio chips */
.dropzone { border: 2px dashed var(--line); border-radius: 15px; padding: 20px; text-align: center; color: var(--ink-faint);
  font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.drag { border-color: var(--c-sky); background: oklch(0.6 0.08 232 / 0.1); }
.audio-ready { display: flex; align-items: center; gap: 12px; background: oklch(0.6 0.12 145 / 0.14); border-radius: 13px;
  padding: 11px 13px; font-weight: 700; color: var(--ink); }
.rec-btn { display: inline-flex; align-items: center; gap: 10px; border: none; cursor: pointer; background: var(--c-coral);
  color: var(--ink-coral); font-family: var(--font-display); font-weight: 500; font-size: 18px; padding: 13px 24px; border-radius: 999px;
  box-shadow: 0 4px 0 var(--rim-coral); transition: transform .1s, box-shadow .1s; }
.rec-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--rim-coral); }
.rec-btn.recording { background: oklch(0.62 0.2 25); color: white; box-shadow: 0 4px 0 oklch(0.48 0.18 25); }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.rec-btn.recording .rec-dot { animation: blink .8s infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* action buttons */
.actions { display: flex; gap: 12px; margin-top: 6px; }
.btn-primary, .btn-ghost, .btn-danger { font-family: var(--font-display); font-weight: 500; font-size: 17px; border: none; cursor: pointer;
  padding: 13px 22px; border-radius: 14px; transition: transform .1s, box-shadow .1s, background .15s, opacity .15s; }
.btn-primary { flex: 1; background: var(--c-sky); color: var(--ink-sky); box-shadow: 0 4px 0 var(--rim-sky); }
.btn-primary:active { transform: translateY(4px); box-shadow: 0 0 0 var(--rim-sky); }
.btn-primary:disabled { opacity: .45; cursor: default; }
.btn-ghost { background: var(--bg-2); color: var(--ink-soft); }
.btn-ghost:hover { color: var(--ink); }
.btn-danger { background: oklch(0.6 0.16 25 / 0.16); color: oklch(0.62 0.19 25); }
.btn-danger:hover { background: oklch(0.6 0.16 25 / 0.26); }

/* toast */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg);
  font-weight: 700; font-size: 14px; padding: 12px 20px; border-radius: 14px; display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-lg); z-index: 60; animation: toast-in .3s cubic-bezier(.2,.9,.3,1.1); max-width: calc(100vw - 36px); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 14px); } }
.toast .spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid oklch(0.6 0 0 / 0.4); border-top-color: var(--bg); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast .ok { color: oklch(0.8 0.15 150); font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .ripple, .talk.playing, .pill.on .led { animation: none !important; }
}