Spaces:
Runtime error
Runtime error
| /* ============================================================ | |
| KNOWLEDGE BASE PAGES — Dark theme | |
| Shared across: KBList, KBCreate, KBDetails, KBConfig, KBDocuments | |
| ============================================================ */ | |
| /* ── KB List Page ── */ | |
| .kb-page { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| } | |
| /* ── Page header ── */ | |
| .kb-page-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| gap: 1rem; | |
| margin-bottom: 1.75rem; | |
| } | |
| .kb-page-title { | |
| font-size: 1.75rem; | |
| font-weight: 800; | |
| letter-spacing: -0.5px; | |
| color: var(--text-primary); | |
| line-height: 1.2; | |
| } | |
| .kb-page-subtitle { | |
| font-size: 0.88rem; | |
| color: var(--text-secondary); | |
| margin-top: 0.3rem; | |
| } | |
| /* ── Create button ── */ | |
| .kb-create-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.65rem 1.25rem; | |
| border-radius: var(--radius-md, 10px); | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| color: #fff; | |
| background: linear-gradient(135deg, var(--accent-1, #6366f1), var(--accent-2, #a855f7)); | |
| text-decoration: none; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| white-space: nowrap; | |
| flex-shrink: 0; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .kb-create-btn:hover { | |
| transform: translateY(-1px); | |
| box-shadow: var(--glow-sm, 0 0 12px rgba(99, 102, 241, 0.45)); | |
| } | |
| .kb-create-btn:focus-visible { | |
| outline: 2px solid var(--accent-1, #6366f1); | |
| outline-offset: 2px; | |
| } | |
| /* ── Search bar ── */ | |
| .kb-search-wrap { | |
| position: relative; | |
| margin-bottom: 1.75rem; | |
| } | |
| .kb-search-icon { | |
| position: absolute; | |
| left: 0.9rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-muted); | |
| pointer-events: none; | |
| } | |
| .kb-search-input { | |
| width: 100%; | |
| padding: 0.75rem 1rem 0.75rem 2.7rem; | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md, 10px); | |
| font-size: 0.9rem; | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| outline: none; | |
| transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; | |
| } | |
| .kb-search-input::placeholder { | |
| color: var(--text-muted); | |
| } | |
| .kb-search-input:focus { | |
| border-color: var(--accent-1, #6366f1); | |
| background: rgba(99, 102, 241, 0.05); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); | |
| } | |
| /* Remove native search clear button styling */ | |
| .kb-search-input::-webkit-search-cancel-button { | |
| -webkit-appearance: none; | |
| } | |
| /* ── Error banner ── */ | |
| .kb-error-banner { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| padding: 0.75rem 1rem; | |
| border-radius: var(--radius-md, 10px); | |
| background: rgba(248, 113, 113, 0.1); | |
| border: 1px solid rgba(248, 113, 113, 0.3); | |
| color: #f87171; | |
| font-size: 0.85rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| /* ── Card grid ── */ | |
| .kb-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 1.25rem; | |
| } | |
| /* ── KB Card (restructured: outer div, inner link) ── */ | |
| .kb-card { | |
| display: flex; | |
| flex-direction: column; | |
| background: var(--surface-color); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-lg, 16px); | |
| padding: 1.35rem; | |
| transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; | |
| } | |
| .kb-card:hover { | |
| border-color: rgba(99, 102, 241, 0.35); | |
| box-shadow: 0 0 20px rgba(99, 102, 241, 0.08); | |
| transform: translateY(-2px); | |
| } | |
| .kb-card-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 1rem; | |
| } | |
| .kb-card-icon { | |
| width: 42px; | |
| height: 42px; | |
| border-radius: var(--radius-md, 10px); | |
| background: rgba(99, 102, 241, 0.1); | |
| color: var(--accent-1, #6366f1); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| } | |
| .kb-card-delete { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--text-muted); | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| opacity: 0; | |
| transition: opacity 0.2s, color 0.2s, background 0.2s; | |
| } | |
| .kb-card:hover .kb-card-delete { | |
| opacity: 1; | |
| } | |
| .kb-card-delete:hover { | |
| color: #f87171; | |
| background: rgba(248, 113, 113, 0.1); | |
| } | |
| .kb-card-delete:focus-visible { | |
| opacity: 1; | |
| outline: 2px solid var(--accent-1); | |
| outline-offset: 2px; | |
| } | |
| /* The clickable link area within the card */ | |
| .kb-card-link { | |
| display: flex; | |
| flex-direction: column; | |
| flex: 1; | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| .kb-card-link:focus-visible { | |
| outline: 2px solid var(--accent-1, #6366f1); | |
| outline-offset: 2px; | |
| border-radius: var(--radius-md, 10px); | |
| } | |
| .kb-card-body { | |
| flex: 1; | |
| margin-bottom: 1rem; | |
| } | |
| .kb-card-name { | |
| font-size: 1.05rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-bottom: 0.4rem; | |
| letter-spacing: -0.2px; | |
| } | |
| .kb-card-desc { | |
| font-size: 0.82rem; | |
| color: var(--text-secondary); | |
| line-height: 1.55; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| .kb-card-footer { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding-top: 0.85rem; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .kb-card-date { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| } | |
| .kb-card-arrow { | |
| color: var(--text-muted); | |
| transition: color 0.2s, transform 0.2s; | |
| } | |
| .kb-card:hover .kb-card-arrow { | |
| color: var(--accent-1); | |
| transform: translateX(2px); | |
| } | |
| /* ── Empty state ── */ | |
| .kb-empty { | |
| text-align: center; | |
| padding: 4rem 2rem; | |
| background: var(--surface-color); | |
| border-radius: var(--radius-lg, 16px); | |
| border: 1px dashed var(--border-color); | |
| } | |
| .kb-empty-icon { | |
| width: 72px; | |
| height: 72px; | |
| border-radius: 50%; | |
| background: rgba(99, 102, 241, 0.08); | |
| color: var(--text-muted); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 1.25rem; | |
| } | |
| .kb-empty-title { | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-bottom: 0.4rem; | |
| } | |
| .kb-empty-text { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 1.5rem; | |
| } | |
| .kb-empty-btn { | |
| margin: 0 auto; | |
| } | |
| /* ── Loading state ── */ | |
| .kb-loading { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 1rem; | |
| padding: 4rem 2rem; | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| } | |
| .kb-loading-spinner { | |
| width: 32px; | |
| height: 32px; | |
| border: 3px solid rgba(255, 255, 255, 0.08); | |
| border-top-color: var(--accent-1, #6366f1); | |
| border-radius: 50%; | |
| animation: kbSpin 0.7s linear infinite; | |
| } | |
| @keyframes kbSpin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* ============================================================ | |
| SHARED — Used by KBCreate, KBDetails, KBConfig, KBDocuments | |
| ============================================================ */ | |
| /* ── Page container (shared wrapper for detail/create pages) ── */ | |
| .page-container { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| } | |
| /* ── Page header ── */ | |
| .page-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 2rem; | |
| } | |
| .page-header h1 { | |
| font-size: 1.65rem; | |
| font-weight: 800; | |
| letter-spacing: -0.5px; | |
| color: var(--text-primary); | |
| margin-bottom: 0.3rem; | |
| } | |
| .page-header p { | |
| color: var(--text-secondary); | |
| font-size: 0.88rem; | |
| } | |
| .header-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| /* ── Buttons ── */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| padding: 0.65rem 1.25rem; | |
| border-radius: var(--radius-md, 10px); | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s, border-color 0.2s; | |
| text-decoration: none; | |
| border: none; | |
| white-space: nowrap; | |
| } | |
| .btn:focus-visible { | |
| outline: 2px solid var(--accent-1, #6366f1); | |
| outline-offset: 2px; | |
| } | |
| .btn-primary { | |
| color: #fff; | |
| background: linear-gradient(135deg, var(--accent-1, #6366f1), var(--accent-2, #a855f7)); | |
| } | |
| .btn-primary:hover:not(:disabled) { | |
| transform: translateY(-1px); | |
| box-shadow: var(--glow-sm, 0 0 12px rgba(99, 102, 241, 0.45)); | |
| } | |
| .btn-primary:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .btn-outline { | |
| color: var(--text-secondary); | |
| background: transparent; | |
| border: 1px solid var(--border-color); | |
| } | |
| .btn-outline:hover { | |
| color: var(--text-primary); | |
| border-color: rgba(255, 255, 255, 0.15); | |
| background: rgba(255, 255, 255, 0.04); | |
| } | |
| .btn-icon { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| padding: 0.5rem; | |
| border-radius: 8px; | |
| color: var(--text-secondary); | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| transition: color 0.2s, background 0.2s; | |
| text-decoration: none; | |
| font-size: 0.88rem; | |
| } | |
| .btn-icon:hover { | |
| background: rgba(255, 255, 255, 0.06); | |
| color: var(--text-primary); | |
| } | |
| .btn-icon:focus-visible { | |
| outline: 2px solid var(--accent-1, #6366f1); | |
| outline-offset: 2px; | |
| } | |
| .btn-danger:hover { | |
| background: rgba(248, 113, 113, 0.1); | |
| color: #f87171; | |
| } | |
| /* ── Tabs (KBDetails) ── */ | |
| .tabs { | |
| display: flex; | |
| gap: 0.25rem; | |
| border-bottom: 1px solid var(--border-color); | |
| margin-bottom: 1.75rem; | |
| } | |
| .tab { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.85rem 1rem; | |
| background: none; | |
| border: none; | |
| border-bottom: 2px solid transparent; | |
| color: var(--text-secondary); | |
| font-size: 0.88rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: color 0.2s, border-color 0.2s; | |
| } | |
| .tab:hover { | |
| color: var(--text-primary); | |
| } | |
| .tab.active, | |
| .tab[aria-selected="true"] { | |
| color: var(--accent-1, #6366f1); | |
| border-bottom-color: var(--accent-1, #6366f1); | |
| } | |
| .tab:focus-visible { | |
| outline: 2px solid var(--accent-1, #6366f1); | |
| outline-offset: -2px; | |
| border-radius: 4px 4px 0 0; | |
| } | |
| .tab-content { | |
| background: var(--surface-color); | |
| border-radius: var(--radius-lg, 16px); | |
| border: 1px solid var(--border-color); | |
| padding: 1.75rem; | |
| } | |
| /* ── Form container (KBCreate) ── */ | |
| .kb-form-container { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| background: var(--surface-color); | |
| padding: 2rem; | |
| border-radius: var(--radius-lg, 16px); | |
| border: 1px solid var(--border-color); | |
| } | |
| .kb-form-container h1 { | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| letter-spacing: -0.3px; | |
| color: var(--text-primary); | |
| margin-bottom: 0.4rem; | |
| } | |
| .kb-form-container p { | |
| color: var(--text-secondary); | |
| font-size: 0.88rem; | |
| margin-bottom: 1.75rem; | |
| } | |
| /* ── Form styles ── */ | |
| .kb-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.25rem; | |
| } | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.55rem; | |
| } | |
| .form-group label { | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| letter-spacing: 0.2px; | |
| } | |
| .form-group input, | |
| .form-group select, | |
| .form-group textarea, | |
| .kb-form textarea { | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md, 10px); | |
| font-size: 0.9rem; | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| outline: none; | |
| transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; | |
| color-scheme: dark; | |
| } | |
| .form-group input::placeholder, | |
| .form-group textarea::placeholder, | |
| .kb-form textarea::placeholder { | |
| color: var(--text-muted); | |
| } | |
| .form-group input:focus, | |
| .form-group select:focus, | |
| .form-group textarea:focus, | |
| .kb-form textarea:focus { | |
| border-color: var(--accent-1, #6366f1); | |
| background: rgba(99, 102, 241, 0.05); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); | |
| } | |
| .form-group select { | |
| appearance: none; | |
| background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23888888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 0.9rem center; | |
| padding-right: 2.5rem; | |
| cursor: pointer; | |
| } | |
| .form-group select option { | |
| background: var(--surface-2-color, #181818); | |
| color: var(--text-primary); | |
| } | |
| .form-actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 0.75rem; | |
| margin-top: 0.5rem; | |
| } | |
| /* ── Config container ── */ | |
| .config-container h2, | |
| .documents-container h2 { | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-bottom: 0.3rem; | |
| } | |
| .config-container > p { | |
| color: var(--text-secondary); | |
| font-size: 0.85rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| /* ── Config sections (KBConfig overhaul) ── */ | |
| .config-section { | |
| margin-bottom: 1.75rem; | |
| padding-bottom: 1.75rem; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .config-section:last-of-type { | |
| border-bottom: none; | |
| margin-bottom: 0; | |
| padding-bottom: 0; | |
| } | |
| .config-section-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.45rem; | |
| font-size: 1rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-bottom: 1.25rem; | |
| } | |
| .config-section-title svg { | |
| color: var(--text-muted); | |
| cursor: help; | |
| flex-shrink: 0; | |
| } | |
| .strategy-description { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| line-height: 1.5; | |
| margin-top: 0.35rem; | |
| margin-bottom: 1rem; | |
| } | |
| .config-params { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.25rem; | |
| } | |
| .config-param-row { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| } | |
| .label-with-help { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.35rem; | |
| } | |
| .label-with-help svg { | |
| color: var(--text-muted); | |
| cursor: help; | |
| flex-shrink: 0; | |
| } | |
| .config-fieldset { | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md, 10px); | |
| padding: 1.25rem; | |
| margin: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.25rem; | |
| } | |
| .config-fieldset legend { | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| padding: 0 0.5rem; | |
| } | |
| .form-group select optgroup { | |
| background: var(--surface-2-color, #181818); | |
| color: var(--text-secondary); | |
| font-weight: 600; | |
| font-style: normal; | |
| } | |
| /* ── Documents ── */ | |
| .documents-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| /* Upload button — uses <label> wrapping a sr-only file input */ | |
| .doc-upload-label { | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .doc-upload-label input[type="file"].sr-only { | |
| position: absolute; | |
| } | |
| /* Scrollable table wrapper */ | |
| .doc-table-wrap { | |
| overflow-x: auto; | |
| -webkit-overflow-scrolling: touch; | |
| border-radius: var(--radius-md, 10px); | |
| } | |
| .doc-table-wrap:focus-visible { | |
| outline: 2px solid var(--accent-1, #6366f1); | |
| outline-offset: 2px; | |
| } | |
| .documents-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| min-width: 800px; | |
| } | |
| .documents-table th, | |
| .documents-table td { | |
| padding: 0.85rem 1rem; | |
| text-align: left; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .documents-table th { | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| font-size: 0.78rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .documents-table td { | |
| color: var(--text-primary); | |
| font-size: 0.88rem; | |
| } | |
| .documents-table tbody tr { | |
| transition: background 0.15s; | |
| } | |
| .documents-table tbody tr:hover { | |
| background: rgba(255, 255, 255, 0.02); | |
| } | |
| .action-buttons { | |
| display: flex; | |
| gap: 0.35rem; | |
| } | |
| /* ── Document search ── */ | |
| .doc-search-wrap { | |
| position: relative; | |
| margin-bottom: 1.25rem; | |
| } | |
| .doc-search-icon { | |
| position: absolute; | |
| left: 0.9rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-muted); | |
| pointer-events: none; | |
| } | |
| .doc-search-input { | |
| width: 100%; | |
| padding: 0.65rem 1rem 0.65rem 2.5rem; | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md, 10px); | |
| font-size: 0.85rem; | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| outline: none; | |
| transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; | |
| } | |
| .doc-search-input::placeholder { | |
| color: var(--text-muted); | |
| } | |
| .doc-search-input:focus { | |
| border-color: var(--accent-1, #6366f1); | |
| background: rgba(99, 102, 241, 0.05); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); | |
| } | |
| .doc-search-input::-webkit-search-cancel-button { | |
| -webkit-appearance: none; | |
| } | |
| /* ── Document name (link + inline edit) ── */ | |
| .doc-name-cell { | |
| min-width: 180px; | |
| } | |
| .doc-name-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| } | |
| .doc-name-link { | |
| color: var(--text-primary); | |
| text-decoration: none; | |
| transition: color 0.15s; | |
| } | |
| .doc-name-link:hover { | |
| color: var(--accent-1, #6366f1); | |
| } | |
| .doc-rename-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 4px; | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| opacity: 0; | |
| transition: opacity 0.15s, color 0.15s, background 0.15s; | |
| flex-shrink: 0; | |
| } | |
| .documents-table tbody tr:hover .doc-rename-btn { | |
| opacity: 1; | |
| } | |
| .doc-rename-btn:hover { | |
| color: var(--accent-1, #6366f1); | |
| background: rgba(99, 102, 241, 0.1); | |
| } | |
| .doc-rename-btn:focus-visible { | |
| opacity: 1; | |
| outline: 2px solid var(--accent-1, #6366f1); | |
| outline-offset: 1px; | |
| } | |
| .doc-name-input { | |
| width: 100%; | |
| padding: 0.3rem 0.5rem; | |
| background: rgba(255, 255, 255, 0.06); | |
| border: 1px solid var(--accent-1, #6366f1); | |
| border-radius: 4px; | |
| font-size: 0.88rem; | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); | |
| } | |
| /* ── Inactive document row ── */ | |
| .doc-row-inactive { | |
| opacity: 0.5; | |
| } | |
| /* ── Toggle switch ── */ | |
| .toggle-switch { | |
| position: relative; | |
| display: inline-flex; | |
| align-items: center; | |
| cursor: pointer; | |
| } | |
| .toggle-switch input { | |
| position: absolute; | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .toggle-track { | |
| width: 36px; | |
| height: 20px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| position: relative; | |
| transition: background 0.2s; | |
| } | |
| .toggle-track::after { | |
| content: ''; | |
| position: absolute; | |
| top: 2px; | |
| left: 2px; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: var(--text-muted); | |
| transition: transform 0.2s, background 0.2s; | |
| } | |
| .toggle-switch input:checked + .toggle-track { | |
| background: rgba(16, 185, 129, 0.3); | |
| } | |
| .toggle-switch input:checked + .toggle-track::after { | |
| transform: translateX(16px); | |
| background: #34d399; | |
| } | |
| .toggle-switch input:focus-visible + .toggle-track { | |
| outline: 2px solid var(--accent-1, #6366f1); | |
| outline-offset: 2px; | |
| } | |
| /* ── Drag & drop ── */ | |
| .documents-container { | |
| position: relative; | |
| } | |
| .doc-drop-active { | |
| border-color: var(--accent-1, #6366f1); | |
| } | |
| .doc-drop-overlay { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.75rem; | |
| background: rgba(99, 102, 241, 0.08); | |
| border: 2px dashed var(--accent-1, #6366f1); | |
| border-radius: var(--radius-lg, 16px); | |
| color: var(--accent-1, #6366f1); | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| z-index: 10; | |
| pointer-events: none; | |
| } | |
| /* ── Status badges ── */ | |
| .status-badge { | |
| display: inline-flex; | |
| padding: 0.2rem 0.6rem; | |
| border-radius: var(--radius-full, 9999px); | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.3px; | |
| } | |
| .status-badge.completed { | |
| background: rgba(16, 185, 129, 0.12); | |
| color: #34d399; | |
| } | |
| .status-badge.processing { | |
| background: rgba(99, 102, 241, 0.12); | |
| color: #818cf8; | |
| } | |
| .status-badge.failed { | |
| background: rgba(248, 113, 113, 0.12); | |
| color: #f87171; | |
| } | |
| .status-badge.pending { | |
| background: rgba(251, 191, 36, 0.12); | |
| color: #fbbf24; | |
| } | |
| /* ── Messages ── */ | |
| .error-message { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| background: rgba(248, 113, 113, 0.1); | |
| border: 1px solid rgba(248, 113, 113, 0.25); | |
| color: #f87171; | |
| padding: 0.85rem 1rem; | |
| border-radius: var(--radius-md, 10px); | |
| margin-bottom: 1.25rem; | |
| font-size: 0.85rem; | |
| } | |
| .success-message { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| background: rgba(16, 185, 129, 0.1); | |
| border: 1px solid rgba(16, 185, 129, 0.25); | |
| color: #34d399; | |
| padding: 0.85rem 1rem; | |
| border-radius: var(--radius-md, 10px); | |
| margin-bottom: 1.25rem; | |
| font-size: 0.85rem; | |
| } | |
| /* ── Empty state (shared) ── */ | |
| .empty-state { | |
| grid-column: 1 / -1; | |
| text-align: center; | |
| padding: 3.5rem 2rem; | |
| background: var(--surface-color); | |
| border-radius: var(--radius-lg, 16px); | |
| border: 1px dashed var(--border-color); | |
| color: var(--text-secondary); | |
| } | |
| .empty-state svg { | |
| margin: 0 auto 1rem; | |
| color: var(--text-muted); | |
| opacity: 0.5; | |
| } | |
| .empty-state h3 { | |
| font-size: 1.05rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-bottom: 0.3rem; | |
| } | |
| .empty-state p { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| } | |
| /* ── Loading ── */ | |
| .loading { | |
| text-align: center; | |
| padding: 3rem 2rem; | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| } | |
| /* ── Test Chunking ── */ | |
| .test-chunking-section { | |
| margin-top: 1.75rem; | |
| padding-top: 1.75rem; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .test-chunking-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| width: 100%; | |
| padding: 0.4rem 0; | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| user-select: none; | |
| color: inherit; | |
| font-family: inherit; | |
| } | |
| .test-chunking-header:focus-visible { | |
| outline: 2px solid var(--accent-1, #6366f1); | |
| outline-offset: 2px; | |
| border-radius: 4px; | |
| } | |
| .test-chunking-header h3 { | |
| font-size: 1rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| flex: 1; | |
| text-align: left; | |
| margin: 0; | |
| } | |
| .test-chunking-header .test-icon { | |
| color: var(--accent-1, #6366f1); | |
| flex-shrink: 0; | |
| } | |
| .test-chunking-chevron { | |
| color: var(--text-muted); | |
| transition: transform 0.2s; | |
| flex-shrink: 0; | |
| } | |
| .test-chunking-chevron.expanded { | |
| transform: rotate(180deg); | |
| } | |
| .test-chunking-body { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| padding-top: 1.25rem; | |
| } | |
| .test-strategy-label { | |
| font-size: 0.82rem; | |
| color: var(--text-secondary); | |
| } | |
| .test-strategy-label strong { | |
| color: var(--accent-1, #6366f1); | |
| } | |
| .test-textarea { | |
| min-height: 120px; | |
| resize: vertical; | |
| } | |
| .test-actions { | |
| display: flex; | |
| gap: 0.75rem; | |
| } | |
| .test-results { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .test-stats-row { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 0.75rem; | |
| } | |
| .test-stat-card { | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md, 10px); | |
| padding: 0.85rem 1rem; | |
| text-align: center; | |
| } | |
| .test-stat-value { | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| color: var(--accent-1, #6366f1); | |
| line-height: 1.2; | |
| } | |
| .test-stat-label { | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.3px; | |
| margin-top: 0.25rem; | |
| } | |
| .test-chunks-list { | |
| max-height: 400px; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .test-chunks-list::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .test-chunks-list::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .test-chunks-list::-webkit-scrollbar-thumb { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 3px; | |
| } | |
| .test-chunk-card { | |
| background: rgba(255, 255, 255, 0.02); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md, 10px); | |
| padding: 0.75rem 1rem; | |
| } | |
| .test-chunk-index { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-width: 24px; | |
| height: 20px; | |
| padding: 0 0.4rem; | |
| border-radius: var(--radius-full, 9999px); | |
| background: rgba(99, 102, 241, 0.12); | |
| color: var(--accent-1, #6366f1); | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| } | |
| .test-chunk-text { | |
| font-size: 0.82rem; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| font-family: 'SF Mono', 'Fira Code', 'Fira Mono', monospace; | |
| margin: 0; | |
| } | |
| .test-chunk-meta { | |
| display: flex; | |
| justify-content: flex-end; | |
| margin-top: 0.4rem; | |
| font-size: 0.7rem; | |
| color: var(--text-muted); | |
| } | |
| /* ============================================================ | |
| RESPONSIVE | |
| ============================================================ */ | |
| @media (max-width: 768px) { | |
| .kb-page-header { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .kb-create-btn { | |
| align-self: flex-start; | |
| } | |
| .kb-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| /* Always show delete button on touch devices */ | |
| .kb-card-delete { | |
| opacity: 1; | |
| } | |
| .page-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 1rem; | |
| } | |
| .tab-content { | |
| padding: 1.25rem; | |
| } | |
| .kb-form-container { | |
| padding: 1.5rem; | |
| } | |
| .documents-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 1rem; | |
| } | |
| .doc-rename-btn { | |
| opacity: 1; | |
| } | |
| /* Touch-friendly targets for tablets */ | |
| .form-group input, | |
| .form-group select, | |
| .form-group textarea, | |
| .kb-form textarea { | |
| min-height: 44px; | |
| } | |
| .btn { | |
| min-height: 44px; | |
| } | |
| .btn-icon { | |
| min-width: 44px; | |
| min-height: 44px; | |
| } | |
| .custom-select-trigger { | |
| min-height: 44px; | |
| } | |
| .toggle-switch .toggle-track { | |
| width: 40px; | |
| height: 24px; | |
| } | |
| .toggle-switch .toggle-track::after { | |
| width: 18px; | |
| height: 18px; | |
| top: 3px; | |
| left: 3px; | |
| } | |
| .toggle-switch input:checked + .toggle-track::after { | |
| transform: translateX(16px); | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .kb-page-title { | |
| font-size: 1.45rem; | |
| } | |
| .kb-card { | |
| padding: 1.1rem; | |
| } | |
| .config-param-row { | |
| grid-template-columns: 1fr; | |
| } | |
| .config-fieldset { | |
| padding: 1rem; | |
| } | |
| .test-stats-row { | |
| grid-template-columns: 1fr; | |
| } | |
| .test-chunks-list { | |
| max-height: 300px; | |
| } | |
| /* Extra-small screen tweaks */ | |
| .kb-card-delete { | |
| width: 40px; | |
| height: 40px; | |
| } | |
| .kb-search-input { | |
| padding-top: 0.85rem; | |
| padding-bottom: 0.85rem; | |
| } | |
| .kb-create-btn { | |
| padding: 0.7rem 1.25rem; | |
| } | |
| .form-actions { | |
| flex-direction: column; | |
| } | |
| .form-actions .btn { | |
| width: 100%; | |
| } | |
| /* Tab bar — scrollable, hide scrollbar */ | |
| .tabs { | |
| overflow-x: auto; | |
| -webkit-overflow-scrolling: touch; | |
| scrollbar-width: none; | |
| } | |
| .tabs::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .tab { | |
| padding: 0.75rem 0.85rem; | |
| font-size: 0.82rem; | |
| white-space: nowrap; | |
| min-height: 44px; | |
| } | |
| } | |
| /* Extra-small screens */ | |
| @media (max-width: 360px) { | |
| .kb-page-title { | |
| font-size: 1.3rem; | |
| } | |
| .kb-page-subtitle { | |
| font-size: 0.82rem; | |
| } | |
| .kb-card { | |
| padding: 1rem; | |
| } | |
| .kb-card-icon { | |
| width: 36px; | |
| height: 36px; | |
| } | |
| .kb-card-name { | |
| font-size: 0.95rem; | |
| } | |
| .kb-empty { | |
| padding: 3rem 1.5rem; | |
| } | |
| .kb-form-container { | |
| padding: 1.25rem; | |
| } | |
| .tab-content { | |
| padding: 1rem; | |
| } | |
| .page-header h1 { | |
| font-size: 1.35rem; | |
| } | |
| } | |