:root{font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;--bg-color: #0f172a;--bg-secondary: #1e293b;--card-bg: rgba(30, 41, 59, .7);--border-color: rgba(255, 255, 255, .1);--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--accent-color: #3b82f6;--accent-hover: #2563eb;--success-color: #10b981;--warning-color: #f59e0b;--error-color: #ef4444;--sidebar-width: 260px;--header-height: 64px}*{box-sizing:border-box}body{margin:0;padding:0;min-height:100vh;background-color:var(--bg-color);color:var(--text-primary);-webkit-font-smoothing:antialiased}.auth-container{position:relative;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;background:radial-gradient(circle at center,#1e293b,#0f172a 60%,#020617);overflow:hidden}.auth-card{width:100%;max-width:420px;padding:2.5rem;background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:24px;box-shadow:0 25px 50px -12px #00000080;z-index:10}.app-shell{display:grid;grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:var(--header-height) 1fr;grid-template-areas:"sidebar header" "sidebar content";height:100vh;width:100vw}.sidebar{grid-area:sidebar;background:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;padding:1.5rem;gap:2rem}.header{grid-area:header;background:var(--bg-color);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 2rem}.content-area{grid-area:content;background:var(--bg-color);overflow-y:auto;padding:2rem}.nav-section{display:flex;flex-direction:column;gap:.5rem}.nav-label{font-size:.75rem;font-weight:600;text-transform:uppercase;color:var(--text-muted);letter-spacing:.05em;margin-bottom:.5rem}.nav-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:12px;color:var(--text-secondary);text-decoration:none;font-size:.95rem;transition:all .2s ease}.nav-item:hover,.nav-item.active{background:#ffffff0d;color:var(--text-primary)}.nav-item.active{background:#3b82f61a;color:var(--accent-color)}.status-pill{display:flex;align-items:center;gap:.5rem;padding:.35rem .75rem;background:#ffffff0d;border-radius:100px;font-size:.8rem;font-weight:500}.dot{width:8px;height:8px;border-radius:50%}.dot.online{background-color:var(--success-color);box-shadow:0 0 8px var(--success-color)}.dot.offline{background-color:var(--error-color)}.dot.warning{background-color:var(--warning-color)}.form-group{margin-bottom:1.25rem}.form-group label{display:block;font-size:.875rem;color:var(--text-secondary);margin-bottom:.5rem}.form-group input{width:100%;padding:.75rem 1rem;background:#0f172a80;border:1px solid var(--border-color);border-radius:12px;color:#fff;font-size:1rem;transition:all .2s}.form-group input:focus{outline:none;border-color:var(--accent-color);background:#0f172acc}.btn{width:100%;padding:.875rem;border-radius:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s}.btn-primary{background:var(--accent-color);color:#fff}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}.inbox-container{display:grid;grid-template-columns:70px 280px 1fr 280px;height:calc(100vh - var(--header-height) - 4rem);background:var(--bg-secondary);border-radius:20px;border:1px solid var(--border-color);overflow:hidden;transition:grid-template-columns .4s cubic-bezier(.4,0,.2,1);min-width:900px}.inbox-container.sidebar-collapsed{grid-template-columns:70px 280px 1fr 0px}.customer-sidebar{background:#0f172a66;border-left:1px solid var(--border-color);display:flex;flex-direction:column;padding:1.5rem;overflow-y:auto;transition:transform .3s ease,opacity .3s ease}.sidebar-collapsed .customer-sidebar{transform:translate(100%);opacity:0;padding:0;border:none}.claim-badge{background:#f59e0b1a;color:var(--warning-color);padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:600;text-transform:uppercase}.claim-banner{background:#f59e0b0d;border-bottom:1px solid rgba(245,158,11,.2);padding:.75rem 1.5rem;display:flex;justify-content:space-between;align-items:center}.templates-menu{position:absolute;bottom:80px;right:20px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;width:280px;max-height:300px;overflow-y:auto;z-index:100;box-shadow:0 10px 25px #00000080;padding:.5rem}.template-item{padding:.75rem 1rem;border-radius:8px;cursor:pointer;font-size:.9rem;transition:all .2s;border-bottom:1px solid rgba(255,255,255,.05)}.template-item:last-child{border-bottom:none}.template-item:hover{background:#3b82f61a;color:var(--accent-color)}.customer-detail-section{margin-bottom:2rem}.customer-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}.customer-value{font-size:.9rem;color:var(--text-primary);font-weight:500}.channel-sidebar{background:#0f172a66;border-right:1px solid var(--border-color);display:flex;flex-direction:column;align-items:center;padding:1.5rem 0;gap:1.5rem}.channel-btn{width:48px;height:48px;border-radius:14px;background:#ffffff08;border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:var(--text-muted);cursor:pointer;transition:all .2s}.channel-btn:hover,.channel-btn.active{background:var(--accent-color);color:#fff;border-color:var(--accent-color);box-shadow:0 0 15px #3b82f64d}.conversation-list{background:#0f172a33;border-right:1px solid var(--border-color);display:flex;flex-direction:column;overflow-y:auto}.conversation-item{padding:1.25rem;border-bottom:1px solid var(--border-color);cursor:pointer;transition:all .2s;display:flex;gap:1rem}.conversation-item:hover{background:#ffffff08}.conversation-item.active{background:#3b82f614;border-left:3px solid var(--accent-color)}.avatar{width:44px;height:44px;border-radius:50%;background:var(--bg-secondary);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:600;border:1px solid var(--border-color)}.conv-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}.conv-header{display:flex;justify-content:space-between;margin-bottom:.25rem}.conv-name{font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conv-time{font-size:.75rem;color:var(--text-muted)}.conv-preview{font-size:.85rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-window{display:flex;flex-direction:column;background:var(--bg-color)}.chat-header{padding:1rem 1.5rem;border-bottom:1px solid var(--border-color);background:var(--bg-color);display:flex;justify-content:space-between;align-items:center}.chat-timeline{flex:1;padding:2rem;overflow-y:auto;display:flex;flex-direction:column;gap:1.5rem}.message-row{display:flex;flex-direction:column;max-width:70%}.message-row.sent{align-self:flex-end;align-items:flex-end}.message-row.received{align-self:flex-start;align-items:flex-start}.message-bubble{padding:.875rem 1.25rem;border-radius:18px;font-size:.95rem;line-height:1.4;position:relative}.message-row.sent .message-bubble{background:var(--accent-color);color:#fff;border-bottom-right-radius:4px}.message-row.received .message-bubble{background:var(--bg-secondary);color:var(--text-primary);border-bottom-left-radius:4px;border:1px solid var(--border-color)}.message-meta{font-size:.7rem;color:var(--text-muted);margin-top:.4rem}.chat-input-area{padding:1.5rem;border-top:1px solid var(--border-color);background:var(--bg-color)}.chat-input-container{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:14px;padding:.5rem;display:flex;gap:.5rem}.chat-input{flex:1;background:transparent;border:none;color:#fff;padding:.5rem 1rem;font-size:1rem}.chat-input:focus{outline:none}.send-btn{width:40px;height:40px;border-radius:10px;background:var(--accent-color);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.send-btn:hover{background:var(--accent-hover)}.flex-row{display:flex;align-items:center;gap:1rem}.text-center{text-align:center}.mb-2{margin-bottom:2rem}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.page-title{margin:0;font-size:1.75rem;font-weight:700}.management-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:20px;padding:1.5rem;box-shadow:0 4px 6px -1px #0000001a}.manage-table{width:100%;border-collapse:collapse}.manage-table th{text-align:left;padding:1rem;font-size:.75rem;text-transform:uppercase;color:var(--text-muted);letter-spacing:.05em;border-bottom:1px solid var(--border-color)}.manage-table td{padding:1rem;border-bottom:1px solid var(--border-color);font-size:.95rem}.manage-table tr:last-child td{border-bottom:none}.badge-pill{padding:4px 12px;border-radius:100px;font-size:.75rem;font-weight:600}.badge-success{background:#10b9811a;color:var(--success-color)}.action-icon-btn{background:#ffffff0d;border:none;color:var(--text-secondary);width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.action-icon-btn:hover{background:var(--accent-color);color:#fff}