/* ═══════════════════════════════════════════════════════════════════════════ SiScan – Siemens iX Design System Theme Based on: https://ix.siemens.io/ (Classic Dark / Classic Light) Source: @siemens/ix – packages/core/scss/theme/classic ═══════════════════════════════════════════════════════════════════════════ */ /* ── iX Classic Dark Token Layer ─────────────────────────────────────────── */ :root { /* -- Layout dimensions -- */ --ix-header-h: 48px; /* -- Map iX classic-dark tokens to shadcn/Chainlit CSS vars -- */ /* Background hierarchy (iX: color-1 … color-4) */ --ix-bg-1: #0f1619; --ix-bg-2: #283236; --ix-bg-3: #3c484d; --ix-bg-4: #4c5a60; /* Primary / Dynamic (iX brand: #00bde3 / #00eaff) */ --ix-primary: #00bde3; --ix-primary-hover: #1aecff; --ix-primary-active: #00eaff; --ix-primary-contrast: #000000; /* Text (iX: std-text, soft-text, weak-text, contrast-text) */ --ix-text: rgba(245, 252, 255, 0.9); --ix-text-soft: rgba(229, 247, 255, 0.65); --ix-text-weak: rgba(219, 244, 255, 0.4); --ix-text-contrast: #ffffff; /* Borders (iX: std-bdr, soft-bdr, weak-bdr) */ --ix-bdr: rgba(211, 236, 248, 0.55); --ix-bdr-soft: rgba(211, 236, 248, 0.4); --ix-bdr-weak: rgba(224, 245, 255, 0.25); --ix-bdr-x-weak: rgba(142, 157, 165, 0.2); /* Component surfaces (iX: component-1) */ --ix-surface: rgba(140, 161, 171, 0.2); --ix-surface-hover: rgba(140, 161, 171, 0.45); --ix-surface-active: rgba(140, 161, 171, 0.25); /* Status colors */ --ix-success: #44cc00; --ix-warning: #ffbb00; --ix-alarm: #ff2453; --ix-info: #357fff; /* Shadows (iX: shadow-1 … shadow-4) */ --ix-shadow-1: 0 2px 2px 0 #000000, 0 1px 1px 0 rgba(0, 0, 0, 0.6); --ix-shadow-2: -4px 0 8px 0 #000000, 4px 0 8px 0 #000000, 0 0 16px 0 rgba(0, 0, 0, 0.6); --ix-shadow-3: 0 2px 6px 0 #000000, 0 0 8px 0 rgba(0, 0, 0, 0.6); /* Typography (iX: Siemens Sans, fallback to system) */ --ix-font: 'Siemens Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --ix-font-code: 'JetBrains Mono', 'Fira Code', monospace; /* ── Map to shadcn/Chainlit internal vars ─────────── */ --primary: 190 100% 45% !important; /* #00bde3 */ --primary-foreground: 0 0% 0% !important; /* black on primary */ --ring: 190 100% 45% !important; --background: 195 25% 8% !important; /* #0f1619 */ --foreground: 200 100% 98% !important; /* near-white */ --card: 195 16% 18% !important; /* #283236 */ --card-foreground: 200 100% 98% !important; --border: 196 30% 55% / 0.4 !important; /* soft-bdr */ --muted: 195 16% 18% !important; /* #283236 */ --muted-foreground: 200 70% 95% / 0.65 !important; --accent: 195 16% 27% !important; /* #3c484d */ --accent-foreground: 200 100% 98% !important; --destructive: 347 100% 57% !important; /* #ff2453 alarm */ --destructive-foreground: 0 0% 100% !important; --input: 196 30% 55% / 0.55 !important; --secondary: 195 16% 27% !important; --secondary-foreground: 200 100% 98% !important; --popover: 195 25% 8% !important; --popover-foreground: 200 100% 98% !important; --radius: 0.25rem; } /* ── iX Classic Dark Override for .dark class ───────────────────────────── */ /* Chainlit uses .dark on for dark mode — must override here too */ .dark { --primary: 190 100% 45% !important; --primary-foreground: 0 0% 0% !important; --ring: 190 100% 45% !important; --background: 195 25% 8% !important; --foreground: 200 100% 98% !important; --card: 195 16% 18% !important; --card-foreground: 200 100% 98% !important; --border: 196 30% 55% / 0.4 !important; --muted: 195 16% 18% !important; --muted-foreground: 200 70% 95% / 0.65 !important; --accent: 195 16% 27% !important; --accent-foreground: 200 100% 98% !important; --destructive: 347 100% 57% !important; --destructive-foreground: 0 0% 100% !important; --input: 196 30% 55% / 0.55 !important; --secondary: 195 16% 27% !important; --secondary-foreground: 200 100% 98% !important; --popover: 195 25% 8% !important; --popover-foreground: 200 100% 98% !important; --radius: 0.25rem !important; --sidebar-background: 195 16% 18% !important; --sidebar-foreground: 200 100% 98% !important; --sidebar-primary: 190 100% 45% !important; --sidebar-primary-foreground: 0 0% 0% !important; --sidebar-accent: 195 16% 27% !important; --sidebar-accent-foreground: 200 100% 98% !important; --sidebar-border: 196 30% 55% / 0.4 !important; } /* ── iX Classic Light Override ──────────────────────────────────────────── */ .light, [data-theme="light"] { --ix-bg-1: #ffffff; --ix-bg-2: #eff0f1; --ix-bg-3: #e2e4e6; --ix-bg-4: #d8dadd; --ix-primary: #006e93; --ix-primary-hover: #196269; --ix-primary-active: #16565c; --ix-primary-contrast: #ffffff; --ix-text: rgba(0, 10, 20, 0.9); --ix-text-soft: rgba(0, 10, 20, 0.6); --ix-text-weak: rgba(0, 10, 20, 0.4); --ix-text-contrast: #000000; --ix-bdr: rgba(0, 20, 40, 0.3); --ix-bdr-soft: rgba(0, 20, 40, 0.2); --ix-bdr-weak: rgba(35, 48, 60, 0.15); --ix-bdr-x-weak: rgba(174, 181, 189, 0.2); --ix-surface: rgba(168, 173, 179, 0.2); --ix-surface-hover: rgba(168, 173, 179, 0.15); --ix-surface-active: rgba(168, 173, 179, 0.3); --ix-success: #2c8500; --ix-warning: #ffbb00; --ix-alarm: #d72332; --ix-info: #0041b2; --ix-shadow-1: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.1); --ix-shadow-2: -4px 0 8px 0 rgba(0, 0, 0, 0.2), 4px 0 8px 0 rgba(0, 0, 0, 0.2), 0 0 16px 0 rgba(0, 0, 0, 0.1); --ix-shadow-3: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 0 8px 0 rgba(0, 0, 0, 0.1); --primary: 196 100% 29% !important; /* #006e93 */ --primary-foreground: 0 0% 100% !important; --ring: 196 100% 29% !important; --background: 0 0% 100% !important; --foreground: 210 67% 4% !important; --card: 210 7% 94% !important; /* #eff0f1 */ --card-foreground: 210 67% 4% !important; --border: 206 33% 12% / 0.2 !important; --muted: 210 7% 94% !important; --muted-foreground: 210 33% 4% / 0.6 !important; --accent: 210 5% 89% !important; --accent-foreground: 210 67% 4% !important; --destructive: 355 75% 49% !important; --destructive-foreground: 0 0% 100% !important; --input: 206 33% 12% / 0.3 !important; --secondary: 210 5% 89% !important; --secondary-foreground: 210 67% 4% !important; --popover: 0 0% 100% !important; --popover-foreground: 210 67% 4% !important; } /* ── Global Styling ─────────────────────────────────────────────────────── */ body, html, #root { font-family: var(--ix-font) !important; background-color: var(--ix-bg-1) !important; color: var(--ix-text) !important; } /* ── Main area + sidebar backgrounds ─────────────────────────────────────── */ main, .MuiPaper-root { background-color: var(--ix-bg-1) !important; } /* Left sidebar (Chainlit thread drawer) */ nav, aside { background-color: var(--ix-bg-2) !important; border-color: var(--ix-bdr-weak) !important; border-right: 1px solid var(--ix-bdr-weak) !important; } /* Sidebar items – ghost hover like iX IxMenuItem */ nav a, aside a, nav button, aside button { transition: background-color 150ms ease !important; } nav a:hover, aside a:hover, nav button:hover, aside button:hover { background-color: var(--ix-surface-hover) !important; } /* ── Login page ──────────────────────────────────────────────────────────── * * Chainlit 2.10 has NO .auth-page class. The login page renders as: * div.grid.min-h-svh.lg\:grid-cols-2 * > div (form side — contains .logo img top-left, form centre) * > div (image side — contains login_page_image) * We detect the login page via :has(#email) since #email only exists there. */ /* Login page background */ #root:has(#email) > div { background: var(--ix-bg-1) !important; } /* Top-left logo: ensure Siemens logo replaces Chainlit default */ #root:has(#email) .logo { width: 150px !important; height: auto !important; content: url("/public/logo_light.png") !important; } /* Right-side image: contain the logo instead of stretching it */ #root:has(#email) .bg-muted img { object-fit: contain !important; padding: 15% !important; } /* Login submit button */ #root:has(#email) button[type="submit"] { background-color: var(--ix-primary) !important; border-color: var(--ix-primary) !important; color: var(--ix-primary-contrast) !important; border-radius: var(--radius) !important; font-weight: 600 !important; letter-spacing: 0.01em !important; transition: background-color 150ms ease, border-color 150ms ease !important; } #root:has(#email) button[type="submit"]:hover { background-color: var(--ix-primary-hover) !important; border-color: var(--ix-primary-hover) !important; } /* OAuth provider buttons */ #root:has(#email) button[type="button"] { border-color: var(--ix-surface-border) !important; } /* Right-side image panel */ #root:has(#email) .bg-muted { background: var(--ix-bg-2) !important; } /* ── Accent color for links ──────────────────────────────────────────────── */ a { color: var(--ix-primary); } a:hover { color: var(--ix-primary-hover); } /* ── Send button ─────────────────────────────────────────────────────────── */ button[type="submit"] { background-color: var(--ix-primary) !important; color: var(--ix-primary-contrast) !important; border-radius: var(--radius) !important; transition: background-color 150ms ease !important; } button[type="submit"]:hover { background-color: var(--ix-primary-hover) !important; } /* ── iX-style small border-radius (iX uses 4px / 0.25rem) ───────────────── */ [class*="card"], [class*="Card"], [class*="badge"], [class*="Badge"] { border-radius: var(--radius) !important; } /* ── iX Progress bar style ───────────────────────────────────────────────── */ [role="progressbar"] > div { border-radius: 2px !important; } /* ── iX Input / Composer styling ─────────────────────────────────────────── */ /* Message composer – iX input feel */ textarea, input[type="text"], [class*="composer"] textarea { font-family: var(--ix-font) !important; border-color: var(--ix-bdr) !important; border-radius: var(--radius) !important; transition: border-color 150ms ease !important; } textarea:focus, input[type="text"]:focus, [class*="composer"] textarea:focus { border-color: var(--ix-primary) !important; outline: none !important; box-shadow: 0 0 0 1px var(--ix-primary) !important; } /* ── iX Card-style message bubbles ───────────────────────────────────────── */ /* Assistant messages – subtle iX card surface */ [class*="message"][class*="assistant"], [class*="step"]:not(:has([data-siscan-panel])) { border-radius: var(--radius) !important; } /* Chainlit header bar */ header, [class*="header"], .MuiAppBar-root { background-color: var(--ix-bg-1) !important; border-bottom: 1px solid var(--ix-bdr-weak) !important; } /* All dropdowns, popovers, menus – must float above everything */ [role="menu"], [role="listbox"], [class*="dropdown"], [class*="Dropdown"], [class*="popover"], [class*="Popover"], [class*="Popper"], .MuiPopover-root, .MuiMenu-root, .MuiPopper-root { z-index: 1400 !important; } /* ═══════════════════════════════════════════════════════════════════════════ SidePanel: persistent right panel ═══════════════════════════════════════════════════════════════════════════ */ /* * Chainlit uses Tailwind w-screen (width:100vw) on its main wrappers. * This forces them to viewport-width, ignoring parent margins. * Fix: override w-screen inside #root to respect the constrained parent. */ #root { width: calc(100vw - 500px) !important; max-width: calc(100vw - 500px) !important; overflow-x: hidden !important; box-sizing: border-box !important; } /* Override Tailwind w-screen (width:100vw) to respect #root bounds */ #root .w-screen { width: 100% !important; max-width: 100% !important; } /* Chainlit main + footer – stay within the constrained root */ main, .cl-main { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .cl-chat-footer, footer, [class*="composer"] { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* * The SidePanel is position:fixed so it paints outside normal flow. * Its inline-custom wrapper inside the message must not contribute any * height or scrollbar to the chat. Zero it out completely. */ .inline-custom:has([data-siscan-panel]) { height: 0 !important; min-height: 0 !important; max-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; flex: none !important; } /* Inline custom elements – full width, no horizontal overflow */ .inline-custom-element, [class*="custom-element"] { max-width: 100% !important; overflow-x: hidden !important; } /* ScoreCard / LeadCard: suppress horizontal scrollbar on all ancestor wrappers */ .cl-step, [class*="message"], [class*="step"], [class*="message"] > div, [class*="step"] > div { overflow-x: hidden !important; }