/* ════════════════ COMMANDO · Knowledge Uploader — Classic theme ════════════════ A timeless, enterprise-grade redesign. No glassmorphism, no floating orbs, no gradient shimmer — just crisp surfaces, a restrained navy/slate palette, one blue accent, and soft layered shadows ("Soft UI Evolution"). Offline-safe: no web fonts. Headings use a system serif (Georgia) for a classic, library-like wordmark; body/UI use the system sans. Dark-only: carries a fixed `data-theme="dark"`; the light `:root` values remain only as a fallback. Palette (B2B "Professional navy + blue CTA"): Ink / primary CTA #0F172A · Accent (interactive) #0369A1 Background #F4F6F9 · Card #FFFFFF Border #E2E8F0 · Text #334155 Danger #DC2626 · Success #16A34A · Warn #B45309 */ :root { /* Surfaces */ --bg: #F4F6F9; --bg-accent: #ECF1F7; /* faint wash behind the column */ --card: #FFFFFF; --card-border: #E2E8F0; --hairline: #EAEEF3; --field-bg: #F8FAFC; --subtle: #F1F5F9; --subtle-2: #E8ECF1; /* Text */ --heading: #0F172A; --text: #334155; --muted: #64748B; --placeholder: #94A3B8; /* Brand + interactive accent */ --accent: #0369A1; /* classic deep blue — links, active, focus */ --accent-strong: #075985; --accent-soft: rgba(3, 105, 161, 0.08); --accent-ring: rgba(3, 105, 161, 0.20); /* Primary call-to-action = solid ink (no gradient) */ --primary-bg: #0F172A; --primary-bg-hover: #1E293B; --primary-fg: #FFFFFF; --primary-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.45); /* Logo plate */ --logo-bg: #0F172A; /* Semantics */ --danger: #DC2626; --danger-bg: rgba(220, 38, 38, 0.08); --danger-text: #B91C1C; --ok: #16A34A; --ok-bg: rgba(22, 163, 74, 0.10); --ok-text: #15803D; --warn: #D97706; --warn-bg: rgba(245, 158, 11, 0.12); --warn-text: #B45309; --warn-border: rgba(245, 158, 11, 0.45); /* Shape + elevation (soft, layered, low) */ --radius: 12px; --radius-sm: 9px; --radius-xs: 7px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06); --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 10px 28px -12px rgba(15, 23, 42, 0.18); --shadow-lg: 0 18px 48px -18px rgba(15, 23, 42, 0.30); /* Typography */ --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; --font-serif: Georgia, "Times New Roman", Cambria, "Source Serif Pro", serif; color-scheme: light; font-synthesis: none; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0B1120; --bg-accent: #0E1626; --card: #131C2E; --card-border: #253246; --hairline: #1E293B; --field-bg: #0F1828; --subtle: #1A2434; --subtle-2: #202C40; --heading: #F1F5F9; --text: #CBD5E1; --muted: #94A3B8; --placeholder: #64748B; --accent: #38BDF8; --accent-strong: #7DD3FC; --accent-soft: rgba(56, 189, 248, 0.12); --accent-ring: rgba(56, 189, 248, 0.30); --primary-bg: #2563EB; --primary-bg-hover: #3B82F6; --primary-fg: #FFFFFF; --primary-shadow: 0 8px 20px -8px rgba(37, 99, 235, 0.55); --logo-bg: #1D2B45; --danger: #EF4444; --danger-bg: rgba(239, 68, 68, 0.15); --danger-text: #FCA5A5; --ok: #22C55E; --ok-bg: rgba(34, 197, 94, 0.15); --ok-text: #86EFAC; --warn: #F59E0B; --warn-bg: rgba(245, 158, 11, 0.14); --warn-text: #FCD9A8; --warn-border: rgba(245, 158, 11, 0.40); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow: 0 1px 3px rgba(0, 0, 0, 0.40), 0 12px 32px -14px rgba(0, 0, 0, 0.70); --shadow-lg: 0 22px 56px -20px rgba(0, 0, 0, 0.80); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; min-height: 100%; display: flex; flex-direction: column; align-items: center; /* Top-align so tall screens (Library / Inspector tables) scroll naturally instead of being clipped by vertical centering. */ justify-content: flex-start; padding: clamp(24px, 6vh, 72px) 18px 56px; color: var(--text); background: radial-gradient(1200px 520px at 50% -10%, var(--bg-accent), transparent 70%), var(--bg); background-attachment: fixed; font-family: var(--font-sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* The old decorative orbs are gone in this theme; neutralise if any remain. */ .bg-orb { display: none !important; } /* ── Ambient premium backdrop (behind everything; theme-aware) ───────────────── Layered colour blooms + slow floating glow orbs + a faint grid that fades out toward the edges, so the page never reads as a flat void. */ .app-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(900px 520px at 88% -6%, rgba(3, 105, 161, 0.10), transparent 60%), radial-gradient(760px 480px at 4% 108%, rgba(37, 99, 235, 0.10), transparent 62%); } .app-bg::after { content: ""; position: absolute; inset: 0; opacity: 0.55; background-image: linear-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(circle at 50% 26%, #000, transparent 78%); mask-image: radial-gradient(circle at 50% 26%, #000, transparent 78%); } .orb { position: absolute; border-radius: 50%; filter: blur(64px); opacity: 0.34; will-change: transform; } .orb-1 { width: 440px; height: 440px; top: -130px; right: -70px; background: radial-gradient(circle, rgba(56, 189, 248, 0.55), transparent 70%); animation: orbFloat1 20s ease-in-out infinite; } .orb-2 { width: 500px; height: 500px; bottom: -180px; left: -120px; background: radial-gradient(circle, rgba(37, 99, 235, 0.55), transparent 70%); animation: orbFloat2 26s ease-in-out infinite; } .orb-3 { width: 360px; height: 360px; top: 42%; left: 48%; background: radial-gradient(circle, rgba(125, 211, 252, 0.40), transparent 70%); animation: orbFloat3 30s ease-in-out infinite; } @keyframes orbFloat1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-46px, 34px); } } @keyframes orbFloat2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(38px, -34px); } } @keyframes orbFloat3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, -24px) scale(1.08); } } :root[data-theme="dark"] .app-bg { background: radial-gradient(1000px 580px at 86% -8%, rgba(56, 189, 248, 0.16), transparent 60%), radial-gradient(840px 560px at 0% 112%, rgba(37, 99, 235, 0.20), transparent 62%), radial-gradient(700px 700px at 50% 46%, rgba(13, 26, 51, 0.55), transparent 72%); } :root[data-theme="dark"] .app-bg::after { background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); } :root[data-theme="dark"] .orb { opacity: 0.5; } /* Shell */ .shell { position: relative; z-index: 1; width: 100%; max-width: 700px; } /* Brand header */ .brand { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding: 0 4px 18px; border-bottom: 1px solid var(--hairline); } .logo { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--radius-sm); color: #fff; background: var(--logo-bg); box-shadow: var(--shadow-sm); } /* Brand mark in the header (COMMANDO logo). Circular crest, shown at its natural shape; a hairline ring keeps it crisp on both light + dark. */ .brand-logo { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; object-fit: contain; background: var(--logo-bg); box-shadow: var(--shadow-sm); } .brand-text h1 { margin: 0; font-family: var(--font-serif); font-size: 23px; font-weight: 600; letter-spacing: 0.1px; color: var(--heading); } .brand-text p { margin: 3px 0 0; font-size: 13px; color: var(--muted); } .brand-eyebrow { margin: 0 0 1px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .brand-step { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted); background: var(--card); border: 1px solid var(--card-border); padding: 6px 12px; border-radius: 999px; white-space: nowrap; box-shadow: var(--shadow-sm); } /* Card / panel */ .card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; animation: rise 0.34s cubic-bezier(0.2, 0.7, 0.2, 1); } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* Fields */ .field { margin-bottom: 18px; } .field label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--heading); margin-bottom: 7px; } .field input { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: var(--field-bg); color: var(--heading); font-size: 14.5px; font-family: inherit; transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; } .field input::placeholder { color: var(--placeholder); } .field input:focus { outline: none; border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px var(--accent-ring); } /* Required name field */ .req { color: var(--danger); font-weight: 700; } .field-hint { margin: 7px 2px 0; font-size: 12px; color: var(--muted); transition: color 0.2s; } .field-hint.missing { color: var(--danger-text); font-weight: 600; } .field input.missing { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); } /* Dropzone */ .dropzone { border: 1.5px dashed var(--card-border); border-radius: var(--radius); padding: 36px 20px; text-align: center; cursor: pointer; transition: border-color 0.18s, background 0.18s; background: var(--field-bg); } .dropzone:hover, .dropzone:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; } .dropzone.dragover { border-color: var(--accent); border-style: solid; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); } .dz-icon { color: var(--accent); margin-bottom: 10px; display: flex; justify-content: center; } .dz-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--heading); } .dz-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); } .dz-sub .link { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .types { display: flex; gap: 8px; justify-content: center; margin-top: 18px; flex-wrap: wrap; } .chip { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--muted); background: var(--subtle); border: 1px solid var(--card-border); padding: 5px 11px; border-radius: 6px; } /* Selected file list */ .file-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; } .file-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--shadow-sm); animation: rise 0.26s ease; } .file-ic { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--radius-xs); font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--card-border); } .file-meta { min-width: 0; flex: 1; } .file-name { font-size: 14px; font-weight: 600; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-size { font-size: 12px; color: var(--muted); margin-top: 1px; } .file-remove { flex: 0 0 auto; background: transparent; border: none; cursor: pointer; color: var(--muted); padding: 6px; border-radius: var(--radius-xs); display: grid; place-items: center; transition: color 0.18s, background 0.18s; } .file-remove:hover { color: var(--danger); background: var(--danger-bg); } /* Buttons */ .btn { width: 100%; margin-top: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 600; font-family: inherit; cursor: pointer; color: var(--primary-fg); transition: transform 0.12s, box-shadow 0.2s, opacity 0.2s, background 0.18s, border-color 0.18s, color 0.18s; } .btn.primary { background: var(--primary-bg); box-shadow: var(--primary-shadow); } .btn.primary:hover:not(:disabled) { background: var(--primary-bg-hover); transform: translateY(-1px); } .btn.primary:active:not(:disabled) { transform: translateY(0); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); } .btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } .btn.ghost { background: var(--card); border-color: var(--card-border); color: var(--text); box-shadow: var(--shadow-sm); } .btn.ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); } /* Banner (errors / warnings) */ .banner { margin-bottom: 16px; padding: 13px 16px; border-radius: var(--radius-sm); font-size: 14px; border: 1px solid var(--danger); border-left-width: 4px; background: var(--danger-bg); color: var(--danger-text); display: flex; align-items: center; gap: 10px; animation: rise 0.26s ease; } .banner::before { content: "!"; font-weight: 800; font-size: 13px; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--danger); } .banner.hidden { display: none; } /* ── Processing screen ── */ .proc-head { display: flex; justify-content: center; margin-bottom: 8px; } .spinner { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--subtle-2); border-top-color: var(--accent); animation: spin 0.85s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .check, .cross { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; animation: pop 0.4s cubic-bezier(0.2,0.8,0.2,1.4); } .check { background: var(--ok-bg); color: var(--ok); } .cross { background: var(--danger-bg); color: var(--danger); } @keyframes pop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } .proc-title { text-align: center; margin: 16px 0 4px; font-family: var(--font-serif); font-size: 21px; font-weight: 600; color: var(--heading); } .proc-msg { text-align: center; margin: 0 0 22px; color: var(--muted); font-size: 14px; min-height: 18px; } .progress { height: 10px; border-radius: 999px; background: var(--subtle-2); overflow: hidden; border: 1px solid var(--card-border); } .progress-fill { height: 100%; width: 0%; border-radius: 999px; background: var(--accent); background-image: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%); transition: width 0.5s cubic-bezier(0.3, 0.8, 0.3, 1); } .progress-fill.done { background-image: linear-gradient(90deg, var(--ok) 0%, var(--ok) 100%); } .progress-pct { text-align: right; font-size: 12.5px; color: var(--muted); margin-top: 7px; font-variant-numeric: tabular-nums; } .proc-files { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; } .proc-file { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text); padding: 10px 13px; border-radius: var(--radius-xs); background: var(--subtle); border: 1px solid var(--card-border); } .proc-file .pf-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .proc-file .pf-state { font-size: 12px; color: var(--muted); white-space: nowrap; } .pf-state.ok { color: var(--ok-text); font-weight: 600; } .pf-state.err { color: var(--danger-text); font-weight: 600; } .ready-note { margin-top: 22px; padding: 15px 16px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--ok-bg); border: 1px solid var(--ok); } .ready-note strong { color: var(--ok-text); } .foot { text-align: center; margin-top: 20px; font-size: 12px; color: var(--muted); } /* ── Preview screen ── */ .screen-title { margin: 0 0 5px; font-family: var(--font-serif); font-size: 21px; font-weight: 600; color: var(--heading); } .screen-sub { margin: 0 0 18px; font-size: 13.5px; color: var(--muted); line-height: 1.55; } .preview-blocks { display: grid; gap: 14px; max-height: 52vh; overflow-y: auto; padding-right: 2px; } .pv-file { border: 1px solid var(--card-border); background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 14px; animation: rise 0.26s ease; } .pv-file-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; } .pv-ic { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--radius-xs); font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--card-border); } .pv-file-meta { min-width: 0; flex: 1; } .pv-file-name { font-size: 14.5px; font-weight: 650; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-file-count { font-size: 12.5px; color: var(--accent-strong); font-weight: 600; margin-top: 1px; } .pv-sections { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .pv-section { background: var(--subtle); border: 1px solid var(--card-border); border-radius: var(--radius-xs); padding: 11px 13px; } .pv-sec-head { font-size: 13px; font-weight: 650; color: var(--heading); margin-bottom: 3px; } .pv-sec-text { font-size: 13px; color: var(--text); line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .pv-more { margin-top: 10px; font-size: 12.5px; color: var(--muted); font-style: italic; } .pv-error { font-size: 13px; color: var(--danger-text); line-height: 1.5; } .pv-file.is-error { border-color: var(--danger); background: var(--danger-bg); } /* Already-in-knowledge-base (catalog-aware detection) */ .pv-file.is-stored { border-color: var(--warn-border); background: var(--warn-bg); } .pv-stored-note { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 12px; border-radius: var(--radius-xs); font-size: 12.5px; font-weight: 600; color: var(--warn-text); background: var(--warn-bg); border: 1px solid var(--warn-border); } /* ── File chunk view: collapsible per-file groups of real chunks ── */ .pv-file-toggle { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--card-border); border-radius: var(--radius-xs); background: var(--card); color: var(--muted); font-size: 12px; cursor: pointer; transition: color 0.18s, border-color 0.18s, background 0.18s; } .pv-file-toggle:hover { color: var(--accent); border-color: var(--accent); } .pv-chunks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .pv-chunks.collapsed { display: none; } .pv-chunk { background: var(--subtle); border: 1px solid var(--card-border); border-radius: var(--radius-xs); transition: opacity 0.18s, background 0.18s, border-color 0.18s; } .pv-chunk-row { display: flex; align-items: center; gap: 9px; padding: 9px 11px; cursor: pointer; } .pv-chunk-caret { flex: 0 0 auto; width: 12px; color: var(--muted); font-size: 11px; } .pv-chunk-label { flex: 1; min-width: 0; font-size: 13px; font-weight: 650; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-chunk-size { font-weight: 500; color: var(--muted); } .pv-chunk-remove { flex: 0 0 auto; min-width: 30px; height: 28px; display: grid; place-items: center; border: 1px solid var(--card-border); border-radius: var(--radius-xs); background: var(--card); color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: color 0.18s, background 0.18s, border-color 0.18s; } .pv-chunk-remove:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); } .pv-chunk-remove.undo { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .pv-chunk-body { font-size: 13px; color: var(--text); line-height: 1.55; white-space: pre-wrap; word-break: break-word; padding: 0 12px 11px 33px; max-height: 360px; overflow: auto; } .pv-chunk-body.hidden { display: none; } .pv-chunk.removed { opacity: 0.55; border-style: dashed; background: var(--subtle); } .pv-chunk.removed .pv-chunk-label { text-decoration: line-through; } .preview-note { margin-top: 16px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; color: var(--warn-text); background: var(--warn-bg); border: 1px solid var(--warn-border); } /* Two buttons side by side (preview + success) */ .action-row { display: flex; gap: 12px; margin-top: 22px; } .action-row .btn { margin-top: 0; } .action-row .btn.primary { flex: 1.6; } .action-row .btn.ghost { flex: 1; } /* ── Success screen ── */ .success-summary { margin-top: 18px; border: 1px solid var(--card-border); background: var(--subtle); border-radius: var(--radius-sm); padding: 14px 16px; } .ss-file { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 6px 0; } .ss-file:not(:last-child) { border-bottom: 1px solid var(--hairline); } .ss-name { color: var(--heading); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-count { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .ss-total { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 11px; border-top: 1px solid var(--card-border); font-size: 14px; } .ss-total .ss-name { font-weight: 700; } .ss-total .ss-count { color: var(--accent-strong); font-weight: 700; } .ss-time { margin-top: 9px; font-size: 12.5px; color: var(--muted); text-align: center; } .ss-newnote { margin-top: 8px; font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.5; } .verify-note { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; color: var(--ok-text); background: var(--ok-bg); border: 1px solid var(--ok); } .verify-note.warn { color: var(--warn-text); background: var(--warn-bg); border-color: var(--warn-border); } .foot-hint { text-align: center; margin: 12px 0 0; font-size: 12.5px; color: var(--muted); } /* ── File-row duplicate badge ── */ .file-badge { flex: 0 0 auto; font-size: 11px; font-weight: 650; letter-spacing: 0.01em; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--card-border); color: var(--muted); background: var(--subtle); white-space: nowrap; } .file-badge.checking { color: var(--muted); } .file-badge.replace { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-soft); } .file-badge.addnew { color: var(--ok-text); border-color: var(--ok); background: var(--ok-bg); } .file-badge.exact { color: var(--danger-text); border-color: var(--danger); background: var(--danger-bg); } /* ── Confirmation / info modals ── */ .modal-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade 0.18s ease; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .modal { width: 100%; max-width: 460px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 26px; text-align: center; animation: rise 0.24s cubic-bezier(0.2, 0.7, 0.2, 1); } .modal-icon { font-size: 28px; margin-bottom: 6px; } .modal-title { margin: 0 0 8px; font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: var(--heading); } .modal-msg { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--text); } .modal-actions { display: flex; flex-direction: column; gap: 10px; } .modal-actions .btn { margin-top: 0; } /* ── Replace 3-step progress ── */ .replace-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; } .replace-steps li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--muted); transition: color 0.2s; } .rs-dot { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--card-border); background: var(--card); position: relative; transition: all 0.25s; } .replace-steps li.active { color: var(--heading); font-weight: 600; } .replace-steps li.active .rs-dot { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); animation: pulse 1.2s ease-in-out infinite; } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px var(--accent-ring); } 50% { box-shadow: 0 0 0 6px transparent; } } .replace-steps li.done { color: var(--ok-text); } .replace-steps li.done .rs-dot { border-color: var(--ok); background: var(--ok); } .replace-steps li.done .rs-dot::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; } /* ── Replaced note on Success ── */ .replaced-note { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent); } .replaced-note.warn { color: var(--warn-text); background: var(--warn-bg); border-color: var(--warn-border); } /* ── Segmented tabs: Files ⇄ Website URL ── */ .tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 18px; background: var(--subtle); border: 1px solid var(--card-border); border-radius: var(--radius-sm); } .tab { flex: 1; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--radius-xs); background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.18s, color 0.18s, box-shadow 0.18s, border-color 0.18s; } .tab:hover { color: var(--heading); } .tab.active { background: var(--card); color: var(--heading); border-color: var(--card-border); box-shadow: var(--shadow-sm); } .tab-panel { animation: rise 0.26s ease; } /* ── URL input + preview ── */ .url-intro { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); line-height: 1.55; } .url-row { display: flex; gap: 10px; align-items: stretch; } .url-row #urlInput { flex: 1; min-width: 0; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: var(--field-bg); color: var(--heading); font-size: 14.5px; font-family: inherit; transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; } .url-row #urlInput::placeholder { color: var(--placeholder); } .url-row #urlInput:focus { outline: none; border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px var(--accent-ring); } .url-row .btn { width: auto; margin-top: 0; flex: 0 0 auto; white-space: nowrap; padding-inline: 18px; } .url-error { margin-top: 14px; padding: 12px 15px; border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.5; border: 1px solid var(--danger); border-left-width: 4px; background: var(--danger-bg); color: var(--danger-text); display: flex; align-items: center; gap: 9px; animation: rise 0.26s ease; } .url-error::before { content: "!"; font-weight: 800; font-size: 12px; flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--danger); } /* Informational block (already in KB / doc-or-download page) — amber, not an error. */ .url-error.info { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-text); } .url-error.info::before { content: "i"; background: var(--warn); font-style: italic; } .url-card { margin-top: 18px; border: 1px solid var(--card-border); background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 16px; animation: rise 0.28s ease; } .url-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .url-ic { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--radius-xs); font-size: 18px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--card-border); } .url-card-meta { min-width: 0; flex: 1; } .url-card-title { font-size: 15px; font-weight: 650; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .url-card-count { font-size: 12.5px; color: var(--accent-strong); font-weight: 600; margin-top: 2px; } .url-sec-hint { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.55; } /* Per-section list with manual remove */ .url-sections { display: grid; gap: 10px; max-height: 46vh; overflow-y: auto; padding-right: 2px; } .url-sec { display: flex; align-items: flex-start; gap: 10px; background: var(--subtle); border: 1px solid var(--card-border); border-radius: var(--radius-xs); padding: 11px 12px; transition: opacity 0.18s, background 0.18s, border-color 0.18s; } .url-sec-body { min-width: 0; flex: 1; } .url-sec-head { font-size: 13px; font-weight: 650; color: var(--heading); margin-bottom: 3px; } .url-sec-size { font-weight: 500; color: var(--muted); } .url-sec-text { font-size: 13px; color: var(--text); line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .url-sec-remove { flex: 0 0 auto; margin-top: 1px; min-width: 30px; height: 30px; display: grid; place-items: center; padding: 0 9px; border: 1px solid var(--card-border); border-radius: var(--radius-xs); background: var(--card); color: var(--muted); font-size: 13px; font-weight: 650; cursor: pointer; transition: color 0.18s, background 0.18s, border-color 0.18s; } .url-sec-remove:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); } .url-sec-remove.undo { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .url-sec.removed { opacity: 0.55; border-style: dashed; background: var(--subtle); } .url-sec.removed .url-sec-head, .url-sec.removed .url-sec-text { text-decoration: line-through; } .url-sec-empty { font-size: 13px; color: var(--muted); padding: 10px 2px; line-height: 1.5; } .url-allremoved { margin-top: 12px; padding: 11px 13px; border-radius: var(--radius-xs); font-size: 12.5px; line-height: 1.5; color: var(--danger-text); background: var(--danger-bg); border: 1px solid var(--danger); } .url-card .action-row { margin-top: 16px; } /* Saved web-page address on the Success screen */ .ss-url { margin-top: 8px; font-size: 12px; color: var(--muted); word-break: break-all; text-align: center; } .hidden { display: none !important; } /* ════════════ Top nav + Knowledge Library ════════════ */ .btn.danger { background: var(--danger); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -10px rgba(220, 38, 38, 0.55); } .btn.danger:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); } .btn.sm { width: auto; margin-top: 0; padding: 8px 14px; font-size: 13px; border-radius: var(--radius-xs); } /* ── Login — premium branded split (individual accounts) ── */ /* Left: an always-dark brand hero (logo + SoldierX AI + value points) with a glow and a faint grid, independent of the app theme. Right: the sign-in form on the themed surface. Breaks out wider than the 700px shell, viewport-centred; stacks on small screens. The logo lives here and in the header. */ .login-card { position: relative; overflow: hidden; width: min(940px, 94vw); left: 50%; margin-left: calc(min(940px, 94vw) / -2); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow-lg), 0 0 90px -26px rgba(56, 189, 248, 0.30); animation: rise 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); } .login-grid { display: grid; grid-template-columns: 1.08fr 1fr; } /* Hero — always dark, regardless of theme */ .login-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 46px 42px; color: #E6EEF9; background: radial-gradient(130% 120% at 18% 0%, #1c2c48 0%, #0e1728 52%, #0a1120 100%); } .login-hero-fx { position: absolute; inset: 0; pointer-events: none; } .login-hero-fx::before { content: ""; position: absolute; inset: 0; background: radial-gradient(560px 300px at 82% 6%, rgba(56, 189, 248, 0.22), transparent 60%), radial-gradient(480px 280px at 6% 96%, rgba(3, 105, 161, 0.28), transparent 62%); } .login-hero-fx::after { content: ""; position: absolute; inset: 0; opacity: 0.6; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(circle at 28% 18%, #000, transparent 76%); mask-image: radial-gradient(circle at 28% 18%, #000, transparent 76%); } .login-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; } .login-logo { width: 52px; height: 52px; border-radius: 50%; object-fit: contain; background: #0b1220; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 10px 26px -10px rgba(0, 0, 0, 0.7); } .login-wordmark { font-size: 20px; font-weight: 800; letter-spacing: 0.01em; color: #fff; } .login-hero-mid { position: relative; z-index: 1; margin: auto 0; padding: 30px 0; } .login-hero-title { margin: 0 0 12px; font-family: var(--font-serif); font-size: 30px; line-height: 1.15; font-weight: 600; color: #fff; max-width: 14ch; } .login-hero-desc { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: #A9BBD4; max-width: 36ch; } .login-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .login-points li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: #C6D4E7; } .lp-ic { flex: 0 0 auto; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: rgba(56, 189, 248, 0.16); color: #7DD3FC; font-size: 11px; font-weight: 800; } .login-hero-foot { position: relative; z-index: 1; margin-top: auto; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #64789A; } /* Form side — themed surface */ .login-main { display: flex; flex-direction: column; justify-content: center; padding: 48px 46px; background: var(--card); } .login-main-head { margin-bottom: 24px; } .login-title { margin: 0; font-family: var(--font-serif); font-size: 27px; font-weight: 600; color: var(--heading); } .login-desc { margin: 7px 0 0; font-size: 13.5px; color: var(--muted); } .login-form { display: flex; flex-direction: column; gap: 6px; width: 100%; margin: 0; } .login-form .field { margin-bottom: 16px; } .login-form .btn { margin-top: 10px; } .login-foot-note { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; } /* Stack on small screens */ @media (max-width: 720px) { .login-card { width: min(460px, 94vw); margin-left: calc(min(460px, 94vw) / -2); } .login-grid { grid-template-columns: 1fr; } .login-hero { padding: 32px 28px; } .login-hero-mid { padding: 22px 0; margin: 0; } .login-hero-title { font-size: 25px; } .login-points, .login-hero-foot { display: none; } .login-main { padding: 30px 28px 34px; } } /* Password field with an inline show/hide toggle. */ .pass-wrap { position: relative; display: flex; align-items: center; } .pass-wrap input { width: 100%; padding-right: 62px; } .pass-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; font-family: inherit; letter-spacing: 0.01em; color: var(--accent); padding: 6px 8px; border-radius: var(--radius-xs); transition: background 0.15s, color 0.15s; } .pass-toggle:hover { background: var(--accent-soft); color: var(--accent-strong); } .pass-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); } /* "Sign out" button in the header */ .logout-btn { margin-left: 10px; align-self: center; white-space: nowrap; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--card); border: 1px solid var(--card-border); padding: 7px 13px; border-radius: 999px; box-shadow: var(--shadow-sm); transition: color 0.18s, background 0.18s, border-color 0.18s; } .logout-btn:hover { border-color: var(--accent); color: var(--accent-strong); } /* Name field auto-filled from the signed-in account (read-only) */ .field input.locked { opacity: 0.75; cursor: not-allowed; } /* Top nav toggle */ .nav { display: flex; gap: 8px; margin-bottom: 20px; } .nav-btn { flex: 1; padding: 11px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; font-weight: 600; font-family: inherit; color: var(--text); background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--shadow-sm); transition: color 0.18s, background 0.18s, border-color 0.18s; } .nav-btn:hover { border-color: var(--accent); color: var(--accent-strong); } .nav-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); box-shadow: none; } /* Library controls */ .lib-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; } .lib-search { flex: 1; min-width: 200px; padding: 11px 14px; border: 1px solid var(--card-border); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--text); font-size: 14px; font-family: inherit; transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; } .lib-search:focus { outline: none; border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px var(--accent-ring); } .lib-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-sm); background: var(--subtle); border: 1px solid var(--card-border); } .lib-tab { padding: 7px 13px; border: 1px solid transparent; border-radius: var(--radius-xs); cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; color: var(--muted); background: transparent; transition: background 0.18s, color 0.18s, border-color 0.18s; } .lib-tab.active { background: var(--card); color: var(--heading); border-color: var(--card-border); box-shadow: var(--shadow-sm); } .lib-tab-n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; font-size: 11px; font-variant-numeric: tabular-nums; background: var(--accent-soft); color: var(--accent-strong); } .lib-bulk { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid var(--accent); font-size: 13px; font-weight: 600; color: var(--heading); } .lib-loading, .lib-empty { padding: 30px 12px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; } /* Library table */ .lib-table-wrap { overflow-x: auto; border: 1px solid var(--card-border); border-radius: var(--radius-sm); } .lib-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; } .lib-table thead th { text-align: left; padding: 11px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); background: var(--subtle); border-bottom: 1px solid var(--card-border); white-space: nowrap; } .lib-table tbody td { padding: 11px 12px; border-bottom: 1px solid var(--hairline); color: var(--text); vertical-align: middle; } .lib-table tbody tr:last-child td { border-bottom: none; } .lib-table tbody tr:hover { background: var(--accent-soft); } .lib-table tr.is-archived { opacity: 0.82; } .lib-col-check { width: 34px; text-align: center; } .lib-col-num { text-align: right; font-variant-numeric: tabular-nums; } .lib-col-actions { white-space: nowrap; text-align: right; } .lib-name { max-width: 280px; } .lib-name { display: flex; align-items: center; gap: 8px; } .lib-type-ic { flex: 0 0 auto; font-size: 16px; } .lib-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--heading); } .lib-date { font-size: 12px; color: var(--muted); white-space: nowrap; } .lib-expiry-warn { margin-top: 2px; font-size: 11.5px; font-weight: 700; color: var(--danger-text); } .lib-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; } .lib-badge.active { color: var(--ok-text); background: var(--ok-bg); } .lib-badge.arch { color: var(--warn-text); background: var(--warn-bg); } .lib-act { margin-left: 6px; padding: 6px 10px; border-radius: var(--radius-xs); cursor: pointer; font-size: 12px; font-weight: 600; font-family: inherit; color: var(--text); background: var(--card); border: 1px solid var(--card-border); transition: color 0.15s, background 0.15s, border-color 0.15s; } .lib-act:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); } .lib-act.danger { background: var(--card); color: var(--text); } .lib-act.danger:hover { border-color: var(--danger); color: var(--danger-text); background: var(--danger-bg); } /* View-chunks modal */ .modal.modal-lg { max-width: 720px; text-align: left; } .modal.modal-lg .modal-title { text-align: left; } .view-chunks { max-height: 60vh; overflow: auto; display: grid; gap: 8px; margin-bottom: 16px; } .view-chunk { border: 1px solid var(--card-border); border-radius: var(--radius-xs); padding: 10px 12px; background: var(--subtle); } .view-chunk-head { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 5px; } .view-chunk-body { font-size: 13px; color: var(--text); line-height: 1.55; white-space: pre-wrap; word-break: break-word; } /* ════════════ Knowledge Inspector ════════════ */ /* Question box (mirrors the URL input; sits in a .url-row with the Search btn) */ .url-row #insInput { flex: 1; min-width: 0; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: var(--field-bg); color: var(--heading); font-size: 14.5px; font-family: inherit; transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; } .url-row #insInput::placeholder { color: var(--placeholder); } .url-row #insInput:focus { outline: none; border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px var(--accent-ring); } .ins-summary { margin: 16px 0 4px; font-size: 13px; color: var(--muted); line-height: 1.5; } .ins-results { display: grid; gap: 12px; margin-top: 12px; max-height: 56vh; overflow-y: auto; padding-right: 2px; } .ins-card { display: flex; align-items: flex-start; gap: 11px; border: 1px solid var(--card-border); background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 14px; animation: rise 0.26s ease; } .ins-check { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 3px; cursor: pointer; accent-color: var(--accent); } .ins-card-body { min-width: 0; flex: 1; } .ins-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 9px; } .ins-source { font-size: 13.5px; font-weight: 650; color: var(--heading); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ins-section { font-size: 12.5px; color: var(--muted); } .ins-arch-badge { font-size: 11px; font-weight: 650; letter-spacing: 0.01em; padding: 3px 9px; border-radius: 999px; color: var(--warn-text); background: var(--warn-bg); border: 1px solid var(--warn-border); white-space: nowrap; } .ins-score-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .ins-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--subtle-2); border: 1px solid var(--card-border); overflow: hidden; } .ins-bar-fill { height: 100%; border-radius: 999px; background: var(--accent); background-image: linear-gradient(90deg, var(--accent), var(--accent-strong)); transition: width 0.4s cubic-bezier(0.3,0.8,0.3,1); } .ins-score { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--accent-strong); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; } .ins-text { font-size: 13px; color: var(--text); line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; padding: 10px 12px; border-radius: var(--radius-xs); background: var(--subtle); border: 1px solid var(--card-border); } .ins-card-actions { display: flex; justify-content: flex-end; margin-top: 11px; } .ins-card-actions .btn { margin-top: 0; } /* Archived single sections inside the Library */ .lib-archchunks { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--card-border); } .lib-archchunks-title { margin: 0 0 3px; font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--heading); } .lib-archchunks-sub { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.5; } .lib-archchunks-list { display: grid; gap: 8px; } .lib-archchunk { display: flex; align-items: center; gap: 12px; border: 1px solid var(--card-border); background: var(--subtle); border-radius: var(--radius-xs); padding: 10px 13px; } .lac-meta { min-width: 0; flex: 1; } .lac-name { font-size: 13px; font-weight: 600; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lac-date { font-size: 11.5px; color: var(--muted); margin-top: 2px; } /* ── Browse by Document ── */ .ins-browse-controls { display: flex; gap: 12px; align-items: center; margin: 14px 0 4px; } .ins-browse-controls .lib-search { flex: 1; } .ins-browse-sub { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.5; } .ins-doc-list { display: grid; gap: 8px; max-height: 56vh; overflow-y: auto; padding-right: 2px; } .ins-doc-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: var(--radius-sm); cursor: pointer; background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--shadow-sm); transition: border-color 0.15s, background 0.15s; margin: 0; } .ins-doc-row:hover { border-color: var(--accent); background: var(--accent-soft); } .ins-doc-ic { flex: 0 0 auto; font-size: 20px; } .ins-doc-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; } .ins-doc-rowname { font-size: 13.5px; font-weight: 650; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ins-doc-rowsub { font-size: 11.5px; color: var(--muted); margin-top: 2px; text-transform: capitalize; } .ins-doc-chev { flex: 0 0 auto; font-size: 20px; color: var(--muted); } .ins-doc-archive { flex: 0 0 auto; } .ins-doc-row.is-archiving { opacity: 0.6; cursor: default; } .ins-doc-row.is-archiving:hover { border-color: var(--card-border); background: var(--card); } .ins-back { margin: 14px 0 12px; padding: 7px 12px; border-radius: var(--radius-xs); cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; color: var(--text); background: var(--card); border: 1px solid var(--card-border); transition: color 0.18s, border-color 0.18s; } .ins-back:hover { border-color: var(--accent); color: var(--accent-strong); } .ins-doc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .ins-doc-name { margin: 0; font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--heading); min-width: 0; overflow-wrap: anywhere; } .ins-doc-badge { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent); } .ins-sec-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--subtle); border: 1px solid var(--card-border); } .ins-selall { display: flex; align-items: center; font-size: 13px; color: var(--text); cursor: pointer; } .ins-selall input { accent-color: var(--accent); cursor: pointer; } .ins-sec-bar-actions { display: flex; gap: 10px; flex-wrap: wrap; } .ins-sec-bar-actions .btn { margin-top: 0; } #insSecMore { margin-top: 12px; } /* Whole-document actions, pinned at the top of the Section View. */ .ins-doc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; } .ins-doc-actions .btn { margin-top: 0; } @media (max-width: 520px) { .ins-doc-actions { flex-direction: column; align-items: stretch; } } /* "You're replacing …" banner on the Upload screen (Browse → Replace flow). */ .replace-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid var(--accent); } .replace-notice-body { display: flex; align-items: center; gap: 10px; } .replace-notice-ic { font-size: 18px; line-height: 1; } .replace-notice-text { font-size: 14px; color: var(--text); line-height: 1.45; } .replace-notice .btn { margin-top: 0; flex-shrink: 0; } /* ── Skeleton loaders, empty-state icons ── */ .skel { position: relative; overflow: hidden; background: var(--subtle); border: 1px solid var(--card-border); } .skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.16), transparent); animation: shimmerSkel 1.3s infinite; } @keyframes shimmerSkel { 100% { transform: translateX(100%); } } .skel-card { height: 92px; border-radius: var(--radius-sm); margin-bottom: 12px; } .skel-row { height: 54px; border-radius: var(--radius-xs); margin-bottom: 8px; } .empty-ic { font-size: 32px; margin-bottom: 8px; line-height: 1; } /* "All results are from one document" note (Query mode) */ .ins-onesource { margin: 0 0 10px; padding: 9px 13px; border-radius: var(--radius-xs); font-size: 12.5px; line-height: 1.5; color: var(--warn-text); background: var(--warn-bg); border: 1px solid var(--warn-border); } /* Restore + Delete-Forever buttons on an archived section */ .lac-actions { display: flex; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; } /* ── Reduced motion: honour the user's OS setting ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } @media (max-width: 520px) { .brand-step { display: none; } .card { padding: 20px; } .action-row { flex-direction: column; } .preview-blocks { max-height: none; } .nav { flex-direction: column; } .lib-controls { flex-direction: column; align-items: stretch; } .ins-results { max-height: none; } .ins-doc-list { max-height: none; } .ins-sec-bar { flex-direction: column; align-items: stretch; } } /* ── URL mode toggle (Just this page ⇄ Whole site) ───────────────────────────── */ .url-mode { display: inline-flex; gap: 4px; padding: 4px; background: var(--subtle); border: 1px solid var(--card-border); border-radius: 12px; margin-bottom: 8px; } .url-mode-btn { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600; padding: 8px 14px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; } .url-mode-btn:hover { color: var(--text); } .url-mode-btn.active { background: var(--card); color: var(--heading); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); } .url-mode-hint { margin: 0 0 14px; color: var(--muted); font-size: .9rem; } /* ── Whole-site crawl summary ─────────────────────────────────────────────────── */ .crawl-count { font-weight: 700; color: var(--heading); margin-bottom: 10px; } .crawl-pages { list-style: none; margin: 0 0 14px; padding: 0; max-height: 340px; overflow-y: auto; border: 1px solid var(--card-border); border-radius: 12px; } .crawl-page { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--hairline); } .crawl-page:last-child { border-bottom: 0; } .cp-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-count { color: var(--muted); font-size: .85rem; flex: none; } .crawl-sample { margin-bottom: 16px; color: var(--muted); } .crawl-sample summary { cursor: pointer; font-weight: 600; color: var(--text); } .crawl-sample-text { margin-top: 8px; padding: 12px; background: var(--field-bg); border: 1px solid var(--card-border); border-radius: 10px; white-space: pre-wrap; font-size: .9rem; max-height: 220px; overflow-y: auto; } /* ════════════ Polish pass: SVG icons · nav underline · toasts · empty states ════════════ */ .icon-sprite { display: none; } .ic { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .nav-btn .ic { width: 18px; height: 18px; } .tab .ic { width: 16px; height: 16px; } .url-mode-btn .ic, .logout-btn .ic, .ins-back .ic { width: 15px; height: 15px; } /* Icon + label alignment on non-.btn controls */ .nav-btn, .tab, .url-mode-btn, .logout-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .ins-back { display: inline-flex; align-items: center; gap: 7px; } /* Nav: active gets an accent underline that slides open */ .nav-btn { position: relative; overflow: hidden; } .nav-btn::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; transition: left 0.24s cubic-bezier(0.3, 0.8, 0.3, 1), right 0.24s cubic-bezier(0.3, 0.8, 0.3, 1); } .nav-btn.active::after { left: 14px; right: 14px; } .nav-btn.active .ic { color: var(--accent-strong); } /* Empty states: framed + centered with a soft icon puck */ .lib-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 20px; border: 1px dashed var(--card-border); border-radius: var(--radius); background: var(--field-bg); } .empty-ic { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 8px; border-radius: 50%; font-size: 24px; line-height: 1; background: var(--accent-soft); color: var(--accent); } /* ── Toasts (bottom-centre stack, non-blocking, optional Undo) ── */ .toast-wrap { position: fixed; z-index: 80; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px; align-items: center; width: max-content; max-width: min(92vw, 480px); pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 15px; border-radius: var(--radius-sm); background: var(--card); color: var(--text); border: 1px solid var(--card-border); border-left: 4px solid var(--accent); box-shadow: var(--shadow-lg); font-size: 13.5px; line-height: 1.4; animation: toastIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); } .toast.leaving { animation: toastOut 0.22s ease forwards; } .toast.ok { border-left-color: var(--ok); } .toast.err { border-left-color: var(--danger); } .toast-ic { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; color: var(--accent); } .toast.ok .toast-ic { color: var(--ok); } .toast.err .toast-ic { color: var(--danger); } .toast-ic .ic { width: 20px; height: 20px; stroke-width: 2; } .toast-msg { flex: 1; min-width: 0; } .toast-undo { flex: 0 0 auto; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--card-border); border-radius: var(--radius-xs); background: var(--subtle); color: var(--accent-strong); font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 10px; transition: background 0.15s, border-color 0.15s; } .toast-undo:hover { background: var(--accent-soft); border-color: var(--accent); } .toast-undo .ic { width: 14px; height: 14px; } .toast-close { flex: 0 0 auto; cursor: pointer; border: none; background: transparent; color: var(--muted); padding: 4px; border-radius: var(--radius-xs); display: grid; place-items: center; } .toast-close:hover { color: var(--text); background: var(--subtle); } .toast-close .ic { width: 15px; height: 15px; } @keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes toastOut { to { opacity: 0; transform: translateY(10px) scale(0.98); } }