:root{--primary-color:#6b25e5;--secondary-color:#25bfe5;--bg-color:#f0f2f5;--message-out:#dcf8c6;--message-in:#fff;--text-primary:#222021;--sidebar-bg:#fff;--accent-yellow:#e4ac25}*{box-sizing:border-box;padding:0}*,body{margin:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:#d1d7db;color:var(--text-primary);height:100vh;overflow:hidden}.login-container{display:flex;justify-content:center;align-items:center;height:100vh;background:linear-gradient(135deg,var(--primary-color) 0,var(--secondary-color) 100%)}.login-box{background:#fff;padding:40px;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,.2);width:100%;max-width:400px;text-align:center}.login-box h1{margin-bottom:20px;color:var(--secondary-color)}.form-group{margin-bottom:15px;text-align:left}.form-group label{display:block;margin-bottom:5px;color:#666}.form-group input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px}.btn-primary{width:100%;padding:12px;background-color:var(--secondary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px;transition:background .3s}.btn-primary:hover{background-color:#0d6e63}.chat-layout{display:flex;height:100vh;max-width:1600px;margin:0 auto;background:#fff;box-shadow:0 0 20px rgba(0,0,0,.1);position:relative;top:0}.sidebar{width:30%;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;background:var(--sidebar-bg)}.sidebar-header{padding:15px;background:#f0f2f5;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center}.chat-list{flex:1 1;overflow-y:auto}.chat-item{padding:15px;border-bottom:1px solid #f0f0f0;cursor:pointer;display:flex;align-items:center}.chat-item:hover{background-color:#f5f5f5}.chat-item.active{background-color:#ebebeb}.chat-item-name{font-weight:500;font-size:16px}.chat-window{width:70%;display:flex;flex-direction:column;background-color:var(--bg-color);background-image:url(https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png)}.chat-header{padding:10px 15px;background:#f0f2f5;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center}.messages-container{flex:1 1;padding:20px;overflow-y:auto;display:flex;flex-direction:column}.message{max-width:60%;padding:8px 12px;border-radius:7.5px;margin-bottom:10px;position:relative;font-size:14.2px;line-height:19px;box-shadow:0 1px .5px rgba(0,0,0,.13)}.message.sent{align-self:flex-end;background-color:var(--message-out)}.message.received{align-self:flex-start;background-color:var(--message-in)}.message-meta{font-size:11px;color:#999;text-align:right;margin-top:4px}.message-sender{font-size:12px;color:var(--secondary-color);font-weight:700;margin-bottom:2px}.input-area{padding:10px 15px;background:#f0f2f5;display:flex;align-items:center}.input-area input{flex:1 1;padding:12px;border:none;border-radius:20px;margin-right:10px;outline:none}.send-btn{background:transparent;border:none;font-size:24px;cursor:pointer;color:#54656f}