*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,sans-serif}body{background:#ece5dd}.app-shell{height:100vh;display:flex;overflow:hidden}.inbox-sidebar{color:#fff;background:#111b21;border-right:1px solid #2a3942;flex-direction:column;width:360px;display:flex}.brand{border-bottom:1px solid #2a3942;align-items:center;gap:15px;padding:20px;display:flex}.brand-logo{background:#25d366;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:20px;font-weight:700;display:flex}.brand h2{font-size:20px}.brand span{color:#8a9aa5;font-size:13px}.search-box{border-bottom:1px solid #2a3942;padding:15px}.search-box input{color:#fff;background:#202c33;border:none;border-radius:8px;outline:none;width:100%;padding:12px}.conversation-list{flex:1;overflow-y:auto}.conversation{cursor:pointer;border-bottom:1px solid #ffffff0d;align-items:center;gap:12px;padding:15px;transition:all .2s;display:flex}.conversation:hover{background:#202c33}.conversation.active{background:#2a3942}.avatar{color:#fff;background:#25d366;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;font-size:22px;font-weight:700;display:flex}.conversation-info{flex:1}.conversation-info strong{font-size:16px;display:block}.conversation-info span{color:#9aa6ac;margin-top:5px;font-size:13px;display:block}.conversation small{color:#9aa6ac;font-size:12px}.chat-area{background:#efeae2;flex-direction:column;flex:1;display:flex}.chat-header{color:#fff;background:#202c33;justify-content:space-between;align-items:center;height:75px;padding:0 25px;display:flex}.chat-header h3{margin-bottom:4px}.chat-header span{color:#9aa6ac;font-size:13px}.chat-header button{color:#fff;cursor:pointer;background:#25d366;border:none;border-radius:8px;padding:10px 18px}.messages{background-image:linear-gradient(#ffffff0d,#ffffff0d),url(https://www.transparenttextures.com/patterns/asfalt-light.png);flex-direction:column;flex:1;gap:15px;padding:35px;display:flex;overflow-y:auto}.message{border-radius:12px;max-width:70%;padding:14px 18px;font-size:15px;line-height:1.6}.incoming{background:#fff;align-self:flex-start}.outgoing{background:#d9fdd3;align-self:flex-end}.composer{background:#202c33;align-items:center;gap:15px;height:80px;padding:15px;display:flex}.composer input{color:#fff;background:#2a3942;border:none;border-radius:10px;outline:none;flex:1;padding:14px 18px;font-size:15px}.composer button{color:#fff;cursor:pointer;background:#25d366;border:none;border-radius:10px;width:120px;font-size:16px;font-weight:700}.composer button:hover{background:#1faa57}