/* ===========================================================================
   SmugAI - full-screen character. No page chrome beyond a mic button.
   The background is four blurred pastel blobs on long, out-of-phase drifts;
   body[data-state] retints the whole scene per state machine state.
   =========================================================================== */

:root {
  --ink: #2c1b46;
  --pill: rgba(255,255,255,.5);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; overflow: hidden; }

body {
  background: #fdf7fb;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  transition: background 1.2s ease;
  touch-action: manipulation;
}

/* ── Background blobs ─────────────────────────────────────────────────────── */

/* The backdrop is generated in the shader now (glass has to refract it), so
   the CSS blob layer is retired. Kept in the markup for reference. */
.blobs, .grain { display: none; }

.blob {
  position: absolute;
  border-radius: 50%;
  opacity: .78;
  mix-blend-mode: multiply;
  transition: background 1.4s ease, opacity 1.4s ease;
  will-change: transform;
}

/* Four different sizes, positions, durations and directions so the drift never
   visibly loops. */
.b1 { width: 46vmax; height: 46vmax; top:  4%; left:  6%; background: #ffc9e8; animation: drift1 34s ease-in-out infinite; }
.b2 { width: 52vmax; height: 52vmax; top: 22%; left: 46%; background: #d7c4ff; animation: drift2 46s ease-in-out infinite; }
.b3 { width: 38vmax; height: 38vmax; top: 52%; left: 14%; background: #c9e4ff; animation: drift3 40s ease-in-out infinite; }
.b4 { width: 42vmax; height: 42vmax; top: 44%; left: 56%; background: #ffe6f6; animation: drift4 52s ease-in-out infinite; }

@keyframes drift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(12vw, 8vh) scale(1.12); }
  66%     { transform: translate(-6vw, 14vh) scale(.94); }
}
@keyframes drift2 {
  0%,100% { transform: translate(0,0) scale(1.04); }
  40%     { transform: translate(-14vw, -9vh) scale(.9); }
  70%     { transform: translate(7vw, 11vh) scale(1.16); }
}
@keyframes drift3 {
  0%,100% { transform: translate(0,0) scale(.98); }
  45%     { transform: translate(16vw, -12vh) scale(1.18); }
  75%     { transform: translate(4vw, 6vh) scale(1.02); }
}
@keyframes drift4 {
  0%,100% { transform: translate(0,0) scale(1.08); }
  35%     { transform: translate(-10vw, 10vh) scale(.92); }
  68%     { transform: translate(9vw, -8vh) scale(1.1); }
}

/* State tinting. LISTENING leans warm and alert; THINKING drops the whole
   scene into deep purple; ANSWERING blooms bright again. */
body[data-state="listening"] { background: #fbf2ff; }
body[data-state="listening"] .b1 { background: #ffd0e4; }
body[data-state="listening"] .b3 { background: #cfd8ff; }

body[data-state="thinking"] { background: #16092b; }
body[data-state="thinking"] .blobs { filter: blur(90px); }
body[data-state="thinking"] .blob { opacity: .62; mix-blend-mode: screen; }
body[data-state="thinking"] .b1 { background: #6b2d7a; }
body[data-state="thinking"] .b2 { background: #3b1f8f; }
body[data-state="thinking"] .b3 { background: #241463; }
body[data-state="thinking"] .b4 { background: #8a3ba8; }

body[data-state="answering"] { background: #fff6fb; }
body[data-state="answering"] .b2 { background: #e3d2ff; }
body[data-state="answering"] .b4 { background: #ffdcef; }

/* Faint film grain - keeps the big flat gradients from banding. */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ── Canvas ───────────────────────────────────────────────────────────────── */

#face { position: fixed; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; }

/* ── Caption ──────────────────────────────────────────────────────────────── */

.caption {
  position: fixed;
  left: 50%; bottom: 164px;
  transform: translateX(-50%);
  z-index: 3;
  width: min(620px, 84vw);
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0;
  transition: opacity .5s ease, color .8s ease;
  pointer-events: none;
  text-wrap: balance;
}
.caption.show { opacity: .82; }
.caption.heard { font-style: italic; opacity: .45; font-size: 13.5px; }
body[data-state="thinking"] .caption,
body[data-state="thinking"] .home-link { color: #efe4ff; }

/* ── Controls ─────────────────────────────────────────────────────────────── */

.controls {
  position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%);
  z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}

.mic {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px 13px 18px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  background: rgba(255,255,255,.42);
  backdrop-filter: blur(14px);
  color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
  box-shadow: 0 10px 30px -12px rgba(44,27,70,.35);
  transition: transform .2s ease, background .3s ease, color .4s ease, opacity .3s ease;
}
.mic:hover { transform: translateY(-2px); background: rgba(255,255,255,.6); }
.mic:active { transform: translateY(0) scale(.98); }
.mic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.mic[disabled] { opacity: .5; cursor: default; transform: none; }

/* Pulsing halo while she's listening. */
body[data-state="listening"] .mic {
  background: rgba(255,255,255,.72);
  animation: halo 1.8s ease-in-out infinite;
}
@keyframes halo {
  0%,100% { box-shadow: 0 0 0 0 rgba(214,92,168,.45), 0 10px 30px -12px rgba(44,27,70,.35); }
  70%     { box-shadow: 0 0 0 18px rgba(214,92,168,0), 0 10px 30px -12px rgba(44,27,70,.35); }
}
body[data-state="thinking"] .mic {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: #f0e6ff;
}

.typed { display: flex; gap: 8px; }
.typed input {
  width: min(420px, 70vw);
  padding: 11px 16px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(14px);
  font: inherit; font-size: 14px; color: var(--ink);
  outline: none;
}
.typed input::placeholder { color: rgba(44,27,70,.45); }
.typed button {
  padding: 11px 18px; border: 0; border-radius: 999px;
  background: var(--ink); color: #fff; font: inherit; font-size: 14px; cursor: pointer;
}

/* ── Voice quality pill ───────────────────────────────────────────────────── */

.voice-pill {
  position: fixed; right: 20px; bottom: 20px; z-index: 4;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--pill);
  backdrop-filter: blur(10px);
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(44,27,70,.6);
  transition: color .6s ease, background .6s ease;
  cursor: default;
}
.voice-dot { width: 6px; height: 6px; border-radius: 50%; background: #12a56c; }
.voice-pill.degraded .voice-dot { background: #e0952f; }
.voice-pill.degraded { color: rgba(44,27,70,.75); }
body[data-state="thinking"] .typed input { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #f3ebff; }
body[data-state="thinking"] .typed input::placeholder { color: rgba(243,235,255,.5); }
body[data-state="thinking"] .voice-pill { background: rgba(255,255,255,.1); color: rgba(240,230,255,.7); }

.home-link {
  position: fixed; left: 20px; top: 20px; z-index: 4;
  font-size: 12px; text-decoration: none;
  color: rgba(44,27,70,.45);
  transition: color .6s ease, opacity .3s ease;
}
.home-link:hover { opacity: .8; }

@media (max-width: 560px) {
  .caption { bottom: 150px; font-size: 14px; }
  .voice-pill { left: 50%; right: auto; transform: translateX(-50%); bottom: 12px; }
}

/* ── Debug panel (temporary) ──────────────────────────────────────────────────
   Expression/state switcher for design review. Remove along with the
   DEBUG_PANEL flag in smugai.js. */

.debug-panel {
  position: fixed; left: 16px; top: 52px; z-index: 8;
  width: 210px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 10px 30px -14px rgba(44,27,70,.4);
  font-size: 11px;
  color: var(--ink);
}
.dbg-head {
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  opacity: .5; margin: 0 0 5px;
}
.dbg-head + .dbg-row { margin-bottom: 11px; }
.dbg-row { display: flex; flex-wrap: wrap; gap: 4px; }
.debug-panel button {
  font: inherit; font-size: 10.5px;
  padding: 5px 9px;
  border: 1px solid rgba(44,27,70,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.debug-panel button:hover { background: #fff; }
.debug-panel button.on { background: var(--ink); color: #fff; border-color: transparent; }
.dbg-stats {
  margin-top: 4px; padding-top: 8px;
  border-top: 1px solid rgba(44,27,70,.12);
  font-family: ui-monospace, monospace; font-size: 10px; opacity: .6;
}
body[data-state="thinking"] .debug-panel {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  color: #f0e6ff;
}
body[data-state="thinking"] .debug-panel button {
  background: rgba(255,255,255,.12); color: #f0e6ff; border-color: rgba(255,255,255,.2);
}
body[data-state="thinking"] .debug-panel button.on { background: #f0e6ff; color: #2c1b46; }

@media (max-width: 720px) { .debug-panel { display: none; } }