:root{--wa-green-light: #00a884;--wa-green-dark: #008069;--wa-bg-default: #efeae2;--wa-bg-panel: #f0f2f5;--wa-bg-chat: #efeae2;--wa-msg-out: #d9fdd3;--wa-msg-in: #ffffff;--wa-text-primary: #111b21;--wa-text-secondary: #667781;--wa-border: #e9edef;--wa-icon: #54656f;--wa-system-bg: #d1d7db}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body,html{font-family:Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif;color:var(--wa-text-primary);background-color:var(--wa-system-bg);height:100%;width:100%;margin:0;overflow:hidden;position:fixed;overscroll-behavior-y:none}#root{height:100%;width:100%}.app-container{display:flex;height:100dvh;height:100%;width:100vw;max-width:1600px;background-color:var(--wa-bg-default);box-shadow:0 1px 1px #0b141a0f,0 2px 5px #0b141a33;margin:0 auto;overflow:hidden;position:relative}@media(min-width:1440px){body,html{position:relative;padding:19px 0;overflow:auto}.app-container{height:calc(100vh - 38px);width:calc(100vw - 38px)}}.sidebar{width:100%;background-color:#fff;border-right:1px solid var(--wa-border);display:flex;flex-direction:column}.app-container.chat-active .sidebar{display:none}.app-container:not(.chat-active) .chat-view,.app-container:not(.chat-active) .empty-chat{display:none}@media(min-width:769px){.sidebar{width:30%;min-width:350px;max-width:450px}.app-container.chat-active .sidebar,.app-container:not(.chat-active) .sidebar{display:flex}.app-container:not(.chat-active) .chat-view,.app-container:not(.chat-active) .empty-chat{display:flex}}.header{height:60px;background-color:var(--wa-bg-panel);display:flex;align-items:center;justify-content:space-between;padding:10px 16px}.avatar{width:40px;height:40px;border-radius:50%;background-color:#dfe5e7;overflow:hidden;display:flex;align-items:center;justify-content:center;object-fit:cover}.header-icons{display:flex;gap:24px;color:var(--wa-icon)}.header-icons span{cursor:pointer}.search-container{padding:8px 12px;background-color:#fff;border-bottom:1px solid var(--wa-border)}.search-box{background-color:var(--wa-bg-panel);border-radius:8px;display:flex;align-items:center;padding:0 12px;height:36px}.search-box svg{color:var(--wa-icon);margin-right:12px}.search-box input{border:none;background:transparent;width:100%;height:100%;outline:none;font-size:15px}.chat-list{flex:1;overflow-y:auto}.chat-item{display:flex;padding:0 12px;height:72px;cursor:pointer;background-color:#fff;align-items:center;transition:background-color .2s}.chat-item:hover,.chat-item.active{background-color:var(--wa-bg-panel)}.chat-item-avatar{margin-right:15px}.chat-item-content{flex:1;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid var(--wa-border);height:100%;padding-right:12px}.chat-item:last-child .chat-item-content{border-bottom:none}.chat-item-header{display:flex;justify-content:space-between;margin-bottom:3px}.chat-item-name{font-size:17px;color:var(--wa-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-item-time{font-size:12px;color:var(--wa-text-secondary);white-space:nowrap}.chat-item-message{font-size:14px;color:var(--wa-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px}.chat-view{flex:1;display:flex;flex-direction:column;background-color:var(--wa-bg-chat);position:relative}.chat-view:before{content:"";position:absolute;inset:0;background-image:url(https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png);opacity:.06;z-index:0;pointer-events:none}.chat-header{height:60px;background-color:var(--wa-bg-panel);display:flex;align-items:center;padding:10px 16px;z-index:1;border-left:1px solid var(--wa-border);cursor:pointer}.back-btn{display:none;margin-right:15px;color:var(--wa-icon);cursor:pointer}@media(max-width:768px){.back-btn{display:block}}.chat-header-info{margin-left:15px;flex:1;display:flex;flex-direction:column}.chat-header-name{font-size:16px;color:var(--wa-text-primary)}.chat-header-status{font-size:13px;color:var(--wa-text-secondary)}.chat-header-actions{display:flex;gap:24px;color:var(--wa-icon)}.messages-container{flex:1;overflow-y:auto;padding:20px 6%;display:flex;flex-direction:column;gap:16px;z-index:1;scroll-behavior:smooth}.message{max-width:75%;padding:12px 16px;border-radius:20px;position:relative;font-size:15px;line-height:1.5;color:var(--wa-text-primary);display:flex;flex-direction:column;box-shadow:0 4px 15px #0000000d;animation:crispSlideUp .4s cubic-bezier(.175,.885,.32,1.275) forwards;transform-origin:bottom center}@keyframes crispSlideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.message-in{background-color:var(--wa-msg-in);align-self:flex-start;border-bottom-left-radius:4px}.message-out{background-color:var(--wa-green-dark);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}.message-out .message-text{color:#fff}.message-out .message-time{color:#fffc}.message-text{margin-bottom:4px;word-wrap:break-word}.message-meta{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-top:2px}.message-time{font-size:11px;color:var(--wa-text-secondary)}.chat-link-btn{display:flex;margin-top:8px;padding:8px 12px;background-color:var(--wa-green-dark);color:#fff!important;text-decoration:none;border-radius:6px;font-weight:700;font-size:13.5px;text-align:center;justify-content:center;transition:opacity .2s;width:100%}.message-options{display:flex;flex-direction:column;gap:8px;margin-top:10px;border-top:1px solid rgba(0,0,0,.05);padding-top:8px}.option-btn{background-color:transparent;border:1px solid var(--wa-green-light);color:var(--wa-green-dark);padding:8px 12px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.option-btn:hover{background-color:var(--wa-green-light);color:#fff}.option-btn:disabled{opacity:.5;cursor:not-allowed}.typing-indicator{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 18px;background-color:var(--wa-msg-in);border-radius:20px 20px 20px 4px;width:max-content;box-shadow:0 4px 15px #0000000d;animation:crispSlideUp .3s ease-out forwards}.typing-dot{width:8px;height:8px;background-color:var(--wa-green-light);border-radius:50%;animation:fluidTyping 1.4s infinite ease-in-out both}.typing-dot:nth-child(1){animation-delay:-.32s}.typing-dot:nth-child(2){animation-delay:-.16s}.typing-dot:nth-child(3){animation-delay:0s}@keyframes fluidTyping{0%,80%,to{transform:scale(0);opacity:.4}40%{transform:scale(1);opacity:1}}.input-area{min-height:70px;background-color:#f7f9fa;display:flex;align-items:center;padding:12px 16px calc(env(safe-area-inset-bottom,12px) + 20px) 16px;gap:12px;z-index:1;border-top:1px solid rgba(0,0,0,.05)}.input-icon{color:var(--wa-icon);cursor:pointer;padding:8px;transition:transform .2s ease,color .2s ease}.input-icon:hover{transform:scale(1.1);color:var(--wa-green-dark)}.input-box{flex:1;background-color:#fff;border-radius:24px;padding:12px 18px;display:flex;align-items:center;box-shadow:0 2px 8px #0000000a;transition:box-shadow .3s ease,border .3s ease;border:1px solid transparent}.input-box:focus-within{box-shadow:0 4px 12px #00a88426;border:1px solid rgba(0,168,132,.3)}.input-box input{border:none;background:transparent;width:100%;outline:none;font-size:15px;color:var(--wa-text-primary);font-family:inherit}.input-btn{background:var(--wa-green-light);border:none;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;box-shadow:0 3px 8px #00a8844d;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),background .2s}.input-btn svg{margin-left:-2px}.input-btn:hover{transform:scale(1.08);background:var(--wa-green-dark)}.input-btn:disabled{opacity:.5;cursor:not-allowed;transform:scale(1)}.empty-chat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--wa-bg-panel);color:var(--wa-text-secondary);border-bottom:6px solid var(--wa-green-light);z-index:1}.empty-chat h1{font-weight:300;color:#41525d;margin-top:30px}.empty-chat p{margin-top:15px;font-size:14px;text-align:center}.admin-container{display:flex;position:fixed;top:0;left:0;height:100vh;width:100vw;z-index:9999;background-color:#161717;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden}.admin-sidebar{width:520px;background-color:#161717;border-right:1px solid #202121;display:flex;flex-direction:column;transition:width .3s ease}@media(min-width:1440px){.admin-sidebar{width:600px}}.admin-header{padding:15px 20px;background-color:#202121;display:flex;flex-direction:column;gap:15px;border-bottom:1px solid #202121}.admin-header h2{font-size:16px;margin:0;color:#e9edef;flex:1}.refresh-btn{background:none;border:none;cursor:pointer;color:#aebac1;transition:color .2s}.refresh-btn:hover{color:#e9edef}.admin-search-container{width:100%}.admin-search-container input{width:100%;padding:10px 15px 10px 40px;border-radius:8px;border:none;background-color:#2a2b2b;color:#e9edef;font-size:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238696a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center;background-size:16px;outline:none}.admin-search-container input:focus{background-color:#202121;border-bottom:2px solid #00a884;border-radius:8px 8px 0 0}.admin-filter-pills{display:flex;gap:8px;width:100%;overflow-x:auto}.admin-filter-pills::-webkit-scrollbar{display:none}.filter-pill{background-color:transparent;color:#8696a0;border:1px solid #3B3D3D;border-radius:16px;padding:6px 14px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.filter-pill:hover{background-color:#202121}.filter-pill.active{background-color:#112a23;color:#00a884;border-color:#112a23}.admin-sidebar .chat-list{flex:1;overflow-y:auto}.admin-sidebar .chat-item{display:flex;padding:0 15px;height:76px;border-bottom:1px solid #202121;cursor:pointer;align-items:center;gap:15px;position:relative;transition:all .2s ease-in-out;background-color:transparent}.admin-sidebar .chat-item:hover{background-color:#202121}.admin-sidebar .chat-item.active{background-color:#2a2b2b}.admin-sidebar .chat-avatar{width:49px;height:49px;border-radius:50%;background-color:#00a884;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}.admin-sidebar .chat-info{display:flex;flex-direction:column;flex:1;overflow:hidden}.admin-sidebar .chat-name{font-size:17px;font-weight:400;color:#fff}.admin-sidebar .chat-email{font-size:13px;color:#8696a0}.admin-sidebar .chat-preview{font-size:14px;color:#8696a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-sidebar .chat-time{font-size:12px;color:#8696a0;white-space:nowrap}.admin-sidebar .chat-status{width:12px;height:12px;border-radius:50%;position:absolute;top:50px;right:24px}.admin-sidebar .chat-status.active{background-color:#00a884}.admin-sidebar .chat-status.closed{background-color:#8696a0}.admin-main{flex:1;display:flex;flex-direction:column;background-color:#161717;position:relative;z-index:1}.admin-main:before{content:"";position:absolute;inset:0;background-image:url(https://web.whatsapp.com/img/bg-chat-tile-dark_a4be512e7195b6b733d9110b408f075d.png);background-repeat:repeat;opacity:.15;z-index:-1;pointer-events:none}.admin-chat-header{padding:15px 20px;background-color:#202121;border-bottom:1px solid #202121;display:flex;justify-content:space-between;align-items:center;z-index:2}.admin-chat-title h3{margin:0;color:#fff;font-size:16px}.admin-chat-title span{font-size:12px;color:#8696a0}.admin-chat-actions{display:flex;gap:10px}.toggle-ai-btn{display:flex;align-items:center;gap:8px;border:none;padding:8px 12px;border-radius:20px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}.toggle-ai-btn.on{background-color:#103d2c;color:#fff}.toggle-ai-btn.off{background-color:#3f1d25;color:#f191aa}.toggle-ai-btn:hover{opacity:.9}.admin-messages-container{flex:1;padding:20px 6%;overflow-y:auto;display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth;z-index:1;position:relative}.admin-msg{display:flex;width:100%}.admin-msg.msg-client{justify-content:flex-end}.admin-msg.msg-bot{justify-content:flex-start}.msg-bubble{max-width:75%;padding:12px 16px;border-radius:20px;box-shadow:0 4px 15px #0000000d;position:relative;display:flex;flex-direction:column;line-height:1.5;transform-origin:bottom center}.msg-client .msg-bubble{background-color:#103d2c;border-top-right-radius:0}.msg-bot .msg-bubble{background-color:#202121;border-top-left-radius:4px}.msg-text{font-size:14px;color:#fff;line-height:1.4;white-space:pre-wrap;margin-bottom:12px}.msg-time{font-size:11px;color:#8696a0;align-self:flex-end;position:absolute;bottom:4px;right:8px}.admin-reply-area{padding:18px 24px;background-color:#202121;border-top:1px solid #202121;display:flex;gap:16px;align-items:center;z-index:2;min-height:80px}.admin-reply-area input{flex:1;padding:18px 24px;border-radius:30px;border:1px solid transparent;background:#2a2b2b;color:#fff;font-size:16px;outline:none;box-shadow:0 2px 8px #0000000a;transition:box-shadow .3s ease,border .3s ease}.admin-reply-area input:focus-within{box-shadow:0 4px 12px #00a88426;border:1px solid #00a884}.admin-reply-area input:disabled{background:#202121}.admin-reply-area button{background:#00a884;border:none;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .2s;color:#fff}.admin-reply-area button:hover:not(:disabled){background:#008f6f;transform:scale(1.05)}.admin-reply-area button:disabled{background:#2a2b2b;color:#8696a0;cursor:not-allowed}.archived-notice{justify-content:center;color:#f191aa;font-weight:500;background:#3f1d25;font-size:13px;padding:15px}.unread-badge{width:12px;height:12px;background-color:#00a884;border-radius:50%;position:absolute;right:15px;top:40px}.archive-btn{display:flex;align-items:center;gap:8px;border:none;padding:8px 12px;border-radius:20px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;background-color:#2a2b2b;color:#aebac1}.archive-btn:hover{background-color:#3b3d3d;color:#e9edef}.admin-empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#667781}.admin-empty-state h2{font-weight:300;margin-top:20px;margin-bottom:5px}.loading,.empty-msg{text-align:center;padding:30px;color:#667781;font-size:14px}.chat-source{font-size:10px;color:#8b5cf6;background:#f3f0ff;padding:2px 6px;border-radius:4px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:max-content;max-width:100%;margin-top:4px;font-weight:500}.admin-login-container{display:flex;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;align-items:center;justify-content:center;background-color:#161717;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.admin-login-box{background:#202121;padding:40px;border-radius:12px;box-shadow:0 4px 12px #0003;width:100%;max-width:400px;display:flex;flex-direction:column;gap:20px}.login-header{text-align:center;color:#e9edef}.login-header h2{margin:15px 0 5px;font-size:24px}.login-header p{color:#8696a0;font-size:14px;margin:0}.form-group{display:flex;flex-direction:column}.form-group input{padding:12px 15px;border:1px solid #3B3D3D;background:#2a2b2b;color:#e9edef;border-radius:8px;font-size:16px;outline:none;transition:border-color .2s}.form-group input:focus{border-color:#00a884}.login-btn{background-color:#00a884;color:#fff;border:none;padding:14px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background-color .2s}.login-btn:hover{background-color:#008f6f}.login-btn:disabled{background-color:#2a2b2b;color:#8696a0;cursor:not-allowed}.login-error{background-color:#3f1d25;color:#f191aa;padding:10px;border-radius:6px;font-size:14px;text-align:center;border:1px solid #5a2a35}.loading-chat-spinner{display:flex;justify-content:center;align-items:center;min-height:100px}.spinner-icon{width:28px;height:28px;border:3px solid #103D2C;border-top-color:#00a884;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.chat-link-btn{display:flex;margin-top:8px;padding:8px 12px;background-color:#103d2c;color:#fff!important;text-decoration:none;border-radius:6px;font-weight:700;font-size:13.5px;text-align:center;justify-content:center;transition:opacity .2s;width:100%}.chat-link-btn:hover{opacity:.9}