:root { font-family: system-ui, sans-serif; color: #1b1b1b; background: #f7f7f5; }
body { margin: 0; display: flex; flex-direction: column; height: 100vh; }
header { display: flex; gap: 1rem; align-items: center; padding: .6rem 1rem; background: #fff; border-bottom: 1px solid #ddd; }
header #who { color: #666; margin-right: auto; }
main { display: flex; flex: 1; min-height: 0; }
nav#conversations { width: 16rem; overflow: auto; border-right: 1px solid #ddd; background: #fff; display: flex; flex-direction: column; }
nav#conversations .conv { text-align: left; padding: .6rem .8rem; border: 0; background: none; border-bottom: 1px solid #eee; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
nav#conversations .conv.active { background: #eef3ff; }
section { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#transcript { flex: 1; overflow: auto; padding: 1rem; }
.msg { margin-bottom: .9rem; max-width: 60rem; }
.msg .who { font-size: .75rem; color: #666; margin-bottom: .2rem; }
.msg .body { white-space: pre-wrap; background: #fff; border: 1px solid #e3e3e3; border-radius: .4rem; padding: .6rem .8rem; }
.msg-user .body { background: #eef3ff; }
.msg-tool_call .body, .msg-tool_result .body { font-size: .8rem; color: #444; background: #fafafa; max-height: 12rem; overflow: auto; }
.msg-error .body { border-color: #e0a0a0; background: #fff4f4; }
.msg-status .body { color: #666; font-style: italic; }
.msg a.trace { font-size: .8rem; }
#composer { display: flex; gap: .5rem; padding: .8rem 1rem; border-top: 1px solid #ddd; background: #fff; }
#composer textarea { flex: 1; resize: vertical; font: inherit; padding: .5rem; }
button { font: inherit; padding: .4rem .8rem; cursor: pointer; }
button:disabled, textarea:disabled { opacity: .5; cursor: default; }
body.signin main { display: block; max-width: 24rem; margin: 6rem auto; text-align: center; }
a.button { display: inline-block; padding: .6rem 1rem; background: #1a56db; color: #fff; text-decoration: none; border-radius: .4rem; }