:root { color-scheme: light; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#191919; background:#fff; font-size:14px; }
* { box-sizing:border-box; }
body { margin:0; }
main { height:460px; padding:24px 20px 16px; display:flex; flex-direction:column; }
header { flex:none; text-align:center; }
.face { display:flex; align-items:center; justify-content:center; gap:12px; width:104px; height:104px; margin:0 auto; border-radius:50%; background:#191919; }
.eye { position:relative; width:30px; height:38px; overflow:hidden; border-radius:50%; background:white; }
.pupil { position:absolute; top:50%; left:50%; width:10px; height:10px; margin:-5px; border-radius:50%; background:#191919; transform:translate(var(--pupil-x,0px),var(--pupil-y,0px)); }
h1 { font-size:14px; font-weight:500; margin:18px 0 12px; }
#conversation-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:0 2px; }
#messages { line-height:1.55; }
.message { margin:12px 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.user { background:#f3f3f3; border-radius:8px 8px 2px 8px; padding:8px 11px; margin-left:auto; width:fit-content; max-width:88%; }
.sources { display:flex; flex-wrap:wrap; gap:5px 10px; margin:8px 0 14px; }
.sources a { color:#666; font:11px ui-monospace,SFMono-Regular,monospace; text-underline-offset:3px; overflow-wrap:anywhere; }
button,textarea { font:inherit; }
button { cursor:pointer; }
#status { flex:none; min-height:26px; padding:5px 1px; font-size:11px; color:#777; }
#status.error { color:#a33328; }
.composer { display:flex; align-items:flex-end; border:1px solid #d4d4d4; border-radius:4px; padding:5px; transition:border-color .12s; }
.composer:focus-within { border-color:#666; }
textarea { resize:none; flex:1; min-width:0; height:32px; max-height:96px; line-height:20px; padding:6px 7px; border:0; outline:0; background:transparent; color:inherit; }
textarea::placeholder { color:#999; }
#send { display:grid; place-items:center; width:32px; height:32px; flex:none; border:0; border-radius:3px; background:#191919; color:white; transition:opacity .12s; }
#send:disabled { opacity:.22; cursor:default; }
button:focus-visible,a:focus-visible { outline:2px solid #777; outline-offset:3px; }
@media(max-width:300px) { main { padding:20px 12px 12px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important; } }