:root {color-scheme:dark; font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:#101722;color:#f2f5fa}
* {box-sizing:border-box}
html,body {height:100%;width:100%;margin:0;overflow:hidden;background:#101722}
button,textarea,select,input {font:inherit}
button {cursor:pointer}
.app {height:100vh;height:100dvh;max-width:840px;margin:0 auto;display:flex;flex-direction:column;min-height:0;padding:0 12px;overflow:hidden}
.header {height:68px;flex:0 0 68px;display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid #2d3a4d}
.brand-icon {flex:none;width:40px;height:40px;border-radius:12px;background:#23354b;color:#d7e9ff;display:grid;place-items:center}
.brand-icon svg {width:23px;height:23px}
.brand {flex:1;min-width:0;font-size:17px;line-height:1;white-space:nowrap}
.icon-button {border:0;background:transparent;color:#c7d4e5;width:36px;height:36px;display:grid;place-items:center;flex:none;border-radius:9px;padding:7px}
.icon-button svg {width:21px;height:21px}
.icon-button:focus-visible,#send:focus-visible,.action:focus-visible {outline:2px solid #92baff;outline-offset:2px}
.icon-button:active,.icon-button:hover {background:#23354b}
.conversation {flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3b5067 transparent;display:flex;flex-direction:column;gap:14px;padding:18px 1px 12px}
.message-row {display:flex;align-items:flex-end;gap:8px;width:100%}
.message-row.user {justify-content:flex-end}
.message-row.assistant {justify-content:flex-start}
.mini-avatar {width:31px;height:31px;background:#23354b;color:#d7e9ff;border-radius:50%;display:grid;place-items:center;flex:0 0 31px}
.mini-avatar svg {width:18px;height:18px}
.message-stack {min-width:0;max-width:min(78%,500px);display:flex;flex-direction:column;gap:5px}
.bubble {border-radius:17px;padding:10px 13px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.5}
.user .bubble {color:#fff;background:#245794;border-bottom-right-radius:5px}
.assistant .bubble {color:#f2f5fa;background:#232e3e;border-bottom-left-radius:5px}
.message-actions {display:flex;gap:12px;padding:0 3px}
.action {border:0;padding:3px;background:transparent;color:#aab7ca;width:23px;height:23px;display:grid;place-items:center}
.action svg {width:15px;height:15px}
.action:hover {color:white}
.settings {flex:none;padding:12px;background:#1c2838;border:1px solid #39485e;border-radius:12px;margin-bottom:8px;display:flex;flex-direction:column;gap:8px;font-size:13px}
.settings[hidden] {display:none}
.settings label {display:flex;justify-content:space-between}
.settings input {accent-color:#3778c4;width:100%}
.settings select {background:#232e3e;color:#fff;padding:7px;border:1px solid #39485e;border-radius:6px}
.composer {flex:0 0 auto;display:flex;align-items:flex-end;gap:8px;padding:7px;background:#1c2838;border:1px solid #39485e;border-radius:17px;margin-bottom:5px;min-height:54px}
.composer textarea {flex:1;min-width:0;min-height:35px;max-height:120px;padding:9px 5px;resize:none;overflow-y:auto;background:transparent;border:0;outline:none;color:#f2f5fa;font-size:15px;line-height:1.3}
.composer textarea::placeholder {color:#99a8bc}
#send {flex:0 0 39px;width:39px;height:39px;border:0;border-radius:11px;background:#3778c4;color:white;display:grid;place-items:center;padding:9px}
#send svg {height:21px;width:21px}
#send:disabled {opacity:.55;cursor:default}
footer {flex:none;text-align:center;font-size:10px;line-height:1.4;color:#98a8bd;padding:0 0 max(5px,env(safe-area-inset-bottom))}
footer a {color:#aabddd;text-decoration:none}
@media(max-width:500px) {.app{padding:0 9px}.header{height:58px;flex-basis:58px}.conversation{gap:12px;padding-top:12px}.message-stack{max-width:85%}.bubble{padding:8px 11px}.composer{min-height:51px}}
.generation-indicator{display:inline-flex;align-items:center;gap:9px;min-height:21px;color:#aab7ca;font-size:12px}
.spinner{width:15px;height:15px;display:inline-block;flex:none;border:2px solid #4d6079;border-top-color:#cfe0ff;border-radius:50%;animation:emma-spin .8s linear infinite}
@keyframes emma-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2s}}