:root{--wa-green: #00a884;--wa-green-dark: #008f72;--wa-teal-header: #008069;--wa-bg: #eae6df;--wa-chat-bg: #efeae2;--wa-sidebar-bg: #ffffff;--wa-panel-bg: #f0f2f5;--wa-border: #e9edef;--wa-text: #111b21;--wa-text-secondary: #667781;--wa-bubble-out: #d9fdd3;--wa-bubble-in: #ffffff;--wa-bubble-bot: #e2f7cb;--wa-bubble-human: #d3e8fd;--wa-bubble-system: #ffecd2;--wa-selected: #f0f2f5;--wa-hover: #f5f6f6;--wa-unread: #25d366;--wa-input-bg: #ffffff;--wa-header-bg: #f0f2f5;--card-bg: #fff;--wa-primary: #00a884}.wa-app{display:flex;height:calc(100vh - 64px);width:100%;max-width:100%;background:var(--wa-bg)}.wa-sidebar{width:340px;min-width:300px;max-width:400px;background:var(--wa-sidebar-bg);border-right:1px solid var(--wa-border);display:flex;flex-direction:column;height:100%}.inbox{display:flex;flex-direction:column;flex:1;overflow:hidden}.inbox-header{padding:12px 16px;background:var(--wa-header-bg);border-bottom:1px solid var(--wa-border)}.inbox-title{font-size:20px;font-weight:700;color:var(--wa-text)}.inbox-search{padding:8px 12px;background:var(--wa-sidebar-bg)}.inbox-search-input{width:100%;padding:8px 12px;border-radius:8px;border:none;background:var(--wa-panel-bg);font-size:13px;outline:none;color:var(--wa-text)}.inbox-search-input::placeholder{color:var(--wa-text-secondary)}.inbox-filters{display:flex;gap:4px;padding:4px 12px 8px;overflow-x:auto}.inbox-filter-btn{padding:4px 10px;border-radius:16px;border:none;background:var(--wa-panel-bg);color:var(--wa-text-secondary);font-size:12px;cursor:pointer;white-space:nowrap;transition:all .15s}.inbox-filter-btn.active{background:var(--wa-green);color:#fff}.inbox-filter-btn:hover:not(.active){background:var(--wa-border)}.inbox-list{flex:1;overflow-y:auto}.inbox-empty{padding:32px 16px;text-align:center;color:var(--wa-text-secondary);font-size:13px}.inbox-item{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;border-bottom:1px solid var(--wa-border);transition:background .1s}.inbox-item:hover{background:var(--wa-hover)}.inbox-item.selected{background:var(--wa-selected)}.inbox-item.unread .inbox-item-name{font-weight:700}.inbox-item.unread .inbox-item-preview{font-weight:600;color:var(--wa-text)}.inbox-avatar{width:48px;height:48px;border-radius:50%;background:var(--wa-green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;flex-shrink:0}.inbox-item-info{flex:1;min-width:0}.inbox-item-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}.inbox-item-name{font-size:15px;font-weight:500;color:var(--wa-text);display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inbox-item-time{font-size:11px;color:var(--wa-text-secondary);flex-shrink:0;margin-left:8px}.inbox-item-bottom{display:flex;justify-content:space-between;align-items:center}.inbox-item-preview{font-size:13px;color:var(--wa-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.inbox-badge{background:var(--wa-unread);color:#fff;font-size:11px;font-weight:600;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px;flex-shrink:0;margin-left:6px}.wa-chat{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--wa-chat-bg);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='%23d4cfc6' fill-opacity='0.3'%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")}.chatview{display:flex;flex-direction:column;height:100%}.chatview-header{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--wa-header-bg);border-bottom:1px solid var(--wa-border);flex-shrink:0}.chatview-header-avatar{width:40px;height:40px;border-radius:50%;background:var(--wa-green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600}.chatview-header-info{flex:1}.chatview-header-name{font-size:15px;font-weight:600;color:var(--wa-text)}.chatview-header-status{font-size:12px;color:var(--wa-text-secondary)}.chatview-messages{flex:1;overflow-y:auto;padding:16px 48px;display:flex;flex-direction:column;gap:3px}.chatview-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--wa-text-secondary);text-align:center}.chatview-row{display:flex;width:100%}.row-left{justify-content:flex-start}.row-right{justify-content:flex-end}.chatview-bubble{max-width:65%;padding:6px 8px 4px;border-radius:8px;position:relative;box-shadow:0 1px .5px #0b141a21}.bubble-inbound{background:var(--wa-bubble-in);border-top-left-radius:0}.bubble-bot{background:var(--wa-bubble-bot);border-top-right-radius:0}.bubble-human{background:var(--wa-bubble-human);border-top-right-radius:0}.bubble-sender{font-size:11px;font-weight:600;color:var(--wa-green-dark);margin-bottom:2px}.bubble-content{font-size:14px;line-height:1.4;color:var(--wa-text);word-break:break-word;white-space:pre-wrap}.bubble-time{font-size:11px;color:var(--wa-text-secondary);text-align:right;margin-top:2px}.chatview-system{text-align:center;margin:8px 0;font-size:12px;color:var(--wa-text-secondary);background:var(--wa-bubble-system);padding:4px 12px;border-radius:8px;display:inline-block;align-self:center}.chatview-input-area{background:var(--wa-header-bg);border-top:1px solid var(--wa-border);padding:8px 16px;flex-shrink:0}.chatview-mode-toggle{display:flex;gap:4px;margin-bottom:6px}.mode-btn{padding:4px 10px;border-radius:12px;border:1px solid var(--wa-border);background:#fff;font-size:12px;cursor:pointer;color:var(--wa-text-secondary);transition:all .15s}.mode-btn.active{background:var(--wa-green);color:#fff;border-color:var(--wa-green)}.chatview-form{display:flex;gap:8px;align-items:center}.chatview-input{flex:1;padding:10px 14px;border-radius:8px;border:none;background:var(--wa-input-bg);font-size:14px;outline:none;color:var(--wa-text)}.chatview-input::placeholder{color:var(--wa-text-secondary)}.chatview-input.simulate{border:2px dashed var(--wa-green);background:#f0fff4}.chatview-send-btn{width:42px;height:42px;border-radius:50%;border:none;background:var(--wa-green);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;flex-shrink:0}.chatview-send-btn:hover:not(:disabled){background:var(--wa-green-dark)}.chatview-send-btn:disabled{opacity:.5;cursor:not-allowed}.wa-placeholder{display:flex;align-items:center;justify-content:center;height:100%;background:var(--wa-panel-bg)}.wa-placeholder-content{text-align:center;color:var(--wa-text-secondary)}.wa-placeholder-content h2{font-size:28px;font-weight:300;color:var(--wa-text);margin-bottom:8px}.wa-placeholder-content p{font-size:14px}.wa-context{width:300px;min-width:260px;max-width:340px;background:var(--wa-sidebar-bg);border-left:1px solid var(--wa-border);height:100%;overflow-y:auto}.context-panel{height:100%;display:flex;flex-direction:column}.context-header{padding:12px 16px;background:var(--wa-header-bg);border-bottom:1px solid var(--wa-border)}.context-header h3{font-size:16px;font-weight:600}.context-empty{padding:32px 16px;text-align:center;color:var(--wa-text-secondary);font-size:13px}.context-body{padding:12px 16px;flex:1;overflow-y:auto}.context-section{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--wa-border)}.context-section:last-child{border-bottom:none}.context-label{font-size:12px;font-weight:600;color:var(--wa-green);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.context-field{display:flex;align-items:flex-start;gap:8px;margin-bottom:4px;font-size:13px}.context-icon{flex-shrink:0;width:20px;text-align:center}.context-key{color:var(--wa-text-secondary);flex-shrink:0;font-weight:500}.context-value{color:var(--wa-text);word-break:break-word}.context-actions{text-align:center}.context-btn{width:100%;padding:10px 16px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;margin-bottom:8px}.context-btn.takeover{background:#3b82f6;color:#fff}.context-btn.takeover:hover:not(:disabled){background:#2563eb}.context-btn.handback{background:var(--wa-green);color:#fff}.context-btn.handback:hover:not(:disabled){background:var(--wa-green-dark)}.context-btn:disabled{opacity:.5;cursor:not-allowed}.context-status-label{font-size:12px;color:var(--wa-text-secondary)}.new-chat-btn{padding:10px 16px;border-radius:8px;border:none;background:var(--wa-green);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;display:inline-block;text-align:center;box-shadow:0 2px 4px #00a88433}.new-chat-btn:hover:not(:disabled){background:var(--wa-green-dark);box-shadow:0 2px 6px #00a8844d;transform:translateY(-1px)}.new-chat-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.chatview-reset-btn{padding:6px 14px;border-radius:6px;border:1px solid #e74c3c;background:transparent;color:#e74c3c;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;flex-shrink:0}.chatview-reset-btn:hover:not(:disabled){background:#e74c3c;color:#fff}.chatview-reset-btn:disabled{opacity:.5;cursor:not-allowed}.wa-app ::-webkit-scrollbar{width:6px}.wa-app ::-webkit-scrollbar-track{background:transparent}.wa-app ::-webkit-scrollbar-thumb{background:#0003;border-radius:3px}.wa-app ::-webkit-scrollbar-thumb:hover{background:#00000059}@media(max-width:900px){.wa-context{display:none}}@media(max-width:640px){.wa-sidebar{width:100%;max-width:100%}.wa-chat{display:none}}