/* FactoHR Chatbot - Compact shell, dark by default with light toggle */ /* ==================== THEME TOKENS ==================== */ /* Dark is the default. The inline script in each page's stamps data-theme on before first paint, so there is no flash. */ :root, :root[data-theme="dark"] { --bg-main: #212121; --bg-card: #2a2a2a; --bg-elevated: #303030; --bg-hover: #2f2f2f; --bg-input: #303030; --bg-subtle: #262626; --sidebar-bg: #171717; --sidebar-border: #2a2a2a; --sidebar-hover: #262626; --sidebar-active: #2f2f2f; --text-primary: #ececec; --text-secondary: #b4b4b4; --text-muted: #8f8f8f; --border-color: #343434; --border-strong: #454545; --primary-color: #4d8bff; --primary-hover: #6b9dff; --primary-light: rgba(77, 139, 255, 0.14); --primary-contrast: #ffffff; --success-color: #3ecf8e; --success-light: rgba(62, 207, 142, 0.14); --danger-color: #f87171; --danger-light: rgba(248, 113, 113, 0.14); --warning-color: #fbbf24; --warning-light: rgba(251, 191, 36, 0.14); --info-color: #4d8bff; --info-light: rgba(77, 139, 255, 0.14); --user-bubble-bg: #303030; --scrollbar-thumb: #4a4a4a; --scrollbar-thumb-hover: #5c5c5c; --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); } :root[data-theme="light"] { --bg-main: #ffffff; --bg-card: #ffffff; --bg-elevated: #ffffff; --bg-hover: #f0f0f0; --bg-input: #f4f4f4; --bg-subtle: #f9f9f9; --sidebar-bg: #f9f9f9; --sidebar-border: #e5e5e5; --sidebar-hover: #ececec; --sidebar-active: #e5e5e5; --text-primary: #0d0d0d; --text-secondary: #5d5d5d; --text-muted: #8f8f8f; --border-color: #e5e5e5; --border-strong: #d4d4d4; --primary-color: #2563eb; --primary-hover: #1d4ed8; --primary-light: #eff6ff; --primary-contrast: #ffffff; --success-color: #059669; --success-light: #ecfdf5; --danger-color: #dc2626; --danger-light: #fef2f2; --warning-color: #d97706; --warning-light: #fffbeb; --info-color: #2563eb; --info-light: #eff6ff; --user-bubble-bg: #f0f0f0; --scrollbar-thumb: #d1d1d1; --scrollbar-thumb-hover: #b4b4b4; --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.12); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); } /* Layout metrics */ :root { --header-h: 52px; --sidebar-w: 260px; --content-w: 768px; } /* ==================== BASE ==================== */ * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } html, body { height: 100%; } body { overflow: hidden; background: var(--bg-main); color: var(--text-primary); font-size: 14px; -webkit-font-smoothing: antialiased; } .app-shell { display: flex; height: 100vh; overflow: hidden; } .app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--bg-main); } .app-body { flex: 1 1 auto; overflow-y: auto; padding: 24px; } .content-narrow { max-width: var(--content-w); margin: 0 auto; } /* ==================== SIDEBAR ==================== */ .sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; transition: margin-left 0.25s ease; } /* Hidden state is driven by a class on so the inline script can restore it before first paint (no slide-in flash on page load). */ :root.sidebar-hidden .sidebar { margin-left: calc(var(--sidebar-w) * -1); } /* Top row: brand + collapse control */ .sidebar-top { height: var(--header-h); min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 12px; } .sidebar .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 4px 6px; border-radius: 8px; } .sidebar .brand:hover { background: var(--sidebar-hover); } .sidebar .logo-icon { width: 26px; height: 26px; min-width: 26px; background: var(--primary-color); border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--primary-contrast); font-size: 13px; } .sidebar .logo-text { font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; } /* Nav */ .sidebar .nav-links { flex: 1 1 auto; overflow-y: auto; padding: 4px 8px 8px; } .sidebar .nav-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 14px 10px 6px; } .sidebar .nav-link { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; margin-bottom: 2px; color: var(--text-secondary); text-decoration: none; border: none; background: transparent; border-radius: 8px; font-size: 14px; font-weight: 400; text-align: left; transition: background 0.15s ease, color 0.15s ease; } .sidebar .nav-link:hover { background: var(--sidebar-hover); color: var(--text-primary); } .sidebar .nav-link.active { background: var(--sidebar-active); color: var(--text-primary); font-weight: 500; } .sidebar .nav-link i { font-size: 16px; width: 18px; min-width: 18px; text-align: center; opacity: 0.9; } /* Footer: user row + logout */ .sidebar-footer { padding: 8px; border-top: 1px solid var(--sidebar-border); } .sidebar .user-row { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; margin-bottom: 4px; } .sidebar .user-row:hover { background: var(--sidebar-hover); } .sidebar .user-avatar { width: 28px; height: 28px; min-width: 28px; background: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-contrast); font-weight: 600; font-size: 11px; text-transform: uppercase; } .sidebar .user-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; } .sidebar .user-name { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar .user-role { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .btn-logout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 34px; padding: 0; font-size: 13px; font-weight: 500; border-radius: 8px; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); transition: all 0.15s ease; } .btn-logout:hover { background: var(--danger-light); border-color: var(--danger-color); color: var(--danger-color); } /* ==================== ICON BUTTON ==================== */ .icon-btn { width: 32px; height: 32px; min-width: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-secondary); border-radius: 8px; font-size: 16px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); } /* Header control that brings the sidebar back. Only rendered while the sidebar is hidden - otherwise the sidebar's own button is on screen and two toggles would be redundant. */ .sidebar-open-btn { display: none; } :root.sidebar-hidden .sidebar-open-btn { display: inline-flex; } /* ==================== HEADER ==================== */ .app-header { height: var(--header-h); min-height: var(--header-h); display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--bg-main); } .app-header-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-header-sub { font-size: 12px; color: var(--text-muted); margin-left: 8px; white-space: nowrap; } .app-header-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; } /* ==================== CHAT ==================== */ .chat-container { flex: 1 1 auto; overflow-y: auto; background: var(--bg-main); padding: 8px 16px 24px; } .chat-messages { max-width: var(--content-w); margin: 0 auto; } .message { display: flex; margin-bottom: 22px; } /* Assistant: plain text, full width, no bubble, no avatar */ .message.assistant { justify-content: flex-start; } .message.assistant .message-content { max-width: 100%; width: 100%; } .message-bubble.assistant-bubble { background: transparent; border: none; padding: 0; color: var(--text-primary); font-size: 15px; line-height: 1.7; } /* User: right-aligned rounded pill */ .message.user { justify-content: flex-end; } .message.user .message-content { max-width: 75%; } .message-bubble.user-bubble { background: var(--user-bubble-bg); color: var(--text-primary); padding: 10px 16px; border-radius: 20px; font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; } .message-bubble p:last-child { margin-bottom: 0; } .message-bubble pre { background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 14px; overflow-x: auto; margin: 10px 0; } .message-bubble code { font-family: 'Fira Code', Monaco, Consolas, monospace; font-size: 13px; color: var(--text-primary); } .message-bubble :not(pre) > code { background: var(--bg-elevated); padding: 2px 6px; border-radius: 5px; } .message-bubble table { width: 100%; margin: 10px 0; border-collapse: collapse; font-size: 13px; } .message-bubble th, .message-bubble td { border: 1px solid var(--border-color); padding: 8px 10px; text-align: left; } .message-bubble th { background: var(--bg-subtle); font-weight: 600; } .message-bubble img { max-width: 100%; border-radius: 10px; } /* Document references */ .doc-references { margin-top: 10px; padding: 8px 12px; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: 10px; font-size: 12px; color: var(--text-muted); } /* Typing indicator */ .typing-indicator { display: flex; gap: 5px; padding: 6px 0; } .typing-indicator span { width: 7px; height: 7px; background: var(--text-muted); border-radius: 50%; animation: bounce 1.4s infinite ease-in-out; } .typing-indicator span:nth-child(1) { animation-delay: 0s; } .typing-indicator span:nth-child(2) { animation-delay: 0.2s; } .typing-indicator span:nth-child(3) { animation-delay: 0.4s; } @keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.35; } 40% { transform: translateY(-6px); opacity: 1; } } /* ==================== CHAT INPUT ==================== */ .input-area { background: var(--bg-main); padding: 0 16px 14px; } .composer { max-width: var(--content-w); margin: 0 auto; } .composer-pill { display: flex; align-items: flex-end; gap: 8px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 26px; padding: 7px 7px 7px 18px; transition: border-color 0.15s ease; } .composer-pill:focus-within { border-color: var(--border-strong); } /* Descendant selectors here so these beat Bootstrap's .form-control / .btn, which are declared later in this file. */ .composer-pill .chat-input { flex: 1 1 auto; resize: none; border: none; background: transparent; box-shadow: none; color: var(--text-primary); font-size: 15px; line-height: 1.5; padding: 8px 0; border-radius: 0; max-height: 200px; overflow-y: auto; } .composer-pill .chat-input:focus { border: none; box-shadow: none; background: transparent; color: var(--text-primary); } .composer-pill .chat-input::placeholder { color: var(--text-muted); } .composer-pill .chat-send-btn { width: 34px; height: 34px; min-width: 34px; padding: 0; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--text-primary); color: var(--bg-main); font-size: 14px; line-height: 1; flex-shrink: 0; transition: opacity 0.15s ease; } .composer-pill .chat-send-btn:hover { background: var(--text-primary); color: var(--bg-main); opacity: 0.85; } .composer-pill .chat-send-btn:disabled { opacity: 0.35; } .composer-hint { text-align: center; font-size: 11px; color: var(--text-muted); margin: 8px 0 0; } /* ==================== BUTTONS ==================== */ .btn { font-weight: 500; border-radius: 8px; padding: 7px 14px; font-size: 13px; transition: all 0.15s ease; } .btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 7px; } .btn-lg { padding: 10px 22px; font-size: 15px; border-radius: 10px; } .btn-primary { background: var(--primary-color); border: 1px solid var(--primary-color); color: var(--primary-contrast); } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-contrast); } .btn-success { background: var(--success-color); border: 1px solid var(--success-color); color: #06281b; } .btn-success:hover { background: var(--success-color); border-color: var(--success-color); color: #06281b; opacity: 0.9; } .btn-danger { background: var(--danger-color); border: 1px solid var(--danger-color); color: #2b0a0a; } .btn-danger:hover { background: var(--danger-color); color: #2b0a0a; opacity: 0.9; } :root[data-theme="light"] .btn-success, :root[data-theme="light"] .btn-success:hover, :root[data-theme="light"] .btn-danger, :root[data-theme="light"] .btn-danger:hover { color: #ffffff; } .btn-outline-primary { color: var(--primary-color); border: 1px solid var(--primary-color); background: transparent; } .btn-outline-primary:hover { background: var(--primary-color); color: var(--primary-contrast); } .btn-outline-secondary { color: var(--text-secondary); border: 1px solid var(--border-color); background: transparent; } .btn-outline-secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-primary); } .btn-outline-success { color: var(--success-color); border: 1px solid var(--success-color); background: transparent; } .btn-outline-success:hover { background: var(--success-color); color: var(--bg-main); } .btn-outline-danger { color: var(--danger-color); border: 1px solid var(--danger-color); background: transparent; } .btn-outline-danger:hover { background: var(--danger-color); color: var(--bg-main); } .btn-light { background: var(--bg-elevated); border: 1px solid var(--border-color); color: var(--text-primary); } .btn-light:hover { background: var(--bg-hover); color: var(--text-primary); } /* ==================== DROP ZONE ==================== */ .drop-zone { transition: all 0.15s ease; border: 1px dashed var(--border-strong) !important; background: var(--bg-subtle) !important; border-radius: 12px !important; cursor: pointer; } .drop-zone:hover, .drop-zone.dragover { border-color: var(--primary-color) !important; background: var(--primary-light) !important; } /* ==================== TABLE ==================== */ .table { margin-bottom: 0; color: var(--text-primary); --bs-table-bg: transparent; --bs-table-color: var(--text-primary); } .table > :not(caption) > * > * { background: transparent; color: var(--text-primary); box-shadow: none; } .table th, .table thead.table-light th { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 10px 14px; background: var(--bg-subtle) !important; border-bottom: 1px solid var(--border-color); } .table td { padding: 10px 14px; vertical-align: middle; color: var(--text-primary); font-size: 13px; border-bottom: 1px solid var(--border-color); } .table tbody tr { transition: background 0.12s ease; } .table tbody tr:hover > * { background: var(--bg-hover) !important; } .table .btn-group { gap: 4px; display: flex; justify-content: flex-end; } .table .btn-group .btn { padding: 0; font-size: 13px; border-radius: 7px !important; border: 1px solid transparent; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; } .table .btn-group .btn-outline-primary { background: transparent; color: var(--text-secondary); } .table .btn-group .btn-outline-primary:hover { background: var(--primary-light); border-color: transparent; color: var(--primary-color); } .table .btn-group .btn-outline-success { background: transparent; color: var(--text-secondary); } .table .btn-group .btn-outline-success:hover { background: var(--success-light); border-color: transparent; color: var(--success-color); } .table .btn-group .btn-outline-danger { background: transparent; color: var(--text-secondary); } .table .btn-group .btn-outline-danger:hover { background: var(--danger-light); border-color: transparent; color: var(--danger-color); } /* ==================== CARDS ==================== */ .card { border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card); color: var(--text-primary); overflow: hidden; } .card-header { background: var(--bg-subtle); border-bottom: 1px solid var(--border-color); padding: 12px 16px; font-weight: 600; } .card-body { padding: 18px; } .card.shadow-sm, .shadow-sm { box-shadow: var(--shadow-sm) !important; } /* ==================== MODALS ==================== */ .modal-content { border-radius: 14px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-lg); } .modal-header { border-bottom: 1px solid var(--border-color); padding: 16px 20px; } .modal-body { padding: 20px; } .modal-footer { border-top: 1px solid var(--border-color); padding: 14px 20px; } .modal-title { font-weight: 600; font-size: 16px; } .modal-backdrop.show { opacity: 0.6; } /* ==================== TOASTS ==================== */ .toast-container { z-index: 9999; } .toast { min-width: 280px; border-radius: 10px; border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); overflow: hidden; background: var(--bg-elevated); color: var(--text-primary); } .toast-body { padding: 12px 14px; font-size: 13px; } .toast.bg-success, .toast.bg-danger, .toast.bg-primary, .toast.bg-warning, .toast.bg-info { background: var(--bg-elevated) !important; } .toast.bg-success { border-left: 3px solid var(--success-color); } .toast.bg-danger { border-left: 3px solid var(--danger-color); } .toast.bg-primary { border-left: 3px solid var(--primary-color); } .toast.bg-warning { border-left: 3px solid var(--warning-color); } .toast.bg-info { border-left: 3px solid var(--info-color); } .toast .toast-body, .toast .toast-body span { color: var(--text-primary) !important; } .toast.bg-success .bi { color: var(--success-color) !important; } .toast.bg-danger .bi { color: var(--danger-color) !important; } .toast.bg-primary .bi { color: var(--primary-color) !important; } .toast.bg-warning .bi { color: var(--warning-color) !important; } .toast.bg-info .bi { color: var(--info-color) !important; } /* ==================== ALERTS ==================== */ .alert { border-radius: 10px; border: 1px solid var(--border-color); font-size: 13px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; background: var(--bg-subtle); color: var(--text-primary); } .alert-success { background: var(--success-light); border-color: transparent; color: var(--success-color); } .alert-danger { background: var(--danger-light); border-color: transparent; color: var(--danger-color); } .alert-warning { background: var(--warning-light); border-color: transparent; color: var(--warning-color); } .alert-info { background: var(--info-light); border-color: transparent; color: var(--info-color); } /* ==================== FORMS ==================== */ .form-control, .form-select { border: 1px solid var(--border-color); border-radius: 8px; font-size: 13px; padding: 9px 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease; background: var(--bg-input); color: var(--text-primary); } .form-control::placeholder { color: var(--text-muted); } .form-control:focus, .form-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-light); background: var(--bg-input); color: var(--text-primary); } .form-control::file-selector-button { background: var(--bg-elevated); color: var(--text-primary); border: 0; border-inline-end: 1px solid var(--border-color); padding: 9px 12px; margin: -9px 12px -9px -12px; } .form-label { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; } .form-text { color: var(--text-muted); font-size: 12px; } .code-editor, .form-control.font-monospace { font-family: 'Fira Code', Monaco, Consolas, monospace; font-size: 12.5px; line-height: 1.6; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: 10px; } /* ==================== BADGES ==================== */ .badge { font-weight: 500; padding: 4px 9px; border-radius: 6px; font-size: 11px; } .badge.bg-primary { background: var(--primary-light) !important; color: var(--primary-color) !important; } .badge.bg-success { background: var(--success-light) !important; color: var(--success-color) !important; } .badge.bg-warning { background: var(--warning-light) !important; color: var(--warning-color) !important; } .badge.bg-danger { background: var(--danger-light) !important; color: var(--danger-color) !important; } .badge.bg-info { background: var(--info-light) !important; color: var(--info-color) !important; } /* ==================== EMPTY / LOADING STATES ==================== */ .state-panel { text-align: center; padding: 56px 20px; color: var(--text-secondary); } .state-panel .state-icon { font-size: 40px; color: var(--text-muted); display: block; margin-bottom: 14px; } .state-panel h4 { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } .state-panel p { font-size: 13px; color: var(--text-muted); } /* ==================== RESPONSIVE ==================== */ @media (max-width: 991.98px) { :root { --content-w: 100%; } .sidebar { position: fixed; left: 0; top: 0; height: 100vh; z-index: 1050; margin-left: 0; transform: translateX(-100%); transition: transform 0.25s ease; } /* Below lg the sidebar is an overlay, so the desktop hidden state is inert and the header toggle is always available. */ :root.sidebar-hidden .sidebar { margin-left: 0; } .sidebar-open-btn { display: inline-flex; } .sidebar.show { transform: translateX(0); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4); } .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1040; } .app-body { padding: 16px; } .message.user .message-content { max-width: 88%; } } /* ==================== SCROLLBAR ==================== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ==================== UTILITIES ==================== */ .hidden { display: none !important; } .text-primary { color: var(--primary-color) !important; } .text-success { color: var(--success-color) !important; } .text-danger { color: var(--danger-color) !important; } .text-warning { color: var(--warning-color) !important; } .text-muted { color: var(--text-muted) !important; } .text-secondary { color: var(--text-secondary) !important; } .bg-light { background: var(--bg-subtle) !important; } .bg-white { background: var(--bg-card) !important; } .border-top, .border-bottom { border-color: var(--border-color) !important; } .border-success { border-color: var(--success-color) !important; } .border-danger { border-color: var(--danger-color) !important; } .spinner-border { color: var(--primary-color); } a { color: var(--primary-color); text-decoration: none; } a:hover { color: var(--primary-hover); } hr { border-color: var(--border-color); opacity: 1; }