:root{--blue:#4169e1;--bg:#f2f5fb;--ink:#17233d}*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Arial,sans-serif;color:var(--ink)}.app{display:flex;height:100vh}.app aside{width:280px;padding:24px;background:#fff;border-right:1px solid #e0e6f0;display:flex;flex-direction:column;gap:8px}.app h1{margin:0 0 22px}.app aside a{padding:11px;border-radius:10px;color:var(--ink);text-decoration:none}.app aside a.active,.app aside a:hover{background:#e9efff;color:var(--blue)}.app aside p{margin:16px 10px 4px;color:#77839b;font-size:13px}.link{border:0;background:0;color:#77839b;padding:10px;text-align:left;cursor:pointer}.dialog{flex:1;display:flex;flex-direction:column;min-width:0}.dialog header{padding:24px;background:#fff;font-size:20px;font-weight:bold;border-bottom:1px solid #e0e6f0}#messages{padding:22px;flex:1;overflow:auto}.dialog article{max-width:66%;margin:9px 0;padding:12px;border-radius:14px;background:#fff;box-shadow:0 2px 8px #18264a0d}.dialog article.mine{margin-left:auto;background:#dfe8ff}.dialog article b{display:block;margin-bottom:5px;font-size:12px;color:var(--blue)}.dialog article i{color:#77839b}.dialog article a{display:block;margin-top:7px}.dialog article form{display:inline}.dialog article button{margin-top:8px;border:0;background:none;color:#77839b;cursor:pointer;font-size:11px}.composer{display:flex;gap:8px;padding:16px;background:#fff;border-top:1px solid #e0e6f0}.composer input[name=text]{flex:1}.composer input,.auth input,.auth textarea{padding:12px;border:1px solid #ccd5e5;border-radius:9px;font:inherit}.composer button,.auth button{padding:12px 17px;border:0;border-radius:9px;background:var(--blue);color:#fff;font-weight:bold;cursor:pointer}.auth{max-width:430px;margin:12vh auto;padding:32px;background:#fff;border-radius:20px;box-shadow:0 8px 35px #18264a18}.auth form{display:grid;gap:12px;margin:20px 0}.auth textarea{width:100%;height:110px}.auth b{color:#b42318}@media(max-width:700px){.app aside{width:95px;padding:12px}.app aside h1{font-size:20px}.app aside a{font-size:12px}.app aside p{display:none}.dialog article{max-width:86%}.composer{flex-wrap:wrap}.composer input[name=text]{min-width:100%}}
