:root{--wa-bg-body:#eae6df;--wa-bg-sidebar:#fff;--wa-bg-header:#f0f2f5;--wa-bg-chat:#e5ddd5;--wa-green:#00a884;--wa-bubble-out:#d9fdd3;--wa-bubble-in:#fff;--wa-text-primary:#111b21;--wa-text-secondary:#667781;--wa-text-time:#667781;--wa-border:#d1d7db}*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden}body{background-color:var(--wa-bg-body)}#app{background-color:#fff;width:100vw;display:flex;position:absolute;top:0;left:0;overflow:hidden;height:100vh!important}.whatsapp-app{width:100%;height:100%;display:flex}.sidebar{border-right:1px solid var(--wa-border);flex-direction:column;width:30%;min-width:300px;display:flex}.sidebar-header{background-color:var(--wa-bg-header);justify-content:space-between;align-items:center;height:60px;padding:0 16px;display:flex}.avatar{color:#fff;background-color:#00a884;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-weight:700;display:flex}.avatar.profile-pic{background-position:50%;background-size:cover;background-image:url(/thumb.jpeg)!important}.sidebar-header .actions{color:var(--wa-text-secondary);gap:20px;display:flex}.icon{cursor:pointer;width:24px;height:24px}.icon-small{width:18px;height:18px;color:var(--wa-text-secondary)}.search-container{background-color:#fff;padding:8px 12px}.search-bar{background-color:var(--wa-bg-header);border-radius:8px;align-items:center;height:35px;padding:0 12px;display:flex}.search-bar input{background:0 0;border:none;outline:none;width:100%;padding:0 12px;font-size:14px}.chat-list{flex:1;overflow-y:auto}.chat-item{cursor:pointer;border-bottom:1px solid #f2f2f2;padding:12px 16px;display:flex}.chat-item:hover{background-color:#f5f6f6}.chat-item.active{background-color:#ebebeb}.chat-info{flex:1;margin-left:12px}.chat-name{color:var(--wa-text-primary);margin-bottom:4px;font-size:16px}.chat-last-msg{color:var(--wa-text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.main-chat{background-color:var(--wa-bg-chat);background-blend-mode:overlay;background-image:url(https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png);background-repeat:repeat;background-size:400px;flex-direction:column;flex:1;display:flex;position:relative}.chat-header{background-color:var(--wa-bg-header);z-index:1;align-items:center;height:60px;padding:0 16px;display:flex}.contact-info{flex:1;margin-left:12px}.contact-info .name{font-size:16px;font-weight:500}.contact-info .status{color:var(--wa-text-secondary);font-size:12px}.chat-header .actions{color:var(--wa-text-secondary);gap:24px;display:flex}.message-container{z-index:1;flex-direction:column;flex:1;gap:8px;padding:20px 7%;display:flex;overflow-y:auto}.message-bubble{border-radius:8px;max-width:65%;padding:8px 10px;font-size:14.5px;position:relative;box-shadow:0 1px .5px #00000021}.message-bubble.incoming{background-color:var(--wa-bubble-in);border-top-left-radius:0;align-self:flex-start}.message-bubble.incoming:before{content:"";background-color:var(--wa-bubble-in);clip-path:polygon(100% 0,100% 100%,0 0);width:10px;height:10px;position:absolute;top:0;left:-8px}.message-bubble.outgoing{background-color:var(--wa-bubble-out);border-top-right-radius:0;align-self:flex-end}.message-bubble.outgoing:before{content:"";background-color:var(--wa-bubble-out);clip-path:polygon(0 0,0 100%,100% 0);width:10px;height:10px;position:absolute;top:0;right:-8px}.message-text{word-wrap:break-word;white-space:pre-wrap;margin-bottom:4px;line-height:1.4}.message-time{color:var(--wa-text-time);text-align:right;font-size:11px}.chat-footer{background-color:var(--wa-bg-header);z-index:1;align-items:center;gap:16px;height:62px;padding:0 16px;display:flex}.chat-footer input{border:none;border-radius:8px;outline:none;flex:1;height:42px;padding:0 12px;font-size:15px}.chat-footer .icon{color:var(--wa-text-secondary)}