/* ===== 1-tokens/_design-tokens.css ===== */
#boot-skeleton {
display: none !important;
}
/* ==========================================================================
WayaX Design Tokens — Sprint 9
Source of truth: Figma "PRODUCT MAP-AI WAYA X" → Hand off → WAYA-DESIGN-SYSTEM
https://www.figma.com/design/Wd6IMeHakzxbDBeVb6XqMA/PRODUCT-MAP-AI-WAYA-X
This is the ONLY place raw colour/size literals belong. Everything else in
the stylesheet tree must reference these variables.
Legacy aliases (--bg0, --blue, --t1 …) are kept at the bottom so the older
card styles keep resolving while they are migrated file by file.
========================================================================== */
/* templates/index.html's #boot-skeleton is initially display:flex (inline CSS)
and covers the full viewport until the app is ready. JS (onboarding.js /
history.js) hides it once the real content is painted, so there is no empty
flash during the CSS-load → JS-boot gap.
Without !important, JS inline-style can freely re-show/hide it with
element.style.display even while this bundle's rule is in effect.
A CSS-only failsafe auto-hides after 10 s in case JS never fires. */
#boot-skeleton.fade-out,
#boot-skeleton.boot-skeleton-fade {
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 0.25s ease !important;
}
:root {
/* ── Typography ──────────────────────────────────────────────────────── */
/* Chevron + plus marks from the Figma icon set (Lucide), inlined so they can be
used as CSS masks and tint themselves to whatever row they sit in. */
/* Masked so the icon tints to currentColor, like the other icon tokens here. */
--wx-pms: url("data:image/svg+xml,");
/* Restored after the sprint-9-portfolio-watchlist-session merge dropped it:
6-redesign/_home.css masks .sidebar-expand-icon with this, so without it
the control that reopens a collapsed rail has no glyph at all. */
--wx-panel-left-open: url("data:image/svg+xml,");
--wx-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
--wx-download: url("data:image/svg+xml,");
--wx-chevron-right: url("data:image/svg+xml,");
--wx-panel-left-open: url("data:image/svg+xml,");
--wx-chevron-left: url("data:image/svg+xml,");
--wx-chevron-down: url("data:image/svg+xml,");
--wx-chevron-up: url("data:image/svg+xml,");
--wx-plus: url("data:image/svg+xml,");
--wx-bookmark: url("data:image/svg+xml,");
--wx-bookmark-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
--wx-pencil: url("data:image/svg+xml,%3Csvg%20class%3D%27lucide%20lucide-square-pen%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%20%3Cpath%20d%3D%27M12%203H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2v-7%27%20%2F%3E%20%3Cpath%20d%3D%27M18.375%202.625a1%201%200%200%201%203%203l-9.013%209.014a2%202%200%200%201-.853.505l-2.873.84a.5.5%200%200%201-.62-.62l.84-2.873a2%202%200%200%201%20.506-.852z%27%20%2F%3E%20%3C%2Fsvg%3E");
--wx-trash: url("data:image/svg+xml,");
--wx-binoculars: url("data:image/svg+xml,%3Csvg%20class%3D%27lucide%20lucide-binoculars%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%20%3Cpath%20d%3D%27M10%2010h4%27%20%2F%3E%20%3Cpath%20d%3D%27M19%207V4a1%201%200%200%200-1-1h-2a1%201%200%200%200-1%201v3%27%20%2F%3E%20%3Cpath%20d%3D%27M20%2021a2%202%200%200%200%202-2v-3.851c0-1.39-2-2.962-2-4.829V8a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v11a2%202%200%200%200%202%202z%27%20%2F%3E%20%3Cpath%20d%3D%27M%2022%2016%20L%202%2016%27%20%2F%3E%20%3Cpath%20d%3D%27M4%2021a2%202%200%200%201-2-2v-3.851c0-1.39%202-2.962%202-4.829V8a1%201%200%200%201%201-1h4a1%201%200%200%201%201%201v11a2%202%200%200%201-2%202z%27%20%2F%3E%20%3Cpath%20d%3D%27M9%207V4a1%201%200%200%200-1-1H6a1%201%200%200%200-1%201v3%27%20%2F%3E%20%3C%2Fsvg%3E");
--wx-shield-check: url("data:image/svg+xml,%3Csvg%20class%3D%27lucide%20lucide-shield-check%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20%3E%20%3Cpath%20d%3D%27M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%27%20%2F%3E%20%3Cpath%20d%3D%27m9%2012%202%202%204-4%27%20%2F%3E%20%3C%2Fsvg%3E");
--wx-font-brand: "Sora", "SF Pro Display", -apple-system, BlinkMacSystemFont,
"Segoe UI", system-ui, sans-serif;
--wx-font-ui: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont,
"Segoe UI", system-ui, sans-serif;
--wx-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
--wx-text-3xl: 38px; /* welcome headline */
--wx-text-2xl: 24px;
--wx-text-xl: 20px;
--wx-text-lg: 16px;
--wx-text-md: 14.5px; /* composer placeholder */
--wx-text-base: 13px; /* default UI / nav label */
--wx-text-sm: 12px;
--wx-text-xs: 11px;
--wx-text-2xs: 10px;
--wx-text-3xs: 9px;
--wx-weight-regular: 400;
--wx-weight-medium: 500;
--wx-weight-semibold: 600;
--wx-weight-bold: 700;
--wx-weight-extrabold: 800;
--wx-tracking-tight: -0.32px;
--wx-tracking-headline: -0.76px;
--wx-tracking-wide: 0.5px;
/* ── Surfaces (dark shell) ───────────────────────────────────────────── */
--wx-bg-canvas: #111113; /* app background behind the panels */
/* Was a lighter #1c1c1e — visibly different from the canvas colour showing
around/behind the white panel, so the sidebar read as a separate block
instead of the same dark shell continuing behind it. Matched to the
canvas so the whole dark shell is one consistent colour. */
--wx-bg-sidebar: var(--wx-bg-canvas); /* sidebar + dark cards */
--wx-bg-surface: #1c1c1e;
--wx-bg-elevated: #2c2c2e; /* raised rows, secondary buttons */
--wx-bg-raised: #3a3a3c; /* counters, pills */
--wx-bg-track: #2a2b35; /* progress track */
--wx-bg-overlay: rgba(255, 255, 255, 0.04);
--wx-bg-overlay-strong: rgba(255, 255, 255, 0.07);
/* ── Sidebar nav states ──────────────────────────────────────────────── */
/* The selected row's pill and the tone its icon takes. Both match the
reference build's .sidebar-btn-active, where the icon sits one step
brighter than the resting slate-400 and one step below the white label. */
--wx-nav-active-bg: var(--wx-bg-elevated);
--wx-nav-active-icon: #e2e8f0;
--wx-skills-icon: var(--wx-brand-orchid);
/* ── Surfaces (light panels: home hero, skills) ──────────────────────── */
--wx-bg-panel: #ffffff;
--wx-bg-panel-muted: #f1f5f9;
--wx-bg-panel-sunken: #f8fafc;
/* ── Borders ─────────────────────────────────────────────────────────── */
--wx-border-subtle: rgba(255, 255, 255, 0.06);
--wx-border: rgba(255, 255, 255, 0.08);
--wx-border-strong: rgba(255, 255, 255, 0.14);
--wx-border-light: rgba(226, 232, 240, 0.9);
--wx-border-light-strong: #cbd5e1;
/* ── Text on dark ────────────────────────────────────────────────────── */
--wx-text-primary: #ffffff;
--wx-text-secondary: #f1f5f9;
--wx-text-tertiary: #cbd5e1;
--wx-text-muted: #94a3b8;
--wx-text-faint: #777987;
--wx-text-label: #8e909d;
/* ── Text on light ───────────────────────────────────────────────────── */
--wx-text-on-light: #1c1c1e;
--wx-text-on-light-secondary: #334155;
--wx-text-on-light-muted: #64748b;
--wx-text-on-light-faint: #94a3b8;
/* ── Brand ───────────────────────────────────────────────────────────── */
--wx-brand-blue: #3d84f6;
--wx-brand-indigo: #716ff7;
--wx-brand-violet: #a358f7;
--wx-brand-purple: #ac54f7;
--wx-brand-magenta: #d946ef;
--wx-brand-orchid: #c084fc;
/* Primary action gradient — buttons, avatars, progress fills */
--wx-gradient-brand: linear-gradient(
135deg,
#3d84f6 0%, #5877f7 24%, #716ff7 45%,
#915ef7 68%, #a358f7 86%, #ac54f7 100%
);
/* Headline / wordmark gradient — the "X" in WayaX */
--wx-gradient-wordmark: linear-gradient(
152deg, #3b82f6 8.33%, #a855f7 50%, #d946ef 91.67%
);
/* Decorative border gradient for outlined pills and the composer */
--wx-gradient-outline: linear-gradient(
157deg, #d946ef 8.33%, #c026d3 37.5%, #8b5cf6 66.67%, #7c3aed 91.67%
);
/* Active "Skills" nav treatment */
--wx-gradient-skills: linear-gradient(
170deg, #281e3a 0%, #3d2958 50%, #2e2042 100%
);
--wx-gradient-subscription: linear-gradient(
166deg, rgba(28, 28, 30, 0.98) 0%, rgba(30, 28, 38, 0.98) 100%
);
/* ── Status ──────────────────────────────────────────────────────────── */
--wx-success: #12d9a5;
--wx-success-solid: #10b981;
--wx-success-bg: rgba(0, 154, 111, 0.2);
--wx-danger: #ff4d6a;
--wx-danger-bg: rgba(255, 77, 106, 0.16);
--wx-warning: #f5b547;
--wx-warning-bg: rgba(245, 181, 71, 0.16);
--wx-info: #38bdf8;
--wx-info-bg: rgba(56, 189, 248, 0.16);
/* ── Radii ───────────────────────────────────────────────────────────── */
--wx-radius-xs: 6px;
--wx-radius-sm: 8px;
--wx-radius-md: 10px;
--wx-radius-lg: 12px;
--wx-radius-xl: 14px;
--wx-radius-2xl: 16px;
--wx-radius-pill: 9999px;
/* ── Spacing ─────────────────────────────────────────────────────────── */
--wx-space-1: 2px;
--wx-space-2: 4px;
--wx-space-3: 6px;
--wx-space-4: 8px;
--wx-space-5: 10px;
--wx-space-6: 12px;
--wx-space-7: 14px;
--wx-space-8: 16px;
--wx-space-10: 24px;
--wx-space-12: 32px;
/* ── Elevation ───────────────────────────────────────────────────────── */
--wx-shadow-panel: 0 4px 20px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.05);
--wx-shadow-sidebar: 0 4px 16px rgba(0, 0, 0, 0.12);
--wx-shadow-card: none;
--wx-shadow-raised: 0 4px 18px rgba(0, 0, 0, 0.22),
0 2px 10px rgba(160, 123, 240, 0.22), 0 0 10px rgba(160, 123, 240, 0.14);
--wx-shadow-brand: 0 4px 18px rgba(160, 123, 240, 0.45),
0 2px 8px rgba(61, 132, 246, 0.3);
--wx-shadow-skills: 0 1px 22px rgba(168, 85, 247, 0.38);
--wx-shadow-avatar: 0 4px 14px rgba(110, 46, 219, 0.45),
0 2px 8px rgba(61, 132, 246, 0.3);
/* Glass highlight applied on top of gradient buttons */
--wx-inset-gloss: inset 0 1.5px 1.5px rgba(255, 255, 255, 0.65),
inset 0 -1px 2px rgba(0, 0, 0, 0.2);
--wx-inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.18);
/* ── Layout ──────────────────────────────────────────────────────────── */
--wx-sidebar-width: 268px;
--wx-sidebar-width-collapsed: 76px;
--wx-skills-width: 480px;
/* Matches .input-bar-inner/.msg-row's own 768px (4-features/_composer.css,
4-features/_chat.css) — the home hero's landing search box used a
separate, wider 896px cap, so it rendered visibly wider/less contained
than the in-chat composer it turns into after the first message. */
--wx-composer-max: 768px;
--wx-content-max: 1140px;
/* ── Motion ──────────────────────────────────────────────────────────── */
--wx-ease: cubic-bezier(0.4, 0, 0.2, 1);
--wx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--wx-duration-fast: 120ms;
--wx-duration: 200ms;
--wx-duration-slow: 320ms;
/* ══════════════════════════════════════════════════════════════════════
LEGACY ALIASES
Older card styles still reference these. They now resolve to the Sprint 9
palette, so the whole surface picks up the new brand without a rewrite.
Migrate a file to --wx-* tokens, then drop its alias usage.
══════════════════════════════════════════════════════════════════════ */
--bg0: var(--wx-bg-canvas);
--bg1: var(--wx-bg-surface);
--bg2: var(--wx-bg-elevated);
--bg3: var(--wx-bg-raised);
--halo-bg: var(--wx-bg-canvas);
--halo-surface: var(--wx-bg-surface);
--halo-elevated: var(--wx-bg-elevated);
--halo-border: var(--wx-border);
--halo-border-strong: var(--wx-border-strong);
--t0: var(--wx-text-secondary);
--t1: var(--wx-text-muted);
--t2: var(--wx-text-faint);
/* --t3 has no fainter dark-scope tier below --wx-text-faint to map to —
dozens of card stylesheets (5-cards/*.css) already reference var(--t3) as
their most-muted text tier, so it must resolve to something rather than
silently falling back to an inherited colour; reusing --wx-text-faint here
keeps it at the same "as muted as it gets" tier as --t2. */
--t3: var(--wx-text-faint);
--halo-on-surface: var(--wx-text-secondary);
--halo-on-surface-muted: var(--wx-text-muted);
--halo-on-surface-faint: var(--wx-text-faint);
--halo-on-primary: #ffffff;
--blue: var(--wx-brand-blue);
--blue-hover: #5877f7;
--blue-pressed: #2f6fd8;
--purple: var(--wx-brand-purple);
--cyan: var(--wx-info);
--green: var(--wx-success);
--red: var(--wx-danger);
--yellow: var(--wx-warning);
--halo-primary: var(--wx-brand-blue);
--halo-info: var(--wx-info);
--halo-success: var(--wx-success);
--halo-warning: var(--wx-warning);
--halo-error: var(--wx-danger);
--accent-violet: var(--wx-brand-violet);
--border0: var(--wx-border-subtle);
--border1: var(--wx-border);
--border2: var(--wx-border-strong);
--grad: var(--wx-gradient-brand);
--grad-vertical: linear-gradient(180deg, #3d84f6, #ac54f7);
--chip-blue-bg: rgba(61, 132, 246, 0.14);
--chip-blue: #9ec0ff;
--chip-green-bg: rgba(18, 217, 165, 0.14);
--chip-green: #6ee7b7;
--chip-yellow-bg: rgba(245, 181, 71, 0.14);
--chip-yellow: #fcd34d;
--chip-purple-bg: rgba(172, 84, 247, 0.14);
--chip-purple: #d9a3f7;
--chip-red-bg: rgba(255, 77, 106, 0.14);
--chip-red: #ff96a8;
--text-primary: var(--wx-text-secondary);
--text-muted: var(--wx-text-muted);
}
/* ===== 2-base/_reset.css ===== */
/* ==========================================================================
Reset
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ===== 2-base/_document.css ===== */
/* ==========================================================================
Document — html / body defaults
========================================================================== */
html,
body {
height: 100%;
font-family: var(--wx-font-ui);
background: var(--wx-bg-canvas);
color: var(--wx-text-primary);
font-size: 14px;
line-height: 1.6;
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.font-sora {
font-family: var(--wx-font-brand), Sora, sans-serif !important;
}
/* ===== 2-base/_scrollbar.css ===== */
/* ==========================================================================
Scrollbar
Extracted from the legacy index.html monolith (source lines 94-105).
========================================================================== */
/* ── Scrollbar ── */
::-webkit-scrollbar {
width: 4px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 99px;
}
/* ===== 2-base/_animations.css ===== */
/* ==========================================================================
Keyframe animations
Extracted from the legacy index.html monolith (source lines 106-180).
========================================================================== */
/* ── Animations ── */
@keyframes floatY {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-9px);
}
}
@keyframes glowPulse {
0%,
100% {
opacity: 0.4;
transform: scale(1);
}
50% {
opacity: 0.9;
transform: scale(1.12);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes chipIn {
from {
opacity: 0;
transform: translateY(8px) scale(0.94);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes bounce {
0%,
60%,
100% {
transform: translateY(0);
opacity: 0.35;
}
30% {
transform: translateY(-6px);
opacity: 1;
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* ===== 3-layout/_onboarding.css ===== */
/* ==========================================================================
Onboarding overlay
Two-phase intro matching the reference build (friendly-galileo-smoky.vercel.app):
a dark "Curious Mind Deserves / Decisive Answers" card that cross-fades into
a light "What should I call you?" name-capture form. Sequenced by
features/intro/onboardingSequence.js via phase classes/attributes on
#onboarding-overlay and .ob-card — no per-element JS timers beyond that.
========================================================================== */
#onboarding-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
overflow: hidden;
background-color: #1c1c1e;
transition: background-color 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}
#onboarding-overlay.phase-light {
background-color: #f8fafc;
}
/* ── Grid background (light phase only) ──────────────────────────────── */
.ob-bg-grid {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
background-image: linear-gradient(to right, rgba(15, 23, 42, 0.043) 1px, transparent 1px),
linear-gradient(rgba(15, 23, 42, 0.043) 1px, transparent 1px);
background-size: 32px 32px;
mask-image: radial-gradient(75% 70%, #000 35%, rgba(0, 0, 0, 0.3) 75%, transparent 100%);
-webkit-mask-image: radial-gradient(75% 70%, #000 35%, rgba(0, 0, 0, 0.3) 75%, transparent 100%);
transition: opacity 1s ease;
}
#onboarding-overlay.phase-light .ob-bg-grid {
opacity: 1;
}
/* ── Card shell + glow halo ───────────────────────────────────────────── */
.ob-card {
position: relative;
z-index: 1;
width: 100%;
max-width: 480px;
border-radius: 28px;
}
.ob-card-blob-core,
.ob-card-blob-wide,
.ob-card-blob-ambient {
position: absolute;
pointer-events: none;
background: linear-gradient(135deg, #aed4f2, #cce2f5 25%, #e2c7f3 45%, #f5e4cf 75%, #eec491);
opacity: 0;
transform: scale(0.9);
transition: opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1), transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}
.ob-card-blob-core {
inset: -2px;
border-radius: 30px;
z-index: 0;
}
.ob-card-blob-wide {
inset: -26px;
border-radius: 54px;
filter: blur(26px);
z-index: -2;
}
.ob-card-blob-ambient {
inset: -44px;
border-radius: 72px;
filter: blur(44px);
z-index: -3;
}
.ob-card[data-card-phase="forming"] .ob-card-blob-core,
.ob-card[data-card-phase="settled"] .ob-card-blob-core {
opacity: 0.65;
transform: scale(1);
}
.ob-card[data-card-phase="forming"] .ob-card-blob-wide,
.ob-card[data-card-phase="settled"] .ob-card-blob-wide {
opacity: 0.28;
transform: scale(1);
}
.ob-card[data-card-phase="forming"] .ob-card-blob-ambient,
.ob-card[data-card-phase="settled"] .ob-card-blob-ambient {
opacity: 0.16;
transform: scale(1);
}
/* ── Card inner surface: dark → white cross-fade ─────────────────────── */
.ob-card-inner {
position: relative;
width: 100%;
min-height: 480px;
padding: 48px 36px 44px;
border-radius: 27px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
box-sizing: border-box;
background-color: #1c1c1e;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22);
transition: background-color 1.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 1.15s cubic-bezier(0.16, 1, 0.3, 1),
border-color 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.ob-card-inner.inner-white {
background-color: #fff;
box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.08), inset 0 1px 1px #fff;
border: 1px solid rgba(226, 232, 240, 0.8);
}
.ob-card-inner::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 55%;
background: linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 40%, transparent);
border-radius: 27px 27px 0 0;
pointer-events: none;
transition: opacity 0.85s;
}
.ob-card-inner.inner-white::before {
opacity: 0;
}
/* ── Logo ─────────────────────────────────────────────────────────────── */
.ob-logo-wrap {
width: 58px;
height: 77px;
margin: 0 auto 28px;
position: relative;
flex-shrink: 0;
}
/* The logo fills in bottom-to-top behind a rising, wobbling wave — the exact
motion of the source Lottie file (static/lottie/wayax-intro-lottie.orig.json,
"Liquid Wave Mask" layer). The wave itself is an SVG in
onboarding.html whose path "d" is stepped frame-by-frame by
features/intro/waveMaskFrames.js; the paths below just sit under it with a
plain, static fill — no CSS animation on them at all. */
.ob-logo-svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
}
/* ── Tagline ("Curious Mind Deserves / Decisive Answers") ───────────────
Dark-phase only content — absolutely positioned over the form so the two
cross-fade without the card resizing. */
.ob-tagline {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 10;
opacity: 1;
transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.ob-tagline.is-out {
opacity: 0;
filter: blur(4px);
transform: translateY(4px) scale(0.97);
}
.ob-tagline-line {
font-family: var(--wx-font-brand, var(--font-brand));
font-size: 19px;
font-weight: 400;
letter-spacing: -0.015em;
line-height: 1.4;
color: rgba(255, 255, 255, 0.95);
opacity: 0;
transform: translateY(12px) scale(0.98);
filter: blur(3px);
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ob-tagline-line + .ob-tagline-line {
margin-top: 10px;
}
.ob-tagline-line.is-in {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
/* ── Form (heading / subtext / input / button) ───────────────────────── */
.ob-form {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
}
.ob-form.is-in {
pointer-events: auto;
}
.ob-title,
.ob-sub,
.ob-field,
.ob-btn {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
color 0.7s;
}
.ob-form.is-in .ob-title {
opacity: 1;
transform: translateY(0);
}
.ob-form.is-in .ob-sub {
opacity: 1;
transform: translateY(0);
transition-delay: 60ms;
}
.ob-form.is-in .ob-field {
opacity: 1;
transform: translateY(0);
transition-delay: 120ms;
}
.ob-form.is-in .ob-btn {
opacity: 1;
transform: translateY(0);
transition-delay: 180ms;
}
.ob-title {
width: 100%;
font-family: var(--wx-font-brand, var(--font-brand));
font-size: 28px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.3;
color: #fff;
margin-bottom: 12px;
}
#onboarding-overlay.phase-light .ob-title {
color: #0f172a;
}
.ob-sub {
width: 100%;
max-width: 320px;
font-size: 14.5px;
font-weight: 400;
line-height: 1.6;
color: #64748b;
margin-bottom: 34px;
}
.ob-field {
width: 100%;
margin-bottom: 16px;
}
.ob-input {
width: 100%;
height: 56px;
border-radius: 16px;
padding: 0 20px;
font-size: 15px;
font-family: inherit;
outline: none;
box-sizing: border-box;
background: #262628;
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, color 0.25s;
}
.ob-input::placeholder {
color: #94a3b8;
}
.ob-input:focus {
border-color: #fff;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}
/* Beats the app-wide :where(...):focus-visible ring (_components.css) — same
(0,1,0) specificity, but this loads later, so without the extra selector
here it would win and draw a second violet rectangle around the field. */
#onboarding-overlay .ob-input:focus-visible {
outline: none;
}
#onboarding-overlay.phase-light .ob-input {
background: #f8fafc;
border-color: #e2e8f0;
color: #0f172a;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}
#onboarding-overlay.phase-light .ob-input:hover {
border-color: #cbd5e1;
}
#onboarding-overlay.phase-light .ob-input:focus {
background: #fff;
border-color: #0f172a;
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1);
}
/* ── Continue button — dark pill in both phases, per the reference ──── */
.ob-btn {
position: relative;
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-bottom-color: rgba(255, 255, 255, 0.14);
border-right-color: rgba(255, 255, 255, 0.14);
border-radius: 18px;
background: linear-gradient(#18191d, #0d0e12);
color: #fff;
font-family: var(--wx-font-brand, var(--font-brand));
font-size: 15.5px;
font-weight: 600;
letter-spacing: -0.01em;
cursor: pointer;
overflow: hidden;
isolation: isolate;
box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.35), 0 4px 10px -2px rgba(0, 0, 0, 0.18),
inset 0 1px 1px rgba(255, 255, 255, 0.28);
transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
background 0.3s, box-shadow 0.3s;
}
.ob-btn::before {
content: "";
position: absolute;
inset: 0 0 50% 0;
background: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.03) 60%, transparent);
border-radius: 17px 17px 60px 60px;
pointer-events: none;
}
.ob-btn svg {
position: relative;
z-index: 1;
transition: transform 0.25s ease;
}
.ob-btn span {
position: relative;
z-index: 1;
}
.ob-btn:hover {
transform: translateY(-1px);
background: linear-gradient(#23252c, #121419);
box-shadow: 0 16px 32px -6px rgba(0, 0, 0, 0.45), 0 6px 14px -2px rgba(0, 0, 0, 0.25),
inset 0 1px 1px rgba(255, 255, 255, 0.38);
}
.ob-btn:hover svg {
transform: translateX(3px);
}
@media (max-width: 560px) {
.ob-card-inner {
padding: 40px 24px 32px;
}
.ob-title {
font-size: 24px;
}
}
/* ===== 3-layout/_shell.css ===== */
/* ==========================================================================
App shell
Extracted from the legacy index.html monolith (source lines 358-367).
========================================================================== */
/* ══════════════════════════════════════════════════════════════════
APP SHELL
══════════════════════════════════════════════════════════════════ */
.app-shell {
height: 100vh;
display: flex;
flex-direction: row;
overflow: hidden;
}
/* ===== 3-layout/_sidebar.css ===== */
/* ==========================================================================
Persistent sidebar
Extracted from the legacy index.html monolith (source lines 368-863).
========================================================================== */
/* ══════════════════════════════════════════════════════════════════
PERSISTENT SIDEBAR
══════════════════════════════════════════════════════════════════ */
.app-sidebar {
width: 264px;
flex-shrink: 0;
/* No height here: .app-shell is 100vh with 12px padding, so a child at 100vh
overruns its content box and hangs 12px below the bottom edge. Flex stretch
sizes this correctly. The mobile drawer sets its own 100dvh while fixed. */
min-height: 0;
display: flex;
flex-direction: column;
background: var(--halo-surface);
border-right: 1px solid var(--halo-border);
padding: 18px 14px 16px;
position: relative;
z-index: 5;
}
.sidebar-brand {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 8px 18px;
}
.sidebar-brand-mark {
width: 32px;
height: 32px;
border-radius: 10px;
background: var(--grad);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(91, 104, 255, 0.3);
}
.sidebar-brand-mark img {
width: 22px;
height: 22px;
object-fit: contain;
}
.sidebar-brand-mark span {
font-size: 16px;
font-weight: 800;
color: white;
}
.sidebar-brand-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.sidebar-brand-name {
font-size: 15px;
font-weight: 700;
color: var(--halo-on-surface);
letter-spacing: -0.2px;
}
.sidebar-brand-ra {
font-size: 9.5px;
color: var(--halo-on-surface-faint);
letter-spacing: 0.04em;
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 14px;
}
.sidebar-nav-item {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 10px;
border-radius: 10px;
background: transparent;
border: none;
color: var(--halo-on-surface-muted);
font-size: 13.5px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
text-align: left;
width: 100%;
transition:
background 0.15s,
color 0.15s;
}
.sidebar-nav-item:hover {
background: var(--halo-elevated);
color: var(--halo-on-surface);
}
.sidebar-nav-item.panel-open {
background: rgba(91, 104, 255, 0.12);
color: var(--halo-on-surface);
}
.sidebar-nav-icon {
font-size: 15px;
line-height: 1;
width: 18px;
text-align: center;
flex-shrink: 0;
}
/* Dead since the nav icons became masked spans — see 6-redesign/_sidebar.css.
Kept out of the bundle rather than left to confuse the next reader. */
.sidebar-nav-label {
flex: 1;
}
.sidebar-nav-count {
background: var(--halo-primary);
color: #fff;
font-size: 10px;
font-weight: 700;
border-radius: 999px;
padding: 1px 6px;
min-width: 16px;
text-align: center;
}
.sidebar-divider {
height: 1px;
background: var(--halo-border);
margin: 6px 4px 12px;
flex-shrink: 0;
}
.sidebar-history-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--halo-on-surface-faint);
padding: 0 10px 8px;
}
.sidebar-history-list {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.sidebar-history-empty {
font-size: 12.5px;
color: var(--halo-on-surface-faint);
line-height: 1.5;
padding: 8px 10px;
text-align: left;
}
.sidebar-profile {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 8px 4px;
margin-top: 8px;
border-top: 1px solid var(--halo-border);
}
.sidebar-profile-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--grad);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
}
.sidebar-profile-text {
display: flex;
flex-direction: column;
line-height: 1.25;
overflow: hidden;
}
.sidebar-profile-name {
font-size: 12.5px;
font-weight: 600;
color: var(--halo-on-surface);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-profile-sub {
font-size: 10.5px;
color: var(--halo-on-surface-faint);
}
/* Sidebar header row + collapse */
.sidebar-header-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 4px 18px;
gap: 8px;
}
.sidebar-header-row .sidebar-brand {
padding: 0;
flex: 1;
min-width: 0;
}
.sidebar-collapse-btn {
width: 26px;
height: 26px;
border-radius: 50%;
flex-shrink: 0;
background: var(--halo-elevated);
border: 1px solid var(--halo-border);
color: var(--halo-on-surface-muted);
font-size: 13px;
font-family: inherit;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
background 0.15s,
color 0.15s,
transform 0.2s;
}
.sidebar-collapse-btn:hover {
background: var(--halo-border);
color: var(--halo-on-surface);
}
.app-sidebar.collapsed {
width: 76px;
}
.app-sidebar.collapsed .sidebar-brand-text,
.app-sidebar.collapsed .sidebar-nav-label,
.app-sidebar.collapsed .sidebar-nav-count,
.app-sidebar.collapsed .sidebar-search-wrap,
.app-sidebar.collapsed .sidebar-history-label,
.app-sidebar.collapsed .sidebar-history-list,
.app-sidebar.collapsed .sidebar-profile-text,
.app-sidebar.collapsed .sidebar-profile-badge,
.app-sidebar.collapsed .sidebar-profile-chevron {
display: none;
}
.app-sidebar.collapsed .sidebar-collapse-btn {
transform: rotate(180deg);
}
.app-sidebar.collapsed .sidebar-nav-item {
justify-content: center;
padding: 9px;
}
.app-sidebar.collapsed .sidebar-profile {
justify-content: center;
}
/* Nav item variants */
.sidebar-nav-item.primary {
background: var(--halo-primary);
color: #fff;
font-weight: 600;
margin-bottom: 4px;
}
.sidebar-nav-item.primary:hover {
background: var(--halo-primary);
filter: brightness(1.08);
}
.sidebar-nav-item.primary .sidebar-nav-icon {
color: #fff;
}
.sidebar-nav-item.outline {
border: 1px solid var(--halo-border);
margin-bottom: 1px;
}
.sidebar-nav-icon.c-blue {
color: #7886ff;
}
.sidebar-nav-icon.c-green {
color: #28e08c;
}
.sidebar-nav-icon.c-purple {
color: #c44ff0;
}
.sidebar-nav-icon.c-orange {
color: #ffb020;
}
/* Sidebar search */
.sidebar-search-wrap {
margin: 10px 2px 14px;
}
.sidebar-search-input {
width: 100%;
background: var(--halo-elevated);
border: 1px solid var(--halo-border);
border-radius: 10px;
padding: 8px 12px;
color: var(--halo-on-surface);
font-size: 12.5px;
font-family: inherit;
outline: none;
transition: border-color 0.15s;
}
.sidebar-search-input::placeholder {
color: var(--halo-on-surface-faint);
}
.sidebar-search-input:focus {
border-color: var(--halo-primary);
}
/* History item */
.sidebar-history-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 9px;
font-size: 12.5px;
color: var(--halo-on-surface-muted);
cursor: pointer;
border: 1px solid transparent;
transition:
background 0.15s,
border-color 0.15s,
color 0.15s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-history-item:hover {
background: var(--halo-elevated);
color: var(--halo-on-surface);
}
.sidebar-history-item.active {
border-color: var(--halo-primary);
background: rgba(91, 104, 255, 0.1);
color: var(--halo-on-surface);
}
.sidebar-history-item-icon {
flex-shrink: 0;
font-size: 13px;
}
/* Profile footer row */
.sidebar-profile {
justify-content: space-between;
}
.sidebar-profile-main {
display: flex;
align-items: center;
gap: 10px;
overflow: hidden;
}
.sidebar-profile-badge {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.04em;
background: rgba(40, 224, 140, 0.14);
color: #28e08c;
border-radius: 999px;
padding: 2px 7px;
flex-shrink: 0;
}
.sidebar-profile-chevron {
color: var(--halo-on-surface-faint);
font-size: 13px;
flex-shrink: 0;
transition: transform 0.15s;
}
.sidebar-profile {
position: relative;
cursor: pointer;
user-select: none;
}
.sidebar-profile.open .sidebar-profile-chevron {
transform: rotate(90deg);
}
.sidebar-profile-menu {
position: absolute;
left: 8px;
right: 8px;
bottom: calc(100% + 8px);
background: var(--halo-elevated);
border: 1px solid var(--halo-border);
border-radius: 10px;
padding: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
display: none;
flex-direction: column;
gap: 2px;
z-index: 20;
}
.sidebar-profile.open .sidebar-profile-menu {
display: flex;
}
.sidebar-profile-menu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 8px;
border: none;
background: none;
color: var(--halo-on-surface);
font-size: 13px;
font-family: inherit;
text-align: left;
cursor: pointer;
width: 100%;
}
.sidebar-profile-menu-item:hover {
background: var(--halo-border);
}
.sidebar-profile-menu-item.danger {
color: #ff6b6b;
}
.app-sidebar.collapsed .sidebar-profile-menu {
left: 60px;
right: auto;
width: 160px;
bottom: 0;
}
#app-container {
flex: 1;
min-width: 0;
/* Same as .app-sidebar above — stretch, don't pin to the viewport. */
min-height: 0;
display: flex;
flex-direction: column;
position: relative;
/* Its markup now sits right after the sidebar (see index.html) so the browser
can parse/paint it before the seven normally-hidden side-panel partials that
follow it in the document — this puts it back after them visually, matching
the unchanged intended layout (sidebar, then whichever panel is open, then
this). */
order: 2;
overflow: hidden;
}
#app-container::before {
content: "";
position: fixed;
top: -30%;
left: -20%;
width: 70%;
height: 70%;
background: radial-gradient(
ellipse,
rgba(91, 104, 255, 0.07) 0%,
transparent 70%
);
pointer-events: none;
z-index: 0;
}
#app-container::after {
content: "";
position: fixed;
bottom: -30%;
right: -20%;
width: 70%;
height: 70%;
background: radial-gradient(
ellipse,
rgba(196, 79, 240, 0.055) 0%,
transparent 70%
);
pointer-events: none;
z-index: 0;
}
/* ===== 4-features/_home.css ===== */
/* ==========================================================================
Home hero
Extracted from the legacy index.html monolith (source lines 864-1389).
========================================================================== */
/* ══════════════════════════════════════════════════════════════════
HOME HERO
══════════════════════════════════════════════════════════════════ */
#home-hero {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto; /* scroll when the presets don't fit the viewport */
overscroll-behavior: contain;
position: relative;
z-index: 1;
/* Dark base + a violet glow centered behind the logo and a soft top-left
corner glow — matching the design. */
background:
radial-gradient(
42% 38% at 50% 33%,
rgba(150, 104, 245, 0.22) 0%,
rgba(150, 104, 245, 0.08) 40%,
transparent 72%
),
radial-gradient(
55% 48% at 0% 0%,
rgba(96, 108, 255, 0.1) 0%,
transparent 58%
),
var(--bg0);
}
.home-center {
width: 100%;
padding: 12px 0;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
margin: auto 0; /* vertically centered when it fits, scrolls when it doesn't */
}
.home-center-inner {
width: 100%;
max-width: 980px;
padding: 24px 24px 32px;
display: flex;
flex-direction: column;
align-items: center;
}
.home-logo-wrap {
position: relative;
width: 72px;
height: 72px;
margin: 0 auto 14px;
}
.home-logo-glow {
position: absolute;
inset: -18px;
background: var(--grad);
border-radius: 50%;
opacity: 0.14;
filter: blur(22px);
animation: glowPulse 5s ease-in-out infinite;
}
.home-logo-box {
position: relative;
width: 72px;
height: 72px;
background:
linear-gradient(var(--bg0), var(--bg0)) padding-box,
conic-gradient(
from 180deg,
#5b68ff,
#c44ff0,
#f5d547,
#28e08c,
#5b68ff
)
border-box;
border: 2.5px solid transparent;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: floatY 5s ease-in-out infinite;
box-shadow: 0 14px 44px rgba(91, 104, 255, 0.28);
}
.home-logo-box img {
width: 60px;
height: 60px;
object-fit: contain;
filter: brightness(1.1) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}
.home-logo-letter {
font-size: 34px;
font-weight: 800;
color: white;
letter-spacing: -1px;
}
.brand-name {
font-size: 44px;
font-weight: 800;
letter-spacing: -1.5px;
color: var(--t0);
margin-bottom: 6px;
animation: fadeInUp 0.6s 0.1s both;
}
.brand-tagline {
font-size: 15px;
color: var(--t1);
margin-bottom: 4px;
animation: fadeInUp 0.6s 0.2s both;
}
.brand-ra {
font-size: 11px;
color: var(--t2);
letter-spacing: 0.06em;
margin-bottom: 20px;
animation: fadeInUp 0.6s 0.25s both;
}
.home-greeting {
margin: 22px 0 28px;
animation: fadeInUp 0.6s 0.32s both;
}
.greeting-hi {
font-size: 38px;
font-weight: 700;
letter-spacing: -0.5px;
color: var(--t0);
margin-bottom: 7px;
}
.greeting-name {
background: var(--grad);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.greeting-sub {
font-size: 16px;
color: var(--t1);
line-height: 1.65;
max-width: 560px;
margin: 0 auto;
}
/* Home input */
.home-input-wrap {
width: 100%;
max-width: 920px;
animation: fadeInUp 0.6s 0.4s both;
}
.home-input-box {
position: relative;
background:
linear-gradient(var(--halo-surface), var(--halo-surface)) padding-box,
var(--grad) border-box;
border: 1.5px solid transparent;
border-radius: 32px;
transition:
box-shadow 0.3s,
opacity 0.3s;
box-shadow: 0 4px 28px rgba(0, 0, 0, 0.25);
}
.home-input-box:focus-within {
box-shadow:
0 4px 28px rgba(0, 0, 0, 0.25),
0 0 0 4px rgba(91, 104, 255, 0.12);
}
.home-textarea {
width: 100%;
background: transparent;
border: none;
color: var(--t0);
padding: 20px 68px 20px 26px;
font-size: 16px;
font-family: inherit;
resize: none;
min-height: 70px;
max-height: 180px;
line-height: 1.6;
outline: none;
text-align: left;
}
.home-textarea::placeholder {
color: var(--t2);
}
.home-mic-btn {
position: absolute;
right: 62px;
bottom: 13px;
width: 38px;
height: 38px;
border-radius: 50%;
background: transparent;
border: 1px solid var(--halo-border);
color: var(--halo-on-surface-muted);
cursor: pointer;
font-family: inherit;
display: flex;
align-items: center;
justify-content: center;
transition:
background 0.15s,
color 0.15s,
border-color 0.15s;
flex-shrink: 0;
}
.home-mic-btn:hover {
background: var(--halo-elevated);
color: var(--halo-on-surface);
}
.home-send-btn {
position: absolute;
right: 10px;
bottom: 10px;
width: 44px;
height: 44px;
background: var(--grad);
border: none;
border-radius: 50%;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition:
transform 0.2s,
box-shadow 0.2s;
box-shadow: 0 4px 14px rgba(91, 104, 255, 0.32);
flex-shrink: 0;
}
.home-send-btn:hover {
transform: scale(1.06);
box-shadow: 0 6px 22px rgba(91, 104, 255, 0.44);
}
.home-send-btn:active {
transform: scale(0.96);
}
/* Disclaimer line under home input */
.home-disclaimer {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 14px;
max-width: 760px;
font-size: 11px;
color: var(--halo-on-surface-faint);
text-align: center;
}
.hd-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #28e08c;
flex-shrink: 0;
}
.hd-strong {
color: var(--halo-on-surface-muted);
font-weight: 700;
letter-spacing: 0.03em;
}
.hd-sep {
opacity: 0.5;
}
/* Explore presets */
.home-presets {
margin-top: 30px;
width: 100%;
max-width: 780px;
animation: fadeInUp 0.6s 0.45s both;
}
.home-presets-label {
text-align: center;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--halo-on-surface-faint);
margin-bottom: 12px;
}
.home-presets-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.preset-chip-wrap {
position: relative;
}
.preset-chip {
display: flex;
align-items: center;
gap: 7px;
background: var(--halo-elevated);
border: 1px solid var(--halo-border);
border-radius: 999px;
padding: 8px 14px;
color: var(--halo-on-surface-muted);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition:
background 0.15s,
border-color 0.15s,
color 0.15s;
}
.preset-chip:hover {
background: rgba(91, 104, 255, 0.1);
border-color: rgba(91, 104, 255, 0.3);
color: var(--halo-on-surface);
}
.preset-chip-wrap.open .preset-chip {
background: rgba(91, 104, 255, 0.12);
border-color: rgba(91, 104, 255, 0.35);
color: var(--halo-on-surface);
}
.preset-chip-icon {
font-size: 13px;
width: 16px;
height: 16px;
flex-shrink: 0;
display: inline-block;
vertical-align: middle;
}
img.preset-chip-icon {
object-fit: contain;
}
.preset-chip-chevron {
font-size: 10px;
opacity: 0.6;
transition: transform 0.2s;
}
.preset-chip-wrap.open .preset-chip-chevron {
transform: rotate(180deg);
}
.preset-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
min-width: 320px;
max-width: min(560px, 90vw);
width: max-content;
background: var(--halo-surface);
border: 1px solid var(--halo-border);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
padding: 6px;
z-index: 20;
display: none;
flex-direction: column;
gap: 2px;
}
.preset-chip-wrap.open .preset-dropdown {
display: flex;
}
.preset-dropdown-item {
text-align: left;
background: transparent;
border: none;
color: var(--halo-on-surface-muted);
font-size: 12.5px;
font-family: inherit;
padding: 8px 10px;
border-radius: 8px;
cursor: pointer;
line-height: 1.4;
}
.preset-dropdown-item:hover {
background: var(--halo-elevated);
color: var(--halo-on-surface);
}
/* Chips */
.chips-wrap {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-content: flex-start;
justify-content: center;
width: 100%;
margin-top: 16px;
padding: 12px 24px 24px;
flex: 1;
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.chips-wrap::-webkit-scrollbar {
width: 4px;
}
.chips-wrap::-webkit-scrollbar-track {
background: transparent;
}
.chips-wrap::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
.chip {
display: inline-flex;
align-items: center;
padding: 8px 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 999px;
color: var(--t1);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition:
background 0.2s,
border-color 0.2s,
color 0.2s,
transform 0.2s,
box-shadow 0.2s;
white-space: nowrap;
animation: chipIn 0.3s ease forwards;
}
.chip:hover {
background: rgba(91, 104, 255, 0.1);
border-color: rgba(91, 104, 255, 0.32);
color: var(--t0);
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(91, 104, 255, 0.16);
}
.chip:active {
transform: translateY(0);
}
/* Chip highlight spans (inside chip buttons) */
.hl-count {
color: #4ade80;
font-weight: 600;
}
.hl-sector {
color: #c44ff0;
font-weight: 600;
}
.hl-cap {
color: #fb923c;
font-weight: 600;
}
.hl-stock {
color: #f472b6;
font-weight: 600;
}
.hl-horizon {
color: #2dd4bf;
font-weight: 600;
}
.hl-theme {
color: #f5d547;
font-weight: 600;
}
.hl-metric {
color: #33d7e5;
font-weight: 600;
}
/* Highlight backdrop overlay inside home-input-box */
.home-hl-backdrop {
position: absolute;
inset: 0;
padding: 20px 64px 20px 26px;
font-size: 15px;
font-family: inherit;
line-height: 1.6;
color: var(--t0);
pointer-events: none;
text-align: left;
white-space: pre-wrap;
word-break: break-word;
overflow: hidden;
border-radius: 32px;
z-index: 0;
}
.home-hl-backdrop .hl-count {
background: rgba(74, 222, 128, 0.18);
border-radius: 3px;
color: #4ade80;
}
.home-hl-backdrop .hl-sector {
background: rgba(196, 79, 240, 0.18);
border-radius: 3px;
color: #c44ff0;
}
.home-hl-backdrop .hl-cap {
background: rgba(251, 146, 60, 0.18);
border-radius: 3px;
color: #fb923c;
}
.home-hl-backdrop .hl-stock {
background: rgba(244, 114, 182, 0.18);
border-radius: 3px;
color: #f472b6;
}
.home-hl-backdrop .hl-horizon {
background: rgba(45, 212, 191, 0.18);
border-radius: 3px;
color: #2dd4bf;
}
.home-hl-backdrop .hl-theme {
background: rgba(245, 213, 71, 0.18);
border-radius: 3px;
color: #f5d547;
}
.home-hl-backdrop .hl-metric {
background: rgba(51, 215, 229, 0.18);
border-radius: 3px;
color: #33d7e5;
}
.home-textarea.hl-active {
color: transparent;
caret-color: var(--t0);
position: relative;
z-index: 1;
}
/* ===== 4-features/_chat.css ===== */
/* ==========================================================================
Chat container + message rows
Extracted from the legacy index.html monolith (source lines 1390-1506).
========================================================================== */
/* ══════════════════════════════════════════════════════════════════
CHAT CONTAINER
══════════════════════════════════════════════════════════════════ */
#chat-container {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
z-index: 1;
/* The response-card redesign (5-cards/_blocks.css, cards/blocks.js) matches
a light reference design system, so the conversation surface itself
becomes a light "panel" rather than floating white cards over the dark
shell — the same --wx-bg-panel and --wx-text-on-light token pairing the
home hero and skills panel already use for their own light zones, reused
here rather than inventing a third palette. Pure white (--wx-bg-panel),
not the sunken grey tint — the reference chat surface is #ffffff, and the
grey read as an unintentional off-white next to every card's own white
background. */
background: var(--wx-bg-panel);
}
/* Re-pointing the semantic text/border tokens inside the conversation area
means every component that already reads --t0, --t1, --t2, --chip-* and
--border* (badges, feedback buttons, suggested-question chips, the legacy AI bubble)
adapts to the light surface automatically, without hunting down and
hand-patching each one's hardcoded colour separately. --bg1/--bg2/--bg3 were
missing from this list — dozens of 5-cards/*.css chips/pills/counters use one
of them as a background (e.g. "Recommended by Waya"'s ticker/count pills),
and those tokens resolve to near-black dark-shell surface colours
(#1c1c1e/#2c2c2e/#3a3a3c) outside this re-pointing, rendering as an
unreadable near-black pill on this card's white background. */
.messages {
--t0: var(--wx-text-on-light);
--t1: var(--wx-text-on-light-secondary);
--t2: var(--wx-text-on-light-muted);
--t3: var(--wx-text-on-light-faint);
--border0: var(--wx-border-light);
--border1: var(--wx-border-light);
--border2: var(--wx-border-light-strong);
--bg1: var(--wx-bg-panel-muted);
--bg2: var(--wx-bg-panel-muted);
--bg3: var(--wx-bg-panel-muted);
--chip-blue: #4338ca;
--chip-green: #047857;
--chip-purple: #7e22ce;
--chip-yellow: #a16207;
--chip-red: #be123c;
}
/* Everything below is a colour that's hardcoded to a translucent WHITE
overlay rather than a token (built assuming a dark surface underneath) —
these don't respond to the token re-pointing above and need their own
light-surface value. Scoped under .messages so specificity wins over the
dark-shell default regardless of stylesheet import order. */
.messages .bubble.ai:not(:has(.wbn-block)) {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
box-shadow: none !important;
}
.messages .bubble.ai.escalate {
border-color: rgba(190, 18, 60, 0.3);
background: rgba(190, 18, 60, 0.05);
}
.messages .bubble.user,
.question-bubble-text {
background-color: #282932;
background: #282932;
border: 1.5px solid #3e404d;
outline: 1px solid rgba(40, 41, 50, 0.6);
border-radius: 18px;
color: #ffffff;
padding: 0.85rem 1.25rem;
font-size: 14px;
line-height: 1.6;
font-weight: 500;
letter-spacing: -0.01em;
box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.16), 0 2px 6px -1px rgba(0, 0, 0, 0.1);
max-width: 85%;
word-break: break-word;
display: inline-block;
}
.messages .user-avatar {
background: var(--wx-bg-panel-muted);
border: 1px solid var(--wx-border-light-strong);
color: var(--wx-text-on-light-secondary);
}
.messages .badge-neutral {
border-color: var(--wx-border-light-strong);
}
.messages .fb-btn {
background: #ffffff;
border-color: var(--wx-border-light-strong);
}
.messages .fb-btn:hover {
background: var(--wx-bg-panel-muted);
}
.messages .suggest-block {
border-top-color: var(--wx-border-light-strong);
}
.messages {
flex: 1;
overflow-y: auto;
padding: 32px 0 12px;
display: flex;
flex-direction: column;
gap: 0;
}
/* The global scrollbar (2-base/_scrollbar.css) is a faint white thumb tuned for
the dark shell — invisible against this light panel and the white cards inside
it, so a scrollable answer (a wide table, a tall list) gave no hint it could be
scrolled. Re-tint the thumb/track for the light surface and everything
scrolling inside it (e.g. a card's own .overflow-x-auto table wrapper); width
stays the same small 4px everywhere. */
/* scrollbar-color inherits to descendants (a card's own overflow-x-auto table
wrapper included) but scrollbar-width does not, per spec — set it on both. */
.messages,
.messages * {
scrollbar-width: thin;
scrollbar-color: rgba(100, 116, 139, 0.35) transparent;
}
.messages ::-webkit-scrollbar-thumb {
background: rgba(100, 116, 139, 0.35);
}
.messages ::-webkit-scrollbar-track {
background: transparent;
}
/* ── Message rows ── */
.msg-row {
display: flex;
/* Horizontal inset now matches .input-row's own 12px (4-features/_composer.css) —
this used to be 32px, sized to clear the per-message avatar circle that sat beside
the bubble; now that avatars are gone (messages.js no longer renders them), the
wider inset just made every card render narrower than the composer beneath it. */
padding: 8px 12px;
gap: 13px;
/* Matches .input-bar-inner's own 768px (4-features/_composer.css) — cards
must never render wider or narrower than the input box below them. */
max-width: 768px;
width: 100%;
margin: 0 auto;
align-items: flex-start;
animation: fadeInUp 0.35s ease both;
}
.msg-row.wide-row {
max-width: 768px;
}
.msg-row.user {
flex-direction: row-reverse;
}
/* The Waya brand mark, not a letter. Three places in the JS build this element
with a literal "W" text node (features/chat/messages.js x2, features/clarify);
painting the logo here fixes all of them without touching any of them, and
font-size:0 swallows the "W" they still write.
Absolute path on purpose: this CSS is served concatenated at /assets/app.css,
so a relative url() would resolve against /assets/, not /static/. */
.ai-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: url("/static/logo-mark.png") center / contain no-repeat;
flex-shrink: 0;
margin-top: 2px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
color: transparent;
box-shadow: 0 4px 14px rgba(91, 104, 255, 0.22);
}
.user-avatar {
width: 32px;
height: 32px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.12);
flex-shrink: 0;
margin-top: 2px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
color: var(--t1);
}
.bubble {
padding: 16px 20px;
border-radius: 18px;
font-size: 14.5px;
line-height: 1.75;
/* Matches .msg-row's own 768px — a plain-text answer's "You could ask
next" buttons live inside this same bubble, and a narrower cap here
starved them of room, wrapping every button onto its own line instead
of the 2-per-row layout a "wide" card's response gets. */
max-width: 768px;
position: relative;
word-break: break-word;
}
.bubble.ai {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
box-shadow: none !important;
color: var(--t0);
width: 100%;
}
.bubble.ai.escalate {
border-color: rgba(255, 58, 92, 0.22);
background: rgba(255, 58, 92, 0.05);
}
.bubble.user {
background: rgba(91, 104, 255, 0.13);
border: 1px solid rgba(91, 104, 255, 0.22);
border-top-right-radius: 4px;
color: var(--t0);
/* Shorter than the base .bubble padding/line-height — the user's own query
doesn't need the same breathing room as a long AI answer, and giving it
less vertical space leaves more of the viewport for the answer below it.
Tightened again from 10px/1.5 — still read as an oversized highlight
banner rather than a snug chat bubble. */
padding: 7px 14px;
line-height: 1.35;
/* A long query naturally wraps out to .bubble's full 768px max-width (it's
content-hugging, not width:100% like .bubble.ai — a short query still
renders as a tight ~40px pill) — but a long one then looks like a
full-width banner indistinguishable from the answer card below it.
Capping it narrower, same convention as iMessage/WhatsApp's own-message
bubble, keeps even a long query wrapping across more lines while staying
visually distinct as "the user's own message" rather than matching the
answer's width. */
max-width: 70%;
}
.bubble-text p + p {
margin-top: 10px;
}
.bubble-text strong {
color: var(--t0);
font-weight: 600;
}
.bubble-text ul {
margin: 10px 0 0 18px;
}
.bubble-text li + li {
margin-top: 6px;
}
.bubble-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 12px;
align-items: center;
}
/* ==========================================================================
"WayaX is thinking…" — the in-flight indicator
--------------------------------------------------------------------------
Moved here from 5-cards/_no-stocks.css, where it had ended up during the
monolith extraction: it belongs to the chat, not to a card family, and its
old home is imported after this file, so overriding it from here was
impossible.
Three grey dots in a bare box read as a rendering glitch on the light
surface rather than as work in progress. This is the same idea in the app's
own language: a proper bubble matching the AI bubble it will be replaced by,
dots that carry the brand gradient across the three stops, and a label whose
text a highlight sweeps through — the same shimmer the pane skeletons use,
so "waiting" looks like one thing everywhere in the app.
========================================================================== */
.typing-row {
display: flex;
gap: 10px;
align-items: center;
width: 100%;
max-width: 768px;
margin: 0 auto;
/* Matches .msg-row's own inset (8px 12px) so the icon/label lines up with
where the answer bubble itself begins, instead of sitting in its own
panel indented differently from the content it precedes. */
padding: 8px 12px;
animation: fadeInUp 0.3s ease both;
}
@media (prefers-reduced-motion: reduce) {
.typing-row {
animation: none;
}
}
/* ===== 5-cards/_news.css ===== */
/* ==========================================================================
News layout
Extracted from the legacy index.html monolith (source lines 1507-1653).
========================================================================== */
/* ── News layout ─────────────────────────────────────────────────── */
.news-layout {
display: flex;
flex-direction: column;
gap: 12px;
}
.news-header {
display: flex;
align-items: baseline;
gap: 8px;
}
.news-header-title {
font-size: 13px;
font-weight: 600;
color: var(--t0);
}
.news-header-sub {
font-size: 11px;
color: var(--t2);
}
.news-cards {
display: flex;
flex-direction: column;
gap: 10px;
}
.news-card {
border: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(255, 255, 255, 0.02);
border-radius: 12px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
animation: fadeInUp 0.3s ease forwards;
}
.news-card-head {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.news-card-meta {
display: flex;
align-items: center;
gap: 8px;
}
.news-date {
font-size: 11px;
color: var(--t2);
}
.news-cat-chip {
font-size: 10px;
padding: 2px 8px;
border-radius: 99px;
background: var(--chip-blue-bg);
color: var(--chip-blue);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.news-sentiment-badge {
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: 99px;
white-space: nowrap;
}
.news-sentiment-bullish-strong {
background: rgba(40, 224, 140, 0.15);
color: #28e08c;
}
.news-sentiment-bullish {
background: rgba(91, 104, 255, 0.15);
color: #93b4ff;
}
.news-sentiment-neutral {
background: rgba(245, 213, 71, 0.15);
color: #fcd34d;
}
.news-sentiment-bearish {
background: rgba(255, 58, 92, 0.15);
color: #fca5a5;
}
.news-sentiment-bearish-strong {
background: rgba(239, 68, 68, 0.2);
color: #ff3a5c;
}
.news-card-title {
font-size: 12px;
font-weight: 600;
color: var(--t1);
}
.news-card-summary {
font-size: 13px;
color: var(--t0);
line-height: 1.65;
}
.news-source-link {
font-size: 11px;
color: var(--blue);
text-decoration: none;
align-self: flex-start;
}
.news-source-link:hover {
text-decoration: underline;
}
.news-card-subject {
font-size: 11px;
color: var(--t2);
font-style: italic;
margin-bottom: -2px;
}
.news-reason {
font-size: 12px;
color: var(--t1);
line-height: 1.5;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.03);
border-left: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 0 6px 6px 0;
}
.news-reason-label {
font-weight: 600;
color: var(--t0);
}
.news-llm-block {
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.015);
border-radius: 10px;
padding: 14px 16px;
}
.news-llm-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--t2);
margin-bottom: 8px;
}
.news-llm-text {
font-size: 13px;
color: var(--t0);
line-height: 1.7;
}
.news-llm-text p {
margin-bottom: 6px;
}
/* ===== 5-cards/_transcript.css ===== */
/* ==========================================================================
Transcript cards
Extracted from the legacy index.html monolith (source lines 1654-1828).
========================================================================== */
/* ── Transcript cards ────────────────────────────────────────────── */
.tc-card {
border: 1px solid rgba(91, 104, 255, 0.15);
background: rgba(91, 104, 255, 0.04);
border-radius: 12px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
animation: fadeInUp 0.3s ease forwards;
}
.tc-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 6px;
}
.tc-card-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.tc-company {
font-size: 13px;
font-weight: 600;
color: var(--t0);
}
.tc-date {
font-size: 11px;
color: var(--t2);
}
.tc-summary {
font-size: 13px;
color: var(--t0);
line-height: 1.65;
}
/* Transcript: metric mini-cards */
.tc-metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 8px;
}
.tc-metric-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 8px;
padding: 10px 12px;
}
.tc-metric-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--t2);
margin-bottom: 4px;
}
.tc-metric-val {
font-size: 12px;
color: var(--t0);
line-height: 1.4;
}
/* Transcript: segment cards */
.tc-section-title {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--t2);
margin-bottom: 6px;
}
.tc-segments-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 8px;
}
.tc-segment-card {
background: rgba(91, 104, 255, 0.06);
border: 1px solid rgba(91, 104, 255, 0.12);
border-radius: 8px;
padding: 10px 12px;
}
.tc-seg-name {
font-size: 12px;
font-weight: 600;
color: var(--t0);
}
.tc-seg-growth {
font-size: 12px;
color: var(--purple);
font-weight: 500;
margin: 3px 0 2px;
}
.tc-seg-note {
font-size: 11px;
color: var(--t1);
line-height: 1.4;
}
/* Transcript: headwinds/tailwinds split panel */
.tc-ht-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.tc-ht-panel {
border-radius: 8px;
padding: 10px 12px;
}
.tc-hw-panel {
background: rgba(255, 58, 92, 0.06);
border: 1px solid rgba(255, 58, 92, 0.2);
}
.tc-tw-panel {
background: rgba(40, 224, 140, 0.06);
border: 1px solid rgba(40, 224, 140, 0.2);
}
.tc-ht-title {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
margin-bottom: 7px;
}
.tc-hw-title {
color: var(--red);
}
.tc-tw-title {
color: var(--green);
}
.tc-ht-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 5px;
}
.tc-ht-list li {
font-size: 12px;
line-height: 1.4;
padding-left: 10px;
position: relative;
}
.tc-ht-list li::before {
content: "•";
position: absolute;
left: 0;
opacity: 0.7;
}
.tc-hw-list li {
color: #fca5a5;
}
.tc-tw-list li {
color: #6ee7b7;
}
.tc-reason {
font-size: 12px;
color: var(--t1);
line-height: 1.5;
padding: 7px 10px;
background: rgba(91, 104, 255, 0.07);
border-left: 2px solid var(--blue);
border-radius: 0 6px 6px 0;
}
.tc-reason-label {
font-weight: 600;
color: var(--blue);
}
.bubble-disclaimer {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
font-size: 11px;
color: var(--t2);
line-height: 1.6;
}
/* ===== 5-cards/_realistic-returns.css ===== */
/* ==========================================================================
Realistic returns
Extracted from the legacy index.html monolith (source lines 1829-1894).
========================================================================== */
/* ── Realistic Returns Card ─────────────────────────────────────── */
.rr-card {
padding: 20px;
}
.rr-warn-row {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 20px;
padding: 14px 16px;
background: rgba(248, 113, 113, 0.08);
border: 1px solid rgba(248, 113, 113, 0.2);
border-radius: 10px;
}
.rr-warn-icon {
font-size: 22px;
flex-shrink: 0;
margin-top: 1px;
}
.rr-warn-text {
font-size: 13px;
color: var(--t1);
line-height: 1.6;
}
.rr-warn-text strong {
color: #f87171;
}
.rr-section-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--t3);
margin-bottom: 12px;
}
.rr-alts {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.rr-alt-btn {
padding: 8px 20px;
border-radius: 999px;
border: 1.5px solid rgba(91, 104, 255, 0.3);
background: rgba(91, 104, 255, 0.07);
color: var(--t0);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
white-space: nowrap;
}
.rr-alt-btn:hover {
background: rgba(91, 104, 255, 0.17);
border-color: rgba(91, 104, 255, 0.52);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(91, 104, 255, 0.16);
}
.rr-note {
margin-top: 14px;
font-size: 11px;
color: var(--t3);
line-height: 1.5;
}
/* ===== 5-cards/_market-sentiment.css ===== */
/* ==========================================================================
Market sentiment
Extracted from the legacy index.html monolith (source lines 1895-1987).
========================================================================== */
/* ── Market Sentiment Card ──────────────────────────────────────── */
.ms-card {
padding: 0;
}
.ms-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px 12px;
border-bottom: 1px solid var(--border1);
}
.ms-title {
font-size: 15px;
font-weight: 700;
color: var(--t0);
}
.ms-subtitle {
font-size: 11px;
color: var(--t2);
margin-top: 2px;
}
.ms-signal-badge {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
}
.ms-signal-bull {
background: rgba(40, 224, 140, 0.15);
color: #28e08c;
border: 1px solid rgba(40, 224, 140, 0.3);
}
.ms-signal-bear {
background: rgba(255, 58, 92, 0.15);
color: #ff3a5c;
border: 1px solid rgba(255, 58, 92, 0.3);
}
.ms-signal-neu {
background: rgba(245, 213, 71, 0.15);
color: #f5d547;
border: 1px solid rgba(245, 213, 71, 0.3);
}
.ms-section {
padding: 14px 20px;
border-bottom: 1px solid var(--border0);
}
.ms-section-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--t3);
margin-bottom: 10px;
}
.ms-table {
width: 100%;
border-collapse: collapse;
}
.ms-table td {
padding: 7px 10px;
font-size: 13px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
vertical-align: middle;
}
.ms-table td:first-child {
color: var(--t2);
width: 55%;
}
.ms-table td:last-child {
color: var(--t0);
font-weight: 600;
text-align: right;
}
.ms-table tr:last-child td {
border-bottom: none;
}
.ms-val-pos {
color: #28e08c !important;
}
.ms-val-neg {
color: #ff3a5c !important;
}
.ms-val-neu {
color: #f5d547 !important;
}
.ms-note {
padding: 10px 20px 14px;
font-size: 11px;
color: var(--t3);
line-height: 1.5;
}
/* ===== 5-cards/_vix.css ===== */
/* ==========================================================================
India VIX
Extracted from the legacy index.html monolith (source lines 1988-2124).
========================================================================== */
/* ── India VIX Card ─────────────────────────────────────────────── */
.vix-card {
padding: 0;
}
.vix-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px 12px;
border-bottom: 1px solid var(--border1);
}
.vix-title {
font-size: 15px;
font-weight: 700;
color: var(--t0);
}
.vix-subtitle {
font-size: 11px;
color: var(--t2);
margin-top: 2px;
}
.vix-value {
font-size: 28px;
font-weight: 800;
letter-spacing: -0.5px;
}
.vix-val-low {
color: #28e08c;
}
.vix-val-mod {
color: #f5d547;
}
.vix-val-high {
color: #ff3a5c;
}
.vix-badge {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
}
.vix-badge-low {
background: rgba(40, 224, 140, 0.15);
color: #28e08c;
border: 1px solid rgba(40, 224, 140, 0.3);
}
.vix-badge-mod {
background: rgba(245, 213, 71, 0.15);
color: #f5d547;
border: 1px solid rgba(245, 213, 71, 0.3);
}
.vix-badge-high {
background: rgba(255, 58, 92, 0.15);
color: #ff3a5c;
border: 1px solid rgba(255, 58, 92, 0.3);
}
.vix-section {
padding: 14px 20px;
border-bottom: 1px solid var(--border0);
}
.vix-section-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--t3);
margin-bottom: 10px;
}
.vix-table {
width: 100%;
border-collapse: collapse;
}
.vix-table td {
padding: 7px 10px;
font-size: 13px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
vertical-align: middle;
}
.vix-table td:first-child {
color: var(--t2);
width: 55%;
}
.vix-table td:last-child {
color: var(--t0);
font-weight: 600;
text-align: right;
}
.vix-table tr:last-child td {
border-bottom: none;
}
.vix-sparkline {
width: 100%;
height: 60px;
}
.vix-note {
padding: 10px 20px 14px;
font-size: 11px;
color: var(--t3);
line-height: 1.5;
}
.vix-trend-highlight {
padding: 14px 20px;
border-bottom: 1px solid var(--border0);
display: flex;
align-items: center;
justify-content: space-between;
}
.vix-trend-highlight-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--t3);
}
.vix-trend-highlight-value {
font-size: 20px;
font-weight: 800;
text-align: right;
}
.vix-trend-highlight-sub {
display: block;
font-size: 11px;
font-weight: 500;
color: var(--t2);
margin-top: 2px;
}
.vix-trend-highlight.vix-trend-up .vix-trend-highlight-value {
color: #ff3a5c;
}
.vix-trend-highlight.vix-trend-down .vix-trend-highlight-value {
color: #28e08c;
}
.vix-trend-highlight.vix-trend-flat .vix-trend-highlight-value {
color: #f5d547;
}
/* ===== 5-cards/_strategy-log.css ===== */
/* ==========================================================================
Strategy log
Extracted from the legacy index.html monolith (source lines 2125-2319).
========================================================================== */
/* ── Strategy Log Card ───────────────────────────────────────────── */
.sl-card {
padding: 0;
}
.sl-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px 12px;
border-bottom: 1px solid var(--border1);
}
.sl-card-title {
font-size: 14px;
font-weight: 700;
color: var(--t0);
}
.sl-card-meta {
display: flex;
align-items: center;
gap: 8px;
}
.sl-card-date {
font-size: 11px;
color: var(--t3);
}
.sl-card-count {
font-size: 11px;
font-weight: 600;
color: var(--t3);
background: var(--bg1);
padding: 3px 10px;
border-radius: 20px;
}
.sl-stock-row {
padding: 14px 20px;
border-bottom: 1px solid var(--border0);
display: flex;
flex-direction: column;
gap: 8px;
}
.sl-stock-row:last-child {
border-bottom: none;
}
.sl-stock-top {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.sl-stock-name {
font-size: 14px;
font-weight: 700;
color: var(--t0);
flex: 1;
min-width: 120px;
}
.sl-stock-symbol {
font-size: 11px;
font-weight: 600;
color: var(--t3);
background: var(--bg1);
padding: 2px 8px;
border-radius: 6px;
}
.sl-stock-mcap {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t3);
padding: 2px 8px;
border: 1px solid var(--border1);
border-radius: 20px;
}
.sl-active-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 20px;
background: rgba(40, 224, 140, 0.12);
color: #28e08c;
}
.sl-inactive-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 20px;
background: rgba(255, 58, 92, 0.1);
color: #ff3a5c;
}
.sl-revised-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 20px;
background: rgba(245, 158, 11, 0.12);
color: #f59e0b;
}
.sl-metrics {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.sl-metric {
display: flex;
flex-direction: column;
gap: 1px;
}
.sl-metric-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t3);
}
.sl-metric-value {
font-size: 13px;
font-weight: 700;
color: var(--t0);
}
.sl-metric-value.up {
color: #28e08c;
}
.sl-metric-value.dn {
color: #ff3a5c;
}
.sl-bullets {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 2px;
}
.sl-bullet {
font-size: 12px;
color: var(--t2);
line-height: 1.5;
padding-left: 14px;
position: relative;
}
.sl-bullet::before {
content: "·";
position: absolute;
left: 4px;
color: var(--chip-blue);
font-weight: 700;
}
.sl-history {
margin-top: 4px;
border: 1px solid var(--border0);
border-radius: 8px;
overflow: hidden;
}
.sl-history-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--t3);
padding: 8px 12px;
background: var(--bg1);
border-bottom: 1px solid var(--border0);
}
.sl-history-row {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-bottom: 1px solid var(--border0);
font-size: 12px;
flex-wrap: wrap;
}
.sl-history-row:last-child {
border-bottom: none;
}
.sl-history-date {
color: var(--t2);
font-weight: 600;
min-width: 80px;
}
.sl-history-levels {
color: var(--t2);
flex: 1;
}
.sl-history-change {
color: #f59e0b;
font-size: 11px;
font-weight: 600;
}
/* ===== 5-cards/_recent-reco.css ===== */
/* ==========================================================================
Recent recommendations
Extracted from the legacy index.html monolith (source lines 2320-2452).
========================================================================== */
/* ── Recent Recommendations Card ────────────────────────────────── */
.rr-card {
padding: 0;
}
.rr-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px 12px;
border-bottom: 1px solid var(--border1);
}
.rr-card-title {
font-size: 14px;
font-weight: 700;
color: var(--t0);
}
.rr-card-count {
font-size: 11px;
font-weight: 600;
/* --t3 doesn't exist anywhere in the token set (falls back to an inherited dark
text colour) and --bg1 resolves to --wx-bg-surface, a near-black shade built
for the old dark shell — paired together on this card's light surface they
rendered as an unreadable near-black pill with invisible text. */
color: var(--wx-text-on-light-muted);
background: var(--wx-bg-panel-muted);
padding: 3px 10px;
border-radius: 20px;
}
.rr-stock-row {
padding: 14px 20px;
border-bottom: 1px solid var(--border0);
display: flex;
flex-direction: column;
gap: 8px;
}
.rr-stock-row:last-child {
border-bottom: none;
}
.rr-stock-top {
display: flex;
align-items: center;
gap: 10px;
}
.rr-stock-name {
font-size: 14px;
font-weight: 700;
color: var(--t0);
flex: 1;
}
.rr-stock-symbol {
font-size: 11px;
font-weight: 600;
/* Same --t3/--bg1 issue as .rr-card-count above — a dark-shell pill rendered
unreadable on this card's light surface. */
color: var(--wx-text-on-light-muted);
background: var(--wx-bg-panel-muted);
padding: 2px 8px;
border-radius: 6px;
}
.rr-stock-date {
font-size: 11px;
color: var(--t3);
}
.rr-stock-mcap {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t3);
padding: 2px 8px;
border: 1px solid var(--border1);
border-radius: 20px;
}
.rr-metrics {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.rr-metric {
display: flex;
flex-direction: column;
gap: 1px;
}
.rr-metric-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t3);
}
.rr-metric-value {
font-size: 14px;
font-weight: 700;
color: var(--t0);
}
.rr-metric-value.up {
color: #28e08c;
}
.rr-metric-value.down {
color: #ff3a5c;
}
.rr-bullets {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 2px;
}
.rr-bullet {
font-size: 12px;
color: var(--t2);
line-height: 1.5;
padding-left: 14px;
position: relative;
}
.rr-bullet::before {
content: "·";
position: absolute;
left: 4px;
color: var(--chip-blue);
font-weight: 700;
}
.rr-since {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
padding: 2px 8px;
border-radius: 20px;
}
.rr-since.up {
background: rgba(40, 224, 140, 0.12);
color: #28e08c;
}
.rr-since.down {
background: rgba(255, 58, 92, 0.12);
color: #ff3a5c;
}
/* ===== 5-cards/_target-price.css ===== */
/* ==========================================================================
Target price
Extracted from the legacy index.html monolith (source lines 2453-2698).
========================================================================== */
/* ── Target Price Card ───────────────────────────────────────────── */
.tp-card {
padding: 0;
}
.tp-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px 12px;
border-bottom: 1px solid var(--border1);
}
.tp-card-title {
font-size: 14px;
font-weight: 700;
color: var(--t0);
}
.tp-card-date {
font-size: 11px;
color: var(--t3);
display: flex;
align-items: center;
gap: 6px;
}
.tp-date-dot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
}
.tp-date-dot.active {
background: #28e08c;
}
.tp-date-dot.inactive {
background: var(--t3);
}
.tp-stock {
padding: 16px 20px;
border-bottom: 1px solid var(--border0);
display: flex;
flex-direction: column;
gap: 14px;
}
.tp-stock:last-child {
border-bottom: none;
}
.tp-top {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.tp-name {
font-size: 15px;
font-weight: 700;
color: var(--t0);
flex: 1;
min-width: 120px;
}
.tp-symbol {
font-size: 11px;
font-weight: 600;
color: var(--t3);
background: var(--bg1);
padding: 2px 8px;
border-radius: 6px;
}
.tp-status-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 20px;
}
.tp-status-badge.buy {
background: rgba(40, 224, 140, 0.15);
color: #28e08c;
}
.tp-status-badge.hold {
background: rgba(245, 213, 71, 0.15);
color: #f5d547;
}
.tp-status-badge.exit {
background: rgba(255, 58, 92, 0.15);
color: #ff3a5c;
}
.tp-status-badge.active {
background: rgba(40, 224, 140, 0.12);
color: #28e08c;
}
.tp-status-badge.inactive {
background: rgba(120, 120, 120, 0.12);
color: var(--t3);
}
.tp-category {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t3);
padding: 2px 8px;
border: 1px solid var(--border1);
border-radius: 20px;
}
.tp-target-block {
display: flex;
align-items: flex-end;
gap: 14px;
flex-wrap: wrap;
padding: 10px 0 4px;
border-top: 1px solid var(--border0);
}
.tp-target-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--t3);
margin-bottom: 2px;
}
.tp-target-value {
font-size: 28px;
font-weight: 800;
color: #28e08c;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.tp-upside-badge {
font-size: 13px;
font-weight: 700;
padding: 4px 12px;
border-radius: 20px;
background: rgba(40, 224, 140, 0.12);
color: #28e08c;
margin-bottom: 3px;
}
.tp-upside-badge.down {
background: rgba(255, 58, 92, 0.12);
color: #ff3a5c;
}
.tp-table-wrap {
overflow-x: auto;
}
.tp-table {
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
.tp-table thead tr {
background: var(--bg1);
}
.tp-table th {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t3);
padding: 7px 14px 6px;
text-align: left;
white-space: nowrap;
border-bottom: 1px solid var(--border1);
}
.tp-table td {
font-size: 14px;
font-weight: 700;
color: var(--t0);
padding: 10px 14px;
white-space: nowrap;
}
.tp-table td.col-sl {
color: #ff3a5c;
}
.tp-table td.col-ret {
font-size: 16px;
font-weight: 800;
padding: 10px 18px;
}
.tp-table td.col-ret.up {
color: #28e08c;
background: rgba(40, 224, 140, 0.08);
}
.tp-table td.col-ret.down {
color: #ff3a5c;
background: rgba(255, 58, 92, 0.08);
}
.tp-table td.col-score {
color: var(--chip-blue);
font-size: 13px;
}
.tp-table td.col-date {
font-size: 12px;
color: var(--t2);
font-weight: 600;
}
.tp-thesis-header {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--t3);
margin-top: 2px;
}
.tp-thesis-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 8px 16px;
padding: 10px 0 2px;
border-top: 1px solid var(--border0);
}
.tp-thesis-item {
display: flex;
flex-direction: column;
gap: 1px;
}
.tp-thesis-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--t3);
}
.tp-thesis-value {
font-size: 12px;
font-weight: 600;
color: var(--t1);
}
.tp-bullets {
display: flex;
flex-direction: column;
gap: 5px;
}
.tp-bullet {
font-size: 12px;
color: var(--t2);
line-height: 1.5;
padding-left: 14px;
position: relative;
}
.tp-bullet::before {
content: "·";
position: absolute;
left: 4px;
color: var(--chip-blue);
font-weight: 700;
}
/* ===== 5-cards/_reco-update.css ===== */
/* ==========================================================================
Recommendation update
Extracted from the legacy index.html monolith (source lines 2699-2893).
========================================================================== */
/* ── Recommendation Update Card ─────────────────────────────────── */
.ru-card {
padding: 0;
}
.ru-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px 12px;
border-bottom: 1px solid var(--border1);
}
.ru-card-title {
font-size: 14px;
font-weight: 700;
color: var(--t0);
}
.ru-card-source {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t3);
background: var(--bg1);
padding: 3px 10px;
border-radius: 20px;
}
.ru-stock {
padding: 16px 20px;
border-bottom: 1px solid var(--border0);
display: flex;
flex-direction: column;
gap: 10px;
}
.ru-stock:last-child {
border-bottom: none;
}
.ru-top {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ru-name {
font-size: 15px;
font-weight: 700;
color: var(--t0);
flex: 1;
min-width: 120px;
}
.ru-symbol {
font-size: 11px;
font-weight: 600;
color: var(--t3);
background: var(--bg1);
padding: 2px 8px;
border-radius: 6px;
}
.ru-status-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 20px;
}
.ru-status-badge.buy {
background: rgba(40, 224, 140, 0.15);
color: #28e08c;
}
.ru-status-badge.hold {
background: rgba(245, 213, 71, 0.15);
color: #f5d547;
}
.ru-status-badge.exit {
background: rgba(255, 58, 92, 0.15);
color: #ff3a5c;
}
.ru-status-badge.closed {
background: rgba(120, 120, 120, 0.15);
color: var(--t3);
}
.ru-status-badge.active {
background: rgba(40, 224, 140, 0.12);
color: #28e08c;
}
.ru-status-badge.inactive {
background: rgba(120, 120, 120, 0.12);
color: var(--t3);
}
.ru-category {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t3);
padding: 2px 8px;
border: 1px solid var(--border1);
border-radius: 20px;
}
.ru-meta {
font-size: 11px;
color: var(--t3);
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.ru-meta-sep {
color: var(--border1);
}
.ru-days {
font-size: 11px;
font-weight: 600;
color: var(--t2);
}
.ru-table-wrap {
overflow-x: auto;
margin-top: 4px;
border-top: 1px solid var(--border0);
padding-top: 4px;
}
.ru-table {
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
.ru-table thead tr {
background: var(--bg1);
}
.ru-table th {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t3);
padding: 8px 14px 7px;
text-align: left;
white-space: nowrap;
border-bottom: 1px solid var(--border1);
}
.ru-table th:first-child {
border-radius: 6px 0 0 0;
}
.ru-table th:last-child {
border-radius: 0 6px 0 0;
}
.ru-table td {
font-size: 15px;
font-weight: 700;
color: var(--t0);
padding: 11px 14px;
white-space: nowrap;
}
.ru-table td.col-target {
color: #28e08c;
}
.ru-table td.col-sl {
color: #ff3a5c;
}
.ru-table td.col-ret {
font-size: 17px;
font-weight: 800;
padding: 11px 18px;
}
.ru-table td.col-ret.up {
color: #28e08c;
background: rgba(40, 224, 140, 0.08);
}
.ru-table td.col-ret.down {
color: #ff3a5c;
background: rgba(255, 58, 92, 0.08);
}
.ru-table td.col-days {
font-size: 13px;
color: var(--t2);
}
.ru-bullets {
display: flex;
flex-direction: column;
gap: 5px;
}
.ru-bullet {
font-size: 12px;
color: var(--t2);
line-height: 1.5;
padding-left: 14px;
position: relative;
}
.ru-bullet::before {
content: "·";
position: absolute;
left: 4px;
color: var(--chip-blue);
font-weight: 700;
}
/* ===== 5-cards/_rationale.css ===== */
/* ==========================================================================
Rationale
Extracted from the legacy index.html monolith (source lines 2894-3126).
========================================================================== */
/* ── Rationale Card ─────────────────────────────────────────────── */
.ra-card {
padding: 0;
}
.ra-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px 12px;
border-bottom: 1px solid var(--border1);
}
.ra-card-title {
font-size: 14px;
font-weight: 700;
color: var(--t0);
}
.ra-card-source {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t3);
background: var(--bg1);
padding: 3px 10px;
border-radius: 20px;
}
.ra-stock {
padding: 16px 20px;
border-bottom: 1px solid var(--border0);
display: flex;
flex-direction: column;
gap: 10px;
}
.ra-stock:last-child {
border-bottom: none;
}
.ra-top {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ra-name {
font-size: 15px;
font-weight: 700;
color: var(--t0);
flex: 1;
min-width: 120px;
}
.ra-symbol {
font-size: 11px;
font-weight: 600;
color: var(--t3);
background: var(--bg1);
padding: 2px 8px;
border-radius: 6px;
}
.ra-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 20px;
}
.ra-badge.buy {
background: rgba(40, 224, 140, 0.15);
color: #28e08c;
}
.ra-badge.exited {
background: rgba(255, 58, 92, 0.12);
color: #ff3a5c;
}
.ra-badge.active {
background: rgba(40, 224, 140, 0.12);
color: #28e08c;
}
.ra-category {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t3);
padding: 2px 8px;
border: 1px solid var(--border1);
border-radius: 20px;
}
.ra-meta {
font-size: 11px;
color: var(--t3);
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.ra-meta strong {
color: var(--t1);
}
.ra-exit-pill {
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 6px;
background: rgba(255, 58, 92, 0.1);
color: #ff3a5c;
}
.ra-exit-pill.win {
background: rgba(40, 224, 140, 0.1);
color: #28e08c;
}
.ra-report-link {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 10px;
font-size: 12px;
font-weight: 600;
color: var(--chip-blue);
text-decoration: none;
padding: 6px 12px;
border: 1px solid var(--chip-blue);
border-radius: 8px;
opacity: 0.85;
transition: opacity 0.15s;
}
.ra-report-link:hover {
opacity: 1;
}
.ra-section-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--t3);
padding-top: 4px;
border-top: 1px solid var(--border0);
}
.ra-bullets {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 2px;
}
.ra-bullet {
font-size: 13px;
color: var(--t1);
line-height: 1.55;
padding-left: 16px;
position: relative;
}
.ra-bullet::before {
content: "·";
position: absolute;
left: 4px;
color: var(--chip-blue);
font-weight: 700;
font-size: 16px;
top: -1px;
}
.ra-thesis-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 8px 16px;
margin-top: 2px;
}
.ra-thesis-item {
display: flex;
flex-direction: column;
gap: 1px;
}
.ra-thesis-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--t3);
}
.ra-thesis-value {
font-size: 12px;
font-weight: 600;
color: var(--t1);
}
.ru-exited-banner {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
margin-top: 6px;
background: rgba(255, 58, 92, 0.06);
border: 1px solid rgba(255, 58, 92, 0.18);
border-radius: 10px;
}
.ru-exited-icon {
font-size: 22px;
line-height: 1;
flex-shrink: 0;
padding-top: 2px;
}
.ru-exited-body {
display: flex;
flex-direction: column;
gap: 3px;
}
.ru-exited-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #ff3a5c;
}
.ru-exited-price {
font-size: 22px;
font-weight: 800;
color: var(--t0);
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.ru-exited-meta {
font-size: 12px;
color: var(--t3);
}
.ru-exited-ret {
font-size: 13px;
font-weight: 700;
margin-top: 1px;
}
.ru-exited-ret.up {
color: #28e08c;
}
.ru-exited-ret.down {
color: #ff3a5c;
}
/* ===== 5-cards/_breadth.css ===== */
/* ==========================================================================
Advance / decline breadth
Extracted from the legacy index.html monolith (source lines 3127-3272).
========================================================================== */
/* ── Advance / Decline Breadth Card ─────────────────────────────── */
.ad-card {
padding: 0;
}
.ad-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px 12px;
border-bottom: 1px solid var(--border1);
}
.ad-title {
font-size: 15px;
font-weight: 700;
color: var(--t0);
}
.ad-subtitle {
font-size: 11px;
color: var(--t2);
margin-top: 2px;
}
.ad-signal-badge {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
}
.ad-signal-bull {
background: rgba(40, 224, 140, 0.15);
color: #28e08c;
border: 1px solid rgba(40, 224, 140, 0.3);
}
.ad-signal-bear {
background: rgba(255, 58, 92, 0.15);
color: #ff3a5c;
border: 1px solid rgba(255, 58, 92, 0.3);
}
.ad-signal-neu {
background: rgba(245, 213, 71, 0.15);
color: #f5d547;
border: 1px solid rgba(245, 213, 71, 0.3);
}
.ad-bignums {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 14px;
padding: 18px 20px 6px;
}
.ad-bignum {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.ad-bignum-val {
font-size: 30px;
font-weight: 800;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.ad-bignum-val.adv {
color: #28e08c;
}
.ad-bignum-val.dec {
color: #ff3a5c;
}
.ad-bignum-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--t3);
}
.ad-splitbar {
margin: 10px 20px 4px;
height: 10px;
border-radius: 6px;
overflow: hidden;
display: flex;
background: var(--bg1);
}
.ad-splitbar-adv {
background: #28e08c;
height: 100%;
}
.ad-splitbar-dec {
background: #ff3a5c;
height: 100%;
}
.ad-splitbar-labels {
display: flex;
justify-content: space-between;
padding: 0 20px 14px;
font-size: 11px;
font-weight: 600;
}
.ad-splitbar-labels .adv-lbl {
color: #28e08c;
}
.ad-splitbar-labels .dec-lbl {
color: #ff3a5c;
}
.ad-section {
padding: 14px 20px;
border-bottom: 1px solid var(--border0);
}
.ad-section-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--t3);
margin-bottom: 10px;
}
.ad-table {
width: 100%;
border-collapse: collapse;
}
.ad-table td {
padding: 7px 10px;
font-size: 13px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
vertical-align: middle;
}
.ad-table td:first-child {
color: var(--t2);
width: 55%;
}
.ad-table td:last-child {
color: var(--t0);
font-weight: 600;
text-align: right;
}
.ad-table tr:last-child td {
border-bottom: none;
}
.ad-note {
padding: 10px 20px 14px;
font-size: 11px;
color: var(--t3);
line-height: 1.5;
}
/* ===== 5-cards/_fii-dii.css ===== */
/* ==========================================================================
FII / DII activity
Extracted from the legacy index.html monolith (source lines 3273-3417).
========================================================================== */
/* ── FII / DII Activity Card ────────────────────────────────────── */
.fd-card {
padding: 0;
}
.fd-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px 12px;
border-bottom: 1px solid var(--border1);
}
.fd-title {
font-size: 15px;
font-weight: 700;
color: var(--t0);
}
.fd-subtitle {
font-size: 11px;
color: var(--t2);
margin-top: 2px;
}
.fd-bignums {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 14px;
padding: 18px 20px 6px;
}
.fd-bignum {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.fd-bignum-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--t3);
}
.fd-bignum-val {
font-size: 24px;
font-weight: 800;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.fd-badge {
padding: 3px 10px;
border-radius: 20px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.4px;
margin-top: 2px;
}
.fd-badge-bull {
background: rgba(40, 224, 140, 0.15);
color: #28e08c;
border: 1px solid rgba(40, 224, 140, 0.3);
}
.fd-badge-bear {
background: rgba(255, 58, 92, 0.15);
color: #ff3a5c;
border: 1px solid rgba(255, 58, 92, 0.3);
}
.fd-badge-neu {
background: rgba(245, 213, 71, 0.15);
color: #f5d547;
border: 1px solid rgba(245, 213, 71, 0.3);
}
.fd-combined {
text-align: center;
padding: 4px 20px 14px;
font-size: 12px;
color: var(--t1);
}
.fd-combined b {
color: var(--t0);
}
.fd-section {
padding: 14px 20px;
border-bottom: 1px solid var(--border0);
}
.fd-section-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--t3);
margin-bottom: 10px;
}
.fd-table {
width: 100%;
border-collapse: collapse;
}
.fd-table td {
padding: 7px 10px;
font-size: 13px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
vertical-align: middle;
}
.fd-table td:first-child {
color: var(--t2);
width: 45%;
}
.fd-table td:last-child {
color: var(--t0);
font-weight: 600;
text-align: right;
}
.fd-table tr:last-child td {
border-bottom: none;
}
.fd-trend-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
font-size: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.fd-trend-row:last-child {
border-bottom: none;
}
.fd-trend-date {
color: var(--t2);
width: 90px;
flex-shrink: 0;
}
.fd-trend-vals {
display: flex;
gap: 16px;
}
.fd-trend-val {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.fd-note {
padding: 10px 20px 14px;
font-size: 11px;
color: var(--t3);
line-height: 1.5;
}
/* ===== 5-cards/_earnings.css ===== */
/* ==========================================================================
Earnings transcript intelligence
Extracted from the legacy index.html monolith (source lines 3418-3641).
========================================================================== */
/* ── Earnings Transcript Intelligence Cards ─────────────────────── */
.et-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px 12px;
border-bottom: 1px solid var(--border1);
}
.et-title {
font-size: 15px;
font-weight: 700;
color: var(--t0);
}
.et-subtitle {
font-size: 11px;
color: var(--t2);
margin-top: 2px;
}
.et-chip {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--chip-blue);
background: rgba(91, 104, 255, 0.1);
padding: 3px 10px;
border-radius: 20px;
}
/* Concall Summary */
.cs-card {
padding: 0;
}
.cs-summary {
padding: 16px 20px;
font-size: 13px;
color: var(--t1);
line-height: 1.6;
border-bottom: 1px solid var(--border0);
}
.cs-section {
padding: 14px 20px;
}
.cs-section-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--t3);
margin-bottom: 10px;
}
.cs-takeaway {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 7px 0;
font-size: 12.5px;
color: var(--t1);
line-height: 1.5;
}
.cs-takeaway-bullet {
color: var(--chip-blue);
flex-shrink: 0;
margin-top: 1px;
}
/* QoQ Comparison */
.qc-card {
padding: 0;
}
.qc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 16px 20px;
}
.qc-metric {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px;
border-radius: 10px;
background: var(--bg1);
border: 1px solid var(--border0);
}
.qc-metric-name {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t3);
}
.qc-metric-val {
font-size: 16px;
font-weight: 800;
color: var(--t0);
font-variant-numeric: tabular-nums;
}
.qc-metric-delta {
font-size: 11.5px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.qc-up {
color: #28e08c;
}
.qc-down {
color: #ff3a5c;
}
.qc-flat {
color: #f5d547;
}
.qc-note {
padding: 4px 20px 16px;
font-size: 11px;
color: var(--t3);
line-height: 1.5;
}
/* Guidance */
.gd-card {
padding: 0;
}
.gd-badge-row {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 20px 4px;
}
.gd-revised-badge {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.4px;
padding: 3px 10px;
border-radius: 20px;
background: rgba(40, 224, 140, 0.15);
color: #28e08c;
border: 1px solid rgba(40, 224, 140, 0.3);
}
.gd-note-badge {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.4px;
padding: 3px 10px;
border-radius: 20px;
background: rgba(245, 213, 71, 0.15);
color: #f5d547;
border: 1px solid rgba(245, 213, 71, 0.3);
}
.gd-quote {
padding: 16px 20px;
font-size: 13px;
color: var(--t1);
line-height: 1.6;
font-style: italic;
border-left: 3px solid var(--chip-blue);
margin: 8px 20px;
background: var(--bg1);
border-radius: 0 8px 8px 0;
padding-left: 14px;
}
.gd-revision-note {
padding: 4px 20px 16px;
font-size: 12px;
color: var(--t2);
}
/* Management Commentary */
.mgc-card {
padding: 0;
}
.mgc-filter-row {
display: flex;
gap: 8px;
padding: 12px 20px 4px;
flex-wrap: wrap;
}
.mgc-filter-chip {
font-size: 10.5px;
font-weight: 600;
padding: 3px 10px;
border-radius: 20px;
background: var(--bg1);
color: var(--t2);
border: 1px solid var(--border0);
}
.mgc-quote-row {
padding: 14px 20px;
border-bottom: 1px solid var(--border0);
display: flex;
flex-direction: column;
gap: 6px;
}
.mgc-quote-row:last-child {
border-bottom: none;
}
.mgc-quote-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.mgc-speaker {
font-size: 11.5px;
font-weight: 700;
color: var(--t0);
}
.mgc-topic {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--chip-blue);
background: rgba(91, 104, 255, 0.1);
padding: 2px 8px;
border-radius: 10px;
}
.mgc-quote-text {
font-size: 12.5px;
color: var(--t1);
line-height: 1.55;
font-style: italic;
}
/* ===== 5-cards/_metric-swot-mf.css ===== */
/* ==========================================================================
Single metric, result date, SWOT, mutual funds, sector outlook
Extracted from the legacy index.html monolith (source lines 3642-4632).
========================================================================== */
/* ── Single Metric Card ("PE of TCS") ────────────────────────────── */
.mt-card {
padding: 0;
}
.mt-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px 12px;
border-bottom: 1px solid var(--border1);
}
.mt-title {
font-size: 15px;
font-weight: 700;
color: var(--t0);
}
.mt-subtitle {
font-size: 11px;
color: var(--t2);
margin-top: 2px;
}
.mt-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 16px 20px;
}
.mt-metric {
flex: 1;
min-width: 130px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 14px 10px;
border-radius: 10px;
background: var(--bg1);
border: 1px solid var(--border0);
}
.mt-metric-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t3);
text-align: center;
}
.mt-metric-val {
font-size: 20px;
font-weight: 800;
color: var(--t0);
font-variant-numeric: tabular-nums;
}
.mt-signal-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
margin-top: 8px;
text-transform: uppercase;
}
.mt-signal-oversold {
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
border: 1px solid rgba(34, 197, 94, 0.3);
}
.mt-signal-overbought {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.mt-signal-neutral {
background: rgba(156, 163, 175, 0.15);
color: #9ca3af;
border: 1px solid rgba(156, 163, 175, 0.3);
}
.mt-signal-statement {
padding: 14px 20px;
margin: 0 20px 16px;
font-size: 13px;
font-weight: 500;
color: var(--t0);
line-height: 1.5;
background: rgba(100, 116, 139, 0.08);
border-radius: 8px;
border: 1px solid rgba(100, 116, 139, 0.12);
}
.mt-note {
padding: 4px 20px 16px;
font-size: 11px;
color: var(--t3);
line-height: 1.5;
}
/* result_date_card — "when is the result of Dabur India?" */
.rdc-card {
padding: 0;
width: 100%;
}
.rdc-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px 12px;
border-bottom: 1px solid var(--border1);
}
.rdc-title {
font-size: 15px;
font-weight: 700;
color: var(--t0);
}
.rdc-sym {
font-size: 11px;
color: var(--t2);
margin-top: 2px;
letter-spacing: 0.02em;
}
.rdc-cal {
font-size: 22px;
line-height: 1;
opacity: 0.9;
}
.rdc-main {
padding: 18px 20px 6px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.rdc-date {
font-size: 26px;
font-weight: 800;
color: var(--t0);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.rdc-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.rdc-quarter {
font-size: 12px;
font-weight: 700;
color: #7886ff;
background: rgba(91, 104, 255, 0.14);
border: 1px solid rgba(91, 104, 255, 0.3);
padding: 3px 10px;
border-radius: 999px;
}
.rdc-badge {
font-size: 12px;
font-weight: 700;
color: var(--t1);
background: var(--bg1);
border: 1px solid var(--border0);
padding: 3px 10px;
border-radius: 999px;
}
.rdc-badge.soon {
color: #28e08c;
background: rgba(40, 224, 140, 0.12);
border-color: rgba(40, 224, 140, 0.3);
}
.rdc-badge.past {
color: var(--t2);
}
.rdc-qe {
font-size: 12px;
color: var(--t2);
}
.rdc-prev {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 20px 0;
padding: 10px 12px;
border-radius: 10px;
background: var(--bg1);
border: 1px solid var(--border0);
}
.rdc-prev-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t3);
}
.rdc-prev-val {
font-size: 12px;
color: var(--t1);
font-weight: 600;
}
.rdc-empty {
padding: 18px 20px;
font-size: 13px;
color: var(--t2);
}
.rdc-note {
padding: 12px 20px 16px;
font-size: 11px;
color: var(--t3);
line-height: 1.5;
}
/* swot_card — sector-aware SWOT */
.swot-card {
padding: 0;
}
.swot-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 20px 12px;
border-bottom: 1px solid var(--border1);
}
.swot-title {
font-size: 15px;
font-weight: 700;
color: var(--t0);
}
.swot-sub {
font-size: 11px;
color: var(--t2);
margin-top: 2px;
}
.swot-lens {
flex-shrink: 0;
font-size: 11px;
font-weight: 700;
color: #c44ff0;
background: rgba(196, 79, 240, 0.14);
border: 1px solid rgba(196, 79, 240, 0.3);
padding: 4px 10px;
border-radius: 999px;
}
.swot-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 14px 20px;
}
@media (max-width: 560px) {
.swot-grid {
grid-template-columns: 1fr;
}
}
/* A single-quadrant request (e.g. only "strengths") should span full width. */
.swot-grid-1 {
grid-template-columns: 1fr;
}
.swot-quad {
border-radius: 12px;
border: 1px solid var(--border0);
background: var(--bg1);
padding: 12px 14px;
}
.swot-quad-head {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 8px;
}
.swot-quad.strengths {
border-color: rgba(40, 224, 140, 0.28);
background: rgba(40, 224, 140, 0.06);
}
.swot-quad.strengths .swot-quad-head {
color: #28e08c;
}
.swot-quad.weaknesses {
border-color: rgba(255, 58, 92, 0.28);
background: rgba(255, 58, 92, 0.06);
}
.swot-quad.weaknesses .swot-quad-head {
color: #ff3a5c;
}
.swot-quad.opportunities {
border-color: rgba(96, 165, 250, 0.28);
background: rgba(96, 165, 250, 0.06);
}
.swot-quad.opportunities .swot-quad-head {
color: #60a5fa;
}
.swot-quad.threats {
border-color: rgba(245, 213, 71, 0.28);
background: rgba(245, 213, 71, 0.06);
}
.swot-quad.threats .swot-quad-head {
color: #f5d547;
}
.swot-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.swot-list li {
font-size: 12.5px;
line-height: 1.5;
color: var(--t1);
}
.swot-h {
font-weight: 700;
color: var(--t0);
}
.swot-empty {
color: var(--t3);
}
.swot-take {
margin: 4px 20px 0;
padding: 12px 14px;
border-radius: 12px;
background: rgba(91, 104, 255, 0.08);
border: 1px solid rgba(91, 104, 255, 0.22);
}
.swot-take-label {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #7886ff;
margin-bottom: 4px;
}
.swot-take-text {
font-size: 13px;
line-height: 1.55;
color: var(--t1);
}
.swot-params {
margin: 12px 20px 0;
}
.swot-params > summary {
cursor: pointer;
font-size: 12px;
font-weight: 600;
color: var(--t2);
list-style: none;
padding: 8px 0;
}
.swot-params > summary::-webkit-details-marker {
display: none;
}
.swot-params > summary::before {
content: "▸ ";
color: var(--t3);
}
.swot-params[open] > summary::before {
content: "▾ ";
}
.swot-params-body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 6px 0 4px;
}
.swot-param {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
}
.swot-param-cat {
font-size: 11px;
font-weight: 700;
color: var(--t2);
min-width: 110px;
}
.swot-param-kpis {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.swot-kpi {
font-size: 10.5px;
color: var(--t2);
background: var(--bg2, rgba(255, 255, 255, 0.04));
border: 1px solid var(--border0);
border-radius: 6px;
padding: 2px 7px;
}
.swot-note {
padding: 12px 20px 16px;
font-size: 11px;
color: var(--t3);
line-height: 1.5;
}
/* mutual-fund cards */
.mf-card {
padding: 0;
}
.mf-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 20px 12px;
border-bottom: 1px solid var(--border1);
}
.mf-title {
font-size: 14.5px;
font-weight: 700;
color: var(--t0);
line-height: 1.35;
}
.mf-sub {
font-size: 11px;
color: var(--t2);
margin-top: 3px;
}
.mf-chip {
flex-shrink: 0;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.05em;
color: #7886ff;
background: rgba(91, 104, 255, 0.14);
border: 1px solid rgba(91, 104, 255, 0.3);
padding: 4px 9px;
border-radius: 999px;
}
.mf-chip.waya {
color: #c44ff0;
background: rgba(196, 79, 240, 0.14);
border-color: rgba(196, 79, 240, 0.3);
}
.mf-note {
padding: 12px 20px 16px;
font-size: 11px;
color: var(--t3);
line-height: 1.5;
}
/* compare verdict */
.mf-verdict {
margin: 4px 20px 0;
padding: 12px 14px;
border-radius: 12px;
background: var(--bg1);
border: 1px solid var(--border0);
}
.mf-verdict-label {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.6px;
color: var(--accent);
margin-bottom: 5px;
}
.mf-verdict-text {
font-size: 13px;
color: var(--t1);
line-height: 1.6;
}
/* fund list */
.mf-fund-list {
padding: 8px 12px;
display: flex;
flex-direction: column;
}
.mf-fund-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 8px;
border-bottom: 1px solid var(--border0);
}
.mf-fund-row:last-child {
border-bottom: none;
}
.mf-fund-row.mf-best {
background: rgba(40, 224, 140, 0.05);
border-radius: 10px;
}
.mf-rank {
width: 22px;
text-align: center;
font-size: 13px;
font-weight: 800;
color: var(--t3);
}
.mf-best .mf-rank {
color: #28e08c;
}
.mf-fund-main {
flex: 1;
min-width: 0;
}
.mf-fund-name {
font-size: 13px;
font-weight: 600;
color: var(--t0);
}
.mf-fund-class {
font-size: 10.5px;
color: var(--t2);
margin-top: 1px;
}
.mf-bar {
height: 4px;
background: var(--border0);
border-radius: 3px;
margin-top: 6px;
overflow: hidden;
}
.mf-bar-fill {
height: 100%;
background: #28e08c;
border-radius: 3px;
}
.mf-bar-fill.neg {
background: #ff3a5c;
}
.mf-ret {
flex-shrink: 0;
text-align: right;
font-size: 15px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.mf-ret.pos {
color: #28e08c;
}
.mf-ret.neg {
color: #ff3a5c;
}
.mf-ret-lbl {
display: block;
font-size: 9px;
font-weight: 700;
color: var(--t3);
letter-spacing: 0.06em;
}
/* tables */
.mf-table {
width: 100%;
border-collapse: collapse;
}
.mf-table th {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--t3);
text-align: left;
padding: 10px 16px 8px;
border-bottom: 1px solid var(--border1);
white-space: nowrap;
}
.mf-table td {
padding: 11px 16px;
border-bottom: 1px solid var(--border0);
vertical-align: middle;
}
.mf-table tr:last-child td {
border-bottom: none;
}
.mf-td-right,
.mf-table th.mf-td-right,
.mf-table td.mf-td-right {
text-align: right !important;
white-space: nowrap;
}
.mf-td-center,
.mf-table th.mf-td-center,
.mf-table td.mf-td-center {
text-align: center !important;
white-space: nowrap;
}
.mf-td-rank,
.mf-table th.mf-td-rank,
.mf-table td.mf-td-rank {
color: var(--t3);
font-weight: 700;
font-size: 12px;
width: 38px;
text-align: center !important;
white-space: nowrap;
}
.mf-table th.mf-col-metric,
.mf-table td.mf-col-metric {
width: 150px;
text-align: right !important;
}
.mf-table th.mf-col-funds,
.mf-table td.mf-col-funds {
width: 120px;
text-align: right !important;
}
.mf-table th.mf-col-waya,
.mf-table td.mf-col-waya {
width: 84px;
text-align: center !important;
}
.mf-h-name {
font-size: 12.5px;
font-weight: 600;
color: var(--t0);
}
.mf-h-sub {
font-size: 10.5px;
color: var(--t2);
margin-top: 1px;
}
.mf-h-wt {
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--t0);
white-space: nowrap;
}
.mf-metric-big {
font-size: 16px;
font-weight: 800;
color: var(--t0);
font-variant-numeric: tabular-nums;
}
.mf-metric-sub {
font-size: 9px;
color: var(--t3);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.mf-waya {
display: inline-block;
min-width: 30px;
text-align: center;
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: 6px;
border: 1px solid var(--border0);
background: var(--bg1);
color: var(--t2);
}
.mf-waya.mf-waya-pos {
color: #28e08c;
background: rgba(40, 224, 140, 0.12);
border-color: rgba(40, 224, 140, 0.28);
}
.mf-waya.mf-waya-neg {
color: #ff3a5c;
background: rgba(255, 58, 92, 0.12);
border-color: rgba(255, 58, 92, 0.28);
}
/* optimizer */
.mf-stats {
display: flex;
gap: 10px;
padding: 14px 20px 4px;
}
.mf-stat {
flex: 1;
text-align: center;
padding: 10px 8px;
border-radius: 10px;
background: var(--bg1);
border: 1px solid var(--border0);
}
.mf-stat-val {
font-size: 15px;
font-weight: 800;
color: var(--t0);
}
.mf-stat-lbl {
font-size: 9.5px;
color: var(--t3);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 2px;
}
.mf-swap-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 14px 20px 4px;
}
@media (max-width: 560px) {
.mf-swap-grid {
grid-template-columns: 1fr;
}
}
.mf-swap-col {
border: 1px solid var(--border0);
border-radius: 12px;
overflow: hidden;
}
.mf-swap-head {
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 9px 12px;
}
.mf-swap-head.neg {
color: #ff3a5c;
background: rgba(255, 58, 92, 0.08);
}
.mf-swap-head.pos {
color: #28e08c;
background: rgba(40, 224, 140, 0.08);
}
.mf-swap-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
padding: 9px 12px;
border-top: 1px solid var(--border0);
}
.mf-swap-code {
font-size: 12px;
font-weight: 700;
color: var(--t0);
}
.mf-swap-name {
font-size: 11px;
color: var(--t2);
}
.mf-swap-reason {
font-size: 10px;
color: var(--t3);
margin-top: 2px;
}
.mf-swap-wt {
font-size: 12.5px;
font-weight: 700;
color: var(--t1);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.mf-empty {
padding: 12px;
font-size: 11.5px;
color: var(--t3);
}
.mf-redis {
margin: 10px 20px 0;
padding: 9px 12px;
border-radius: 10px;
background: rgba(245, 213, 71, 0.08);
border: 1px solid rgba(245, 213, 71, 0.25);
font-size: 11.5px;
color: var(--t1);
}
.mf-opt-details {
margin: 12px 20px 0;
}
.mf-opt-details > summary {
cursor: pointer;
font-size: 12px;
font-weight: 600;
color: var(--t2);
list-style: none;
padding: 8px 0;
}
.mf-opt-details > summary::-webkit-details-marker {
display: none;
}
.mf-opt-details > summary::before {
content: "▸ ";
color: var(--t3);
}
.mf-opt-details[open] > summary::before {
content: "▾ ";
}
.mf-opt-added {
background: rgba(40, 224, 140, 0.05);
}
.mf-tag-new {
font-size: 8.5px;
font-weight: 800;
color: #28e08c;
background: rgba(40, 224, 140, 0.14);
border-radius: 4px;
padding: 1px 5px;
letter-spacing: 0.04em;
vertical-align: middle;
}
/* keep / replace action table */
.mf-act-table td {
vertical-align: top;
}
.mf-act-row.replace,
.mf-act-row.remove {
background: rgba(255, 58, 92, 0.045);
}
.mf-act-row.keep .mf-h-name {
color: var(--t0);
}
.mf-act-cell {
padding-left: 14px;
}
.mf-act {
display: inline-block;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.02em;
padding: 3px 9px;
border-radius: 999px;
white-space: nowrap;
}
.mf-act.keep {
color: #28e08c;
background: rgba(40, 224, 140, 0.12);
border: 1px solid rgba(40, 224, 140, 0.3);
}
.mf-act.replace {
color: #c44ff0;
background: rgba(196, 79, 240, 0.12);
border: 1px solid rgba(196, 79, 240, 0.3);
}
.mf-act.remove {
color: #ff3a5c;
background: rgba(255, 58, 92, 0.12);
border: 1px solid rgba(255, 58, 92, 0.3);
}
.mf-newstock {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
margin-top: 6px;
font-size: 12px;
}
.mf-arrow {
color: #c44ff0;
font-weight: 800;
}
.mf-neg-reason {
color: #ff3a5c;
}
/* sector_outlook_card — sector outlook from earnings calls */
.so-card {
padding: 0;
}
.so-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 20px 12px;
border-bottom: 1px solid var(--border1);
}
.so-title {
font-size: 15px;
font-weight: 700;
color: var(--t0);
}
.so-chip {
flex-shrink: 0;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
color: #7886ff;
background: rgba(91, 104, 255, 0.14);
border: 1px solid rgba(91, 104, 255, 0.3);
padding: 4px 9px;
border-radius: 999px;
}
.so-outlook {
padding: 14px 20px 4px;
font-size: 13.5px;
line-height: 1.6;
color: var(--t1);
}
.so-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 12px 20px 4px;
}
@media (max-width: 560px) {
.so-grid {
grid-template-columns: 1fr;
}
}
.so-col {
border: 1px solid var(--border0);
border-radius: 12px;
background: var(--bg1);
padding: 12px 14px;
}
.so-col-head {
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 8px;
}
.so-col-head.themes {
color: #28e08c;
}
.so-col-head.risks {
color: #f5d547;
}
.so-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.so-list li {
font-size: 12.5px;
line-height: 1.5;
color: var(--t1);
padding-left: 14px;
position: relative;
}
.so-list li::before {
content: "•";
position: absolute;
left: 2px;
color: var(--t3);
}
.so-comp-label {
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--t3);
padding: 16px 20px 6px;
}
.so-companies {
padding: 0 20px 4px;
display: flex;
flex-direction: column;
gap: 10px;
}
.so-company {
border: 1px solid var(--border0);
border-radius: 12px;
background: var(--bg1);
padding: 12px 14px;
}
.so-comp-head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.so-comp-name {
font-size: 13px;
font-weight: 700;
color: var(--t0);
}
.so-comp-code {
font-size: 10.5px;
color: var(--t2);
}
.so-comp-q {
margin-left: auto;
font-size: 10px;
font-weight: 700;
color: #7886ff;
background: rgba(91, 104, 255, 0.12);
border: 1px solid rgba(91, 104, 255, 0.25);
padding: 2px 8px;
border-radius: 999px;
}
.so-comp-guide {
font-size: 12.5px;
line-height: 1.55;
color: var(--t1);
margin-top: 7px;
font-style: italic;
}
.so-comp-take {
font-size: 11.5px;
line-height: 1.5;
color: var(--t2);
margin-top: 6px;
padding-left: 10px;
border-left: 2px solid var(--border1);
}
.so-note {
padding: 14px 20px 16px;
font-size: 11px;
color: var(--t3);
line-height: 1.5;
}
/* ===== 5-cards/_investment-thesis.css ===== */
/* ==========================================================================
Investment thesis
Extracted from the legacy index.html monolith (source lines 4633-4796).
========================================================================== */
/* ── Investment Thesis Card ─────────────────────────────────────── */
.it-card {
padding: 0;
}
.it-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px 12px;
border-bottom: 1px solid var(--border1);
}
.it-card-title {
font-size: 14px;
font-weight: 700;
color: var(--t0);
}
.it-card-source {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--chip-blue);
background: rgba(91, 104, 255, 0.1);
padding: 3px 10px;
border-radius: 20px;
}
.it-stock {
padding: 16px 20px;
border-bottom: 1px solid var(--border0);
display: flex;
flex-direction: column;
gap: 10px;
}
.it-stock:last-child {
border-bottom: none;
}
.it-top {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.it-name {
font-size: 15px;
font-weight: 700;
color: var(--t0);
flex: 1;
min-width: 120px;
}
.it-symbol {
font-size: 11px;
font-weight: 600;
color: var(--t3);
background: var(--bg1);
padding: 2px 8px;
border-radius: 6px;
}
.it-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 20px;
}
.it-badge.buy {
background: rgba(40, 224, 140, 0.15);
color: #28e08c;
}
.it-badge.exited {
background: rgba(255, 58, 92, 0.12);
color: #ff3a5c;
}
.it-badge.active {
background: rgba(40, 224, 140, 0.12);
color: #28e08c;
}
.it-category {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t3);
padding: 2px 8px;
border: 1px solid var(--border1);
border-radius: 20px;
}
.it-meta {
font-size: 11px;
color: var(--t3);
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.it-meta strong {
color: var(--t1);
}
.it-exit-pill {
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 6px;
background: rgba(255, 58, 92, 0.1);
color: #ff3a5c;
}
.it-exit-pill.win {
background: rgba(40, 224, 140, 0.1);
color: #28e08c;
}
.it-bullcase-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--chip-blue);
padding-top: 4px;
border-top: 1px solid var(--border0);
}
.it-bullets {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 2px;
}
.it-bullet {
font-size: 13px;
color: var(--t1);
line-height: 1.55;
padding-left: 16px;
position: relative;
}
.it-bullet::before {
content: "★";
position: absolute;
left: 0;
top: 1px;
color: var(--chip-blue);
font-size: 10px;
}
.it-thesis-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 8px 16px;
margin-top: 2px;
}
.it-thesis-item {
display: flex;
flex-direction: column;
gap: 1px;
}
.it-thesis-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--t3);
}
.it-thesis-value {
font-size: 12px;
font-weight: 600;
color: var(--t1);
}
/* ===== 5-cards/_entry-exit.css ===== */
/* ==========================================================================
Entry / exit & stop-loss
Extracted from the legacy index.html monolith (source lines 4797-5088).
========================================================================== */
/* ── Entry / Exit & Stop-Loss Card ──────────────────────────────── */
.ee-card {
padding: 0;
}
.ee-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px 12px;
border-bottom: 1px solid var(--border1);
}
.ee-card-title {
font-size: 14px;
font-weight: 700;
color: var(--t0);
}
.ee-card-date {
font-size: 11px;
color: var(--t3);
display: flex;
align-items: center;
gap: 6px;
}
.ee-date-dot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
}
.ee-date-dot.active {
background: #28e08c;
}
.ee-date-dot.inactive {
background: var(--t3);
}
.ee-stock {
padding: 16px 20px;
border-bottom: 1px solid var(--border0);
display: flex;
flex-direction: column;
gap: 14px;
}
.ee-stock:last-child {
border-bottom: none;
}
.ee-top {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ee-name {
font-size: 15px;
font-weight: 700;
color: var(--t0);
flex: 1;
min-width: 120px;
}
.ee-symbol {
font-size: 11px;
font-weight: 600;
color: var(--t3);
background: var(--bg1);
padding: 2px 8px;
border-radius: 6px;
}
.ee-status-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 20px;
}
.ee-status-badge.buy {
background: rgba(40, 224, 140, 0.15);
color: #28e08c;
}
.ee-status-badge.hold {
background: rgba(245, 213, 71, 0.15);
color: #f5d547;
}
.ee-status-badge.exit {
background: rgba(255, 58, 92, 0.15);
color: #ff3a5c;
}
.ee-status-badge.active {
background: rgba(40, 224, 140, 0.12);
color: #28e08c;
}
.ee-status-badge.inactive {
background: rgba(120, 120, 120, 0.12);
color: var(--t3);
}
.ee-category {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t3);
padding: 2px 8px;
border: 1px solid var(--border1);
border-radius: 20px;
}
.ee-entry-block {
display: flex;
align-items: flex-end;
gap: 14px;
flex-wrap: wrap;
padding: 10px 0 4px;
border-top: 1px solid var(--border0);
}
.ee-entry-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--t3);
margin-bottom: 2px;
}
.ee-entry-value {
font-size: 26px;
font-weight: 800;
color: var(--chip-blue);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.ee-position-badge {
font-size: 12px;
font-weight: 700;
padding: 4px 12px;
border-radius: 20px;
background: rgba(245, 213, 71, 0.12);
color: #f5d547;
margin-bottom: 3px;
}
.ee-position-badge.below {
background: rgba(255, 58, 92, 0.12);
color: #ff3a5c;
}
.ee-position-badge.above {
background: rgba(40, 224, 140, 0.12);
color: #28e08c;
}
.ee-table-wrap {
overflow-x: auto;
}
.ee-table {
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
.ee-table thead tr {
background: var(--bg1);
}
.ee-table th {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t3);
padding: 7px 14px 6px;
text-align: left;
white-space: nowrap;
border-bottom: 1px solid var(--border1);
}
.ee-table td {
font-size: 14px;
font-weight: 700;
color: var(--t0);
padding: 10px 14px;
white-space: nowrap;
}
.ee-table td.col-sl {
color: #ff3a5c;
}
.ee-table td.col-target {
color: #28e08c;
}
.ee-table td.col-ret {
font-size: 16px;
font-weight: 800;
padding: 10px 18px;
}
.ee-table td.col-ret.up {
color: #28e08c;
background: rgba(40, 224, 140, 0.08);
}
.ee-table td.col-ret.down {
color: #ff3a5c;
background: rgba(255, 58, 92, 0.08);
}
.ee-table td.col-score {
color: var(--chip-blue);
font-size: 13px;
}
.ee-table td.col-date {
font-size: 12px;
color: var(--t2);
font-weight: 600;
}
.ee-exited-banner {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
margin-top: 6px;
background: rgba(255, 58, 92, 0.06);
border: 1px solid rgba(255, 58, 92, 0.18);
border-radius: 10px;
}
.ee-exited-icon {
font-size: 22px;
line-height: 1;
flex-shrink: 0;
padding-top: 2px;
}
.ee-exited-body {
display: flex;
flex-direction: column;
gap: 3px;
}
.ee-exited-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #ff3a5c;
}
.ee-exited-price {
font-size: 22px;
font-weight: 800;
color: var(--t0);
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.ee-exited-meta {
font-size: 12px;
color: var(--t3);
}
.ee-thesis-header {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--t3);
margin-top: 2px;
}
.ee-thesis-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 8px 16px;
padding: 10px 0 2px;
border-top: 1px solid var(--border0);
}
.ee-thesis-item {
display: flex;
flex-direction: column;
gap: 1px;
}
.ee-thesis-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--t3);
}
.ee-thesis-value {
font-size: 12px;
font-weight: 600;
color: var(--t1);
}
.ee-bullets {
display: flex;
flex-direction: column;
gap: 5px;
}
.ee-bullet {
font-size: 12px;
color: var(--t2);
line-height: 1.5;
padding-left: 14px;
position: relative;
}
.ee-bullet::before {
content: "·";
position: absolute;
left: 4px;
color: var(--chip-blue);
font-weight: 700;
}
/* ===== 4-features/_clarify-bubbles.css ===== */
/* ==========================================================================
Compact clarification Q&A bubbles
Extracted from the legacy index.html monolith (source lines 5089-5118).
========================================================================== */
/* ── Compact clarification Q&A bubbles ─────────────────────────── */
.bubble.clarify-q {
padding: 10px 16px;
background: rgba(91, 104, 255, 0.06);
border: 1px solid rgba(91, 104, 255, 0.14);
border-top-left-radius: 4px;
font-size: 13px;
line-height: 1.6;
color: var(--t1);
max-width: 480px;
}
.bubble.clarify-q strong {
color: var(--t0);
font-weight: 600;
}
.bubble.user-chip {
padding: 7px 16px;
background: rgba(91, 104, 255, 0.15);
border: 1px solid rgba(91, 104, 255, 0.3);
border-top-right-radius: 4px;
font-size: 13px;
font-weight: 600;
color: var(--chip-blue);
max-width: fit-content;
}
.msg-row.clarify-pair {
padding-top: 3px;
padding-bottom: 3px;
}
/* ===== 5-cards/_no-stocks.css ===== */
/* ==========================================================================
No-stocks empty state + feedback + typing
Extracted from the legacy index.html monolith (source lines 5119-5284).
========================================================================== */
/* ── No-stocks card ─────────────────────────────────────────────── */
.no-stocks-card {
padding: 20px 22px;
border-radius: 14px;
border: 1px solid rgba(245, 213, 71, 0.18);
background: rgba(245, 213, 71, 0.05);
display: flex;
flex-direction: column;
gap: 12px;
}
.no-stocks-sorry {
font-size: 13px;
font-weight: 600;
color: var(--t0);
line-height: 1.55;
}
.no-stocks-sorry span {
color: var(--chip-yellow);
}
.no-stocks-sub {
font-size: 12px;
color: var(--t1);
}
.no-stocks-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cap-chip-btn {
padding: 7px 18px;
border-radius: 999px;
border: 1px solid rgba(91, 104, 255, 0.3);
background: rgba(91, 104, 255, 0.1);
color: var(--chip-blue);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.cap-chip-btn:hover {
background: rgba(91, 104, 255, 0.2);
border-color: rgba(91, 104, 255, 0.5);
color: var(--t0);
}
/* Feedback */
.feedback {
display: flex;
align-items: center;
gap: 6px;
margin-top: 10px;
flex-wrap: wrap;
}
.feedback-label {
font-size: 11px;
color: var(--t2);
}
.fb-btn {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.09);
color: var(--t1);
width: 30px;
height: 30px;
border-radius: 8px;
cursor: pointer;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
font-family: inherit;
}
.fb-btn:hover {
background: rgba(255, 255, 255, 0.09);
color: var(--t0);
}
.fb-btn.up {
border-color: var(--green);
color: var(--green);
background: rgba(40, 224, 140, 0.08);
}
.fb-btn.down {
border-color: var(--red);
color: var(--red);
background: rgba(255, 58, 92, 0.08);
}
.fb-btn:disabled {
pointer-events: none;
opacity: 0.5;
}
.fb-thanks {
font-size: 11px;
color: var(--t2);
margin-left: 2px;
}
.fb-comment-row {
display: flex;
gap: 6px;
width: 100%;
margin-top: 6px;
}
.fb-comment-input {
flex: 1;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 5px 10px;
font-size: 12px;
color: var(--t0);
font-family: inherit;
outline: none;
}
.fb-comment-input::placeholder {
color: var(--t2);
}
.fb-comment-send {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--t1);
border-radius: 8px;
padding: 5px 10px;
cursor: pointer;
font-size: 12px;
font-family: inherit;
transition: all 0.15s;
}
.fb-comment-send:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--t0);
}
/* ===== 4-features/_composer.css ===== */
/* ==========================================================================
Input bar / composer
Extracted from the legacy index.html monolith (source lines 5285-5441).
========================================================================== */
/* ── Input bar ── */
.input-bar {
position: relative;
z-index: 2;
/* The reference's composer zone pads 8px above and 16px below the pill. */
padding: 8px 16px 16px;
background: linear-gradient(to top, var(--bg0) 65%, transparent);
}
.input-bar-inner {
/* The reference's chat composer measures 768px wide; the home hero's is 896px
and keeps its own width below. */
max-width: 768px;
margin: 0 auto;
}
.input-row {
display: flex;
align-items: flex-end;
gap: 8px;
background: rgba(255, 255, 255, 0.04);
border: 1.5px solid rgba(255, 255, 255, 0.09);
border-radius: 20px;
padding: 9px 12px;
transition:
border-color 0.3s,
background 0.3s,
box-shadow 0.3s;
box-shadow: 0 4px 28px rgba(0, 0, 0, 0.22);
}
.input-row:focus-within {
border-color: rgba(91, 104, 255, 0.44);
background: rgba(91, 104, 255, 0.035);
box-shadow:
0 4px 28px rgba(0, 0, 0, 0.22),
0 0 0 4px rgba(91, 104, 255, 0.09);
}
.chat-textarea-wrap {
flex: 1;
position: relative;
min-width: 0;
}
.chat-hl-backdrop {
position: absolute;
inset: 0;
padding: 6px 8px;
font-size: 14px;
font-family: inherit;
line-height: 1.6;
color: var(--t0);
pointer-events: none;
text-align: left;
white-space: pre-wrap;
word-break: break-word;
overflow: hidden;
z-index: 0;
}
.chat-hl-backdrop .hl-count {
background: rgba(74, 222, 128, 0.18);
border-radius: 3px;
color: #4ade80;
}
.chat-hl-backdrop .hl-sector {
background: rgba(196, 79, 240, 0.18);
border-radius: 3px;
color: #c44ff0;
}
.chat-hl-backdrop .hl-cap {
background: rgba(251, 146, 60, 0.18);
border-radius: 3px;
color: #fb923c;
}
.chat-hl-backdrop .hl-horizon {
background: rgba(45, 212, 191, 0.18);
border-radius: 3px;
color: #2dd4bf;
}
.chat-hl-backdrop .hl-metric {
background: rgba(51, 215, 229, 0.18);
border-radius: 3px;
color: #33d7e5;
}
.chat-hl-backdrop .hl-stock {
background: rgba(244, 114, 182, 0.18);
border-radius: 3px;
color: #f472b6;
}
.chat-textarea {
width: 100%;
background: transparent;
border: none;
color: var(--t0);
padding: 6px 8px;
font-size: 14px;
font-family: inherit;
resize: none;
min-height: 34px;
max-height: 160px;
line-height: 1.6;
outline: none;
position: relative;
z-index: 1;
}
.chat-textarea.hl-active {
color: transparent;
caret-color: var(--t0);
}
.chat-textarea::placeholder {
color: var(--t2);
}
.send-btn,
.send-prompt-btn {
width: 42px;
height: 42px;
border-radius: 14px;
background: linear-gradient(135deg, #3d84f6 0%, #5877f7 24%, #716ff7 45%, #915ef7 68%, #a358f7 86%, #ac54f7 100%);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: none;
box-shadow:
inset 0 1.5px 1.5px rgba(255, 255, 255, 0.65),
inset 0 -1px 2px rgba(0, 0, 0, 0.2),
0 4px 18px rgba(160, 123, 240, 0.45),
0 2px 8px rgba(61, 132, 246, 0.30);
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.send-btn::before,
.send-prompt-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.05) 80%, transparent 100%);
border-top-left-radius: 14px;
border-top-right-radius: 14px;
pointer-events: none;
z-index: 1;
}
.send-btn::after,
.send-prompt-btn::after {
content: '';
position: absolute;
top: -50%;
left: -100%;
width: 80%;
height: 200%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
transform: rotate(25deg);
transition: left 0.6s ease;
pointer-events: none;
z-index: 2;
}
.send-btn:hover:not(:disabled)::after,
.send-prompt-btn:hover::after {
left: 160%;
}
.send-btn:hover:not(:disabled),
.send-prompt-btn:hover {
transform: translateY(-2px) scale(1.06);
background: linear-gradient(135deg, #60a5fa 0%, #818cf8 24%, #8b5cf6 45%, #a855f7 68%, #c084fc 86%, #d946ef 100%);
box-shadow:
inset 0 1.5px 2px rgba(255, 255, 255, 0.8),
inset 0 -1px 2px rgba(0, 0, 0, 0.2),
0 8px 28px rgba(160, 123, 240, 0.55),
0 4px 16px rgba(96, 165, 250, 0.35);
filter: brightness(1.03);
}
.send-btn:active:not(:disabled),
.send-prompt-btn:active {
transform: translateY(1px) scale(0.96);
box-shadow:
inset 0 1px 1px rgba(0, 0, 0, 0.25),
0 2px 8px rgba(107, 59, 214, 0.35);
}
.send-btn:disabled,
.send-prompt-btn:disabled {
opacity: 0.38;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.send-btn .send-icon,
.send-btn svg,
.send-prompt-btn .send-icon,
.send-prompt-btn svg {
position: relative;
z-index: 3;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.send-btn:hover:not(:disabled) .send-icon,
.send-btn:hover:not(:disabled) svg,
.send-prompt-btn:hover .send-icon,
.send-prompt-btn:hover svg {
transform: translateY(-2px);
}
/* ==========================================================================
Light conversation surface
--------------------------------------------------------------------------
#chat-container is a light panel (4-features/_chat.css), but the composer is
a sibling of .messages, so the token re-pointing scoped to .messages never
reached it: .input-bar kept painting `linear-gradient(to top, var(--bg0) …)`
with the dark-shell canvas colour, which is the black band that appeared
under the conversation.
The same fix, one level up: re-point the semantic tokens on the whole chat
container so every component in it — messages and composer alike — reads
light values, then give the handful of colours that are hardcoded as
translucent WHITE overlays (written assuming a dark surface underneath)
their own light-surface value. Scoped to #chat-container so the home hero's
composer, which sits on its own white card, is untouched.
========================================================================== */
#chat-container {
--t0: var(--wx-text-on-light);
--t1: var(--wx-text-on-light-secondary);
--t2: var(--wx-text-on-light-muted);
--border0: var(--wx-border-light);
--border1: var(--wx-border-light);
--border2: var(--wx-border-light-strong);
}
/* The fade that lifts the composer off the transcript has to be the panel
colour, not the dark shell canvas. */
#chat-container .input-bar {
background: linear-gradient(
to top,
var(--wx-bg-panel-sunken) 68%,
transparent
);
}
/* The questions panel (skill-prompts--chat) still needs to sit flush against
the pill's top edge when open, clipped by the pill's own radius — a column
so that panel can stack above the actual input row, which is the flex row
further down (#chat-container .composer-body). */
#chat-container .input-row {
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0;
overflow: hidden;
/* radius is set with the rest of the pill geometry below, at the reference's 16px */
background: var(--wx-bg-panel);
border: 1.5px solid transparent;
background-image: linear-gradient(var(--wx-bg-panel), var(--wx-bg-panel)),
var(--wx-gradient-outline);
background-origin: border-box;
background-clip: padding-box, border-box;
box-shadow: 0 4px 18px rgba(28, 28, 30, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
}
#chat-container .input-row:focus-within {
box-shadow: 0 4px 18px rgba(136, 91, 232, 0.18),
0 0 0 4px rgba(139, 92, 246, 0.12);
}
#chat-container .typing-dots {
background: var(--wx-bg-panel);
border-color: var(--wx-border-light-strong);
}
/* The query highlighter tints words in the composer as you type. Its palette
was picked for a dark field; the same hues at full saturation are unreadable
on white, so the light surface gets the darker end of each ramp. */
#chat-container .chat-hl-backdrop .hl-count {
background: rgba(5, 150, 105, 0.12);
color: #047857;
}
#chat-container .chat-hl-backdrop .hl-sector {
background: rgba(168, 85, 247, 0.12);
color: #7e22ce;
}
#chat-container .chat-hl-backdrop .hl-cap {
background: rgba(234, 88, 12, 0.12);
color: #c2410c;
}
#chat-container .chat-hl-backdrop .hl-horizon {
background: rgba(13, 148, 136, 0.12);
color: #0f766e;
}
#chat-container .chat-hl-backdrop .hl-metric {
background: rgba(2, 132, 199, 0.12);
color: #0369a1;
}
#chat-container .chat-hl-backdrop .hl-stock {
background: rgba(219, 39, 119, 0.12);
color: #be185d;
}
/* ── The tools row, above the pill ────────────────────────────────────────
"+Skills" and whichever skill chips are attached sit on their own line
above the input, not nested inside it — matching the reference, where the
pill itself carries only the textarea and Send. */
#chat-container .composer-tools-row {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
min-width: 0;
}
#chat-container .composer-skill-btn {
display: inline-flex;
align-items: center;
gap: 5px;
flex: none;
/* 24px tall, 8px radius, 11px text — measured off the reference's Skills
chip, which is 62x24 above a 52px pill, not a 28px rounded pill. */
height: 24px;
padding: 0 8px;
border: 1px solid rgba(226, 232, 240, 0.8);
border-radius: 8px;
background: var(--wx-bg-panel);
color: var(--wx-text-on-light-secondary);
font-size: 11px;
font-weight: var(--wx-weight-semibold, 600);
cursor: pointer;
transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
#chat-container .composer-skill-btn-icon {
width: 11px;
height: 11px;
background-color: currentColor;
-webkit-mask: var(--wx-plus) center / contain no-repeat;
mask: var(--wx-plus) center / contain no-repeat;
}
#chat-container .composer-skill-btn:hover {
background: var(--wx-bg-panel-muted);
color: var(--wx-text-on-light);
border-color: var(--wx-border-light-strong);
}
/* ── Inside the pill ──────────────────────────────────────────────────────
Measured on the reference's chat composer: a 768x52 pill at 16px radius,
padded 0 8px 0 14px, holding 13.5px text and a 32x32 / 12px-radius Send. */
#chat-container .input-row {
border-radius: 16px;
}
#chat-container .composer-body {
display: flex;
align-items: center;
gap: 8px;
padding: 0 8px 0 14px;
min-height: 50px; /* + the 1.5px border top and bottom = the reference's 52 */
}
#chat-container .chat-textarea {
padding: 4px 0;
font-size: 13.5px;
line-height: 1.5;
/* Was 34px, which set the old pill's floor. One line at 13.5/1.5 is ~20px. */
min-height: 28px;
max-height: 120px;
}
#chat-container .send-btn {
width: 42px;
height: 42px;
border-radius: 14px;
flex: none;
}
/* ===== 4-features/_attachments.css ===== */
/* ==========================================================================
Excel attachments (financial modelling)
--------------------------------------------------------------------------
The paperclip in both composers, the chip that shows the upload state, and
the file chip inside the user's own message bubble.
========================================================================== */
.attach-input {
display: none;
}
/* ── the paperclip ─────────────────────────────────────────────────────── */
.attach-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--wx-text-on-light-muted, #64748b);
cursor: pointer;
transition:
background var(--wx-duration-fast, 0.15s) var(--wx-ease, ease),
color var(--wx-duration-fast, 0.15s) var(--wx-ease, ease);
}
.attach-btn svg {
width: 17px;
height: 17px;
}
.attach-btn:hover {
background: rgba(99, 102, 241, 0.1);
color: #4f46e5;
}
.attach-btn:focus-visible {
outline: 2px solid rgba(99, 102, 241, 0.5);
outline-offset: 1px;
}
/* A file is staged — the clip stays tinted so it's obvious the next message carries it. */
.attach-btn.has-file {
background: rgba(16, 124, 65, 0.12);
color: #107c41;
}
.attach-btn--home {
width: 36px;
height: 36px;
margin-right: -4px;
}
.attach-btn--home svg {
width: 19px;
height: 19px;
}
/* ── the staged-file chip ──────────────────────────────────────────────── */
.attach-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px 12px 0;
}
/* Under the hero composer the chip is its own row, centred with the box. */
#attachChipsHome {
padding: 10px 0 0;
max-width: var(--wx-composer-max, 720px);
margin: 0 auto;
width: 100%;
}
.attach-chip {
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 100%;
padding: 6px 8px 6px 10px;
border: 1px solid var(--wx-border-light, #e2e8f0);
border-radius: 12px;
background: var(--wx-bg-panel, #fff);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
font-family: var(--wx-font-ui, inherit);
}
.attach-chip.is-ready {
border-color: rgba(16, 124, 65, 0.35);
background: rgba(16, 124, 65, 0.06);
}
.attach-chip.is-error {
border-color: rgba(225, 29, 72, 0.4);
background: rgba(225, 29, 72, 0.06);
}
.attach-chip-icon {
width: 18px;
height: 18px;
flex: 0 0 18px;
}
.attach-chip-error-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex: 0 0 18px;
border-radius: 50%;
background: #e11d48;
color: #fff;
font-size: 12px;
font-weight: 700;
}
.attach-chip-text {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.25;
}
.attach-chip-name {
font-size: 12.5px;
font-weight: 600;
color: var(--wx-text-on-light, #0f172a);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 220px;
}
.attach-chip-meta {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10.5px;
color: var(--wx-text-on-light-muted, #64748b);
}
.attach-chip.is-error .attach-chip-meta {
color: #be123c;
}
.attach-chip-hint {
font-size: 10.5px;
color: var(--wx-text-on-light-muted, #64748b);
padding-left: 4px;
border-left: 1px solid var(--wx-border-light, #e2e8f0);
}
.attach-chip-remove {
flex: 0 0 auto;
width: 20px;
height: 20px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--wx-text-on-light-muted, #64748b);
font-size: 11px;
cursor: pointer;
}
.attach-chip-remove:hover {
background: rgba(15, 23, 42, 0.08);
color: #0f172a;
}
.attach-spinner {
width: 10px;
height: 10px;
border: 1.6px solid rgba(99, 102, 241, 0.25);
border-top-color: #4f46e5;
border-radius: 50%;
animation: attach-spin 0.7s linear infinite;
}
@keyframes attach-spin {
to {
transform: rotate(360deg);
}
}
/* ── drag & drop ───────────────────────────────────────────────────────── */
.home-input-box.is-dragover,
#chat-container .input-row.is-dragover {
outline: 2px dashed rgba(79, 70, 229, 0.6);
outline-offset: 3px;
}
/* ── the file chip inside the user's message bubble ────────────────────── */
.user-attachment {
/* Its own line above the message text, not inline with it. */
display: flex;
width: fit-content;
align-items: center;
gap: 6px;
margin-bottom: 6px;
padding: 4px 8px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.16);
font-size: 11.5px;
}
.user-attachment svg {
width: 14px;
height: 14px;
}
.user-attachment-name {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px;
}
.user-attachment-meta {
opacity: 0.75;
}
@media (max-width: 640px) {
.attach-chip-hint {
display: none;
}
.attach-chip-name {
max-width: 150px;
}
}
/* ===== 4-components/_badges.css ===== */
/* ==========================================================================
Badges
Extracted from the legacy index.html monolith (source lines 5442-5528).
========================================================================== */
/* ══════════════════════════════════════════════════════════════════
BADGES
══════════════════════════════════════════════════════════════════ */
.badge {
display: inline-flex;
align-items: center;
padding: 2px 9px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.badge-ANSWER {
background: rgba(91, 104, 255, 0.13);
color: var(--chip-blue);
}
.badge-EDUCATE {
background: rgba(40, 224, 140, 0.13);
color: var(--chip-green);
}
.badge-REDIRECT {
background: rgba(196, 79, 240, 0.13);
color: var(--chip-purple);
}
.badge-COMPLY {
background: rgba(245, 213, 71, 0.13);
color: var(--chip-yellow);
}
.badge-ESCALATE {
background: rgba(255, 58, 92, 0.13);
color: var(--chip-red);
}
.badge-neutral {
background: rgba(255, 255, 255, 0.06);
color: var(--t2);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.badge-kb1 {
background: rgba(91, 104, 255, 0.13);
color: var(--chip-blue);
}
.badge-kb3 {
background: rgba(40, 224, 140, 0.13);
color: var(--chip-green);
}
.badge-kb5 {
background: rgba(255, 58, 92, 0.13);
color: var(--chip-red);
}
.badge-kbx {
background: rgba(196, 79, 240, 0.13);
color: var(--chip-purple);
}
/* Spinner */
.spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.1);
border-top-color: var(--blue);
border-radius: 50%;
animation: spin 0.6s linear infinite;
display: inline-block;
flex-shrink: 0;
}
/* Error */
.error-avatar {
width: 32px;
height: 32px;
background: rgba(255, 58, 92, 0.1);
border: 1px solid rgba(255, 58, 92, 0.22);
color: var(--red);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.error-bubble {
border-color: rgba(255, 58, 92, 0.22) !important;
background: rgba(255, 58, 92, 0.06) !important;
color: var(--red) !important;
}
/* ===== 4-features/_clarify.css ===== */
/* ==========================================================================
Follow-up / clarify
Extracted from the legacy index.html monolith (source lines 5529-5585).
========================================================================== */
/* ══════════════════════════════════════════════════════════════════
FOLLOW-UP / CLARIFY (conversational redesign)
══════════════════════════════════════════════════════════════════ */
.clarify-intro {
font-size: 14px;
color: var(--t0);
line-height: 1.75;
}
.followup-block {
margin-top: 16px;
background: rgba(91, 104, 255, 0.06);
border: 1px solid rgba(91, 104, 255, 0.16);
border-radius: 14px;
padding: 16px 18px;
}
.followup-q {
font-size: 14px;
color: var(--t0);
line-height: 1.7;
margin-bottom: 14px;
font-weight: 500;
}
.followup-opts {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.followup-opt-btn {
padding: 8px 20px;
border-radius: 999px;
border: 1.5px solid rgba(91, 104, 255, 0.3);
background: rgba(91, 104, 255, 0.07);
color: var(--t0);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.followup-opt-btn:hover {
background: rgba(91, 104, 255, 0.17);
border-color: rgba(91, 104, 255, 0.52);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(91, 104, 255, 0.16);
}
.followup-opt-btn.selected {
background: var(--grad);
border-color: transparent;
color: white;
box-shadow: 0 4px 14px rgba(91, 104, 255, 0.32);
}
.followup-opt-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
}
/* ===== 5-cards/_advisory.css ===== */
/* ==========================================================================
Advisory layout
Extracted from the legacy index.html monolith (source lines 5586-5675).
========================================================================== */
/* ══════════════════════════════════════════════════════════════════
ADVISORY LAYOUT
══════════════════════════════════════════════════════════════════ */
.advisory-layout {
display: flex;
flex-direction: column;
gap: 14px;
}
.advisory-notice {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 12px 16px;
border-radius: 12px;
border: 1px solid rgba(245, 213, 71, 0.22);
background: rgba(245, 213, 71, 0.05);
color: var(--t1);
font-size: 13px;
line-height: 1.5;
}
.advisory-notice-icon {
flex-shrink: 0;
font-size: 14px;
margin-top: 1px;
color: rgba(245, 213, 71, 0.72);
}
.advisory-hero {
position: relative;
overflow: hidden;
border: 1px solid rgba(91, 104, 255, 0.16);
background: linear-gradient(
135deg,
rgba(91, 104, 255, 0.07),
rgba(196, 79, 240, 0.04)
);
border-radius: 14px;
padding: 16px;
}
.advisory-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--chip-blue);
margin-bottom: 10px;
}
.advisory-eyebrow::before {
content: "";
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--blue);
box-shadow: 0 0 8px rgba(91, 104, 255, 0.55);
}
.advisory-title {
font-size: 20px;
font-weight: 700;
line-height: 1.25;
color: var(--t0);
}
.advisory-summary {
margin-top: 10px;
color: var(--t1);
font-size: 13px;
line-height: 1.75;
}
.advisory-pillrow {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.advisory-pill {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid rgba(91, 104, 255, 0.22);
background: rgba(91, 104, 255, 0.09);
color: var(--chip-blue);
border-radius: 999px;
padding: 6px 12px;
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* ===== 5-cards/_stock.css ===== */
/* ==========================================================================
Stock cards, table and chart
Extracted from the legacy index.html monolith (source lines 5676-6484).
========================================================================== */
/* ══════════════════════════════════════════════════════════════════
STOCK CARDS
══════════════════════════════════════════════════════════════════ */
.stock-grid {
display: grid;
gap: 12px;
}
.stock-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 16px;
overflow: hidden;
transition:
background 0.25s,
border-color 0.25s,
box-shadow 0.25s,
transform 0.25s;
}
.stock-card:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(91, 104, 255, 0.22);
box-shadow: 0 8px 36px rgba(91, 104, 255, 0.09);
transform: translateY(-1px);
}
.stock-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 16px 18px 14px;
background: linear-gradient(
135deg,
rgba(91, 104, 255, 0.07),
rgba(196, 79, 240, 0.04)
);
border-bottom: 1px solid transparent;
transition: border-color 0.15s;
}
.stock-card.expanded .stock-card-head {
border-bottom-color: rgba(255, 255, 255, 0.06);
}
.stock-title-wrap {
min-width: 0;
}
.stock-rank {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--t2);
margin-bottom: 6px;
}
.stock-title {
font-size: 16px;
font-weight: 700;
color: var(--t0);
line-height: 1.25;
}
.stock-subtitle {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.stock-chip {
display: inline-flex;
align-items: center;
min-height: 22px;
border-radius: 999px;
padding: 2px 9px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.07);
color: var(--t1);
border: 1px solid rgba(255, 255, 255, 0.09);
}
.stock-chip.code {
color: var(--chip-blue);
background: var(--chip-blue-bg);
}
.stock-chip.zone-buy {
color: var(--chip-green);
background: var(--chip-green-bg);
}
.stock-chip.zone-hold {
color: var(--chip-yellow);
background: var(--chip-yellow-bg);
}
.stock-chip.zone-active {
color: var(--chip-purple);
background: var(--chip-purple-bg);
}
.stock-price-box {
min-width: 120px;
text-align: right;
}
.stock-price-label {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--t2);
}
.stock-price-value {
margin-top: 6px;
font-size: 20px;
line-height: 1;
font-weight: 700;
color: var(--t0);
}
.stock-projection {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
flex-wrap: wrap;
}
.stock-projection-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(40, 224, 140, 0.1);
border: 1px solid rgba(40, 224, 140, 0.22);
color: var(--chip-green);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.03em;
}
.stock-projection-label {
font-size: 11px;
color: var(--t2);
}
.stock-expand-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
color: var(--t1);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
flex-shrink: 0;
align-self: flex-start;
margin-top: 6px;
font-family: inherit;
}
.stock-expand-btn:hover {
background: rgba(91, 104, 255, 0.12);
border-color: rgba(91, 104, 255, 0.32);
color: var(--t0);
}
.stock-expand-btn .expand-arrow {
display: inline-block;
transition: transform 0.2s;
font-size: 9px;
}
.stock-card.expanded .stock-expand-btn .expand-arrow {
transform: rotate(180deg);
}
.stock-card-body {
padding: 14px 18px 16px;
display: grid;
gap: 12px;
}
.stock-card-body.collapsed {
display: none;
}
.action-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.action-box {
padding: 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(255, 255, 255, 0.03);
}
.action-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--t2);
}
.action-value {
margin-top: 8px;
font-size: 16px;
font-weight: 700;
color: var(--t0);
}
.action-box.entry {
background: rgba(91, 104, 255, 0.08);
border-color: rgba(91, 104, 255, 0.15);
}
.action-box.target {
background: rgba(40, 224, 140, 0.08);
border-color: rgba(40, 224, 140, 0.15);
}
.action-box.stop {
background: rgba(255, 58, 92, 0.08);
border-color: rgba(255, 58, 92, 0.15);
}
.metric-grid,
.recommendation-section-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.recommendation-panel,
.metric-card {
border-radius: 10px;
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.025);
}
.recommendation-panel-title {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--chip-yellow);
margin-bottom: 10px;
}
.recommendation-row {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 5px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.recommendation-row:last-child {
border-bottom: 0;
}
.recommendation-key {
color: var(--t1);
font-size: 11px;
}
.recommendation-value {
color: var(--t0);
font-size: 11px;
font-weight: 600;
text-align: right;
}
.recommendation-note-grid {
/* Note sections are narrative/bullet prose (e.g. "Contextual Breakdown", "Key
Takeaways"), not tabular key-value data like .recommendation-section-grid — forcing
them into equal-width boxes side by side reads as cramped and disjointed rather than
like a real answer. Stack them full-width instead; the mobile breakpoint below
already proved this layout works fine, this just makes it the default everywhere. */
display: flex;
flex-direction: column;
gap: 10px;
}
.metric-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--t2);
}
.metric-value {
margin-top: 7px;
font-size: 15px;
line-height: 1.15;
font-weight: 700;
color: var(--t0);
}
.metric-sub {
margin-top: 5px;
font-size: 11px;
color: var(--t1);
}
.stock-note {
padding: 12px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.025);
}
.stock-note-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--chip-blue);
margin-bottom: 8px;
}
.stock-note-text {
color: var(--t1);
font-size: 12px;
line-height: 1.7;
}
.stock-note.conclusion .stock-note-text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.research-notes {
padding: 14px 16px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
}
.research-notes h4 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--t2);
margin-bottom: 10px;
}
/* Group section */
.group-section {
margin-bottom: 4px;
}
.group-section-header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 6px 10px;
}
.group-section-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--t1);
}
.group-section-badge {
font-size: 11px;
color: var(--chip-green);
background: var(--chip-green-bg);
padding: 2px 9px;
border-radius: 999px;
font-weight: 500;
}
.empty-group-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-left: 3px solid rgba(245, 213, 71, 0.5);
border-radius: 14px;
overflow: hidden;
margin-bottom: 16px;
}
.empty-group-head {
padding: 14px 18px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 10px;
}
.empty-group-title {
font-size: 14px;
font-weight: 600;
color: var(--t0);
letter-spacing: 0.01em;
}
.empty-group-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.eg-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.eg-pill.cap {
background: var(--chip-blue-bg);
color: var(--chip-blue);
}
.eg-pill.sector {
background: var(--chip-purple-bg);
color: var(--chip-purple);
}
.eg-pill.count {
background: var(--chip-yellow-bg);
color: var(--chip-yellow);
}
.empty-group-body {
padding: 18px;
display: flex;
align-items: flex-start;
gap: 14px;
}
.empty-group-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--chip-yellow-bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
margin-top: 1px;
color: var(--chip-yellow);
}
.empty-group-text {
flex: 1;
}
.empty-group-heading {
font-size: 13px;
font-weight: 600;
color: var(--t0);
margin-bottom: 5px;
line-height: 1.4;
}
.empty-group-sub {
font-size: 12px;
color: var(--t1);
line-height: 1.6;
margin: 0;
}
/* ── Stock recommendations table ─────────────────────────────────── */
/* Wide bubble for stock responses. Its row (.msg-row.wide-row) is capped at
768px to match the composer (4-features/_composer.css's .input-bar-inner),
so 100% here already resolves to that — this just keeps the bubble from
exceeding its row on the rare wider viewport. */
.bubble.ai.wide {
max-width: 100%;
}
.stock-table-wrap {
overflow-x: auto;
margin-bottom: 4px;
-webkit-overflow-scrolling: touch;
}
.stock-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 8px;
font-size: 13px;
/* A floor so money columns don't cram — not a fixed width. At 920px this forced
horizontal scroll on every 1280px laptop, hiding the right-most column (which for
a screener is the very metric the user filtered on). */
min-width: 780px;
}
.stock-table thead th {
padding: 4px 9px 10px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--t2);
white-space: nowrap;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.stock-table thead th:nth-child(n + 5):not(:last-child) {
text-align: right;
}
/* Data rows — each its own card */
.stock-table .st-data-row td {
padding: 13px 9px;
vertical-align: middle;
background: rgba(255, 255, 255, 0.03);
border-top: 1px solid rgba(255, 255, 255, 0.07);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
transition:
background 0.15s,
border-color 0.15s;
}
.stock-table .st-data-row td:first-child {
border-left: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 12px 0 0 12px;
}
.stock-table .st-data-row td:last-child {
border-right: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 0 12px 12px 0;
}
.stock-table .st-data-row:hover td {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(91, 104, 255, 0.22);
}
.stock-table td:nth-child(n + 5):not(:last-child) {
text-align: right;
}
/* Detail expand row */
.stock-table .st-detail-row td {
padding: 0 4px 6px;
border: 0;
background: transparent;
}
.st-detail-panel {
border: 1px solid rgba(91, 104, 255, 0.15);
background: rgba(91, 104, 255, 0.04);
border-radius: 12px;
padding: 16px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
.st-detail-section-title {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
margin-bottom: 10px;
}
.st-detail-section-title.tech {
color: #93b4ff;
}
.st-detail-section-title.fund {
color: var(--chip-green);
}
.st-detail-section-title.thesis {
color: var(--chip-yellow);
}
.st-detail-kv {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 4px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.st-detail-kv:last-child {
border-bottom: 0;
}
.st-detail-k {
color: var(--t2);
font-size: 11px;
white-space: nowrap;
}
.st-detail-v {
color: var(--t0);
font-size: 11px;
font-weight: 600;
text-align: right;
}
.st-detail-thesis {
color: var(--t1);
font-size: 12px;
line-height: 1.8;
}
/* ── Stock Chart ── */
.stock-chart-wrap {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
grid-column: 1 / -1;
}
.stock-chart-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.stock-chart-title {
font-size: 11px;
font-weight: 700;
color: var(--t2);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stock-chart-ranges {
display: flex;
gap: 4px;
}
.scr-btn {
padding: 3px 9px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
color: var(--t2);
transition: all 0.15s;
}
.scr-btn:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--t0);
}
.scr-btn.active {
background: rgba(91, 104, 255, 0.15);
border-color: rgba(91, 104, 255, 0.35);
color: #7886ff;
}
.stock-chart-canvas-wrap {
position: relative;
width: 100%;
height: 110px;
}
.stock-chart-canvas-wrap canvas {
width: 100% !important;
height: 100% !important;
cursor: crosshair;
}
.stock-chart-stats {
display: flex;
gap: 16px;
margin-top: 8px;
}
.scs-item {
display: flex;
flex-direction: column;
gap: 1px;
}
.scs-label {
font-size: 9px;
color: var(--t2);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.scs-value {
font-size: 12px;
font-weight: 700;
}
/* Details button */
.st-detail-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
color: var(--t1);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
white-space: nowrap;
}
.st-detail-btn:hover {
background: rgba(91, 104, 255, 0.12);
border-color: rgba(91, 104, 255, 0.3);
color: var(--t0);
}
.st-detail-btn.open {
background: rgba(91, 104, 255, 0.12);
border-color: rgba(91, 104, 255, 0.3);
color: var(--t0);
}
.st-num {
color: var(--t2);
font-size: 11px;
width: 28px;
}
.st-portfolio-cell {
width: 40px;
}
.st-add-btn {
width: 26px;
height: 26px;
border-radius: 50%;
flex-shrink: 0;
background: rgba(91, 104, 255, 0.12);
border: 1px solid rgba(91, 104, 255, 0.3);
color: #9aa5ff;
font-size: 15px;
font-weight: 600;
line-height: 1;
font-family: inherit;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
background 0.15s,
border-color 0.15s,
color 0.15s;
}
.st-add-btn:hover {
background: rgba(91, 104, 255, 0.22);
border-color: rgba(91, 104, 255, 0.45);
color: #fff;
}
.st-name-cell {
min-width: 130px;
}
.st-name-main {
font-weight: 700;
font-size: 14px;
color: var(--t0);
line-height: 1.2;
}
.st-name-code {
font-size: 10px;
color: var(--t2);
margin-top: 3px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.st-action-cell {
white-space: nowrap;
}
.st-action-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.03em;
}
.st-action-pill.buy {
background: var(--chip-green-bg);
color: var(--chip-green);
}
.st-action-pill.short {
background: var(--chip-red-bg);
color: var(--chip-red);
}
.st-action-pill.hold {
background: var(--chip-yellow-bg);
color: var(--chip-yellow);
}
.st-action-pill.exit {
background: var(--chip-red-bg);
color: var(--chip-red);
}
.st-action-pill.neutral {
background: rgba(255, 255, 255, 0.06);
color: var(--t2);
}
.st-action-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.st-money {
font-weight: 600;
font-size: 13px;
white-space: nowrap;
}
.st-money.entry {
color: #93b4ff;
}
.st-money.target {
color: var(--chip-green);
}
.st-money.sl {
color: #ff3a5c;
}
.stock-table td[data-label="Trigger Zone"] {
min-width: 150px;
}
.stock-table td[data-label="Target Price"],
.stock-table td[data-label="Protective SL"] {
min-width: 95px;
}
.st-upside-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
background: var(--chip-green-bg);
color: var(--chip-green);
}
.st-upside-pill.short {
background: var(--chip-red-bg);
color: var(--chip-red);
}
.st-tenure-val {
color: var(--t1);
font-size: 12px;
}
.advisory-budget-note {
font-size: 13px;
color: var(--t2);
background: rgba(147, 180, 255, 0.08);
border-left: 3px solid #93b4ff;
padding: 6px 10px;
border-radius: 0 4px 4px 0;
margin-bottom: 10px;
}
.st-dash {
color: var(--t2);
}
/* ===== 5-cards/_track-record.css ===== */
/* ==========================================================================
Insight / track record
Extracted from the legacy index.html monolith (source lines 6485-6665).
========================================================================== */
/* ══════════════════════════════════════════════════════════════════
INSIGHT / TRACK RECORD
══════════════════════════════════════════════════════════════════ */
.insight-layout {
display: grid;
gap: 14px;
}
.insight-hero {
border: 1px solid rgba(91, 104, 255, 0.16);
background: linear-gradient(
135deg,
rgba(91, 104, 255, 0.07),
rgba(196, 79, 240, 0.04)
);
border-radius: 16px;
padding: 20px;
}
.insight-kicker {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--chip-blue);
margin-bottom: 8px;
}
.insight-title {
font-size: 22px;
line-height: 1.2;
font-weight: 700;
color: var(--t0);
margin-bottom: 10px;
}
.insight-summary {
color: var(--t1);
line-height: 1.7;
font-size: 13px;
}
.insight-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
align-items: stretch;
}
.info-card {
border-radius: 14px;
padding: 14px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.03);
min-height: 110px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.info-card.winner {
background: rgba(40, 224, 140, 0.07);
border-color: rgba(40, 224, 140, 0.16);
}
.info-card.loser {
background: rgba(255, 58, 92, 0.07);
border-color: rgba(255, 58, 92, 0.16);
}
.info-card.neutral {
background: rgba(91, 104, 255, 0.07);
border-color: rgba(91, 104, 255, 0.16);
}
.info-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--t2);
}
.info-value {
margin-top: 8px;
font-size: 20px;
font-weight: 700;
color: var(--t0);
line-height: 1.1;
}
.info-sub {
margin-top: 6px;
font-size: 11px;
line-height: 1.5;
color: var(--t1);
}
.section-card {
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
border-radius: 14px;
padding: 16px;
}
.section-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--t2);
margin-bottom: 12px;
}
.text-blocks {
display: grid;
gap: 10px;
}
.text-row {
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
border-radius: 10px;
padding: 12px 14px;
color: var(--t0);
line-height: 1.7;
font-size: 13px;
}
.detail-grid {
display: grid;
gap: 10px;
}
.detail-card {
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
border-radius: 10px;
padding: 14px;
}
.detail-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--t2);
margin-bottom: 8px;
}
.detail-text {
color: var(--t0);
font-size: 13px;
line-height: 1.75;
}
.trade-list {
display: grid;
gap: 10px;
}
.trade-row {
display: grid;
grid-template-columns: 1.6fr repeat(4, 1fr);
gap: 10px;
align-items: center;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
border-radius: 12px;
padding: 12px 14px;
}
.trade-main {
min-width: 0;
}
.trade-name {
font-size: 14px;
font-weight: 700;
color: var(--t0);
}
.trade-code {
margin-top: 3px;
font-size: 11px;
color: var(--t1);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.trade-metric {
min-width: 0;
}
.trade-metric-label {
font-size: 10px;
color: var(--t2);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.trade-metric-value {
margin-top: 5px;
font-size: 13px;
font-weight: 600;
color: var(--t0);
}
/* ===== 4-features/_rich-content.css ===== */
/* ==========================================================================
Rich markdown content
Extracted from the legacy index.html monolith (source lines 6666-6754).
========================================================================== */
/* ══════════════════════════════════════════════════════════════════
RICH CONTENT (markdown-rendered LLM text)
══════════════════════════════════════════════════════════════════ */
.rich-content {
color: var(--t0);
font-size: 14px;
line-height: 1.75;
}
.rich-content .rc-h2 {
font-size: 16px;
font-weight: 700;
color: var(--t0);
margin: 16px 0 7px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.rich-content .rc-h3 {
font-size: 15px;
font-weight: 600;
color: var(--t0);
margin: 14px 0 5px;
}
.rich-content .rc-h4 {
font-size: 13px;
font-weight: 600;
color: var(--chip-blue);
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 12px 0 4px;
}
.rich-content strong {
font-weight: 700;
color: var(--t0);
}
.rich-content em {
font-style: italic;
color: var(--t1);
}
.rich-content .rc-p {
margin: 0 0 10px;
}
.rich-content .rc-p:last-child {
margin-bottom: 0;
}
/* text_block (cards/blocks.js's renderTextBlock) only — the WayaX typography-hierarchy
spec applied scoped to this one template: Sora/700/-0.01em for in-content section
headers (typography.h3) and Inter/400/0em for body copy (typography.body), rather
than changing .rich-content's shared defaults that renderGeneralQaCard etc. also use. */
.tb-rich {
font-family: var(--wx-font-ui);
font-size: 13px;
font-weight: 400;
line-height: 1.45;
letter-spacing: 0em;
}
.tb-rich .rc-h2 {
font-family: var(--wx-font-brand);
font-size: 16px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
}
.tb-rich .rc-p,
.tb-rich .rc-ul li,
.tb-rich .rc-ol li {
font-family: var(--wx-font-ui);
font-size: 13px;
font-weight: 400;
line-height: 1.45;
letter-spacing: 0em;
}
.rich-content .rc-ul,
.rich-content .rc-ol {
margin: 8px 0 10px 4px;
padding-left: 18px;
/* Tailwind's Preflight reset (frontend/templates/index.html loads the CDN build) sets
list-style: none on every ul/ol by default — without restoring it explicitly here, a
real /- structure (built correctly by ui/markdown.js's block parser) rendered
with no visible bullet/number glyph at all, reading as indented plain paragraphs
instead of a list even though the markup was already correct. */
list-style: disc;
}
.rich-content .rc-ol {
list-style: decimal;
}
.rich-content .rc-ul li,
.rich-content .rc-ol li {
margin: 5px 0;
line-height: 1.65;
}
.rich-content .rc-ul li::marker {
color: var(--chip-blue);
}
.rich-content .rc-ol li::marker {
color: var(--chip-blue);
font-weight: 600;
}
/* Generic insight card (FAQ, market info, educational, sector analysis etc.) */
.gi-card {
display: flex;
flex-direction: column;
gap: 14px;
}
.gi-header {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.gi-title {
font-size: 16px;
font-weight: 700;
color: var(--t0);
line-height: 1.3;
flex: 1;
}
.gi-body {
}
.gi-body .rich-content {
font-size: 14px;
}
/* ===== 4-features/_response-blocks.css ===== */
/* ==========================================================================
Response block cards (cards/blocks.js) — the global rules from
templates/new_template_ui.html that Tailwind utilities alone don't carry.
Everything is scoped under .wbn-block so the rest of the app keeps its own
palette (the reference applied its rose override page-wide).
========================================================================== */
/* Answer card: slightly darker outline than Tailwind's slate-200, flat surface. */
.wbn-block .wbn-card {
border-color: #cbd5e1 !important;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03) !important;
}
/* WayaX red (#FE587C) replaces Tailwind's rose/red inside answer cards. */
.wbn-block .text-rose-600,
.wbn-block .text-rose-700,
.wbn-block .text-rose-800,
.wbn-block .text-red-600,
.wbn-block .text-red-700 {
color: #fe587c !important;
}
.wbn-block .border-rose-200,
.wbn-block .border-rose-300,
.wbn-block .border-red-200 {
border-color: rgba(254, 88, 124, 0.35) !important;
}
.wbn-block .bg-rose-50,
.wbn-block .bg-red-50 {
background-color: rgba(254, 88, 124, 0.08) !important;
}
/* WayaX call tags — BUY / HOLD / EXIT (SELL shares EXIT's palette). */
.og-tag-buy {
background-color: #123f35 !important;
border: 1px solid #059669 !important;
color: #8ff3bc !important;
font-weight: 700 !important;
}
.og-tag-hold {
background-color: #524319 !important;
border: 1px solid #d97706 !important;
color: #f5da72 !important;
font-weight: 700 !important;
}
.og-tag-exit {
background-color: #54242c !important;
border: 1px solid #fe587c !important;
color: #ff94a0 !important;
font-weight: 700 !important;
}
/* Tables: Inter tabular figures, pastel-blue zebra rows. */
.wbn-block table {
font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
font-feature-settings: "tnum" 1, "cv05" 1;
font-variant-numeric: tabular-nums;
}
.wbn-block .table-zebra tbody tr:nth-child(odd) {
background-color: #ffffff;
}
.wbn-block .table-zebra tbody tr:nth-child(even) {
background-color: rgba(220, 238, 253, 0.4);
}
.wbn-block .table-zebra tbody tr:hover {
background-color: rgba(220, 238, 253, 0.65);
}
/* Overview "+" tabs — one open at a time (see _wbToggleTab in blocks.js). */
.overview-tab-btn {
background-color: #f8fafc;
color: #334155;
border: 1px solid #e2e8f0;
transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}
.overview-tab-btn:hover {
background-color: #ebf5ff;
border-color: #93c5fd;
color: #0369a1;
box-shadow: 0 0 0 2px rgba(107, 182, 243, 0.22), 0 2px 6px -1px rgba(14, 165, 233, 0.12);
transform: translateY(-0.5px);
}
.overview-tab-btn.tab-active {
background-color: #dceefd;
color: #0f172a;
border-color: #93c5fd;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
font-weight: 600;
}
.overview-tab-btn.tab-active:hover {
background-color: #cbe6fd;
border-color: #60a5fa;
color: #0c4a6e;
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3), 0 3px 8px -1px rgba(59, 130, 246, 0.18);
}
/* Markdown text blocks read like the reference's structured text box: Sora
section headings split by a hairline, slate "•" bullets, and a quoted
paragraph drawn as the purple-edged Key Takeaway callout. */
.wbn-block .tb-rich h1,
.wbn-block .tb-rich h2,
.wbn-block .tb-rich h3,
.wbn-block .tb-rich h4 {
font-family: var(--wx-font-brand), "Sora", sans-serif;
font-weight: 600;
font-size: 14.5px;
letter-spacing: -0.01em;
color: #0f172a;
margin: 0 0 0.5rem;
}
.wbn-block .tb-rich > h1:first-child,
.wbn-block .tb-rich > h2:first-child,
.wbn-block .tb-rich > h3:first-child {
font-size: 15px;
}
.wbn-block .tb-rich > :is(h1, h2, h3, h4):not(:first-child) {
border-top: 1px solid #e2e8f0;
padding-top: 0.75rem;
margin-top: 1rem;
}
.wbn-block .tb-rich p {
font-size: 14px;
line-height: 1.65;
color: #334155;
}
.wbn-block .tb-rich ul {
list-style: none;
padding-left: 0.25rem;
}
.wbn-block .tb-rich ul > li {
position: relative;
padding-left: 1rem;
font-size: 13.5px;
line-height: 1.65;
color: #334155;
margin: 0.35rem 0;
}
.wbn-block .tb-rich ul > li::before {
content: "•";
position: absolute;
left: 0;
color: #94a3b8;
}
.wbn-block .tb-rich strong {
color: #0f172a;
font-weight: 600;
}
.wbn-block .tb-rich blockquote {
margin: 1rem 0 0;
padding: 0.875rem;
border-radius: 0.75rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-left: 3.5px solid #c172f1;
font-size: 13.5px;
color: #334155;
}
/* The shared stock-list table (cards/stock.js) inside a list card gets the same
zebra rows and header band as the reference's industry table. */
.wbn-block .wbn-list-table thead tr {
background-color: rgba(248, 250, 252, 0.5);
}
.wbn-block .wbn-list-table tbody tr:nth-child(even) {
background-color: rgba(220, 238, 253, 0.35);
}
.wbn-block .wbn-list-table tbody tr:hover {
background-color: rgba(220, 238, 253, 0.6);
}
.wbn-block .wbn-list-table tbody td .font-bold {
font-family: var(--wx-font-brand), "Sora", sans-serif;
}
/* ===== 5-cards/_education.css ===== */
/* ==========================================================================
Education card
Extracted from the legacy index.html monolith (source lines 6755-6866).
========================================================================== */
/* ── Education Card ── */
.edu-card {
font-family: inherit;
display: flex;
flex-direction: column;
gap: 0;
}
.edu-card-header {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding-bottom: 12px;
border-bottom: 1px solid var(--border1);
margin-bottom: 14px;
}
.edu-chip {
background: rgba(40, 224, 140, 0.12);
color: #28e08c;
border: 1px solid rgba(40, 224, 140, 0.25);
border-radius: 6px;
padding: 2px 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
flex-shrink: 0;
}
.edu-title {
font-size: 16px;
font-weight: 700;
color: var(--t0);
line-height: 1.3;
flex: 1;
}
.edu-definition {
font-size: 14px;
color: var(--t1);
line-height: 1.75;
}
.edu-footer {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 14px;
}
.edu-more-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
background: rgba(40, 224, 140, 0.07);
border: 1px solid rgba(40, 224, 140, 0.22);
border-radius: 9px;
color: #28e08c;
font-size: 12px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition:
background 0.15s,
border-color 0.15s;
}
.edu-more-btn:hover {
background: rgba(40, 224, 140, 0.13);
border-color: rgba(40, 224, 140, 0.4);
}
.edu-more-btn .edu-arrow {
font-size: 10px;
transition: transform 0.25s;
display: inline-block;
}
.edu-details {
display: none;
margin-top: 16px;
border-top: 1px solid var(--border1);
padding-top: 16px;
display: none;
flex-direction: column;
gap: 16px;
}
.edu-details.open {
display: flex;
}
.edu-section {
display: flex;
flex-direction: column;
gap: 6px;
}
.edu-section-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
}
.edu-section-label.lbl-why {
color: #7886ff;
}
.edu-section-label.lbl-ex {
color: #fb923c;
}
.edu-section-label.lbl-mistake {
color: #ef4444;
}
.edu-section-label.lbl-key {
color: #28e08c;
}
.edu-section-text {
font-size: 13px;
color: var(--t1);
line-height: 1.7;
}
/* ===== 5-cards/_fno-strategy.css ===== */
/* ==========================================================================
F&O strategy card
Extracted from the legacy index.html monolith (source lines 6867-7050).
========================================================================== */
/* ── F&O Strategy Card ───────────────────────────────────────── */
.stg-card {
font-family: inherit;
display: flex;
flex-direction: column;
gap: 0;
}
.stg-header {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding-bottom: 12px;
border-bottom: 1px solid var(--border1);
margin-bottom: 14px;
}
.stg-chip {
background: var(--chip-purple-bg);
color: var(--chip-purple);
border: 1px solid rgba(196, 79, 240, 0.3);
border-radius: 6px;
padding: 2px 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
flex-shrink: 0;
}
.stg-outlook {
border: 1px solid;
border-radius: 6px;
padding: 2px 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
flex-shrink: 0;
}
.stg-difficulty {
background: rgba(255, 255, 255, 0.06);
color: var(--t2);
border: 1px solid var(--border1);
border-radius: 6px;
padding: 2px 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.5px;
flex-shrink: 0;
}
.stg-meta-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 12px;
}
.stg-meta-tag {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 6px;
background: rgba(51, 215, 229, 0.08);
color: var(--cyan);
border: 1px solid rgba(51, 215, 229, 0.18);
}
.stg-chart-wrap {
margin-top: 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border1);
border-radius: 12px;
padding: 12px 12px 6px;
}
.stg-chart {
width: 100%;
height: auto;
display: block;
}
.stg-chart-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--t3, var(--t2));
margin-bottom: 8px;
}
.stg-chart-hint {
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--t2);
}
.stg-metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px;
margin-top: 12px;
}
.stg-metric {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border1);
border-radius: 10px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 3px;
}
.stg-metric-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
color: var(--t2);
}
.stg-metric-val {
font-size: 15px;
font-weight: 700;
}
.stg-metric-val.stg-pos {
color: var(--green);
}
.stg-metric-val.stg-neg {
color: var(--red);
}
.stg-metric-val.stg-be {
color: var(--yellow);
}
.stg-metric-val.stg-neutral {
color: var(--t0);
}
.stg-metric-sub {
font-size: 10px;
color: var(--t2);
}
.stg-legs {
margin-top: 14px;
}
.stg-legs-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.stg-legs-table th {
text-align: left;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
color: var(--t2);
padding: 6px 10px;
border-bottom: 1px solid var(--border1);
}
.stg-legs-table td {
padding: 8px 10px;
color: var(--t1);
border-bottom: 1px solid var(--border0);
}
.stg-legs-table tr:last-child td {
border-bottom: none;
}
.stg-leg-action {
display: inline-block;
padding: 2px 9px;
border-radius: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
}
.stg-leg-action.stg-buy {
background: var(--chip-green-bg);
color: var(--chip-green);
border: 1px solid rgba(40, 224, 140, 0.25);
}
.stg-leg-action.stg-sell {
background: var(--chip-red-bg);
color: var(--chip-red);
border: 1px solid rgba(255, 58, 92, 0.25);
}
.stg-disclaimer {
margin-top: 14px;
font-size: 11px;
color: var(--t2);
line-height: 1.5;
font-style: italic;
}
/* ===== 5-cards/_quarterly.css ===== */
/* ==========================================================================
Quarterly results
Extracted from the legacy index.html monolith (source lines 7051-7148).
========================================================================== */
/* ── Quarterly Results Card ──────────────────────────────────── */
.qr-chip {
background: var(--chip-blue-bg);
color: var(--chip-blue);
border: 1px solid rgba(91, 104, 255, 0.3);
border-radius: 6px;
padding: 2px 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
flex-shrink: 0;
}
.qr-quarter-chip {
background: rgba(51, 215, 229, 0.1);
color: var(--cyan);
border: 1px solid rgba(51, 215, 229, 0.28);
border-radius: 6px;
padding: 2px 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
flex-shrink: 0;
}
.qr-metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 8px;
margin-top: 14px;
}
.qr-metric {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border1);
border-radius: 10px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.qr-metric-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.7px;
text-transform: uppercase;
color: var(--t2);
}
.qr-metric-val {
font-size: 15px;
font-weight: 700;
color: var(--t0);
}
.qr-metric-deltas {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.qr-delta-tag {
font-size: 10px;
color: var(--t2);
display: inline-flex;
align-items: center;
gap: 3px;
}
.qr-delta {
font-weight: 700;
font-size: 10px;
}
.qr-delta.qr-up {
color: var(--green);
}
.qr-delta.qr-down {
color: var(--red);
}
.qr-trends {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 10px;
margin-top: 14px;
}
.qr-trend {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border1);
border-radius: 12px;
padding: 12px 12px 6px;
}
.qr-trend-svg {
width: 100%;
height: auto;
display: block;
}
.qr-link {
color: var(--chip-blue);
text-decoration: none;
font-weight: 600;
}
.qr-link:hover {
text-decoration: underline;
}
/* ===== 5-cards/_fundamental.css ===== */
/* ==========================================================================
Fundamental analysis
Extracted from the legacy index.html monolith (source lines 7149-7461).
========================================================================== */
/* ── Fundamental Analysis Card ───────────────────────────────── */
.fa-card {
font-family: inherit;
display: flex;
flex-direction: column;
gap: 0;
background: var(--card-bg, rgba(255, 255, 255, 0.04));
border: 1px solid var(--border1);
border-radius: 16px;
overflow: hidden;
}
.fa-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 20px 20px 16px;
border-bottom: 1px solid var(--border1);
}
.fa-company-info {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.fa-company-name {
font-size: 17px;
font-weight: 700;
color: var(--t0);
}
.fa-company-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.fa-tag {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.06);
color: var(--t2);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.fa-price-row {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
}
.fa-price-label {
font-size: 10px;
color: var(--t3);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.fa-price {
font-size: 13px;
color: var(--t1);
font-weight: 600;
}
.fa-score-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.fa-score-ring-wrap {
position: relative;
width: 88px;
height: 88px;
flex-shrink: 0;
}
.fa-score-ring {
width: 88px;
height: 88px;
}
.fa-score-inner {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
white-space: nowrap;
line-height: 1.1;
}
.fa-score-num {
font-size: 19px;
font-weight: 800;
}
.fa-score-denom {
font-size: 9px;
color: var(--t3);
font-weight: 600;
}
.fa-score-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4px;
}
.fa-score-avail {
font-size: 10px;
color: var(--t3);
}
.fa-categories {
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 8px;
border-bottom: 1px solid var(--border1);
}
.fa-cat-row {
display: flex;
align-items: center;
gap: 10px;
}
.fa-cat-name {
font-size: 11px;
color: var(--t2);
font-weight: 600;
width: 110px;
flex-shrink: 0;
}
.fa-cat-bar-wrap {
flex: 1;
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.07);
}
.fa-cat-bar {
height: 100%;
border-radius: 3px;
transition: width 0.6s ease;
}
.fa-cat-score {
font-size: 11px;
font-weight: 700;
width: 30px;
text-align: right;
flex-shrink: 0;
}
.fa-summary {
padding: 14px 20px;
font-size: 13px;
color: var(--t2);
line-height: 1.65;
border-bottom: 1px solid var(--border1);
}
.fa-footer {
padding: 12px 20px;
display: flex;
justify-content: flex-end;
}
.fa-detail-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: 10px;
background: rgba(91, 104, 255, 0.08);
border: 1px solid rgba(91, 104, 255, 0.2);
color: var(--chip-blue, #7886ff);
font-size: 12px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all 0.18s;
}
.fa-detail-btn:hover {
background: rgba(91, 104, 255, 0.15);
border-color: rgba(91, 104, 255, 0.4);
}
.fa-arrow {
font-size: 10px;
display: inline-block;
transition: transform 0.25s;
}
.fa-details {
display: none;
overflow-x: auto;
}
.fa-details.open {
display: block;
}
.fa-table-wrap {
padding: 0 20px 20px;
}
.fa-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
min-width: 500px;
}
.fa-th {
text-align: left;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--t3);
padding: 10px 10px 8px;
border-bottom: 1px solid var(--border1);
position: sticky;
top: 0;
background: var(--bg, #0f1117);
}
.fa-table td {
padding: 7px 10px;
vertical-align: middle;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.fa-td-id {
color: var(--t3);
font-size: 11px;
width: 28px;
min-width: 28px;
white-space: nowrap;
text-align: center;
}
.fa-td-name {
color: var(--t1);
font-weight: 500;
}
.fa-td-cat {
color: var(--t3);
font-size: 11px;
}
.fa-td-val {
color: var(--t1);
font-weight: 600;
font-variant-numeric: tabular-nums;
text-align: right;
}
.fa-td-score {
text-align: center;
width: 70px;
}
.fa-score-high {
color: #28e08c;
font-weight: 700;
font-size: 12px;
}
.fa-score-mid {
color: #f59e0b;
font-weight: 700;
font-size: 12px;
}
.fa-score-low {
color: #ef4444;
font-weight: 700;
font-size: 12px;
}
.fa-score-na {
color: var(--t3);
font-size: 11px;
}
/* Details toggle button */
.details-toggle-btn {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 14px;
padding: 7px 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: var(--t1);
font-size: 13px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: all 0.18s;
user-select: none;
}
.details-toggle-btn:hover {
background: rgba(91, 104, 255, 0.1);
border-color: rgba(91, 104, 255, 0.3);
color: var(--chip-blue);
}
.details-toggle-btn .dtb-arrow {
display: inline-block;
transition: transform 0.22s;
font-size: 11px;
}
.details-toggle-btn.dtb-open .dtb-arrow {
transform: rotate(180deg);
}
/* Details panel */
.details-panel {
overflow: hidden;
max-height: 0;
transition:
max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.25s ease;
opacity: 0;
}
.details-panel.dtb-open {
max-height: 3600px;
opacity: 1;
}
.details-panel-inner {
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
margin-top: 14px;
}
/* ===== 4-features/_clarify-popup.css ===== */
/* ==========================================================================
Follow-up popup
Extracted from the legacy index.html monolith (source lines 7462-7702).
========================================================================== */
/* ══════════════════════════════════════════════════════════════════
FOLLOW-UP POPUP (attached above input bar)
══════════════════════════════════════════════════════════════════ */
@keyframes slideUpIn {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideDownOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(10px);
}
}
.fp-popup {
background: #16161f;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
margin-bottom: 10px;
overflow: hidden;
animation: slideUpIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.fp-popup.hiding {
animation: slideDownOut 0.22s ease forwards;
}
/* Floats over the card's own top-right corner rather than sharing a header row with
the pill/title — there's only ever one card in the stack now, so it doesn't need to
sit in a flex row alongside per-card content that a stack of N cards would repeat. */
.fp-close-btn--floating {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
}
.fp-close-btn {
width: 26px;
height: 26px;
border: none;
background: transparent;
color: var(--t2);
cursor: pointer;
border-radius: 6px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
font-family: inherit;
}
.fp-close-btn:hover {
background: rgba(255, 255, 255, 0.07);
color: var(--t0);
}
.fp-stack {
position: relative;
padding: 18px 18px 6px;
will-change: opacity, transform;
max-height: 60vh;
overflow-y: auto;
}
.fp-step-pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #7c3aed;
background: rgba(139, 92, 246, 0.1);
border: 1px solid rgba(139, 92, 246, 0.25);
border-radius: 999px;
padding: 3px 10px;
margin-bottom: 8px;
}
.fp-question {
font-size: 15px;
font-weight: 600;
color: var(--t0);
line-height: 1.45;
/* Room for the floating close button on the first card, before the reflow below
pushes later content clear of it. */
padding-right: 28px;
}
.fp-subtitle {
font-size: 12.5px;
font-weight: 400;
color: var(--t2);
line-height: 1.5;
margin-top: 4px;
}
.fp-card-divider {
height: 1px;
background: rgba(255, 255, 255, 0.08);
margin: 14px 0 12px;
}
.fp-option {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 14px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.07);
margin-bottom: 8px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.fp-option:last-child {
margin-bottom: 0;
}
.fp-option:hover {
background: rgba(255, 255, 255, 0.05);
}
.fp-option.selected {
background: rgba(139, 92, 246, 0.12);
border-color: rgba(139, 92, 246, 0.4);
cursor: default;
}
.fp-option.unavailable {
opacity: 0.4;
cursor: not-allowed;
}
.fp-num {
width: 26px;
height: 26px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: var(--t1);
flex-shrink: 0;
transition: background 0.15s, color 0.15s;
}
.fp-option:hover .fp-num {
background: rgba(139, 92, 246, 0.18);
color: #7c3aed;
}
.fp-option.selected .fp-num {
background: var(--grad);
color: white;
}
.fp-check-icon {
width: 14px;
height: 14px;
}
.fp-opt-text {
font-size: 14px;
color: var(--t0);
line-height: 1.4;
}
.fp-opt-text strong {
font-weight: 700;
}
.fp-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px 14px;
gap: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.fp-custom-row {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.fp-edit-icon {
color: var(--t2);
font-size: 14px;
flex-shrink: 0;
}
.fp-custom-input {
flex: 1;
background: transparent;
border: none;
color: var(--t1);
font-size: 14px;
font-family: inherit;
outline: none;
}
.fp-custom-input::placeholder {
color: var(--t2);
}
.fp-custom-input:focus {
color: var(--t0);
}
.fp-skip-btn {
padding: 6px 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: transparent;
border-radius: 8px;
color: var(--t1);
font-size: 13px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: all 0.15s;
flex-shrink: 0;
}
.fp-skip-btn:hover {
background: rgba(255, 255, 255, 0.07);
color: var(--t0);
border-color: rgba(255, 255, 255, 0.2);
}
.fp-reply-hint {
font-size: 13px;
color: var(--t2);
padding: 0 4px 10px;
text-align: center;
}
/* Answered step pill shown in chat */
.fp-answer-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(91, 104, 255, 0.1);
border: 1px solid rgba(91, 104, 255, 0.22);
border-radius: 999px;
padding: 5px 14px;
font-size: 13px;
color: var(--chip-blue);
font-weight: 500;
margin-top: 4px;
}
/* ==========================================================================
Light conversation surface
--------------------------------------------------------------------------
The popup is the one solid-dark card left inside #chat-container, which is
now a light panel (4-features/_chat.css, _composer.css). Its text colours
already come from --t0/--t1/--t2, and those are re-pointed to dark-on-light
for the whole chat container — so on the dark card the question and options
became dark-on-dark. Rather than carve out a dark island in the middle of a
light surface, the card itself becomes light; only the values hardcoded as
translucent WHITE overlays (written when the card was dark) need replacing.
Scoped to #chat-container, the only place this popup is ever shown.
========================================================================== */
#chat-container .fp-popup {
background: var(--wx-bg-panel);
border-color: var(--wx-border-light-strong);
/* Was a heavy 34px-blur floating-popup shadow (0 12px 34px @ 12% + 0 2px 6px @ 5%) —
every other response card in this design system uses Tailwind's near-invisible
shadow-2xs (~0 1px 2px @ 5%), so this one card stood out with a visibly darker halo
around it that nothing else in the reference has. */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
#chat-container .fp-close-btn:hover,
#chat-container .fp-skip-btn:hover {
background: var(--wx-bg-panel-muted);
}
#chat-container .fp-option {
/* The reference's rows carry their own card background/border at rest, not just on
hover — each one reads as a distinct tappable row instead of plain list text with a
hairline underneath. */
background: var(--wx-bg-panel-sunken);
border: 1px solid var(--wx-border-light);
border-bottom: 1px solid var(--wx-border-light);
border-radius: 12px;
margin-bottom: 8px;
}
#chat-container .fp-option:last-child {
margin-bottom: 0;
}
#chat-container .fp-option:hover {
background: rgba(139, 92, 246, 0.06);
border-color: rgba(139, 92, 246, 0.35);
}
/* The reference's chevron-right, only drawn on hover so the row reads as "tappable"
without cluttering every row with an icon at rest. */
#chat-container .fp-option {
position: relative;
padding-right: 34px;
}
#chat-container .fp-option::after {
content: "";
position: absolute;
right: 12px;
top: 50%;
width: 8px;
height: 8px;
border-right: 1.5px solid var(--wx-text-on-light-faint);
border-top: 1.5px solid var(--wx-text-on-light-faint);
transform: translateY(-50%) rotate(45deg);
opacity: 0;
transition: opacity 0.15s, border-color 0.15s;
}
#chat-container .fp-option:hover::after {
opacity: 1;
border-color: #6d28d9;
}
/* A locked/selected option is no longer clickable — the hover chevron implying "tap
this" would be misleading once the checkmark has already replaced the number. */
#chat-container .fp-option.selected:hover::after {
opacity: 0;
}
#chat-container .fp-option.selected {
background: rgba(139, 92, 246, 0.1);
border-color: rgba(139, 92, 246, 0.4);
}
#chat-container .fp-num {
background: var(--wx-bg-panel-muted);
}
#chat-container .fp-option:hover .fp-num {
background: rgba(139, 92, 246, 0.16);
color: #6d28d9;
}
/* Re-stated at the same specificity as the rules above: scoping the plain
.fp-num to #chat-container would otherwise out-specify the selected state's
gradient chip and flatten it to grey. */
#chat-container .fp-option.selected .fp-num {
background: var(--grad);
color: #fff;
}
#chat-container .fp-footer {
border-top-color: var(--wx-border-light);
}
#chat-container .fp-skip-btn {
border-color: var(--wx-border-light-strong);
}
#chat-container .fp-skip-btn:hover {
border-color: var(--wx-border-light-strong);
}
/* ===== 4-features/_portfolio.css ===== */
/* ==========================================================================
Portfolio panel, track-holdings modal, skeleton
Extracted from the legacy index.html monolith (source lines 7703-8613).
========================================================================== */
/* ══════════════════════════════════════════════════════════════════
PORTFOLIO PANEL
══════════════════════════════════════════════════════════════════ */
#portfolio-tab {
/* repurposed as a sidebar nav row; see .sidebar-nav-item */
}
.ptab-icon {
font-size: 15px;
line-height: 1;
width: 18px;
text-align: center;
flex-shrink: 0;
}
.ptab-label {
flex: 1;
}
.ptab-count {
background: var(--halo-primary);
color: #fff;
font-size: 10px;
font-weight: 700;
border-radius: 999px;
padding: 1px 6px;
min-width: 16px;
text-align: center;
}
/* ── Track Holdings Modal ── */
#bulk-modal-overlay {
position: fixed;
inset: 0;
z-index: 500;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
#bulk-modal {
background: var(--bg1);
border: 1px solid var(--border2);
border-radius: 20px;
width: 100%;
max-width: 960px;
max-height: 88vh;
display: flex;
flex-direction: column;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.bm-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 22px 24px 16px;
border-bottom: 1px solid var(--border2);
flex-shrink: 0;
}
.bm-title {
font-size: 17px;
font-weight: 700;
color: var(--t0);
margin-bottom: 4px;
}
.bm-subtitle {
font-size: 12px;
color: var(--t2);
line-height: 1.5;
max-width: 580px;
}
.bm-close {
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--border2);
color: var(--t1);
border-radius: 8px;
width: 32px;
height: 32px;
font-size: 16px;
cursor: pointer;
flex-shrink: 0;
margin-left: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.bm-close:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--t0);
}
.bm-table-wrap {
flex: 1;
overflow: auto;
padding: 0 24px;
}
.bm-table {
width: 100%;
border-collapse: collapse;
min-width: 860px;
}
.bm-th {
position: sticky;
top: 0;
background: var(--bg1);
padding: 12px 8px 10px;
text-align: left;
font-size: 11px;
font-weight: 600;
color: var(--t2);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid var(--border2);
white-space: nowrap;
z-index: 1;
}
.bm-th-num {
width: 32px;
}
.bm-th-stock {
min-width: 150px;
}
.bm-th-qty {
width: 80px;
}
.bm-th-price {
width: 110px;
}
.bm-th-date {
width: 130px;
}
.bm-th-del {
width: 36px;
}
.bm-req {
color: var(--halo-error);
}
.bm-tr {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: background 0.15s;
}
.bm-tr:last-child {
border-bottom: none;
}
.bm-tr:hover {
background: rgba(255, 255, 255, 0.03);
}
.bm-tr.saved {
opacity: 0.4;
pointer-events: none;
}
.bm-td {
padding: 10px 8px;
vertical-align: middle;
}
.bm-td-num {
font-size: 12px;
color: var(--t2);
font-weight: 600;
text-align: center;
}
.bm-stock-sym {
font-size: 13px;
font-weight: 700;
color: var(--t0);
line-height: 1.2;
}
.bm-stock-name {
font-size: 11px;
color: var(--t2);
margin-top: 2px;
line-height: 1.3;
}
.bm-input {
width: 100%;
background: var(--bg2);
border: 1px solid var(--border2);
border-radius: 8px;
padding: 7px 9px;
font-size: 12px;
color: var(--t0);
font-family: inherit;
outline: none;
box-sizing: border-box;
min-width: 0;
}
.bm-input:focus {
border-color: #5b68ff;
background: rgba(91, 104, 255, 0.05);
}
.bm-input.bm-error {
border-color: #ef4444;
}
.bm-input[readonly] {
background: transparent;
border-color: transparent;
color: var(--t2);
cursor: default;
padding-left: 2px;
}
.ph-status-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.4px;
}
.ph-status-badge.s-buy {
background: rgba(34, 197, 94, 0.12);
color: #28e08c;
}
.ph-status-badge.s-hold {
background: rgba(234, 179, 8, 0.12);
color: #eab308;
}
.ph-status-badge.s-exit {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
.bm-del-btn {
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.2);
color: #ef4444;
border-radius: 7px;
width: 28px;
height: 28px;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
flex-shrink: 0;
}
.bm-del-btn:hover {
background: rgba(239, 68, 68, 0.18);
}
.bm-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 24px 18px;
border-top: 1px solid var(--border2);
flex-shrink: 0;
gap: 12px;
}
.bm-footer-info {
font-size: 11px;
color: var(--t2);
line-height: 1.5;
}
.bm-footer-actions {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.bm-btn-cancel {
padding: 9px 18px;
border: 1px solid var(--border2);
border-radius: 10px;
background: none;
color: var(--t1);
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
}
.bm-btn-cancel:hover {
background: rgba(255, 255, 255, 0.05);
}
.bm-btn-save {
padding: 9px 22px;
border: none;
border-radius: 10px;
background: linear-gradient(135deg, #7886ff, #5b68ff);
color: #fff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: opacity 0.15s;
}
.bm-btn-save:hover {
opacity: 0.88;
}
.bm-btn-save:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.bm-btn-add-row {
padding: 7px 14px;
border: 1.5px dashed rgba(91, 104, 255, 0.45);
border-radius: 8px;
background: rgba(91, 104, 255, 0.06);
color: #7886ff;
font-size: 12px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition:
background 0.15s,
border-color 0.15s;
}
.bm-btn-add-row:hover {
background: rgba(91, 104, 255, 0.12);
border-color: rgba(91, 104, 255, 0.7);
}
.sk {
border-radius: 6px;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.05) 25%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.05) 75%
);
background-size: 200% 100%;
animation: sk-shimmer 1.4s infinite;
}
@keyframes sk-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.sk-ticker {
height: 14px;
width: 70px;
}
.sk-name {
height: 10px;
width: 130px;
}
.sk-meta {
height: 10px;
width: 90px;
}
.sk-badge {
height: 18px;
width: 48px;
border-radius: 6px;
}
.sk-pnl {
height: 13px;
width: 64px;
}
.sk-pct {
height: 10px;
width: 48px;
}
.sk-today {
height: 10px;
width: 40px;
}
/* Advisory card "track this" footer */
/* ===== 4-features/_suggested.css ===== */
/* ==========================================================================
Suggested next questions
Extracted from the legacy index.html monolith (source lines 8614-8990).
========================================================================== */
/* ── Suggested next questions ─────────────────────────────────────
Rendered under every answer from response.suggested_questions, which the
backend generates from the analysis that just ran (real metric, real period,
real fund names) — so these are never a fixed list. */
/* .suggest-block/.suggest-label/.suggest-opts/.suggest-btn markup (built in
features/chat/suggestions.js's _suggestHtml()) now carries its own Tailwind
utility classes matching the reference template gallery's "Follow-up
questions" style directly in the HTML string — these class names are kept
only as JS hooks (chat.js/messages.js's cleanup selectors, askSuggestion()'s
group-disable), so no competing visual rules are declared here anymore. */
.suggest-btn:active {
transform: translateY(1px);
}
.suggest-btn:disabled {
opacity: 0.45;
cursor: default;
}
.track-prompt {
margin-top: 16px;
padding: 12px 14px;
border-radius: 10px;
background: rgba(91, 104, 255, 0.07);
border: 1px solid rgba(91, 104, 255, 0.2);
display: flex;
align-items: center;
gap: 10px;
}
.track-prompt-text {
flex: 1;
font-size: 12px;
color: var(--t1);
line-height: 1.4;
}
.track-prompt-btn {
padding: 6px 14px;
border-radius: 8px;
background: #5b68ff;
color: #fff;
font-size: 12px;
font-weight: 600;
border: none;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: opacity 0.15s;
}
.track-prompt-btn:hover {
opacity: 0.85;
}
.wl-offer {
margin-top: 16px;
padding: 12px 14px;
border-radius: 10px;
background: rgba(255, 176, 32, 0.07);
border: 1px solid rgba(255, 176, 32, 0.25);
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.wl-offer-text {
flex: 1;
min-width: 180px;
font-size: 12px;
color: var(--t1);
line-height: 1.4;
}
.wl-offer-btn {
padding: 6px 14px;
border-radius: 8px;
background: linear-gradient(135deg, #ffb020, #ff9f0a);
color: #1a1a1a;
font-size: 12px;
font-weight: 700;
border: none;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: opacity 0.15s;
}
.wl-offer-btn:hover {
opacity: 0.85;
}
.wl-offer-btn.ghost {
background: transparent;
color: var(--t2);
border: 1px solid var(--border2);
font-weight: 600;
}
.wl-offer-btn.ghost:hover {
color: var(--t0);
opacity: 1;
}
.wl-offer-done {
font-size: 12px;
font-weight: 600;
color: #28e08c;
display: flex;
align-items: center;
gap: 8px;
}
/* portfolio_card in chat */
.port-card {
font-family: inherit;
}
.port-summary-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.port-stat {
padding: 12px 14px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
}
.port-stat-label {
font-size: 11px;
color: var(--t2);
margin-bottom: 4px;
}
.port-stat-value {
font-size: 16px;
font-weight: 700;
color: var(--t0);
}
.port-holding-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
margin-bottom: 6px;
}
.port-holding-sym {
font-size: 13px;
font-weight: 700;
color: var(--t0);
width: 90px;
flex-shrink: 0;
}
.port-holding-detail {
flex: 1;
font-size: 12px;
color: var(--t2);
}
.port-holding-pnl {
font-size: 13px;
font-weight: 600;
text-align: right;
}
/* holding_advice_card — "which stocks should I hold or exit" */
.ha-verdict-row {
display: flex;
gap: 10px;
margin-bottom: 14px;
}
.ha-verdict-chip {
font-size: 12px;
font-weight: 700;
padding: 6px 14px;
border-radius: 20px;
letter-spacing: 0.02em;
}
.ha-verdict-chip.exit {
background: rgba(255, 58, 92, 0.15);
color: #ff3a5c;
}
.ha-verdict-chip.hold {
background: rgba(245, 213, 71, 0.15);
color: #f5d547;
}
.ha-row {
padding: 12px 14px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
margin-bottom: 8px;
}
.ha-row.exit {
border-color: rgba(255, 58, 92, 0.2);
}
.ha-row-top {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.ha-sym {
font-size: 13px;
font-weight: 700;
color: var(--t0);
}
.ha-sector {
font-size: 10px;
color: var(--t2);
}
.ha-pnl {
margin-left: auto;
font-size: 13px;
font-weight: 600;
}
.ha-row-detail {
font-size: 12px;
color: var(--t2);
margin-bottom: 6px;
}
.ha-reason {
font-size: 12px;
color: var(--t1);
line-height: 1.5;
}
/* portfolio_sector_breakdown_card — "sector breakdown of my portfolio" */
.sb-note {
font-size: 13px;
color: var(--t1);
line-height: 1.6;
padding: 12px 14px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
margin-bottom: 14px;
}
.sb-sector {
padding: 12px 14px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
margin-bottom: 8px;
}
.sb-sector-top {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 6px;
}
.sb-sector-name {
font-size: 13px;
font-weight: 700;
color: var(--t0);
}
.sb-sector-pct {
margin-left: auto;
font-size: 14px;
font-weight: 700;
color: #7886ff;
}
.sb-bar {
height: 5px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
margin-bottom: 8px;
}
.sb-bar-fill {
height: 100%;
border-radius: 3px;
background: linear-gradient(90deg, #7886ff, #5b68ff);
}
.sb-sector-meta {
display: flex;
gap: 14px;
font-size: 11px;
color: var(--t2);
margin-bottom: 8px;
}
.sb-holdings {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sb-holding-chip {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--t1);
padding: 3px 8px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
}
/* top_calls_card — "best/worst performing stock recommendations" */
.tc-group {
margin-bottom: 16px;
}
.tc-group:last-child {
margin-bottom: 0;
}
.tc-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
margin-bottom: 8px;
}
.tc-rank {
font-size: 14px;
font-weight: 800;
color: var(--t2);
width: 22px;
flex-shrink: 0;
text-align: center;
}
.tc-main {
flex: 1;
min-width: 0;
}
.tc-name {
font-size: 13px;
font-weight: 700;
color: var(--t0);
}
.tc-meta {
font-size: 11px;
color: var(--t2);
margin-top: 2px;
}
.tc-return {
font-size: 16px;
font-weight: 800;
text-align: right;
flex-shrink: 0;
}
/* ===== 3-layout/_responsive.css ===== */
/* ==========================================================================
Responsive
Extracted from the legacy index.html monolith (source lines 9206-9325).
========================================================================== */
/* ══════════════════════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
.bubble {
max-width: 100%;
}
.msg-row,
.typing-row {
padding: 6px 16px;
}
.input-bar {
padding: 12px 16px 20px;
}
.brand-name {
font-size: 32px;
}
.stock-card-head {
flex-direction: column;
}
.stock-price-box {
min-width: 0;
text-align: left;
}
.action-strip,
.metric-grid,
.recommendation-section-grid,
.recommendation-note-grid {
grid-template-columns: 1fr;
}
.insight-grid,
.trade-row {
grid-template-columns: 1fr;
}
.home-center-inner {
padding: clamp(12px, 3vh, 32px) 16px 16px;
}
.chips-wrap {
padding: 10px 16px 20px;
}
.ob-card-inner {
padding: 36px 24px;
}
.stock-table-wrap {
overflow-x: auto;
}
.stock-table {
min-width: 0;
border-spacing: 0 6px;
}
.stock-table thead {
display: none;
}
.stock-table .st-data-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px 12px;
}
.stock-table .st-data-row td {
display: flex;
flex-direction: column;
padding: 6px 12px;
text-align: left !important;
border: 0;
background: transparent;
border-radius: 0 !important;
}
.stock-table .st-data-row {
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.07);
overflow: hidden;
}
.stock-table .st-data-row td::before {
content: attr(data-label);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--t2);
font-weight: 700;
margin-bottom: 3px;
}
.st-num {
display: none;
}
.st-portfolio-cell {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
padding-top: 12px !important;
}
.st-portfolio-cell::before {
display: none;
}
.st-name-cell {
grid-column: 1 / -1;
}
.st-action-cell {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
gap: 8px;
}
.st-action-cell::before {
margin-bottom: 0;
}
.st-detail-panel {
grid-template-columns: 1fr;
}
.stock-table .st-detail-row {
display: table-row;
}
.stock-table .st-detail-row td {
display: table-cell;
background: transparent;
border: 0;
padding: 0 4px 6px;
}
}
/* ===== 5-cards/_sector.css ===== */
/* ==========================================================================
Sector comparison + performance
Extracted from the legacy index.html monolith (source lines 9326-9747).
========================================================================== */
/* ── Sector Comparison Table ──────────────────────────────────── */
.sc-wrap {
margin-top: 14px;
}
.sc-summary {
font-size: 13px;
color: var(--t1);
line-height: 1.65;
margin-bottom: 14px;
}
.sc-table-wrap {
overflow-x: auto;
border-radius: 12px;
border: 1px solid var(--border1);
}
.sc-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
min-width: 380px;
}
.sc-table thead th {
padding: 13px 16px;
text-align: center;
background: var(--bg2);
border-bottom: 1px solid var(--border1);
vertical-align: top;
font-weight: 600;
color: var(--t0);
}
.sc-table thead th.sc-metric-col {
text-align: left;
background: var(--bg1);
border-right: 1px solid var(--border1);
width: 130px;
color: var(--t2);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sc-table thead th.sc-col-winner {
background: rgba(40, 224, 140, 0.07);
border-left: 2px solid rgba(40, 224, 140, 0.35);
}
.sc-table thead th.sc-col-other {
background: var(--bg2);
border-left: 1px solid var(--border1);
}
.sc-col-name {
font-size: 13px;
font-weight: 700;
color: var(--t0);
margin-bottom: 4px;
}
.sc-leading-badge {
display: inline-block;
margin-top: 4px;
background: rgba(40, 224, 140, 0.15);
color: var(--green);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 2px 7px;
border-radius: 4px;
}
.sc-table tbody td {
padding: 9px 16px;
text-align: center;
border-bottom: 1px solid var(--border0);
color: var(--t0);
vertical-align: middle;
white-space: nowrap;
}
.sc-table tbody tr:last-child td {
border-bottom: 0;
}
.sc-table tbody tr:hover td {
background: rgba(255, 255, 255, 0.02);
}
.sc-table td.sc-metric-col {
text-align: left;
color: var(--t2);
font-size: 12px;
font-weight: 500;
white-space: nowrap;
background: var(--bg1);
border-right: 1px solid var(--border1);
}
.sc-table td.sc-cell-winner {
background: rgba(40, 224, 140, 0.05);
}
.sc-table tr.sc-section-row td {
background: var(--bg2);
font-weight: 700;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--t2);
padding: 7px 16px;
text-align: left;
border-top: 1px solid var(--border1);
border-bottom: 1px solid var(--border1);
}
.sc-pos {
color: var(--green);
font-weight: 600;
}
.sc-neg {
color: var(--red);
font-weight: 600;
}
.sc-neutral {
color: var(--t1);
}
.sc-mover-cell {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}
.sc-stock-name {
font-size: 12px;
color: var(--t1);
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sc-badge-pos {
background: rgba(40, 224, 140, 0.12);
color: var(--green);
font-size: 11px;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
}
.sc-badge-neg {
background: rgba(255, 58, 92, 0.12);
color: var(--red);
font-size: 11px;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
}
.sc-badge-neutral {
background: rgba(255, 255, 255, 0.06);
color: var(--t1);
font-size: 11px;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
}
.sc-breadth-bull {
color: var(--green);
font-size: 11px;
font-weight: 700;
}
.sc-breadth-bear {
color: var(--red);
font-size: 11px;
font-weight: 700;
}
.sc-breadth-neutral {
color: var(--yellow);
font-size: 11px;
font-weight: 700;
}
/* ── Sector Performance Card (single + top views) ── */
.sp-wrap {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 10px;
}
.sp-card {
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--border0);
border-radius: 12px;
overflow: hidden;
}
.sp-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid var(--border0);
background: rgba(255, 255, 255, 0.03);
flex-wrap: wrap;
gap: 8px;
}
.sp-card-title {
display: flex;
flex-direction: column;
gap: 2px;
}
.sp-index-name {
font-size: 15px;
font-weight: 800;
color: var(--t0);
letter-spacing: 0.3px;
}
.sp-index-val {
font-size: 11px;
color: var(--t2);
font-family: monospace;
}
.sp-card-signals {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.sp-two-col {
display: grid;
grid-template-columns: minmax(160px, auto) 1fr;
gap: 0;
}
.sp-two-col > :first-child {
border-right: 1px solid var(--border0);
}
@media (max-width: 520px) {
.sp-two-col {
grid-template-columns: 1fr;
}
.sp-two-col > :first-child {
border-right: none;
border-bottom: 1px solid var(--border0);
}
}
.sp-section {
padding: 10px 14px;
}
.sp-section-head {
font-size: 10px;
font-weight: 700;
color: var(--t2);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 6px;
}
.sp-ret-table {
border-collapse: collapse;
min-width: 140px;
}
.sp-ret-table tr {
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.sp-ret-table tr:last-child {
border-bottom: none;
}
.sp-ret-table td {
padding: 5px 10px;
font-size: 12px;
white-space: nowrap;
}
.sp-ret-table td:first-child {
color: var(--t2);
width: 40px;
font-weight: 600;
}
.sp-ret-table td:last-child {
font-weight: 600;
text-align: right;
min-width: 72px;
}
.sp-movers {
display: flex;
flex-direction: column;
gap: 4px;
}
.sc-mover-cell {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.sc-mover-cell .sc-stock-name {
font-size: 11px;
color: var(--t1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 140px;
}
.sp-breadth-row {
display: flex;
align-items: stretch;
gap: 0;
padding: 8px 14px;
flex-wrap: wrap;
}
.sp-breadth-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 4px 12px;
}
.sp-breadth-sep {
width: 1px;
background: var(--border0);
margin: 4px 0;
}
.sp-b-num {
font-size: 16px;
font-weight: 800;
}
.sp-b-label {
font-size: 10px;
color: var(--t2);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* top-sectors ranked table */
.sp-leader-strip {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: rgba(40, 224, 140, 0.06);
border: 1px solid rgba(40, 224, 140, 0.15);
border-radius: 8px;
flex-wrap: wrap;
}
.sp-leader-label {
font-size: 10px;
font-weight: 700;
color: var(--t2);
text-transform: uppercase;
letter-spacing: 1px;
}
.sp-leader-name {
font-size: 14px;
font-weight: 700;
color: var(--t0);
flex: 1;
}
.sp-table-wrap {
overflow-x: auto;
border: 1px solid var(--border0);
border-radius: 10px;
}
.sp-rank-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.sp-rank-table thead tr {
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid var(--border0);
}
.sp-rank-table th {
padding: 8px 10px;
font-size: 10px;
font-weight: 700;
color: var(--t2);
text-transform: uppercase;
letter-spacing: 0.8px;
text-align: right;
white-space: nowrap;
}
.sp-rank-table th.sp-name-col {
text-align: left;
}
.sp-rank-table td {
padding: 7px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
text-align: right;
vertical-align: middle;
white-space: nowrap;
}
.sp-rank-table td.sp-name-col {
text-align: left;
color: var(--t1);
font-weight: 600;
white-space: nowrap;
}
.sp-rank-table tr:last-child td {
border-bottom: none;
}
.sp-rank-table tr.sp-row-top {
background: rgba(40, 224, 140, 0.04);
}
.sp-rank-table tr.sp-row-bot {
background: rgba(255, 58, 92, 0.04);
}
.sp-active-col {
background: rgba(255, 255, 255, 0.04) !important;
color: var(--t0) !important;
font-weight: 700 !important;
}
.sp-rank {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
color: var(--t2);
background: rgba(255, 255, 255, 0.05);
margin-right: 6px;
}
.sp-rank-top {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
color: var(--green);
background: rgba(40, 224, 140, 0.12);
margin-right: 6px;
}
/* ===== 5-cards/_stock-overview.css ===== */
/* ==========================================================================
Stock overview card
Extracted from the legacy index.html monolith (source lines 9748-10101).
========================================================================== */
/* ── Stock Overview Card ── */
.soc-wrap {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 14px;
}
.soc-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.soc-title {
display: flex;
flex-direction: column;
gap: 2px;
}
.soc-symbol {
font-size: 20px;
font-weight: 800;
color: var(--t0);
letter-spacing: 0.5px;
}
.soc-name {
font-size: 12px;
color: var(--t2);
}
.soc-price-block {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.soc-price {
font-size: 22px;
font-weight: 800;
color: var(--t0);
font-family: monospace;
}
.soc-change-pos {
font-size: 13px;
font-weight: 700;
color: var(--green);
}
.soc-change-neg {
font-size: 13px;
font-weight: 700;
color: var(--red);
}
.soc-change-neutral {
font-size: 13px;
font-weight: 600;
color: var(--t2);
}
.soc-scores {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.soc-score-chip {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 20px;
border: 1px solid var(--border1);
background: rgba(255, 255, 255, 0.03);
}
.soc-score-label {
font-size: 11px;
color: var(--t2);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.soc-score-val {
font-size: 13px;
font-weight: 700;
color: var(--t0);
}
.soc-score-bar {
display: flex;
gap: 3px;
}
.soc-score-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--border1);
}
.soc-score-dot.filled {
background: var(--green);
}
.soc-score-dot.half {
background: var(--yellow);
}
.soc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 600px) {
.soc-grid {
grid-template-columns: 1fr;
}
}
.soc-section {
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--border0);
border-radius: 10px;
overflow: hidden;
}
.soc-section-head {
padding: 8px 12px;
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid var(--border0);
font-size: 11px;
font-weight: 700;
color: var(--t2);
text-transform: uppercase;
letter-spacing: 1px;
}
.soc-table {
width: 100%;
border-collapse: collapse;
}
.soc-table tr {
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.soc-table tr:last-child {
border-bottom: none;
}
.soc-table td {
padding: 8px 12px;
font-size: 12px;
vertical-align: middle;
}
.soc-table td:first-child {
color: var(--t2);
white-space: nowrap;
}
.soc-table td:last-child {
font-weight: 600;
color: var(--t0);
text-align: right;
}
.soc-sig {
display: inline-flex;
align-items: center;
gap: 4px;
}
.soc-sig-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.soc-sig-bull .soc-sig-dot {
background: var(--green);
}
.soc-sig-bear .soc-sig-dot {
background: var(--red);
}
.soc-sig-neutral .soc-sig-dot {
background: var(--yellow);
}
.soc-sig-unknown .soc-sig-dot {
background: var(--border1);
}
.soc-sig-bull {
color: var(--green);
}
.soc-sig-bear {
color: var(--red);
}
.soc-sig-neutral {
color: var(--yellow);
}
.soc-sig-unknown {
color: var(--t2);
}
.soc-sig-good {
color: var(--green);
}
.soc-sig-good .soc-sig-dot {
background: var(--green);
}
.soc-sig-fair {
color: var(--yellow);
}
.soc-sig-fair .soc-sig-dot {
background: var(--yellow);
}
.soc-sig-weak {
color: var(--red);
}
.soc-sig-weak .soc-sig-dot {
background: var(--red);
}
.soc-sig-high {
color: var(--red);
}
.soc-sig-high .soc-sig-dot {
background: var(--red);
}
.soc-sig-moderate {
color: var(--yellow);
}
.soc-sig-moderate .soc-sig-dot {
background: var(--yellow);
}
.soc-sig-low {
color: var(--green);
}
.soc-sig-low .soc-sig-dot {
background: var(--green);
}
.soc-sig-expensive {
color: var(--red);
}
.soc-sig-expensive .soc-sig-dot {
background: var(--red);
}
.soc-sig-undervalued {
color: var(--green);
}
.soc-sig-undervalued .soc-sig-dot {
background: var(--green);
}
.soc-sig-oversold {
color: var(--green);
}
.soc-sig-oversold .soc-sig-dot {
background: var(--green);
}
.soc-sig-overbought {
color: var(--red);
}
.soc-sig-overbought .soc-sig-dot {
background: var(--red);
}
.soc-pivot {
display: flex;
flex-direction: column;
gap: 0;
}
.soc-pivot-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.soc-pivot-row:last-child {
border-bottom: none;
}
.soc-pivot-label {
font-size: 11px;
color: var(--t2);
width: 32px;
}
.soc-pivot-bar {
flex: 1;
height: 4px;
border-radius: 2px;
background: var(--border0);
margin: 0 10px;
position: relative;
}
.soc-pivot-bar-fill {
height: 100%;
border-radius: 2px;
}
.soc-pivot-val {
font-size: 12px;
font-weight: 700;
color: var(--t0);
font-family: monospace;
min-width: 60px;
text-align: right;
}
.soc-pivot-pp .soc-pivot-label {
color: var(--yellow);
font-weight: 700;
}
.soc-pivot-pp .soc-pivot-val {
color: var(--yellow);
}
.soc-candle-wrap {
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--border0);
border-radius: 10px;
overflow: hidden;
}
.soc-candle-head {
padding: 8px 12px;
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid var(--border0);
display: flex;
align-items: center;
justify-content: space-between;
}
.soc-candle-title {
font-size: 11px;
font-weight: 700;
color: var(--t2);
text-transform: uppercase;
letter-spacing: 1px;
}
.soc-tf-group {
display: flex;
gap: 3px;
background: rgba(255, 255, 255, 0.05);
padding: 2px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.soc-tf-btn {
background: transparent;
border: none;
color: var(--t2, #94a3b8);
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
border-radius: 4px;
cursor: pointer;
transition: all 0.15s ease;
}
.soc-tf-btn:hover {
color: #fff;
background: rgba(255, 255, 255, 0.1);
}
.soc-tf-btn.active {
background: #5b68ff;
color: #ffffff;
font-weight: 700;
box-shadow: 0 1px 4px rgba(91, 104, 255, 0.4);
}
.soc-candle-svg {
display: block;
width: 100%;
height: 120px;
cursor: crosshair;
}
.soc-chart-host {
position: relative;
}
/* ===== 5-cards/_chart-tooltip.css ===== */
/* ==========================================================================
Shared chart hover tooltip
Extracted from the legacy index.html monolith (source lines 10102-10284).
========================================================================== */
/* ── Shared hover tooltip for both chart implementations (SVG + canvas) ── */
.chart-tooltip {
position: absolute;
top: 4px;
transform: translateX(-50%);
background: rgba(13, 15, 20, 0.96);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 8px;
padding: 5px 10px;
line-height: 1.4;
pointer-events: none;
display: none;
z-index: 5;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
white-space: nowrap;
}
.ctt-price {
font-weight: 700;
color: var(--t0, #fff);
font-size: 11px;
}
.ctt-date {
color: var(--t2, #94a3b8);
font-size: 9px;
margin-top: 1px;
}
.soc-news {
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--border0);
border-radius: 10px;
overflow: hidden;
}
.soc-news-head {
padding: 8px 12px;
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid var(--border0);
font-size: 11px;
font-weight: 700;
color: var(--t2);
text-transform: uppercase;
letter-spacing: 1px;
}
.soc-news-item {
padding: 8px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
font-size: 12px;
color: var(--t1);
line-height: 1.5;
}
.soc-news-item:last-child {
border-bottom: none;
}
.soc-news-bullet {
color: var(--green);
margin-right: 6px;
font-size: 9px;
}
/* WayaX Thesis block */
.soc-thesis {
border-radius: 10px;
overflow: hidden;
border: 1.5px solid;
}
.soc-thesis-bull {
border-color: rgba(40, 224, 140, 0.35);
background: rgba(40, 224, 140, 0.07);
}
.soc-thesis-bear {
border-color: rgba(255, 58, 92, 0.35);
background: rgba(255, 58, 92, 0.07);
}
.soc-thesis-neutral {
border-color: rgba(245, 213, 71, 0.35);
background: rgba(245, 213, 71, 0.06);
}
.soc-thesis-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.soc-thesis-label {
font-size: 10px;
font-weight: 700;
color: var(--t2);
text-transform: uppercase;
letter-spacing: 1.2px;
}
.soc-thesis-verdict {
font-size: 16px;
font-weight: 900;
letter-spacing: 1px;
padding: 4px 14px;
border-radius: 6px;
}
.soc-thesis-bull .soc-thesis-verdict {
color: var(--green);
background: rgba(40, 224, 140, 0.15);
}
.soc-thesis-bear .soc-thesis-verdict {
color: var(--red);
background: rgba(255, 58, 92, 0.15);
}
.soc-thesis-neutral .soc-thesis-verdict {
color: var(--yellow);
background: rgba(245, 213, 71, 0.12);
}
.soc-thesis-body {
padding: 10px 14px;
font-size: 12px;
color: var(--t1);
line-height: 1.7;
}
.soc-thesis-bullets {
list-style: none;
margin: 0;
padding: 8px 14px 4px;
display: flex;
flex-direction: column;
gap: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.soc-thesis-bullet {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12px;
color: var(--t0);
line-height: 1.5;
}
.soc-thesis-bullet-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--green);
flex-shrink: 0;
margin-top: 5px;
}
.soc-thesis-bear .soc-thesis-bullet-dot {
background: var(--red);
}
.soc-thesis-neutral .soc-thesis-bullet-dot {
background: var(--yellow);
}
.soc-thesis-scores {
display: flex;
gap: 16px;
padding: 8px 14px 10px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.soc-thesis-score-item {
display: flex;
flex-direction: column;
gap: 3px;
}
.soc-thesis-score-label {
font-size: 10px;
color: var(--t2);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.soc-thesis-score-bar {
display: flex;
gap: 3px;
}
.soc-thesis-score-dot {
width: 9px;
height: 9px;
border-radius: 2px;
background: var(--border1);
}
.soc-thesis-score-dot.filled {
background: var(--green);
}
.soc-thesis-score-num {
font-size: 11px;
font-weight: 700;
color: var(--t0);
margin-left: 4px;
}
/* ===== 5-cards/_blocks.css ===== */
/* ==========================================================================
Response block templates (.wbn-*)
--------------------------------------------------------------------------
The block/template cards themselves (renderers: static/js/cards/blocks.js)
are styled with Tailwind utility classes, not this file — see the comment
at the top of blocks.js for why. This file only carries the ONE rule that
genuinely belongs to the token-based system: how the app's own chat-bubble
chrome (static/css/4-features/_chat.css's .bubble.ai) reacts when a block
card is what it's wrapping.
========================================================================== */
/* The reference design's cards sit directly on the page background — no
second box around them. .bubble.ai normally adds its own translucent
background/border/padding (the "AI said this" chrome every other card
family relies on), so a .wbn-block dropped inside it rendered as a card
nested inside a second, differently-cornered dark box instead of the
single clean card the reference shows. Block cards carry their own
complete chrome (border, shadow, radius, background) already, so the
outer bubble becomes a bare, invisible wrapper whenever one is present —
every OTHER card family's bubble styling is untouched. */
.bubble.ai:has(.wbn-block) {
background: transparent;
border: none;
padding: 0;
border-radius: 0;
}
.bubble.ai {
box-shadow: none !important;
border-radius: 20px !important;
}
.wbn-card {
box-shadow: none !important;
border-radius: 20px !important;
border: 1px solid #e2e8f0 !important;
}
/* A `stacked_sections` answer (§10.1) joins each block's HTML with no separator
(blocks.js's _finalizeBlocks), so several cards for one answer rendered flush
against each other with no visible seam between them — e.g. a text_block sitting
directly on top of a stock_overview_card. Each block already carries its own
`space-y-3` for spacing ITS OWN children; this is the sibling-to-sibling gap that
was missing between separate blocks. */
.wbn-block + .wbn-block {
margin-top: 16px;
}
/* ===== 5-cards/_financial-model.css ===== */
/* ==========================================================================
Financial-model cards (.fm-*)
--------------------------------------------------------------------------
cards/financial-model.js styles its layout with Tailwind utilities like the
rest of the block templates; this file holds only what a utility class can't
express: the per-model accent bar (driven by --fm-accent), the scrollable
table with a sticky label column, the sensitivity heat grid and the
collapsible workings.
========================================================================== */
.fm-card {
--fm-accent: #4f46e5;
position: relative;
}
.fm-accent-bar {
height: 3px;
width: 100%;
background: linear-gradient(90deg, var(--fm-accent), color-mix(in srgb, var(--fm-accent) 35%, #ffffff));
}
.fm-icon {
width: 36px;
height: 36px;
}
.fm-headline-value {
font-family: var(--wx-font-brand, inherit);
font-size: 28px;
line-height: 1.15;
letter-spacing: -0.5px;
}
/* ── tables ────────────────────────────────────────────────────────────── */
.fm-table-wrap {
overflow-x: auto;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
}
.fm-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 12px;
color: #334155;
}
.fm-table th,
.fm-table td {
padding: 7px 10px;
border-bottom: 1px solid #f1f5f9;
white-space: nowrap;
}
.fm-table thead th {
position: sticky;
top: 0;
background: #f8fafc;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
z-index: 2;
}
.fm-table tbody tr:last-child td {
border-bottom: 0;
}
.fm-table tbody tr:hover td {
background: #f8fafc80;
}
/* The row-label column stays visible while the year columns scroll. */
.fm-table .fm-sticky {
position: sticky;
left: 0;
background: #fff;
z-index: 1;
box-shadow: 1px 0 0 #f1f5f9;
}
.fm-table thead .fm-sticky {
background: #f8fafc;
z-index: 3;
}
.fm-table tr.fm-emphasis td {
font-weight: 700;
color: #0f172a;
}
.fm-table tr.fm-emphasis .fm-sticky {
background: inherit;
}
/* ── sensitivity heat grid ─────────────────────────────────────────────── */
.fm-sens-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 11.5px;
text-align: center;
}
.fm-sens-table th,
.fm-sens-table td {
padding: 7px 9px;
border-bottom: 1px solid #f1f5f9;
border-right: 1px solid #f1f5f9;
white-space: nowrap;
}
.fm-sens-table thead th {
background: #f8fafc;
font-size: 10.5px;
font-weight: 700;
color: #475569;
}
.fm-sens-table tbody th {
background: #f8fafc;
font-weight: 700;
color: #475569;
position: sticky;
left: 0;
}
.fm-sens-table .fm-sens-base-axis {
color: #0f172a;
background: #eef2ff;
}
.fm-sens-corner {
display: table-cell;
font-size: 9.5px;
line-height: 1.25;
color: #94a3b8;
text-align: left;
}
.fm-sens-corner span {
display: block;
}
.fm-sens-table td {
font-variant-numeric: tabular-nums;
color: #0f172a;
}
.fm-sens-table td.fm-sens-base {
font-weight: 800;
box-shadow: inset 0 0 0 2px var(--fm-accent, #4f46e5);
}
/* ── collapsible workings ──────────────────────────────────────────────── */
.fm-details {
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 8px 10px;
background: #f8fafc;
}
.fm-details > summary {
cursor: pointer;
font-size: 11.5px;
font-weight: 700;
color: #334155;
list-style: none;
}
.fm-details > summary::-webkit-details-marker {
display: none;
}
.fm-details > summary::before {
content: "▸";
display: inline-block;
margin-right: 6px;
color: #94a3b8;
transition: transform 0.15s ease;
}
.fm-details[open] > summary::before {
transform: rotate(90deg);
}
.fm-steps {
counter-reset: fm-step;
font-size: 12px;
color: #334155;
}
.fm-steps li {
counter-increment: fm-step;
display: flex;
gap: 8px;
padding: 4px 0;
border-bottom: 1px dashed #e2e8f0;
font-family: var(--wx-font-mono, ui-monospace, monospace);
font-size: 11.5px;
}
.fm-steps li:last-child {
border-bottom: 0;
}
.fm-steps li::before {
content: counter(fm-step);
flex: 0 0 18px;
height: 18px;
border-radius: 6px;
background: #e2e8f0;
color: #475569;
font-family: var(--wx-font-ui, inherit);
font-size: 10px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ── buttons ───────────────────────────────────────────────────────────── */
.fm-download {
background: var(--fm-accent, #4f46e5);
border: 0;
cursor: pointer;
transition: filter 0.15s ease, transform 0.15s ease;
}
.fm-download:hover {
filter: brightness(1.08);
transform: translateY(-1px);
}
.fm-candidate {
background: #fff;
cursor: pointer;
}
.fm-candidate:disabled {
cursor: default;
opacity: 0.7;
}
.fm-chip {
cursor: pointer;
}
.fm-chart {
max-height: 240px;
}
@media (max-width: 640px) {
.fm-headline-value {
font-size: 24px;
}
.fm-table th,
.fm-table td {
padding: 6px 8px;
}
}
/* The shared .rich-content rules colour for the dark chat bubble
(var(--t0) is near-white), which is invisible on this white card — and the
model answer bolds exactly the numbers that matter. Scoped to this card so no
other card family's look changes. */
.fm-card .rich-content strong {
color: #0f172a;
}
.fm-card .rich-content em {
color: #475569;
}
/* ===== 3-layout/_mobile.css ===== */
/* ==========================================================================
Mobile responsive
Extracted from the legacy index.html monolith (source lines 10285-10538).
========================================================================== */
/* ══════════════════════════════════════════════════════════════════
MOBILE RESPONSIVE
══════════════════════════════════════════════════════════════════ */
.mobile-menu-btn {
display: none;
}
.sidebar-scrim {
display: none;
}
/* ── Tablet & below: off-canvas sidebar ── */
@media (max-width: 900px) {
.app-shell {
height: 100dvh;
}
#app-container {
height: 100dvh;
}
.app-sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
height: 100dvh;
width: min(300px, 84vw);
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 300;
box-shadow: 10px 0 40px rgba(0, 0, 0, 0.5);
}
.app-sidebar.mobile-open {
transform: translateX(0);
}
/* Desktop collapse mode is meaningless off-canvas — force full sidebar */
.app-sidebar.collapsed {
width: min(300px, 84vw);
}
.app-sidebar.collapsed .sidebar-brand-text {
display: flex;
}
.app-sidebar.collapsed .sidebar-nav-label {
display: block;
}
.app-sidebar.collapsed .sidebar-search-wrap {
display: block;
}
.app-sidebar.collapsed .sidebar-history-label {
display: block;
}
.app-sidebar.collapsed .sidebar-history-list {
display: block;
}
.app-sidebar.collapsed .sidebar-profile-text {
display: flex;
}
.app-sidebar.collapsed .sidebar-profile-badge {
display: inline-block;
}
.app-sidebar.collapsed .sidebar-profile-chevron {
display: inline;
}
.app-sidebar.collapsed .sidebar-nav-item {
justify-content: flex-start;
padding: 9px 10px;
}
.app-sidebar.collapsed .sidebar-profile {
justify-content: space-between;
}
.app-sidebar.collapsed .sidebar-profile-menu {
left: auto;
right: 0;
bottom: calc(100% + 6px);
width: auto;
}
.sidebar-collapse-btn {
display: none;
}
.sidebar-scrim {
display: block;
position: fixed;
inset: 0;
z-index: 290;
background: rgba(0, 0, 0, 0.55);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.sidebar-scrim.show {
opacity: 1;
pointer-events: auto;
}
.mobile-menu-btn {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 14px;
left: 14px;
z-index: 6;
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--halo-elevated);
border: 1px solid var(--halo-border);
color: var(--halo-on-surface);
font-size: 18px;
line-height: 1;
cursor: pointer;
font-family: inherit;
}
.mobile-menu-btn:active {
background: var(--halo-border);
}
/* keep first chat message clear of the floating menu button */
.messages {
padding-top: 66px;
}
.home-center-inner {
padding-top: 60px;
}
/* Side panels fit the viewport */
#portfolio-panel,
#watchlist-panel {
width: min(400px, 100vw);
}
/* Prevent iOS auto-zoom on focus */
.chat-textarea,
.wl-add-input,
.sidebar-search-input,
.ob-input {
font-size: 16px;
}
}
/* ── Phones ── */
@media (max-width: 560px) {
.greeting-hi {
font-size: 26px;
}
.greeting-sub {
font-size: 14px;
}
.home-textarea {
padding: 16px 104px 16px 18px;
min-height: 60px;
}
.home-mic-btn {
right: 56px;
bottom: 11px;
width: 34px;
height: 34px;
}
.home-send-btn {
right: 9px;
bottom: 9px;
width: 40px;
height: 40px;
}
.home-disclaimer {
font-size: 10px;
padding: 0 8px;
}
.home-presets {
margin-top: 20px;
}
.preset-dropdown {
position: fixed;
left: 12px;
right: 12px;
top: auto;
transform: none;
width: auto;
min-width: 0;
max-width: none;
max-height: 50vh;
overflow-y: auto;
}.chip {
font-size: 12px;
padding: 7px 12px;
white-space: normal;
text-align: center;
}
.chips-wrap {
gap: 6px;
padding: 10px 12px 18px;
}
.msg-row,
.typing-row {
padding: 6px 12px;
}
.input-bar {
padding: 10px 10px 14px;
}
/* Modals */
.bm-header {
padding: 16px 16px 12px;
}
.bm-table-wrap {
padding: 0 12px;
}
#bulk-modal {
max-height: 92dvh;
border-radius: 14px;
}
#bulk-modal-overlay,
[id$="-modal-overlay"] {
padding: 10px;
}
/* Panel inner padding */
.wl-add-row {
padding: 12px 14px 0;
}
.wl-hint {
padding: 8px 14px 0;
}
.wl-list {
padding: 12px 14px 16px;
}
.ob-card-inner {
padding: 32px 20px;
}
.ob-title {
font-size: 22px;
}
}
/* ===== 4-features/_suggested-chips.css ===== */
/* ==========================================================================
Suggested question chips (2nd style block)
Extracted from the legacy index.html monolith (source lines 10542-10583).
========================================================================== */
/* ── Suggested Questions Chips ── */
.suggested-questions-container {
margin: 12px 0 6px 0;
padding-top: 10px;
border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.suggested-q-title {
font-size: 12px;
font-weight: 600;
text-transform: none;
letter-spacing: 0.3px;
color: #cbd5e1;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.suggested-q-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.suggested-q-chip {
background: rgba(99, 102, 241, 0.12);
border: 1px solid rgba(99, 102, 241, 0.35);
color: #e2e8f0;
padding: 7px 13px;
border-radius: 18px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
line-height: 1.4;
}
.suggested-q-chip:hover {
background: rgba(99, 102, 241, 0.28);
border-color: #6366f1;
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}
/* ===== 6-redesign/_sidebar.css ===== */
/* ==========================================================================
Sprint 9 — sidebar
Figma: Hand off → Sidebar (213:12011), 268 × 929
========================================================================== */
.app-sidebar {
width: var(--wx-sidebar-width);
flex: 0 0 var(--wx-sidebar-width);
/* flex-basis is what actually sets the rail's width here, so it has to be the
thing that transitions — animating `width` alone does nothing. */
transition: flex-basis 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
padding 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
display: flex;
flex-direction: column;
padding: 14px 12px;
gap: 0;
background: var(--wx-bg-sidebar);
border: 0;
border-radius: var(--wx-radius-md);
box-shadow: var(--wx-shadow-sidebar);
overflow: hidden;
}
/* ── Brand row ────────────────────────────────────────────────────────── */
.sidebar-header-row {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 44px;
padding: 2px 4px 8px;
}
.sidebar-brand {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.sidebar-brand-mark {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex: 0 0 36px;
border-radius: var(--wx-radius-pill);
overflow: hidden;
background: transparent;
box-shadow: 0 0 12px rgba(136, 91, 232, 0.25);
}
.sidebar-brand-mark img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: inherit;
}
.sidebar-brand-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.sidebar-brand-name {
font-family: var(--wx-font-brand);
font-size: var(--wx-text-lg);
font-weight: var(--wx-weight-bold);
line-height: 16px;
letter-spacing: var(--wx-tracking-tight);
color: #fff;
}
/* Gradient X, applied without needing a second element in the markup. */
.sidebar-brand-name::after {
content: "X";
font-weight: var(--wx-weight-extrabold);
background: var(--wx-gradient-wordmark);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.sidebar-brand-ra {
margin-top: 4px;
font-size: 8.5px;
line-height: 8.5px;
letter-spacing: 0.425px;
color: var(--wx-text-faint);
}
.sidebar-collapse-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex: 0 0 28px;
border-radius: var(--wx-radius-sm);
background: var(--wx-bg-overlay);
border: 1px solid var(--wx-border);
color: var(--wx-text-muted);
font-size: 15px;
line-height: 1;
cursor: pointer;
transition: background var(--wx-duration-fast) var(--wx-ease);
}
.sidebar-collapse-btn:hover {
background: rgba(255, 255, 255, 0.09);
color: var(--wx-text-secondary);
}
/* ── Subscription plan card ───────────────────────────────────────────── */
/* The reference draws this as a near-invisible flat card — no gradient ring,
just a 1px hairline barely lighter than the card fill itself. Only the
crown icon chip carries the brand gradient. */
.sidebar-subscription {
position: relative;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 44px;
height: 44px;
margin: 0 0 10px;
padding: 7px 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: var(--wx-radius-2xl);
background: var(--wx-gradient-subscription);
box-shadow: var(--wx-shadow-raised), inset 0 1px 0 rgba(255, 255, 255, 0.06);
cursor: pointer;
text-align: left;
}
.sidebar-subscription-icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: 0 0 30px;
border-radius: 9px;
background: var(--wx-gradient-brand);
box-shadow: var(--wx-inset-gloss),
0 4px 7px rgba(160, 123, 240, 0.4),
0 2px 4px rgba(160, 123, 240, 0.26);
}
.sidebar-subscription-icon img {
width: 15px;
height: 15px;
filter: brightness(0) invert(1);
}
.sidebar-subscription-label {
flex: 1 1 auto;
font-family: var(--wx-font-brand);
font-size: var(--wx-text-base);
font-weight: var(--wx-weight-semibold);
line-height: 16.25px;
letter-spacing: -0.26px;
color: #fff;
}
.sidebar-subscription-chevron {
flex: 0 0 auto;
color: var(--wx-text-muted);
font-size: 15px;
line-height: 1;
}
/* ── Navigation ───────────────────────────────────────────────────────── */
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: 8px;
border: 0;
}
.sidebar-nav-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
height: 36px;
padding: 0 12px;
border: 0;
border-radius: var(--wx-radius-lg);
background: transparent;
color: var(--wx-text-muted);
font-family: var(--wx-font-ui);
font-size: var(--wx-text-base);
font-weight: var(--wx-weight-medium);
line-height: 19.5px;
cursor: pointer;
transition: background var(--wx-duration-fast) var(--wx-ease),
color var(--wx-duration-fast) var(--wx-ease);
}
.sidebar-nav-item:hover {
background: var(--wx-bg-overlay);
color: var(--wx-text-secondary);
}
/* The selected row, matching the reference's .sidebar-btn-active: a raised
charcoal pill rather than a coloured wash. Every class that can mark a row
as open is listed here — `is-pane-active` comes from features/panes, while
Portfolio/Watchlist/History still carry the older `panel-open` — so the
three cannot drift apart visually. Listed last in the bundle on purpose:
3-layout/_sidebar.css's own `.panel-open` rule ties on specificity, and
source order is what decides between them. */
.sidebar-nav-item.is-active,
.sidebar-nav-item.is-pane-active,
.sidebar-nav-item.panel-open {
background: var(--wx-nav-active-bg);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 2px 6px rgba(0, 0, 0, 0.25);
color: #fff;
}
/* ── Nav icons ────────────────────────────────────────────────────────────
The glyph is painted, not loaded: the SVG is used as a mask and the colour
comes from `currentColor`, so an icon is always exactly the tone of the
label beside it and brightens with the row when it is selected — which is
what the reference does with its inline