:root { --bg:#0b1220; --card:#121a2b; --line:#243049; --text:#e8eefc; --mute:#93a0bb; --accent:#ff9800; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font-family: Segoe UI, Arial, sans-serif; }
header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:8px; }
header a { color:var(--accent); text-decoration:none; }
header #backHome { font-weight:700; margin-right:4px; }
main { display:grid; grid-template-columns: 280px 1fr; min-height: calc(100% - 52px); }
aside { padding:14px; border-right:1px solid var(--line); display:grid; align-content:start; gap:8px; }

.avatar {
  width:100%;
  min-height: 340px;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(circle at 40% 20%, #1e3a5f, #0b1220 70%);
  box-shadow: 0 0 0 1px #334155, 0 12px 28px rgba(0,0,0,.4);
  display: grid;
  place-items: end center;
}
.avatar img,
.avatar video {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  background: transparent;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.avatar.avatar-has-photo {
  min-height: 380px;
  background: radial-gradient(circle at 50% 18%, #2a3f5f, #0b1220 72%);
  position: relative;
  place-items: end center;
}
.avatar.avatar-has-photo img {
  width: 100%;
  height: auto;
  min-height: 340px;
  max-height: 420px;
  object-fit: contain;
  object-position: bottom center;
  /* Transparent PNG cutouts stay visible on dark stage */
  filter: none;
  opacity: 1;
  visibility: visible;
}
.avatar.avatar-has-photo img[hidden] {
  display: none !important;
}
.avatar .avi-motion-canvas {
  width: 100%;
  max-height: 420px;
  height: auto;
  display: block;
  object-fit: contain;
  margin: 0 auto;
  background: transparent;
}
.avatar .avi-motion-canvas[hidden] { display: none !important; }
.avatar.avatar-has-photo.talking img,
.avatar.avatar-has-photo.walking img,
.avatar.avatar-has-photo.dancing img {
  /* canvas motion handles animation */
  animation: none;
}
body.net-dark .avatar {
  background: #1a2230;
}
body.net-dark .avatar:not(.avatar-has-photo) img,
body.net-dark .avatar:not(.avatar-has-photo) video {
  filter: brightness(0.6) grayscale(0.4);
}

.motion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.motion button {
  background: #243049;
  color: var(--text);
  font-size: 12px;
  padding: 8px;
}
.motion button.on {
  background: var(--accent);
  color: #1a1208;
}

label, .hint { font-size:12px; color:var(--mute); display:grid; gap:4px; }
select, input, button, a { font:inherit; }
select, input { background:#0b1220; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:8px; }
button, .row a { background:var(--accent); color:#1a1208; border:0; border-radius:10px; padding:8px 10px; font-weight:800; cursor:pointer; text-decoration:none; }
button.on { box-shadow: 0 0 0 2px #fff3; }
section { padding:14px; display:flex; flex-direction:column; min-width:0; }
.tabs { display:flex; gap:8px; margin-bottom:10px; }
.tabs button { background:#243049; color:var(--text); }
.tabs button.on { background:var(--accent); color:#1a1208; }
.log { flex:1; min-height: 280px; overflow:auto; display:grid; gap:8px; align-content:start; }
.msg { padding:10px 12px; border-radius:12px; white-space:pre-wrap; }
.msg.you { background:#334155; }
.msg.ai { background:#1e3a4c; }
form#chat { display:flex; gap:8px; margin-top:10px; }
form#chat input { flex:1; }
#stage { width:100%; max-width:480px; background:#0b1220; border:1px dashed var(--line); border-radius:12px; margin:10px 0; }
.row { display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width: 800px) {
  main { grid-template-columns: 1fr; }
  .avatar { min-height: 260px; }
}