:root {
  color-scheme: dark;
  --bg: #071019;
  --surface: #0d1b27;
  --surface-raised: #122534;
  --surface-soft: rgba(16, 35, 49, .86);
  --line: rgba(154, 202, 227, .14);
  --line-strong: rgba(117, 204, 239, .28);
  --text: #e8f2f7;
  --muted: #8ea5b3;
  --muted-2: #657d8c;
  --cyan: #62c8e8;
  --cyan-soft: rgba(98, 200, 232, .12);
  --user: #1d607b;
  --danger: #efa7a7;
  --success: #72d4ad;
  --radius-lg: 20px;
  --radius-md: 14px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-family: "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(circle at 78% 8%, rgba(46, 131, 164, .17), transparent 30rem),
    radial-gradient(circle at 8% 88%, rgba(31, 79, 106, .14), transparent 26rem),
    var(--bg);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

@supports (padding: max(0px)) {
  body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
      env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
}

button, textarea, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.shell {
  width: min(1040px, calc(100% - 32px));
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto minmax(280px, 1fr) auto auto;
  position: relative;
}

.topbar {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.identity { display: flex; align-items: center; gap: 14px; }
.eyebrow { margin: 0 0 4px; color: var(--muted-2); font-size: 9px; letter-spacing: .22em; }
h1 { margin: 0; font-size: 23px; font-weight: 620; letter-spacing: .035em; }
h1 span { margin-left: 7px; color: var(--muted); font-size: 14px; font-weight: 430; }

.orb {
  width: 45px;
  height: 45px;
  border: 1px solid rgba(117, 204, 239, .38);
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 0 28px rgba(63, 175, 215, .14), inset 0 0 15px rgba(63, 175, 215, .1);
}
.orb span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #e4f8ff, #70c8e9 44%, #225f78 78%);
  box-shadow: 0 0 13px rgba(98, 200, 232, .74);
}

.status-wrap {
  max-width: min(48vw, 520px);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #d6ad65; box-shadow: 0 0 9px currentColor; }
.status-dot.online { background: var(--success); }
.status-dot.error { background: #e68585; }

.messages {
  min-height: 0;
  padding: 28px 3px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 19px;
  scrollbar-width: thin;
  scrollbar-color: #21445a transparent;
}

.message { display: flex; flex-direction: column; width: fit-content; max-width: 76%; }
.message.assistant { align-self: flex-start; }
.message.user { align-self: flex-end; align-items: flex-end; }
.message .label { margin: 0 9px 6px; color: var(--muted-2); font-size: 9px; letter-spacing: .15em; }
.assistant .label { color: var(--cyan); }
.bubble {
  width: fit-content;
  max-width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 5px 18px 18px 18px;
  background: linear-gradient(145deg, #112534, #0e202d);
  line-height: 1.72;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .15);
}
.bubble-text:empty { display: none; }
.message-attachment {
  width: min(310px, 100%);
  min-width: min(220px, 100%);
  margin-top: 11px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(206, 239, 249, .2);
  border-radius: 12px;
  background: rgba(6, 20, 30, .22);
}
.message-attachment-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #d4f3fb;
  background: rgba(98, 200, 232, .16);
  font-size: 9px;
  letter-spacing: .08em;
}
.message-attachment-detail { min-width: 0; display: flex; flex-direction: column; }
.message-attachment-detail strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.message-attachment-detail small { margin-top: 3px; color: rgba(225, 241, 247, .66); font-size: 9px; }
.user .bubble {
  border-color: rgba(119, 206, 238, .16);
  border-radius: 18px 5px 18px 18px;
  background: linear-gradient(145deg, #226985, #1a526c);
}
.pending .bubble { color: var(--muted); }

.speech-replay {
  align-self: flex-start;
  margin: 5px 8px 0;
  padding: 4px 9px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 10px;
}
.speech-replay:hover { color: var(--cyan); background: var(--cyan-soft); }

.interaction-dock {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(10, 23, 33, .9);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .28);
  backdrop-filter: blur(20px);
  overflow: hidden;
}

.mode-rail {
  min-height: 39px;
  padding: 6px 11px 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
}
.rail-spacer { flex: 1; }
.mode-chip { cursor: pointer; }
.mode-chip input { position: absolute; opacity: 0; pointer-events: none; }
.mode-chip span, .rate-chip, .rail-action {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--muted);
  background: rgba(255, 255, 255, .025);
}
.mode-chip input:checked + span {
  border-color: var(--line-strong);
  color: #caf0fb;
  background: var(--cyan-soft);
}
.rate-chip select {
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 10px;
}
.voice-status {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-action { border: 0; cursor: pointer; }
.rail-action:not(:disabled) { color: var(--cyan); background: var(--cyan-soft); }
.rail-action:disabled { display: none; }

.composer {
  min-height: 65px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 10px 11px;
}
.composer-main { min-width: 0; }
.composer-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #c9e6f1;
  background: rgba(18, 44, 59, .72);
  cursor: pointer;
  font-size: 23px;
  line-height: 1;
}
.composer-icon:hover { border-color: var(--line-strong); color: var(--cyan); }
#microphone.voice-mode { color: var(--cyan); border-color: var(--line-strong); background: var(--cyan-soft); }

textarea {
  width: 100%;
  min-height: 42px;
  max-height: 150px;
  resize: none;
  border: 1px solid transparent;
  border-radius: 11px;
  outline: 0;
  padding: 9px 11px;
  color: var(--text);
  background: rgba(255, 255, 255, .028);
  line-height: 1.5;
}
textarea:focus { border-color: rgba(98, 200, 232, .16); background: rgba(255, 255, 255, .038); }
textarea::placeholder { color: #647b89; }

.hold-to-talk {
  width: 100%;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: #d8e9f0;
  background: rgba(255, 255, 255, .035);
  cursor: pointer;
  user-select: none;
  touch-action: none;
}
.hold-to-talk.recording { border-color: rgba(98, 200, 232, .46); color: #e9fbff; background: rgba(43, 118, 148, .3); }
.hold-to-talk.cancel { border-color: rgba(232, 126, 126, .42); color: #ffdcdc; background: rgba(119, 39, 45, .42); }

#send {
  min-width: 66px;
  height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(121, 211, 241, .28);
  border-radius: 11px;
  color: #edfaff;
  background: linear-gradient(145deg, #287899, #1d5c77);
  cursor: pointer;
}
#send:disabled, .composer-icon:disabled, .hold-to-talk:disabled { opacity: .42; cursor: wait; }

.attachment-panel {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 17, 25, .62);
}
.attachment-item {
  width: min(310px, 100%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--text);
  text-align: left;
  background: var(--surface-raised);
  cursor: pointer;
}
.attachment-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--cyan);
  background: var(--cyan-soft);
  font-size: 10px;
  letter-spacing: .08em;
}
.attachment-item span:last-child { display: grid; gap: 4px; }
.attachment-item strong { font-size: 13px; }
.attachment-item small { color: var(--muted); font-size: 10px; }

.document-attachments {
  display: flex;
  gap: 7px;
  padding: 9px 12px 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.messages.restoring {
  visibility: hidden;
}
.document-chip {
  flex: 0 0 auto;
  max-width: min(330px, 76vw);
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  color: #cdebf4;
  background: var(--cyan-soft);
  font-size: 10px;
}
.document-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-chip-meta { color: var(--muted); white-space: nowrap; }
.document-chip button {
  width: 21px;
  height: 21px;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: rgba(255, 255, 255, .05);
  cursor: pointer;
}
.document-chip button:hover { color: var(--danger); }
.document-add { border-style: dashed; cursor: pointer; }
.document-add:hover { color: var(--cyan); background: rgba(98, 200, 232, .18); }

footer {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted-2);
  font-size: 9px;
  letter-spacing: .08em;
}
.footer-actions { display: flex; align-items: center; gap: 13px; }
.text-button { border: 0; color: var(--muted); background: none; cursor: pointer; font-size: 10px; }
.text-button:hover { color: var(--cyan); }
#memory-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 3px;
  padding: 0 5px;
  border-radius: 9px;
  color: var(--cyan);
  background: var(--cyan-soft);
}

