:root {
  --bg: #0b0d12;
  --panel: #141822;
  --line: #232838;
  --text: #e8ecf4;
  --muted: #8a93a6;
  --me: #2b6cff;
  --him: #1c2230;
  --accent: #36e0a0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.45 -apple-system, "Segoe UI", system-ui, sans-serif;
  display: flex; flex-direction: column;
  max-width: 720px; margin: 0 auto;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.who { display: flex; align-items: center; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.brain { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .08em; }
.brain select {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 8px; font-size: 13px;
}
.tools { display: flex; align-items: center; gap: 10px; }
.iconbtn {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; width: 34px; height: 34px; font-size: 16px; cursor: pointer;
}
.iconbtn:hover { background: var(--him); }

/* memory panel */
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 90vw);
  background: var(--panel); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; z-index: 20;
  transform: translateX(0); transition: transform .25s ease;
}
.panel.hidden { transform: translateX(105%); }
.panelhead { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--line); }
#memList { list-style: none; flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
#memList li {
  background: var(--him); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-size: 14px; display: flex; gap: 8px; align-items: flex-start; justify-content: space-between;
}
#memList li button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; flex: 0 0 auto; }
#memList li button:hover { color: #ff5c72; }
#memForm { display: flex; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line); }
#memForm input {
  flex: 1; background: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 20px; padding: 10px 14px; font-size: 14px; outline: none;
}

/* powers panel */
#powerList { flex: 1; overflow-y: auto; padding: 12px 16px; }
.powergroup { margin-bottom: 18px; }
.powergroup h4 { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px; }
.poweritem {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--him); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 7px; font-size: 14px;
}
.pill { font-size: 10px; font-weight: 600; letter-spacing: .05em; padding: 4px 9px; border-radius: 20px; flex: 0 0 auto; }
.pill.on { background: rgba(54,224,160,.16); color: var(--accent); }
.pill.key { background: rgba(255,176,32,.16); color: #ffb020; }
.pill.soon { background: rgba(138,147,166,.16); color: var(--muted); }

/* face */
.stage { display: flex; flex-direction: column; align-items: center; padding: 22px 0 8px; }
.face { width: 168px; height: 168px; }
.mood { color: var(--muted); font-size: 12px; margin-top: 4px; text-transform: lowercase; letter-spacing: .05em; }

/* mascot face states */
#eyes, #mouth { transform-box: fill-box; transform-origin: center; }
#ring { transition: opacity .3s; transform-box: fill-box; transform-origin: center; }
.face.idle #eyes { animation: blink 4.5s infinite; }
.face.thinking { animation: pulse 1.1s ease-in-out infinite; }
.face.listening #ring { opacity: 1; animation: ringpulse 1.4s ease-in-out infinite; }
.face.talking #mouth { animation: talk .22s ease-in-out infinite alternate; }
@keyframes blink { 0%,94%,100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .6; } }
@keyframes talk { from { transform: scaleY(.6); } to { transform: scaleY(1.5); } }
@keyframes ringpulse { 0%,100% { opacity: .3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.02); } }

/* log */
.log { flex: 1; overflow-y: auto; padding: 10px 16px 4px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; word-wrap: break-word; }
.msg.me { align-self: flex-end; background: var(--me); border-bottom-right-radius: 5px; }
.msg.him { align-self: flex-start; background: var(--him); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.msg .tag { display: block; font-size: 10px; color: var(--muted); margin-top: 5px; text-transform: uppercase; letter-spacing: .06em; }

/* composer */
.composer { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.composer input {
  flex: 1; background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 22px; padding: 12px 16px; font-size: 16px; outline: none;
}
.composer input:focus { border-color: var(--me); }
.mic, .send {
  border: none; border-radius: 50%; width: 46px; height: 46px; font-size: 18px;
  cursor: pointer; flex: 0 0 auto;
}
.mic { background: var(--panel); border: 1px solid var(--line); }
.mic.on { background: #ff3b5c; animation: pulse 1s infinite; }
.send { background: var(--me); color: #fff; }