*{box-sizing:border-box}body{margin:0;font-family:Arial,"Noto Sans Thai",sans-serif;color:#172126;background:#f4f5f2}button,input,textarea{font:inherit}.login{min-height:100vh;display:grid;place-items:center;background:#123f35}.login form{width:min(390px,92vw);background:#fff;padding:34px;border-radius:18px;box-shadow:0 25px 70px #001b1430}.logo,.brand b{display:grid;place-items:center;background:#d8ac56;color:#123f35;font:700 24px Georgia;border-radius:12px;width:44px;height:44px}.login h1{margin:18px 0 5px;font-family:Georgia}.login p{color:#71807b;margin:0 0 22px}.login label{display:block;font-size:13px;margin:14px 0}.login input{display:block;width:100%;padding:12px;border:1px solid #dfe4e0;border-radius:9px;margin-top:6px}.login button{width:100%;border:0;background:#176b4b;color:#fff;padding:12px;border-radius:9px}.login small{display:block;color:#b23a36;margin-top:10px}main{height:100vh;display:grid;grid-template-columns:210px 340px 1fr;background:#fff}aside{background:#123f35;color:#fff;padding:23px 16px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;margin:0 5px 28px}.brand span,.brand small{display:block}.brand small{font-size:10px;color:#a5c0b8;margin-top:3px}nav{display:grid;gap:7px}nav button,#logout{border:0;background:transparent;color:#bdd0ca;text-align:left;padding:11px;border-radius:8px}nav button.active{background:#20594a;color:#fff}#logout{margin-top:auto}.list{border-right:1px solid #e5e9e6;background:#fbfbfa}.list header{padding:25px 20px 14px}.list header small{color:#176b4b;text-transform:uppercase;font-weight:bold}.list h1{font:700 26px Georgia;margin:4px 0}.list>input{margin:0 18px 14px;width:calc(100% - 36px);padding:11px;border:0;background:#edf0ed;border-radius:8px}.conversation{display:block;width:100%;border:0;border-top:1px solid #e9ece9;background:transparent;text-align:left;padding:14px 18px}.conversation:hover,.conversation.selected{background:#edf6f1}.conversation b,.conversation span{display:block}.conversation span{font-size:12px;color:#7a8580;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat{display:flex;flex-direction:column;background:#f8f7f3}.chat>header{height:72px;padding:24px;background:#fff;border-bottom:1px solid #e5e9e6;font-weight:bold}.messages{flex:1;overflow:auto;padding:25px}.empty{text-align:center;color:#89928f;margin-top:18vh}.message{max-width:70%;background:#fff;padding:10px 12px;border-radius:5px 14px 14px;margin:9px 0;font-size:13px}.message.out{margin-left:auto;background:#176b4b;color:#fff;border-radius:14px 5px 14px 14px}.message time{display:block;font-size:9px;opacity:.65;text-align:right;margin-top:5px}#replyForm{display:flex;gap:8px;background:#fff;padding:15px;border-top:1px solid #e5e9e6}#reply{flex:1;resize:none;border:1px solid #dce2de;border-radius:9px;padding:10px}#replyForm button{border:0;background:#176b4b;color:#fff;border-radius:9px;padding:0 20px}button:disabled,textarea:disabled{opacity:.5}@media(max-width:780px){main{grid-template-columns:68px 1fr}aside{padding:20px 8px}.brand span,nav button:not(.active){display:none}.brand{margin-left:4px}.list{display:none}}