*{box-sizing:border-box}body{margin:0;background:#0d1421;color:#e9eef8;font:15px system-ui,Arial}.layout{display:grid;grid-template-columns:260px 1fr;height:100vh}aside{background:#121d30;padding:22px;display:flex;flex-direction:column;gap:14px;border-right:1px solid #26364d}aside h2{font-size:20px;margin:0}.user{color:#a8bbd7;font-size:13px}button,.button{background:#2878e2;color:white;border:0;border-radius:9px;padding:12px;cursor:pointer;text-decoration:none;text-align:left}button:hover,.button:hover{background:#3b8bf2}.conversation{background:#1d2d45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;margin:3px 0}.logout{margin-top:auto;background:#293850}main{display:flex;flex-direction:column;min-width:0}header{padding:20px;border-bottom:1px solid #26364d;font-weight:600}#messages{flex:1;overflow-y:auto;padding:28px max(25px,calc((100% - 850px)/2));display:flex;flex-direction:column;gap:17px}.bubble{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;max-width:90%;padding:15px 18px;border-radius:14px}.bubble.user{background:#20508a;align-self:flex-end}.bubble.assistant{background:#1a283c;align-self:flex-start}.welcome{text-align:center;margin:auto;color:#a8bbd7}.welcome h1{color:white}form{display:flex;gap:12px;padding:16px max(25px,calc((100% - 850px)/2));}textarea{flex:1;resize:vertical;background:#1a283c;color:white;border:1px solid #334d6d;border-radius:10px;padding:13px;font:inherit}small{text-align:center;color:#91a5c1;padding:0 10px 14px}.login{max-width:600px;margin:15vh auto;text-align:center;padding:35px}.login p{margin-bottom:40px;color:#a8bbd7}@media(max-width:700px){.layout{grid-template-columns:1fr}aside{max-height:160px;overflow:auto;padding:10px}#messages{padding:15px}form{padding:10px}}