:root { font-family: "Rethink Sans", system-ui, sans-serif; color: #20253d; background: #f3f4fa; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
.topbar { padding: 18px clamp(14px, 2vw, 36px); background: #fff; border-bottom: 1px solid #e4e4f0; }
.brand { font-size: 25px; font-weight: 800; letter-spacing: -.05em; }
.brand span { color: #5848bf; }
.layout { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 2fr); gap: 20px; width: 100%; padding: 24px clamp(14px, 2vw, 36px); align-items: stretch; }
.setup, .conversation { background: #fff; border: 1px solid #e2e1ef; border-radius: 22px; }
.setup { padding: 28px; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(29px, 4vw, 38px); letter-spacing: -.05em; margin-bottom: 8px; }
h2 { font-size: 20px; }
.setup > p, .hint, footer, #empty, .latency { color: #59627a; line-height: 1.5; }
label { display: flex; justify-content: space-between; gap: 8px; margin: 16px 0 6px; font-size: 14px; font-weight: 700; }
label span, .hint, .latency { font-size: 12px; color: #59627a; }
.hint { margin-top: 6px; }
input, textarea, select { width: 100%; min-width: 0; border: 1px solid #c8cbe0; border-radius: 10px; padding: 10px; font: inherit; background: #fcfcff; color: inherit; }
textarea { resize: vertical; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
button { border: 0; border-radius: 10px; cursor: pointer; padding: 11px 14px; font: inherit; font-weight: 700; }
button:disabled { cursor: default; opacity: .54; }
:focus-visible { outline: 3px solid #6454dc; outline-offset: 2px; }
.primary { background: #5441c1; color: white; width: 100%; margin-top: 20px; }
.secondary { background: #fff; color: #403879; }
.conversation { overflow: hidden; display: flex; flex-direction: column; }
.conversation-body { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); flex: 1; }
.transcript { min-width: 0; display: flex; flex-direction: column; padding-top: 20px; }
.transcript h3 { margin: 0 22px; font-size: 15px; }
.transcript .messages { flex: 1; }
@media (max-width: 1080px) { .conversation-body { grid-template-columns: minmax(0, 1fr); } }
.conversation-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 22px; }
.connection { border-radius: 20px; background: #efedfb; color: #47368e; padding: 6px 12px; font-size: 13px; }
.connection.live { background: #e3f7ee; color: #175d48; }
.stage { text-align: center; background: #eeebff; padding: 32px 18px; display: grid; align-content: center; justify-items: center; min-height: 240px; }
.avatar { position: relative; width: 108px; height: 105px; margin: 0 auto 8px; }
.face { position: absolute; z-index: 1; inset: 20px 5px 15px; background: #fff9e9; border: 3px solid #47368e; border-radius: 40px 42px 35px 32px; transform: rotate(-4deg); }
.antenna { position: absolute; top: 6px; left: 51px; height: 18px; border-left: 3px solid #47368e; transform: rotate(17deg); }
.antenna::before { content: ""; position: absolute; top: -4px; left: -7px; width: 11px; height: 11px; border: 2px solid #47368e; border-radius: 50%; background: #ffd276; }
.eye, .mouth { position: absolute; background: #47368e; border-radius: 50%; }
.eye { top: 23px; width: 9px; height: 12px; animation: blink 5s infinite; }
.eye.left { left: 25px; }
.eye.right { right: 25px; }
.mouth { top: 39px; left: 40px; width: 14px; height: 5px; }
.avatar-shadow { position: absolute; inset: auto 14px 3px; height: 9px; border-radius: 50%; background: #d5ccfa; }
.avatar[data-state="listening"] .face { transform: rotate(5deg) translateY(-3px); }
.avatar[data-state="thinking"] .face { animation: sway 1.4s ease-in-out infinite alternate; }
.avatar[data-state="speaking"] .mouth { animation: talk .36s ease-in-out infinite alternate; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96%, 98% { transform: scaleY(.12); } }
@keyframes sway { to { transform: rotate(5deg) translateY(-4px); } }
@keyframes talk { to { transform: scale(.85, 2.8); } }
@media (prefers-reduced-motion: reduce) { .avatar * { animation: none !important; } .avatar[data-state="speaking"] .mouth { height: 10px; } }
.status { font-weight: 700; margin-bottom: 12px; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#remote-audio { width: min(100%, 400px); margin-top: 12px; }
.sources { padding: 12px 22px 0; overflow-wrap: anywhere; }
.sources summary { cursor: pointer; }
.sources ul { padding-left: 20px; }
.messages { padding: 16px 22px; min-height: 112px; max-height: clamp(220px, 48vh, 620px); overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.message { max-width: 88%; padding: 10px 13px; border-radius: 13px; background: #f3f2fa; line-height: 1.45; overflow-wrap: anywhere; }
.message.user { align-self: flex-end; background: #eee9fd; }
.message strong { display: block; font-size: 12px; color: #513d8a; margin-bottom: 3px; }
.latency { margin: 0 22px 13px; }
footer { text-align: center; padding: 0 18px 20px; font-size: 12px; }
@media (max-width: 760px) { .layout { grid-template-columns: 1fr; padding: 14px; } .setup { padding: 20px; } }