/* HERELLE modern animated upgrade — front-end only. Deep black, pink / pink-purple gradients, mobile-first.
   Every animation below is tied to a real state: a screen becoming visible, a mood being chosen,
   a recording actually running, playback actually playing, a real request actually loading, or
   real cards arriving from the server. No animation pretends to be a feature. */
:root{--bg:#070507;--card:#17101a;--card2:#211326;--pink:#ff5da2;--pink2:#c86bff;--text:#fff7fb;--muted:#c9b6c4;--line:#3a2438;--gold:#f2c6dd}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--pink)}button,input,textarea,select{font:inherit}
header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,#0d0710,#070507);border-bottom:1px solid var(--line);padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
.brand{font-weight:900;letter-spacing:.12em}.brand span{color:var(--pink)}
.help-link{color:#ffd7ea;border:1px solid var(--pink);border-radius:999px;padding:8px 14px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
main{max-width:640px;margin:0 auto;padding:20px 16px 110px}
h1{font-size:30px;line-height:1.15;margin:8px 0}h2{font-size:22px;margin:20px 0 8px}h3{font-size:17px;margin:14px 0 6px}
p{color:var(--muted);line-height:1.6}.lead{color:var(--text);font-size:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;margin:14px 0}
.card.soft{background:var(--card2)}
.grad{background:linear-gradient(135deg,#ff5da2,#c86bff 60%,#7b5cff);color:#14101a}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 20px;border-radius:999px;border:0;background:linear-gradient(135deg,#ff5da2,#c86bff);color:#fff;font-weight:800;cursor:pointer;text-decoration:none}
.btn.secondary{background:transparent;border:1px solid var(--pink);color:#ffd7ea}.btn.ghost{background:transparent;color:var(--muted)}
label{display:block;margin:12px 0 4px;font-weight:700}
input,textarea,select{width:100%;min-height:44px;background:#0d0710;color:var(--text);border:1px solid var(--line);border-radius:12px;padding:11px 12px}
textarea{min-height:120px;resize:vertical}
.moods{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.mood{min-height:44px;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:#0d0710;color:var(--text);cursor:pointer}
.mood.on{background:linear-gradient(135deg,#ff5da2,#c86bff);border-color:transparent;font-weight:800}
.mic-wrap{text-align:center;padding:10px 0}
.mic{width:150px;height:150px;border-radius:50%;border:0;cursor:pointer;background:radial-gradient(circle,#ff5da2 0%,#c86bff 55%,#7b5cff 100%);color:#fff;font-size:52px;box-shadow:0 0 0 10px rgba(255,93,162,.18),0 0 40px rgba(200,107,255,.65)}
.mic.rec{background:radial-gradient(circle,#ff2e7e,#ff5da2 60%,#c86bff)}
.mic:disabled{opacity:.6}
canvas.waves{width:100%;height:56px;background:#0d0710;border-radius:12px;border:1px solid var(--line)}
.tag{display:inline-block;border:1px solid var(--pink);border-radius:999px;padding:6px 12px;margin:3px;font-size:13px;cursor:pointer;background:transparent;color:#ffd7ea}
.tag.on{background:var(--pink);color:#fff}
nav.bottom{position:fixed;left:0;right:0;bottom:0;z-index:10;background:#0d0710;border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:8px 4px calc(8px + env(safe-area-inset-bottom))}
nav.bottom button{background:none;border:0;color:var(--muted);min-height:44px;padding:8px;font-weight:700;cursor:pointer}
nav.bottom button.on{color:var(--pink)}
.screen{display:none}.screen.on{display:block}
.msg{color:#ffd7ea;min-height:20px}.small{font-size:13px;color:var(--muted)}
audio{width:100%}hr{border:0;border-top:1px solid var(--line);margin:18px 0}
@media(min-width:700px){main{max-width:720px}h1{font-size:36px}}

/* Screen transitions: runs only when a screen becomes .on (display none -> block). */
.screen.on{animation:screenIn .38s ease both}
@keyframes screenIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
/* Cards arriving from real server data animate in; delay is set inline per card index. */
.anim-in{animation:cardIn .45s ease both}
@keyframes cardIn{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Mood picker: the chosen mood lifts and glows, the rest settle. */
.mood{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.mood.on{transform:translateY(-4px) scale(1.06);box-shadow:0 8px 24px rgba(255,93,162,.45),0 0 0 2px rgba(255,93,162,.35)}
.mood:not(.on):hover{transform:translateY(-1px)}
/* Buttons: gentle press and a smooth colour transition. */
.btn{transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease}
.btn:active{transform:scale(.97)}
/* Loading shimmer: present ONLY while a real request is in flight (class added in app.js, removed on settle). */
.btn.loading{position:relative;overflow:hidden;opacity:.85;pointer-events:none}
.btn.loading::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);animation:shimmer 1.1s linear infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
/* Microphone: pulses ONLY while recording (.rec, already set in app.js) or playing back (.playing, set on play). */
.mic{transition:transform .25s ease,box-shadow .25s ease}
.mic.rec{animation:micPulse 1.6s ease-in-out infinite}
.mic.playing{animation:micPulse 1.6s ease-in-out infinite}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 10px rgba(255,93,162,.18),0 0 40px rgba(200,107,255,.65)}50%{box-shadow:0 0 0 18px rgba(255,93,162,.28),0 0 64px rgba(200,107,255,.9)}}
/* Playback wave canvas glows only while the recorded audio is actually playing. */
canvas.waves.playing{border-color:var(--pink);box-shadow:0 0 24px rgba(255,93,162,.35)}
/* Bottom navigation and header: smooth active-state transitions, no layout jump. */
nav.bottom button{transition:color .25s ease,transform .25s ease}
nav.bottom button.on{transform:translateY(-2px);text-shadow:0 0 18px rgba(255,93,162,.6)}
header{transition:box-shadow .3s ease}
/* Reduced motion: all animation drops to a simple fade, never forced motion. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .screen.on{animation:screenFade .01ms both}
  @keyframes screenFade{from{opacity:0}to{opacity:1}}
}

/* HERELLE Light theme — front-end only. Dark stays the default; Light is chosen
   by the header Theme button and saved in localStorage only (never sent to the server).
   Light redefines the same variables, so every screen, card, and animation from the
   animated upgrade works unchanged in both themes. Reduced-motion rules above still apply. */
html[data-theme="light"]{
  --bg:#fff7fa; --card:#ffffff; --card2:#fdeff5;
  --pink:#c2185b; --pink2:#7b1fa2;
  --text:#1f1420; --muted:#5b4657; --line:#e8d5e2; --gold:#8a5a00;
}
html[data-theme="light"] header{background:linear-gradient(180deg,#fff7fa,#fff0f5);border-bottom-color:var(--line)}
html[data-theme="light"] .help-link{color:#9d174d;border-color:#c2185b}
html[data-theme="light"] .btn.secondary{color:#9d174d;border-color:#c2185b}
html[data-theme="light"] .btn.ghost{color:#5b4657}
html[data-theme="light"] input,html[data-theme="light"] textarea,html[data-theme="light"] select{background:#ffffff;color:var(--text);border-color:#e0c3d6}
html[data-theme="light"] .mood{background:#ffffff;color:var(--text);border-color:#e0c3d6}
html[data-theme="light"] .mood.on{background:linear-gradient(135deg,#e91e63,#9c27b0);color:#fff;border-color:transparent}
html[data-theme="light"] canvas.waves{background:#fff7fa;border-color:#e0c3d6}
html[data-theme="light"] .tag{color:#9d174d;border-color:#c2185b}
html[data-theme="light"] .tag.on{background:#c2185b;color:#fff}
html[data-theme="light"] nav.bottom{background:#ffffff;border-top-color:var(--line)}
html[data-theme="light"] nav.bottom button{color:#5b4657}
html[data-theme="light"] nav.bottom button.on{color:#c2185b;text-shadow:none}
html[data-theme="light"] .msg{color:#9d174d}
html[data-theme="light"] .mic{box-shadow:0 0 0 10px rgba(233,30,99,.12),0 0 32px rgba(156,39,176,.35)}
html[data-theme="light"] .mood.on{box-shadow:0 8px 24px rgba(233,30,99,.30),0 0 0 2px rgba(233,30,99,.25)}
html[data-theme="light"] .btn.loading::after{background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%)}