:root {
  color-scheme: dark;
  --bg: #10131a;
  --card: #181d27;
  --card-soft: #202632;
  --line: #2d3544;
  --text: #f3f6fb;
  --muted: #929cad;
  --accent: #8be28b;
  --accent-dark: #183d2b;
  --danger: #ff8f8f;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.vision-panel { padding: 22px; margin-bottom: 18px; }
.vision-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vision-controls select { max-width: 260px; }
.vision-media { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.vision-media figure { margin: 12px 0; flex: 1; min-width: 180px; max-width: 340px; }
.vision-media video, .vision-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #0c0f14; border-radius: 12px; }
.vision-media figcaption { color: var(--muted); font-size: 12px; margin-top: 5px; }
.robot { width: 150px; height: 170px; position: relative; margin: 20px; }
.robot-head { width: 110px; height: 80px; position: absolute; left: 20px; top: 8px; border: 4px solid #8be28b; border-radius: 25px; background: #244736; transform-origin: center bottom; }
.robot-head i { position: absolute; top: 24px; left: 24px; width: 12px; height: 14px; border-radius: 50%; background: #c4f7c1; }
.robot-head i + i { left: 66px; }
.robot-head span { position: absolute; width: 32px; height: 5px; background: #8be28b; left: 35px; top: 54px; border-radius: 4px; }
.robot-body { width: 82px; height: 64px; background: #244736; border: 4px solid #8be28b; border-radius: 15px; position: absolute; top: 94px; left: 34px; }
.robot-arm { width: 20px; height: 55px; position: absolute; top: 98px; right: 10px; background: #8be28b; border-radius: 12px; transform-origin: center 10px; }
.action-nod .robot-head { animation: robot-nod 700ms ease; }
.action-shake_head .robot-head { animation: robot-shake 700ms ease; }
.action-wave .robot-arm { animation: robot-wave 700ms ease; }
.action-look_left .robot-head { animation: robot-left 700ms ease; }
.action-look_right .robot-head { animation: robot-right 700ms ease; }
@keyframes robot-nod { 25%, 70% { transform: rotateX(25deg) translateY(8px); } 45% { transform: none; } }
@keyframes robot-shake { 20%, 65% { transform: translateX(-10px) rotate(-8deg); } 40%, 80% { transform: translateX(10px) rotate(8deg); } }
@keyframes robot-wave { 20%, 65% { transform: rotate(-140deg); } 40%, 80% { transform: rotate(-105deg); } }
@keyframes robot-left { 20%, 80% { transform: translateX(-12px) rotateY(-25deg); } }
@keyframes robot-right { 20%, 80% { transform: translateX(12px) rotateY(25deg); } }
body { margin: 0; background: radial-gradient(circle at 80% -10%, #243249 0, transparent 42%), var(--bg); color: var(--text); }
.shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 42px 0 28px; }
.hero { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 28px; }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .18em; margin: 0 0 8px; }
h1, h2 { margin: 0; letter-spacing: -.03em; }
h1 { font-size: clamp(32px, 5vw, 54px); line-height: 1.05; }
h2 { font-size: 20px; }
.subtitle { color: var(--muted); margin: 14px 0 0; font-size: 15px; }
.status { border: 1px solid var(--line); border-radius: 99px; color: var(--muted); padding: 9px 14px; white-space: nowrap; font-size: 13px; }
.status.online { color: var(--accent); border-color: #3d7651; background: #14271f; }
.status.busy { color: #ffd58a; border-color: #795f2f; background: #2a2315; }
.card { background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 50px #0003; }
.setup { display: flex; align-items: end; gap: 14px; padding: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.field { display: grid; gap: 7px; min-width: 240px; flex: 1; }
.field.wide { flex: 1.2; }
label, dt { color: var(--muted); font-size: 12px; }
input, select { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--card-soft); color: var(--text); padding: 11px 12px; font-size: 14px; outline: none; }
input:focus, select:focus { border-color: var(--accent); }
.actions { display: flex; gap: 8px; }
button { border: 0; border-radius: 10px; padding: 11px 15px; font-weight: 700; cursor: pointer; transition: .15s ease; }
button:disabled { cursor: not-allowed; opacity: .4; }
button:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.08); }
.primary { background: var(--accent); color: #102218; }
.ghost { background: var(--card-soft); color: var(--text); border: 1px solid var(--line); }
.small { padding: 9px 12px; font-size: 12px; }
.grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .7fr); gap: 18px; }
.conversation, .diagnostics { padding: 22px; min-height: 560px; }
.section-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 22px; }
.meter { width: 100px; height: 8px; overflow: hidden; border-radius: 99px; background: var(--card-soft); }
.meter span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .08s linear; }
.voice-stage { min-height: 390px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid #293346; border-radius: 16px; background: radial-gradient(circle at 50% 42%, #263247 0, #1b222e 38%, #151a23 78%); position: relative; overflow: hidden; }
.voice-stage::before { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; border: 1px solid #ffffff08; box-shadow: 0 0 0 34px #ffffff03, 0 0 0 68px #ffffff02; }
.voice-orb-wrap { position: relative; width: 190px; height: 190px; display: grid; place-items: center; }
.avatar-visual { position: absolute; z-index: 2; width: 190px; height: 190px; display: grid; place-items: center; border-radius: 50%; background: #172131; box-shadow: 0 0 0 8px #8be28b18, 0 0 38px #8be28b38; overflow: hidden; }
.avatar-svg { display: none; }
.emoji-ear { fill: #fffdf7; stroke: #252b34; stroke-width: 5; stroke-linejoin: round; }
.emoji-ear-inner { fill: #ffd6d0; stroke: #252b34; stroke-width: 3; stroke-linejoin: round; }
.emoji-face { fill: #fffdf7; stroke: #252b34; stroke-width: 5; }
.emoji-eye, .emoji-pupil { fill: #252b34; }
.emoji-pupil { fill: #fffdf7; }
.emoji-mouth, .expr-happy path, .expr-blink path, .expr-curious path, .expr-concerned path, .expr-sweat path { fill: none; stroke: #252b34; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.emoji-speak { fill: #252b34; stroke: #252b34; }
.expr-happy, .expr-blink, .expr-curious, .expr-concerned, .expr-sweat, .emoji-neutral, .emoji-frown, .emoji-speak { display: none; }
.emoji-smile, .expr-open { display: block; }
.avatar-image { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: 300% 300%; background-position: 0% 0%; image-rendering: auto; opacity: 0; transition: opacity .12s ease; }
.avatar-image.loaded { opacity: 1; }
.voice-stage.has-avatar .voice-orb { opacity: .18; }
/* The large expanding rings combined with facial-frame changes caused
   motion discomfort during long conversations. Keep a calm static halo when
   the Product Image avatar is active; the voice state remains visible via
   color and text without a distracting pulse. */
.voice-stage.has-avatar .voice-orb-wrap::before,
.voice-stage.has-avatar .voice-orb-wrap::after { animation: none !important; transform: scale(1); opacity: .28; }
.voice-orb-wrap::before, .voice-orb-wrap::after { content: ""; position: absolute; z-index: 1; width: 186px; height: 186px; border: 2px solid #8be28b30; border-radius: 50%; opacity: 0; pointer-events: none; transform-origin: center; will-change: transform, opacity; }
.voice-stage.listening .voice-orb-wrap::before, .voice-stage.user-speaking .voice-orb-wrap::before { animation: avatar-ring 1.25s ease-out infinite; border-color: #8be28b70; }
.voice-stage.speaking .voice-orb-wrap::before, .voice-stage.happy .voice-orb-wrap::before { animation: avatar-ring .75s ease-out infinite; border-color: #ffd58a80; }
.voice-stage.thinking .voice-orb-wrap::before, .voice-stage.curious .voice-orb-wrap::before { animation: avatar-ring 1.1s ease-out infinite; border-color: #9eb8ff70; }
.voice-stage.concerned .voice-orb-wrap::before, .voice-stage.interrupting .voice-orb-wrap::before { animation: avatar-ring .55s ease-out infinite; border-color: #ff9d9080; }
.voice-stage.speaking .voice-orb-wrap::after, .voice-stage.happy .voice-orb-wrap::after { animation: avatar-ring .75s .35s ease-out infinite; border-color: #ffd58a55; }
.voice-orb { width: 112px; height: 112px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c4f7c1 0, #72d982 38%, #2c7854 100%); box-shadow: 0 0 0 12px #8be28b14, 0 0 55px #8be28b3d; transition: .25s ease; }
.orb-core { width: 28px; height: 28px; border-radius: 50%; background: #e8ffe5; box-shadow: 0 0 18px #efffec; }
.voice-stage.idle .voice-orb, .voice-stage.offline .voice-orb { filter: grayscale(.75); opacity: .55; box-shadow: 0 0 0 12px #ffffff08; }
.voice-stage.listening .voice-orb { animation: orb-listen 1.25s ease-in-out infinite; }
.voice-stage.speaking .voice-orb { background: radial-gradient(circle at 35% 30%, #ffe8aa 0, #f5b64c 40%, #8c5724 100%); box-shadow: 0 0 0 12px #ffd58a18, 0 0 60px #ffd58a45; animation: orb-speak .8s ease-in-out infinite; }
.voice-stage.thinking .voice-orb { background: radial-gradient(circle at 35% 30%, #c6d6ff 0, #7c9ae8 42%, #354c8e 100%); box-shadow: 0 0 0 12px #9eb8ff18, 0 0 60px #9eb8ff3d; animation: orb-think 1s linear infinite; }
.voice-stage.interrupting .voice-orb { background: radial-gradient(circle at 35% 30%, #ffc7bd 0, #f07d6b 42%, #87362e 100%); box-shadow: 0 0 0 12px #ff9d9018, 0 0 60px #ff897a45; animation: orb-interrupt .45s ease-in-out infinite alternate; }
.voice-stage.speaking .avatar-image { filter: saturate(1.08) brightness(1.04); }
.voice-stage.happy .avatar-image { filter: saturate(1.16) brightness(1.05); }
.voice-stage.concerned .avatar-image, .voice-stage.interrupting .avatar-image { filter: saturate(.92); }
.voice-stage.ready .expr-open, .voice-stage.listening .expr-open, .voice-stage.user-speaking .expr-open { animation: emoji-blink 5.5s ease-in-out infinite; transform-origin: center; }
.voice-stage.happy .expr-open, .voice-stage.happy .emoji-smile { display: none; }
.voice-stage.happy .expr-happy, .voice-stage.happy .emoji-smile { display: block; }
.voice-stage.curious .expr-open, .voice-stage.thinking .expr-open { display: none; }
.voice-stage.curious .expr-curious, .voice-stage.thinking .expr-curious { display: block; }
.voice-stage.curious .emoji-smile, .voice-stage.thinking .emoji-neutral { display: block; }
.voice-stage.concerned .expr-open { display: none; }
.voice-stage.concerned .expr-concerned, .voice-stage.concerned .emoji-frown { display: block; }
.voice-stage.interrupting .expr-sweat { display: block; }
.voice-stage.speaking .emoji-smile, .voice-stage.speaking .emoji-neutral { display: none; }
.voice-stage.speaking .emoji-speak { display: block; animation: emoji-talk .24s ease-in-out infinite alternate; transform-origin: center; }
.voice-stage.listening .avatar-visual, .voice-stage.user-speaking .avatar-visual, .voice-stage.speaking .avatar-visual, .voice-stage.happy .avatar-visual, .voice-stage.thinking .avatar-visual, .voice-stage.curious .avatar-visual, .voice-stage.concerned .avatar-visual, .voice-stage.interrupting .avatar-visual { animation: none; transform: none; }
.voice-state, .voice-hint, .waveform, .voice-meta { position: relative; }
.voice-state { margin-top: 18px; font-size: 23px; font-weight: 800; letter-spacing: -.03em; }
.voice-hint { margin-top: 8px; color: var(--muted); font-size: 13px; }
.waveform { height: 42px; display: flex; align-items: center; gap: 5px; margin-top: 22px; }
.waveform i { width: 4px; height: 8px; border-radius: 99px; background: #718096; opacity: .55; }
.voice-stage.listening .waveform i, .voice-stage.speaking .waveform i, .voice-stage.thinking .waveform i, .voice-stage.interrupting .waveform i { animation: wave 900ms ease-in-out infinite; background: var(--accent); opacity: .95; }
.voice-stage.speaking .waveform i { background: #ffd58a; }
.voice-stage.thinking .waveform i { background: #9eb8ff; }
.voice-stage.interrupting .waveform i { background: #ff9d90; }
.waveform i:nth-child(2), .waveform i:nth-child(8) { animation-delay: -150ms; }
.waveform i:nth-child(3), .waveform i:nth-child(7) { animation-delay: -300ms; }
.waveform i:nth-child(4), .waveform i:nth-child(6) { animation-delay: -450ms; }
.waveform i:nth-child(5) { animation-delay: -600ms; }
.voice-meta { margin-top: 18px; color: var(--muted); font-size: 12px; }
.voice-meta strong { color: var(--text); margin-left: 5px; }
.hidden-conversation { display: none; }
@keyframes orb-listen { 50% { transform: scale(1.06); box-shadow: 0 0 0 20px #8be28b18, 0 0 70px #8be28b55; } }
@keyframes orb-speak { 50% { transform: scale(1.08); } }
@keyframes orb-think { to { transform: rotate(360deg); } }
@keyframes orb-interrupt { to { transform: scale(1.1); } }
@keyframes avatar-breathe { 0%, 25%, 50%, 75%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(0,-2px,0) scale(1.045); } }
@keyframes avatar-talk { 0%, 100% { transform: translate3d(0,2px,0) scale(.98); } 22% { transform: translate3d(0,-1px,0) scale(1.035); } 50% { transform: translate3d(0,-5px,0) scale(1.09); } 78% { transform: translate3d(0,-1px,0) scale(1.035); } }
@keyframes avatar-happy { 0%, 100% { transform: translate3d(0,1px,0) rotate(-2deg) scale(1); } 25% { transform: translate3d(-1px,-2px,0) rotate(-1deg) scale(1.04); } 50% { transform: translate3d(0,-7px,0) rotate(2deg) scale(1.1); } 75% { transform: translate3d(1px,-2px,0) rotate(1deg) scale(1.04); } }
@keyframes avatar-think { 0%, 100% { transform: translate3d(-2px,0,0) rotate(-3deg); } 25% { transform: translate3d(-1px,-1px,0) rotate(-1deg); } 50% { transform: translate3d(2px,0,0) rotate(3deg); } 75% { transform: translate3d(1px,-1px,0) rotate(1deg); } }
@keyframes avatar-curious { 0%, 100% { transform: translate3d(0,1px,0) rotate(-5deg) scale(1); } 25% { transform: translate3d(1px,0,0) rotate(-2deg) scale(1.025); } 50% { transform: translate3d(0,-4px,0) rotate(5deg) scale(1.06); } 75% { transform: translate3d(-1px,0,0) rotate(2deg) scale(1.025); } }
@keyframes avatar-alert { 0% { transform: translate3d(-4px,0,0) rotate(-2deg) scale(1.02); } 35% { transform: translate3d(2px,-1px,0) rotate(1deg) scale(1.045); } 65% { transform: translate3d(-2px,0,0) rotate(-1deg) scale(1.06); } 100% { transform: translate3d(4px,0,0) rotate(2deg) scale(1.07); } }
@keyframes avatar-ring { 0% { transform: scale(.86); opacity: .85; } 35% { opacity: .5; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
@keyframes emoji-blink { 0%, 92%, 100% { opacity: 1; } 94%, 97% { opacity: 0; } }
@keyframes emoji-talk { from { transform: scaleY(.72); } to { transform: scaleY(1.16); } }
@keyframes face-breathe { 0%, 100% { transform: translate3d(0,1px,0) scale(1); } 50% { transform: translate3d(0,-2px,0) scale(1.025); } }
@keyframes face-talk { 0%, 100% { transform: translate3d(0,1px,0) scale(.99); } 50% { transform: translate3d(0,-2px,0) scale(1.035); } }
@keyframes face-happy { 0%, 100% { transform: rotate(-2deg) scale(1); } 50% { transform: translateY(-4px) rotate(2deg) scale(1.045); } }
@keyframes face-think { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes face-curious { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-2px); } }
@keyframes face-concerned { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1px) scale(.99); } }
@keyframes face-alert { from { transform: translateX(-2px) rotate(-1deg); } to { transform: translateX(2px) rotate(1deg); } }
@keyframes mouth-talk { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1.25); } }
@keyframes brow-curious { 50% { transform: translateY(-6px) rotate(5deg); } }
@keyframes pupil-think { from { transform: translateX(-4px); } to { transform: translateX(4px); } }
@keyframes sound-pulse { 0% { opacity: 0; transform: scale(.8); } 35% { opacity: .9; } 100% { opacity: 0; transform: scale(1.2); } }
@keyframes spark-pop { 0%, 100% { opacity: 0; transform: scale(.7); } 45% { opacity: .9; transform: scale(1); } }
@keyframes wave { 0%, 100% { height: 8px; } 50% { height: 32px; } }
.conversation-list { display: flex; flex-direction: column; gap: 12px; min-height: 390px; max-height: 460px; overflow: auto; padding-right: 4px; }
.conversation-list.hidden-conversation { display: none; }
.empty { color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; padding: 18px; line-height: 1.7; }
.bubble { max-width: 88%; border-radius: 14px; padding: 12px 14px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.bubble.user { align-self: flex-end; background: #244736; }
.bubble.assistant { align-self: flex-start; background: var(--card-soft); }
.bubble .tag { display: block; color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.talk-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.talk { min-width: 180px; background: var(--accent); color: #102218; font-size: 14px; }
.talk.recording { background: #ffb2a7; color: #351917; }
.mic-dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: currentColor; }
.recording .mic-dot { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  button:not(:disabled):hover { transform: none; }
  .voice-orb, .avatar-image, .mic-dot { transform: none !important; }
}
dl { display: grid; gap: 14px; margin: 0; }
dl div { border-bottom: 1px solid #252c37; padding-bottom: 12px; }
dt { margin-bottom: 5px; }
dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.search-sources { line-height: 1.55; }
.search-sources a { color: var(--accent); text-decoration: none; }
.search-sources a:hover { text-decoration: underline; }
.log-wrap { margin-top: 24px; }
.log-title { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.log { height: 164px; overflow: auto; margin: 0; padding: 12px; border-radius: 10px; background: #0c0f14; color: #b9c4d5; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
footer { color: #697384; text-align: center; font-size: 12px; margin-top: 20px; }
@media (max-width: 820px) { .shell { width: min(100% - 24px, 680px); padding-top: 24px; } .hero { flex-direction: column; } .grid { grid-template-columns: 1fr; } .conversation, .diagnostics { min-height: auto; } .conversation-list { min-height: 280px; } }