:root{--wa-dark-green: #075e54;--wa-green: #25d366;--wa-light-green: #dcf8c6;--wa-teal: #128c7e;--wa-bg: #f0f2f5;--wa-white: #ffffff;--wa-panel-bg: #ffffff;--wa-border: #e9edef;--wa-text-primary: #111b21;--wa-text-secondary: #667781;--wa-hover: #f5f6f6;--wa-active: #d9fdd3;--sidebar-width: 360px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--wa-bg);color:var(--wa-text-primary);height:100vh;overflow:hidden}#root{height:100vh}.app{display:flex;flex-direction:row;height:100vh;overflow:hidden}.app-center{align-items:center;justify-content:center;background:var(--wa-bg)}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);display:flex;flex-direction:column;background:var(--wa-panel-bg);border-right:1px solid var(--wa-border);height:100vh;overflow:hidden}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--wa-dark-green);color:#fff;min-height:59px}.sidebar-header-left{display:flex;flex-direction:column}.app-title{font-size:20px;font-weight:600;letter-spacing:.5px}.connected-as{font-size:12px;opacity:.8;margin-top:1px}.sidebar-header-right{display:flex;gap:4px}.icon-btn{background:none;border:none;cursor:pointer;font-size:18px;padding:6px 8px;border-radius:50%;opacity:.9;transition:background .15s}.icon-btn:hover{background:#ffffff26;opacity:1}.chat-list{flex:1;overflow-y:auto;overflow-x:hidden}.chat-list-empty{padding:24px 16px;color:var(--wa-text-secondary);font-size:13px;text-align:center}.chat-item{display:flex;flex-direction:row;align-items:center;padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--wa-border);transition:background .1s;gap:12px}.chat-item:hover{background:var(--wa-hover)}.chat-item.active{background:var(--wa-active)}.chat-avatar{width:46px;height:46px;min-width:46px;border-radius:50%;background:var(--wa-teal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600}.chat-info{flex:1;min-width:0}.chat-name{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--wa-text-primary)}.chat-meta{margin-top:2px;font-size:12px;color:var(--wa-text-secondary)}.not-tracked{color:#f0a500;font-size:11px}.chat-time{font-size:11px;color:var(--wa-text-secondary);white-space:nowrap;align-self:flex-start;margin-top:2px}.main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--wa-bg)}.message-thread{display:flex;flex-direction:column;height:100%;overflow:hidden}.thread-header{display:flex;align-items:center;padding:10px 16px;background:var(--wa-dark-green);color:#fff;gap:12px;min-height:59px}.thread-avatar{width:38px;height:38px;min-width:38px;border-radius:50%;background:#ffffff4d;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600}.thread-name{font-size:16px;font-weight:600;flex:1}.not-tracked-badge{font-size:11px;background:#ffa50040;color:gold;padding:2px 8px;border-radius:10px}.messages-scroll{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:4px;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e2e8ec' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.bubble-row{display:flex;margin:2px 0}.bubble-row.from-me{justify-content:flex-end}.bubble{max-width:65%;padding:7px 10px 6px;border-radius:8px;box-shadow:0 1px 2px #00000021;background:var(--wa-white);position:relative}.bubble-row.from-me .bubble{background:var(--wa-light-green);border-radius:8px 0 8px 8px}.bubble-row:not(.from-me) .bubble{border-radius:0 8px 8px}.bubble-sender{font-size:12px;font-weight:600;color:var(--wa-teal);margin-bottom:2px}.bubble-text{font-size:14px;line-height:1.4;word-break:break-word;white-space:pre-wrap}.bubble-time{font-size:11px;color:var(--wa-text-secondary);text-align:right;margin-top:3px}.qr-view{display:flex;flex-direction:column;align-items:center;gap:20px;padding:40px;background:var(--wa-white);border-radius:16px;box-shadow:0 4px 24px #00000014;max-width:360px;width:100%}.qr-view h1{font-size:28px;color:var(--wa-dark-green)}.qr-view canvas{border:4px solid var(--wa-dark-green);border-radius:8px}.qr-hint{font-size:14px;color:var(--wa-text-secondary);text-align:center;max-width:280px;line-height:1.5}.settings{display:flex;flex-direction:column;height:100%;overflow:hidden}.settings-header{padding:20px 24px 16px;background:var(--wa-dark-green);color:#fff}.settings-header h2{font-size:18px;font-weight:600;margin-bottom:4px}.settings-header p{font-size:13px;opacity:.85}.settings-list{flex:1;overflow-y:auto;padding:8px 0}.settings-item{display:flex;align-items:center;padding:14px 20px;border-bottom:1px solid var(--wa-border);gap:16px}.settings-item-info{flex:1;min-width:0}.settings-item-name{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.settings-item-jid{font-size:12px;color:var(--wa-text-secondary);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toggle{position:relative;display:inline-block;width:46px;height:26px;cursor:pointer}.toggle input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;top:0;right:0;bottom:0;left:0;background:#ccc;border-radius:26px;transition:background .2s}.toggle-slider:before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px #0000004d}.toggle input:checked+.toggle-slider{background:var(--wa-green)}.toggle input:checked+.toggle-slider:before{transform:translate(20px)}.empty-state{flex:1;display:flex;align-items:center;justify-content:center;color:var(--wa-text-secondary);font-size:14px;padding:40px;text-align:center}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#00000026;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#00000040}