*{margin:0;padding:0}body{background:#111b21}.loader{width:40px;height:40px;border:4px solid #ddd;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.whatsapp-container{display:flex;justify-content:center;align-items:center;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif}.whatsapp-app{width:100%;height:100vh;background:#0c1317;overflow:hidden;box-shadow:0 10px 40px #0000004d;display:flex;transition:all .3s ease}@media(max-width:768px){.whatsapp-container{padding:0;background:#0c1317}.whatsapp-app{height:100vh;border-radius:0}.mobile-view .conversations-panel,.mobile-view .chat-window{width:100%}.hidden{display:none!important}}.conversations-panel{width:30%;min-width:300px;background:#111b21;border-right:1px solid #2a3942;display:flex;flex-direction:column;transition:transform .3s ease}.conversations-header{background:#202c33;padding:16px 20px;border-bottom:1px solid #2a3942}.header-content{display:flex;justify-content:space-between;align-items:center}.user-info{display:flex;align-items:center;gap:15px}.user-avatar{width:40px;height:40px;background:linear-gradient(135deg,#00a884,#25d366);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:18px}.user-name{color:#e9edef;font-size:18px;font-weight:500}.conversations-list{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#374045 transparent}.conversations-list::-webkit-scrollbar{width:6px}.conversations-list::-webkit-scrollbar-thumb{background:#374045;border-radius:3px}.conversation-item{padding:16px 20px;display:flex;gap:15px;cursor:pointer;transition:background .2s ease;border-bottom:1px solid #222d34}.conversation-item:hover{background:#222d34}.conversation-item.active{background:#2a3942}.conversation-avatar{flex-shrink:0}.single-avatar,.group-avatar{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:18px}.single-avatar{background:linear-gradient(135deg,#6a11cb,#2575fc);color:#fff}.group-avatar{background:linear-gradient(135deg,#11998e,#38ef7d);color:#fff}.group-icon{font-size:24px}.conversation-details{flex:1;min-width:0}.conversation-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:5px}.conversation-name{color:#e9edef;font-size:17px;font-weight:500;display:flex;align-items:center;gap:8px}.group-badge{background:#00a884;color:#fff;font-size:10px;padding:2px 6px;border-radius:10px;font-weight:500;text-transform:uppercase}.conversation-time{color:#8696a0;font-size:12px;white-space:nowrap}.conversation-preview{display:flex;justify-content:space-between;align-items:center}.last-message{color:#8696a0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.unread-badge{background:#00a884;color:#fff;font-size:12px;font-weight:600;min-width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-left:10px}.chat-window{flex:1;display:flex;flex-direction:column;background:#0c1317}.chat-header{background:#202c33;padding:16px 20px;display:flex;align-items:center;gap:20px;border-bottom:1px solid #2a3942}.back-button{background:none;border:none;color:#e9edef;font-size:24px;cursor:pointer;padding:8px;border-radius:50%;transition:background .2s ease}.back-button:hover{background:#374045}.chat-header-avatar .single-avatar,.chat-header-avatar .group-avatar{width:40px;height:40px}.chat-header-info{flex:1}.chat-contact-name{color:#e9edef;font-size:18px;font-weight:500;display:flex;align-items:center;gap:8px}.group-participants{color:#8696a0;font-size:13px;font-weight:400}.chat-status{color:#8696a0;font-size:13px;margin-top:2px}.messages-container{flex:1;padding:20px;overflow-y:auto;background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.05"><path d="M0,0 L100,0 L100,100 Z" fill="%2300a884"/></svg>');background-size:100px 100px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}.messages-container::-webkit-scrollbar{width:6px}.messages-container::-webkit-scrollbar-thumb{background:#374045;border-radius:3px}.date-divider{display:flex;justify-content:center;margin:20px 0}.date-divider span{background:#1e2a30;color:#8696a0;font-size:12.5px;padding:6px 12px;border-radius:14px;text-transform:uppercase;letter-spacing:.5px}.message-container{display:flex;margin:2px 0}.message-wrapper{max-width:65%;display:flex;flex-direction:column}.message-right{justify-content:flex-end}.message-left{justify-content:flex-start}.sender-name{color:#8696a0;font-size:12px;margin-left:10px;margin-bottom:2px;font-weight:500}.message-bubble{padding:8px 12px;border-radius:8px;position:relative;word-wrap:break-word;min-width:60px;transition:all .2s ease}.message-self{background:#005c4b;color:#e9edef;border-top-right-radius:0;margin-left:auto}.message-other{background:#2a3942;color:#e9edef;border-top-left-radius:0}.message-consecutive-top{border-top-left-radius:8px!important;border-top-right-radius:8px!important}.message-consecutive-bottom{border-bottom-left-radius:8px!important;border-bottom-right-radius:8px!important}.message-text{font-size:14.5px;line-height:1.4;margin-bottom:4px}.message-time{font-size:11px;color:#99beb7;text-align:right;margin-top:2px;opacity:.8}.message-other .message-time{color:#8696a0}.no-chat-selected,.no-messages{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8696a0;text-align:center;padding:40px}.welcome-icon,.no-messages-icon{font-size:80px;margin-bottom:20px;opacity:.5}.no-chat-selected h2{color:#e9edef;margin-bottom:10px;font-size:24px}.no-chat-selected p{font-size:16px;margin-bottom:20px}.conversations-count{background:#2a3942;color:#00a884;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500}.no-messages-text{font-size:16px;color:#e9edef;max-width:300px}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message-container{animation:messageSlideIn .3s ease}.typing-indicator{display:flex;gap:4px;padding:12px;background:#2a3942;border-radius:0 8px 8px;width:fit-content}.typing-indicator span{width:8px;height:8px;background:#8696a0;border-radius:50%;animation:typingBounce 1.4s infinite ease-in-out}.typing-indicator span:nth-child(1){animation-delay:-.32s}.typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes typingBounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.conversation-item,.message-bubble,.chat-header{transition:all .3s ease}.disconnect-btn{background:#ff8787;color:#fff;padding:6px;border-radius:4%;outline:none;border:none;cursor:pointer}