:root {
  --accent: #7fd4ff;
  --panel: rgba(18, 20, 28, 0.72);
  --panel-strong: rgba(18, 20, 28, 0.9);
  --text: #eef2f8;
  --muted: #9aa6b8;
  --danger: #ff6b81;
  --ok: #58e08a;
  /* The avatar is drawn centred in the window, so the chrome has to be too.
     Pinning to the window edges falls apart the moment the window is wider
     than she is. Everything below hangs off this one column. */
  --col: min(440px, calc(100vw - 24px));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: transparent;          /* the whole point of the app */
  overflow: hidden;
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  color: var(--text);
  user-select: none;
  cursor: default;
}

/* ---- window chrome (only visible on hover) ---- */

#drag-strip {
  position: fixed;
  top: 0;
  left: 50%;
  width: var(--col);
  transform: translateX(-50%);
  height: 34px;
  -webkit-app-region: drag;
  z-index: 5;
}

#chrome {
  position: fixed;
  top: 6px;
  left: 50%;
  /* right edge of the column: shift left by half a column, then by our own width */
  transform: translateX(calc(var(--col) / 2 - 100%));
  display: flex;
  gap: 4px;
  z-index: 10;
  opacity: 0;
  transition: opacity .18s ease;
  -webkit-app-region: no-drag;
}
body:hover #chrome,
body.near #chrome,
body.reveal #chrome { opacity: 1; }

.chip {
  width: 24px; height: 24px;
  border: 0;
  border-radius: 7px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.chip:hover { background: var(--panel-strong); }

/* ---- avatar ---- */

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

/* ---- model picker ---- */

#picker {
  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, calc(100% - 28px));
  max-height: 60%;
  overflow-y: auto;
  padding: 10px;
  border-radius: 14px;
  background: var(--panel-strong);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 12;
}
#picker.hidden { display: none; }
.pick-head {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 4px 6px 8px;
}
.pick-foot {
  font-size: 10.5px; color: var(--muted); padding: 9px 6px 3px;
  border-top: 1px solid rgba(255,255,255,.07); margin-top: 6px;
}
.pick-group {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding: 8px 6px 4px;
}
.pick-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 9px; border-radius: 9px; cursor: pointer;
  font-size: 13px; color: var(--text);
}
.pick-item:hover { background: rgba(255,255,255,.07); }
.pick-item.on { background: var(--accent); color: #0b1017; }
.pick-item .tick { width: 12px; font-size: 11px; }
.pick-item.dim { color: var(--muted); cursor: default; }
.pick-item.dim:hover { background: none; }

/* ---- speech bubble ---- */

#bubble {
  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 28px));
  max-height: 34%;
  overflow-y: auto;
  padding: 10px 13px;
  border-radius: 14px;
  background: var(--panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  z-index: 8;
  user-select: text;
  transition: opacity .2s ease, transform .2s ease;
}
#bubble.hidden { opacity: 0; transform: translateX(-50%) translateY(-6px); pointer-events: none; }
#bubble::-webkit-scrollbar { width: 5px; }
#bubble::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }

/* ---- notices / errors ---- */

#notice {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 28px));
  bottom: 84px;
  padding: 9px 12px;
  border-radius: 11px;
  background: rgba(60, 18, 26, .86);
  border: 1px solid rgba(255, 107, 129, .35);
  color: #ffdfe4;
  font-size: 12px;
  z-index: 9;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  user-select: text;
}
#notice.hidden { display: none; }

/* ---- input bar ---- */

#bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(440px, calc(100% - 24px));
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  z-index: 10;
  -webkit-app-region: no-drag;
  opacity: .35;
  transition: opacity .18s ease;
}
body:hover #bar, body.near #bar, #bar:focus-within, body.reveal #bar { opacity: 1; }

#input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  padding: 5px 4px;
  user-select: text;
}
#input::placeholder { color: var(--muted); }

#bar button {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Icons inherit button colour, so hover/active states just work. */
button svg { display: block; pointer-events: none; }

/* `#bar button { display: inline-flex }` outranks the browser's built-in
   [hidden] rule, so hiding a button needs to be stated at this specificity
   or the attribute silently does nothing. */
#bar button[hidden],
#chrome button[hidden] { display: none !important; }
#bar button:hover { background: rgba(255,255,255,.14); }
#bar button:disabled { opacity: .4; cursor: default; }
#btn-mic.recording {
  background: var(--danger);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .55; } }

/* ---- status ---- */

#status {
  position: fixed;
  left: 50%;
  transform: translateX(calc(var(--col) / -2));
  bottom: 9px;
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  color: var(--muted);
  z-index: 10;
  opacity: 0;
  transition: opacity .18s ease;
}
body:hover #status, body.near #status, body.reveal #status { opacity: 1; }
/* The pill already names the model, so it is the obvious place to click to
   change it. The chip in the corner does the same thing but is easy to miss. */
#status { cursor: pointer; padding: 3px 7px; border-radius: 7px; margin-left: -7px; }
#status:hover { background: var(--panel); color: var(--text); }
#status:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }

#dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
}
#dot.ok { background: var(--ok); }
#dot.bad { background: var(--danger); }
#dot.busy { background: var(--accent); animation: pulse .9s ease-in-out infinite; }