:root {
  --ink: #1a1d21; --ink2: #4b545e; --ink3: #858e99;
  --line: #e3e8f0; --line2: #edf1f7;
  --bg: #eef2f9; --card: #ffffff; --bg2: #f4f7fb; --bg3: #fafbfe;
  --brand: #2c5fd8; --brand2: #4a7bee; --brandbg: #eef3fd;
  --grn: #1a9e6f; --grnbg: #f1f9f5; --grnline: #cfe9dd;
  --red: #c0392b; --redbg: #fdf4f3; --redline: #f2d6d2;
  --amb: #8a5a00; --ambbg: #fdf8ee; --ambline: #ecdcbd;
  --pur: #534ab7; --purbg: #f3f2fd;
  --sh1: 0 1px 2px rgba(16, 24, 40, .05);
  --sh2: 0 8px 24px -8px rgba(16, 24, 40, .16);
  --r: 12px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
  background:
    radial-gradient(920px 520px at 6% -14%, rgba(88, 130, 236, .26), transparent 64%),
    radial-gradient(780px 460px at 96% -10%, rgba(146, 112, 236, .22), transparent 60%),
    radial-gradient(820px 560px at 46% 112%, rgba(70, 178, 216, .16), transparent 64%),
    linear-gradient(180deg, #f7faff 0%, #e8eefa 100%);
}

/* ── 顶栏已移除，页面只保留对话区 + 输入区 ─────────── */
.spacer { flex: 1 1 auto; }

/* ── 对话卡片：语音播放器 + 消息区共用一个边框 ─────── */
.panel {
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
  margin: 14px 22px 8px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(16, 24, 40, .07);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 20px 44px -30px rgba(16, 24, 40, .38);
  overflow: hidden;                 /* 裁掉子元素直角，保住卡片圆角 */
}

/* 播放器：作为卡片头部，不再独立悬浮 */
.voicebar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  background: rgba(255, 255, 255, .5);
  border-bottom: 1px solid rgba(16, 24, 40, .06);
  transition: background .2s;
}
.vb-avatar { position: relative; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; }
.vb-avatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  background: linear-gradient(145deg, var(--brand2), var(--brand));
}
.vb-ring {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--brand2); opacity: 0; pointer-events: none;
}
.vb-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.vb-name { font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.vb-status { font-size: 11.5px; color: var(--ink3); white-space: nowrap; }
.vb-wave { display: flex; align-items: center; gap: 2.5px; height: 16px; width: 0; overflow: hidden; transition: width .22s; }
.vb-wave i { width: 2.5px; height: 5px; border-radius: 2px; background: var(--brand2); flex: 0 0 auto; }
.vb-btn {
  width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg2); color: var(--ink2); flex: 0 0 auto;
}
.vb-btn:hover { background: var(--bg3); }

.voicebar.speaking { background: rgba(236, 242, 253, .92); cursor: pointer; }
.voicebar.speaking .vb-wave { width: 30px; }
.voicebar.speaking .vb-status { color: var(--brand); }
.voicebar.speaking .vb-ring { opacity: 1; animation: ringpulse 1.5s ease-out infinite; }
.voicebar.speaking .vb-wave i { animation: wave .9s ease-in-out infinite; }
.voicebar.speaking .vb-wave i:nth-child(1) { animation-delay: 0s; }
.voicebar.speaking .vb-wave i:nth-child(2) { animation-delay: .12s; }
.voicebar.speaking .vb-wave i:nth-child(3) { animation-delay: .24s; }
.voicebar.speaking .vb-wave i:nth-child(4) { animation-delay: .36s; }
.voicebar.speaking .vb-wave i:nth-child(5) { animation-delay: .48s; }
@keyframes wave { 0%, 100% { height: 5px; } 50% { height: 15px; } }
@keyframes ringpulse { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.4); opacity: 0; } }

