/* Shared by mobile.html, present.html and guided.html. One copy on purpose: three inline
   copies would drift, which is how public/local.js ended up stale. */
:root { --accent: #35d07f; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 15%, #1a1d26 0%, #0e0f13 70%);
  color: #e8e8ee; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  position: fixed; inset: 0; overscroll-behavior: none;
}
#stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#avatar-canvas { display: block; }
#hint {
  position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 134px);
  text-align: center; font-size: 0.9rem; color: #9aa0ad; letter-spacing: 0.02em;
  pointer-events: none; opacity: 0.85;
}
#controls {
  position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 30px);
  display: flex; justify-content: center; gap: 44px;
}
.btn {
  width: 78px; height: 78px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; color: #fff; position: relative;
  background: #2a2d38; box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  transition: background 0.15s, color 0.15s, transform 0.08s;
  touch-action: none; -webkit-touch-callout: none; user-select: none;
}
.btn:active { transform: scale(0.94); }
.btn svg { width: 34px; height: 34px; }
.btn .lbl {
  position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
  font-size: 0.72rem; color: #9aa0ad; white-space: nowrap;
}
.btn .slash { display: none; }
/* Listen toggle (VAD): off = gray + crossed, on = green, rec = green pulse */
#listen-btn.off { background: #2a2d38; color: #8b90a0; }
#listen-btn.off .slash { display: block; }
#listen-btn.on { background: var(--accent); color: #06210f; }
#listen-btn.rec { animation: pulse 1.2s infinite; }
/* Push-to-talk: neutral, green pulse while held */
#ptt-btn.active { background: var(--accent); color: #06210f; animation: pulse 1.2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(53,208,127,0.5); }
  70% { box-shadow: 0 0 0 18px rgba(53,208,127,0); }
  100% { box-shadow: 0 0 0 0 rgba(53,208,127,0); }
}
#err { position: fixed; top: env(safe-area-inset-top); left: 0; right: 0; text-align: center;
       font-size: 0.8rem; color: #ff8a8a; padding: 8px; pointer-events: none; }
#voice-sel, #emotion-sel, #mode-sel {
  position: fixed; right: 12px; z-index: 5;
  max-width: 52vw; padding: 7px 10px; font-size: 0.78rem;
  color: #cdd2dd; background: rgba(42,45,56,0.72); border: 1px solid #3a3e4a;
  border-radius: 10px; -webkit-appearance: none; appearance: none;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#voice-sel { top: calc(env(safe-area-inset-top) + 6px); }
#emotion-sel { top: calc(env(safe-area-inset-top) + 48px); }
#mode-sel { top: calc(env(safe-area-inset-top) + 90px); }
/* Modo "guion": the mic buttons are hidden and the play button takes the bay, so the bottom
   controls never show a mic the monologue would not use. */
.hidden { display: none !important; }
#play-btn.playing { background: var(--accent); color: #06210f; }
#play-btn .ico-stop { display: none; }
#play-btn.playing .ico-play { display: none; }
#play-btn.playing .ico-stop { display: block; }
/* Cue for whoever holds the phone in guided mode. Sits above the hint, never spoken. */
#cue {
  position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 160px);
  text-align: center; font-size: 0.82rem; color: var(--accent); opacity: 0.9;
  pointer-events: none; padding: 0 18px;
}
/* Deliberately NOT in the top-right band: the info overlay there grows from +6px to ~+152px
   after one real turn, and two selectors already live in it. Sits in the bottom band instead,
   vertically centred against the 78px controls and clear of them horizontally. */
#reset-btn {
  position: fixed; left: 14px; bottom: calc(env(safe-area-inset-bottom) + 47px); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #9aa0ad;
  background: rgba(42,45,56,0.72); border: 1px solid #3a3e4a;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  touch-action: manipulation; transition: transform 0.08s;
}
#reset-btn:active { transform: scale(0.94); }
#reset-btn svg { width: 20px; height: 20px; }
#reset-btn .lbl {
  position: absolute; bottom: -19px; left: 50%; transform: translateX(-50%);
  font-size: 0.68rem; color: #767c8a; white-space: nowrap;
}
/* --- Pause / stop, used by the presentation page (present.html) --- */
#pause-btn.paused { background: var(--accent); color: #06210f; }
#pause-btn .ico-resume { display: none; }
#pause-btn.paused .ico-pause { display: none; }
#pause-btn.paused .ico-resume { display: block; }
#stop-btn { background: #3a2d33; }