/* Custom CSS — LexLatam unified theme system */ /* ═══════════════════════════════════════════════════════════════ THEME SYSTEM — Light + Dark with auto-detection Initial theme is applied synchronously in chainlit.js (FOUC-free). The toggle in custom.js writes a `lex_theme` cookie and flips the `data-theme` attribute on . ═══════════════════════════════════════════════════════════════ */ /* ── LIGHT MODE (default) ── */ :root, html[data-theme="light"] { --lex-bg: #f7f6f3; --lex-bg-raised: #ffffff; --lex-surface: #ffffff; --lex-surface-hover: #f2f0ec; --lex-surface-active: #e8e5de; --lex-border: rgba(0, 0, 0, 0.07); --lex-border-strong: rgba(0, 0, 0, 0.12); --lex-text: #1a1815; --lex-text-secondary: #5c5548; --lex-text-muted: #9c9485; /* Brand blue — primary action color in light mode */ --lex-brand: #0a5e8a; --lex-brand-hover: #0b6fa0; --lex-brand-bg: rgba(10, 94, 138, 0.06); --lex-brand-border: rgba(10, 94, 138, 0.15); /* Gold accent — secondary highlight in light mode */ --lex-gold: #9a7b0a; --lex-gold-bright: #b8960e; --lex-gold-bg: rgba(154, 123, 10, 0.06); --lex-gold-border: rgba(154, 123, 10, 0.12); /* Functional */ --lex-emerald: #0f8a60; --lex-emerald-bg: rgba(15, 138, 96, 0.05); --lex-emerald-border: rgba(15, 138, 96, 0.1); --lex-red: #dc2626; --lex-red-bg: rgba(220, 38, 38, 0.05); /* User message */ --lex-user-bg: #0a5e8a; --lex-user-text: #ffffff; /* Input */ --lex-input-bg: #ffffff; --lex-input-border: rgba(0, 0, 0, 0.1); --lex-input-focus-ring: rgba(10, 94, 138, 0.12); --lex-input-focus-border: rgba(10, 94, 138, 0.35); /* Sidebar */ --lex-sidebar-bg: #f0ede6; --lex-sidebar-active-bg: rgba(10, 94, 138, 0.08); --lex-sidebar-active-border: rgba(10, 94, 138, 0.18); --lex-sidebar-active-text: #0a5e8a; } /* ── DARK MODE ── */ html[data-theme="dark"] { --lex-bg: #0c1019; --lex-bg-raised: #131825; --lex-surface: #1a2030; --lex-surface-hover: #212840; --lex-surface-active: #283050; --lex-border: rgba(255, 255, 255, 0.06); --lex-border-strong: rgba(255, 255, 255, 0.1); --lex-text: #e8e5de; --lex-text-secondary: #9c9a92; --lex-text-muted: #5c5a52; /* In dark mode, gold becomes the primary action color */ --lex-brand: #d4ad0e; --lex-brand-hover: #eab308; --lex-brand-bg: rgba(234, 179, 8, 0.07); --lex-brand-border: rgba(234, 179, 8, 0.16); --lex-gold: #d4ad0e; --lex-gold-bright: #eab308; --lex-gold-bg: rgba(234, 179, 8, 0.07); --lex-gold-border: rgba(234, 179, 8, 0.16); --lex-emerald: #34d399; --lex-emerald-bg: rgba(52, 211, 153, 0.07); --lex-emerald-border: rgba(52, 211, 153, 0.14); --lex-red: #f87171; --lex-red-bg: rgba(248, 113, 113, 0.07); --lex-user-bg: #243050; --lex-user-text: #d0d8e4; --lex-input-bg: var(--lex-surface); --lex-input-border: rgba(255, 255, 255, 0.1); --lex-input-focus-ring: rgba(234, 179, 8, 0.06); --lex-input-focus-border: rgba(234, 179, 8, 0.3); --lex-sidebar-bg: var(--lex-bg-raised); --lex-sidebar-active-bg: rgba(234, 179, 8, 0.07); --lex-sidebar-active-border: rgba(234, 179, 8, 0.16); --lex-sidebar-active-text: #d4ad0e; } /* ── Body & font ── */ body { font-family: 'Lato', 'Helvetica Neue', sans-serif; } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--lex-border-strong); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--lex-text-muted); } /* ════════════════════════════════════════════════════════════════ SIDEBAR ════════════════════════════════════════════════════════════════ */ [data-sidebar="sidebar"], [data-sidebar="sidebar"] > div, [data-sidebar="header"], [data-sidebar="content"], [data-sidebar="footer"], [data-sidebar="group"], [data-sidebar="group-content"], [data-sidebar="menu"], [data-sidebar="sidebar"] .bg-sidebar, [data-sidebar="sidebar"] [class*="bg-"] { background: var(--lex-sidebar-bg) !important; border-color: var(--lex-border) !important; } [data-sidebar="sidebar"] { border-right: 1px solid var(--lex-border) !important; } /* Sidebar buttons — toggle, search, new chat */ #sidebar-trigger-button, #search-chats-button { color: var(--lex-text-muted) !important; background: transparent !important; } #sidebar-trigger-button:hover, #search-chats-button:hover { background: var(--lex-surface-hover) !important; color: var(--lex-text-secondary) !important; } /* New chat button — uses brand accent (blue in light, gold in dark) */ #new-chat-button, button#new-chat-button, button[id="new-chat-button"] { background: var(--lex-sidebar-active-bg) !important; color: var(--lex-sidebar-active-text) !important; border: 1px solid var(--lex-sidebar-active-border) !important; border-radius: 8px !important; padding: 8px 16px !important; font-weight: 500 !important; margin: 8px !important; } #new-chat-button:hover, button#new-chat-button:hover, button[id="new-chat-button"]:hover { background: var(--lex-surface-hover) !important; } /* Thread items */ [data-sidebar="menu-button"], [data-sidebar="menu-item"] button, [data-sidebar="group-label"], [data-sidebar="content"] { color: var(--lex-text-secondary) !important; font-weight: normal !important; font-size: 13px !important; border-radius: 8px !important; background: transparent !important; } [data-sidebar="menu-button"]:hover, [data-sidebar] button:hover, [data-sidebar="menu-item"] button:hover { background: var(--lex-surface-hover) !important; color: var(--lex-text-secondary) !important; } /* Active thread — brand accent */ [data-sidebar="menu-button"][data-active="true"], [data-sidebar="menu-item"] button[data-active="true"], [data-sidebar="menu-button"][aria-current="page"], [data-sidebar="menu-item"] button[aria-current="page"], [data-sidebar="menu-button"].active, [data-sidebar="menu-item"] button.active { background: var(--lex-sidebar-active-bg) !important; border: 1px solid var(--lex-sidebar-active-border) !important; color: var(--lex-sidebar-active-text) !important; font-weight: 600 !important; } /* Sidebar text gradient fade — match container bg */ [data-sidebar="menu-button"] .bg-gradient-to-l, [data-sidebar="menu-button"] [class*="bg-gradient"] { background: linear-gradient(to left, var(--lex-sidebar-bg), transparent) !important; } [data-sidebar="menu-button"][data-active="true"] .bg-gradient-to-l, [data-sidebar="menu-button"][data-active="true"] [class*="bg-gradient"], [data-sidebar="menu-button"][aria-current="page"] .bg-gradient-to-l, [data-sidebar="menu-button"][aria-current="page"] [class*="bg-gradient"], [data-sidebar="menu-button"].active .bg-gradient-to-l, [data-sidebar="menu-button"].active [class*="bg-gradient"] { background: linear-gradient(to left, var(--lex-sidebar-active-bg), transparent) !important; } /* Date group labels */ [data-sidebar="group-label"], [data-sidebar="group-label"] span { color: var(--lex-text-muted) !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; } /* Three-dots options button */ #thread-options, [data-sidebar="menu-button"] button { background: transparent !important; color: var(--lex-text-muted) !important; } [data-sidebar="menu-button"] button:hover { background: var(--lex-surface-hover) !important; color: var(--lex-text-secondary) !important; } /* Sidebar toggle button */ .cl-sidebar-toggle-btn, button[class*="cl-sidebar-toggle-btn"] { color: var(--lex-text-secondary) !important; background-color: transparent !important; } .cl-sidebar-toggle-btn:hover, button[class*="cl-sidebar-toggle-btn"]:hover { background-color: var(--lex-surface-hover) !important; } .cl-sidebar-toggle-btn[data-state="open"], button[class*="cl-sidebar-toggle-btn"][data-state="open"] { background-color: var(--lex-sidebar-active-bg) !important; color: var(--lex-sidebar-active-text) !important; } /* ════════════════════════════════════════════════════════════════ USER MENU & DROPDOWN ════════════════════════════════════════════════════════════════ */ /* Avatar trigger */ .cl-user-menu-trigger, button[id^="radix-"]:has(span.rounded-full) { background-color: var(--lex-brand) !important; color: #ffffff !important; } .cl-user-menu-trigger:hover, button[id^="radix-"]:has(span.rounded-full):hover { background-color: var(--lex-brand-hover) !important; } /* Admin/affiliate dashboard links */ .admin-dashboard-link, .affiliate-dashboard-link { background-color: transparent !important; color: var(--lex-text) !important; } .admin-dashboard-link:hover, .affiliate-dashboard-link:hover { background-color: var(--lex-surface-hover) !important; } /* Logout button — brand accent */ [role="menuitem"]:has(svg.lucide-log-out) { background-color: var(--lex-brand-bg) !important; color: var(--lex-brand) !important; } [role="menuitem"]:has(svg.lucide-log-out):hover { background-color: var(--lex-brand) !important; color: #ffffff !important; } [role="menuitem"]:has(svg.lucide-log-out) svg { color: currentColor !important; } /* Dropdown menu container */ [data-radix-menu-content], [id^="radix-"][role="menu"], [role="menu"], [data-radix-popper-content-wrapper] [role="menu"] { background-color: var(--lex-bg-raised) !important; border: 1px solid var(--lex-border-strong) !important; min-width: 280px !important; border-radius: 10px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important; } html[data-theme="dark"] [data-radix-menu-content], html[data-theme="dark"] [role="menu"] { background-color: var(--lex-surface) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important; } [role="menuitem"], [role="menu"] button, [role="menu"] a { color: var(--lex-text-secondary) !important; background: transparent !important; } [role="menuitem"]:hover, [role="menu"] button:hover, [role="menu"] a:hover { background: var(--lex-surface-hover) !important; color: var(--lex-text) !important; } [role="menuitem"].text-destructive, [role="menu"] .text-destructive { color: var(--lex-red) !important; } [role="menuitem"].text-destructive:hover, [role="menu"] .text-destructive:hover { background: var(--lex-red-bg) !important; } [role="separator"] { background: var(--lex-border) !important; } /* Subscription info row */ .user-subscription-info { padding: 12px 16px !important; background-color: var(--lex-brand-bg) !important; color: var(--lex-text) !important; font-size: 13px !important; display: block !important; transition: all 0.2s ease !important; } .user-subscription-info:hover { background-color: var(--lex-surface-hover) !important; text-decoration: none !important; } .user-subscription-info .subscription-plan { font-weight: 600 !important; color: var(--lex-brand) !important; margin-bottom: 4px !important; display: flex !important; align-items: center !important; gap: 6px !important; } .user-subscription-info .subscription-status { font-size: 11px !important; color: var(--lex-text-secondary) !important; } .user-subscription-info .plan-badge { display: inline-block !important; padding: 2px 8px !important; border-radius: 12px !important; font-size: 10px !important; font-weight: 600 !important; text-transform: uppercase !important; } .plan-badge.free { background-color: var(--lex-surface-active) !important; color: var(--lex-text-secondary) !important; } .plan-badge.monthly { background-color: var(--lex-gold-bg) !important; color: var(--lex-gold) !important; border: 1px solid var(--lex-gold-border) !important; } .plan-badge.yearly { background-color: var(--lex-brand) !important; color: #ffffff !important; } .plan-badge.trialing { background-color: var(--lex-emerald-bg) !important; color: var(--lex-emerald) !important; border: 1px solid var(--lex-emerald-border) !important; } /* Billing menu items */ [role="menuitem"].billing-item { padding: 8px 16px !important; color: var(--lex-brand) !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 8px !important; min-height: 40px !important; width: 100% !important; box-sizing: border-box !important; } [role="menuitem"].billing-item:hover { background-color: var(--lex-brand-bg) !important; } [role="menuitem"].billing-item:active { background-color: var(--lex-brand) !important; color: #ffffff !important; } [role="menuitem"].billing-item svg { margin-right: 8px !important; color: var(--lex-brand) !important; flex-shrink: 0 !important; } /* Hidden sidebar plan/billing buttons */ .sidebar-current-plan, .plan-billing-button { display: none !important; } @media (max-width: 768px) { .user-subscription-info { padding: 12px 12px !important; font-size: 12px !important; } .user-subscription-info .subscription-plan { flex-wrap: wrap !important; gap: 4px !important; } .user-subscription-info .plan-badge { padding: 2px 6px !important; font-size: 9px !important; } [role="menuitem"].billing-item { padding: 10px 12px !important; min-height: 44px !important; font-size: 14px !important; } [role="menuitem"].billing-item span { word-break: break-word !important; } } /* ════════════════════════════════════════════════════════════════ GENERIC ELEMENTS ════════════════════════════════════════════════════════════════ */ /* Code blocks */ pre { background-color: var(--lex-surface) !important; border: 1px solid var(--lex-border) !important; border-radius: 6px !important; padding: 16px !important; overflow-x: auto !important; } /* Inline code */ code:not(pre code) { background-color: var(--lex-surface) !important; border-radius: 3px !important; padding: 2px 4px !important; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important; } /* Links */ a { color: var(--lex-brand) !important; text-decoration: none !important; } a:hover { color: var(--lex-brand-hover) !important; text-decoration: underline !important; } /* Headings */ h1, h2, h3, h4, h5, h6 { color: var(--lex-text) !important; margin-top: 24px !important; margin-bottom: 16px !important; } /* Loading bar */ .sonner-loading-bar { background: var(--lex-brand) !important; } /* MUI buttons */ button.MuiButton-root, button.MuiButtonBase-root { background-color: var(--lex-brand) !important; color: #ffffff !important; } button.MuiButton-root:hover, button.MuiButtonBase-root:hover { background-color: var(--lex-brand-hover) !important; } .MuiLinearProgress-root, .MuiCircularProgress-root { color: var(--lex-brand) !important; } /* Focus ring */ .focus-visible\:ring-ring:focus-visible, *:focus-visible { --tw-ring-color: var(--lex-brand) !important; } /* Login page */ #root > div > .MuiBox-root { background-color: var(--lex-bg); } .relative.hidden.bg-muted.lg\:block { background-color: var(--lex-brand-bg) !important; } .auth-form { background-color: var(--lex-bg-raised); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 24px; } .auth-form input { border: 1px solid var(--lex-border-strong); border-radius: 4px; padding: 10px; width: 100%; } .auth-form button[type="submit"] { background-color: var(--lex-brand); color: #ffffff; border: none; border-radius: 4px; padding: 10px 16px; font-weight: 500; cursor: pointer; width: 100%; margin-top: 16px; } .auth-form button[type="submit"]:hover { background-color: var(--lex-brand-hover); } .relative.hidden.bg-muted.lg\:block img.absolute.inset-0.h-full.w-full.object-cover { display: none !important; } .relative.hidden.bg-muted.lg\:block::after { content: ""; position: absolute; inset: 0; background-image: url('/lextam_ai/public/favicon.svg'); background-position: center; background-repeat: no-repeat; background-size: 60%; opacity: 0.8; } .auth-container, .auth-page, .auth-form-container { background-color: var(--lex-bg) !important; color: var(--lex-text) !important; } .auth-header { color: var(--lex-brand) !important; font-weight: bold !important; font-size: 24px !important; margin-bottom: 24px !important; } /* Toast styles — themed */ [data-sonner-toast] { --success-bg: var(--lex-brand-bg) !important; --success-border: var(--lex-brand) !important; --success-text: var(--lex-brand) !important; --info-bg: var(--lex-brand-bg) !important; --info-border: var(--lex-brand) !important; --info-text: var(--lex-brand) !important; --warning-bg: var(--lex-gold-bg) !important; --warning-border: var(--lex-gold-border) !important; --warning-text: var(--lex-gold) !important; --error-bg: var(--lex-red-bg) !important; --error-border: var(--lex-red) !important; --error-text: var(--lex-red) !important; } /* Empty placeholder */ .empty\:before\:text-muted-foreground:empty:before { color: var(--lex-text-muted) !important; } /* ════════════════════════════════════════════════════════════════ FEATURE FLAG BANNER ════════════════════════════════════════════════════════════════ */ #feature-flag-banner { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; background: var(--lex-brand-bg) !important; border-bottom: 1px solid var(--lex-brand-border) !important; color: var(--lex-brand) !important; padding: 12px 20px !important; text-align: center !important; font-weight: 600 !important; font-size: 14px !important; z-index: 99999 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; display: none !important; width: 100vw !important; margin: 0 !important; } #feature-flag-banner.active { display: block !important; } #feature-flag-banner .banner-content { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; color: var(--lex-brand) !important; font-size: 11px !important; } #feature-flag-banner .banner-icon { font-size: 18px !important; } body.has-feature-banner { padding-top: 48px !important; } body.has-feature-banner [data-sidebar="sidebar"], body.has-feature-banner .cl-sidebar, body.has-feature-banner main, body.has-feature-banner #root > div { margin-top: 48px !important; } /* ════════════════════════════════════════════════════════════════ SUBSCRIPTION BADGE ════════════════════════════════════════════════════════════════ */ .subscription-badge-container { position: fixed !important; bottom: 16px !important; left: 16px !important; z-index: 1000 !important; } .subscription-badge { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 8px 14px !important; background: var(--lex-brand-bg) !important; border: 1px solid var(--lex-brand-border) !important; color: var(--lex-brand) !important; border-radius: 20px !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; cursor: pointer !important; transition: all 0.2s ease !important; text-decoration: none !important; } .subscription-badge:hover { transform: translateY(-2px) !important; background: var(--lex-surface-hover) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; } .subscription-badge:active { transform: translateY(0) !important; } .subscription-badge-icon { font-size: 14px !important; } .subscription-badge-tooltip { position: absolute !important; bottom: 100% !important; left: 50% !important; transform: translateX(-50%) !important; background: rgba(0, 0, 0, 0.85) !important; color: white !important; padding: 6px 12px !important; border-radius: 6px !important; font-size: 11px !important; font-weight: 500 !important; white-space: nowrap !important; opacity: 0 !important; visibility: hidden !important; transition: all 0.2s ease !important; margin-bottom: 8px !important; pointer-events: none !important; } .subscription-badge-tooltip::after { content: '' !important; position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) !important; border: 6px solid transparent !important; border-top-color: rgba(0, 0, 0, 0.85) !important; } .subscription-badge-container:hover .subscription-badge-tooltip { opacity: 1 !important; visibility: visible !important; } @media (max-width: 768px) { .subscription-badge-container { display: none !important; } } /* ════════════════════════════════════════════════════════════════ USER TYPE MODAL ════════════════════════════════════════════════════════════════ */ .user-type-modal { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 10000 !important; display: none !important; align-items: center !important; justify-content: center !important; } .user-type-modal.active { display: flex !important; } .user-type-modal .modal-backdrop { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background-color: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(4px) !important; } .user-type-modal .modal-content { position: relative !important; background-color: var(--lex-bg-raised) !important; border-radius: 16px !important; padding: 32px !important; max-width: 500px !important; width: 90% !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important; z-index: 10001 !important; animation: modalSlideIn 0.3s ease-out !important; } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .user-type-modal h2 { color: var(--lex-brand) !important; font-size: 24px !important; font-weight: 700 !important; margin: 0 0 12px 0 !important; text-align: center !important; } .user-type-modal p { color: var(--lex-text-secondary) !important; font-size: 16px !important; margin: 0 0 24px 0 !important; text-align: center !important; line-height: 1.5 !important; } .user-type-modal form { display: flex !important; flex-direction: column !important; gap: 20px !important; } .user-type-modal label { color: var(--lex-text) !important; font-size: 14px !important; font-weight: 600 !important; margin-bottom: 8px !important; display: block !important; } .user-type-modal select { width: 100% !important; padding: 12px 16px !important; border: 2px solid var(--lex-border-strong) !important; border-radius: 8px !important; font-size: 15px !important; color: var(--lex-text) !important; background-color: var(--lex-bg-raised) !important; cursor: pointer !important; transition: all 0.2s ease !important; } .user-type-modal select:hover { border-color: var(--lex-brand) !important; } .user-type-modal select:focus { outline: none !important; border-color: var(--lex-brand) !important; box-shadow: 0 0 0 3px var(--lex-input-focus-ring) !important; } .user-type-modal .modal-actions { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-top: 8px !important; } .user-type-modal .btn-primary { width: 100% !important; padding: 12px 24px !important; background-color: var(--lex-brand) !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s ease !important; } .user-type-modal .btn-primary:hover { background-color: var(--lex-brand-hover) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px var(--lex-input-focus-ring) !important; } .user-type-modal .btn-primary:active { transform: translateY(0) !important; } .user-type-modal .btn-link { width: 100% !important; padding: 10px 24px !important; background-color: transparent !important; color: var(--lex-text-secondary) !important; border: none !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.2s ease !important; text-decoration: underline !important; } .user-type-modal .btn-link:hover { color: var(--lex-brand) !important; } @media (max-width: 768px) { .user-type-modal .modal-content { padding: 24px !important; width: 95% !important; } .user-type-modal h2 { font-size: 20px !important; } .user-type-modal p { font-size: 14px !important; } } /* ════════════════════════════════════════════════════════════════ GUEST EMPTY STATE HELPERS ════════════════════════════════════════════════════════════════ */ #lex-empty-helper { position: relative; z-index: 5; width: 100%; display: flex; justify-content: center; padding: 12px 16px 24px; transition: opacity 0.3s ease, transform 0.3s ease; animation: lexFadeUp 0.5s ease both; } @keyframes lexFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .lex-eo-inner { width: 100%; max-width: 540px; display: flex; flex-direction: column; align-items: center; } /* ── Hero ── */ .lex-eo-hero { text-align: center; margin-bottom: 28px; } .lex-eo-icon { width: 52px; height: 52px; margin: 0 auto 18px; background: var(--lex-brand-bg); border: 1px solid var(--lex-brand-border); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; } .lex-eo-title { font-family: Georgia, 'Times New Roman', serif; font-size: 26px; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 10px; color: var(--lex-text) !important; font-weight: normal; } .lex-eo-title em { font-style: italic; color: var(--lex-brand) !important; } .lex-eo-sub { font-size: 15px; color: var(--lex-text-secondary) !important; line-height: 1.6; max-width: 400px; margin: 0 auto; } /* ── Feature pills ── */ .lex-eo-pills { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; } .lex-eo-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--lex-text-secondary); background: var(--lex-surface); border: 1px solid var(--lex-border-strong); padding: 6px 14px; border-radius: 999px; white-space: nowrap; } .lex-eo-pill svg { width: 13px; height: 13px; flex-shrink: 0; } /* ── Query cards ── */ .lex-eo-queries-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lex-text-muted); margin-bottom: 10px; align-self: flex-start; } .lex-eo-queries { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-bottom: 6px; } .lex-eo-query { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--lex-surface); border: 1px solid var(--lex-border-strong); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: all 0.2s ease; text-align: left; font-family: inherit; font-size: 13.5px; color: var(--lex-text); line-height: 1.4; } .lex-eo-query:hover { background: var(--lex-surface-hover); border-color: var(--lex-border-strong); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .lex-eo-query:active { transform: translateY(0); background: var(--lex-surface-active); } .lex-eo-query-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; } .lex-eo-query-text { flex: 1; font-weight: 500; } .lex-eo-query-arrow { width: 16px; height: 16px; color: var(--lex-text-muted); flex-shrink: 0; transition: transform 0.2s ease, color 0.2s; } .lex-eo-query:hover .lex-eo-query-arrow { color: var(--lex-brand); transform: translateX(3px); } /* ── Micro demo ── */ .lex-eo-demo { width: 100%; margin-top: 20px; } .lex-eo-demo-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; background: none; border: 1px dashed var(--lex-border-strong); border-radius: 10px; padding: 12px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--lex-text-muted); transition: all 0.2s; } .lex-eo-demo-toggle:hover { color: var(--lex-text-secondary); border-color: var(--lex-border-strong); background: var(--lex-surface-hover); } .lex-eo-demo-toggle svg { transition: transform 0.3s ease; } .lex-eo-demo-content { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease; margin-top: 0; } .lex-eo-demo-content.open { max-height: 400px; opacity: 1; margin-top: 12px; } .lex-eo-demo-card { background: var(--lex-surface); border: 1px solid var(--lex-border-strong); border-radius: 12px; overflow: hidden; } .lex-eo-demo-row { padding: 14px 16px; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.65; color: var(--lex-text-secondary); } .lex-eo-demo-row + .lex-eo-demo-row { border-top: 1px solid var(--lex-border); } .lex-eo-demo-row strong { color: var(--lex-text); font-weight: 600; } .lex-eo-demo-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lex-text-muted); flex-shrink: 0; min-width: 24px; padding-top: 2px; } .lex-eo-demo-tag-ai { color: var(--lex-brand); } .lex-eo-demo-cite { margin-top: 8px; background: var(--lex-emerald-bg); border: 1px solid var(--lex-emerald-border); border-radius: 8px; padding: 10px 12px; font-family: monospace; font-size: 11px; line-height: 1.45; color: var(--lex-emerald); } /* ── Upgrade hint ── */ .lex-eo-upgrade { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding: 0 2px; font-size: 11.5px; color: var(--lex-text-muted); } .lex-eo-upgrade a { color: var(--lex-brand) !important; text-decoration: none; font-weight: 600; transition: color 0.2s; } .lex-eo-upgrade a:hover { color: var(--lex-brand-hover) !important; } /* ── Hide sidebar for guest mode ── */ body.lex-guest-mode [data-sidebar="sidebar"], body.lex-guest-mode .group.peer.hidden.md\:block, body.lex-guest-mode [data-state="expanded"][data-collapsible], body.lex-guest-mode .group.peer { display: none !important; } body.lex-guest-mode #sidebar-trigger-button, body.lex-guest-mode #new-chat-button, body.lex-guest-mode #search-chats-button { display: none !important; } body.lex-guest-mode main { margin-left: 0 !important; } body.lex-guest-mode main ~ div, body.lex-guest-mode .group.peer { width: 0 !important; min-width: 0 !important; overflow: hidden !important; border: none !important; } /* Responsive (overlay) */ @media (max-width: 640px) { #lex-empty-helper { padding: 10px 12px 16px; } .lex-eo-title { font-size: 22px; } .lex-eo-query { padding: 12px 14px; font-size: 13px; } } /* ════════════════════════════════════════════════════════════════ CHAT UI ════════════════════════════════════════════════════════════════ */ /* Page & Layout */ main.relative { background: var(--lex-bg) !important; } #header { background: var(--lex-bg) !important; border-bottom: 1px solid var(--lex-border) !important; } div[class*="flex flex-col mx-auto"][class*="flex-grow p-4"] { padding: 20px 16px !important; } /* User Messages */ [data-step-type="user_message"] .bg-accent, [data-step-type="user_message"] div[class*="bg-accent"] { background: var(--lex-user-bg) !important; color: var(--lex-user-text) !important; border: none !important; border-radius: 20px 20px 6px 20px !important; padding: 12px 18px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important; max-width: 80% !important; } [data-step-type="user_message"] .prose, [data-step-type="user_message"] .prose div[role="article"] { color: var(--lex-user-text) !important; font-size: 14px !important; line-height: 1.55 !important; } /* Inline Markdown code should use the user bubble's own contrast instead of placing a light muted surface behind its light foreground text. */ [data-step-type="user_message"] code:not(pre code) { background-color: transparent !important; color: inherit !important; padding: 0 !important; } /* AI Messages */ .ai-message { gap: 12px !important; } .ai-message > span .rounded-full { border: 1.5px solid var(--lex-brand-border) !important; background: var(--lex-brand-bg) !important; } .ai-message > span .rounded-full img { padding: 2px !important; background: transparent !important; } .ai-message .prose, .ai-message .prose div[role="article"], .ai-message .prose li { color: var(--lex-text) !important; font-size: 14px !important; line-height: 1.7 !important; } .ai-message .prose .font-bold { color: var(--lex-text) !important; font-weight: 700 !important; } /* Markdown tables need an explicit themed surface. Chainlit's table colors can otherwise diverge from the active LexLatam theme, leaving emphasized text with insufficient contrast against the inherited background. */ .ai-message .prose table { color: var(--lex-text) !important; background: var(--lex-surface) !important; border: 1px solid var(--lex-border-strong) !important; border-radius: 10px !important; border-collapse: separate !important; border-spacing: 0 !important; overflow: hidden !important; } .ai-message .prose table thead, .ai-message .prose table th { color: var(--lex-text-secondary) !important; background: var(--lex-surface-hover) !important; } .ai-message .prose table tbody, .ai-message .prose table tr, .ai-message .prose table td { color: var(--lex-text) !important; background: var(--lex-surface) !important; } .ai-message .prose table tbody tr:hover, .ai-message .prose table tbody tr:hover td { background: var(--lex-surface-hover) !important; } .ai-message .prose table th, .ai-message .prose table td, .ai-message .prose table tr { border-color: var(--lex-border-strong) !important; } .ai-message .prose table strong, .ai-message .prose table .font-bold { color: inherit !important; } .ai-message .prose ul { margin: 6px 0 6px 2px !important; padding-left: 18px !important; } .ai-message .prose li { margin-top: 3px !important; color: var(--lex-text-secondary) !important; font-size: 13.5px !important; } .ai-message .prose [role="none"], .ai-message .prose hr { border-color: var(--lex-border) !important; margin: 14px 0 !important; } .ai-message .prose a { color: var(--lex-brand) !important; text-decoration: none !important; font-weight: 500 !important; } .ai-message .prose a:hover { color: var(--lex-brand-hover) !important; text-decoration: underline !important; } /* Citation / Source Links */ .ai-message .prose a[href*="/api/documents"], .ai-message .prose a[href*="/documents/"] { display: inline-flex !important; align-items: center !important; gap: 4px !important; color: var(--lex-emerald) !important; background: var(--lex-emerald-bg) !important; border: 1px solid var(--lex-emerald-border) !important; padding: 4px 10px 4px 8px !important; border-radius: 6px !important; font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important; font-size: 11.5px !important; font-weight: 500 !important; line-height: 1.4 !important; text-decoration: none !important; transition: all 0.15s ease !important; } .ai-message .prose a[href*="/api/documents"]:hover, .ai-message .prose a[href*="/documents/"]:hover { background: rgba(15, 138, 96, 0.1) !important; border-color: rgba(15, 138, 96, 0.2) !important; text-decoration: none !important; } /* Dark mode citation brightness bump */ html[data-theme="dark"] .ai-message .prose a[href*="/api/documents"], html[data-theme="dark"] .ai-message .prose a[href*="/documents/"] { color: #34d399 !important; } html[data-theme="dark"] .ai-message .prose a[href*="/api/documents"]:hover, html[data-theme="dark"] .ai-message .prose a[href*="/documents/"]:hover { background: rgba(52, 211, 153, 0.12) !important; border-color: rgba(52, 211, 153, 0.25) !important; } .ai-message .prose li:has(> a[href*="/api/documents"]) { list-style: none !important; margin-left: -18px !important; padding-left: 0 !important; } .ai-message .prose div[role="article"]:has(+ ul) .font-bold:last-child { color: var(--lex-text-muted) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 600 !important; } /* Document info card */ .ai-message .prose div[role="article"]:first-child:has(~ div[role="article"] ~ ul) { background: var(--lex-surface) !important; border: 1px solid var(--lex-border) !important; border-radius: 10px !important; padding: 14px 16px !important; margin-bottom: 12px !important; font-size: 13px !important; line-height: 1.6 !important; } /* Action Buttons */ div[class*="-ml-1.5"] button { color: var(--lex-text-secondary) !important; opacity: 0.85 !important; transition: opacity 0.15s ease, background 0.15s ease !important; } div[class*="-ml-1.5"] button:hover { opacity: 1 !important; background: var(--lex-surface-hover) !important; color: var(--lex-text) !important; } button.edit-message { color: var(--lex-text-muted) !important; } /* Input Area */ #message-composer { background: var(--lex-input-bg) !important; border: 1px solid var(--lex-input-border) !important; border-radius: 22px !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important; min-height: auto !important; padding: 10px 14px !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } #message-composer:focus-within { border-color: var(--lex-input-focus-border) !important; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06), 0 0 0 3px var(--lex-input-focus-ring) !important; } textarea#chat-input { background: transparent !important; color: var(--lex-text) !important; border: none !important; font-size: 14px !important; min-height: 22px !important; } textarea#chat-input::placeholder { color: var(--lex-text-muted) !important; } /* Send button — uses brand (blue in light, gold in dark) */ button#chat-submit { background: var(--lex-brand) !important; color: var(--lex-bg) !important; border-radius: 10px !important; width: 32px !important; height: 32px !important; transition: all 0.15s ease !important; } /* Light mode send button: white icon for contrast on blue */ html[data-theme="light"] button#chat-submit { color: #ffffff !important; } button#chat-submit:hover:not(:disabled) { background: var(--lex-brand-hover) !important; transform: scale(1.05) !important; } button#chat-submit:disabled { background: var(--lex-surface-active) !important; color: var(--lex-text-muted) !important; opacity: 0.4 !important; } /* Upload button */ #upload-button, button#upload-button { color: var(--lex-text-muted) !important; background: transparent !important; } #upload-button:hover, button#upload-button:hover { background: var(--lex-surface-hover) !important; color: var(--lex-text-secondary) !important; } /* Header avatar */ #user-nav-button .bg-primary { background: var(--lex-brand) !important; color: #ffffff !important; font-weight: 700 !important; } /* Readme button — improve contrast in light mode Targets the #readme-button in header */ html[data-theme="light"] #header button#readme-button, html[data-theme="light"] #header #readme-button { color: var(--lex-text-secondary) !important; } html[data-theme="light"] #header button#readme-button:hover, html[data-theme="light"] #header #readme-button:hover { color: var(--lex-text) !important; } /* Readme modal — align with LexLatam dark product direction */ html[data-theme="light"] [role="dialog"], html[data-theme="dark"] [role="dialog"], html[data-theme="light"] .modal-content, html[data-theme="dark"] .modal-content { background: #131825 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: #e8e5de !important; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38) !important; } html[data-theme="light"] [role="dialog"] .prose, html[data-theme="dark"] [role="dialog"] .prose, html[data-theme="light"] .modal-content .prose, html[data-theme="dark"] .modal-content .prose { color: #9c9a92 !important; max-width: 720px !important; } html[data-theme="light"] [role="dialog"] h1, html[data-theme="dark"] [role="dialog"] h1, html[data-theme="light"] .modal-content h1, html[data-theme="dark"] .modal-content h1 { color: #e8e5de !important; font-size: 2.5rem !important; line-height: 1.05 !important; letter-spacing: -0.04em !important; margin-bottom: 0.75rem !important; } html[data-theme="light"] [role="dialog"] h2, html[data-theme="dark"] [role="dialog"] h2, html[data-theme="light"] .modal-content h2, html[data-theme="dark"] .modal-content h2, html[data-theme="light"] [role="dialog"] h3, html[data-theme="dark"] [role="dialog"] h3, html[data-theme="light"] .modal-content h3, html[data-theme="dark"] .modal-content h3 { color: #e8e5de !important; } html[data-theme="light"] [role="dialog"] strong, html[data-theme="dark"] [role="dialog"] strong, html[data-theme="light"] .modal-content strong, html[data-theme="dark"] .modal-content strong { color: #e8e5de !important; } html[data-theme="light"] [role="dialog"] hr, html[data-theme="dark"] [role="dialog"] hr, html[data-theme="light"] .modal-content hr, html[data-theme="dark"] .modal-content hr { border-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="light"] [role="dialog"] ul, html[data-theme="dark"] [role="dialog"] ul, html[data-theme="light"] .modal-content ul, html[data-theme="dark"] .modal-content ul { color: #9c9a92 !important; } html[data-theme="light"] [role="dialog"] li::marker, html[data-theme="dark"] [role="dialog"] li::marker, html[data-theme="light"] .modal-content li::marker, html[data-theme="dark"] .modal-content li::marker { color: #d4ad0e !important; } html[data-theme="light"] [role="dialog"] a, html[data-theme="dark"] [role="dialog"] a, html[data-theme="light"] .modal-content a, html[data-theme="dark"] .modal-content a { color: #d4ad0e !important; font-weight: 700 !important; } html[data-theme="light"] [role="dialog"] a:hover, html[data-theme="dark"] [role="dialog"] a:hover, html[data-theme="light"] .modal-content a:hover, html[data-theme="dark"] .modal-content a:hover { color: #eab308 !important; } /* ════════════════════════════════════════════════════════════════ THEME TOGGLE BUTTON (injected by custom.js) ════════════════════════════════════════════════════════════════ */ .lex-theme-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--lex-border-strong); background: transparent; color: var(--lex-text-muted); cursor: pointer; transition: all 0.2s; padding: 0; } .lex-theme-toggle:hover { background: var(--lex-surface-hover); color: var(--lex-text-secondary); border-color: var(--lex-border-strong); } .lex-theme-toggle svg { width: 16px; height: 16px; } /* Hide built-in Chainlit theme toggle (redundant with our custom toggle) */ /* Targets the sun/moon icon button in the header that shows theme dropdown */ #header button:has(> svg.lucide-sun), #header button:has(> svg.lucide-moon), #header button[aria-label*="theme" i], #header button[title*="theme" i] { display: none !important; } /* ════════════════════════════════════════════════════════════════ MISC CLEANUP ════════════════════════════════════════════════════════════════ */ .watermark { display: none !important; } .rounded-full:has(> .lucide-arrow-down) { background: var(--lex-surface) !important; border-color: var(--lex-border-strong) !important; color: var(--lex-text-muted) !important; } .animate-spin { color: var(--lex-brand) !important; } .overflow-y-auto::-webkit-scrollbar { width: 5px; } .overflow-y-auto::-webkit-scrollbar-track { background: transparent; } .overflow-y-auto::-webkit-scrollbar-thumb { background: var(--lex-border-strong); border-radius: 3px; } .overflow-y-auto::-webkit-scrollbar-thumb:hover { background: var(--lex-text-muted); } /* ════════════════════════════════════════════════════════════════ MESSAGE ENTRY ANIMATION ════════════════════════════════════════════════════════════════ */ [data-step-type] { animation: lexMsgIn 0.3s ease both !important; } @keyframes lexMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ════════════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { [data-step-type="user_message"] .bg-accent, [data-step-type="user_message"] div[class*="bg-accent"] { max-width: 88% !important; } #message-composer { border-radius: 18px !important; padding: 8px 12px !important; } } /* ════════════════════════════════════════════════════════════════ THREAD MENU - HIDE SHARE OPTION ════════════════════════════════════════════════════════════════ */ /* Hide the second menu item (share/link option) in thread dropdown */ [role="menu"] [role="menuitem"]:nth-child(2) { display: none !important; } /* If there's a separator after the first item, hide it too */ [role="menu"] [role="menuitem"]:first-child + [role="separator"] { display: none !important; }