dialog {
  width: min(720px, calc(100% - 24px));
  max-height: min(760px, calc(100vh - 36px));
  padding: 0;
  border: 1px solid rgba(154, 202, 227, .21);
  border-radius: 20px;
  color: var(--text);
  background: #0d1b27;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .62);
}
dialog::backdrop { background: rgba(2, 7, 12, .8); backdrop-filter: blur(6px); }
.memory-panel { padding: 26px; }
.auth-panel { padding: 26px; }
.memory-header { display: flex; align-items: center; justify-content: space-between; }
.memory-header h2 { margin: 0; font-size: 22px; }
.icon-button {
  width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%;
  color: var(--muted); background: transparent; cursor: pointer; font-size: 23px;
}
.memory-note { color: var(--muted); line-height: 1.6; font-size: 12px; }
.memory-add { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 18px 0; }
.memory-add input, .memory-card textarea {
  border: 1px solid var(--line); border-radius: 11px; outline: 0;
  color: var(--text); background: #08141e; padding: 12px;
}
.memory-add button, .memory-card-actions button, .voice-profile-actions button {
  border: 1px solid var(--line-strong); border-radius: 10px;
  color: var(--text); background: #1d5872; padding: 9px 13px; cursor: pointer;
}
.memory-list, .voice-profile-list { display: grid; gap: 10px; max-height: 400px; overflow-y: auto; padding-right: 4px; }
.memory-card, .voice-profile-card { padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-raised); }
.memory-card textarea { width: 100%; min-height: 66px; resize: vertical; line-height: 1.55; }
.memory-card p { margin: 8px 2px; color: var(--muted); font-size: 10px; }
.memory-card-actions { display: flex; justify-content: flex-end; gap: 8px; }
.memory-card-actions .danger-link { color: var(--danger); background: transparent; border-color: rgba(232, 126, 126, .2); }
.memory-empty { padding: 30px 12px; text-align: center; color: var(--muted); }
.memory-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; color: var(--muted); font-size: 11px; }
.danger-button { border: 0; color: var(--danger); background: transparent; cursor: pointer; }
.auth-form { display: grid; gap: 11px; margin-top: 20px; }
.auth-form > label { color: var(--muted); font-size: 11px; }
.auth-token-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.auth-token-row input {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: 0;
  padding: 12px;
  color: var(--text);
  background: #08141e;
  font-family: ui-monospace, "Cascadia Code", monospace;
}
.auth-token-row input:focus { border-color: var(--line-strong); }
.auth-token-toggle { padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; }
.auth-remember { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.auth-status { min-height: 18px; margin: 0; color: var(--muted); font-size: 11px; }
.auth-status.error { color: var(--danger); }
.auth-submit {
  min-height: 42px;
  border: 1px solid rgba(121, 211, 241, .28);
  border-radius: 11px;
  color: #edfaff;
  background: linear-gradient(145deg, #287899, #1d5c77);
  cursor: pointer;
}
.auth-submit:disabled { opacity: .55; cursor: wait; }
.audition-script {
  margin: 17px 0; padding: 13px 15px; border-left: 2px solid var(--cyan);
  border-radius: 0 11px 11px 0; color: #cee4ed; background: var(--cyan-soft); line-height: 1.7; font-size: 12px;
}
.voice-profile-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; }
.voice-profile-card.selected { border-color: rgba(98, 200, 232, .55); box-shadow: inset 3px 0 0 var(--cyan); }
.voice-profile-card h3 { margin: 0; font-size: 14px; }
.voice-profile-card p { margin: 5px 0; color: #b2c6d0; font-size: 11px; }
.voice-profile-card span { color: var(--muted); font-size: 9px; }
.voice-profile-actions { display: flex; gap: 7px; }
.voice-profile-actions button:last-child { color: var(--cyan); background: transparent; }

[hidden] { display: none !important; }

@media (max-width: 680px) {
  .shell { width: min(100% - 18px, 1040px); }
  .topbar { min-height: 78px; }
  .orb { width: 39px; height: 39px; }
  h1 { font-size: 20px; }
  .status-wrap { max-width: 38vw; }
  #status-text { overflow: hidden; text-overflow: ellipsis; }
  .messages { padding-top: 20px; }
  .message { max-width: 89%; }
  .bubble { padding: 13px 15px; font-size: 14px; }
  .mode-rail { overflow-x: auto; scrollbar-width: none; }
  .mode-rail::-webkit-scrollbar { display: none; }
  .voice-status { display: none; }
  .rail-spacer { min-width: 2px; }
  .rate-chip { flex: 0 0 auto; }
  footer { padding: 12px 2px; align-items: flex-start; gap: 8px; flex-direction: column; }
  footer > span { display: none; }
  .footer-actions { width: 100%; justify-content: center; flex-wrap: wrap; }
  .memory-panel, .auth-panel { padding: 19px; }
  .memory-add, .voice-profile-card { grid-template-columns: 1fr; }
  .voice-profile-actions button { flex: 1; }
}