*{box-sizing:border-box;margin:0;padding:0}body{background:#0f0f1a;color:#e2e2f0;font-family:Segoe UI,system-ui,sans-serif;height:100dvh}#root{height:100dvh;display:flex}.layout{display:flex;width:100%;height:100dvh;overflow:hidden}.sidebar{width:220px;min-width:220px;background:#13131f;border-right:1px solid #22223a;display:flex;flex-direction:column;padding:0}.sidebar-logo{padding:20px 16px 12px;border-bottom:1px solid #22223a}.sidebar-logo h1{font-size:20px;font-weight:800;color:#818cf8;letter-spacing:2px}.sidebar-logo p{font-size:10px;color:#44445a;margin-top:2px;line-height:1.3}.sidebar-nav{flex:1;padding:12px 8px;display:flex;flex-direction:column;gap:4px}.nav-section{font-size:10px;font-weight:700;color:#44445a;letter-spacing:1px;text-transform:uppercase;padding:10px 8px 4px}.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:13.5px;color:#7878a0;transition:background .15s,color .15s;border:none;background:transparent;width:100%;text-align:left}.nav-item:hover{background:#1e1e32;color:#c0c0e0}.nav-item.active{background:#1e1e40;color:#818cf8;font-weight:600}.nav-item .nav-icon{font-size:16px;width:20px;text-align:center}.nav-badge{margin-left:auto;background:#4f46e5;color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px}.sidebar-footer{padding:12px 16px;border-top:1px solid #22223a;font-size:11px;color:#33334a}.main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#12121e}.topbar{padding:14px 20px;background:#13131f;border-bottom:1px solid #22223a;display:flex;align-items:center;gap:10px}.topbar-title{font-size:15px;font-weight:700;color:#d0d0f0}.topbar-subtitle{font-size:12px;color:#44445a}.status-dot{width:8px;height:8px;border-radius:50%;margin-left:auto}.status-label{font-size:11px}.content{flex:1;overflow-y:auto;padding:24px}.chat-layout{display:flex;flex-direction:column;height:100%}.chat-messages{flex:1;overflow-y:auto;padding:16px 0}.chat-empty{text-align:center;color:#33334a;margin-top:80px}.chat-empty .emoji{font-size:48px;margin-bottom:12px}.chat-empty h2{font-size:18px;color:#55558a;margin-bottom:6px}.chat-empty p{font-size:13px;color:#33334a}.bubble-wrap{display:flex;margin-bottom:14px}.bubble-wrap.user{justify-content:flex-end}.bubble-wrap.assistant{justify-content:flex-start}.bubble{max-width:72%;padding:10px 15px;border-radius:16px;font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word}.bubble.user{background:#4f46e5;color:#fff;border-bottom-right-radius:4px}.bubble.assistant{background:#1e1e32;color:#d0d0f0;border-bottom-left-radius:4px}.bubble-name{font-size:10px;font-weight:700;color:#818cf8;margin-bottom:4px;letter-spacing:.5px}.typing-dots{display:flex;gap:5px;padding:10px 15px;background:#1e1e32;border-radius:16px 16px 16px 4px;width:fit-content}.typing-dots span{width:7px;height:7px;border-radius:50%;background:#818cf8;animation:bounce 1s ease-in-out infinite}.typing-dots span:nth-child(2){animation-delay:.15s}.typing-dots span:nth-child(3){animation-delay:.3s}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.chat-input-bar{display:flex;gap:8px;padding:12px 0 0;border-top:1px solid #22223a}.chat-input-bar input{flex:1;padding:11px 16px;border-radius:10px;border:1px solid #2a2a44;background:#0f0f1a;color:#e2e2f0;font-size:14px;outline:none;transition:border-color .2s}.chat-input-bar input:focus{border-color:#4f46e5}.chat-input-bar input:disabled{opacity:.5}.chat-input-bar input::placeholder{color:#44445a}.btn-primary{padding:11px 20px;border-radius:10px;border:none;background:#4f46e5;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s;white-space:nowrap}.btn-primary:hover:not(:disabled){background:#4338ca}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.panel-header{margin-bottom:24px}.panel-header h2{font-size:20px;font-weight:700;color:#d0d0f0}.panel-header p{font-size:13px;color:#55558a;margin-top:4px}.card{background:#13131f;border:1px solid #22223a;border-radius:12px;padding:20px;margin-bottom:20px}.card-title{font-size:14px;font-weight:700;color:#818cf8;margin-bottom:16px;display:flex;align-items:center;gap:8px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.form-group{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}.form-group label{font-size:12px;font-weight:600;color:#6666a0;text-transform:uppercase;letter-spacing:.5px}.form-group input{padding:9px 12px;border-radius:8px;border:1px solid #2a2a44;background:#0f0f1a;color:#e2e2f0;font-size:14px;outline:none;transition:border-color .2s}.form-group input:focus{border-color:#4f46e5}.form-group input::placeholder{color:#33334a}.form-actions{display:flex;gap:10px;align-items:center;margin-top:4px}.alert{padding:10px 14px;border-radius:8px;font-size:13px;margin-top:12px}.alert.success{background:#0f2a1a;color:#4ade80;border:1px solid #166534}.alert.error{background:#2a0f0f;color:#f87171;border:1px solid #7f1d1d}.alert.info{background:#0f1a2a;color:#60a5fa;border:1px solid #1e3a5f}.alert.warning{background:#2a1f0a;color:#facc15;border:1px solid #854d0e}.stat-card{background:#13132a;border:1px solid #22223a;border-radius:10px;padding:12px 16px}.table-wrap{overflow-x:auto;border-radius:10px;border:1px solid #22223a}table{width:100%;border-collapse:collapse;font-size:13px}thead th{background:#1a1a2e;color:#6666a0;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:10px 14px;text-align:left}tbody tr{border-top:1px solid #1e1e32;transition:background .1s}tbody tr:hover{background:#16162a}tbody td{padding:11px 14px;color:#b0b0d0}.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.badge.active{background:#0f2a1a;color:#4ade80}.badge.locked{background:#2a0f0f;color:#f87171}.badge.pending{background:#2a200f;color:#fbbf24}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#2a2a44;border-radius:3px}.badge.role-admin{background:#2a1f0a;color:#f59e0b}.badge.role-agent{background:#16103a;color:#818cf8}.badge.role-user{background:#0f2a1a;color:#4ade80}.form-group select{padding:9px 12px;border-radius:8px;border:1px solid #2a2a44;background:#0f0f1a;color:#e2e2f0;font-size:14px;outline:none;transition:border-color .2s;cursor:pointer}.form-group select:focus{border-color:#4f46e5}.sidebar-user{padding:10px 12px;border-top:1px solid #22223a;display:flex;align-items:center;gap:8px}.sidebar-user-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.sidebar-user-name{font-size:13px;font-weight:700;color:#c0c0e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user-role{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.sidebar-user-email{font-size:10px;color:#44445a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logout-btn{flex-shrink:0;background:transparent;border:1px solid #2a2a44;color:#44445a;width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s}.logout-btn:hover{color:#f87171;border-color:#7f1d1d}.form-group textarea{padding:9px 12px;border-radius:8px;border:1px solid #2a2a44;background:#0f0f1a;color:#e2e2f0;font-size:14px;outline:none;resize:vertical;font-family:inherit;transition:border-color .2s}.form-group textarea:focus{border-color:#4f46e5}.form-group textarea::placeholder{color:#33334a}.badge-pill{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}.ticket-detail-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}.ticket-detail{background:#13131f;border:1px solid #2a2a44;border-radius:14px;width:100%;max-width:640px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden}.ticket-detail-header{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 20px 12px;border-bottom:1px solid #22223a;gap:12px}.close-btn{background:transparent;border:1px solid #2a2a44;color:#6666a0;width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:color .15s}.close-btn:hover{color:#f87171;border-color:#7f1d1d}.ticket-meta-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 20px;border-bottom:1px solid #22223a}.ticket-responses{flex:1;overflow-y:auto;padding:12px 20px;display:flex;flex-direction:column;gap:8px}.response-item{padding:10px 14px;border-radius:8px;font-size:13px;line-height:1.5}.response-item.auto{background:#1a1a2e;border-left:3px solid #4f46e5}.response-item.manual{background:#0f2a1a;border-left:3px solid #4ade80}.response-author{font-size:10px;font-weight:700;color:#44445a;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.response-content{color:#b0b0d0}.ticket-actions{padding:14px 20px;border-top:1px solid #22223a}.reply-input{flex:1;padding:9px 12px;border-radius:8px;border:1px solid #2a2a44;background:#0f0f1a;color:#e2e2f0;font-size:13px;outline:none}.reply-input:focus{border-color:#4f46e5}.reply-input::placeholder{color:#33334a}.faq-card{padding:12px 14px;border-radius:8px;border:1px solid #1e1e32;margin-bottom:8px;cursor:pointer;transition:background .15s,border-color .15s}.faq-card:hover{background:#1a1a2e;border-color:#2a2a44}.faq-card-q{font-size:13.5px;font-weight:600;color:#c0c0e0;margin-bottom:4px}.faq-card-a{font-size:12px;color:#55558a;line-height:1.5}.faq-cat-btn{background:transparent;border:1px solid #2a2a44;color:#6666a0;padding:3px 12px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:.4px;transition:background .15s}.faq-cat-btn:hover{background:#1e1e32}.faq-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}.faq-steps li{font-size:13px;color:#b0b0d0;line-height:1.55}.ts-step{display:flex;gap:14px;align-items:flex-start}.ts-step-num{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;margin-top:2px}.ts-step-body{flex:1;background:#1a1a2e;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:5px}.ts-step-title{font-size:13px;font-weight:700;color:#c0c0e0}.ts-step-action{font-size:12px;color:#b0b0d0;line-height:1.5;font-family:Cascadia Code,Consolas,monospace}.ts-step-expected{font-size:12px;color:#4ade80;line-height:1.5}.ts-step-hint{font-size:11px;color:"#55558a";background:#0f1a2a;border-radius:6px;padding:6px 10px;color:#60a5fa;margin-top:2px}.login-overlay{width:100%;height:100dvh;display:flex;align-items:center;justify-content:center;background:#0f0f1a}.login-card{width:380px;background:#13131f;border:1px solid #22223a;border-radius:16px;padding:36px 32px 28px;display:flex;flex-direction:column;gap:20px}.login-logo{text-align:center}.login-logo h1{font-size:28px;font-weight:800;color:#818cf8;letter-spacing:3px;margin-top:4px}.login-logo p{font-size:12px;color:#44445a;margin-top:4px}.login-form{display:flex;flex-direction:column;gap:0}.login-btn{width:100%;margin-top:4px;padding:12px;font-size:15px}.login-hint{font-size:11px;color:#33334a;text-align:center;line-height:1.5}