:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#1d2b3b;background:#f1f5f9}*{box-sizing:border-box}body{margin:0}.shell{max-width:1180px;margin:30px auto;background:white;border-radius:18px;overflow:hidden;box-shadow:0 12px 38px #1e38551a;min-height:75vh}header{background:#153b66;color:#fff;display:flex;align-items:center;gap:16px;padding:18px 25px}.brand{border:2px solid #f4c343;border-radius:10px;padding:10px;font-weight:900;font-size:22px}.brand span{color:#f4c343}h1{font-size:22px;margin:0}header small{color:#bcd0e6}header button{margin-left:auto}button{border:0;border-radius:9px;padding:12px 18px;cursor:pointer;background:#153b66;color:white;font-weight:600}button:disabled{opacity:.5;cursor:default}.ghost{border:1px solid #8da7c5;background:transparent}.login{max-width:380px;margin:60px auto;padding:20px}.login h2{margin:0}.login label{display:block;margin:18px 0}.login input{display:block;width:100%;padding:12px;margin-top:7px;border:1px solid #b8c6d5;border-radius:8px}.login button{width:100%}#error{color:#b42318}.chat{display:grid;grid-template-columns:280px 1fr;min-height:65vh}.chat aside{border-right:1px solid #e4ebf3;padding:16px}.who{font-size:13px;color:#526477;padding:12px;background:#f0f5fa;border-radius:8px}.chat aside h2{font-size:16px}.person{display:block;width:100%;text-align:left;margin:8px 0;background:#f0f5fa;color:#153b66}.person.active{background:#d9eafa}.conversation{display:flex;flex-direction:column;min-height:60vh}.chat-title{font-weight:700;border-bottom:1px solid #e4ebf3;padding:18px}.messages{flex:1;padding:18px;overflow:auto;max-height:60vh;display:flex;flex-direction:column;gap:12px}.bubble{padding:10px 14px;max-width:78%;border-radius:13px;white-space:pre-wrap;overflow-wrap:anywhere}.bubble span{display:block}.bubble small{display:block;font-size:10px;opacity:.65;margin-top:5px}.mine{align-self:flex-end;background:#d9eafa}.theirs{align-self:flex-start;background:#eef1f5}#send{display:flex;gap:8px;padding:12px;border-top:1px solid #e4ebf3}#body{flex:1;min-width:0;border:1px solid #b8c6d5;border-radius:8px;padding:12px}#status{margin:0 15px 10px;font-size:12px;color:#66798a}@media(max-width:650px){.shell{margin:0;border-radius:0}.chat{grid-template-columns:1fr}.chat aside{border-right:0;border-bottom:1px solid #e4ebf3}.chat aside h2{margin:8px 0}.messages{max-height:48vh;min-height:38vh}}

/* v0.2 */
.person{position:relative;padding-right:45px}.person strong,.person small{display:block}.person small{font-size:11px;font-weight:400;color:#65778b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:5px}.person em{position:absolute;right:10px;top:12px;min-width:23px;height:23px;border-radius:20px;background:#f4c343;color:#153b66;font-size:12px;font-style:normal;text-align:center;line-height:23px}.chat-title{display:flex;align-items:center;gap:10px}#back{display:none;padding:5px 10px;background:#eef3fa;color:#153b66}.messages{scrollbar-width:thin}@media(max-width:650px){.shell{min-height:100dvh}.chat{display:block}.chat aside{display:block}.chat .conversation{display:none}.chat.chat-open aside{display:none}.chat.chat-open .conversation{display:flex;min-height:calc(100dvh - 110px)}#back{display:inline-block}.messages{max-height:calc(100dvh - 255px);min-height:35vh}.person{min-height:64px}header{padding:13px 15px}header h1{font-size:18px}}