/* Bridge CSS — Monochrome dark theme (Notion/Cursor-style) Overrides old style.css variables and provides consistent dark UI. */ /* ============ iOS / MOBILE FOUNDATIONS ============ */ html { -webkit-text-size-adjust: 100%; } [onclick], .ripple-container, .feature-card, .peptide-card, .protocol-card, .nav-btn, .rs-bottom-nav-btn, .rs-nav-btn { cursor: pointer; -webkit-tap-highlight-color: transparent; } /* ============ COLOR SYSTEM ============ */ :root { /* Backgrounds — subtle layering, borders provide separation */ --bg: #191919 !important; --bg-subtle: #1E1E1E !important; --bg-secondary: #212121 !important; --card: #212121 !important; --surface: #282828 !important; --surface-hover: #303030 !important; /* Borders — must be visible against both bg and card */ --border: #383838 !important; --border-strong: #505050 !important; /* Text hierarchy — 4 clear levels */ --text: #E8E8E8 !important; --text-primary: #FFFFFF !important; --text-secondary: #A0A0A0 !important; --text-muted: #7A7A7A !important; /* Accent — monochrome (was blue) */ --teal: #E8E8E8 !important; --teal-light: #FFFFFF !important; --teal-dark: #A0A0A0 !important; --emerald: #E8E8E8 !important; --emerald-light: #FFFFFF !important; --primary: #E8E8E8 !important; /* Remove shadows for flat monochrome look */ --shadow-xs: none !important; --shadow-sm: none !important; --shadow-md: none !important; --shadow-lg: none !important; --shadow-xl: none !important; } /* CRITICAL: body.dark in style.css re-declares variables on , which overrides inherited :root values. We must re-override on body.dark too. */ body.dark { --bg: #191919 !important; --bg-subtle: #1E1E1E !important; --bg-secondary: #212121 !important; --card: #212121 !important; --surface: #282828 !important; --surface-hover: #303030 !important; --glass: rgba(25,25,25,0.85) !important; --glass-strong: rgba(20,20,20,0.92) !important; --border: #383838 !important; --border-strong: #505050 !important; --text: #E8E8E8 !important; --text-primary: #FFFFFF !important; --text-secondary: #A0A0A0 !important; --text-muted: #7A7A7A !important; --teal: #E8E8E8 !important; --teal-light: #FFFFFF !important; --teal-dark: #A0A0A0 !important; --emerald: #E8E8E8 !important; --emerald-light: #FFFFFF !important; --primary: #E8E8E8 !important; --shadow-xs: none !important; --shadow-sm: none !important; --shadow-md: none !important; --shadow-lg: none !important; --shadow-xl: none !important; --shadow-2xl: none !important; background: #191919 !important; color: #E8E8E8 !important; } /* Light mode restores original style.css colors */ [data-theme="light"] { --bg: #f6f8fb !important; --bg-subtle: #f0f2f5 !important; --bg-secondary: #eef1f6 !important; --card: #ffffff !important; --surface: #ffffff !important; --surface-hover: #fafbfc !important; --border: rgba(0,0,0,0.08) !important; --border-strong: rgba(0,0,0,0.12) !important; --text: #0c1222 !important; --text-primary: #0c1222 !important; --text-secondary: #4b5675 !important; --text-muted: #8994a8 !important; --teal: #2563eb !important; --teal-light: #3b82f6 !important; --teal-dark: #1d4ed8 !important; --emerald: #2563eb !important; --emerald-light: #60a5fa !important; --primary: #2563eb !important; --shadow-xs: 0 1px 2px rgba(0,0,0,0.04) !important; --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important; --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05) !important; --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04) !important; --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04) !important; } /* ============ CARD & CONTAINER OVERRIDES ============ */ .peptide-card, .feature-card, .home-input-wrap, .modal-overlay > div, .detail-panel, .detail-header, .ix-card, .protocol-detail, .community-card, .research-card, .tool-card, .stat-card, .vial-card, .calc-card, .builder-card, .tracker-card, .compare-card { background: var(--card) !important; border-color: var(--border) !important; box-shadow: none !important; } .peptide-card::before, .feature-card::before { display: none !important; } /* Hover — border brightens */ .peptide-card:hover, .feature-card:hover, .protocol-card:hover, .builder-item:hover, .dose-log-item:hover { border-color: var(--border-strong) !important; box-shadow: none !important; } /* Tags on cards */ .peptide-card .pc-tag { background: rgba(255,255,255,0.05) !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; } .peptide-card:hover .pc-tag { background: rgba(255,255,255,0.08) !important; color: var(--text-secondary) !important; } /* Category badges — monochrome */ .peptide-card .pc-badge { background: rgba(255,255,255,0.08) !important; color: var(--text-secondary) !important; box-shadow: none !important; border: 1px solid var(--border) !important; } /* KB search */ .kb-search { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; box-shadow: none !important; } .kb-search:focus { border-color: var(--border-strong) !important; } /* Stat boxes */ .kb-stat, .stat-box { background: var(--surface) !important; border-color: var(--border) !important; } /* Severity cards — keep semantic colors but muted */ .ix-card-high { background: rgba(220, 38, 38, 0.06) !important; border-color: rgba(220, 38, 38, 0.2) !important; } .ix-card-moderate, .vial-warning { background: rgba(217, 119, 6, 0.06) !important; border-color: rgba(217, 119, 6, 0.2) !important; } .ix-card-low { background: var(--surface) !important; border-color: var(--border) !important; } /* Legal badges */ .legal-badge-amber { background: rgba(217, 119, 6, 0.1) !important; color: #D97706 !important; } /* ============ LIGHT MODE CARD RESTORES ============ */ [data-theme="light"] .peptide-card, [data-theme="light"] .feature-card, [data-theme="light"] .home-input-wrap, [data-theme="light"] .detail-panel, [data-theme="light"] .detail-header, [data-theme="light"] .ix-card, [data-theme="light"] .ix-card-high, [data-theme="light"] .ix-card-low, [data-theme="light"] .protocol-detail, [data-theme="light"] .community-card, [data-theme="light"] .research-card, [data-theme="light"] .tool-card, [data-theme="light"] .stat-card, [data-theme="light"] .vial-card, [data-theme="light"] .calc-card, [data-theme="light"] .builder-card, [data-theme="light"] .tracker-card, [data-theme="light"] .compare-card { background: white !important; box-shadow: var(--shadow-xs) !important; border-color: var(--border) !important; } [data-theme="light"] .peptide-card::before, [data-theme="light"] .feature-card::before { display: block !important; } [data-theme="light"] .peptide-card .pc-tag { background: var(--bg) !important; color: var(--text-muted) !important; border: none !important; } [data-theme="light"] .peptide-card .pc-badge { background: unset !important; color: white !important; border: none !important; box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important; } [data-theme="light"] .kb-search { background: white !important; border-color: var(--border) !important; color: var(--text) !important; box-shadow: var(--shadow-xs) !important; } [data-theme="light"] .vial-warning, [data-theme="light"] .ix-card-moderate { background: #fffbeb !important; border-color: #fef3c7 !important; } /* ============ LAYOUT ============ */ /* Hide old navigation */ .sidebar, .sub-panel, .topbar, .mobile-nav, .mob-explore-backdrop, .mob-explore-sheet, #particleCanvas, .seo-content, #consentBanner, .tour-overlay { display: none !important; } #app { display: flex !important; flex-direction: row !important; height: 100vh; background: var(--rs-bg, #191919) !important; } .rs-main { flex: 1; min-width: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; } .content-area, #contentArea { flex: 1; max-width: 1140px; width: 100%; margin: 0 auto; padding: clamp(18px, 3.5vw, 40px) !important; overflow-x: hidden; height: auto !important; } #contentArea:has(.kb-view) { max-width: 1400px; } @media (min-width: 769px) { #contentArea:has(.rs-fullpage-with-chat), #contentArea:has(.rs-page-with-chat), #contentArea:has(.rs-calc-with-chat) { max-width: calc(100% - 360px); margin-right: 360px !important; margin-left: 0 !important; padding-right: 20px !important; } } body { background: var(--rs-bg, #191919) !important; font-family: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; overflow: hidden !important; color: var(--text, #E8E8E8) !important; } /* ============ TYPOGRAPHY — Consistent text hierarchy ============ */ /* Headings */ #contentArea h1, #contentArea h2, #contentArea h3 { color: #FFFFFF !important; } /* Catch inline dark text colors */ #contentArea [style*="color:#0"], #contentArea [style*="color: #0"], #contentArea [style*="color:#1"], #contentArea [style*="color: #1"], #contentArea [style*="color:rgb(0"], #contentArea [style*="color:rgb(12"], #contentArea [style*="color:rgb(15"] { color: var(--text) !important; } /* Page hero uses its own white text */ .page-hero, .page-hero * { color: inherit; } /* Override blue-tinted grays from body.dark rules */ .home-heading, .kb-title, .calc-title, .peptide-card .pc-name, .protocol-card .proto-name { color: #FFFFFF !important; } .home-sub, .kb-subtitle { color: var(--text-secondary) !important; } .detail-list li, .proto-phase-items li { color: #E8E8E8 !important; } .detail-list li:hover { color: #FFFFFF !important; } /* ============ MONOCHROME — All accents are grayscale ============ */ /* Remove decorative blurs */ .home-view::before, .home-view::after { background: none !important; } /* Home badge */ .home-badge { background: rgba(255,255,255,0.05) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; box-shadow: none !important; } /* Feature card hover */ .feature-card:hover .fc-label, .feature-card:hover .fc-icon { color: #FFFFFF !important; } /* Filter pills */ .pill:hover, .pill.active, .cat-chip:hover, .cat-chip.active { background: rgba(255,255,255,0.08) !important; border-color: var(--border-strong) !important; color: #FFFFFF !important; } .cat-chip i { color: var(--text-muted) !important; } .cat-chip:hover i, .cat-chip.active i { color: #FFFFFF !important; } /* Peptide card hover */ .peptide-card:hover .pc-name, .protocol-card:hover .proto-name { color: #FFFFFF !important; } /* Detail sections */ .detail-section-title { color: var(--text-secondary) !important; } .detail-section-title::before { background: var(--text-muted) !important; } .detail-tag { background: rgba(255,255,255,0.05) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; } .detail-stat:hover { background: rgba(255,255,255,0.04) !important; border-color: var(--border-strong) !important; } .detail-list li::before { box-shadow: none !important; background: var(--text-muted) !important; } /* Calculator results */ .calc-results { background: rgba(255,255,255,0.03) !important; border-color: var(--border) !important; } .calc-result-value { color: #FFFFFF !important; } .calc-result-row { border-color: var(--border) !important; } /* Compare table */ .compare-table tr:hover td { background: rgba(255,255,255,0.03) !important; } /* Tracker */ .tracker-section-title i { color: var(--text-muted) !important; } .dose-log-today { border-left-color: #FFFFFF !important; } .dose-log-date { color: var(--text) !important; } /* Social/community */ .social-tab.active { background: rgba(255,255,255,0.08) !important; color: #FFFFFF !important; } /* Focus states — clean white ring */ .home-input-wrap:focus-within, .kb-search:focus { border-color: var(--border-strong) !important; } /* Buttons */ .btn-outline-sm:hover { border-color: var(--text) !important; color: var(--text) !important; } /* Page hero — monochrome gradient */ .page-hero, .ix-hero { background: linear-gradient(135deg, #1A1A1A 0%, #212121 50%, #1A1A1A 100%) !important; } .page-hero .ph-orb { display: none !important; } .ph-grad { background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: #FFFFFF !important; color: #FFFFFF !important; } .ph-stat-n { color: #FFFFFF !important; } .ph-stat { background: rgba(255,255,255,0.04) !important; border-color: var(--border) !important; } /* Spotlight */ .spotlight-result:hover { background: rgba(255,255,255,0.04) !important; } .spotlight-panel { background: #212121 !important; border-color: var(--border) !important; } /* Modals and overlays with navy backgrounds */ .cal-modal, .tour-card, .disclaimer { background: #212121 !important; border-color: var(--border) !important; } /* Light mode restores all monochrome overrides */ [data-theme="light"] .detail-section-title, [data-theme="light"] .detail-section-title::before { color: unset !important; background: unset !important; } [data-theme="light"] .page-hero { background: unset !important; } [data-theme="light"] .ph-grad { background: unset !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: unset !important; color: unset !important; } [data-theme="light"] .home-view::before, [data-theme="light"] .home-view::after { background: unset !important; } [data-theme="light"] .page-hero .ph-orb { display: block !important; } [data-theme="light"] .ph-stat-n { color: #fbbf24 !important; } [data-theme="light"] .ph-stat { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.1) !important; } [data-theme="light"] .cat-chip i { color: unset !important; } [data-theme="light"] .home-send-btn { background: linear-gradient(135deg, var(--teal), var(--emerald)) !important; color: white !important; } /* ============ INLINE STYLE OVERRIDES ============ */ /* White backgrounds in inline styles */ #contentArea [style*="background:white"], #contentArea [style*="background: white"], #contentArea [style*="background:#fff"], #contentArea [style*="background:#FFF"], #contentArea [style*="background:#ffffff"], #contentArea [style*="background:#FFFFFF"] { background: var(--card) !important; } /* Inline gradients */ #contentArea [style*="linear-gradient"] { background: var(--bg-subtle) !important; background-image: none !important; } /* Inline shadows */ #contentArea [style*="box-shadow"] { box-shadow: none !important; } /* Inputs */ #contentArea input:not(.calc-input):not(.kb-search):not(.compare-select), #contentArea select:not(.compare-select), #contentArea textarea { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } /* Primary buttons — Notion-style (light on dark) */ #contentArea .btn-primary, #contentArea [style*="background:#2563EB"], #contentArea [style*="background: #2563EB"], #contentArea [style*="background:#3B82F6"], #contentArea [style*="background: #3B82F6"] { background: #E8E8E8 !important; color: #111111 !important; } .home-send-btn { background: #E8E8E8 !important; color: #111111 !important; } /* Scrollbar */ .rs-main::-webkit-scrollbar, #contentArea::-webkit-scrollbar { width: 10px; height: 10px; } .rs-main::-webkit-scrollbar-thumb, #contentArea::-webkit-scrollbar-thumb { background: #383838; border-radius: 8px; border: 3px solid #191919; } /* ============ LIGHT MODE GLOBAL ============ */ [data-theme="light"] body { background: #F4F6FA !important; color: #0F1B2D !important; } [data-theme="light"] #app { background: #F4F6FA !important; } [data-theme="light"] #contentArea input, [data-theme="light"] #contentArea select, [data-theme="light"] #contentArea textarea { background: #fff !important; border-color: rgba(0,0,0,0.1) !important; color: #0c1222 !important; } [data-theme="light"] #contentArea [style*="linear-gradient"] { background: unset !important; background-image: unset !important; } [data-theme="light"] #contentArea h1, [data-theme="light"] #contentArea h2, [data-theme="light"] #contentArea h3 { color: #0c1222 !important; } [data-theme="light"] #contentArea [style*="background:white"], [data-theme="light"] #contentArea [style*="background: white"], [data-theme="light"] #contentArea [style*="background:#fff"], [data-theme="light"] #contentArea [style*="box-shadow"] { background: unset !important; box-shadow: unset !important; } /* ============ RESPONSIVE ============ */ @media (max-width: 768px) { html, body { overflow-x: hidden !important; max-width: 100vw !important; width: 100% !important; } input, select, textarea { font-size: 16px !important; } .rs-mobile-header { padding-top: env(safe-area-inset-top, 0px); } .rs-bottom-nav { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; } body { overflow-x: hidden; overflow-wrap: break-word; } img, svg, canvas { max-width: 100%; } [onclick], .ripple-container, .feature-card, .peptide-card, .protocol-card { touch-action: manipulation; } .rs-sidebar { display: none !important; } .rs-mobile-header { display: flex !important; } .rs-bottom-nav { display: flex !important; } #app { flex-direction: column !important; max-width: 100vw !important; width: 100% !important; overflow-x: hidden !important; } .rs-main { max-width: 100vw !important; width: 100% !important; overflow-x: hidden !important; } .content-area, #contentArea { padding-bottom: 100px !important; max-width: 100vw !important; width: 100% !important; overflow-x: hidden !important; word-wrap: break-word; overflow-wrap: break-word; } /* Prevent any child from causing horizontal overflow */ #contentArea * { max-width: 100% !important; box-sizing: border-box !important; } #contentArea img, #contentArea video, #contentArea canvas, #contentArea svg { max-width: 100% !important; height: auto; } #contentArea pre, #contentArea code { white-space: pre-wrap !important; word-break: break-all !important; overflow-x: hidden !important; } #contentArea table { display: block !important; overflow-x: auto !important; max-width: 100% !important; } /* Fix interaction checker panels */ .ix-panels { flex-direction: column !important; } .ix-panel { width: 100% !important; min-width: 0 !important; } .ix-hero-stats { flex-wrap: wrap; } .ix-card-pair { flex-wrap: wrap; gap: 4px; } /* Fix any grid that might overflow */ .kb-grid { grid-template-columns: 1fr !important; } .detail-stack-mols { grid-template-columns: repeat(2, 1fr) !important; } } @media (min-width: 769px) { .rs-mobile-header { display: none !important; } .rs-bottom-nav { display: none !important; } .rs-tools-sheet, .rs-sheet-backdrop { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ AI CHAT COMPONENT — Notion/Cursor style ═══════════════════════════════════════════════════════════════════════════ */ .rs-chat-wrapper { padding: 0 24px 32px; max-width: 720px; margin: 0 auto; } .rs-chat-container { background: var(--card, #212121); border: 1px solid var(--border, #383838); border-radius: 12px; display: flex; flex-direction: column; height: 480px; overflow: hidden; } .rs-chat-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border, #383838); flex-shrink: 0; } .rs-chat-header-left { display: flex; align-items: center; gap: 10px; } .rs-chat-avatar { width: 28px; height: 28px; border-radius: 6px; background: var(--surface, #282828); display: flex; align-items: center; justify-content: center; color: var(--text, #E8E8E8); } .rs-chat-header-text { display: flex; align-items: center; gap: 8px; } .rs-chat-header-title { font-size: 13px; font-weight: 600; color: var(--text, #E8E8E8); } .rs-chat-header-badge { font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 4px; background: var(--surface, #282828); color: var(--text-muted, #7A7A7A); letter-spacing: 0.02em; } .rs-chat-clear { background: none; border: none; color: var(--text-muted, #7A7A7A); cursor: pointer; padding: 4px 8px; border-radius: 4px; font-size: 13px; transition: background 0.15s, color 0.15s; } .rs-chat-clear:hover { background: var(--surface, #282828); color: var(--text, #E8E8E8); } .rs-chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; } .rs-chat-messages::-webkit-scrollbar { width: 4px; } .rs-chat-messages::-webkit-scrollbar-track { background: transparent; } .rs-chat-messages::-webkit-scrollbar-thumb { background: var(--border, #383838); border-radius: 2px; } /* Welcome state */ .rs-chat-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; gap: 16px; flex: 1; } .rs-chat-welcome-icon { color: var(--text-muted, #7A7A7A); opacity: 0.6; } .rs-chat-welcome-text { font-size: 13px; color: var(--text-secondary, #A0A0A0); max-width: 360px; line-height: 1.5; margin: 0; } .rs-chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 480px; } .rs-chat-suggestion { font-size: 12px; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border, #383838); background: var(--surface, #282828); color: var(--text-secondary, #A0A0A0); cursor: pointer; transition: all 0.15s; text-align: left; } .rs-chat-suggestion:hover { border-color: var(--border-strong, #505050); color: var(--text, #E8E8E8); background: var(--surface-hover, #303030); } /* Messages */ .rs-chat-msg { display: flex; gap: 10px; animation: rsChatFadeIn 0.2s ease; } @keyframes rsChatFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .rs-chat-msg-user { justify-content: flex-end; } .rs-chat-msg-user .rs-chat-msg-content { background: var(--surface, #282828); border: 1px solid var(--border, #383838); border-radius: 12px 12px 4px 12px; padding: 10px 14px; max-width: 85%; font-size: 13px; line-height: 1.5; color: var(--text, #E8E8E8); } .rs-chat-msg-avatar { width: 24px; height: 24px; border-radius: 6px; background: var(--surface, #282828); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-secondary, #A0A0A0); margin-top: 2px; } .rs-chat-msg-assistant .rs-chat-msg-content { max-width: 90%; font-size: 13px; line-height: 1.6; color: var(--text, #E8E8E8); } .rs-chat-msg-assistant .rs-chat-msg-content p { margin: 0 0 8px; } .rs-chat-msg-assistant .rs-chat-msg-content p:last-child { margin-bottom: 0; } .rs-chat-msg-assistant .rs-chat-msg-content strong { color: var(--text-primary, #FFFFFF); font-weight: 600; } .rs-chat-msg-assistant .rs-chat-msg-content code { font-size: 12px; background: var(--surface, #282828); padding: 2px 5px; border-radius: 4px; font-family: 'Spline Sans Mono', monospace; } .rs-chat-msg-assistant .rs-chat-msg-content pre { background: var(--bg, #191919); border: 1px solid var(--border, #383838); border-radius: 8px; padding: 12px; overflow-x: auto; margin: 8px 0; } .rs-chat-msg-assistant .rs-chat-msg-content pre code { background: none; padding: 0; font-size: 12px; } .rs-chat-msg-assistant .rs-chat-msg-content ul, .rs-chat-msg-assistant .rs-chat-msg-content ol { margin: 8px 0; padding-left: 20px; } .rs-chat-msg-assistant .rs-chat-msg-content li { margin-bottom: 4px; } .rs-chat-msg-assistant .rs-chat-msg-content h3, .rs-chat-msg-assistant .rs-chat-msg-content h4 { color: var(--text-primary, #FFFFFF); margin: 12px 0 4px; font-size: 13px; font-weight: 600; } /* Typing indicator */ .rs-chat-typing { display: inline-flex; gap: 4px; padding: 4px 0; } .rs-chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted, #7A7A7A); animation: rsChatBounce 1.4s infinite both; } .rs-chat-typing span:nth-child(2) { animation-delay: 0.16s; } .rs-chat-typing span:nth-child(3) { animation-delay: 0.32s; } @keyframes rsChatBounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } /* Error */ .rs-chat-error { color: #ef4444; font-size: 12px; display: flex; align-items: center; gap: 6px; } /* Input area */ .rs-chat-input-area { padding: 12px 16px 12px; border-top: 1px solid var(--border, #383838); flex-shrink: 0; } .rs-chat-input-wrapper { display: flex; align-items: flex-end; gap: 8px; background: var(--bg, #191919); border: 1px solid var(--border, #383838); border-radius: 10px; padding: 8px 8px 8px 14px; transition: border-color 0.15s; } .rs-chat-input-wrapper:focus-within { border-color: var(--border-strong, #505050); } .rs-chat-input { flex: 1; border: none; background: transparent; color: var(--text, #E8E8E8); font-size: 13px; font-family: inherit; line-height: 1.5; resize: none; outline: none; min-height: 20px; max-height: 120px; } .rs-chat-input::placeholder { color: var(--text-muted, #7A7A7A); } .rs-chat-send { width: 28px; height: 28px; border-radius: 6px; border: none; background: var(--text, #E8E8E8); color: var(--bg, #191919); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; transition: opacity 0.15s, transform 0.1s; } .rs-chat-send:disabled { opacity: 0.3; cursor: not-allowed; } .rs-chat-send:not(:disabled):hover { transform: scale(1.05); } .rs-chat-send:not(:disabled):active { transform: scale(0.95); } .rs-chat-disclaimer { text-align: center; font-size: 11px; color: var(--text-muted, #7A7A7A); margin-top: 8px; opacity: 0.7; } /* Mobile responsive */ @media (max-width: 768px) { .rs-chat-wrapper { padding: 0 12px 24px; } .rs-chat-container { height: 400px; border-radius: 10px; } .rs-chat-suggestions { max-width: 100%; } .rs-chat-suggestion { font-size: 11px; padding: 5px 10px; } } /* ═══════════════════════════════════════════════════════════════════════════ DETAIL POPUP WITH CHAT — Side-by-side layout ═══════════════════════════════════════════════════════════════════════════ */ .rs-detail-with-chat { display: flex; gap: 0; max-width: 1100px; width: 95%; max-height: 85vh; animation: modalScaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .rs-detail-with-chat .detail-panel { flex: 1; min-width: 0; max-width: none; width: auto; border-radius: 12px 0 0 12px; animation: none; } .rs-chat-detail-panel { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--card, #212121); border-left: 1px solid var(--border, #383838); border-radius: 0 12px 12px 0; overflow: hidden; } .rs-chat-detail-panel .rs-chat-container { height: 100%; border: none; border-radius: 0; background: transparent; } .rs-chat-detail-panel .rs-chat-messages { flex: 1; min-height: 0; } .rs-chat-detail-panel .rs-chat-suggestion { font-size: 11px; padding: 5px 9px; } /* Make the detail overlay handle the wider layout */ .detail-overlay.open .rs-detail-with-chat { margin: auto; } @media (max-width: 900px) { .rs-detail-with-chat { flex-direction: column; max-width: 96%; max-height: 95vh; } .rs-detail-with-chat .detail-panel { border-radius: 12px 12px 0 0; max-height: 40vh; overflow-y: auto; } .rs-chat-detail-panel { width: 100%; flex: 1; min-height: 350px; border-left: none; border-top: 1px solid var(--border, #383838); border-radius: 0 0 12px 12px; } } @media (max-width: 600px) { .rs-chat-detail-panel { min-height: 45vh; } .rs-detail-with-chat .detail-panel { max-height: 35vh; } } /* ═══════════════════════════════════════════════════════════════════════════ COMPARE PAGE AI ANALYSIS ═══════════════════════════════════════════════════════════════════════════ */ .rs-compare-ai { margin-top: 20px; border: 1px solid var(--border, #383838); border-radius: 12px; background: var(--card, #212121); overflow: hidden; animation: rsChatFadeIn 0.3s ease; } .rs-compare-ai-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border, #383838); } .rs-compare-ai-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--surface, #282828); display: flex; align-items: center; justify-content: center; color: var(--text, #E8E8E8); } .rs-compare-ai-title { font-size: 14px; font-weight: 600; color: var(--text, #E8E8E8); } .rs-compare-ai-badge { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 4px; background: var(--surface, #282828); color: var(--text-muted, #7A7A7A); margin-left: auto; } .rs-compare-ai-content { padding: 18px; font-size: 13px; line-height: 1.6; color: var(--text, #E8E8E8); } .rs-compare-ai-content p { margin: 0 0 10px; } .rs-compare-ai-content p:last-child { margin-bottom: 0; } .rs-compare-ai-content strong { color: var(--text-primary, #FFFFFF); font-weight: 600; } .rs-compare-ai-content ul, .rs-compare-ai-content ol { margin: 8px 0; padding-left: 20px; } .rs-compare-ai-content li { margin-bottom: 4px; } .rs-compare-ai-content h3, .rs-compare-ai-content h4 { color: var(--text-primary, #FFFFFF); margin: 14px 0 6px; font-size: 13px; font-weight: 600; } .rs-compare-ai-content code { font-size: 12px; background: var(--surface, #282828); padding: 2px 5px; border-radius: 4px; } /* Chat links */ .rs-chat-link { color: var(--text, #E8E8E8) !important; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--text-muted, #7A7A7A); transition: text-decoration-color 0.15s, color 0.15s; cursor: pointer; } .rs-chat-link:hover { color: #FFFFFF !important; text-decoration-color: #FFFFFF; } /* ═══════════════════════════════════════════════════════════════════════════ FULL-PAGE PEPTIDE DETAIL — Chat sidebar layout ═══════════════════════════════════════════════════════════════════════════ */ .rs-fullpage-with-chat { display: flex; width: 100%; gap: 0; min-height: calc(100vh - 80px); } .rs-fullpage-with-chat .protocol-detail { flex: 1; min-width: 0; max-width: none; margin-right: 0; padding: 32px; border-radius: 16px; border: 1px solid var(--border, #383838); background: var(--card, #212121); } .rs-fullpage-chat-sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; height: 100%; z-index: 50; border-left: 1px solid var(--border, #383838); background: var(--card, #212121); margin: 0; padding: 0; } .rs-fullpage-chat-sidebar .rs-chat-container { height: 100%; border-radius: 0; box-shadow: none; border: none; } @media (max-width: 1024px) { .rs-fullpage-chat-sidebar { width: 300px; } } @media (max-width: 768px) { .rs-fullpage-with-chat { flex-direction: column; } .rs-fullpage-with-chat .protocol-detail { margin-right: 0; } .rs-fullpage-chat-sidebar { position: relative; width: 100%; height: 400px; border-left: none; border-top: 1px solid var(--border, #383838); } } @media (max-width: 600px) { .rs-fullpage-chat-sidebar { height: 350px; } } /* ═══════════════════════════════════════════════════════════════════════════ CALCULATOR PAGE — Chat sidebar layout ═══════════════════════════════════════════════════════════════════════════ */ .rs-calc-with-chat { position: relative; width: 100%; } .rs-calc-with-chat .calc-view { width: 100%; max-width: none; } .rs-calc-chat-sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; height: 100%; z-index: 50; border-left: 1px solid var(--border, #383838); background: var(--card, #212121); margin: 0; padding: 0; } .rs-calc-chat-sidebar .rs-chat-container { height: 100%; border-radius: 0; box-shadow: none; border: none; } @media (max-width: 1024px) { .rs-calc-with-chat .calc-view { width: 100%; } .rs-calc-chat-sidebar { width: 300px; max-height: 500px; } } @media (max-width: 600px) { .rs-calc-chat-sidebar { width: calc(100% - 32px); max-height: 350px; bottom: 70px; } } /* ═══════════════════════════════════════════════════════════════════════════ GENERIC PAGE + CHAT SIDEBAR (KB, Protocols, Builder, Research) Now uses a floating overlay approach — page stays full width ═══════════════════════════════════════════════════════════════════════════ */ .rs-page-with-chat { position: relative; width: 100%; } .rs-page-with-chat > *:first-child { width: 100%; max-width: none; } .rs-page-chat-sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; height: 100%; z-index: 50; border-left: 1px solid var(--border, #383838); background: var(--card, #212121); margin: 0; padding: 0; } .rs-page-chat-sidebar .rs-chat-container { height: 100%; border-radius: 0; box-shadow: none; border: none; } @media (max-width: 1024px) { .rs-page-chat-sidebar { width: 300px; } } @media (max-width: 768px) { .rs-page-chat-sidebar, .rs-calc-chat-sidebar, .rs-fullpage-chat-sidebar { display: none !important; } } @media (max-width: 768px) { .rs-chat-fab { bottom: 78px; right: 14px; width: 42px; height: 42px; } /* Onboarding quiz mobile */ .rs-onboarding { padding: 16px; margin: 16px auto; } .rs-onboarding-goals { grid-template-columns: 1fr 1fr; gap: 6px; } .rs-onboarding-goal { padding: 10px 12px; font-size: 12px; } .rs-onboarding-actions { flex-direction: column; gap: 8px; } .rs-onboarding-submit, .rs-onboarding-skip { width: 100%; text-align: center; } /* Related peptides mobile */ .rs-related { padding: 14px; margin: 16px 0; } .rs-related-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .rs-related-card { padding: 10px; } .rs-related-name { font-size: 12px; } .rs-related-desc { font-size: 10px; } /* TL;DR mobile */ .rs-tldr { margin: 12px 0 16px; padding: 12px; } /* Chat input area mobile */ .rs-chat-input-area { padding: 8px; } .rs-chat-input { font-size: 14px; } /* Floating chat — compact on mobile */ .rs-page-chat-sidebar .rs-chat-container, .rs-calc-chat-sidebar .rs-chat-container, .rs-fullpage-chat-sidebar .rs-chat-container { border-radius: 10px; } .rs-page-chat-sidebar .rs-chat-messages, .rs-calc-chat-sidebar .rs-chat-messages, .rs-fullpage-chat-sidebar .rs-chat-messages { padding: 8px; } .rs-page-chat-sidebar .rs-chat-welcome, .rs-calc-chat-sidebar .rs-chat-welcome, .rs-fullpage-chat-sidebar .rs-chat-welcome { padding: 12px 8px; } .rs-page-chat-sidebar .rs-chat-welcome-icon, .rs-calc-chat-sidebar .rs-chat-welcome-icon, .rs-fullpage-chat-sidebar .rs-chat-welcome-icon { display: none; } .rs-page-chat-sidebar .rs-chat-suggestions, .rs-calc-chat-sidebar .rs-chat-suggestions, .rs-fullpage-chat-sidebar .rs-chat-suggestions { gap: 4px; } /* Detail popup mobile */ .rs-detail-with-chat { max-height: 95vh; } .rs-chat-detail-panel { max-height: 280px; } /* Compare table mobile scroll */ .compare-table { font-size: 12px; } } /* ═══════════════════════════════════════════════════════════════════════════ VOICE INPUT, RESPONSE ACTIONS, AI SPOTLIGHT ═══════════════════════════════════════════════════════════════════════════ */ /* Voice button */ .rs-chat-voice { width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent; color: var(--text-muted, #7A7A7A); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; transition: color 0.15s, background 0.15s; } .rs-chat-voice:hover { color: var(--text, #E8E8E8); background: var(--surface, #282828); } .rs-chat-voice-active { color: #ef4444 !important; animation: rsChatPulse 1s infinite; } @keyframes rsChatPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Response actions */ .rs-chat-msg-body { display: flex; flex-direction: column; gap: 4px; max-width: 90%; } .rs-chat-msg-actions { display: flex; gap: 4px; padding-left: 2px; } .rs-chat-msg-actions button { width: 24px; height: 24px; border-radius: 4px; border: none; background: transparent; color: var(--text-muted, #7A7A7A); cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .rs-chat-msg-actions button:hover { background: var(--surface, #282828); color: var(--text, #E8E8E8); } /* AI Spotlight option */ .spotlight-ai-btn { border-top: 1px solid var(--border, #383838) !important; } .spotlight-ai-btn svg { color: var(--text-secondary, #A0A0A0); } /* Minimize button */ .rs-chat-minimize { width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent; color: var(--text-muted, #7A7A7A); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; transition: color 0.15s, background 0.15s; } .rs-chat-minimize:hover { color: var(--text, #E8E8E8); background: var(--surface, #282828); } /* Collapsed floating sidebar */ .rs-chat-collapsed { display: none !important; } /* Floating action button to reopen chat */ .rs-chat-fab { position: fixed; right: 20px; bottom: 20px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border, #383838); background: var(--surface, #212121); color: var(--text, #E8E8E8); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1000; box-shadow: 0 4px 16px rgba(0,0,0,0.4); transition: transform 0.15s, box-shadow 0.15s; } .rs-chat-fab:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(0,0,0,0.5); } [data-theme="light"] .rs-chat-fab { background: #FFFFFF; border-color: #E3E8F0; color: #0F1B2D; box-shadow: 0 4px 16px rgba(0,0,0,0.1); } /* TL;DR Summary banner */ .rs-tldr { margin: 16px 0 20px; padding: 0; border-radius: 12px; border: 1px solid var(--border, #383838); background: var(--card, #212121); overflow: hidden; } .rs-tldr .rs-chat-container { height: 420px; border: none; border-radius: 0; } .rs-tldr .rs-chat-welcome { padding: 24px 16px; gap: 12px; } .rs-tldr .rs-chat-suggestions { max-width: 100%; padding: 0 4px; } .rs-tldr .rs-chat-input-area { padding: 8px 10px 10px; border-top: none; } .rs-tldr .rs-chat-input-wrapper { padding: 6px 8px 6px 12px; } .rs-tldr .rs-chat-disclaimer { display: none; } .rs-tldr-header { display: none; } .rs-tldr-content { font-size: 13px; line-height: 1.6; color: var(--text, #E8E8E8); } .rs-tldr-content p { margin: 0; } .rs-tldr-content strong { color: var(--text-primary, #FFFFFF); } /* ═══════════════════════════════════════════════════════════════════════════ LIGHT THEME OVERRIDES ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] .rs-chat-container { background: #FFFFFF; border-color: #E3E8F0; } [data-theme="light"] .rs-chat-header { border-color: #E3E8F0; color: #0F1B2D; } [data-theme="light"] .rs-chat-messages { background: #F8FAFD; } [data-theme="light"] .rs-chat-msg-user { background: #0F1B2D; color: #FFFFFF; } [data-theme="light"] .rs-chat-msg-assistant .rs-chat-msg-content { background: #FFFFFF; border: 1px solid #E3E8F0; color: #0F1B2D; } [data-theme="light"] .rs-chat-input { background: #F8FAFD; border-color: #E3E8F0; color: #0F1B2D; } [data-theme="light"] .rs-chat-input:focus { border-color: #B9C8E8; } [data-theme="light"] .rs-chat-input-area { border-color: #E3E8F0; background: #FFFFFF; } [data-theme="light"] .rs-chat-send { background: #0F1B2D; color: #FFFFFF; } [data-theme="light"] .rs-chat-suggestion { background: #F8FAFD; border-color: #E3E8F0; color: #5A6B82; } [data-theme="light"] .rs-chat-suggestion:hover { background: #EDF1F7; border-color: #B9C8E8; color: #0F1B2D; } [data-theme="light"] .rs-chat-welcome-title { color: #0F1B2D; } [data-theme="light"] .rs-chat-welcome-text { color: #5A6B82; } [data-theme="light"] .rs-chat-msg-actions button { color: #8B98AC; } [data-theme="light"] .rs-chat-msg-actions button:hover { color: #0F1B2D; background: #EDF1F7; } [data-theme="light"] .rs-chat-voice { color: #8B98AC; } [data-theme="light"] .rs-chat-voice:hover { color: #0F1B2D; background: #EDF1F7; } [data-theme="light"] .rs-tldr { background: #FFFFFF; border-color: #E3E8F0; } [data-theme="light"] .rs-tldr-content { color: #0F1B2D; } [data-theme="light"] .rs-tldr-content strong { color: #0F1B2D; } [data-theme="light"] .rs-chat-link { color: #2563EB; } [data-theme="light"] .rs-chat-link:hover { color: #1D4ED8; } [data-theme="light"] .rs-compare-ai { background: #FFFFFF; border-color: #E3E8F0; } [data-theme="light"] .rs-compare-ai-header { color: #0F1B2D; } /* ═══════════════════════════════════════════════════════════════════════════ ONBOARDING QUIZ ═══════════════════════════════════════════════════════════════════════════ */ .rs-onboarding { margin: 24px auto; max-width: 680px; padding: 24px; border-radius: 12px; border: 1px solid var(--border, #383838); background: var(--surface, #212121); } .rs-onboarding-header { margin-bottom: 16px; } .rs-onboarding-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--text, #E8E8E8); } .rs-onboarding-subtitle { margin: 6px 0 0; font-size: 13px; color: var(--text-muted, #7A7A7A); } .rs-onboarding-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-bottom: 16px; } .rs-onboarding-goal { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border, #383838); background: transparent; color: var(--text-secondary, #A0A0A0); font-size: 13px; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; text-align: left; } .rs-onboarding-goal:hover { border-color: var(--border-hover, #505050); color: var(--text, #E8E8E8); } .rs-onboarding-goal.selected { border-color: var(--text, #E8E8E8); background: rgba(255,255,255,0.05); color: var(--text, #E8E8E8); } .rs-onboarding-goal i { font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; } .rs-onboarding-actions { display: flex; align-items: center; gap: 12px; } .rs-onboarding-submit { padding: 10px 20px; border-radius: 8px; border: none; background: var(--text, #E8E8E8); color: var(--rs-accent-text, #111111); font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; } .rs-onboarding-submit:disabled { opacity: 0.4; cursor: not-allowed; } .rs-onboarding-submit:not(:disabled):hover { opacity: 0.85; } .rs-onboarding-skip { padding: 10px 16px; border-radius: 8px; border: none; background: transparent; color: var(--text-muted, #7A7A7A); font-size: 13px; cursor: pointer; } .rs-onboarding-skip:hover { color: var(--text, #E8E8E8); } .rs-onboarding-result { margin-top: 16px; padding: 16px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid var(--border, #383838); font-size: 13px; line-height: 1.7; color: var(--text, #E8E8E8); } .rs-onboarding-result p { margin: 0 0 8px; } .rs-onboarding-result ul { margin: 4px 0; padding-left: 18px; } .rs-onboarding-result li { margin-bottom: 4px; } /* Light theme quiz */ [data-theme="light"] .rs-onboarding { background: #FFFFFF; border-color: #E3E8F0; } [data-theme="light"] .rs-onboarding-title { color: #0F1B2D; } [data-theme="light"] .rs-onboarding-goal { border-color: #E3E8F0; color: #5A6B82; } [data-theme="light"] .rs-onboarding-goal:hover { border-color: #B9C8E8; color: #0F1B2D; } [data-theme="light"] .rs-onboarding-goal.selected { border-color: #0F1B2D; background: rgba(15,27,45,0.04); color: #0F1B2D; } [data-theme="light"] .rs-onboarding-submit { background: #0F1B2D; color: #FFFFFF; } [data-theme="light"] .rs-onboarding-result { background: #F8FAFD; border-color: #E3E8F0; color: #0F1B2D; } /* ═══════════════════════════════════════════════════════════════════════════ RELATED PEPTIDES ═══════════════════════════════════════════════════════════════════════════ */ .rs-related { margin: 24px 0; padding: 20px; border-radius: 12px; border: 1px solid var(--border, #383838); background: var(--surface, #212121); } .rs-related-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text, #E8E8E8); margin-bottom: 14px; } .rs-related-title i { opacity: 0.6; font-size: 13px; } .rs-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .rs-related-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 10px; border: 1px solid var(--border, #383838); background: var(--rs-bg, #191919); cursor: pointer; text-align: left; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .rs-related-card:hover { border-color: var(--border-hover, #505050); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .rs-related-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; color: #fff; width: fit-content; } .rs-related-name { font-size: 14px; font-weight: 600; color: var(--text, #E8E8E8); } .rs-related-desc { font-size: 11px; color: var(--text-muted, #7A7A7A); line-height: 1.4; } /* Light theme */ [data-theme="light"] .rs-related { background: #FFFFFF; border-color: #E3E8F0; } [data-theme="light"] .rs-related-card { background: #F8FAFD; border-color: #E3E8F0; } [data-theme="light"] .rs-related-card:hover { border-color: #B9C8E8; box-shadow: 0 4px 12px rgba(0,0,0,0.06); } [data-theme="light"] .rs-related-name { color: #0F1B2D; } /* ═══════════════════════════════════════════════════════════════════════════ PAGE TRANSITIONS & MICRO-INTERACTIONS ═══════════════════════════════════════════════════════════════════════════ */ /* Fade-in animation for page content */ @keyframes rsFadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } #contentArea > * { animation: rsFadeInUp 0.3s ease-out; } /* Card hover lift effect */ .peptide-card, .protocol-card, .pc-card { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important; } .peptide-card:hover, .protocol-card:hover, .pc-card:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important; } /* Button press effect */ .rs-chat-send:active, .rs-onboarding-submit:active, .rs-related-card:active, .research-detail-btn:active { transform: scale(0.96) !important; } /* Smooth sidebar nav transitions */ .nav-item { transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease !important; } .nav-item:active { transform: scale(0.97); } /* Detail overlay slide-in */ @keyframes rsSlideInRight { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .detail-panel { animation: rsSlideInRight 0.25s ease-out; } /* Badge hover glow */ .pc-badge:hover, .status-badge:hover { filter: brightness(1.2); transition: filter 0.15s ease; } /* Chat message entrance */ @keyframes rsMsgFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .rs-chat-msg { animation: rsMsgFadeIn 0.2s ease-out; } /* Floating chat panel entrance */ @keyframes rsScaleIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } .rs-page-chat-sidebar, .rs-calc-chat-sidebar, .rs-fullpage-chat-sidebar { animation: rsScaleIn 0.3s ease-out; } /* FAB pulse animation */ .rs-chat-fab { animation: rsFabPulse 2s ease-in-out infinite; } @keyframes rsFabPulse { 0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.4); } 50% { box-shadow: 0 4px 24px rgba(0,0,0,0.6); } } .rs-chat-fab:hover { animation: none; } /* Suggestion chips hover */ .rs-chat-suggestion { transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s !important; } .rs-chat-suggestion:hover { transform: translateY(-1px); } /* Smooth scroll for all containers */ .rs-chat-messages { scroll-behavior: smooth; } /* Tag hover effect */ .detail-tag { transition: background 0.15s, transform 0.15s !important; } .detail-tag:hover { transform: translateY(-1px); } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { #contentArea > *, .detail-panel, .rs-chat-msg, .rs-page-chat-sidebar, .rs-calc-chat-sidebar, .rs-fullpage-chat-sidebar, .rs-chat-fab { animation: none !important; } .peptide-card:hover, .protocol-card:hover, .pc-card:hover, .rs-related-card:hover { transform: none !important; } } /* Fix disclaimer box to match dark theme — handled by broader selectors below */ /* Fix compare button for dark theme */ .compare-btn { background: var(--rs-surface, #282828) !important; color: var(--text, #E8E8E8) !important; border: 1px solid var(--border, #383838) !important; } .compare-btn:hover { background: var(--rs-surface-raised, #333) !important; border-color: var(--border-hover, #505050) !important; } [data-theme="light"] .compare-btn { background: #FFFFFF !important; color: #0F1B2D !important; border: 1px solid #E3E8F0 !important; } [data-theme="light"] .compare-btn:hover { background: #F8FAFD !important; border-color: #B9C8E8 !important; } /* Fix compare select dropdowns */ .compare-select { background: var(--rs-surface, #282828) !important; color: var(--text, #E8E8E8) !important; border: 1px solid var(--border, #383838) !important; } .compare-select:focus { border-color: var(--border-hover, #505050) !important; outline: none !important; } .compare-select option { background: var(--rs-surface, #282828); color: var(--text, #E8E8E8); } /* Fix calculator inputs */ .calc-input { background: var(--rs-surface, #282828) !important; color: var(--text, #E8E8E8) !important; border: 1px solid var(--border, #383838) !important; } .calc-input:focus { border-color: var(--border-hover, #505050) !important; outline: none !important; } /* Fix "How it works" box in calculator */ .calc-how-title { color: var(--text, #E8E8E8) !important; } [class*="calc-how"], .calc-view [style*="f8fafc"], .calc-view [style*="e2e8f0"] { background: var(--rs-surface, #282828) !important; border-color: var(--border, #383838) !important; color: var(--text, #E8E8E8) !important; } /* Fix all disclaimer boxes across pages */ [style*="background:#eff6ff"], [style*="background: #eff6ff"] { background: var(--rs-surface, #282828) !important; border-color: var(--border, #383838) !important; } [style*="background:#eff6ff"] p, [style*="background: #eff6ff"] p { color: var(--text-muted, #7A7A7A) !important; } [style*="background:#eff6ff"] strong, [style*="background: #eff6ff"] strong { color: var(--text-secondary, #A0A0A0) !important; } /* Fix yellow warning boxes */ [style*="background:#fffbeb"], [style*="background: #fffbeb"] { background: rgba(245, 158, 11, 0.08) !important; border-color: rgba(245, 158, 11, 0.2) !important; } [style*="background:#fffbeb"] p, [style*="background:#fffbeb"] span { color: var(--text, #E8E8E8) !important; } /* Fix account card icons */ .acct-card-icon { background: var(--rs-surface-raised, #282828) !important; } /* Fix partner apply button */ [style*="background:#fff"][style*="color:#2563eb"] { background: var(--text, #E8E8E8) !important; color: var(--rs-bg, #191919) !important; } /* Fix interaction warnings */ .interaction-warnings li { color: #f59e0b !important; } /* Fix unread inbox highlights */ [style*="background:#eff6ff"][style*="border"] { background: rgba(59, 130, 246, 0.08) !important; border-color: rgba(59, 130, 246, 0.2) !important; } /* Fix blue text links that are too bright */ [style*="color:#3b82f6"], [style*="color: #3b82f6"], [style*="color:#2563eb"], [style*="color: #2563eb"] { color: var(--text-secondary, #A0A0A0) !important; } /* Fix auth/select inputs */ .auth-input, .acct-select { background: var(--rs-surface, #282828) !important; color: var(--text, #E8E8E8) !important; border-color: var(--border, #383838) !important; } /* Light theme — restore defaults for these overrides */ [data-theme="light"] .compare-select { background: #FFFFFF !important; color: #0F1B2D !important; border-color: #E3E8F0 !important; } [data-theme="light"] .calc-input { background: #FFFFFF !important; color: #0F1B2D !important; border-color: #E3E8F0 !important; } [data-theme="light"] [style*="background:#eff6ff"] { background: #eff6ff !important; border-color: #bfdbfe !important; } [data-theme="light"] [style*="background:#eff6ff"] p { color: #1e3a8a !important; } [data-theme="light"] [style*="background:#fffbeb"] { background: #fffbeb !important; border-color: #fef3c7 !important; } [data-theme="light"] [style*="color:#3b82f6"], [data-theme="light"] [style*="color:#2563eb"] { color: #2563eb !important; } /* Fix research detail buttons */ .research-detail-btn { background: var(--rs-surface, #282828) !important; border: 1px solid var(--border, #383838) !important; color: var(--text, #E8E8E8) !important; } .research-detail-btn:hover { border-color: var(--border-hover, #505050) !important; background: var(--rs-surface-raised, #333) !important; } .research-detail-btn [style*="color:#7c3aed"] { color: #a78bfa !important; } [data-theme="light"] .research-detail-btn { background: #FFFFFF !important; border-color: #E3E8F0 !important; color: #0F1B2D !important; } /* Fix detail export button */ .detail-export-btn { background: var(--rs-surface, #282828) !important; border: 1px solid var(--border, #383838) !important; color: var(--text-secondary, #A0A0A0) !important; } .detail-export-btn:hover { background: var(--rs-surface-raised, #333) !important; color: var(--text, #E8E8E8) !important; } /* Fix fav star button */ .fav-star-detail { background: var(--rs-surface, #282828) !important; border: 1px solid var(--border, #383838) !important; color: var(--text-muted, #7A7A7A) !important; } .fav-star-detail.fav-active { color: #f59e0b !important; border-color: rgba(245, 158, 11, 0.3) !important; } /* Fix compare table */ .compare-table { background: var(--rs-bg, #191919) !important; color: var(--text, #E8E8E8) !important; } .compare-table th { background: var(--rs-surface, #282828) !important; color: var(--text, #E8E8E8) !important; border-bottom: 1px solid var(--border, #383838) !important; } .compare-table td { border-bottom: 1px solid var(--border, #383838) !important; color: var(--text, #E8E8E8) !important; } .compare-table .row-label { color: var(--text-muted, #7A7A7A) !important; background: var(--rs-surface, #212121) !important; } [data-theme="light"] .compare-table { background: #FFFFFF !important; color: #0F1B2D !important; } [data-theme="light"] .compare-table th { background: #F8FAFD !important; color: #0F1B2D !important; border-color: #E3E8F0 !important; } [data-theme="light"] .compare-table td { border-color: #E3E8F0 !important; color: #0F1B2D !important; } /* Fix tracker stat cards */ .tracker-stat-card { background: var(--rs-surface, #282828) !important; border: 1px solid var(--border, #383838) !important; } /* Fix any remaining white/light overlays */ .detail-panel { background: var(--rs-bg, #191919) !important; } #detailOverlay { background: rgba(0, 0, 0, 0.7) !important; }