.main{justify-content:center;align-items:center;min-height:100vh;display:flex}main{background:#fff;width:calc(100% - 32px);max-width:700px;margin:24px auto;padding:20px}h1{margin:0 0 20px}label{flex-direction:column;gap:6px;display:flex}input,button{border-radius:8px;padding:15px 10px}input{border:1px solid #ccc;min-width:0}button{color:#fff;cursor:pointer;background:#478dff;border:none}button:disabled{opacity:.5;cursor:default}main form{flex-wrap:wrap;align-items:flex-end;gap:10px;display:flex}main form label,main section form input{flex:1}main form p{color:red;order:1;width:100%;margin:0}p:empty{display:none}ul{background:#f1f6fd;border-radius:8px;flex-direction:column;gap:10px;height:45vh;min-height:200px;padding:16px;list-style:none;display:flex;overflow-y:auto}li{white-space:pre-wrap;overflow-wrap:anywhere;background:#fff;border-radius:12px;align-self:flex-start;max-width:80%;padding:10px 14px}li.outgoing{background:#c4dcff;align-self:flex-end}.login-form{box-sizing:border-box;background:#fff;border:1px solid #eef1f5;border-radius:16px;flex-direction:column;gap:20px;width:380px;max-width:100%;padding:32px;display:flex;box-shadow:0 12px 32px #121d3112}.login-header h1{color:#0e131f;margin:0 0 8px;font-size:26px}.login-form label{color:#293242;flex-direction:column;gap:8px;font-size:14px;display:flex}.login-form input{box-sizing:border-box;background:#f8faff;border:1px solid #d7dee9;border-radius:8px;width:100%;padding:12px;font-size:16px}.login-form input:focus{border-color:#4188fa;outline:2px solid #d6e6fd}.login-form button{background:#2c7cfd;border-radius:8px;padding:13px;font-size:16px;font-weight:700}.login-form button:hover:not(:disabled){background:#1a65df}.chat-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;display:flex}.back-button{color:#fff;background:#90b4f0}.back-button:hover{background:#b3d0ff}