:root {
  color-scheme: dark;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --bg: #090d12;
  --panel: rgba(15, 21, 29, .88);
  --panel-strong: #121923;
  --line: rgba(255, 255, 255, .08);
  --muted: #82909f;
  --text: #edf4f2;
  --jade: #7ee2c3;
  --jade-strong: #4dcaa4;
  --jade-faint: rgba(90, 213, 175, .12);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 10%, rgba(55, 132, 114, .15), transparent 34rem),
    linear-gradient(145deg, #080c11 0%, #0b1118 55%, #07110f 100%);
}

button, textarea, input { font: inherit; }
button { color: inherit; }

.ambient {
  position: fixed;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .12;
  pointer-events: none;
}
.ambient-one { top: -10rem; right: 14%; background: #5ee0bb; }
.ambient-two { bottom: -12rem; left: 8%; background: #227b72; }

.shell {
  position: relative;
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  width: min(94vw, 82rem);
  height: min(92vh, 56rem);
  margin: 4vh auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.6rem;
  background: rgba(8, 12, 17, .72);
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, .42);
  backdrop-filter: blur(24px);
}

.sidebar {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
  border-right: 1px solid var(--line);
  background: rgba(14, 20, 27, .7);
}

.brand { display: flex; align-items: center; gap: .8rem; padding: .25rem .4rem 1.7rem; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border: 1px solid rgba(126, 226, 195, .35);
  border-radius: .9rem;
  color: #b8f5e2;
  background: linear-gradient(145deg, rgba(89, 212, 174, .2), rgba(36, 95, 83, .1));
  box-shadow: inset 0 0 1.2rem rgba(126, 226, 195, .08);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 1.35rem;
}
.brand-mark.large { width: 3.5rem; height: 3.5rem; margin-bottom: 1.4rem; font-size: 1.75rem; }
.brand h1 { margin: 0; font-family: "STKaiti", "KaiTi", serif; font-size: 1.2rem; letter-spacing: .08em; }
.brand p { margin: .18rem 0 0; color: var(--muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }

.agents { display: grid; gap: .55rem; }
.agent {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  padding: .85rem;
  border: 1px solid transparent;
  border-radius: .9rem;
  text-align: left;
  background: transparent;
}
.agent.active { border-color: rgba(126, 226, 195, .16); background: var(--jade-faint); }
.agent:disabled { opacity: .48; }
.agent strong, .agent small { display: block; }
.agent strong { font-size: .9rem; font-weight: 600; }
.agent small { margin-top: .2rem; color: var(--muted); font-size: .7rem; }
.agent-orb { width: .65rem; height: .65rem; border-radius: 50%; background: #586573; }
.agent-orb.gpt { background: var(--jade); box-shadow: 0 0 .8rem rgba(126, 226, 195, .65); }

.sidebar-foot {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: auto;
  padding: .8rem .45rem 0;
  color: var(--muted);
  font-size: .7rem;
}
.status-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--jade-strong); }
.text-button { margin-left: auto; padding: .25rem; border: 0; color: var(--muted); background: none; cursor: pointer; }
.text-button:hover { color: var(--text); }

.conversation { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 1.45rem 1.8rem; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 .25rem; color: var(--jade); font-size: .65rem; font-weight: 700; letter-spacing: .18em; }
.topbar h2 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.stream-badge { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .7rem; }
.stream-badge span { width: .4rem; height: .4rem; border-radius: 50%; background: var(--jade); box-shadow: 0 0 .6rem rgba(126, 226, 195, .7); }

.messages { overflow-y: auto; padding: 2rem clamp(1.25rem, 5vw, 5rem); scrollbar-color: #2f3d45 transparent; }
.empty-state { display: grid; place-items: center; min-height: 100%; padding: 3rem; text-align: center; color: var(--muted); }
.empty-state.hidden { display: none; }
.empty-glyph { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-bottom: 1rem; border-radius: 50%; color: var(--jade); background: var(--jade-faint); font-family: "STKaiti", "KaiTi", serif; font-size: 2rem; }
.empty-state h3 { margin: 0 0 .6rem; color: var(--text); font-family: "STKaiti", "KaiTi", serif; font-size: 1.45rem; font-weight: 500; }
.empty-state p { max-width: 24rem; margin: 0; line-height: 1.7; font-size: .85rem; }

.message { display: flex; gap: .8rem; max-width: 46rem; margin: 0 auto 1.5rem; }
.message.user { justify-content: flex-end; }
.message-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; margin-top: .2rem; border-radius: .65rem; color: var(--jade); background: var(--jade-faint); font-family: "STKaiti", "KaiTi", serif; font-size: .85rem; }
.message.user .message-avatar { display: none; }
.message-content { min-width: 0; }
.message-name { margin: 0 0 .35rem; color: var(--muted); font-size: .68rem; }
.message-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.72; font-size: .93rem; }
.message.user .message-content { max-width: 78%; padding: .75rem 1rem; border: 1px solid rgba(126, 226, 195, .14); border-radius: 1rem 1rem .25rem 1rem; background: rgba(126, 226, 195, .1); }
.message.user .message-name { display: none; }
.message.streaming .message-text::after { content: ""; display: inline-block; width: .45rem; height: 1em; margin-left: .2rem; vertical-align: -.15rem; background: var(--jade); animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

.composer { position: relative; margin: 0 clamp(1.1rem, 4vw, 4rem) 1.5rem; padding: .6rem 3.4rem 1.6rem 1rem; border: 1px solid rgba(255, 255, 255, .11); border-radius: 1rem; background: rgba(18, 25, 35, .92); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .2); }
.composer:focus-within { border-color: rgba(126, 226, 195, .4); box-shadow: 0 0 0 3px rgba(126, 226, 195, .06); }
.composer textarea { display: block; width: 100%; max-height: 10rem; resize: none; border: 0; outline: 0; color: var(--text); background: transparent; line-height: 1.5; }
.composer textarea::placeholder { color: #65717f; }
.composer-note { position: absolute; bottom: .45rem; left: 1rem; margin: 0; color: #5e6b79; font-size: .62rem; }
.send-button, .stop-button { position: absolute; right: .65rem; bottom: .65rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: .72rem; background: var(--jade); cursor: pointer; }
.send-button:disabled { opacity: .35; cursor: default; }
.send-button svg { width: 1.25rem; fill: #082019; }
.stop-button { background: rgba(126, 226, 195, .15); }
.stop-button span { width: .7rem; height: .7rem; border-radius: .12rem; background: var(--jade); }
.hidden { display: none !important; }

.login-panel { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 1.25rem; background: rgba(5, 9, 13, .76); backdrop-filter: blur(22px); }
.login-panel.hidden { display: none; }
.login-card { width: min(100%, 24rem); padding: 2.1rem; border: 1px solid var(--line); border-radius: 1.4rem; background: rgba(16, 23, 31, .96); box-shadow: 0 2rem 7rem rgba(0, 0, 0, .5); }
.login-card h2 { margin: 0; font-family: "STKaiti", "KaiTi", serif; font-size: 1.7rem; font-weight: 500; }
.login-copy { margin: .6rem 0 1.6rem; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.login-card label { display: block; margin-bottom: .45rem; color: #a9b4bd; font-size: .72rem; }
.login-card input { width: 100%; padding: .8rem .9rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: .7rem; outline: 0; color: var(--text); background: #0b1118; }
.login-card input:focus { border-color: rgba(126, 226, 195, .5); }
.login-card > button { width: 100%; margin-top: .8rem; padding: .8rem; border: 0; border-radius: .7rem; color: #071b16; background: var(--jade); font-weight: 700; cursor: pointer; }
.login-card > button:disabled { opacity: .55; }
.login-error { min-height: 1rem; margin: .55rem 0 0; color: #f1a7a7; font-size: .72rem; }

@media (max-width: 720px) {
  body { overflow: hidden; }
  .shell { grid-template-columns: 1fr; width: 100vw; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .sidebar { display: none; }
  .topbar { padding: 1rem 1.1rem; }
  .messages { padding: 1.3rem 1rem; }
  .composer { margin: 0 .75rem .75rem; }
  .stream-badge { font-size: 0; }
}