:root{--bg-app: #0c0d0f;--bg-sidebar: #121418;--bg-card: #181b21;--bg-bubble-user: #1f232b;--bg-bubble-ai: #14171d;--border-color: #272c35;--border-color-focus: #ff6b00;--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--accent: #ff6b00;--accent-hover: #e05e00;--accent-glow: rgba(255, 107, 0, .15);--success: #10b981;--success-glow: rgba(16, 185, 129, .1);--error: #ef4444;--warning: #f59e0b;--font-headers: "Outfit", sans-serif;--font-body: "Plus Jakarta Sans", sans-serif;--transition-fast: .15s cubic-bezier(.16, 1, .3, 1);--transition-normal: .25s cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-app);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-headers);font-weight:600;letter-spacing:-.02em}.app-container{display:flex;height:100vh;width:100vw;background-color:var(--bg-app)}.sidebar{width:30%;min-width:320px;max-width:450px;background-color:var(--bg-sidebar);border-right:1px solid var(--border-color);display:flex;flex-direction:column;padding:24px;overflow-y:auto;animation:slideInLeft var(--transition-normal)}.sidebar-header{margin-bottom:32px}.sidebar-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-headers);font-size:1.5rem;font-weight:700;color:var(--text-primary)}.sidebar-logo span{color:var(--accent)}.sidebar-description{font-size:.85rem;color:var(--text-secondary);margin-top:8px;line-height:1.4}.main-chat{flex:1;display:flex;flex-direction:column;height:100%;background-color:var(--bg-app);position:relative}.docs-section-title{font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:16px;font-weight:700}.docs-list{display:flex;flex-direction:column;gap:12px;margin-bottom:24px;flex:1}.doc-item{background-color:var(--bg-card);border:1px solid var(--border-color);padding:14px;display:flex;flex-direction:column;gap:8px;transition:all var(--transition-fast);position:relative;border-left:3px solid transparent}.doc-item:hover{border-color:var(--text-muted);transform:translateY(-1px)}.doc-item.indexed{border-left-color:var(--success)}.doc-item.not_indexed{border-left-color:var(--warning)}.doc-info{display:flex;justify-content:space-between;align-items:flex-start}.doc-name{font-size:.9rem;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%}.doc-size{font-size:.75rem;color:var(--text-muted)}.doc-actions{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.status-badge{font-size:.75rem;padding:2px 8px;font-weight:600;display:inline-flex;align-items:center;gap:4px}.status-badge.indexed{color:var(--success);background-color:var(--success-glow)}.status-badge.not_indexed{color:var(--warning);background-color:#f59e0b1a}.btn-icon{background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:4px;transition:color var(--transition-fast);display:flex;align-items:center}.btn-icon:hover{color:var(--error)}.btn-primary{background-color:var(--accent);color:#000;font-weight:600;border:none;padding:12px 18px;cursor:pointer;font-family:var(--font-headers);font-size:.95rem;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:8px;border-radius:2px}.btn-primary:hover{background-color:var(--accent-hover);box-shadow:0 0 15px var(--accent-glow)}.btn-primary:disabled{background-color:var(--border-color);color:var(--text-muted);cursor:not-allowed;box-shadow:none}.messages-container{flex:1;overflow-y:auto;padding:40px;display:flex;flex-direction:column;gap:32px}.message-wrapper{display:flex;flex-direction:column;max-width:85%;animation:fadeIn var(--transition-normal)}.message-wrapper.user{align-self:flex-end}.message-wrapper.assistant{align-self:flex-start}.message-header{font-family:var(--font-headers);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;display:flex;align-items:center;gap:6px}.message-wrapper.user .message-header{color:var(--accent);justify-content:flex-end}.message-wrapper.assistant .message-header{color:var(--text-secondary)}.message-bubble{padding:16px 20px;line-height:1.6;font-size:.95rem;word-wrap:break-word;border:1px solid var(--border-color);border-radius:4px}.message-wrapper.user .message-bubble{background-color:var(--bg-bubble-user);color:var(--text-primary);border-right:3px solid var(--accent)}.message-wrapper.assistant .message-bubble{background-color:var(--bg-bubble-ai);color:var(--text-primary);border-left:3px solid var(--text-secondary)}.message-bubble p{margin-bottom:12px}.message-bubble p:last-child{margin-bottom:0}.message-bubble ul,.message-bubble ol{margin-left:20px;margin-bottom:12px}.message-bubble li{margin-bottom:4px}.message-bubble code{font-family:monospace;background-color:#ffffff14;padding:2px 6px;font-size:.85rem}.message-bubble pre{background-color:#0b0c0e;border:1px solid var(--border-color);padding:16px;overflow-x:auto;margin-bottom:12px}.message-bubble pre code{background:transparent;padding:0}.citations-container{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border-color)}.citations-title{font-size:.75rem;text-transform:uppercase;color:var(--text-muted);font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:4px}.citations-list{display:flex;flex-wrap:wrap;gap:8px}.citation-tag{font-size:.75rem;background-color:#ff6b0014;border:1px solid rgba(255,107,0,.2);color:var(--accent);padding:4px 8px;cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;gap:4px}.citation-tag:hover{background-color:var(--accent);color:#000;border-color:var(--accent)}.citation-tooltip{position:absolute;bottom:120%;left:0;width:280px;background-color:var(--bg-card);border:1px solid var(--border-color);padding:12px;z-index:10;box-shadow:0 10px 25px #00000080;font-size:.8rem;color:var(--text-secondary);line-height:1.4;pointer-events:none}.input-container{padding:24px 40px;border-top:1px solid var(--border-color);background-color:var(--bg-app)}.input-form{display:flex;gap:12px;position:relative}.chat-input{flex:1;background-color:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);padding:16px 20px;font-size:.95rem;outline:none;font-family:var(--font-body);transition:all var(--transition-fast);border-radius:2px}.chat-input:focus{border-color:var(--border-color-focus);box-shadow:0 0 0 2px #ff6b001a}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;animation:fadeIn var(--transition-normal)}.empty-state-icon{color:var(--accent);margin-bottom:24px;animation:pulse 2s infinite ease-in-out}.empty-state h2{font-size:1.8rem;margin-bottom:12px}.empty-state p{color:var(--text-secondary);max-width:480px;line-height:1.6;font-size:.95rem}@keyframes slideInLeft{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.98)}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-app)}::-webkit-scrollbar-thumb{background:var(--border-color)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.login-overlay{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;background-color:var(--bg-app);background-image:radial-gradient(circle at 50% 30%,rgba(255,107,0,.05) 0%,transparent 60%);animation:fadeIn var(--transition-normal)}.login-card{width:100%;max-width:440px;background-color:var(--bg-sidebar);border:1px solid var(--border-color);padding:36px;box-shadow:0 10px 40px #00000080;display:flex;flex-direction:column;gap:24px}.login-header{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}.login-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-headers);font-size:1.5rem;font-weight:700;color:var(--text-primary)}.logo-icon{color:var(--accent)}.login-subtitle{font-size:.85rem;color:var(--text-secondary)}.login-error-banner,.modal-error-banner{background-color:#ef44441a;border-left:3px solid var(--error);color:var(--error);padding:10px 14px;font-size:.85rem;display:flex;align-items:center;gap:10px}.modal-warning-banner{background-color:#f59e0b1a;border-left:3px solid var(--warning);color:var(--warning);padding:10px 14px;font-size:.85rem;display:flex;align-items:center;gap:10px;line-height:1.4}.modal-success-banner{background-color:var(--success-glow);border-left:3px solid var(--success);color:var(--success);padding:10px 14px;font-size:.85rem;display:flex;align-items:center;gap:10px}.login-form,.modal-form{display:flex;flex-direction:column;gap:18px}.input-group{display:flex;flex-direction:column;gap:6px}.input-group label{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary)}.input-wrapper{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:12px;color:var(--text-muted)}.input-wrapper input{padding-left:40px!important}.input-group input{width:100%;background-color:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);padding:12px 14px;font-size:.95rem;font-family:var(--font-body);outline:none;transition:border-color var(--transition-fast)}.input-group input:focus{border-color:var(--accent)}.login-button{background-color:var(--accent);color:#000;border:none;padding:14px;font-family:var(--font-headers);font-weight:700;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all var(--transition-fast);margin-top:6px}.login-button:hover:not(:disabled){background-color:var(--accent-hover);box-shadow:0 0 20px var(--accent-glow)}.login-button:disabled{opacity:.6;cursor:not-allowed}.login-footer{text-align:center;font-size:.8rem;color:var(--text-muted);border-top:1px solid var(--border-color);padding-top:16px}.login-footer code{color:var(--accent);background:#ff6b001a;padding:2px 6px}.chat-topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;border-bottom:1px solid var(--border-color);background-color:var(--bg-sidebar)}.user-profile-badge{display:flex;align-items:center;gap:10px;font-size:.9rem}.user-icon{color:var(--accent)}.username-text{font-weight:600;color:var(--text-primary)}.role-badge{font-size:.72rem;padding:2px 8px;font-weight:700;display:inline-flex;align-items:center;gap:4px;text-transform:uppercase;letter-spacing:.03em}.role-badge.admin{background-color:var(--accent-glow);color:var(--accent);border:1px solid rgba(255,107,0,.3)}.role-badge.nhanvien{background-color:#94a3b81a;color:var(--text-secondary);border:1px solid var(--border-color)}.role-read-only-badge{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--text-secondary);background-color:#ffffff0a;border:1px dashed var(--border-color);padding:6px 10px;margin-top:10px}.topbar-actions{display:flex;align-items:center;gap:10px}.btn-topbar{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);padding:6px 12px;font-size:.8rem;font-family:var(--font-body);cursor:pointer;display:flex;align-items:center;gap:6px;transition:all var(--transition-fast)}.btn-topbar:hover{color:var(--text-primary);border-color:var(--text-muted)}.btn-logout:hover{color:var(--error);border-color:var(--error);background-color:#ef44440d}.modal-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeIn var(--transition-fast)}.modal-card{width:100%;max-width:460px;background-color:var(--bg-sidebar);border:1px solid var(--border-color);padding:28px;box-shadow:0 20px 50px #000000b3;display:flex;flex-direction:column;gap:20px}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-title{display:flex;align-items:center;gap:10px}.modal-icon{color:var(--accent)}.modal-close-btn{background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:4px}.modal-close-btn:hover{color:var(--text-primary)}.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:10px}.btn-secondary{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);padding:10px 16px;font-size:.9rem;cursor:pointer;transition:all var(--transition-fast)}.btn-secondary:hover{color:var(--text-primary);border-color:var(--text-muted)}
