/* * Custom CSS * Project-specific styles only - use Bootstrap utilities for layout/spacing. */ /* Example: Custom color overrides */ :root { --bs-primary: #0d6efd; } /* Example: Form feedback spacing */ .invalid-feedback { display: block; } /* Example: Card hover effect */ .card-hover:hover { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); transition: box-shadow 0.2s ease; } /* ========================================================================== PROJ-1: Token visualization Project-specific styles for the colored token chips. Bootstrap has no multi-color badge palette, so a custom 8-color set is defined here. ========================================================================== */ #token-output { display: flex; flex-wrap: wrap; gap: 0.35rem; max-height: 320px; overflow-y: auto; } .token-badge { display: inline-block; padding: 0.3rem 0.55rem; border-radius: 0.4rem; font-family: var(--bs-font-monospace, monospace); font-size: 0.875rem; line-height: 1.2; color: #1a1a1a; white-space: pre-wrap; word-break: break-word; border: 1px solid rgba(0, 0, 0, 0.12); } /* ========================================================================== PROJ-2: Temperature slider (mobile fix) On Android Chrome a horizontal drag on the range thumb can be hijacked by page scrolling, leaving the value stuck at the default. Letting the browser keep the slider gesture (no double-tap-zoom delay) makes dragging reliable on touch devices. ========================================================================== */ #temperature-slider { touch-action: manipulation; } /* ========================================================================== PROJ-5: Explanations & tooltips A single attribute on toggles ALL "?" help icons at once. No JS loop required — one CSS rule hides every .explanation-trigger instantly. ========================================================================== */ /* "?" help icon button — looks like an inline icon, behaves like a button. */ .explanation-trigger { border: 0; background: transparent; padding: 0 0.15rem; color: var(--bs-secondary, #6c757d); line-height: 1; cursor: pointer; vertical-align: baseline; } .explanation-trigger:hover, .explanation-trigger:focus-visible { color: var(--bs-primary, #0d6efd); } /* Toggle OFF: hide every help icon at once via the body attribute. */ body[data-explanations="off"] .explanation-trigger { display: none; } /* Inline glossary terms get a subtle dotted underline to signal "hover me". Always visible (not affected by the toggle) — terms must remain readable. */ .glossary-term { border-bottom: 1px dotted currentColor; cursor: help; } /* Keep long popover/tooltip text inside the viewport on small screens. */ .popover { max-width: 320px; } /* 8-color fixed palette - chosen for readability with dark text. */ .token-c0 { background-color: #ffd6a5; } .token-c1 { background-color: #caffbf; } .token-c2 { background-color: #9bf6ff; } .token-c3 { background-color: #bdb2ff; } .token-c4 { background-color: #ffc6ff; } .token-c5 { background-color: #fdffb6; } .token-c6 { background-color: #a0c4ff; } .token-c7 { background-color: #ffadad; } /* ============================================================== */ /* PROJ-11: Context Window Visualizer */ /* ============================================================== */ /* Segmented context bar. Bootstrap .progress + .progress-bar handle the structure; these only set the segment colours + overflow state. */ .ctx-seg-system { background-color: #0d6efd; } /* blue - system */ .ctx-seg-history { background-color: #198754; } /* green - history */ .ctx-seg-current { background-color: #fd7e14; } /* orange - current */ .ctx-seg-free { background-color: #adb5bd; } /* grey - free */ .ctx-progress.ctx-progress-overflow { outline: 2px solid var(--bs-danger, #dc3545); } .ctx-progress.ctx-progress-overflow .progress-bar { filter: saturate(1.4); } /* Legend colour swatches. */ .ctx-swatch { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 2px; vertical-align: -1px; margin-right: 0.25rem; } /* Conversation turn enter / drop animations. */ .ctx-turn-text { word-break: break-word; } .ctx-turn-enter { animation: ctx-turn-in 0.35s ease-out; } @keyframes ctx-turn-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .ctx-turn-dropped { opacity: 0.45; text-decoration: line-through; transition: opacity 0.3s ease; } /* "How to read this chart" details panel. */ .ctx-heat-howto { border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 0.375rem; padding: 0.5rem 0.75rem; background-color: var(--bs-light, #f8f9fa); } .ctx-heat-howto > summary { cursor: pointer; user-select: none; list-style: revert; /* keep the disclosure triangle visible */ } .ctx-heat-howto[open] > summary { margin-bottom: 0.25rem; } /* "show more / show less" link in conversation thread. */ .ctx-turn-toggle { font-size: 0.85rem; text-decoration: underline; } /* ---- Heatmap (CSS grid, no chart library) ---- */ .ctx-heat-grid-scroll { overflow-x: auto; } .ctx-heat-grid { position: relative; display: grid; grid-template-columns: max-content repeat(var(--ctx-cols, 6), minmax(56px, 1fr)); gap: 2px; min-width: 420px; } .ctx-heat-corner, .ctx-heat-colhead, .ctx-heat-rowhead { font-size: 0.8rem; font-weight: 600; padding: 0.4rem 0.5rem; background-color: var(--bs-light, #f8f9fa); display: flex; align-items: center; justify-content: center; text-align: center; } .ctx-heat-rowhead { justify-content: flex-end; white-space: nowrap; } /* Highlight the row that matches the selected model's context limit. */ .ctx-heat-rowhead-limit { background-color: var(--bs-warning-bg-subtle, #fff3cd); color: var(--bs-warning-text-emphasis, #664d03); border-left: 3px solid var(--bs-warning, #ffc107); } .ctx-heat-cell-limit { outline: 1px dashed rgba(0, 0, 0, 0.55); outline-offset: -2px; } /* Interpolated (estimated) cells get a subtle diagonal stripe overlay so the user can tell they are not part of the published benchmark data. */ .ctx-heat-cell-est { background-image: linear-gradient( 135deg, rgba(255, 255, 255, 0.18) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.18) 75%, transparent 75%, transparent ); background-size: 8px 8px; background-blend-mode: overlay; } .ctx-heat-cell { min-height: 2.4rem; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 600; color: #1b1b1b; cursor: pointer; border-radius: 2px; transition: transform 0.1s ease, box-shadow 0.1s ease; } .ctx-heat-cell:hover, .ctx-heat-cell:focus-visible { transform: scale(1.05); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35); outline: none; z-index: 2; } .ctx-heat-cell-selected { box-shadow: 0 0 0 3px var(--bs-dark, #212529); z-index: 3; } .ctx-heat-cell-na { background-color: #e9ecef; color: #adb5bd; cursor: not-allowed; } /* Colour scale legend bar. */ .ctx-heat-scale { display: inline-block; width: 160px; height: 0.85rem; border-radius: 3px; background: linear-gradient( to right, hsl(0, 75%, 55%), hsl(55, 75%, 55%), hsl(130, 75%, 55%) ); } /* "You are here" horizontal marker overlaying the grid. */ .ctx-heat-youarehere { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--bs-dark, #212529); pointer-events: none; z-index: 4; } .ctx-heat-youarehere-label { position: absolute; right: 0; top: -0.7rem; background: var(--bs-dark, #212529); color: #fff; font-size: 0.7rem; line-height: 1.2; padding: 0.1rem 0.4rem; border-radius: 3px; white-space: nowrap; } /* ========================================================================== PROJ-8: System Prompts Demo Project-specific styles for the LLM response panels and the JSON transparency view. Bootstrap covers cards / spinners / alerts already. ========================================================================== */ /* LLM response body: preserve whitespace + wrap long lines (no horizontal scroll). Inherits Bootstrap's

 reset but adds readability tweaks. */
.sp-response-text {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: var(--bs-font-sans-serif, sans-serif);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    color: var(--bs-body-color, #212529);
    background: transparent;
}

/* JSON preview in the collapsible transparency panel: monospace, soft
   background, capped height with scroll for very long prompts. */
.sp-json-preview {
    background: var(--bs-light, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.8125rem;
    line-height: 1.4;
    max-height: 320px;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--bs-body-color, #212529);
}

/* ==========================================================================
   PROJ-9: Function Calling Demo
   Stage-based cards reveal sequentially. Each stage is a Bootstrap card.
   JSON blocks reuse the .sp-json-preview look-and-feel via .fc-json.
   ========================================================================== */

/* Active tool-schema JSON block — visible at all times, updates live. */
.fc-json {
    background: var(--bs-light, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.8125rem;
    line-height: 1.4;
    max-height: 280px;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--bs-body-color, #212529);
    margin: 0;
}

/* Highlighted tool_calls JSON in stage 2 — visually distinct from
   the plain request JSON so the user immediately spots the tool call. */
.fc-json-toolcall {
    background: #fff5e1;
    border-color: #fd7e14;
    color: #5a3a00;
}

/* Stage card: subtle left border in the stage's accent colour so the
   linear flow (1 -> 2 -> 3 -> 4) reads at a glance. */
.fc-stage { border-left: 4px solid transparent; }
.fc-stage-1 { border-left-color: #0d6efd; }
.fc-stage-2 { border-left-color: #fd7e14; }
.fc-stage-3 { border-left-color: #6f42c1; }
.fc-stage-4 { border-left-color: #198754; }

/* Hidden stages stay collapsed (display:none); JS toggles .fc-stage-hidden. */
.fc-stage-hidden { display: none; }

/* Follow-up "round" cards (multi-step / recursive tool calls). Shares the
   stage-3 purple accent so the chain of rounds reads as one continuous
   loop, but a slightly tinted background separates each round visually. */
.fc-stage-round {
    background-color: #faf7ff;
}

/* Final LLM answer body — same readability tweaks as PROJ-8 .sp-response-text. */
.fc-answer-text {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: var(--bs-font-sans-serif, sans-serif);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    color: var(--bs-body-color, #212529);
    background: transparent;
}

/* Inline parameter row inside the custom-tool form. Bootstrap grid + flex
   handle most of it; this just keeps each row's "remove" button aligned. */
.fc-param-row .fc-param-remove {
    white-space: nowrap;
}

/* Compact close button used inside the active-tool badges. Bootstrap's
   default .btn-close is sized for modals/alerts — shrink it so it sits
   comfortably next to the tool name inside a small badge. */
.fc-active-tool-close {
    width: 0.55rem;
    height: 0.55rem;
    padding: 0.35rem;
    background-size: 0.6em;
    opacity: 0.6;
}
.fc-active-tool-close:hover {
    opacity: 1;
}

/* ==========================================================================
   PROJ-10: Temperature & Sampling Visualizer
   Custom styles for the live probability bars and logits table. Bootstrap
   covers cards / spinners / buttons / form-range already.
   ========================================================================== */

/* Container for the live bar list. Each bar is a flex row: token | bar | %. */
#tmp-bars-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* One probability row. Grid layout keeps token label, bar and percentage
   aligned even when the token text is very wide or empty. */
.tmp-bar-row {
    display: grid;
    grid-template-columns: minmax(4rem, 9rem) 1fr minmax(3.5rem, 4.5rem);
    align-items: center;
    column-gap: 0.75rem;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.875rem;
}

/* Token label cell — preserve whitespace so a space token reads visually
   (rendered as the middle-dot for clarity in the .tmp-token-display span). */
.tmp-bar-token {
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
}

/* Bar track + fill: Bootstrap's progress component would work but the
   single-line width here is dynamic per row, so a simple div pair is leaner. */
.tmp-bar-track {
    background: var(--bs-light, #f0f1f3);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    height: 1.5rem;
    overflow: hidden;
    position: relative;
}

.tmp-bar-fill {
    background: linear-gradient(90deg, #0d6efd 0%, #6610f2 100%);
    height: 100%;
    width: 0%;
    /* Smooth slider response — feels responsive but not jumpy. */
    transition: width 180ms ease-out;
}

/* Highlight the winning (most-likely) token so users see the greedy
   choice instantly even when the bar is tiny. */
.tmp-bar-row-winner .tmp-bar-fill {
    background: linear-gradient(90deg, #198754 0%, #20c997 100%);
}

.tmp-bar-pct {
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--bs-secondary-color, #6c757d);
}

/* Logits table — narrower font, tabular numerals so columns align cleanly. */
.tmp-logits-table {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.tmp-logits-table th { font-weight: 600; }

.tmp-logits-table td.tmp-logit-token,
.tmp-logits-table th.tmp-logit-token {
    font-family: var(--bs-font-monospace, monospace);
}

/* Generated text output — same readability tweaks as PROJ-8 / PROJ-9. */
.tmp-generated-text {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: var(--bs-font-sans-serif, sans-serif);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    color: var(--bs-body-color, #212529);
    background: transparent;
}

/* Softmax formula block — display math style. */
.tmp-formula {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 1rem;
    text-align: center;
    background: var(--bs-light, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    padding: 0.9rem 1rem;
    margin: 0;
    overflow-x: auto;
}

/* ============================================================== */
/* PROJ-12: RAG Demo — 5-step walkthrough + 2D scatter plot       */
/* ============================================================== */

/* --- Stepper ---------------------------------------------------- */
.rag-stepper {
    margin: 0;
    padding: 0;
}

.rag-step {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: var(--bs-light, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    color: var(--bs-secondary, #6c757d);
    font-size: 0.875rem;
    white-space: nowrap;
}

.rag-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--bs-secondary, #6c757d);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.rag-step-active {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    border-color: var(--bs-primary, #0d6efd);
}

.rag-step-active .rag-step-num {
    background: #fff;
    color: var(--bs-primary, #0d6efd);
}

.rag-step-done {
    background: #d1e7dd;
    color: #0a3622;
    border-color: #a3cfbb;
}

.rag-step-done .rag-step-num {
    background: var(--bs-success, #198754);
    color: #fff;
}

/* --- Doc cards & badges ----------------------------------------- */
.rag-doc-color-badge {
    font-weight: 600;
    color: #fff;
}

.rag-doc-dot {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    margin-right: 0.3rem;
    vertical-align: middle;
}

/* --- Chunking preview ------------------------------------------- */
.rag-chunked-doc {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    padding-bottom: 0.6rem;
}

.rag-chunked-doc:last-child {
    border-bottom: none;
}

.rag-chunk-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.rag-chunk-pill {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.4rem;
    background: #ffffff;
    border: 2px solid #ccc;
    font-size: 0.825rem;
    line-height: 1.35;
    color: #212529;
    max-width: 100%;
    word-wrap: break-word;
}

/* --- Vectors list (step 3) -------------------------------------- */
.rag-vectors-list {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    padding: 0.5rem;
    background: var(--bs-light, #f8f9fa);
}

.rag-vector-row {
    padding: 0.45rem 0.5rem;
    border-bottom: 1px dashed #dee2e6;
}

.rag-vector-row:last-child {
    border-bottom: none;
}

.rag-vector-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rag-vector-numbers {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.75rem;
    word-break: break-all;
    white-space: normal;
}

/* --- Canvas scatter plot ---------------------------------------- */
.rag-plot-wrapper {
    position: relative;
    width: 100%;
    height: 340px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    background: #ffffff;
    overflow: hidden;
}

.rag-plot-wrapper canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- three.js host: the renderer creates its own