:root{
  --bg:#06060a;
  --fg:#f5f6fb;
  --muted:rgba(245,246,251,.7);
  --line:rgba(255,255,255,.12);
  --card:rgba(255,255,255,.05);
  --shadow:0 28px 90px rgba(0,0,0,.6);
  --a:#ff9bb7; /* pink */
  --b:#b99bff; /* purple */
  --outline:#3b1b4b; /* dark purple */
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--fg)}

.bg{position:fixed;inset:0;background:
  radial-gradient(900px 600px at 20% 30%, rgba(255,155,183,.10), transparent 60%),
  radial-gradient(900px 600px at 80% 30%, rgba(185,155,255,.10), transparent 60%),
  radial-gradient(900px 600px at 50% 100%, rgba(255,155,183,.07), transparent 60%),
  var(--bg);
}
.wrap{position:relative;max-width:980px;margin:0 auto;padding:18px 14px 50px}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.35);backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:36px;height:36px;border-radius:14px;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 10px 30px rgba(185,155,255,.18);border:2px solid rgba(59,27,75,.55)}
.name{font-weight:1000;letter-spacing:-.02em}
.tag{font-weight:900;font-size:12px;opacity:.7}

.stage{margin-top:14px;border:1px solid var(--line);border-radius:24px;background:var(--card);box-shadow:var(--shadow);min-height:54vh;display:grid;place-items:center;position:relative;overflow:hidden}

.blobby{
  width:min(320px,72vw);
  aspect-ratio:1/1;
  border-radius:999px;
  border:6px solid var(--outline);
  background:
    radial-gradient(circle at 28% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 38%),
    linear-gradient(135deg, var(--a), var(--b));
  box-shadow:0 30px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.35);
  position:relative;
  transform:translateZ(0);
  cursor:pointer;
  transition: transform .12s ease;
}
.blobby:active{transform:scale(.99)}

.face{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:18px}
.eye{width:16px;height:16px;border-radius:999px;background:rgba(0,0,0,.55);transition:transform .05s linear}
.mouth{width:40px;height:20px;border:5px solid rgba(0,0,0,.45);border-top:none;border-left:none;border-right:none;border-radius:0 0 999px 999px;transform:translateY(6px)}

.bubble{position:absolute;top:18px;left:50%;transform:translateX(-50%);max-width:min(640px,92vw);
  background:rgba(0,0,0,.62);border:1px solid var(--line);border-radius:16px;padding:10px 12px;backdrop-filter:blur(10px)}
.bubbleText{font-weight:900;line-height:1.35}

.dock{position:absolute;bottom:16px;left:16px;right:16px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.chip{border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--fg);padding:10px 12px;border-radius:999px;font-weight:1000;cursor:pointer}
.chip:hover{background:rgba(255,255,255,.09)}

.btn{border:1px solid var(--line);background:linear-gradient(135deg, rgba(255,155,183,.18), rgba(185,155,255,.12));color:var(--fg);padding:10px 12px;border-radius:14px;font-weight:1000;cursor:pointer}

/* Inline chat below */
.chatInline{margin-top:14px;border:1px solid var(--line);border-radius:22px;background:rgba(0,0,0,.45);backdrop-filter:blur(12px);box-shadow:var(--shadow);overflow:hidden}
.chatHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-bottom:1px solid rgba(255,255,255,.10)}
.chatTitle{font-weight:1000}
.chatSub{font-weight:900;font-size:12px;opacity:.7}
.msgs{max-height:34vh;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:85%;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);font-weight:900;line-height:1.35;white-space:pre-wrap}
.msg.me{align-self:flex-end;background:rgba(255,155,183,.10)}
.msg.ai{align-self:flex-start;background:rgba(185,155,255,.08)}
.composer{display:flex;gap:10px;padding:12px;border-top:1px solid rgba(255,255,255,.10)}
.input{flex:1;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.35);color:var(--fg);border-radius:14px;padding:12px;font-weight:900;outline:none}


.fruit{position:fixed;z-index:50;font-size:34px;transform:translate(-50%,-50%) scale(.9);opacity:0;filter:drop-shadow(0 12px 24px rgba(0,0,0,.45));pointer-events:none}
.fruit.go{animation:fruitPop .9s ease-out forwards}
@keyframes fruitPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-120%) scale(.85)}}


/* Sleep eyes */
.blobby.sleeping .eye{
  height:6px;
  width:18px;
  border-radius:999px;
  background:rgba(0,0,0,.45);
  transform:translate(0, 0) !important;
}