:root {
  --bg: #060507;
  --ink: #efe9e1;
  --ink-soft: #a39b92;
  --ink-faint: #8a827a;
  --line: rgba(239, 233, 225, .13);
  --surface: rgba(24, 21, 23, .72);
  --mine: rgba(239, 233, 225, .09);
  --ember: #ff7a3d;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --dock: 150px;
  --bar: 92px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#orb { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* Without WebGL the orb is a soft shape that still breathes. */
#orb-fallback {
  display: none;
  position: fixed;
  left: 50%;
  top: 44%;
  width: 240px;
  height: 240px;
  margin: -120px;
  background: radial-gradient(circle at 42% 38%, var(--orb-c, #ffd9c7), var(--orb-b, #9d6bff) 42%, var(--orb-a, #3d5cff) 74%);
  filter: blur(14px);
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  animation: morph 9s ease-in-out infinite alternate;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}
.no-webgl #orb { display: none; }
.no-webgl #orb-fallback { display: block; }
.no-webgl.docked #orb-fallback { transform: translateY(calc(-44vh + 58px)) scale(.3); }
@keyframes morph {
  to { border-radius: 58% 42% 44% 56% / 44% 58% 42% 56%; transform: rotate(40deg); }
}

button, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

.icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--ink-soft);
  transition: color .2s, background .2s;
}
.icon:hover:not(:disabled) { color: var(--ink); background: var(--mine); }

#menu { position: fixed; z-index: 4; top: max(10px, env(safe-area-inset-top)); left: 10px; }

#stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

#identity {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(44% + min(25vw, 25vh, 180px));
  text-align: center;
  transition: top .9s cubic-bezier(.2, .8, .2, 1);
}
.docked #identity { top: calc(var(--dock) - 42px); }

h1 {
  margin: 0;
  font: 700 21px/1.25 var(--mono);
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
}
#log {
  position: absolute;
  inset: var(--dock) 0 var(--bar);
  overflow-y: auto;
  padding: 18px max(16px, calc(50% - 320px)) 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18px);
  mask-image: linear-gradient(to bottom, transparent, #000 18px);
  visibility: hidden;
}
.docked #log { visibility: visible; }
#log::-webkit-scrollbar, #sessions::-webkit-scrollbar { display: none; }

.msg {
  max-width: min(82%, 520px);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: rise .28s ease-out;
}
.msg.prime { align-self: flex-start; padding: 2px 0; }
.msg.prime + .msg.you, .msg.you + .msg.prime { margin-top: 12px; }
.msg.you {
  align-self: flex-end;
  padding: 7px 14px;
  background: var(--mine);
  border-radius: 18px 18px 4px 18px;
}
.msg.typing { color: var(--ink-soft); animation: rise .28s ease-out, breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; } }
.msg.note { align-self: center; font-size: 13px; color: var(--ink-soft); }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } }

#bar {
  position: fixed;
  z-index: 2;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(640px, calc(100% - 32px));
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 4px 4px 4px 20px;
  background: var(--surface);
  border-radius: 26px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: background .2s;
}
#bar:focus-within { background: rgba(38, 34, 37, .82); }

#input {
  flex: 1;
  min-width: 0;
  max-height: 132px;
  padding: 10px 0;
  background: none;
  border: 0;
  resize: none;
  outline: none;
  line-height: 24px;
}
#input::placeholder { color: var(--ink-faint); }
#send { flex: none; color: var(--bg); background: var(--ink); width: 40px; height: 40px; margin: 2px; transition: opacity .2s, transform .2s, background .2s, color .2s; }
#send:hover:not(:disabled) { background: #fff; color: var(--bg); transform: scale(1.05); }
#send:disabled { opacity: .18; cursor: default; }
#send.recording { background: #e11d48; color: #fff; animation: mic-pulse 1s infinite alternate ease-in-out; }
@keyframes mic-pulse { from { transform: scale(1); } to { transform: scale(1.12); } }

#drawer {
  position: fixed;
  z-index: 3;
  inset: 0 auto 0 0;
  width: min(300px, 84vw);
  padding: 66px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #0d0b0d;
  animation: slide .22s ease-out;
}
#drawer[hidden] { display: none; }
@keyframes slide { from { transform: translateX(-100%); } }

#new-chat {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  text-align: left;
  background: var(--mine);
  border: 0;
  border-radius: 12px;
}
#new-chat:hover { background: rgba(239, 233, 225, .15); }

#install {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 12px;
  color: var(--ink-soft);
}
#install:hover { background: var(--mine); color: var(--ink); }
#install[hidden], #install-go[hidden], #install-panel[hidden] { display: none; }
#install-panel {
  position: fixed;
  z-index: 6;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(340px, calc(100vw - 32px));
  padding: 18px;
  background: #151215;
  border-radius: 16px;
  overflow-wrap: anywhere;
}
#install-panel p { margin: 0 0 14px; }
#install-panel button { display: block; width: 100%; min-height: 44px; margin-top: 6px; border: 0; border-radius: 12px; }
#install-go { background: var(--ink); color: var(--bg); font-weight: 600; }
#install-go:disabled { opacity: .35; cursor: default; }
#install-later { background: none; color: var(--ink-soft); }
#install-later:hover { color: var(--ink); }
#sessions { flex: 1; overflow-y: auto; margin: 0; padding: 0; list-style: none; scrollbar-width: none; }
#sessions li { border-radius: 10px; }
#sessions li.current, #sessions li:hover { background: rgba(239, 233, 225, .05); }
.row { display: flex; align-items: center; }
.row .open {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 4px 0 14px;
  background: none;
  border: 0;
  text-align: left;
  font-size: 14px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
li.current .row .open, .row .open:hover { color: var(--ink); }

.confirm { padding: 4px 14px 12px; font-size: 13px; color: var(--ink-soft); }
.confirm p { margin: 0 0 8px; }
.confirm button {
  display: block;
  width: 100%;
  min-height: 36px;
  margin-top: 4px;
  padding: 0 10px;
  text-align: left;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
}
.confirm button:hover { background: var(--mine); }
.confirm .cancel { border-color: transparent; color: var(--ink-soft); }

@media (max-width: 520px) {
  :root { --dock: 140px; }
  h1 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  #orb-fallback { animation: none; }
}