:root {
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #17191b;
  background: #fff;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { margin: 0; }
button, textarea { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: wait; }
button:focus-visible, textarea:focus-visible { outline: 2px solid #159cc7; outline-offset: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Keyboard height must never determine the width or the cqw-based type scale. */
.app-shell { position: relative; top: var(--app-top, 0px); width: min(100%, 480px); height: var(--app-height, 100dvh); margin: auto; overflow: hidden; container-type: inline-size; }
.home, .welcome, .splash { position: absolute; inset: 0; }
.home { background: white; }
.splash { z-index: 5; border: 0; padding: 0; overflow: hidden; background: #04688e; }
.splash img { position: absolute; width: 100%; height: 111.6685%; top: -11.6685%; left: 0; }
body:has(.splash:not([hidden])) { background: #055578; }
.home-avatar { position: absolute; left: 5.9cqw; top: 11.56%; width: 49cqw; height: 49cqw; overflow: hidden; }
.home-avatar img { position: absolute; width: 100cqw; max-width: none; left: -5.9cqw; top: -45.57cqw; }
h1 { position: absolute; top: 38.75%; left: 6.29cqw; margin: 0; font-size: 6.075cqw; font-weight: 700; line-height: 1.2; letter-spacing: .02em; white-space: nowrap; }
h1 span { color: #078fbc; margin-left: .7cqw; }
.subtitle { position: absolute; top: 44.13%; left: 6.29cqw; margin: 0; color: #74818a; font-size: 3.47cqw; line-height: 1.5; letter-spacing: .08em; }
.suggestions { position: absolute; top: 50.21%; left: 6.29cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 2.71cqw; }
.suggestions button { display: flex; align-items: center; gap: 2.9cqw; height: 12.37cqw; border: 1px solid #eceef1; border-radius: 7cqw; padding: 0 4.85cqw; font-size: 3.69cqw; line-height: 1; background: linear-gradient(125deg, #f5fafb, #faf8fe); box-shadow: 0 0 2px #e7e9ed30; white-space: nowrap; }
.suggestions button:nth-child(1) { width: 45.23cqw; }
.suggestions button:nth-child(2) { width: 31.13cqw; }
.suggestions button:nth-child(3) { width: 38.18cqw; }
.suggestions button:nth-child(4) { width: 43.92cqw; }
.sprite { display: block; position: relative; width: 5.86cqw; height: 6.08cqw; overflow: hidden; flex: 0 0 auto; mix-blend-mode: multiply; }
.sprite img { position: absolute; width: 100cqw; max-width: none; height: auto; }
.sprite-chat img { left: -10.52cqw; top: -126.90cqw; }
.sprite-cup img { left: -10.52cqw; top: -142.0cqw; }
.sprite-chart img { left: -10.52cqw; top: -157.26cqw; }
.sprite-plus img { left: -10.52cqw; top: -171.80cqw; }
.sprite-mic { width: 5.86cqw; height: 7.7cqw; }
.sprite-mic img { left: -10.52cqw; top: -207.8cqw; }
.sprite-keyboard img { left: -86.0cqw; top: -209.33cqw; }
.composer-area { position: absolute; left: 4.12cqw; right: 4.12cqw; bottom: max(1.75%, env(safe-area-inset-bottom)); z-index: 2; }
.composer { position: relative; height: 14.1cqw; border: 1px solid #e8edf0; border-radius: 7.5cqw; background: linear-gradient(110deg, #f5fafc, #f9faff); box-shadow: 0 1cqw 4cqw #c6dfe51c; }
#mic { border: 0; color: #34434c; background: transparent; border-radius: inherit; position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
#mic > .sprite { position: absolute; top: 50%; left: 6.1cqw; transform: translateY(-50%); }
#hold-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 3.9cqw; letter-spacing: .08em; white-space: nowrap; }
#mic.recording { background: #e8f4fa; }
#keyboard { position: absolute; border: 0; background: transparent; right: 4.05cqw; top: 50%; transform: translateY(-50%); padding: 1.3cqw; z-index: 1; }
#keyboard > .sprite-mic { display: none; }
#input { position: absolute; left: 15cqw; top: 50%; transform: translateY(-50%); width: calc(100% - 31cqw); resize: none; max-height: 10cqw; border: 0; outline: none; padding: .8cqw 0; background: transparent; color: #273741; font-size: max(16px, 3.7cqw); line-height: 1.5; }
#input::placeholder { color: #8d9ca5; }
#send { position: absolute; right: 4cqw; top: 50%; transform: translateY(-50%); height: 8.5cqw; width: 8.5cqw; border: 0; border-radius: 50%; background: #078fbc; color: white; font-size: 5cqw; }
.text-mode #keyboard { right: auto; left: 4.05cqw; }
.text-mode #keyboard > .sprite-mic { display: block; }
.text-mode #keyboard > .sprite-keyboard { display: none; }
.status-row { display: flex; gap: 2cqw; justify-content: space-between; align-items: center; position: absolute; bottom: calc(100% + 2.5cqw); left: 2cqw; right: 2cqw; font-size: 2.8cqw; line-height: 1.5; color: #70808a; }
.status-row:has(#status:empty):has(#stop[hidden]) { display: none; }
#stop { border: 0; background: #f0f6f9; color: #087da7; border-radius: 3cqw; padding: 1cqw 2.4cqw; white-space: nowrap; }
.conversation { position: absolute; inset: 0 0 24cqw; display: flex; flex-direction: column; }
.conversation-header { display: flex; justify-content: space-between; align-items: center; height: 17cqw; flex-shrink: 0; padding: 0 5cqw; border-bottom: 1px solid #f0f2f3; color: #34434c; font-size: 4cqw; }
.conversation-header button { border: 0; background: none; color: #6c7e88; }
#new-chat { font-size: 8cqw; padding: 0 3cqw 1cqw 0; }
#voice-toggle { font-size: 3cqw; }
.conversation-scroll { flex: 1; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: #e1e9ee transparent; }
#messages { padding: 5cqw; }
.message { display: flex; flex-direction: column; align-items: flex-start; gap: 1.8cqw; margin-bottom: 6cqw; }
.message.user { align-items: flex-end; }
.message-name { color: #85949d; font-size: 2.8cqw; }
.bubble { padding: 3cqw 3.6cqw; background: #f5f8fb; color: #33424d; font-size: 3.7cqw; line-height: 1.85; border-radius: 1cqw 4cqw 4cqw; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 95%; }
.user .bubble { background: #078fbc; color: white; border-radius: 4cqw 1cqw 4cqw 4cqw; }
.bubble.pending::after { content: ''; display: inline-block; background: #148cb1; width: .8cqw; height: 3cqw; margin-left: 1cqw; animation: blink .8s infinite alternate; }
.sources { max-width: 95%; font-size: 2.7cqw; line-height: 1.7; color: #708a99; }
.sources summary { cursor: pointer; }
.source-item { margin-top: 2cqw; padding: 2cqw; border-left: 2px solid #d1e3ed; background: #fafcfd; white-space: pre-wrap; overflow-wrap: anywhere; }
.source-item strong { display: block; font-weight: 500; }
.message-error { font-size: 2.8cqw; color: #ad775b; }
.toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(85vw, 380px); padding: 12px 18px; background: #273c49ed; border-radius: 9px; color: white; font-size: 13px; z-index: 8; }
@keyframes blink { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::after { animation: none !important; } }