/* Pearl AI Hub — Chat Playground Styles */ /* Brand: Pearl Labs — Brand Blue #002D5B · Brand Orange #EF8633 */ /* Light mode (default) · Dark mode via .dark on */ :root { /* ── Brand (constant) ── */ --brand-blue: #002d5b; --brand-orange: #ef8633; /* ── Surfaces — Light ── */ --bg: #edf4fa; --surface: #f7fafc; --surface-hover: #e9f6fd; --surface-dim: #cfe0e4; --container: #e3f0f8; --container-low: #e9f6fd; --container-high: #dde9f2; /* ── Text — Light ── */ --text: #111d23; --text-muted: #4c616c; --text-on-primary: #ffffff; /* ── Borders — Light ── */ --border: #dcc1b2; --outline: #897365; /* ── Primary & Accent ── */ --primary: #002d5b; --primary-hover: #001f3f; --primary-tint: rgba(0, 45, 91, 0.1); --accent: #ef8633; --accent-hover: #f59a52; /* ── Semantic (functional) ── */ --success: #00b894; --error: #e74c3c; --warning: #ef8633; --success-tint: rgba(0, 184, 148, 0.12); --error-tint: rgba(231, 76, 60, 0.12); --warning-tint: rgba(239, 134, 51, 0.12); /* Aliases for backward compat */ --green: #00b894; --red: #e74c3c; --yellow: #ef8633; --blue: #0984e3; /* ── Overlays ── */ --hover-overlay: rgba(0, 45, 91, 0.04); --active-overlay: rgba(0, 45, 91, 0.08); --card-hover-border: rgba(0, 45, 91, 0.25); /* ── Console / Code (stays dark) ── */ --console-bg: #0b1628; --console-text: #e0e0e0; --console-border: #1e3456; --console-muted: #8b8fa3; /* ── Radius ── */ --radius: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* ── Typography ── */ --font: "Manrope", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif; --font-headline: "Space Grotesk", "Segoe UI", -apple-system, sans-serif; --font-label: "Inter", "Segoe UI", -apple-system, sans-serif; --mono: "SF Mono", "Fira Code", "Cascadia Code", monospace; } /* ── Dark Mode ── */ html.dark { --bg: #0b1628; --surface: #112240; --surface-hover: #162844; --surface-dim: #0b1628; --container: #162844; --container-low: #162844; --container-high: #1e3456; --text: #e4e6ef; --text-muted: #8b9bb5; --border: #1e3456; --outline: #897365; --primary: #6eaadc; --primary-hover: #8dbde6; --primary-tint: rgba(110, 170, 220, 0.12); --hover-overlay: rgba(255, 255, 255, 0.03); --active-overlay: rgba(110, 170, 220, 0.12); --card-hover-border: rgba(110, 170, 220, 0.35); --console-bg: #0c0c0c; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; height: 100vh; overflow: hidden; } .hidden { display: none !important; } /* ── App Layout ── */ .app-layout { display: flex; height: 100vh; } /* ── Sidebar ── */ .sidebar { width: 280px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; flex-shrink: 0; } .sidebar-header { padding: 1.2rem 1rem; border-bottom: 1px solid var(--border); } .sidebar-header h1 { font-size: 1.3rem; font-weight: 700; color: var(--accent); } .sidebar-header .subtitle { color: var(--text-muted); font-size: 0.8rem; } .sidebar-section { padding: 1rem; border-bottom: 1px solid var(--border); } .sidebar-section h3 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 0.6rem; } .sidebar-section label { display: block; font-size: 0.8rem; color: var(--text-muted); margin: 0.6rem 0 0.25rem; } /* Model List */ .model-list { display: flex; flex-direction: column; gap: 0.4rem; } .model-btn { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); cursor: pointer; font-family: var(--font); font-size: 0.85rem; text-align: left; transition: all 0.15s; } .model-btn:hover { border-color: var(--primary); background: var(--surface-hover); } .model-btn.active { border-color: var(--brand-blue); background: var(--primary-tint); color: var(--primary); } .model-btn.loading { opacity: 0.6; cursor: wait; } .model-btn .model-name { font-weight: 600; } .model-btn .model-size { font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 8px; background: var(--primary-tint); color: var(--primary); margin-left: auto; } .model-btn .model-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex-shrink: 0; } .model-btn.active .model-dot { background: var(--success); } .switch-status { margin-top: 0.5rem; font-size: 0.8rem; padding: 0.4rem 0.6rem; border-radius: 6px; background: var(--warning-tint); color: var(--warning); } /* Sidebar inputs */ .sidebar-section input[type="range"] { width: 100%; accent-color: var(--primary); } .range-value { font-size: 0.8rem; color: var(--text-muted); float: right; margin-top: -1.4rem; } .sidebar-section textarea { width: 100%; padding: 0.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-family: var(--font); font-size: 0.8rem; resize: vertical; } .sidebar-section textarea:focus { outline: none; border-color: var(--primary); } /* Status Badge */ .status-badge { display: inline-block; padding: 0.25rem 0.6rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; } .status-badge.online { background: var(--success-tint); color: var(--success); border: 1px solid var(--success); } .status-badge.offline { background: var(--error-tint); color: var(--error); } .status-badge.loading { background: var(--warning-tint); color: var(--warning); } /* API / Nav Links */ .nav-link { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); text-decoration: none; font-size: 0.85rem; padding: 0.5rem 0.6rem; border-radius: 8px; transition: all 0.15s; } .nav-link:hover { color: var(--text); background: var(--surface-hover); } .nav-link svg { opacity: 0.6; flex-shrink: 0; } .nav-link:hover svg { opacity: 1; } /* ── Chat Area ── */ .chat-area { flex: 1; display: flex; flex-direction: column; min-width: 0; } .chat-header { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--surface); } .chat-header span { font-weight: 600; font-size: 0.95rem; } .btn-secondary { background: transparent; border: 1px solid var(--border); color: var(--text-muted); padding: 0.35rem 0.8rem; border-radius: 6px; font-size: 0.8rem; cursor: pointer; font-family: var(--font); } .btn-secondary:hover { border-color: var(--text-muted); color: var(--text); } /* Messages */ .chat-messages { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; } .welcome-message { text-align: center; margin: auto; max-width: 400px; } .welcome-message h2 { font-size: 1.3rem; margin-bottom: 0.5rem; color: var(--accent); } .welcome-message p { color: var(--text-muted); font-size: 0.9rem; } .welcome-message .hint { font-size: 0.8rem; margin-top: 0.5rem; } .message { max-width: 75%; padding: 0.8rem 1rem; border-radius: 12px; font-size: 0.9rem; line-height: 1.6; word-wrap: break-word; white-space: pre-wrap; } .message.user { align-self: flex-end; background: var(--brand-blue); color: var(--text-on-primary); border-bottom-right-radius: 4px; } .message.assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .message.assistant .msg-content { white-space: normal; } /* ── Markdown inside messages ── */ .msg-content p { margin: 0 0 0.5em; } .msg-content p:last-child { margin-bottom: 0; } .msg-content h1, .msg-content h2, .msg-content h3, .msg-content h4, .msg-content h5, .msg-content h6 { margin: 0.8em 0 0.3em; line-height: 1.3; } .msg-content h1 { font-size: 1.2em; } .msg-content h2 { font-size: 1.1em; } .msg-content h3 { font-size: 1em; } .msg-content ul, .msg-content ol { margin: 0.3em 0; padding-left: 1.5em; } .msg-content code { background: var(--primary-tint); padding: 0.15em 0.4em; border-radius: 4px; font-family: var(--mono); font-size: 0.85em; } .msg-content pre { background: var(--console-bg); border: 1px solid var(--console-border); border-radius: var(--radius); padding: 0.8rem 1rem; overflow-x: auto; margin: 0.5em 0; color: var(--console-text); } .msg-content pre code { background: none; padding: 0; border-radius: 0; font-size: 0.85em; white-space: pre; } .msg-content blockquote { border-left: 3px solid var(--primary); padding-left: 0.8em; margin: 0.5em 0; color: var(--text-muted); } .msg-content table { border-collapse: collapse; margin: 0.5em 0; width: 100%; } .msg-content th, .msg-content td { border: 1px solid var(--border); padding: 0.4em 0.6em; font-size: 0.85em; } .msg-content th { background: var(--bg); font-weight: 600; } .msg-content a { color: var(--primary); text-decoration: underline; } .msg-content hr { border: none; border-top: 1px solid var(--border); margin: 0.8em 0; } /* ── Collapsible Think Block ── */ .think-block { margin: 0.4em 0 0.6em; border: 1px solid var(--border); border-radius: var(--radius); background: var(--primary-tint); overflow: hidden; } .think-block summary { cursor: pointer; padding: 0.5rem 0.8rem; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); user-select: none; list-style: none; display: flex; align-items: center; gap: 0.4rem; } .think-block summary::-webkit-details-marker { display: none; } .think-block summary::after { content: "▸"; margin-left: auto; transition: transform 0.2s; font-size: 0.75rem; } .think-block[open] summary::after { transform: rotate(90deg); } .think-block summary:hover { color: var(--text); background: var(--primary-tint); } .think-content { padding: 0.5rem 0.8rem 0.7rem; font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border); line-height: 1.5; } .think-content p { margin: 0 0 0.4em; } .think-content p:last-child { margin-bottom: 0; } .message .msg-meta { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.4rem; } .message.user .msg-meta { color: rgba(255, 255, 255, 0.65); } .message.thinking { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); font-style: italic; } .thinking-dots::after { content: ""; animation: dots 1.5s infinite; } @keyframes dots { 0%, 20% { content: "."; } 40% { content: ".."; } 60%, 100% { content: "..."; } } .streaming-cursor { display: inline-block; color: var(--primary); animation: blink 0.8s step-end infinite; font-weight: 400; } @keyframes blink { 50% { opacity: 0; } } /* ── Loading Indicator (before first token) ── */ .loading-indicator { display: flex; align-items: center; gap: 0.6rem; padding: 0.2rem 0; } .loading-text { color: var(--text-muted); font-size: 0.85rem; font-style: italic; } .loading-dots { display: flex; gap: 4px; } .loading-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: loadPulse 1.4s ease-in-out infinite; } .loading-dots span:nth-child(2) { animation-delay: 0.2s; } .loading-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes loadPulse { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.1); } } /* ── Live Think Block (streaming) ── */ .think-placeholder { color: var(--text-muted); font-style: italic; font-size: 0.82rem; } /* ── Chat Input ── */ .chat-input-area { display: flex; align-items: flex-end; gap: 0.5rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); background: var(--surface); } .chat-input-area textarea { flex: 1; padding: 0.7rem 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-family: var(--font); font-size: 0.9rem; resize: none; max-height: 120px; line-height: 1.4; } .chat-input-area textarea:focus { outline: none; border-color: var(--primary); } #send-btn { width: 40px; height: 40px; background: var(--accent); color: var(--text-on-primary); border: none; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s; } #send-btn:hover { background: var(--accent-hover); } html.dark #send-btn:hover { background: var(--accent-hover); } #send-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* ── Responsive ── */ @media (max-width: 700px) { .app-layout { flex-direction: column; } .sidebar { width: 100%; height: auto; max-height: 40vh; border-right: none; border-bottom: 1px solid var(--border); } .message { max-width: 90%; } } /* ── Theme Toggle Button ── */ .theme-toggle { background: none; border: 1px solid var(--border); color: var(--text-muted); width: 32px; height: 32px; border-radius: var(--radius); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; } .theme-toggle:hover { color: var(--text); border-color: var(--primary); background: var(--primary-tint); } .theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; } /* Light mode: show moon icon to switch to dark */ html:not(.dark) .theme-toggle .icon-moon { display: block; } html.light-forced .theme-toggle .icon-moon { display: block; } html.light-forced .theme-toggle .icon-sun { display: none; } /* Dark mode: show sun icon to switch to light */ html.dark .theme-toggle .icon-sun { display: block; } html.dark .theme-toggle .icon-moon { display: none; } /* Auto dark (OS pref, no .dark class, no .light-forced) */ @media (prefers-color-scheme: dark) { html:not(.light-forced):not(.dark) .theme-toggle .icon-sun { display: block; } html:not(.light-forced):not(.dark) .theme-toggle .icon-moon { display: none; } } /* ── Auto dark mode for users without preference ── */ @media (prefers-color-scheme: dark) { html:not(.light-forced) { --bg: #0b1628; --surface: #112240; --surface-hover: #162844; --surface-dim: #0b1628; --container: #162844; --container-low: #162844; --container-high: #1e3456; --text: #e4e6ef; --text-muted: #8b9bb5; --border: #1e3456; --outline: #897365; --primary: #6eaadc; --primary-hover: #8dbde6; --primary-tint: rgba(110, 170, 220, 0.12); --hover-overlay: rgba(255, 255, 255, 0.03); --active-overlay: rgba(110, 170, 220, 0.12); --card-hover-border: rgba(110, 170, 220, 0.35); --console-bg: #0c0c0c; } } /* Light forced overrides (when user manually picks light while OS is dark) */ html.light-forced { --bg: #edf4fa; --surface: #f7fafc; --surface-hover: #e9f6fd; --surface-dim: #cfe0e4; --container: #e3f0f8; --container-low: #e9f6fd; --container-high: #dde9f2; --text: #111d23; --text-muted: #4c616c; --border: #dcc1b2; --outline: #897365; --primary: #002d5b; --primary-hover: #001f3f; --primary-tint: rgba(0, 45, 91, 0.1); --hover-overlay: rgba(0, 45, 91, 0.04); --active-overlay: rgba(0, 45, 91, 0.08); --card-hover-border: rgba(0, 45, 91, 0.25); --console-bg: #0b1628; }