@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap";:root{--bg-primary:#080b11;--bg-secondary:#0e131f;--bg-tertiary:#171e30;--bg-accent:#1d263b;--primary:#8b5cf6;--primary-hover:#7c3aed;--primary-glow:#8b5cf659;--text-primary:#f9fafb;--text-secondary:#9ca3af;--text-muted:#6b7280;--border-color:#ffffff0f;--border-focus:#8b5cf680;--success:#10b981;--success-glow:#10b98133;--warning:#f59e0b;--danger:#ef4444;--sidebar-width:260px;--header-height:70px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Inter,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:Inter,sans-serif;overflow:hidden}h1,h2,h3,h4,h5,h6{letter-spacing:-.02em;font-family:Outfit,sans-serif;font-weight:600}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-accent);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--primary)}.glass-card{-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);background:#0e131fbf;border-radius:16px;transition:border-color .2s,box-shadow .2s;box-shadow:0 8px 32px #00000040}.app-container{background-color:var(--bg-primary);width:100vw;height:100vh;display:flex}.sidebar{width:var(--sidebar-width);background-color:var(--bg-secondary);border-right:1px solid var(--border-color);flex-direction:column;flex-shrink:0;height:100%;display:flex}.sidebar-logo{height:var(--header-height);border-bottom:1px solid var(--border-color);align-items:center;gap:10px;padding:0 24px;display:flex}.logo-icon{background:linear-gradient(135deg, var(--primary), #ec4899);width:32px;height:32px;box-shadow:0 0 15px var(--primary-glow);border-radius:8px;justify-content:center;align-items:center;display:flex}.logo-icon svg{fill:#fff;width:18px;height:18px}.logo-text{background:linear-gradient(to right, var(--text-primary), #e2e8f0);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-family:Outfit,sans-serif;font-size:20px;font-weight:800}.sidebar-menu{flex-direction:column;flex:1;gap:8px;padding:24px 16px;display:flex;overflow-y:auto}.menu-item{color:var(--text-secondary);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:12px;outline:none;align-items:center;gap:12px;padding:12px 16px;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.menu-item:hover{color:var(--text-primary);background-color:#ffffff08}.menu-item.active{color:var(--primary);border-left:3px solid var(--primary);background:linear-gradient(90deg,#8b5cf626,#8b5cf608);padding-left:13px}.menu-item svg{fill:currentColor;width:20px;height:20px}.sidebar-footer{border-top:1px solid var(--border-color);background-color:#0000001a;padding:16px}.main-frame{flex-direction:column;flex:1;height:100%;display:flex;position:relative;overflow:hidden}.top-navbar{height:var(--header-height);border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary);flex-shrink:0;justify-content:space-between;align-items:center;padding:0 32px;display:flex}.navbar-title{color:var(--text-primary);font-size:20px;font-weight:700}.navbar-profile{align-items:center;gap:16px;display:flex}.status-dropdown{display:inline-block;position:relative}.status-trigger{background-color:var(--bg-tertiary);border:1px solid var(--border-color);cursor:pointer;color:var(--text-primary);border-radius:8px;outline:none;align-items:center;gap:8px;padding:6px 12px;font-size:13px;font-weight:500;display:flex}.status-dot{border-radius:50%;width:8px;height:8px;display:inline-block}.status-dot.online{background-color:var(--success);box-shadow:0 0 8px var(--success)}.status-dot.away{background-color:var(--warning);box-shadow:0 0 8px var(--warning)}.status-dot.offline{background-color:var(--text-muted)}.dropdown-menu{background-color:var(--bg-tertiary);border:1px solid var(--border-color);z-index:100;border-radius:8px;min-width:130px;display:none;position:absolute;top:calc(100% + 6px);right:0;overflow:hidden;box-shadow:0 10px 25px #0000004d}.dropdown-menu.show{display:block}.dropdown-item{cursor:pointer;color:var(--text-secondary);text-align:left;background:0 0;border:none;align-items:center;gap:8px;width:100%;padding:10px 14px;font-size:13px;transition:background-color .2s,color .2s;display:flex}.dropdown-item:hover{color:var(--text-primary);background-color:#ffffff0d}.agent-badge{align-items:center;gap:10px;display:flex}.agent-avatar{color:#fff;background:linear-gradient(135deg,#10b981,#3b82f6);border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:14px;font-weight:700;display:flex}.viewport-content{background-color:var(--bg-primary);flex:1;padding:32px;overflow-y:auto}.monitor-grid{grid-template-columns:2fr 1fr;gap:24px;height:100%;display:grid}.monitor-card{flex-direction:column;height:100%;display:flex;overflow:hidden}.card-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.card-title{color:var(--text-primary);font-size:16px;font-weight:600}.card-body-scroll{flex:1;padding:16px;overflow-y:auto}.visitor-list-table{border-collapse:collapse;width:100%}.visitor-list-table th{text-align:left;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border-color);padding:12px 16px;font-size:12px}.visitor-list-table td{border-bottom:1px solid var(--border-color);padding:16px;font-size:13.5px}.visitor-row{cursor:pointer;transition:background-color .2s}.visitor-row:hover{background-color:#ffffff05}.visitor-row.selected{border-left:3px solid var(--primary);background-color:#8b5cf60f}.visitor-badge-info{align-items:center;gap:10px;display:flex}.visitor-status-indicator{display:flex;position:relative}.v-pulse{background-color:var(--success);border-radius:50%;width:8px;height:8px}.v-pulse.anim{animation:1.8s cubic-bezier(.24,0,.38,1) infinite pulse-ring;position:absolute}@keyframes pulse-ring{0%{opacity:1;transform:scale(.5)}to{opacity:0;transform:scale(2.8)}}.visitor-meta-text{color:var(--text-primary);font-weight:600}.path-tag{background-color:var(--bg-accent);color:var(--primary);text-overflow:ellipsis;white-space:nowrap;border-radius:6px;max-width:180px;padding:4px 8px;font-family:monospace;font-size:12px;display:inline-block;overflow:hidden}.inbox-container{background-color:var(--border-color);border:1px solid var(--border-color);border-radius:16px;grid-template-columns:300px 1fr 300px;gap:1px;height:100%;display:grid;overflow:hidden}.pane-rooms{background-color:var(--bg-secondary);flex-direction:column;display:flex}.pane-chat{background-color:var(--bg-primary);flex-direction:column;display:flex}.pane-details{background-color:var(--bg-secondary);flex-direction:column;gap:20px;padding:24px;display:flex;overflow-y:auto}.rooms-filter-tabs{border-bottom:1px solid var(--border-color);display:flex}.filter-tab{color:var(--text-secondary);cursor:pointer;text-align:center;background:0 0;border:none;flex:1;padding:14px 10px;font-size:12px;font-weight:600;transition:all .2s}.filter-tab:hover{color:var(--text-primary)}.filter-tab.active{border-bottom:2px solid var(--primary);color:var(--primary);background-color:#ffffff03}.rooms-list{flex:1;overflow-y:auto}.room-card{border-bottom:1px solid var(--border-color);cursor:pointer;flex-direction:column;gap:6px;padding:16px 20px;transition:background-color .2s;display:flex}.room-card:hover{background-color:#ffffff05}.room-card.active{border-left:3px solid var(--primary);background-color:#8b5cf60d;padding-left:17px}.room-card-header{justify-content:space-between;align-items:center;display:flex}.room-name{color:var(--text-primary);font-size:13.5px;font-weight:600}.room-time{color:var(--text-muted);font-size:11px}.room-preview{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.room-assignee{color:var(--text-muted);background-color:#ffffff0a;border-radius:4px;align-self:flex-start;padding:2px 6px;font-size:11px}.chat-pane-header{border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary);justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.chat-messages-board{flex-direction:column;flex:1;gap:16px;padding:24px;display:flex;overflow-y:auto}.chat-input-bar{background-color:var(--bg-secondary);border-top:1px solid var(--border-color);align-items:center;gap:12px;padding:20px 24px;display:flex}.chat-input-field{background-color:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);border-radius:8px;outline:none;flex:1;padding:12px 16px;font-size:14px;transition:border-color .2s}.chat-input-field:focus{border-color:var(--primary)}.chat-send-btn{background-color:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:12px 20px;font-weight:600;transition:background-color .2s}.chat-send-btn:hover{background-color:var(--primary-hover)}.db-msg-row{flex-direction:column;max-width:70%;display:flex}.db-msg-row.visitor{align-self:flex-start}.db-msg-row.agent{align-self:flex-end}.db-msg-row.system{align-self:center;max-width:90%}.db-msg-bubble{border-radius:12px;padding:12px 16px;font-size:13.5px;line-height:1.45}.db-msg-row.visitor .db-msg-bubble{background-color:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);border-bottom-left-radius:2px}.db-msg-row.agent .db-msg-bubble{background:linear-gradient(135deg, var(--primary), var(--primary-hover));color:#fff;border-bottom-right-radius:2px}.db-msg-row.system .db-msg-bubble{color:var(--warning);text-align:center;background-color:#f59e0b14;border:1px dashed #f59e0b40;border-radius:20px;padding:6px 14px;font-size:11.5px}.db-msg-time{color:var(--text-muted);margin-top:4px;margin-left:4px;font-size:10px}.db-msg-row.agent .db-msg-time{align-self:flex-end;margin-right:4px}.detail-section-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;font-size:12px;font-weight:700}.info-item{border-bottom:1px solid #ffffff08;justify-content:space-between;padding:8px 0;font-size:13px;display:flex}.info-item-label{color:var(--text-secondary)}.info-item-value{color:var(--text-primary);font-weight:500}.assignee-box{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:10px;flex-direction:column;gap:12px;padding:14px;display:flex}.claim-btn{border:1px solid var(--primary);color:var(--primary);cursor:pointer;background-color:#8b5cf61a;border-radius:8px;width:100%;padding:8px 12px;font-size:13px;font-weight:600;transition:all .2s}.claim-btn:hover{background-color:var(--primary);color:#fff}.agent-assign-row{border:1px solid var(--border-color);background-color:#ffffff03;border-radius:8px;justify-content:space-between;align-items:center;padding:8px;font-size:12.5px;display:flex}.assign-action-btn{background-color:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:4px 8px;font-size:11px;font-weight:600}.customizer-grid{grid-template-columns:1fr 1fr;gap:32px;height:100%;display:grid}.config-form{flex-direction:column;gap:20px;display:flex}.form-group{flex-direction:column;gap:8px;display:flex}.form-label{color:var(--text-secondary);font-size:13px;font-weight:600}.form-input{background-color:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);border-radius:8px;outline:none;padding:12px;font-size:14px;transition:border-color .2s}.form-input:focus{border-color:var(--primary)}.color-picker-wrapper{align-items:center;gap:16px;display:flex}.color-preview-box{border:1px solid var(--border-color);cursor:pointer;border-radius:8px;width:44px;height:44px}.preview-frame-container{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;justify-content:center;align-items:center;min-height:500px;padding:40px;display:flex;position:relative}.switch-wrapper{align-items:center;gap:12px;display:flex}.switch{width:46px;height:24px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:var(--bg-accent);border:1px solid var(--border-color);border-radius:34px;transition:all .4s;position:absolute;inset:0}.slider:before{content:"";background-color:#fff;border-radius:50%;width:16px;height:16px;transition:all .4s;position:absolute;bottom:3px;left:3px}input:checked+.slider{background-color:var(--primary)}input:checked+.slider:before{transform:translate(22px)}.analytics-stats-row{grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:32px;display:grid}.stat-card{flex-direction:column;gap:12px;padding:24px;display:flex}.stat-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:13px;font-weight:600}.stat-value{color:var(--text-primary);font-family:Outfit,sans-serif;font-size:32px;font-weight:800}.stat-footer{color:var(--text-muted);font-size:12px}.analytics-charts-grid{grid-template-columns:1fr 1fr;gap:24px;display:grid}.chart-card{flex-direction:column;min-height:300px;padding:24px;display:flex}.auth-wrapper{background-color:var(--bg-primary);justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:relative;overflow:hidden}.auth-bg-blob{background:radial-gradient(circle, var(--primary-glow) 0%, #0000 70%);z-index:1;border-radius:50%;width:500px;height:500px;position:absolute}.auth-bg-blob.top-left{top:-200px;left:-200px}.auth-bg-blob.bottom-right{bottom:-200px;right:-200px}.auth-card{z-index:10;width:440px;padding:40px}.auth-title{text-align:center;background:linear-gradient(135deg, var(--text-primary), var(--text-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:8px;font-size:28px;font-weight:800}.auth-subtitle{color:var(--text-secondary);text-align:center;margin-bottom:32px;font-size:14px}.auth-form{flex-direction:column;gap:20px;display:flex}.auth-btn{background:linear-gradient(135deg, var(--primary), var(--primary-hover));color:#fff;cursor:pointer;border:none;border-radius:8px;padding:14px;font-size:15px;font-weight:600;transition:opacity .2s,transform .1s;box-shadow:0 4px 15px #8b5cf633}.auth-btn:hover{opacity:.95}.auth-btn:active{transform:scale(.98)}.auth-switch-text{color:var(--text-secondary);text-align:center;margin-top:16px;font-size:13.5px}.auth-link{color:var(--primary);cursor:pointer;font-weight:600;text-decoration:none}.auth-link:hover{text-decoration:underline}.toast-msg{background-color:var(--bg-accent);border:1px solid var(--border-color);color:var(--text-primary);z-index:9999;border-radius:8px;padding:12px 24px;font-size:13.5px;position:fixed;bottom:20px;right:20px;box-shadow:0 5px 20px #0000004d}.toast-msg.error{border-left:3px solid var(--danger)}.toast-msg.success{border-left:3px solid var(--success)}