/* SecureMind RAG — premium internal ISMS knowledge workspace */ :root { /* Zalopay-tinted light canvas */ --canvas: #f4f7fc; --canvas-grain: #eef3fb; --canvas-glass: rgba(244, 247, 252, 0.9); --surface: #ffffff; --surface-muted: #f1f5fd; --border: #e3e9f4; --border-strong: #cfd9ec; /* Ink */ --ink: #0a1633; --ink-soft: #45526f; --ink-faint: #8591ab; /* Zalopay brand: blue primary + green secondary */ --accent: #0033c9; --accent-strong: #00259a; --accent-soft: #e7ecfb; --accent-ring: rgba(0, 51, 201, 0.26); --accent-2: #00cf6a; --accent-2-strong: #00a857; --brand-gradient: linear-gradient(140deg, #00cf6a 0%, #0033c9 82%); /* Warn (Zalopay orange) */ --warn-ink: #9a5800; --warn-soft: #fff3e0; /* Deep Zalopay-blue sidebar */ --rail: #061233; --rail-raised: #0d1f4d; --rail-border: rgba(255, 255, 255, 0.10); --rail-ink: #eaf0fb; --rail-ink-soft: #9fb0d4; --rail-ink-faint: #6c7ea8; --danger: #e03a2f; --danger-soft: #fdecea; --danger-ink: #8a1f15; --radius: 14px; --radius-sm: 10px; --radius-lg: 20px; --shadow-sm: 0 1px 2px rgba(10, 22, 51, 0.06); --shadow-md: 0 10px 30px rgba(10, 22, 51, 0.10); --maxread: 720px; color-scheme: light; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-feature-settings: "ss01", "cv05"; } /* Dark mode — toggled via [data-theme="dark"] on */ [data-theme="dark"] { --canvas: #070d1f; --canvas-grain: #0a1228; --canvas-glass: rgba(7, 13, 31, 0.9); --surface: #111b38; --surface-muted: #16234a; --border: #25325a; --border-strong: #324168; --ink: #eaf0fb; --ink-soft: #b4c0db; --ink-faint: #8190b4; --accent: #4d7cff; --accent-strong: #719aff; --accent-soft: rgba(77, 124, 255, 0.16); --accent-ring: rgba(77, 124, 255, 0.34); --accent-2: #2ad98a; --accent-2-strong: #00cf6a; --warn-ink: #ffb454; --warn-soft: rgba(255, 138, 0, 0.16); --rail: #050b1c; --rail-raised: #101e44; --rail-border: rgba(255, 255, 255, 0.09); --danger: #ff6b5e; --danger-soft: rgba(255, 107, 94, 0.15); --danger-ink: #ffb0a8; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 12px 34px rgba(0, 0, 0, 0.5); color-scheme: dark; } * { box-sizing: border-box; } /* The HTML `hidden` attribute must always win over component `display` rules (e.g. .error-banner / .access-fields use display:flex, which would otherwise override the UA [hidden]{display:none} and leave them permanently visible). */ [hidden] { display: none !important; } html, body { height: 100%; margin: 0; } body { background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------- Shell */ .app-shell { height: 100vh; display: grid; grid-template-columns: 296px 1fr; overflow: hidden; } /* ---------------------------------------------------------------- Sidebar */ .control-rail { position: relative; background: radial-gradient(120% 80% at 0% 0%, rgba(0, 207, 106, 0.18), transparent 55%), var(--rail); color: var(--rail-ink); border-right: 1px solid var(--rail-border); display: flex; flex-direction: column; gap: 22px; padding: 26px 20px; overflow-y: auto; } .brand-block { display: flex; align-items: center; gap: 13px; } .brand-mark { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; color: #ffffff; background: var(--brand-gradient); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); } .brand-name { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: 0.01em; } .brand-subtitle { margin: 2px 0 0; font-size: 12.5px; color: var(--rail-ink-soft); } .eyebrow { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rail-ink-faint); } .corpus-card { background: var(--rail-raised); border: 1px solid var(--rail-border); border-radius: var(--radius); padding: 16px; } .corpus-count { display: flex; align-items: baseline; gap: 7px; margin-top: 8px; } .corpus-count #document-count { font-size: 30px; font-weight: 680; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; } .corpus-unit { font-size: 12.5px; color: var(--rail-ink-soft); } .corpus-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--rail-ink-faint); } .session-tools { display: grid; grid-template-columns: 1fr auto; gap: 9px; } .primary-action, .secondary-action { font: inherit; font-size: 13.5px; font-weight: 600; border-radius: var(--radius-sm); padding: 11px 14px; cursor: pointer; border: 1px solid transparent; transition: background 140ms ease, border-color 140ms ease, transform 80ms ease; } .primary-action { background: var(--accent); color: #ffffff; } .primary-action:hover { background: var(--accent-strong); } .primary-action:active { transform: translateY(1px); } .secondary-action { background: transparent; color: var(--rail-ink-soft); border-color: var(--rail-border); } .secondary-action:hover { color: var(--rail-ink); border-color: rgba(255,255,255,0.22); } .session-block { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; } .section-heading { display: flex; align-items: center; justify-content: space-between; } .session-count { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--rail-ink-faint); background: var(--rail-raised); border: 1px solid var(--rail-border); border-radius: 999px; padding: 1px 9px; } .session-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 0 -6px; padding: 0 6px; } .session-item { font: inherit; text-align: left; width: 100%; border: 1px solid transparent; background: transparent; border-radius: var(--radius-sm); padding: 9px 11px; cursor: pointer; color: var(--rail-ink-soft); display: flex; flex-direction: column; gap: 3px; transition: background 120ms ease, color 120ms ease; } .session-item:hover { background: var(--rail-raised); color: var(--rail-ink); } .session-item.active { background: var(--rail-raised); border-color: rgba(94, 197, 166, 0.35); color: var(--rail-ink); } .session-title { font-size: 13px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .session-meta { font-size: 10.5px; color: var(--rail-ink-faint); } /* Access token — quiet, at the bottom */ .access-card { border-top: 1px solid var(--rail-border); padding-top: 14px; } .access-toggle { font: inherit; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: transparent; border: 0; cursor: pointer; color: var(--rail-ink-faint); font-size: 11.5px; padding: 2px 0; } .access-toggle:hover { color: var(--rail-ink-soft); } .access-toggle::before { content: "🔒"; font-size: 10px; margin-right: -2px; filter: grayscale(1) opacity(0.7); } .access-toggle > span:first-of-type { margin-right: auto; } .access-state { font-size: 11px; color: var(--rail-ink-faint); border: 1px solid var(--rail-border); border-radius: 999px; padding: 1px 8px; } .access-state[data-set="true"] { color: var(--accent-2); border-color: rgba(0, 207, 106, 0.45); } .access-fields { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .access-fields label { font-size: 10.5px; color: var(--rail-ink-faint); } .token-row { display: flex; gap: 6px; } .access-fields input { flex: 1; min-width: 0; font: inherit; font-size: 12.5px; background: var(--rail); border: 1px solid var(--rail-border); border-radius: 8px; color: var(--rail-ink); padding: 8px 10px; } .access-fields input:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; } .access-fields #save-token { font: inherit; font-size: 12.5px; font-weight: 600; border: 0; border-radius: 8px; background: var(--accent); color: #ffffff; padding: 0 13px; cursor: pointer; } .clear-token { font: inherit; font-size: 11.5px; align-self: flex-start; background: transparent; border: 0; color: var(--rail-ink-faint); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; } .clear-token:hover { color: var(--rail-ink-soft); } /* ---------------------------------------------------------------- Workspace */ .chat-workspace { position: relative; min-width: 0; display: flex; flex-direction: column; height: 100vh; background: radial-gradient(140% 60% at 100% 0%, rgba(0, 51, 201, 0.05), transparent 60%), var(--canvas); } .chat-topbar { display: flex; align-items: center; gap: 14px; padding: 16px 28px; border-bottom: 1px solid var(--border); background: var(--canvas-glass); backdrop-filter: blur(8px); } .topbar-title { flex: 1; min-width: 0; } .topbar-title .eyebrow { color: var(--ink-faint); } .topbar-title h1 { margin: 3px 0 0; font-size: 17px; font-weight: 640; letter-spacing: -0.01em; } .topbar-actions { display: flex; align-items: center; gap: 10px; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: color 140ms ease, border-color 140ms ease, background 140ms ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent-ring); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: inline; } .status-pill { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; border-radius: 999px; padding: 5px 12px; border: 1px solid var(--border-strong); color: var(--ink-soft); background: var(--surface); display: inline-flex; align-items: center; gap: 7px; } .status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .status-pill[data-state="searching"] { color: var(--accent-strong); border-color: var(--accent-ring); } .status-pill[data-state="searching"]::before { animation: pulse 1.1s ease-in-out infinite; } .status-pill[data-state="error"] { color: var(--danger); border-color: var(--danger); } .status-pill[data-state="error"]::before { background: var(--danger); } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } .rail-toggle { display: none; flex-direction: column; gap: 4px; width: 38px; height: 34px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); cursor: pointer; align-items: center; justify-content: center; } .rail-toggle span { width: 16px; height: 1.8px; background: var(--ink-soft); border-radius: 2px; } /* ---------------------------------------------------------------- Messages */ .messages { flex: 1; min-height: 0; overflow-y: auto; padding: 28px; display: flex; flex-direction: column; gap: 22px; scroll-behavior: smooth; } .message-row { display: flex; width: 100%; } .message-row.user { justify-content: flex-end; } .message-row.assistant { justify-content: flex-start; } .bubble { max-width: min(var(--maxread), 86%); border-radius: var(--radius-lg); padding: 16px 19px; line-height: 1.62; font-size: 15px; overflow-wrap: anywhere; box-shadow: var(--shadow-sm); } .message-row.user .bubble { background: var(--accent); color: #ffffff; border-bottom-right-radius: 6px; } .message-row.assistant .bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 6px; color: var(--ink); } .message-row.error .bubble { background: var(--danger-soft); border: 1px solid rgba(180, 69, 47, 0.3); color: var(--danger-ink); } /* Answer typography */ .message-text > :first-child { margin-top: 0; } .message-text > :last-child { margin-bottom: 0; } .message-text p { margin: 0 0 10px; } .message-text ul, .message-text ol { margin: 0 0 10px; padding-left: 22px; } .message-text li { margin: 3px 0; padding-left: 2px; } .message-text li::marker { color: var(--accent); font-variant-numeric: tabular-nums; } .message-text strong { font-weight: 660; color: var(--ink); } /* Inline citation chips ([n]) that map to the numbered source cards */ .message-text sup.cite { cursor: pointer; display: inline-block; min-width: 15px; padding: 0 4px; margin: 0 1px; font-size: 0.66em; font-weight: 700; line-height: 1.4; vertical-align: super; text-align: center; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-ring); border-radius: 5px; font-variant-numeric: tabular-nums; transition: background 120ms ease, color 120ms ease; } .message-text sup.cite:hover, .message-text sup.cite:focus-visible { background: var(--accent); color: #ffffff; outline: none; } .source-card.source-card--active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .message-text code, .doc-code { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; background: var(--accent-soft); color: var(--accent-strong); border: 1px solid rgba(0, 51, 201, 0.18); border-radius: 6px; padding: 1px 6px; white-space: nowrap; } /* Evidence / answer badge + copy */ .answer-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .answer-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid rgba(0, 51, 201, 0.18); border-radius: 999px; padding: 3px 10px; } .answer-badge.catalog { color: var(--warn-ink); background: var(--warn-soft); border-color: rgba(255, 138, 0, 0.24); } .answer-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .copy-answer { margin-left: auto; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-faint); background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; cursor: pointer; transition: color 120ms ease, border-color 120ms ease; } .copy-answer:hover { color: var(--accent-strong); border-color: var(--accent-ring); } .copy-answer.copied { color: var(--accent-strong); border-color: var(--accent-ring); } /* Loading bubble */ .loading-dots { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-faint); font-size: 14px; } .loading-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; animation: bounce 1.2s infinite ease-in-out; } .loading-dots i:nth-child(2) { animation-delay: 0.15s; } .loading-dots i:nth-child(3) { animation-delay: 0.3s; } @keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-4px); opacity: 1; } } /* ---------------------------------------------------------------- Sources */ .sources { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-strong); } .sources-title { margin: 0 0 10px; font-size: 10.5px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } .source-list { display: flex; flex-direction: column; gap: 7px; } .source-card { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--border); background: var(--surface-muted); border-radius: var(--radius-sm); padding: 10px 12px; text-align: left; } .source-card:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; } .source-index { flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-strong); font-size: 11px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; } .source-body { min-width: 0; } .source-name { font-size: 13px; font-weight: 560; color: var(--ink); word-break: break-word; } .source-meta { margin-top: 2px; font-size: 11.5px; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 4px 10px; } .source-meta .doc-code { font-size: 11px; padding: 0 5px; white-space: normal; } .source-toggle { margin-top: 9px; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent-strong); background: transparent; border: 0; cursor: pointer; padding: 2px 0; } .source-toggle:hover { text-decoration: underline; text-underline-offset: 2px; } /* ---------------------------------------------------------------- Empty state */ .empty-state { margin: auto; max-width: 460px; text-align: center; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .empty-mark { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-weight: 700; font-size: 18px; color: #ffffff; background: var(--brand-gradient); box-shadow: var(--shadow-md); } .empty-state h2 { margin: 4px 0 0; font-size: 21px; font-weight: 660; letter-spacing: -0.01em; color: var(--ink); } .empty-state p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); } .empty-status { margin-top: 4px; font-size: 12.5px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 7px; } .empty-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } /* ---------------------------------------------------------------- Composer */ .composer-region { padding: 14px 28px 20px; border-top: 1px solid var(--border); background: var(--canvas-glass); backdrop-filter: blur(8px); } .error-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 11px 14px; border-radius: var(--radius-sm); background: var(--danger-soft); border: 1px solid rgba(180, 69, 47, 0.3); color: var(--danger-ink); font-size: 13px; } .error-banner #error-text { flex: 1; } .error-retry { font: inherit; font-size: 12.5px; font-weight: 600; border: 1px solid rgba(180, 69, 47, 0.4); background: transparent; color: var(--danger-ink); border-radius: 8px; padding: 5px 11px; cursor: pointer; } .error-retry:hover { background: rgba(180, 69, 47, 0.08); } .composer { display: flex; align-items: flex-end; gap: 10px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 10px 10px 10px 16px; box-shadow: var(--shadow-sm); transition: border-color 140ms ease, box-shadow 140ms ease; max-width: 960px; margin: 0 auto; } .composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); } .composer textarea { flex: 1; resize: none; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; line-height: 1.55; color: var(--ink); max-height: 200px; padding: 6px 0; } .composer textarea::placeholder { color: var(--ink-faint); } .composer textarea:disabled { color: var(--ink-faint); } .send-button { flex: none; display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 14px; font-weight: 650; color: #ffffff; background: var(--accent); border: 0; border-radius: var(--radius-sm); padding: 10px 16px; cursor: pointer; transition: background 140ms ease, transform 80ms ease, opacity 140ms ease; } .send-button:hover:not(:disabled) { background: var(--accent-strong); } .send-button:active:not(:disabled) { transform: translateY(1px); } .send-button:disabled { opacity: 0.45; cursor: not-allowed; } .composer-hint { margin: 10px auto 0; max-width: 960px; font-size: 11.5px; color: var(--ink-faint); text-align: center; } /* ---------------------------------------------------------------- Focus */ :where(button, a, textarea, input, [tabindex]):focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; } /* ---------------------------------------------------------------- Scrim */ .sidebar-scrim { display: none; } /* ---------------------------------------------------------------- Responsive */ @media (max-width: 960px) { .app-shell { grid-template-columns: 1fr; } .control-rail { position: fixed; inset: 0 auto 0 0; width: 300px; max-width: 84vw; z-index: 40; transform: translateX(-104%); transition: transform 200ms ease; box-shadow: var(--shadow-md); } .app-shell.rail-open .control-rail { transform: translateX(0); } .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(6, 18, 51, 0.5); backdrop-filter: blur(2px); } .rail-toggle { display: inline-flex; } .messages, .composer-region { padding-left: 16px; padding-right: 16px; } .chat-topbar { padding-left: 16px; padding-right: 16px; } .bubble { max-width: 94%; } } @media (max-width: 520px) { .topbar-title h1 { font-size: 15px; } .send-button span { display: none; } .send-button { padding: 11px 13px; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .status-pill[data-state="searching"]::before, .loading-dots i { animation: none !important; } .control-rail { transition: none; } } /* ---------------------------------------------------------------- Intro screen */ .intro-screen { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 32px 20px; overflow-y: auto; background: radial-gradient(120% 90% at 0% 0%, rgba(0, 207, 106, 0.12), transparent 55%), radial-gradient(120% 90% at 100% 100%, rgba(0, 51, 201, 0.16), transparent 55%), var(--canvas); } .intro-card { width: min(640px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 36px 34px; } .intro-brandline { display: flex; align-items: center; gap: 14px; } .intro-mark { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; font-size: 20px; color: #ffffff; background: var(--brand-gradient); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); } .intro-eyebrow { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .intro-title { margin: 3px 0 0; font-size: 26px; font-weight: 680; letter-spacing: -0.01em; color: var(--ink); } .intro-lead { margin: 20px 0 0; font-size: 15px; line-height: 1.65; color: var(--ink-soft); } .intro-total { margin: 24px 0 14px; display: flex; align-items: baseline; gap: 9px; } .intro-total-num { font-size: 40px; font-weight: 720; line-height: 1; letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; } .intro-total-label { font-size: 14px; color: var(--ink-soft); } .intro-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin-bottom: 28px; } .intro-stat { display: flex; flex-direction: column; gap: 3px; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-muted); } .intro-stat-num { font-size: 22px; font-weight: 680; color: var(--ink); font-variant-numeric: tabular-nums; } .intro-stat-label { font-size: 12px; color: var(--ink-faint); } .intro-enter { width: 100%; border: 0; border-radius: var(--radius); padding: 14px 18px; font: inherit; font-size: 15px; font-weight: 650; color: #ffffff; background: var(--accent); cursor: pointer; transition: background 140ms ease, transform 80ms ease; } .intro-enter:hover { background: var(--accent-strong); } .intro-enter:active { transform: translateY(1px); } @media (max-width: 520px) { .intro-card { padding: 26px 20px; } .intro-title { font-size: 22px; } .intro-total-num { font-size: 34px; } }