@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap";
:root{--bg-app:#0b141a;--bg-sidebar:#111b21;--bg-header:#202c33;--bg-chat:#0c1317;--bg-input:#202c33;--bg-bubble-in:#202c33;--bg-bubble-out:#005c4b;--border-color:#222e35;--text-primary:#e9edef;--text-secondary:#8696a0;--text-muted:#667781;--accent-wa:#25d366;--accent-wa-hover:#1ebd56;--accent-blue:#53bdeb;--accent-amber:#f59e0b;--accent-red:#ea4335;--tick-read:#53bdeb;--tick-unread:#8696a0;--modal-overlay:#0b141abf;--modal-bg:#1f2c34;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-heading:"Outfit", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100dvh;margin:0;padding:0;overflow:hidden}body{font-family:var(--font-sans);background-color:var(--bg-app);color:var(--text-primary);-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#8696a033;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#8696a066}.app-container{background:var(--bg-app);width:100vw;max-width:100vw;height:100vh;display:flex;overflow:hidden}.nav-rail{background:var(--bg-header);border-right:1px solid var(--border-color);z-index:10;flex-direction:column;flex-shrink:0;align-items:center;gap:20px;width:68px;height:100vh;padding:16px 0;display:flex}.rail-logo{color:#fff;background:linear-gradient(135deg,#25d366 0%,#128c7e 100%);border-radius:12px;justify-content:center;align-items:center;width:42px;height:42px;margin-bottom:8px;display:flex;box-shadow:0 4px 14px #25d36659}.rail-btn{width:44px;height:44px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative}.rail-btn:hover{color:var(--text-primary);background:#ffffff14}.rail-btn.active{color:var(--accent-wa);background:#25d36626}.rail-btn.active:before{content:"";background:var(--accent-wa);border-radius:0 3px 3px 0;width:3px;position:absolute;top:10px;bottom:10px;left:0}.sidebar{background:var(--bg-sidebar);border-right:1px solid var(--border-color);flex-direction:column;flex-shrink:0;width:360px;min-width:320px;height:100vh;display:flex;overflow:hidden}.sidebar-header{background:var(--bg-sidebar);border-bottom:1px solid #ffffff0a;flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.sidebar-title{font-family:var(--font-heading);color:var(--text-primary);white-space:nowrap;align-items:center;gap:8px;font-size:18px;font-weight:700;display:flex}.status-dot{background:var(--accent-wa);width:8px;height:8px;box-shadow:0 0 8px var(--accent-wa);border-radius:50%}.sidebar-search{background:var(--bg-sidebar);padding:10px 14px}.search-input-wrapper{background:var(--bg-header);border:1px solid #0000;border-radius:8px;align-items:center;gap:10px;padding:8px 12px;transition:border-color .2s;display:flex}.search-input-wrapper:focus-within{border-color:#25d36680}.search-input{color:var(--text-primary);background:0 0;border:none;outline:none;width:100%;font-size:14px}.search-input::placeholder{color:var(--text-muted)}.conversations-list{flex:1;overflow-y:auto}.conv-item{cursor:pointer;border-bottom:1px solid #ffffff08;align-items:center;gap:12px;padding:12px 16px;transition:background .15s;display:flex}.conv-item:hover{background:#ffffff0a}.conv-item.active{background:#2a3942}.conv-avatar{color:#fff;text-transform:uppercase;background:linear-gradient(135deg,#0284c7 0%,#0369a1 100%);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:46px;height:46px;font-size:16px;font-weight:600;display:flex}.conv-body{flex:1;min-width:0}.conv-top{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.conv-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:600;overflow:hidden}.conv-time{color:var(--text-muted);font-size:11px}.conv-bottom{justify-content:space-between;align-items:center;gap:6px;display:flex}.conv-preview{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:4px;font-size:13px;display:flex;overflow:hidden}.conv-badge{background:var(--accent-wa);color:#0b141a;border-radius:10px;flex-shrink:0;padding:2px 6px;font-size:11px;font-weight:700}.chat-panel{background:var(--bg-chat);flex-direction:column;flex:1;min-width:0;height:100vh;min-height:0;display:flex;position:relative;overflow:hidden}.chat-empty{color:var(--text-muted);text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;padding:20px;display:flex}.chat-empty-icon{width:80px;height:80px;color:var(--accent-wa);background:#25d3661a;border-radius:20px;justify-content:center;align-items:center;display:flex}.chat-header{background:var(--bg-header);border-bottom:1px solid var(--border-color);z-index:5;flex-shrink:0;justify-content:space-between;align-items:center;height:64px;padding:0 20px;display:flex}.chat-header-info{align-items:center;gap:12px;display:flex}.chat-header-name{color:var(--text-primary);font-size:16px;font-weight:600}.chat-header-phone{color:var(--text-secondary);font-size:12px}.session-pill{color:#34d399;background:#25d36626;border-radius:20px;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:500;display:inline-flex}.session-pill.expired{color:#fbbf24;background:#f59e0b26}.chat-messages{background-image:radial-gradient(#ffffff08 1px,#0000 1px);background-size:20px 20px;flex-direction:column;flex:1;gap:6px;min-height:0;padding:16px 28px;display:flex;overflow-y:auto}.msg-row{width:100%;display:flex}.msg-row.outbound{justify-content:flex-end}.msg-row.inbound{justify-content:flex-start}.msg-bubble{word-break:break-word;border-radius:8px;flex-direction:column;width:fit-content;min-width:70px;max-width:65%;padding:7px 10px 5px 12px;font-size:14px;line-height:1.42;animation:.15s forwards fadeIn;display:inline-flex;position:relative;box-shadow:0 1px 2px #00000040}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.msg-bubble.outbound{background:var(--bg-bubble-out);color:#e9edef;border-top-right-radius:2px}.msg-bubble.inbound{background:var(--bg-bubble-in);color:#e9edef;border-top-left-radius:2px}.msg-content{color:#e9edef;white-space:pre-wrap;word-break:break-word;font-size:14px}.msg-media-img{cursor:pointer;object-fit:cover;border-radius:6px;max-width:100%;max-height:280px;margin-bottom:6px;display:block}.msg-media-video{border-radius:6px;max-width:100%;max-height:280px;margin-bottom:6px;display:block}.msg-media-audio{max-width:100%;margin:4px 0}.msg-media-doc{color:var(--text-primary);background:#00000040;border:1px solid #ffffff14;border-radius:6px;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px;padding:8px 12px;text-decoration:none;transition:background .15s;display:flex}.msg-media-doc:hover{background:#0006}.msg-interactive-card{flex-direction:column;gap:6px;display:flex}.msg-interactive-btns{border-top:1px solid #ffffff1a;flex-direction:column;gap:5px;margin-top:6px;padding-top:8px;display:flex}.interactive-btn-pill{color:var(--accent-blue);text-align:center;background:#ffffff14;border:1px solid #ffffff1f;border-radius:6px;padding:6px 12px;font-size:13px;font-weight:600;display:block}.attach-menu{background:var(--bg-sidebar);border:1px solid var(--border-color);z-index:50;border-radius:12px;flex-direction:column;gap:2px;min-width:220px;padding:6px;animation:.15s forwards fadeIn;display:flex;position:absolute;bottom:64px;left:16px;box-shadow:0 10px 30px #00000080}.attach-menu-item{color:var(--text-primary);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:8px;align-items:center;gap:10px;width:100%;padding:8px 12px;font-size:13.5px;transition:background .15s;display:flex}.attach-menu-item:hover{background:#ffffff14}.msg-meta{color:#e9edef99;align-self:flex-end;align-items:center;gap:4px;margin-top:2px;font-size:11px;display:flex}.msg-tick{color:var(--tick-unread);font-size:12px}.msg-tick.read{color:var(--tick-read)}.template-tag{text-transform:uppercase;background:#ffffff1a;border-radius:4px;margin-bottom:4px;padding:2px 6px;font-size:11px;font-weight:600;display:inline-block}.msg-bubble{position:relative}.msg-bubble:hover .msg-actions{opacity:1;pointer-events:auto}.msg-actions{opacity:0;pointer-events:none;z-index:10;align-items:center;gap:4px;transition:opacity .15s;display:flex;position:absolute;top:4px;right:4px}.msg-action-btn{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#8696a0;cursor:pointer;background:#111b21d9;border:1px solid #ffffff1a;border-radius:4px;justify-content:center;align-items:center;width:22px;height:22px;transition:all .15s;display:flex}.msg-action-btn:hover{color:var(--accent-red);background:#ea43352e;border-color:#ea433566}.scroll-bottom-btn{color:#aebac1;cursor:pointer;z-index:25;background:#202c33;border:1px solid #ffffff24;border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;transition:all .2s cubic-bezier(.16,1,.3,1);animation:.15s forwards fadeIn;display:flex;position:absolute;bottom:85px;right:24px;box-shadow:0 4px 14px #00000080}.scroll-bottom-btn:hover{color:var(--text-primary);background:#2a3942;transform:translateY(-2px);box-shadow:0 6px 18px #000000a6}.btn-danger-ghost{color:#ff6b6b;cursor:pointer;background:#ea433514;border:1px solid #ea433540;border-radius:8px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:500;transition:all .15s;display:inline-flex}.btn-danger-ghost:hover{color:#fff;background:#ea433533;border-color:#ea433580}.chat-composer{background:var(--bg-header);border-top:1px solid var(--border-color);flex-shrink:0;align-items:center;gap:12px;padding:10px 16px;display:flex}.composer-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex}.composer-btn:hover{color:var(--text-primary);background:#ffffff14}.composer-input{background:var(--bg-input);color:var(--text-primary);border:none;border-radius:8px;outline:none;flex:1;padding:10px 14px;font-size:14.5px}.composer-send{background:var(--accent-wa);color:#0b141a;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:transform .15s,background .2s;display:flex}.composer-send:hover{background:var(--accent-wa-hover);transform:scale(1.05)}.modal-overlay{background:var(--modal-overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-card{background:var(--modal-bg);border:1px solid var(--border-color);border-radius:16px;flex-direction:column;width:100%;max-width:680px;max-height:85vh;display:flex;overflow:hidden;box-shadow:0 20px 40px #00000080}.modal-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.modal-title{font-family:var(--font-heading);color:var(--text-primary);font-size:18px;font-weight:700}.modal-body{flex:1;padding:20px;overflow-y:auto}.modal-footer{border-top:1px solid var(--border-color);justify-content:flex-end;align-items:center;gap:12px;padding:14px 20px;display:flex}.form-group{margin-bottom:16px}.form-label{color:var(--text-secondary);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.form-input{background:var(--bg-sidebar);border:1px solid var(--border-color);width:100%;color:var(--text-primary);border-radius:8px;outline:none;padding:10px 14px;font-size:14px;transition:border-color .2s}.form-input:focus{border-color:var(--accent-wa)}.btn-primary{background:var(--accent-wa);color:#0b141a;cursor:pointer;border:none;border-radius:8px;align-items:center;gap:8px;padding:10px 18px;font-size:14px;font-weight:600;transition:background .2s;display:inline-flex}.btn-primary:hover{background:var(--accent-wa-hover)}.btn-secondary{color:var(--text-primary);border:1px solid var(--border-color);cursor:pointer;background:#ffffff14;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:500;transition:background .2s}.btn-secondary:hover{background:#ffffff1f}.template-item{border:1px solid var(--border-color);cursor:pointer;border-radius:8px;margin-bottom:8px;padding:12px;transition:all .15s}.template-item:hover{background:#25d3660a;border-color:#25d36680}.template-item.selected{border-color:var(--accent-wa);background:#25d3661a}.login-container{background-color:var(--bg-app);background-image:radial-gradient(circle at 50% 0,#25d3661f 0%,#0000 55%),radial-gradient(circle at 10% 90%,#53bdeb0f 0%,#0000 40%);justify-content:center;align-items:center;width:100vw;min-height:100vh;padding:20px;display:flex;position:relative;overflow:hidden}.login-card{border:1px solid var(--border-color);z-index:2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#111b21;border-radius:20px;width:100%;max-width:420px;padding:40px 32px;animation:.35s ease-out loginFadeIn;position:relative;box-shadow:0 24px 60px #0009,0 0 0 1px #ffffff0a}@keyframes loginFadeIn{0%{opacity:0;transform:translateY(12px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.login-header{text-align:center;margin-bottom:28px}.login-logo{color:#fff;background:linear-gradient(135deg,#25d366 0%,#128c7e 100%);border-radius:16px;justify-content:center;align-items:center;width:58px;height:58px;margin-bottom:16px;display:inline-flex;box-shadow:0 8px 24px #25d36666}.login-title{font-family:var(--font-heading);color:var(--text-primary);letter-spacing:-.02em;margin-bottom:6px;font-size:24px;font-weight:700}.login-subtitle{color:var(--text-secondary);font-size:13.5px}.login-form{flex-direction:column;gap:18px;display:flex}.login-field{flex-direction:column;gap:6px;display:flex}.login-label{text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);font-size:12.5px;font-weight:600}.login-input-wrap{align-items:center;display:flex;position:relative}.login-input-icon{color:var(--text-muted);pointer-events:none;position:absolute;left:14px}.login-input{border:1px solid var(--border-color);width:100%;height:46px;color:var(--text-primary);font-size:14.5px;font-family:var(--font-sans);background:#202c33;border-radius:10px;outline:none;padding:0 14px 0 42px;transition:all .2s}.login-input.has-toggle{padding-right:42px}.login-input:focus{border-color:var(--accent-wa);background:#233139;box-shadow:0 0 0 3px #25d36633}.login-toggle-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:4px;transition:color .15s;display:flex;position:absolute;right:12px}.login-toggle-btn:hover{color:var(--text-primary)}.login-submit-btn{background:var(--accent-wa);color:#0b141a;height:46px;font-size:15px;font-weight:600;font-family:var(--font-sans);cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;margin-top:6px;transition:all .2s;display:flex;box-shadow:0 4px 16px #25d36640}.login-submit-btn:hover:not(:disabled){background:var(--accent-wa-hover);transform:translateY(-1px);box-shadow:0 6px 20px #25d36659}.login-submit-btn:disabled{opacity:.65;cursor:not-allowed}.login-error-alert{color:#ff6b6b;background:#ea43351f;border:1px solid #ea433559;border-radius:10px;align-items:center;gap:10px;padding:12px 14px;font-size:13.5px;display:flex}.default-user-hint{background:#202c3399;border:1px dashed #53bdeb40;border-radius:12px;flex-direction:column;gap:8px;margin-top:24px;padding:14px 16px;display:flex}.default-user-header{color:var(--accent-blue);justify-content:space-between;align-items:center;font-size:12px;font-weight:600;display:flex}.default-user-meta{color:var(--text-secondary);font-size:12.5px;line-height:1.4}.default-user-meta code{color:#e9edef;background:#111b21;border-radius:4px;padding:2px 6px;font-family:monospace}.quick-fill-btn{color:var(--accent-blue);cursor:pointer;background:#53bdeb1f;border:1px solid #53bdeb4d;border-radius:6px;align-self:flex-start;padding:6px 12px;font-size:12px;font-weight:500;transition:all .15s}.quick-fill-btn:hover{color:#fff;background:#53bdeb33}.nav-rail-bottom{flex-direction:column;align-items:center;gap:12px;margin-top:auto;display:flex}.rail-user-avatar{color:#fff;cursor:pointer;background:linear-gradient(135deg,#128c7e 0%,#075e54 100%);border:2px solid #25d36666;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:14px;font-weight:600;transition:transform .2s,border-color .2s;display:flex}.rail-user-avatar:hover{border-color:var(--accent-wa);transform:scale(1.05)}.rail-logout-btn{width:44px;height:44px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;transition:all .2s;display:flex}.rail-logout-btn:hover{color:var(--accent-red);background:#ea433526}.ecom-snippet-bar{border-top:1px solid var(--border-color);white-space:nowrap;background:#202c33d9;flex-shrink:0;align-items:center;gap:8px;padding:6px 16px;display:flex;overflow-x:auto}.ecom-chip{color:var(--text-secondary);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff14;border-radius:14px;align-items:center;gap:5px;padding:4px 10px;font-size:12px;font-weight:500;transition:all .2s;display:inline-flex}.ecom-chip:hover{color:var(--accent-wa);background:#25d36626;border-color:#25d3664d}.customer-tag{letter-spacing:.3px;text-transform:uppercase;border-radius:4px;align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-flex}.customer-tag.vip{color:var(--accent-amber);background:#f59e0b26;border:1px solid #f59e0b4d}.customer-tag.lead{color:var(--accent-blue);background:#53bdeb26;border:1px solid #53bdeb4d}.customer-tag.cod{color:var(--accent-red);background:#ea433526;border:1px solid #ea43354d}.customer-tag.shipped{color:var(--accent-wa);background:#25d36626;border:1px solid #25d3664d}.broadcast-grid{grid-template-columns:1fr 380px;gap:24px;margin-top:20px;display:grid}.broadcast-card{background:var(--bg-sidebar);border:1px solid var(--border-color);border-radius:12px;padding:24px}.progress-container{background:#ffffff14;border-radius:8px;height:10px;margin:12px 0;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--accent-wa) 0%, #128c7e 100%);border-radius:8px;height:100%;transition:width .3s}.stat-pills{gap:12px;margin-bottom:16px;display:flex}.stat-pill{background:var(--bg-header);border:1px solid var(--border-color);text-align:center;border-radius:8px;flex:1;padding:12px}.stat-pill-val{font-size:20px;font-weight:700;font-family:var(--font-heading)}.stat-pill-lbl{color:var(--text-secondary);text-transform:uppercase;margin-top:2px;font-size:11px}.campaign-log-list{border:1px solid var(--border-color);background:var(--bg-chat);border-radius:8px;max-height:280px;font-family:monospace;font-size:12px;overflow-y:auto}.campaign-log-item{border-bottom:1px solid #ffffff0a;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.role-badge{text-transform:uppercase;letter-spacing:.4px;border-radius:6px;align-items:center;gap:4px;padding:3px 8px;font-size:11px;font-weight:700;display:inline-flex}.role-badge.admin{color:var(--accent-wa);background:#25d36626;border:1px solid #25d3664d}.role-badge.manager{color:var(--accent-blue);background:#53bdeb26;border:1px solid #53bdeb4d}.role-badge.agent{color:#c084fc;background:#a855f726;border:1px solid #a855f74d}.acl-table{border-collapse:collapse;width:100%;margin-top:16px}.acl-table th{text-align:left;text-transform:uppercase;color:var(--text-secondary);border-bottom:1px solid var(--border-color);background:#ffffff05;padding:12px 16px;font-size:12px}.acl-table td{border-bottom:1px solid var(--border-color);padding:14px 16px;font-size:14px}.acl-table tr:hover td{background:#ffffff05}.template-create-grid{grid-template-columns:1.2fr .8fr;gap:24px;display:grid}@media (max-width:850px){.template-create-grid{grid-template-columns:1fr}}.preview-phone-card{background:var(--bg-chat);border:1px solid var(--border-color);border-radius:12px;flex-direction:column;padding:16px;display:flex}.wa-preview-bubble{color:#e9edef;word-break:break-word;background:#005c4b;border-radius:8px 8px 8px 0;padding:12px 14px;font-size:13.5px;position:relative;box-shadow:0 1px 2px #0000004d}.wa-preview-header{color:#fff;margin-bottom:6px;font-size:14px;font-weight:700}.wa-preview-media{height:120px;color:var(--text-secondary);background:#0000004d;border:1px dashed #fff3;border-radius:6px;justify-content:center;align-items:center;margin-bottom:8px;font-size:12px;display:flex}.wa-preview-body{white-space:pre-wrap;line-height:1.45}.wa-preview-footer{color:#fff9;margin-top:6px;font-size:11px}.wa-preview-btn{text-align:center;color:var(--accent-wa);background:#ffffff14;border-top:1px solid #ffffff1a;border-radius:0 0 6px 6px;justify-content:center;align-items:center;gap:6px;margin-top:8px;padding:8px;font-size:13px;font-weight:600;display:flex}.chat-date-divider{justify-content:center;align-items:center;width:100%;margin:14px 0 8px;display:flex}.chat-date-divider span{color:var(--text-secondary);letter-spacing:.2px;background:#111b21e6;border:1px solid #ffffff14;border-radius:12px;padding:4px 14px;font-size:11.5px;font-weight:500;box-shadow:0 1px 2px #00000040}.logs-panel{background:var(--bg-chat);flex:1;min-width:0;height:100vh;padding:30px 40px;overflow-y:auto}.logs-container{max-width:1100px;margin:0 auto}.logs-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;display:flex}.logs-title{font-family:var(--font-heading);color:var(--text-primary);align-items:center;gap:10px;font-size:24px;font-weight:700;display:flex}.logs-subtitle{color:var(--text-secondary);margin-top:4px;font-size:14px}.logs-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;display:flex}.logs-filters{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.filter-chip{background:var(--bg-header);border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;border-radius:20px;padding:6px 14px;font-size:12px;font-weight:500;transition:all .15s}.filter-chip:hover{color:var(--text-primary);border-color:#ffffff26}.filter-chip.active{border-color:var(--accent-wa);color:var(--accent-wa);background:#25d36626;font-weight:600}.logs-card-list{flex-direction:column;gap:10px;display:flex}.logs-empty{text-align:center;background:var(--bg-sidebar);border:1px dashed var(--border-color);border-radius:12px;padding:60px 20px}.webhook-log-item{background:var(--bg-sidebar);border:1px solid var(--border-color);border-radius:10px;padding:12px 16px;transition:border-color .15s}.webhook-log-item:hover{border-color:#ffffff1f}.log-item-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;display:flex}.log-badge{text-transform:uppercase;letter-spacing:.3px;border-radius:4px;padding:2px 7px;font-size:10.5px;font-weight:700}.log-badge.source-meta_cloud_webhook{color:#53bdeb;background:#53bdeb26}.log-badge.source-wordpress_sync,.log-badge.source-wordpress_status{color:#fbbf24;background:#f59e0b26}.log-badge.type-inbound_message{color:var(--accent-wa);background:#25d36626}.log-badge.type-status_update{color:#c084fc;background:#a855f726}.log-badge.type-verification{color:#60a5fa;background:#3b82f626}.log-badge.type-error{color:var(--accent-red);background:#ea433526}.log-phone{color:var(--text-primary);background:#ffffff0d;border-radius:4px;padding:2px 6px;font-family:monospace;font-size:12px;font-weight:600}.log-time{color:var(--text-muted);align-items:center;gap:4px;font-size:11px;display:flex}.log-item-body{color:var(--text-primary);word-break:break-word;font-size:13.5px;line-height:1.4}.mobile-back-btn{display:none}.page-panel-mobile{background:var(--bg-chat);flex:1;min-width:0;padding:30px 40px;overflow-y:auto}@media (max-width:768px){.app-container{flex-direction:row;width:100vw;max-width:100vw;height:100dvh;position:relative;overflow:hidden}.nav-rail{border-right:none;border-top:1px solid var(--border-color);z-index:100;background:#111b21;flex-direction:row;justify-content:space-around;gap:0;width:100vw;height:56px;padding:0 4px;position:fixed;bottom:0;left:0;right:0}.nav-rail.hide-mobile,.rail-logo,.nav-rail-bottom{display:none!important}.rail-btn{border-radius:8px;width:50px;height:50px}.rail-btn.active:before{border-radius:0 0 3px 3px;width:auto;height:3px;inset:0 10px auto}.sidebar{border-right:none;flex-direction:column;width:100vw;min-width:100vw;height:calc(100dvh - 56px);display:flex;overflow-y:auto}.sidebar.mobile-hidden{display:none!important}.chat-panel{z-index:60;background:var(--bg-chat);flex-direction:column!important;width:100vw!important;height:100dvh!important;max-height:100dvh!important;display:flex!important;position:fixed!important;inset:0!important;overflow:hidden!important}.chat-panel.mobile-hidden{display:none!important}.mobile-back-btn{width:36px;height:36px;color:var(--text-primary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-right:4px;display:flex!important}.mobile-back-btn:hover{background:#ffffff14}.chat-header{flex-shrink:0;gap:8px;height:58px;padding:0 10px}.chat-header-info{gap:8px;min-width:0}.chat-header-name{text-overflow:ellipsis;white-space:nowrap;max-width:130px;font-size:14.5px;overflow:hidden}.chat-header-phone{font-size:11px}.header-tags-container,.session-pill .session-label{display:none!important}.session-pill{padding:5px 7px}.btn-text-responsive{display:none!important}.chat-header .btn-secondary,.chat-header .btn-danger-ghost{padding:6px 8px;font-size:12px}.chat-messages{gap:5px;padding:10px 8px;flex:1!important;min-height:0!important;overflow-y:auto!important}.msg-bubble{font-size:13.5px;max-width:86%!important}.msg-media-img,.msg-media-video{max-height:220px!important}.ecom-snippet-bar{-webkit-overflow-scrolling:touch;background:#111b21f2;border-top:1px solid #ffffff0d;flex-wrap:nowrap;gap:6px;padding:6px 10px;overflow-x:auto;flex-shrink:0!important}.ecom-chip{white-space:nowrap;flex-shrink:0;padding:4px 10px;font-size:11.5px}.chat-composer{z-index:30;background:var(--bg-header)!important;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))!important;border-top:1px solid var(--border-color)!important;flex-shrink:0!important;align-items:center!important;gap:6px!important;width:100%!important;display:flex!important;position:relative!important}.composer-input{flex:auto;min-width:0;height:42px;padding:8px 12px;font-size:16px!important}.composer-btn{flex-shrink:0;width:38px;height:38px;padding:0}.composer-send{flex-shrink:0;width:42px;height:42px}.attach-menu{min-width:0;max-width:calc(100vw - 16px);bottom:58px;left:8px;right:8px}.modal-card{margin:auto 8px;padding:18px 14px;width:95vw!important;max-width:95vw!important;max-height:88dvh!important}.modal-overlay{padding:8px}.page-panel-mobile{height:100dvh!important;padding:16px 12px 76px!important}.logs-panel{padding:16px 12px 76px!important}.scroll-bottom-btn{width:38px;height:38px;bottom:66px;right:14px}.login-card{border-radius:16px;margin:12px;padding:28px 18px}}.bot-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:20px;display:grid}.bot-card{background:var(--bg-sidebar);border:1px solid var(--border-color);border-radius:12px;flex-direction:column;gap:14px;padding:18px;transition:border-color .18s,transform .18s,box-shadow .18s;display:flex;position:relative;overflow:hidden}.bot-card:hover{border-color:#25d36666;box-shadow:0 4px 18px #00000040}.bot-card.disabled{opacity:.65;filter:grayscale(.2)}.bot-card-header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.bot-card-title{color:var(--text-primary);align-items:center;gap:8px;font-size:15px;font-weight:600;display:flex}.bot-tag-pill{color:var(--accent-wa);background:#25d3661f;border:1px solid #25d36640;border-radius:12px;align-items:center;gap:4px;padding:3px 8px;font-size:11px;font-weight:600;display:inline-flex}.bot-tag-pill.trigger{color:#53bdeb;background:#53bdeb1f;border-color:#53bdeb40}.bot-tag-pill.welcome{color:#feb44c;background:#feb44c1f;border-color:#feb44c40}.bot-tag-pill.fallback{color:#c084fc;background:#a855f71f;border-color:#a855f740}.bot-preview-bubble{background:var(--bg-message-out);color:var(--text-primary);border:1px solid #25d36633;border-radius:8px 0 8px 8px;padding:10px 12px;font-size:13px;line-height:1.45}.bot-preview-header{color:#fff;margin-bottom:4px;font-size:13.5px;font-weight:700}.bot-preview-footer{color:#fff9;margin-top:6px;font-size:11px}.bot-preview-buttons{flex-direction:column;gap:6px;margin-top:8px;display:flex}.bot-preview-btn{text-align:center;color:var(--accent-wa);background:#ffffff14;border:1px solid #ffffff26;border-radius:6px;padding:7px 10px;font-size:12.5px;font-weight:500}.bot-keyword-chip{border:1px solid var(--border-color);color:var(--text-secondary);background:#ffffff0f;border-radius:4px;margin-bottom:4px;margin-right:4px;padding:2px 7px;font-family:monospace;font-size:11.5px;display:inline-block}.variable-chip{color:var(--accent-wa);cursor:pointer;background:#25d3661a;border:1px solid #25d36640;border-radius:4px;padding:3px 8px;font-family:monospace;font-size:11.5px;transition:all .15s}.variable-chip:hover{background:var(--accent-wa);color:#000}