:root{--wa-green-dark: #111B21;--wa-green: #075E54;--wa-green-header: #202C33;--wa-green-light: #25D366;--wa-teal: #00A884;--wa-bg: #0B141A;--wa-sidebar-bg: #111B21;--wa-chat-bg: #0B141A;--wa-bubble-out: #005C4B;--wa-bubble-in: #202C33;--wa-border: #2A3942;--wa-text: #E9EDEF;--wa-text-secondary: #8696A0;--wa-input-bg: #2A3942;--wa-hover: #202C33;--wa-search-bg: #202C33;--wa-unread: #00A884}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--wa-bg);color:var(--wa-text)}#root{height:100vh;display:flex}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;width:100vw;background:var(--wa-bg);color:var(--wa-text-secondary)}.spinner{width:40px;height:40px;border:3px solid var(--wa-border);border-top-color:var(--wa-teal);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:16px}@keyframes spin{to{transform:rotate(360deg)}}.login-container{display:flex;align-items:center;justify-content:center;height:100vh;width:100vw;background:var(--wa-bg)}.login-card{background:var(--wa-sidebar-bg);border-radius:8px;padding:40px;width:100%;max-width:400px;border:1px solid var(--wa-border)}.login-card h1{color:var(--wa-text);text-align:center;font-size:24px;margin-bottom:4px}.login-card .subtitle{color:var(--wa-text-secondary);text-align:center;font-size:14px;margin-bottom:28px}.login-card input{width:100%;padding:12px 16px;border:1px solid var(--wa-border);background:var(--wa-input-bg);border-radius:8px;font-size:15px;color:var(--wa-text);margin-bottom:12px;outline:none}.login-card input:focus{border-color:var(--wa-teal)}.login-card input::placeholder{color:var(--wa-text-secondary)}.login-card .error{color:#f15c6d;text-align:center;margin-bottom:12px;font-size:14px}.login-card button{width:100%;padding:14px;background:var(--wa-teal);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer}.login-card button:hover{background:#00966d}.login-card button:disabled{opacity:.5}.app-container{display:flex;height:100vh;width:100vw}.sidebar{width:440px;min-width:340px;background:var(--wa-sidebar-bg);border-right:1px solid var(--wa-border);display:flex;flex-direction:column}.sidebar-header{padding:10px 16px;background:var(--wa-green-header);display:flex;align-items:center;justify-content:space-between;height:60px}.sidebar-header h2{font-size:16px;color:var(--wa-text);font-weight:400}.sidebar-header .actions{display:flex;gap:8px}.sidebar-header .actions button{background:none;border:none;color:var(--wa-text-secondary);font-size:18px;cursor:pointer;padding:8px;border-radius:50%}.sidebar-header .actions button:hover{background:#ffffff1a}.search-box{padding:8px 12px;background:var(--wa-sidebar-bg)}.search-box input{width:100%;padding:8px 32px 8px 12px;background:var(--wa-search-bg);border:none;border-radius:8px;font-size:14px;color:var(--wa-text);outline:none}.search-box input::placeholder{color:var(--wa-text-secondary)}.filter-bar{display:flex;gap:6px;padding:6px 12px}.filter-chip{padding:5px 12px;border-radius:14px;background:var(--wa-input-bg);border:none;font-size:12px;color:var(--wa-text-secondary);cursor:pointer}.filter-chip.active{background:var(--wa-teal);color:#111b21;font-weight:600}.contact-list{flex:1;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:10px 16px;cursor:pointer;border-bottom:1px solid rgba(134,150,160,.08)}.contact-item:hover,.contact-item.active{background:var(--wa-hover)}.avatar{width:49px;height:49px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:500;font-size:18px;flex-shrink:0}.contact-info{flex:1;margin-left:13px;overflow:hidden;border-bottom:none}.contact-top{display:flex;justify-content:space-between;align-items:center}.contact-name{font-size:16px;color:var(--wa-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-time{font-size:12px;color:var(--wa-text-secondary);flex-shrink:0;margin-left:8px}.contact-time.unread{color:var(--wa-unread)}.contact-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:2px}.contact-preview{font-size:13px;color:var(--wa-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.badge{background:var(--wa-unread);color:#111b21;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 5px;margin-left:6px}.chat-panel{flex:1;display:flex;flex-direction:column;background:var(--wa-chat-bg)}.no-chat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--wa-text-secondary)}.no-chat h2{font-size:32px;font-weight:300;color:var(--wa-text);margin-bottom:12px}.no-chat p{font-size:14px;max-width:500px;text-align:center;line-height:1.6}.chat-header{padding:10px 16px;background:var(--wa-green-header);display:flex;align-items:center;gap:12px;height:60px;border-bottom:1px solid var(--wa-border)}.chat-header .back-btn{display:none;background:none;border:none;color:var(--wa-text-secondary);font-size:20px;cursor:pointer}.chat-header .chat-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:500;font-size:15px}.chat-header-info{flex:1}.chat-header-info .name{font-size:16px;color:var(--wa-text)}.chat-header-info .status{font-size:12px;color:var(--wa-text-secondary)}.handoff-banner{background:#2a2000;padding:8px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #3D3000}.handoff-banner .title{font-weight:600;color:#f5c542;font-size:13px}.messages-area{flex:1;overflow-y:auto;padding:12px 60px;background-image:url("data:image/svg+xml,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='p' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Cpath d='M30 5 L35 15 L30 25 L25 15Z' fill='rgba(255,255,255,.02)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='300' height='300' fill='url(%23p)'/%3E%3C/svg%3E")}.date-sep{text-align:center;margin:16px 0 8px}.date-sep span{background:#182229;padding:5px 12px;border-radius:8px;font-size:12px;color:var(--wa-text-secondary);box-shadow:0 1px 1px #0003}.msg{display:flex;margin:1px 0}.msg.out{justify-content:flex-end}.msg.in{justify-content:flex-start}.bubble{max-width:65%;padding:6px 7px 4px 9px;border-radius:8px;position:relative;box-shadow:0 1px 1px #00000026}.bubble.out{background:var(--wa-bubble-out);border-top-right-radius:0}.bubble.in{background:var(--wa-bubble-in);border-top-left-radius:0}.bubble .sender{font-size:12px;color:var(--wa-teal);font-weight:500;margin-bottom:1px}.bubble .text{font-size:14.2px;line-height:1.4;color:var(--wa-text);white-space:pre-wrap;word-break:break-word}.bubble .meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:1px;float:right;margin-left:12px;padding-top:3px}.bubble .time{font-size:11px;color:#ffffff80}.bubble .status{font-size:14px;line-height:1}.bubble .status.read{color:#53bdeb}.bubble .status.default{color:#ffffff80}.bubble .media-img{max-width:330px;max-height:300px;border-radius:6px;margin-bottom:4px;cursor:pointer}.bubble .audio-msg{display:flex;align-items:center;gap:8px;padding:4px 0;min-width:240px}.bubble .audio-msg .play-btn{background:none;border:none;font-size:24px;cursor:pointer;color:var(--wa-text)}.bubble .audio-msg .wave{flex:1;height:30px;display:flex;align-items:center;gap:1px}.bubble .audio-msg .wave .bar{width:3px;background:#fff6;border-radius:2px}.bubble .doc-card{display:flex;align-items:center;gap:10px;padding:10px;background:#00000026;border-radius:6px;min-width:250px}.bubble .doc-card .doc-icon{font-size:28px}.bubble .doc-card .doc-name{font-size:13px;color:var(--wa-text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-area{padding:8px 16px;background:var(--wa-green-header);display:flex;flex-direction:column}.handoff-controls{display:flex;gap:8px;margin-bottom:6px}.handoff-btn{flex:1;padding:7px;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer}.handoff-btn.pause{background:#2a2000;color:#f5c542}.handoff-btn.resume{background:#002a1f;color:var(--wa-teal)}.input-row{display:flex;align-items:flex-end;gap:8px}.input-row textarea{flex:1;padding:10px 12px;background:var(--wa-input-bg);border:none;border-radius:8px;font-size:15px;color:var(--wa-text);resize:none;max-height:100px;outline:none;font-family:inherit;line-height:1.4}.input-row textarea::placeholder{color:var(--wa-text-secondary)}.send-btn{width:42px;height:42px;border-radius:50%;background:var(--wa-teal);border:none;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.send-btn:disabled{opacity:.4}.attach-btn{width:42px;height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--wa-text-secondary);font-size:24px;flex-shrink:0;border-radius:50%}.attach-btn:hover{background:#ffffff1a}.mic-btn{background:transparent!important;color:var(--wa-text-secondary)!important;font-size:22px}.mic-btn:hover{background:#ffffff1a!important}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--wa-text-secondary);flex:1}.empty-state h3{color:var(--wa-text);font-weight:400;margin-bottom:8px}.image-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:100;cursor:pointer}.image-overlay img{max-width:90vw;max-height:90vh;object-fit:contain}@media (max-width: 768px){.sidebar{width:100%;min-width:100%}.app-container.chat-open .sidebar{display:none}.app-container:not(.chat-open) .chat-panel{display:none}.chat-header .back-btn{display:flex}.messages-area{padding:8px 12px}.bubble{max-width:85%}.sidebar-header h2{font-size:18px}.chat-header-info .name{font-size:15px}}