.voicebar.error { background: var(--redbg); }
.voicebar.error .vb-status { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  .voicebar.speaking .vb-ring, .voicebar.speaking .vb-wave i { animation: none; }
}
.model-tag {
  font-size: 12px; color: var(--ink3); font-family: ui-monospace, Menlo, monospace;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw;
}
.model-tag.retry { cursor: pointer; color: var(--red); background: var(--redbg); border-color: var(--redline); }
.model-tag.retry:hover { background: #fbe9e7; }

button {
  font: inherit; cursor: pointer; border-radius: 9px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); padding: 7px 15px; transition: .16s; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px; justify-content: center; white-space: nowrap;
}
button:hover { border-color: #ccd2d9; background: var(--bg3); }
button:active { transform: translateY(.5px); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(44, 95, 216, .25); }
button.primary:hover { background: var(--brand2); border-color: var(--brand2); }
button.ghost { background: transparent; border-color: transparent; color: var(--ink3); }
button.ghost:hover { background: var(--bg2); color: var(--ink2); }
button.ghost.warn:hover { background: var(--redbg); color: var(--red); }
button.sm { padding: 5px 11px; font-size: 13px; border-radius: 8px; }

/* ── 主体 ─────────────────────────────────────────── */
main { flex: 1 1 auto; display: flex; justify-content: center; min-height: 0; }
.shell { width: 100%; max-width: 860px; display: flex; flex-direction: column; min-height: 0; }

.messages {
  flex: 1 1 auto; overflow-y: auto;
  padding: 20px 18px 12px;
  display: flex; flex-direction: column; gap: 16px;
  scrollbar-width: thin; scrollbar-color: #ccd4e0 transparent;
}
.messages::-webkit-scrollbar { width: 8px; }
.messages::-webkit-scrollbar-thumb { background: #ccd4e0; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.messages::-webkit-scrollbar-thumb:hover { background: #b8c2d2; background-clip: padding-box; }

.row { display: flex; flex-direction: column; max-width: 84%; animation: rise .2s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.row.me { align-self: flex-end; align-items: flex-end; }
.row.bot { align-self: flex-start; align-items: flex-start; }
.who { font-size: 11.5px; color: var(--ink3); margin-bottom: 5px; padding: 0 3px; display: flex; align-items: center; gap: 6px; }
.bubble {
  padding: 11px 15px; border-radius: 15px; font-size: 15px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
}
.row.me .bubble {
  background: linear-gradient(160deg, var(--brand2), var(--brand)); color: #fff;
  border-bottom-right-radius: 5px; box-shadow: 0 2px 8px -3px rgba(44, 95, 216, .45);
}
.row.bot .bubble {
  background: #fff; border: 1px solid rgba(16, 24, 40, .06); border-bottom-left-radius: 5px;
  color: var(--ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 20px -12px rgba(16, 24, 40, .22);
}
.row.bot .bubble.typing::after {
  content: ""; display: inline-block; width: 7px; height: 15px; margin-left: 3px; vertical-align: -2px;
  background: var(--brand2); border-radius: 1px; animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.row.bot .bubble.pending { color: var(--ink3); background: repeating-linear-gradient(-45deg, #f8f9fb, #f8f9fb 8px, #f3f5f8 8px, #f3f5f8 16px); border-style: dashed; }

.badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 1px 8px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink3);
}
.badge.kb { background: var(--purbg); border-color: #ddd9f7; color: var(--pur); }
.badge.err { background: var(--redbg); border-color: var(--redline); color: var(--red); }

.actions { display: flex; gap: 8px; margin-top: 7px; padding: 0 3px; }
.iconbtn {
  border: 1px solid var(--line); background: var(--card); color: var(--ink2); border-radius: 8px;
  padding: 3px 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px;
}
.iconbtn:hover { background: var(--bg2); }
.iconbtn.on { color: var(--brand); border-color: #c3d3f2; background: var(--brandbg); }

.empty { margin: auto; text-align: center; color: var(--ink3); font-size: 13.5px; line-height: 1.9; padding: 24px; }
.empty .ico {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 18px; background: var(--card);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; box-shadow: var(--sh1);
}
.empty b { display: block; color: var(--ink2); font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.empty .tips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.empty .tip {
  font-size: 12.5px; background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 13px; color: var(--ink2); cursor: pointer;
}
.empty .tip:hover { border-color: #c3d3f2; color: var(--brand); }

/* ── 输入区 ───────────────────────────────────────── */
.composer { flex: 0 0 auto; padding: 6px 22px 18px; }
.composer-inner {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px;
  box-shadow: var(--sh2); transition: .16s;
}
.composer-inner:focus-within { border-color: #a9c2ea; box-shadow: 0 0 0 3px rgba(44, 95, 216, .09), var(--sh2); }
textarea {
  width: 100%; min-height: 30px; max-height: 180px; resize: none; border: none; outline: none;
  font: inherit; font-size: 15px; line-height: 1.7; padding: 4px 4px; background: transparent; color: var(--ink);
}
textarea::placeholder { color: #a8b0ba; }
.bar { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.mic {
  width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg2); color: var(--ink2); flex: 0 0 auto;
}
.mic:hover { background: var(--bg3); }
.mic.rec { background: var(--red); border-color: var(--red); color: #fff; animation: pulse 1.1s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, .45); } 50% { box-shadow: 0 0 0 7px rgba(192, 57, 43, 0); } }
.send { width: 38px; height: 38px; padding: 0; border-radius: 50%; }

.banner { margin: 0 22px; padding: 9px 13px; border-radius: 9px; font-size: 12.5px; display: none; line-height: 1.6; }
.banner.on { display: block; }
.banner.err { background: var(--redbg); border: 1px solid var(--redline); color: var(--red); }
.banner.notice { background: var(--ambbg); border: 1px solid var(--ambline); color: var(--amb); }

/* ── 访问口令遮罩 ─────────────────────────────────── */
.gate {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(238, 242, 249, .74);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.gate-card {
  width: 320px; max-width: calc(100vw - 40px);
  background: #fff; border: 1px solid rgba(16, 24, 40, .07); border-radius: 20px;
  padding: 30px 26px 22px; text-align: center;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .05), 0 30px 60px -30px rgba(16, 24, 40, .42);
}
.gate-avatar {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block;
  margin: 0 auto 14px; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .08), 0 8px 20px -8px rgba(16, 24, 40, .4);
  background: linear-gradient(145deg, var(--brand2), var(--brand));
}
.gate-title { margin: 0 0 7px; font-size: 17px; font-weight: 650; letter-spacing: -.2px; }
.gate-desc { margin: 0 0 18px; font-size: 13px; color: var(--ink3); line-height: 1.65; }
.gate-input {
  width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px;
  font: inherit; font-size: 14px; background: var(--bg3); outline: none;
  text-align: center; letter-spacing: 1.5px;
}
.gate-input::placeholder { letter-spacing: normal; }
.gate-input:focus { border-color: #a9c2ea; background: #fff; box-shadow: 0 0 0 3px rgba(44, 95, 216, .09); }
.gate-btn { width: 100%; margin-top: 12px; padding: 10px; border-radius: 11px; font-size: 14.5px; }
.gate-err { min-height: 18px; margin-top: 10px; font-size: 12.5px; color: var(--red); }
.gate.shake .gate-card { animation: shake .32s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}

@media (max-width: 640px) {
  .panel { margin: 10px 14px 8px; border-radius: 14px; }
  .voicebar { padding: 10px 13px; }
  .messages { padding: 16px 12px 10px; }
  .composer { padding: 4px 14px 14px; }
  .banner { margin: 0 14px; }
  .row { max-width: 92%; }
}