:root { /* Theme system - Default is LIGHT (stable + matches existing design) - User can switch: Light / Dark / System - Implemented via + CSS variables */ color-scheme: light dark; /* Palette (LIGHT defaults) */ --bg-page: #f8f9fc; --bg-card: #ffffff; --bg-input: #f1f5f9; --bg-gutter: #fafbfc; --bg-modal: #f8fafc; --btn-primary-bg: var(--text-primary); --btn-primary-text: #ffffff; --btn-primary-hover-bg: #000000; --brand-bot-color: #000000; --text-primary: #0f172a; --text-secondary: #475569; --text-tertiary: #94a3b8; --border-subtle: #e2e8f0; --border-focus: #cbd5e1; --primary: #2563eb; --primary-hover: #1d4ed8; --primary-dark: #1e40af; --warning-color: #d97706; --gpt-color: #10b981; --gemini-color: #7c3aed; /* "Judge" green used in a few UI bits */ --judge-color: #16a34a; /* Judge IDE bubble (themed terminal) */ --judge-bg: #f1f3f5; --judge-bg-header: #e9ecef; --judge-border: #ced4da; --judge-text: #495057; --judge-text-bright: #212529; --judge-text-dim: #868e96; --judge-accent: #0c8599; --judge-highlight: #e67700; --judge-syntax-green: #2b8a3e; --judge-syntax-red: #c92a2a; /* Structural helper vars used by some components */ --bg-main: var(--bg-input); --border-strong: var(--text-primary); /* Animation helper vars (safe defaults) */ --ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1); /* Z-index scale */ --z-base: 0; --z-raised: 1; --z-float: 10; --z-scan-banner: 50; --z-nav-overlay: 99; --z-overlay: 100; --z-dropdown: 1000; --z-maint: 10001; --z-nav: 10000; --z-modal: 10001; --z-popover: 10002; --z-toast: 99999; --fly-x: 0px; --fly-y: 0px; --orbit-bb: 0deg; --orbit-bl: 0deg; --orbit-br: 0deg; --orbit-bt: 0deg; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.05); /* Typography */ --font-sans: 'IBM Plex Sans', sans-serif; --font-display: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif; --font-mono: 'IBM Plex Mono', monospace; --font-body: var(--font-sans); /* Landing title (hero) */ --hero-title-color: var(--text-primary); --hero-title-shadow: 0 1px 0 rgb(0 0 0 / 0.04); /* Extended palette (light mode) */ --success-grad-1: #f0fdf4; --success-grad-hover-1: #dcfce7; --success-grad-hover-2: #bbf7d0; --success-border-soft: rgba(34, 197, 94, 0.3); --warning-bg: #fff7e6; --warning-border: #f59e0b; --warning-text: #8a5a00; --hover-bg: #f8fafc; --code-inline-bg: #e2e8f0; --shadow-hard: 4px 4px 0 rgba(15, 23, 42, 0.2); /* Citation / source theming */ --citation-shadow-color: #6c5ce7; --citation-bg: #ffffff; --citation-border: #000000; --citation-text: #000000; --tree-line-color: #888888; --toast-bg: #0f172a; --toast-text: #ffffff; --toast-border: #334155; --badge-text: var(--btn-primary-text); /* Mainframe Card System (Decision Brief) */ --frame-bg: #f8f9fa; --frame-border: #161616; --card-bg: #ffffff; --header-bg: #161616; --header-text: #ffffff; --accent-blue: #0f62fe; --accent-red: #da1e28; --shadow-hard-brutal: 8px 8px 0px rgba(0,0,0,0.12); /* Accent colors */ --accent-green: #22c55e; --accent-green-deep: #166534; --accent-green-pale: #86efac; --accent-green-dark: #059669; --error-red: #ef4444; --accent-orange: #f97316; --accent-cyan: #06b6d4; --accent-blue-link: #3b82f6; } /* Explicit modes (the JS sets data-theme on ) */ html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } /* DARK palette (manual mode) */ html[data-theme="dark"] { --bg-page: #060d1b; --bg-card: #0f172a; --bg-input: #111827; --bg-gutter: #0a1122; --bg-modal: #0d1526; --btn-primary-bg: #e5e7eb; --btn-primary-text: #0b1220; --btn-primary-hover-bg: #ffffff; --brand-bot-color: #e5e7eb; --text-primary: #e5e7eb; --text-secondary: #cbd5e1; --text-tertiary: #94a3b8; --border-subtle: #1f2937; --border-focus: #334155; --primary: #60a5fa; --primary-hover: #3b82f6; --primary-dark: #2563eb; --warning-color: #f59e0b; --gpt-color: #34d399; --gemini-color: #a78bfa; --judge-color: #22c55e; /* Judge IDE bubble (dark terminal) */ --judge-bg: #212529; --judge-bg-header: #2b3035; --judge-border: #343a40; --judge-text: #adb5bd; --judge-text-bright: #e9ecef; --judge-text-dim: #6c757d; --judge-accent: #66d9e8; --judge-highlight: #ffd43b; --judge-syntax-green: #69db7c; --judge-syntax-red: #ff6b6b; --bg-main: #0b1220; --border-strong: #e5e7eb; --hero-title-shadow: none; /* Extended palette (dark mode) */ --success-grad-1: rgba(52, 211, 153, 0.20); --success-grad-hover-1: rgba(52, 211, 153, 0.28); --success-grad-hover-2: rgba(52, 211, 153, 0.14); --success-border-soft: rgba(52, 211, 153, 0.35); --warning-bg: rgba(245, 158, 11, 0.14); --warning-border: rgba(245, 158, 11, 0.35); --warning-text: #fbbf24; --hover-bg: rgba(255, 255, 255, 0.06); --code-inline-bg: rgba(255, 255, 255, 0.08); --shadow-hard: 4px 4px 0 rgba(0, 0, 0, 0.55); --toast-bg: #0b1220; --toast-text: #e5e7eb; --toast-border: #1f2937; /* Mainframe Card System (Decision Brief) - Dark Mode */ --frame-bg: #121212; --frame-border: #525252; --card-bg: #262626; --header-bg: #393939; --header-text: #ffffff; --accent-blue: #4589ff; --accent-red: #fa4d56; --shadow-hard-brutal: 8px 8px 0px rgba(0,0,0,0.4); /* Citation / source theming (dark) */ --citation-shadow-color: #b794f6; --citation-bg: #1a1a1a; --citation-border: #e0e0e0; --citation-text: #ffffff; --tree-line-color: #666666; /* Accent colors (dark) — accent-green intentionally same for always-dark terminals */ --accent-green: #22c55e; --accent-green-deep: #166534; --accent-green-pale: #86efac; --accent-green-dark: #34d399; --error-red: #f87171; --accent-orange: #fb923c; --accent-cyan: #22d3ee; --accent-blue-link: #60a5fa; } html[data-theme="dark"] nav { background: rgba(11, 18, 32, 0.92); } * { box-sizing: border-box; margin: 0; padding: 0; } /* Accessibility: skip-to-content link */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: var(--z-toast); padding: 8px 16px; background: var(--text-primary); color: var(--bg-page); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; text-decoration: none; border: 2px solid var(--text-primary); } .skip-link:focus { top: 8px; } body { background-color: var(--bg-page); color: var(--text-primary); font-family: var(--font-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Accessible focus styles */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Inputs use their own focus treatment (border + shadow) */ .form-input:focus-visible, textarea:focus-visible { outline: none; } /* Buttons: show focus ring on keyboard nav, mirror hover lift */ .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .btn-primary:focus-visible { background: var(--btn-primary-hover-bg); box-shadow: var(--shadow-md); } .btn-outline:focus-visible { border-color: var(--text-secondary); background: var(--bg-input); } .btn-brutal:focus-visible { outline: 2px solid var(--primary); outline-offset: 0; transform: translate(2px, 2px); box-shadow: 2px 2px 0px var(--text-primary); } .btn-text:focus-visible { color: var(--text-primary); border-bottom-color: var(--text-primary); } .btn-execute:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateY(-1px); } .ma-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 0; transform: translate(-1px, -1px); } .tool-link:focus-visible { color: var(--text-primary); outline: 2px solid var(--primary); outline-offset: 2px; } .price-opt:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-color: var(--primary); } .credit-badge:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .modal-close-btn:focus-visible { background: var(--bg-input); color: var(--text-primary); outline: 2px solid var(--primary); outline-offset: -2px; } .faq-item summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .insight-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .file-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; color: var(--text-primary); } .history-log-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .maint-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* --- Navigation --- */ nav { background: rgba(248, 249, 252, 0.92); border-bottom: 2px solid var(--text-primary); /* Harder border */ padding: 16px 32px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: var(--z-nav); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color 0.3s var(--ease-snap), border-color 0.3s var(--ease-snap); } .brand { font-family: var(--font-mono); /* Code font */ font-weight: 800; font-size: 1.1rem; letter-spacing: -0.05em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; margin-right: auto; /* Push everything else to the right */ } .brand-bot-icon { /* 2x size robot icon */ height: 2em; width: auto; display: block; flex: 0 0 auto; color: var(--brand-bot-color, #000); /* Nudge up for better visual centering with text */ transform: translateY(-4px); } .brand-text { line-height: 1; } .nav-items { display: flex; align-items: center; gap: 12px; } /* Controls that sit to the right (theme + hamburger on mobile) */ .nav-right-controls { display: flex; align-items: center; gap: 8px; order: 1; /* After nav-items on desktop */ } /* --- Theme Switcher (Light / Dark / System) --- */ .theme-switch { position: relative; display: inline-flex; align-items: center; } .theme-btn { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background-color 0.2s var(--ease-snap), border-color 0.2s var(--ease-snap), color 0.2s var(--ease-snap); } .theme-btn:hover { background: rgba(150, 150, 150, 0.1); border-color: rgba(150, 150, 150, 0.15); color: var(--text-primary); } .theme-btn:active { border-color: var(--border-subtle); } /* Icon wrapper for morph animation */ .theme-icon-wrapper { position: relative; width: 18px; height: 18px; } .theme-icon { position: absolute; top: 0; left: 0; width: 18px; height: 18px; stroke-width: 1.5; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* Sun-to-Moon morph animation */ .theme-icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); } .theme-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } html[data-theme="light"] .theme-icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } html[data-theme="light"] .theme-icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); } .theme-chevron { width: 10px; height: 10px; stroke-width: 2.5; opacity: 0.5; transition: transform 0.2s var(--ease-snap); } .theme-btn[aria-expanded="true"] .theme-chevron { transform: rotate(180deg); } /* Glassmorphism dropdown */ .theme-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 150px; /* Glassmorphism */ background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 10px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 20px -5px rgba(0, 0, 0, 0.15); padding: 6px; z-index: var(--z-dropdown); /* Animation */ opacity: 0; transform: translateY(-4px) scale(0.98); pointer-events: none; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); } html[data-theme="dark"] .theme-menu { background: rgba(15, 23, 42, 0.9); border-color: rgba(255, 255, 255, 0.08); } .theme-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .theme-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; background: transparent; color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; cursor: pointer; border-radius: 6px; transition: background-color 0.15s var(--ease-snap), color 0.15s var(--ease-snap); } .theme-option:hover { background: rgba(150, 150, 150, 0.1); color: var(--text-primary); } .theme-option[aria-checked="true"] { color: var(--text-primary); background: rgba(150, 150, 150, 0.08); } .theme-option svg { width: 16px; height: 16px; stroke-width: 1.5; opacity: 0.6; flex-shrink: 0; transition: opacity 0.15s var(--ease-snap); } .theme-option:hover svg, .theme-option[aria-checked="true"] svg { opacity: 1; } .btn { padding: 9px 18px; border-radius: 4px; /* Sharp corners */ font-family: var(--font-mono); /* Code font */ font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: background-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); border: 1px solid transparent; display: inline-flex; align-items: center; gap: 8px; justify-content: center; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); } .btn-primary:hover { background: var(--btn-primary-hover-bg); box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn-primary.loading { opacity: 0.8; pointer-events: none; } .btn-outline { background: var(--bg-card); border-color: var(--border-subtle); color: var(--text-primary); } .btn-outline:hover { border-color: var(--text-secondary); background: var(--bg-input); } /* Brutalist Terminal Buttons */ .btn-brutal { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--bg-card); border: 2px solid var(--text-primary); color: var(--text-primary); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 4px 4px 0px var(--text-primary); cursor: pointer; transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); } .btn-brutal:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0px var(--text-primary); } .btn-brutal:active { transform: translate(4px, 4px); box-shadow: 0px 0px 0px var(--text-primary); } /* Brutalist Primary Button - Dark charcoal for shadow contrast */ .btn-brutal.primary { background: #1a1a1a; color: #fff; border: 2px solid #000; box-shadow: 4px 4px 0px #000; } .btn-brutal.primary:hover { background: #333; transform: translate(2px, 2px); box-shadow: 2px 2px 0px #000; } .btn-brutal.primary:active { transform: translate(4px, 4px); box-shadow: 0px 0px 0px #000; } /* Dark mode brutalist buttons */ html[data-theme="dark"] .btn-brutal { background: var(--bg-input); border-color: var(--text-primary); } html[data-theme="dark"] .btn-brutal.primary { background: #e5e7eb; color: #0f172a; border-color: #e5e7eb; box-shadow: 4px 4px 0px #94a3b8; } html[data-theme="dark"] .btn-brutal.primary:hover { background: #f3f4f6; box-shadow: 2px 2px 0px #94a3b8; } html[data-theme="dark"] .btn-brutal.primary:active { box-shadow: 0px 0px 0px #94a3b8; } /* Compact buttons (used in result sub-sections) */ .btn-compact { padding: 6px 10px; font-size: 0.72rem; letter-spacing: 0.06em; height: 30px; } /* Text buttons (Rules, Compare, History) */ .btn-text { background: transparent; color: var(--text-secondary); border: 1px solid transparent; /* No border by default */ } .btn-text:hover { background: transparent; color: var(--text-primary); border-color: transparent; border-bottom-color: var(--text-primary); } /* Credit badge styles now in Arbiter section below */ /* --- Main Content --- */ main { max-width: 1000px; margin: 0 auto; padding: 60px 24px; min-height: 85vh; display: flex; flex-direction: column; justify-content: flex-start; } /* --- Animations --- */ @keyframes fadeUp { from { opacity: 0; } to { opacity: 1; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes blink { 50% { opacity: 0; } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } } /* Respect reduced motion preferences */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html:focus-within { scroll-behavior: auto; } } /* Newton's Cradle + Shimmer Combo */ .thinking-content { padding: 4px 0; } .thinking-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .thinking-text { color: var(--text-tertiary); font-style: italic; font-size: 0.9rem; } /* Newton's Cradle */ .newtons-cradle { display: flex; align-items: center; gap: 2px; margin-left: 12px; } .newton-dot { width: 6px; height: 6px; background: var(--primary); border-radius: 50%; } .newton-dot:first-child { animation: swingLeft 0.6s ease-in-out infinite alternate; } .newton-dot:last-child { animation: swingRight 0.6s ease-in-out infinite alternate; } @keyframes swingLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-6px); } } @keyframes swingRight { 0% { transform: translateX(6px); } 100% { transform: translateX(0); } } /* Shimmer Lines */ .shimmer-lines { display: flex; flex-direction: column; gap: 8px; } .shimmer-line { height: 10px; border-radius: 5px; background: var(--border-focus); background-image: linear-gradient( to right, var(--border-focus) 0%, var(--hover-bg) 50%, var(--border-focus) 100% ); background-size: 400px 100%; animation: shimmer 1.2s ease-in-out infinite; } .shimmer-line.w80 { width: 80%; } .shimmer-line.w60 { width: 60%; } @keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } } /* Markdown content styling */ .markdown-body { font-size: 0.9rem; line-height: 1.6; padding: 12px; overflow-wrap: break-word; word-break: break-word; } .markdown-body h1, .markdown-body h2, .markdown-body h3 { margin-top: 16px; margin-bottom: 8px; font-weight: 600; } .markdown-body h1 { font-size: 1.3rem; } .markdown-body h2 { font-size: 1.1rem; } .markdown-body h3 { font-size: 1rem; } .markdown-body p { margin-bottom: 10px; } .markdown-body ul, .markdown-body ol { margin-left: 20px; margin-bottom: 10px; } .markdown-body li { margin-bottom: 4px; } .markdown-body code { background: var(--bg-input); padding: 2px 6px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 0.85em; } .markdown-body pre { background: #1e293b; color: var(--code-inline-bg); padding: 12px; border-radius: 8px; overflow-x: auto; margin: 12px 0; } .markdown-body pre code { background: none; padding: 0; color: inherit; } .spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; opacity: 0.8; } /* --- Setup View --- */ #setupView { animation: fadeUp 0.6s var(--ease-snap); width: 100%; } /* --- Redesigned Hero Header --- */ .header-section { text-align: center; margin-bottom: 60px; margin-top: 40px; display: flex; flex-direction: column; align-items: center; } /* The Main Title */ .header-section h1 { font-size: 3.5rem; font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; margin-bottom: 24px; color: var(--text-primary); font-family: var(--font-display); max-width: 800px; } /* Landing title (minimal, monochrome) */ .highlight-text { font-weight: 800; font-size: 3.5rem; letter-spacing: -0.045em; line-height: 1.05; font-family: var(--font-display); color: var(--hero-title-color); text-shadow: var(--hero-title-shadow); background: none; -webkit-text-fill-color: unset; filter: none; display: inline-block; /* Fix for descender letters (g, y, p) being cut off */ padding-bottom: 15px; margin-bottom: -15px; } /* Subtitle Paragraph */ .subtitle { font-size: 1.15rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto 24px auto; font-weight: 400; line-height: 1.6; } .pipeline-step { position: relative; z-index: var(--z-raised); text-align: center; flex: 1; display: flex; flex-direction: column; align-items: center; } /* === MODEL ARRAY (The "Rivalry" Bar) === */ .model-array-container { max-width: 900px; margin: 0 auto 24px auto; font-family: var(--font-mono); } .ma-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 8px; } .ma-label { font-size: 0.7rem; font-weight: 700; color: var(--text-tertiary); letter-spacing: 0.05em; } .ma-status { font-size: 0.7rem; font-weight: 700; color: var(--text-primary); } /* The Grid of Companies */ .ma-grid { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .ma-chip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--text-primary); border-radius: 2px; font-size: 0.75rem; font-weight: 700; color: var(--text-primary); box-shadow: 4px 4px 0 rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s; } .ma-chip:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.08); } .ma-dot { width: 6px; height: 6px; background: var(--gpt-color); border-radius: 50%; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); animation: pulse-dot 2s ease-in-out infinite; } /* The Explanation Note */ .ma-note { font-size: 0.8rem; color: var(--text-secondary); background: var(--bg-modal); padding: 10px 14px; border-left: 2px solid var(--primary); line-height: 1.5; text-align: left; } .ma-note strong { color: var(--text-primary); font-weight: 700; margin-right: 4px; } .icon-warn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: var(--warning-color); color: #fff; border-radius: 50%; font-size: 0.65rem; font-weight: 700; margin-right: 6px; } /* Model Array - Mobile Adjustments */ @media (max-width: 600px) { .ma-header { flex-direction: column; align-items: flex-start; gap: 4px; } .ma-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ma-chip { justify-content: center; padding: 10px 8px; font-size: 0.7rem; } .ma-note { font-size: 0.75rem; padding: 10px 12px; } } @media (max-width: 360px) { .model-array-container { margin-bottom: 16px; } .ma-label, .ma-status { font-size: 0.65rem; } .ma-chip { padding: 8px 6px; font-size: 0.65rem; gap: 6px; } .ma-note { font-size: 0.7rem; } } /* === COMMAND CONSOLE STYLES === */ .console-wrapper { background: var(--bg-card); border: 2px solid var(--text-primary); border-radius: 4px; box-shadow: 8px 8px 0 rgba(15, 23, 42, 0.1); max-width: 900px; margin: 0 auto 60px auto; overflow: hidden; transition: transform 0.2s var(--ease-snap), box-shadow 0.2s var(--ease-snap), border-color 0.3s var(--ease-snap); width: 100%; } .console-wrapper:focus-within { transform: translate(-1px, -1px); border-color: var(--primary); box-shadow: 8px 8px 0 rgba(15, 23, 42, 0.1), 0 0 0 3px rgba(37, 99, 235, 0.12); } html[data-theme="dark"] .console-wrapper:focus-within { box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(96, 165, 250, 0.15); } /* 1. Console Header */ .console-header { background: var(--bg-modal); border-bottom: 2px solid var(--text-primary); padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; } .console-title { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px; } .status-dot { width: 8px; height: 8px; background: var(--gpt-color); border-radius: 50%; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); } 50% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.3); } } .console-tools { display: flex; gap: 8px; } .tool-link { background: transparent; border: none; font-family: var(--font-mono); font-size: 0.7rem; color: var(--primary); font-weight: 700; cursor: pointer; text-transform: uppercase; transition: color 0.2s; padding: 4px 8px; } .tool-link:hover { color: var(--text-primary); } .tool-link:disabled { opacity: 0.5; cursor: not-allowed; } /* Tool "toggletip" (mobile-friendly tooltip) */ .tool-with-tip { position: relative; display: inline-flex; align-items: center; gap: 6px; } .tool-tip-trigger { position: relative; width: 18px; height: 18px; padding: 0; border: 1px solid var(--border-strong); border-radius: 999px; background: transparent; color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.7rem; line-height: 18px; text-align: center; cursor: pointer; opacity: 0.8; transition: opacity 0.2s, color 0.2s, background 0.2s; } .tool-tip-trigger:hover { opacity: 1; color: var(--text-primary); background: var(--hover-bg); } .tool-tip-trigger:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } /* Fat-finger hit area */ .tool-tip-trigger::before { content: ''; position: absolute; inset: -12px; /* ~42x42px target */ } .tool-tip-popover { position: absolute; top: calc(100% + 8px); right: 0; padding: 8px 10px; border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-hard); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.3; width: max-content; max-width: 260px; max-width: min(260px, calc(100vw - 24px)); white-space: normal; display: none; z-index: var(--z-popover); } .tool-with-tip.open .tool-tip-popover { display: block; } /* 2. Console Body (The Editor) */ .console-body { display: flex; position: relative; background: var(--bg-card); min-height: 140px; cursor: text; transition: background-color 0.2s var(--ease-snap); } .console-body.drag-over { background: var(--bg-input); } .console-body.drag-over::after { content: 'Drop files here'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.2rem; font-weight: 600; color: var(--accent-blue-link); pointer-events: none; z-index: var(--z-float); } .line-marker { width: 40px; min-width: 40px; background: var(--bg-gutter); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; align-items: center; padding-top: 18px; gap: 6px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--border-focus); user-select: none; line-height: 1.6; } .console-input-area { flex: 1; display: flex; flex-direction: column; min-width: 0; } #taskInput { flex: 1; border: none; outline: none; padding: 16px 20px; font-family: var(--font-mono); font-size: 0.95rem; color: var(--text-primary); resize: none; line-height: 1.6; min-height: 140px; max-height: 300px; overflow-y: auto; background: transparent; caret-color: var(--gpt-color); width: 100%; } #taskInput::placeholder { color: var(--text-tertiary); opacity: 1; } /* 3. Console Footer */ .console-footer { border-top: 2px solid var(--text-primary); padding: 12px 20px; background: var(--bg-card); display: flex; justify-content: space-between; align-items: center; gap: 16px; } .console-action-left { display: flex; align-items: center; gap: 12px; } .console-action-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* Load Context Button */ .file-trigger { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 4px; transition: background-color 0.2s var(--ease-snap), color 0.2s var(--ease-snap), border-color 0.2s var(--ease-snap); border: 1px solid transparent; } .file-trigger:hover { background: var(--bg-input); color: var(--text-primary); border-color: var(--border-subtle); } .icon-plus { font-size: 1.1rem; font-weight: 400; line-height: 0.8; } .file-badge { background: var(--text-primary); color: var(--bg-page); font-size: 0.65rem; padding: 2px 6px; border-radius: 2px; display: none; } /* EXECUTE Button */ .btn-execute { background: var(--text-primary); color: var(--bg-page); border: none; border-radius: 2px; padding: 12px 24px; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 4px 4px 0 rgba(15, 23, 42, 0.2); white-space: nowrap; } .btn-execute:hover { background: var(--border-strong); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateY(-1px); } .btn-execute:active { transform: translate(2px, 2px); box-shadow: 0 0 0 transparent; } .btn-execute .arrow { transition: transform 0.2s; } .btn-execute:hover .arrow { transform: translateX(4px); } /* Dark mode btn-execute */ html[data-theme="dark"] .btn-execute { background: #e5e7eb; color: #0f172a; box-shadow: 4px 4px 0 #94a3b8; } html[data-theme="dark"] .btn-execute:hover { background: #f3f4f6; box-shadow: 6px 6px 0 #94a3b8; transform: translate(-1px, -1px); } .pricing-note { font-size: 0.8rem; color: var(--text-tertiary); font-weight: 500; font-family: var(--font-mono); } .input-area-wrapper { display: none; } /* File Preview Chips - Cleaner look */ .file-chip { background: var(--bg-modal); border: 1px solid var(--code-inline-bg); border-radius: 8px; padding: 6px 12px; font-size: 0.85rem; color: var(--text-secondary); font-weight: 600; display: flex; align-items: center; gap: 8px; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s; } .file-chip:hover { background: var(--bg-card); border-color: var(--border-focus); box-shadow: 0 2px 4px rgba(0,0,0,0.05); color: var(--text-primary); } .file-chip-remove { cursor: pointer; color: var(--text-tertiary); transition: color 0.2s var(--ease-snap); display: flex; align-items: center; } .file-chip-remove:hover { color: var(--error-red); } /* Toolbar Footer - Cleaner Integration */ /* File Preview Chips - For Console */ .file-preview-area { padding: 0 20px 8px 20px; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; } .file-preview-area:empty { display: none; } /* Task confirmation modal file display */ .task-files-empty { color: var(--text-tertiary); font-weight: 600; font-size: 0.85rem; } .task-files-label { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; } .task-files-list { display: flex; flex-wrap: wrap; gap: 8px; } .task-file-pill { background: var(--bg-card); border: 1px solid var(--border-subtle); padding: 6px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); } .footer-grid { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; } .footer-col.links { display: flex; gap: 24px; } .footer-col.links a { color: var(--text-secondary); cursor: pointer; text-decoration: none; transition: color 0.2s var(--ease-snap); } .footer-col.links a:hover { color: var(--text-primary); } .footer-col.copyright { text-align: right; line-height: 1.4; } /* --- Arena/Battle View --- */ #arenaView { display: block; animation: fadeUp 0.5s var(--ease-snap); width: 100%; } /* --- Debate Modal Overlay --- */ .debate-modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: var(--z-modal); opacity: 0; transition: opacity 0.3s var(--ease-snap); } .debate-modal-overlay.active { display: flex; justify-content: center; align-items: center; padding: 20px; } .debate-modal-overlay.visible { opacity: 1; } .debate-modal { background: var(--bg-modal); border-radius: 4px; border: 2px solid var(--text-primary); width: 100%; max-width: 900px; /* FIX: Force a stable height so it doesn't jump or get cut off */ height: 85vh; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 12px 12px 0 rgba(15, 23, 42, 0.15); /* Ensure it centers correctly without being cut off at the top */ margin: auto; transform: translateY(20px); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s var(--ease-snap); overflow: hidden; /* Prevent double scrollbars */ position: relative; } .debate-modal-overlay.visible .debate-modal { transform: translateY(0); } .debate-modal-header { display: flex; justify-content: center; align-items: flex-start; padding: 14px 24px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-card); border-radius: 0; gap: 12px; position: relative; } .modal-question { font-size: 1rem; font-weight: 600; font-family: var(--font-sans); letter-spacing: -0.01em; color: var(--text-primary); line-height: 1.4; text-align: center; max-height: 60px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 0 40px; } /* Mobile: show a bit more of the question text */ @media (max-width: 480px) { .modal-question { padding: 0 32px; max-height: 84px; -webkit-line-clamp: 3; } } .modal-close-btn { position: absolute; top: 12px; right: 16px; background: none; border: none; cursor: pointer; padding: 8px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; touch-action: manipulation; border-radius: 8px; color: var(--text-secondary); transition: background-color 0.2s var(--ease-snap), color 0.2s var(--ease-snap); flex-shrink: 0; } .modal-close-btn:hover { background: var(--bg-input); color: var(--text-primary); } /* --- Debate Modal: Header Pipeline Layout --- */ .debate-modal .debate-pipeline-nav { display: flex; align-items: center; justify-content: center; gap: 14px; flex-shrink: 0; min-width: 0; } /* --- Debate Modal: Header Overflow Guard --- */ .debate-modal .modal-header-tabs { min-width: 0; } .debate-modal .modal-header-tabs .debate-pipeline-nav { min-width: 0; flex: 0 1 auto; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 600px) { .debate-modal .modal-header-tabs { padding: 6px 12px; } .debate-modal .debate-pipeline-nav { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; justify-content: center; } } .debate-modal-body { flex: 1; position: relative; overflow-y: auto; overflow-x: hidden; padding: 0; min-height: 300px; } /* FIX: Enforce top padding so avatars don't touch the header */ .debate-modal-body .chat-conversation { padding: 32px 24px 24px 24px; max-height: none; overflow: visible; overflow-x: hidden; } /* Links in chat are now clickable during debate (v3.61.14) */ /* --- TECH FINALIZATION HUD (Frosted Glass) --- */ /* ============================================================================= ARBITER PROTOCOL OVERLAY - Dramatic finalization experience ============================================================================= */ .arbiter-overlay { position: absolute; top: 80px; left: 0; right: 0; bottom: 0; /* Glassmorphism - see-through but blurred */ background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; padding: 24px; animation: overlayFadeIn 0.3s var(--ease-snap); } @keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Scanline grid texture */ .arbiter-overlay::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(34, 197, 94, 0.05) 1px, transparent 1px); background-size: 100% 32px; pointer-events: none; } /* ============================================================================= NEURAL CONVERGENCE - Arbiter Overlay ============================================================================= */ /* Container Layout */ .neural-interface { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; max-width: 500px; position: relative; } /* --- The Visualization --- */ .convergence-engine { display: flex; align-items: center; justify-content: center; gap: 20px; height: 120px; width: 100%; position: relative; } /* Side Labels */ .side-label { position: absolute; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.6; } .side-label.left { left: 0; top: -24px; color: var(--accent-cyan); } .side-label.right { right: 0; top: -24px; color: var(--warning-border); } /* The Central Hexagon */ .arbiter-core-hex { width: 80px; height: 80px; background: rgba(34, 197, 94, 0.1); border: 1px solid var(--accent-green); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 0 30px rgba(34, 197, 94, 0.2); z-index: 2; flex-shrink: 0; } .hex-inner { width: 40px; height: 40px; background: var(--accent-green); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); animation: coreBreath 2s ease-in-out infinite; } .hex-pulse { position: absolute; width: 100%; height: 100%; background: rgba(34, 197, 94, 0.3); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); animation: hexPulse 2s ease-out infinite; } /* Data Streams (The lines feeding in) */ .data-stream { flex: 1; height: 2px; background: rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } /* Particles moving along the lines */ .data-stream .particle { position: absolute; width: 40px; height: 2px; background: linear-gradient(90deg, transparent, #fff, transparent); opacity: 0; } /* Left Stream Animations (Cyan - Alpha) */ .stream-left .particle { background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent); } .stream-left .p1 { animation: flowRight 1.2s infinite; animation-delay: 0s; } .stream-left .p2 { animation: flowRight 1.5s infinite; animation-delay: 0.4s; } .stream-left .p3 { animation: flowRight 1.8s infinite; animation-delay: 0.8s; } /* Right Stream Animations (Orange - Beta) */ .stream-right .particle { background: linear-gradient(90deg, transparent, var(--warning-border), transparent); } .stream-right .p1 { animation: flowLeft 1.2s infinite; animation-delay: 0.2s; } .stream-right .p2 { animation: flowLeft 1.4s infinite; animation-delay: 0.6s; } .stream-right .p3 { animation: flowLeft 1.7s infinite; animation-delay: 1.0s; } /* --- Terminal Typography --- */ .status-terminal { text-align: center; font-family: var(--font-mono); } .terminal-header { font-size: 10px; letter-spacing: 2px; color: rgba(255, 255, 255, 0.3); margin-bottom: 8px; } .current-action { font-size: 16px; color: var(--accent-green); font-weight: bold; text-transform: uppercase; text-shadow: 0 0 10px rgba(34, 197, 94, 0.4); min-height: 24px; display: flex; justify-content: center; align-items: baseline; gap: 10px; flex-wrap: wrap; } .finalize-pct { font-size: 12px; letter-spacing: 1px; color: rgba(34, 197, 94, 0.75); font-weight: 800; text-shadow: none; } .history-log { font-size: 12px; color: rgba(255, 255, 255, 0.5); margin-top: 4px; height: 16px; transition: opacity 0.1s; } /* Progress Bar */ .convergence-progress { width: 100%; height: 3px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden; } .convergence-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-cyan), var(--accent-green), var(--warning-border)); border-radius: 2px; transition: width 0.3s var(--ease-snap); } /* --- Animations --- */ @keyframes flowRight { 0% { left: -20%; opacity: 0; } 50% { opacity: 1; } 100% { left: 100%; opacity: 0; } } @keyframes flowLeft { 0% { right: -20%; opacity: 0; } 50% { opacity: 1; } 100% { right: 100%; opacity: 0; } } @keyframes coreBreath { 0%, 100% { transform: scale(0.8); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 20px var(--accent-green); } } @keyframes hexPulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.8); opacity: 0; } } /* Elapsed time */ .arbiter-elapsed { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-mono); font-size: 0.7rem; color: rgba(255, 255, 255, 0.4); } .arbiter-elapsed-time { color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; } /* ============================================================================= CREDIT BADGE ENHANCEMENTS ============================================================================= */ .credit-badge { background: linear-gradient(135deg, var(--success-grad-1) 0%, var(--success-grad-hover-1) 100%); color: var(--text-primary); padding: 8px 14px; border-radius: 4px; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; border: 1px solid rgba(34, 197, 94, 0.3); cursor: pointer; display: flex; align-items: center; gap: 8px; transition: border-color 0.2s var(--ease-snap), background 0.2s var(--ease-snap), box-shadow 0.2s var(--ease-snap), transform 0.2s var(--ease-snap); position: relative; overflow: hidden; } .credit-badge:hover { border-color: var(--gpt-color); background: linear-gradient(135deg, var(--success-grad-hover-1) 0%, var(--success-grad-hover-2) 100%); box-shadow: 0 0 0 3px var(--success-border-soft, rgba(34, 197, 94, 0.2)); transform: translateY(-1px); } .credit-badge-icon { display: flex; align-items: center; justify-content: center; color: var(--gpt-color); } .credit-badge-value { font-variant-numeric: tabular-nums; } .credit-badge-pulse { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background: var(--gpt-color); border-radius: 4px; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; } .credit-badge.credit-added .credit-badge-pulse { animation: creditPulse 0.6s var(--ease-snap); } .credit-badge.credit-added { animation: creditBounce 0.4s var(--ease-snap) 0.1s; } @keyframes creditPulse { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.5; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } } @keyframes creditBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* Credit fly animation */ .credit-fly-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--z-toast); } .credit-fly { position: absolute; font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--accent-green); background: rgba(34, 197, 94, 0.25); border: 2px solid var(--accent-green); padding: 12px 20px; border-radius: 8px; white-space: nowrap; box-shadow: 0 0 20px rgba(34, 197, 94, 0.5), 0 4px 12px rgba(0,0,0,0.3); animation: creditFlyUp 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes creditFlyUp { 0% { opacity: 1; transform: translate(0, 0) scale(1.2); } 20% { opacity: 1; transform: translate(0, -20px) scale(1.3); } 80% { opacity: 1; transform: translate(var(--fly-x), var(--fly-y)) scale(1.1); } 100% { opacity: 0; transform: translate(var(--fly-x), var(--fly-y)) scale(0.8); } } /* ============================================================================= ARBITER SCAN - In-chat scanning effect before overlay ============================================================================= */ .arbiter-scan-banner { position: sticky; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.98) 20%); padding: 40px 24px 24px 24px; z-index: var(--z-scan-banner); animation: scanBannerIn 0.5s var(--ease-snap); } @keyframes scanBannerIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .scan-banner-content { background: linear-gradient(135deg, var(--toast-bg) 0%, #1e293b 100%); border: 1px solid rgba(34, 197, 94, 0.4); border-radius: 4px; padding: 20px 24px; display: flex; align-items: center; gap: 16px; box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.5), 0 0 30px rgba(34, 197, 94, 0.1); } .scan-icon { width: 44px; height: 44px; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); display: flex; align-items: center; justify-content: center; color: var(--gpt-color); flex-shrink: 0; animation: scanIconPulse 1.5s ease-in-out infinite; } @keyframes scanIconPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); transform: scale(1); } 50% { box-shadow: 0 0 20px 4px rgba(34, 197, 94, 0.2); transform: scale(1.05); } } .scan-text { flex: 1; min-width: 0; } .scan-title { display: block; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; color: var(--gpt-color); margin-bottom: 4px; } .scan-status { display: block; font-family: var(--font-mono); font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); } .scan-progress { width: 80px; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden; flex-shrink: 0; } .scan-progress-bar { height: 100%; width: 0%; background: var(--gpt-color); border-radius: 2px; transition: width 0.3s var(--ease-snap); } /* Chat bubble scanning effect - more visible */ .chat-bubble.scanning { position: relative; overflow: hidden; } .chat-bubble.scanning::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent 0%, rgba(34, 197, 94, 0.25) 40%, rgba(34, 197, 94, 0.4) 50%, rgba(34, 197, 94, 0.25) 60%, transparent 100% ); animation: scanLine 0.6s ease-in-out forwards; z-index: var(--z-overlay); } @keyframes scanLine { from { left: -100%; } to { left: 100%; } } /* Pulsing border during scan */ .chat-bubble.scanning { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.5), 0 0 15px rgba(34, 197, 94, 0.3); } /* Highlighter effect - random terms flash during scan */ .highlight-term { color: var(--accent-green) !important; text-shadow: 0 0 8px rgba(34, 197, 94, 0.6); transition: color 0.1s var(--ease-snap), text-shadow 0.1s var(--ease-snap); } .chat-bubble.scanned { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.4); transition: box-shadow 0.3s var(--ease-snap); } /* Scanned checkmark badge */ .chat-bubble.scanned::before { content: '✓'; position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; background: var(--gpt-color); color: var(--text-primary); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border-radius: 50%; animation: checkIn 0.3s var(--ease-snap); z-index: var(--z-overlay); box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4); } /* Judge bubbles - checkmark positioned inside header due to overflow:hidden */ .chat-message.judge .chat-bubble.scanned { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.4), 0 4px 12px rgba(0,0,0,0.15); } .chat-message.judge .chat-bubble.scanned::before { top: 8px; right: 8px; border-radius: 3px; } @keyframes checkIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } /* ============================================ TARGET LOCK SCAN MODE - "Zip, Stop, Analyze" ============================================ */ /* Mobile adjustments for scan banner */ @media (max-width: 600px) { .arbiter-scan-banner { padding: 30px 16px 16px 16px; } .scan-banner-content { padding: 16px; gap: 12px; flex-wrap: wrap; } .scan-icon { width: 36px; height: 36px; } .scan-icon svg { width: 16px; height: 16px; } .scan-title { font-size: 0.65rem; } .scan-status { font-size: 0.75rem; } .scan-progress { width: 100%; order: 3; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .debate-modal-body .result-section { padding: 24px; } .debate-modal-body .result-output { background: var(--bg-card); border-radius: 0; /* Square corners for Technical Report */ padding: 0; /* Remove padding, sections have their own */ border: 1px solid var(--text-primary); border-left: 6px solid var(--text-primary); /* Heavy left border */ margin: 0; box-shadow: none; } .debate-modal-footer { padding: 10px 24px; border-top: 2px dashed var(--border-subtle); background: var(--bg-card); border-radius: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .footer-actions { display: flex; gap: 16px; align-items: center; } /* Override collapsed class on desktop - always show actions */ .footer-actions.collapsed { display: flex; } /* Hide toggle on desktop - actions always visible */ .footer-actions-toggle { display: none; } .api-cost-display { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .api-cost-label { opacity: 0.7; } .api-cost-value { font-weight: 500; color: var(--text-primary); } /* --- Modal utility classes (extracted from inline styles) --- */ .modal-code-block { background: var(--bg-main); border: 1px solid var(--border-strong); padding: 16px; white-space: pre-wrap; font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-primary); } .modal-code-block-sm { background: var(--bg-main); border: 1px solid var(--border-strong); padding: 12px; margin-bottom: 16px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary); } .modal-subtitle { color: var(--text-secondary); margin-bottom: 16px; font-size: 0.9rem; } .modal-subtitle-plain { color: var(--text-secondary); margin-bottom: 16px; } .modal-switch-text { text-align: center; margin-top: 16px; font-size: 14px; color: var(--text-secondary); } .modal-sm { width: 420px; } .modal-scrollable { max-height: 85vh; } .modal-body-scroll { overflow-y: auto; } .btn-flex { flex: 1; } .btn-warning { border-color: var(--warning-color); color: var(--warning-color); } .btn-icon-left { margin-right: 6px; } .text-accent { color: var(--gpt-color); } .btn-block { width: 100%; } [role="button"] { cursor: pointer; } /* Prevent body scroll when modal is open */ body.modal-open { overflow: hidden; } /* Mobile adjustments for modal */ @media (max-width: 768px) { .debate-modal-overlay.active { padding: 0; } .debate-modal { height: 100vh; /* Full screen on mobile */ height: 100dvh; /* Better on mobile browsers with dynamic toolbars */ max-height: 100vh; max-height: 100dvh; border-radius: 0; max-width: 100%; border: none; box-shadow: none; } .debate-modal-header { border-radius: 0; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px 16px; } .debate-modal-body .chat-conversation { padding: 16px 16px 16px 16px; min-height: 200px; } .modal-header-tabs { padding: 6px 16px; } .debate-modal-footer { border-radius: 0; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); } .api-cost-display { width: 100%; justify-content: space-between; } .footer-actions { width: 100%; flex-direction: column; } .footer-actions.collapsed { display: none; } .footer-actions.expanded { display: flex; } .footer-actions-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px; background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: 6px; color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color 0.2s, color 0.2s; } .footer-actions-toggle:hover { background: var(--bg-card); color: var(--text-primary); } .footer-actions-toggle svg { transition: transform 0.2s; } .footer-actions-toggle.expanded svg { transform: rotate(180deg); } .footer-actions .btn { width: 100%; justify-content: center; min-height: 44px; } /* Result section - tablet */ .result-output { margin-top: 24px; margin-bottom: 40px; /* No box-shadow in Option 2 */ } .result-header { padding: 24px 20px; } .section-title { font-size: 1.5rem; } .result-answer-section { padding: 24px 20px; } .result-body { padding: 0; } .result-citations { padding: 20px; } /* Tab buttons - tablet: keep horizontal, scrollable */ /* Tab buttons - tablet: tighter spacing */ .modal-header-tabs { gap: 8px; } /* Final block sections */ .final-block { padding: 16px !important; } .final-block-title { font-size: 0.9rem; } /* Optimize modal - tablet */ .optimize-modal { max-width: 90% !important; } } .arena-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 16px; } .arena-header.centered { justify-content: center; gap: 12px; /* Tighter gap when centered */ } .status-dot { width: 8px; height: 8px; background: var(--text-tertiary); border-radius: 50%; transition: background-color 0.3s var(--ease-snap), box-shadow 0.3s var(--ease-snap); } .status-dot.active { background: var(--gpt-color); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); } .avatar { width: 26px; height: 26px; border-radius: 8px; color: white; font-size: 13px; display: flex; align-items: center; justify-content: center; font-weight: 800; } /* === CHAT CONVERSATION LAYOUT === */ .chat-conversation { max-width: 1000px; margin: 0 auto; padding: 32px 24px 24px 24px; /* 32px top for breathing room */ display: flex; flex-direction: column; gap: 16px; min-height: 400px; max-height: 70vh; overflow-y: auto; background: var(--bg-modal); border-radius: 16px; } .chat-message { display: flex; gap: 12px; max-width: 72%; animation: fadeIn 0.3s var(--ease-snap); min-width: 0; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .chat-message.alpha { align-self: flex-start; } .chat-message.beta { align-self: flex-end; flex-direction: row-reverse; } /* --- TECH SYSTEM AVATARS --- */ .chat-avatar { width: 32px; height: 32px; border-radius: 6px; overflow: hidden; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.15); margin-top: 4px; /* Align with first line of text */ } .chat-avatar svg { display: block; width: 100%; height: 100%; } /* Alpha (GPT) - Green Tag */ .chat-message.alpha .chat-avatar { /* SVG provides its own background */ } /* Beta (Gemini) - Purple Tag */ .chat-message.beta .chat-avatar { /* SVG provides its own background */ } /* ============================================= Judge - IDE Aesthetic (Code Editor Style) ============================================= */ .chat-message.judge .chat-avatar { display: none; /* Hide avatar, integrate into message */ } .chat-message.judge { justify-content: center; } .chat-message.judge .chat-bubble { background-color: var(--judge-bg); border: 1px solid var(--judge-border); border-radius: 8px; color: var(--judge-text); font-family: 'IBM Plex Mono', var(--font-mono), monospace; font-size: 0.85rem; line-height: 1.7; letter-spacing: -0.02em; max-width: 95%; width: 100%; padding: 0; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } /* IDE Header Bar */ .chat-message.judge .chat-bubble .model-name { background-color: var(--judge-bg-header); border-bottom: 1px solid var(--judge-border); padding: 10px 16px; margin: 0; display: flex; align-items: center; gap: 12px; } /* Window controls (decorative) */ .chat-message.judge .chat-bubble .model-name::before { content: ''; display: inline-block; width: 12px; height: 12px; background: #ff5f56; border-radius: 50%; box-shadow: 16px 0 0 #ffbd2e, 32px 0 0 #27ca40; flex-shrink: 0; margin-right: 40px; /* Compensate for box-shadow width */ } .chat-message.judge .model-name-text { color: var(--judge-accent); font-family: 'IBM Plex Mono', var(--font-mono), monospace; text-transform: uppercase; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.05em; } .chat-message.judge .model-name-text::before { content: "⚖ "; } /* Process ID / metadata */ .chat-message.judge .chat-bubble .model-name::after { content: 'arbiter://v3.2'; margin-left: auto; font-size: 0.65rem; color: var(--judge-text-dim); font-weight: 400; } /* Content area with line numbers gutter */ .chat-message.judge .chat-bubble .markdown-body { color: var(--judge-text-bright); font-family: 'IBM Plex Mono', var(--font-mono), monospace; font-weight: 400; line-height: 1.7; letter-spacing: -0.02em; padding: 16px 20px; display: flex; gap: 0; } /* Line numbers gutter */ .chat-message.judge .chat-bubble .judge-line-numbers { color: var(--judge-text-dim); font-size: 0.75rem; line-height: 1.7; padding-right: 16px; margin-right: 16px; border-right: 1px solid var(--judge-border); user-select: none; text-align: right; flex-shrink: 0; min-width: 28px; } /* Actual content */ .chat-message.judge .chat-bubble .judge-content { flex: 1; min-width: 0; } .chat-message.judge .chat-bubble .markdown-body strong, .chat-message.judge .chat-bubble .markdown-body b { color: var(--judge-highlight); font-weight: 600; } .chat-message.judge .chat-bubble .markdown-body em, .chat-message.judge .chat-bubble .markdown-body i { color: var(--judge-syntax-green); font-style: italic; } .chat-message.judge .chat-bubble .markdown-body code { background: var(--judge-border); color: var(--judge-syntax-red); padding: 2px 6px; border-radius: 3px; font-size: 0.9em; } .chat-message.judge .chat-bubble .markdown-body a { color: var(--judge-accent); } .chat-message.judge .chat-bubble .markdown-body p { margin-bottom: 0.75em; } .chat-message.judge .chat-bubble .markdown-body p:last-child { margin-bottom: 0; } /* Lists in judge content */ .chat-message.judge .chat-bubble .markdown-body ul, .chat-message.judge .chat-bubble .markdown-body ol { margin: 0.5em 0; padding-left: 1.5em; } .chat-message.judge .chat-bubble .markdown-body li { margin-bottom: 0.25em; } .chat-bubble { background: var(--bg-card); border-radius: 4px; /* Sharp corners */ padding: 16px 20px; box-shadow: none; /* No shadow */ border: 1px solid var(--border-subtle); /* Tech border */ position: relative; overflow-wrap: break-word; word-break: break-word; min-width: 0; } /* --- SYSTEM LOG STYLE BUBBLES --- */ /* Alpha Model (GPT) - Green Indicator */ .chat-message.alpha .chat-bubble { background: var(--bg-card); border: 1px solid var(--border-subtle); border-left: 4px solid var(--gpt-color); /* The Identifier */ border-radius: 2px; } /* Beta Model (Gemini) - Purple Indicator */ .chat-message.beta .chat-bubble { background: var(--bg-card); border: 1px solid var(--border-subtle); border-left: 4px solid var(--gemini-color); /* The Identifier */ border-radius: 2px; } .chat-bubble .model-name { font-family: var(--font-mono); /* Code font */ font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle); /* Subtle separator */ display: flex; align-items: center; gap: 8px; color: var(--text-secondary); } /* Add a technical prefix */ .chat-bubble .model-name::before { content: '>'; font-weight: 400; color: var(--text-tertiary); margin-right: 2px; } .chat-bubble .model-name .model-name-text { opacity: 0.6; } /* --- TECH STANCE FLAGS --- */ .stance-badge { font-family: var(--font-mono); /* Code font */ font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; /* Make it look like data */ padding: 3px 8px; border-radius: 2px; /* Sharp corners */ border: 1px solid transparent; line-height: 1; white-space: nowrap; margin-left: 8px; opacity: 0.9; } /* Alpha (GPT) - Tech Green */ .chat-message.alpha .stance-badge { background: rgba(16, 185, 129, 0.1); /* Low opacity green */ border-color: rgba(16, 185, 129, 0.3); color: var(--gpt-color); } /* Beta (Gemini) - Tech Purple */ .chat-message.beta .stance-badge { background: rgba(139, 92, 246, 0.1); /* Low opacity purple */ border-color: rgba(139, 92, 246, 0.3); color: var(--gemini-color); } /* Update the internal text to use theme-aware color */ .chat-bubble .markdown-body { font-size: 0.9rem; line-height: 1.6; color: var(--text-primary); overflow-wrap: break-word; word-break: break-word; padding: 0; /* Chat bubble already has padding */ } .chat-bubble .markdown-body p { margin-bottom: 10px; } .chat-bubble .markdown-body p:last-child { margin-bottom: 0; } .chat-bubble .markdown-body pre { background: #1e293b; color: var(--code-inline-bg); padding: 12px; border-radius: 8px; overflow-x: auto; margin: 10px 0; font-size: 0.8rem; } .chat-bubble .markdown-body code { font-family: 'JetBrains Mono', monospace; font-size: 0.85em; background: var(--bg-input); padding: 2px 6px; border-radius: 4px; } .chat-bubble .markdown-body pre code { background: transparent; padding: 0; } /* Clickable links in chat bubbles (v3.61.14) */ .chat-bubble a, .chat-bubble .markdown-body a { color: var(--primary); text-decoration: underline; cursor: pointer; pointer-events: auto; } .chat-bubble a:hover, .chat-bubble .markdown-body a:hover { color: var(--primary-dark, #1d4ed8); text-decoration: underline; } .typing-cursor { color: var(--primary); animation: blink 1s step-end infinite; margin-left: 1px; } /* Waiting/thinking state */ .chat-message.waiting .chat-bubble { background: var(--bg-modal); border: 1px solid var(--code-inline-bg); min-width: 200px; } .chat-message.waiting .thinking-header { display: flex; align-items: center; gap: 8px; } @media (max-width: 768px) { .chat-conversation { padding: 12px; } .chat-message { max-width: 95%; } .chat-avatar { width: 30px; height: 30px; } .chat-bubble { padding: 10px 14px; } } /* --- TECH PROCESS TRACK (Refined) --- */ /* The Container - Forces Tabs left, Progress right */ .modal-header-tabs { display: flex; align-items: center; justify-content: center; width: 100%; border-bottom: 1px solid var(--border-subtle); padding: 8px 24px; margin-bottom: 0; background: var(--bg-card); position: sticky; top: 0; z-index: var(--z-float); } /* Group the buttons so they stay together */ .tab-group { display: flex; gap: 12px; align-items: center; } /* Live status text shown in the sticky modal header */ .debate-status-text { display: none; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; } /* Only show prompt/cursor when element has content */ .debate-status-text:not(:empty)::before { content: '> '; opacity: 0.8; } .debate-status-text:not(:empty)::after { content: ' _'; opacity: 0.7; animation: blink 1.1s step-end infinite; } /* Mobile Tweak - Tighter spacing to fit on one line */ @media (max-width: 600px) { .modal-header-tabs { gap: 6px; padding: 10px 12px; } .debate-status-text { max-width: 120px; } } /* --- Modals --- */ /* Modal Backdrop - Hard UI */ .modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); display: none; justify-content: center; align-items: center; z-index: var(--z-modal); opacity: 0; transition: opacity 0.25s var(--ease-snap); } .modal-backdrop.open { display: flex; opacity: 1; } /* Hard UI Modal Container */ .modal { background: var(--bg-card); width: 400px; max-width: calc(100% - 32px); padding: 24px; /* Default padding for legacy modals */ border-radius: 0; border: 2px solid var(--text-primary); box-shadow: 8px 8px 0 var(--text-primary); transform: scale(0.98) translateY(10px); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; } /* Structured modals (with header/body/footer) remove default padding */ .modal:has(.modal-header), .modal.modal-structured { padding: 0; } .modal.modal-wide { width: 800px; max-width: 95%; } .modal-backdrop.open .modal { transform: scale(1) translateY(0); } /* Modal Internal Layout */ .modal-header { padding: 16px 20px; border-bottom: 2px solid var(--border-subtle); background: var(--bg-main); display: flex; align-items: center; gap: 12px; } .modal-header.warning { background: #fef3c7; border-color: var(--warning-border); } .modal-header.warning .modal-header-icon { color: var(--warning-color); } .modal-header-icon { color: var(--text-primary); display: flex; } .modal-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-primary); margin: 0; text-transform: uppercase; letter-spacing: 0.02em; } .modal-body { padding: 20px; } .modal-footer { padding: 16px 20px; display: flex; gap: 12px; border-top: 2px solid var(--border-subtle); } /* --- Legal Document Body (Privacy, Terms) --- */ .legal-body { max-height: 60vh; overflow-y: auto; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.7; } .legal-body h3 { margin-top: 20px; font-size: 1rem; color: var(--text-primary); } .legal-body p { margin-top: 12px; } .legal-body ul { margin-top: 8px; margin-left: 20px; } .legal-body a { color: var(--primary); } .legal-close { width: 100%; margin-top: 18px; } /* ============================================================================= SHARE MODAL ============================================================================= */ .share-subtitle { color: var(--text-secondary); font-size: 0.85rem; margin: 0 0 16px 0; } .share-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-subtle); background: var(--bg-main); margin-bottom: 12px; } .share-option-active { border-color: var(--claude-color); background: rgba(217, 119, 87, 0.08); } .share-option-icon { color: var(--text-secondary); display: flex; flex-shrink: 0; } .share-option-active .share-option-icon { color: var(--claude-color); } .share-option-text { flex: 1; display: flex; flex-direction: column; gap: 2px; } .share-option-label { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); } .share-option-desc { font-size: 0.8rem; color: var(--text-secondary); } .share-option-check { color: var(--claude-color); display: flex; } .share-privacy-note { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg-main); border: 1px dashed var(--border-subtle); font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 16px; } .share-privacy-note svg { flex-shrink: 0; opacity: 0.7; } .share-url-container { display: flex; gap: 8px; } .share-url-input { flex: 1; padding: 10px 12px; font-family: var(--font-mono); font-size: 0.8rem; background: var(--bg-main); border: 1px solid var(--border-strong); color: var(--text-primary); min-width: 0; } .share-url-input:focus { outline: none; border-color: var(--claude-color); } .share-copy-btn { flex-shrink: 0; white-space: nowrap; } /* ============================================================================= ARCHITECT / MANIFESTO TERMINAL MODAL ============================================================================= */ .architect-terminal { background: #0a0a0a; border: 1px solid var(--accent-green); border-radius: 8px; max-width: 520px; width: calc(100% - 32px); box-shadow: 0 0 20px rgba(34, 197, 94, 0.15), 0 25px 50px -12px rgba(0, 0, 0, 0.5); font-family: 'JetBrains Mono', var(--font-mono), monospace; overflow: hidden; transform: scale(0.98) translateY(10px); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .modal-backdrop.open .architect-terminal { transform: scale(1) translateY(0); } .architect-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #1a3d1a; background: #0d0d0d; } .architect-title { color: var(--accent-green); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.05em; } .architect-close { background: none; border: none; color: #6b7280; font-family: inherit; font-size: 0.8rem; cursor: pointer; padding: 4px 8px; transition: color 0.15s; } .architect-close:hover { color: var(--error-red); } .architect-body { padding: 24px; } .architect-name { color: var(--accent-green); font-size: 1rem; margin: 0 0 4px 0; } .architect-highlight { color: #ffffff; font-weight: 700; } .architect-role { color: #9ca3af; font-size: 0.8rem; margin: 0 0 20px 0; } .architect-mission { color: #6b7280; font-size: 0.85rem; line-height: 1.6; margin-bottom: 20px; } .architect-mission p { margin: 0; } .architect-note { background: rgba(34, 197, 94, 0.08); border-left: 2px solid var(--accent-green); padding: 12px 14px; font-size: 0.75rem; color: var(--accent-green-pale); line-height: 1.5; margin-bottom: 20px; } .architect-prompt { color: var(--accent-green); font-weight: 600; } .architect-status { border-top: 1px solid #1a1a1a; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; } .architect-status-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.7rem; } .architect-status-label { color: #4b5563; text-transform: uppercase; letter-spacing: 0.05em; } .architect-status-value { color: #9ca3af; } .architect-status-value.online { color: var(--accent-green); } /* Architect nav link styling */ .architect-link { display: inline-flex; align-items: center; gap: 6px; } .architect-link svg { opacity: 0.7; } @media (max-width: 480px) { .architect-terminal { border-radius: 6px; width: 90%; max-width: 90%; max-height: 85vh; overflow-y: auto; } .architect-body { padding: 20px 16px; } .architect-name { font-size: 0.9rem; } .architect-mission { font-size: 0.8rem; } } /* ============================================================================= MODEL DIAGNOSTIC MODAL ============================================================================= */ .model-diagnostic { background: #0a0a0a; border: 2px solid var(--accent-green); max-width: 680px; width: calc(100% - 32px); box-shadow: 0 0 20px rgba(34, 197, 94, 0.2); font-family: 'JetBrains Mono', var(--font-mono), monospace; overflow: hidden; transform: scale(0.98) translateY(10px); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .modal-backdrop.open .model-diagnostic { transform: scale(1) translateY(0); } .diag-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: rgba(34, 197, 94, 0.1); border-bottom: 1px solid rgba(34, 197, 94, 0.3); } .diag-title { color: #4ade80; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0; } .diag-title span { color: #ffffff; } .diag-close { background: none; border: none; color: var(--accent-green); font-family: inherit; font-size: 0.85rem; cursor: pointer; padding: 4px 8px; transition: color 0.15s, background-color 0.15s; } .diag-close:hover { color: #ffffff; background: var(--accent-green); } .diag-body { padding: 24px; } .diag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .diag-col { display: flex; flex-direction: column; gap: 20px; } .diag-field { display: flex; flex-direction: column; gap: 8px; } .diag-label { color: var(--accent-green-deep); font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; } .diag-value { color: var(--accent-green-pale); font-size: 0.85rem; line-height: 1.5; margin: 0; padding-left: 12px; border-left: 2px solid var(--accent-green); } .diag-list { list-style: disc; list-style-position: inside; color: #9ca3af; font-size: 0.8rem; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .diag-list li { line-height: 1.4; } .diag-meter { margin-top: auto; padding-top: 8px; } .diag-meter-labels { display: flex; justify-content: space-between; font-size: 0.65rem; color: var(--accent-green); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; } .diag-meter-track { background: rgba(34, 197, 94, 0.15); height: 8px; border-radius: 0; } .diag-meter-fill { background: var(--accent-green); height: 100%; transition: width 0.4s var(--ease-snap); } .diag-footer { background: #000; border-top: 1px solid rgba(34, 197, 94, 0.2); padding: 10px 16px; text-align: center; } .diag-waiting { color: var(--accent-green-deep); font-size: 0.7rem; margin: 0; animation: diag-pulse 2s ease-in-out infinite; } @keyframes diag-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* Model chip info button */ .ma-chip { cursor: pointer; transition: background-color 0.15s var(--ease-snap), border-color 0.15s var(--ease-snap); } .ma-chip:hover { background: rgba(34, 197, 94, 0.15); border-color: var(--accent-green); } .ma-info { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: rgba(34, 197, 94, 0.2); border-radius: 50%; font-size: 0.65rem; font-weight: 700; color: var(--accent-green); margin-left: 6px; transition: background-color 0.15s, color 0.15s; } .ma-chip:hover .ma-info { background: var(--accent-green); color: #000; } @media (max-width: 600px) { .diag-grid { grid-template-columns: 1fr; gap: 20px; } .diag-body { padding: 16px 14px; max-height: 60vh; overflow-y: auto; } .model-diagnostic { width: 90%; max-width: 90%; max-height: 85vh; border-radius: 6px; } .diag-value { font-size: 0.8rem; } .diag-list { font-size: 0.75rem; } } /* Cost Display Block */ .cost-display { background: var(--bg-main); border: 1px solid var(--border-strong); padding: 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px; } .cost-label { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } .cost-value { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--text-primary); } /* Refund Note */ .refund-note { font-family: var(--font-mono); font-size: 0.75rem; color: var(--judge-color); display: flex; align-items: center; gap: 8px; } /* File tier info */ .tier-info { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 12px; } .tier-info strong { color: var(--text-primary); } .tier-warnings { font-size: 0.8rem; color: var(--warning-text); background: var(--warning-bg); padding: 12px; border: 1px solid var(--warning-border); margin-bottom: 12px; } .tier-warnings ul { margin: 6px 0 0 18px; padding: 0; } .tier-warnings li { margin-bottom: 4px; } /* Legacy modal styles for other modals */ .modal h2 { font-size: 1.5rem; margin-bottom: 12px; letter-spacing: -0.02em; } .modal p { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 20px; line-height: 1.5; } .modal a { color: var(--primary); text-decoration: none; font-weight: 500; } .modal a:hover { text-decoration: underline; } .form-group { margin-bottom: 16px; } /* Form group labels - terminal style */ .form-group label { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); } /* --- Tech Form Inputs --- */ .form-input { width: 100%; padding: 12px 16px; /* Tech Style: Sharp corners & Neutral Tech bg */ border: 1px solid var(--border-subtle); border-radius: 4px; /* Sharp corners */ background: var(--bg-card); /* Typography */ font-family: var(--font-sans); /* Keep sans for readability */ font-size: 0.95rem; color: var(--text-primary); /* Transitions */ outline: none; transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); /* Initial subtle shadow */ box-shadow: 2px 2px 0 rgba(0,0,0,0.05); } .form-input::placeholder { color: var(--text-tertiary); font-family: var(--font-mono); /* Monospace placeholder looks very techy */ font-size: 0.85rem; opacity: 0.7; } /* Active State: Harder shadow & Darker border */ .form-input:focus { border-color: var(--text-primary); background: var(--bg-card); /* Hard block shadow instead of soft glow */ box-shadow: 4px 4px 0 rgba(15, 23, 42, 0.1); transform: translate(-1px, -1px); } /* Prevent Chrome autofill from breaking theme */ .form-input:-webkit-autofill, .form-input:-webkit-autofill:hover, .form-input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text-primary); -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset; border-color: var(--border-subtle); transition: background-color 5000s ease-in-out 0s; } html[data-theme="dark"] .form-input:-webkit-autofill, html[data-theme="dark"] .form-input:-webkit-autofill:hover, html[data-theme="dark"] .form-input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text-primary); -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset; } /* --- TECH PRICING OPTIONS (Add Funds Modal) --- */ .price-opt { border-radius: 2px; border: 1px solid var(--border-subtle); background: var(--bg-card); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; cursor: pointer; transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative; } .price-opt:hover { border-color: var(--gpt-color); background: var(--success-grad-1); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 rgba(16, 185, 129, 0.15); } .price-opt-label { font-family: var(--font-mono); font-size: 0.85rem; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; } .price-opt-val { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--text-primary); } .modal-rate-card { color: var(--text-tertiary); margin-bottom: 20px; font-size: 0.8rem; font-family: var(--font-mono); line-height: 1.8; } .modal-payment-badge { margin-top: 20px; border-top: 1px solid var(--border-subtle); padding-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0.7; } .payment-badge-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; } .payment-badge-provider { font-family: var(--font-display); font-size: 11px; font-weight: 800; color: #635bff; } /* --- TECH HISTORY LOG (History Modal) --- */ .history-search-wrapper { margin-bottom: 12px; } .history-search-input { width: 100%; background: var(--bg-card, #fff); border: 1px solid var(--border-subtle, #e5e7eb); border-radius: 0; padding: 10px 12px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-primary); outline: none; transition: border-color 0.2s; box-sizing: border-box; } .history-search-input::placeholder { color: var(--text-tertiary); opacity: 0.7; } .history-search-input:focus { border-color: var(--primary); } /* Dark mode search input */ [data-theme="dark"] .history-search-input { background: var(--bg-secondary, #1a1a1a); border-color: var(--border-subtle, #333); } .history-no-results { text-align: center; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 0.8rem; padding: 20px 0; } .history-log-container { max-height: 300px; overflow-y: auto; overflow-x: hidden; padding-right: 12px; } .history-log-item { padding: 12px 0; border-bottom: 1px dashed var(--border-subtle); display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: background 0.2s; } .history-log-item:hover { background: var(--bg-modal); margin: 0 -16px; padding: 12px 16px; } .history-log-item:last-child { border-bottom: none; } .history-meta { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-tertiary); display: flex; justify-content: space-between; align-items: center; } .history-delete-btn { background: transparent; border: 1px solid var(--accent-orange); color: var(--accent-orange); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; padding: 4px 10px; cursor: pointer; opacity: 0.7; transition: opacity 0.2s, background 0.2s, color 0.2s; } .history-delete-btn:hover { opacity: 1; background: var(--accent-orange); color: #000; } .history-query { font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .history-query::before { content: '> '; color: var(--gpt-color); font-weight: 800; font-family: var(--font-mono); } .history-empty { text-align: center; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 0.85rem; padding: 20px 0; } /* --- REDESIGNED RESULT CARD (POLISHED) --- */ /* --- OPTION 2: TECHNICAL REPORT STYLE --- */ .result-output { background: var(--bg-card); border: 1px solid var(--text-primary); border-left: 6px solid var(--text-primary); /* Heavy left border like a file folder */ border-radius: 0; /* Perfectly square */ padding: 0; box-shadow: none; /* Flat, document style */ overflow: hidden; animation: fadeUp 0.6s var(--ease-snap); margin-top: 48px; margin-bottom: 60px; } .result-header { background: var(--bg-card); border-bottom: 2px solid var(--text-primary); padding: 20px 40px; display: flex; flex-direction: column; align-items: flex-start; /* Left-aligned */ gap: 12px; } .result-title-group { display: flex; flex-direction: column; align-items: flex-start; /* Left-aligned */ text-align: left; gap: 8px; width: 100%; } .section-title { font-family: var(--font-display); /* Space Grotesk */ font-size: 1.25rem; /* Reduced from 2rem */ font-weight: 700; color: var(--text-primary); letter-spacing: 0.05em; line-height: 1; text-transform: uppercase; } /* --- VERDICT BADGE (replaces old bracket style) --- */ .winner-badge { display: inline-flex; align-items: center; font-family: var(--font-mono); background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); opacity: 0; transform: scale(2.5); } .winner-badge .verdict-label { background-color: var(--text-primary); color: var(--bg-main); padding: 4px 8px; border-radius: 4px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 10px; } .winner-badge .verdict-text { color: var(--text-primary); font-size: 0.85rem; font-weight: 600; padding-right: 8px; text-transform: none; } /* Stamp animation - slams in like a rubber stamp */ .winner-badge.stamp-animation { animation: stampIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } @keyframes stampIn { 0% { opacity: 0; transform: scale(2.5); } 70% { opacity: 1; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } /* Winner badge color variants - applies to the label inside */ .winner-badge.winner-alpha .verdict-label { background: var(--primary); color: #ffffff; } .winner-badge.winner-beta .verdict-label { background: var(--accent-green-dark); color: #ffffff; } .winner-badge.winner-consensus .verdict-label { background: var(--gemini-color); color: #ffffff; } .winner-badge.winner-default .verdict-label { background: var(--text-primary); color: var(--bg-main); } /* Dark mode winner badges */ html[data-theme="dark"] .winner-badge.winner-alpha .verdict-label { background: #60a5fa; color: #0f172a; } html[data-theme="dark"] .winner-badge.winner-beta .verdict-label { background: #34d399; color: #0f172a; } html[data-theme="dark"] .winner-badge.winner-consensus .verdict-label { background: #a78bfa; color: #0f172a; } .result-header .section-subtitle { font-family: var(--font-body); font-size: 0.9rem; color: var(--text-secondary); /* Darker, more readable */ font-weight: 500; line-height: 1.5; margin-top: 8px; text-transform: none; /* Explicitly no uppercase */ } /* The "Why" Section - Clean Document Style */ /* Collapsible Consensus Insight Section */ /* --- DECISION BRIEF (post-debate deliverable) --- */ /* ============================================================================= DECISION BRIEF - "MAINFRAME CARD" STYLE Brutalist, high-contrast, IBM-inspired modular design ============================================================================= */ .decision-brief-section { background: var(--frame-bg); border: 4px solid var(--frame-border); border-radius: 0; padding: 0; margin: 24px 40px; box-shadow: var(--shadow-hard-brutal); font-family: var(--font-sans); transition: border-color 0.3s var(--ease-snap), box-shadow 0.3s var(--ease-snap); } /* Main header bar - inverted colors */ .decision-brief-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: var(--header-bg); border-bottom: 2px solid var(--frame-border); } .decision-brief-label { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; color: var(--header-text); text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 10px; } .decision-brief-label::before { content: ''; display: inline-block; width: 8px; height: 100%; min-height: 18px; background: var(--accent-blue); } .decision-brief-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .decision-brief-actions .btn { border-color: var(--header-text); color: var(--header-text); background: transparent; } .decision-brief-actions .btn:hover { background: var(--header-text); color: var(--header-bg); } /* Bottom line / verdict area */ .decision-brief-bottom-line { font-family: var(--font-body); font-size: 1rem; color: var(--text-primary); line-height: 1.6; padding: 20px; background: var(--frame-bg); border-bottom: 2px solid var(--frame-border); } .decision-brief-bottom-line .brief-confidence { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 10px; border: 2px solid var(--frame-border); background: var(--card-bg); margin-left: 12px; } /* Grid for cards */ .decision-brief-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 20px; background: var(--frame-bg); } /* Individual brief cards - The "Modules" */ .brief-card { background: var(--card-bg); border: 2px solid var(--frame-border); margin: -1px; padding: 0; border-radius: 0; display: flex; flex-direction: column; transition: border-color 0.2s var(--ease-snap), box-shadow 0.2s var(--ease-snap); } /* Inverted header bar on each card */ .brief-card-title { background: var(--header-bg); color: var(--header-text); font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.5px; margin: 0; padding: 10px 14px; width: 100%; box-sizing: border-box; border-left: 6px solid var(--accent-blue); } /* Card type variations - color coding the accent */ .brief-card[data-type="disagreement"] .brief-card-title, .brief-card[data-type="counterpoint"] .brief-card-title, .brief-card[data-type="conflict"] .brief-card-title { border-left-color: var(--accent-red); } .brief-card[data-type="assumption"] .brief-card-title, .brief-card[data-type="change"] .brief-card-title { border-left-color: var(--warning-color); } /* Card body content */ .brief-card-body { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; padding: 14px; flex: 1; } .brief-card-body ul { margin: 0; padding-left: 18px; } .brief-card-body li { margin-bottom: 8px; } .brief-card-body li:last-child { margin-bottom: 0; } /* Decision Brief: Follow-up questions */ .brief-followup-list { display: flex; flex-direction: column; gap: 12px; } .brief-followup-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); } .brief-followup-item:last-child { border-bottom: none; padding-bottom: 0; } .brief-followup-left { flex: 1; min-width: 0; } .brief-followup-text { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.5; margin-bottom: 6px; } .brief-followup-use { flex: 0 0 auto; font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; color: var(--accent-blue); } /* ========================================= MOBILE ADJUSTMENTS - Mainframe Card Slim down the heavy brutalist look for mobile ========================================= */ @media (max-width: 768px) { /* 1. SLIM DOWN THE CONTAINER */ .decision-brief-section { border-width: 2px; margin: 12px; box-shadow: 4px 4px 0px rgba(0,0,0,0.1); } /* 2. COMPACT HEADERS */ .decision-brief-header { padding: 10px 14px; } .decision-brief-label { font-size: 0.75rem; } .decision-brief-label::before { width: 6px; min-height: 14px; } /* 3. TIGHTER BOTTOM LINE */ .decision-brief-bottom-line { padding: 14px; font-size: 0.95rem; } .decision-brief-bottom-line .brief-confidence { display: block; margin-left: 0; margin-top: 10px; width: fit-content; } /* 4. TIGHTEN THE GRID & CARDS */ .decision-brief-grid { grid-template-columns: 1fr; padding: 12px; gap: 0; } .brief-card { margin: 0 0 -2px 0; border-width: 1px; } .brief-card-title { font-size: 0.7rem; padding: 8px 12px; border-left-width: 4px; white-space: normal; line-height: 1.3; } .brief-card-body { padding: 12px; font-size: 0.88rem; } .brief-card-body ul { padding-left: 16px; } .brief-card-body li { margin-bottom: 6px; } /* 5. FOLLOW-UP QUESTIONS */ .brief-followup-item { flex-direction: column; gap: 8px; } .brief-followup-use { align-self: flex-start; } } /* ========================================= TRUST NARRATIVE / VERIFICATION REPORT ========================================= */ .trust-narrative-section { background: var(--frame-bg); border: 4px solid var(--frame-border); border-radius: 0; padding: 0; margin: 24px 40px; box-shadow: var(--shadow-hard-brutal); font-family: var(--font-sans); } .trust-narrative-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--header-bg); border-bottom: 2px solid var(--frame-border); } .trust-narrative-label { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; color: var(--header-text); text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 10px; } .trust-narrative-label::before { content: ''; display: inline-block; width: 8px; height: 100%; min-height: 18px; background: #2ecc71; } .trust-narrative-body { padding: 20px; border-bottom: 2px solid var(--frame-border); } .trust-narrative-text { font-family: var(--font-body); font-size: 0.95rem; color: var(--text-primary); line-height: 1.65; margin: 0; } .trust-narrative-stats { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px; background: var(--frame-bg); } .trust-stat-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; padding: 5px 10px; border: 2px solid var(--frame-border); background: var(--card-bg); } .trust-stat-value { color: var(--accent-blue); } .trust-stat-label { color: var(--text-secondary); } .trust-stat-warning .trust-stat-value { color: #e67e22; } .trust-stat-success .trust-stat-value { color: #2ecc71; } /* MOBILE */ @media (max-width: 768px) { .trust-narrative-section { border-width: 2px; margin: 12px; box-shadow: 4px 4px 0px rgba(0,0,0,0.1); } .trust-narrative-header { padding: 10px 14px; } .trust-narrative-label { font-size: 0.75rem; } .trust-narrative-label::before { width: 6px; min-height: 14px; } .trust-narrative-body { padding: 14px; } .trust-narrative-text { font-size: 0.88rem; } .trust-narrative-stats { padding: 12px 14px; gap: 6px; } .trust-stat-badge { font-size: 0.65rem; padding: 4px 8px; border-width: 1px; } } .result-insight-section { background: var(--bg-card); border-bottom: 1px solid var(--border-subtle); padding: 0; } .insight-toggle { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 40px; background: transparent; border: none; cursor: pointer; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); text-align: left; transition: background 0.15s var(--ease-snap); } .insight-toggle:hover { background: rgba(0, 0, 0, 0.02); } .insight-toggle-icon { font-size: 0.65rem; color: var(--text-tertiary); transition: transform 0.2s var(--ease-snap); width: 12px; } .insight-toggle[aria-expanded="true"] .insight-toggle-icon { transform: rotate(90deg); } .insight-toggle-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); } .insight-content { padding: 0 40px 24px 40px; animation: insightExpand 0.25s var(--ease-snap); } @keyframes insightExpand { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .insight-content .markdown-body { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7; max-width: 70ch; } #resultSummary { max-width: 70ch; /* Slightly wider for document feel */ } /* Citations Section - Document Style */ .result-citations { background: var(--bg-input); border-top: 1px solid var(--border-subtle); padding: 24px 40px; } .citations-label { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 14px; padding-bottom: 0; border-bottom: none; /* Remove dashed line */ display: block; width: 100%; } .citations-list { display: flex; flex-wrap: wrap; gap: 10px; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* The Main Answer - Document Style */ .result-answer-section { padding: 32px 40px; background: var(--bg-card); border-top: 1px solid var(--border-subtle); border-left: none; /* Remove colored accent */ } .result-answer-section .result-body { background: var(--bg-card) !important; padding: 0 !important; font-size: 0.95rem !important; color: var(--text-primary); line-height: 1.7 !important; border: none !important; border-radius: 0; box-shadow: none; } .result-answer-section .result-body p { margin-bottom: 1.25em; } .result-answer-section .result-body p:last-child { margin-bottom: 0; } /* Final Answer Header with fading line */ .final-answer-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .final-answer-header .answer-label { font-family: var(--font-mono); font-size: 1rem; font-weight: 800; color: var(--primary); /* Blue accent */ text-transform: uppercase; letter-spacing: 0.05em; margin: 0; white-space: nowrap; } html[data-theme="dark"] .final-answer-header .answer-label { color: #60a5fa; } .final-answer-header .fa-line { height: 1px; background: linear-gradient(90deg, var(--border-subtle) 0%, transparent 100%); flex-grow: 1; } /* Make code blocks inside the result stand out */ .result-answer-section .result-body pre { border: 1px solid var(--border-subtle); box-shadow: 2px 2px 0 rgba(0,0,0,0.04); } /* Force text to align with the labels */ /* Final Answer: Split sections (Answer + Claims) - Tech Style */ #resultContent .final-block { background: transparent !important; border: none !important; border-radius: 0; padding: 0 !important; margin: 0 0 16px 0 !important; box-shadow: none !important; } #resultContent .final-block-title { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary); margin: 0 0 10px 0; } #resultContent .final-block-answer .final-block-body { font-size: 1rem; } /* Clickable links in result section (v3.61.14) */ #resultContent a, .result-output a, .final-block a, #resultContent a:hover, .result-output a:hover, .final-block a:hover, /* --- SCROLL CUSHION --- */ /* This ensures that when we scroll to these sections, they stop 15% down the screen instead of jamming against the top */ #start, #debate, #result { scroll-margin-top: 15vh; /* 15% of viewport height */ } /* On mobile, we reduce it slightly so we don't waste space */ @media (max-width: 768px) { #start, #debate, #result { scroll-margin-top: 100px; } } /* --- Utilities --- */ .hidden { display: none !important; } /* --- Tech System Toast --- */ .toast { position: fixed; bottom: 30px; left: 50%; /* Center on mobile with slide-up effect */ transform: translateX(-50%) translateY(10px); z-index: var(--z-toast); /* Theme: Dark Terminal */ background: var(--text-primary); /* #0f172a */ color: var(--bg-page); /* Border & Shape */ border: 1px solid var(--border-focus); border-left: 4px solid var(--gpt-color); /* Green status strip by default */ border-radius: 2px; /* Sharp corners */ /* Typography */ font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; /* Spacing & Shadow */ padding: 14px 24px; box-shadow: 8px 8px 0 rgba(0,0,0,0.25); /* Hard block shadow */ /* Animation State */ opacity: 0; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } /* Add a terminal prompt prefix */ .toast::before { content: '> '; color: var(--text-tertiary); margin-right: 4px; } /* Show State */ .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Error State Variant */ .toast.toast-error { border-left-color: var(--error-red); /* Red warning strip */ } .toast.toast-error::before { content: '! '; /* Change prompt to alert */ color: var(--error-red); } /* Desktop toast placement */ @media (min-width: 900px) { .toast { left: auto; right: 24px; /* Reset horizontal transform for desktop, keep vertical slide */ transform: translateY(20px); } .toast.show { transform: translateY(0); } } /* Dark mode toast - keep dark terminal aesthetic */ html[data-theme="dark"] .toast { background: var(--toast-bg, #0b1220); color: var(--toast-text, #e5e7eb); border-color: var(--toast-border, #1f2937); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.5); } /* ============================================ MOBILE RESPONSIVE - TABLET (768px) ============================================ */ @media (max-width: 768px) { /* Nav */ nav { padding: 12px 16px; } .nav-items { gap: 8px; } .btn { padding: 8px 12px; font-size: 0.85rem; } .credit-badge { padding: 6px 10px; font-size: 0.8rem; } .credit-badge-icon svg { width: 12px; height: 12px; } /* Main content */ main { padding: 40px 16px; } /* Typography */ h1 { font-size: 2.2rem; } .subtitle { font-size: 1rem; padding: 0 10px; } /* Grids */ .pipeline-step { flex-direction: row; text-align: left; align-items: flex-start; gap: 16px; } .footer-grid { flex-direction: column; gap: 24px; text-align: center; } .footer-col.copyright { text-align: center; } /* Toolbar - replaced by console */ /* === CONSOLE RESPONSIVE - 768px === */ .console-wrapper { margin-bottom: 50px; } .console-header { padding: 10px 16px; } .console-footer { padding: 12px 16px; } .btn-execute { padding: 12px 20px; } /* Modals */ .modal { width: 95%; max-width: 440px; padding: 24px; margin: 16px; border-radius: 4px; } .modal.modal-wide { width: 95%; max-width: 95%; } .modal h2 { font-size: 1.3rem; } } /* ============================================ MOBILE RESPONSIVE - PHONE (480px) ============================================ */ @media (max-width: 480px) { /* Nav - simplified */ nav { padding: 10px 12px; flex-wrap: wrap; gap: 8px; } .brand { font-size: 1rem; } .nav-items { gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .btn { padding: 8px 10px; font-size: 0.8rem; } .btn-text { padding: 8px 6px; } .credit-badge { padding: 5px 8px; font-size: 0.75rem; gap: 5px; } .credit-badge-icon svg { width: 10px; height: 10px; } /* Hide "History" text on very small screens */ .nav-items .btn-text { font-size: 0.75rem; } /* Main content */ main { padding: 30px 12px; } /* Typography */ h1 { font-size: 1.8rem; line-height: 1.2; } .subtitle { font-size: 0.9rem; } /* Header section */ .header-section { margin-bottom: 30px; margin-top: 10px; } .header-section h1 { font-size: 2.25rem; } /* === CONSOLE RESPONSIVE - 480px === */ .console-wrapper { border-radius: 4px; margin-bottom: 40px; } .console-header { padding: 10px 16px; flex-wrap: wrap; gap: 8px; } .console-title { font-size: 0.7rem; } .tool-link { font-size: 0.65rem; padding: 3px 6px; } .console-body { min-height: 100px; } .line-marker { width: 30px; min-width: 30px; padding-top: 14px; font-size: 0.65rem; } #taskInput { padding: 14px 14px; font-size: 0.9rem; min-height: 100px; } .console-footer { padding: 12px 16px; flex-direction: row; gap: 12px; } .console-action-left { flex-shrink: 0; } .file-trigger { padding: 8px 10px; font-size: 0.7rem; } /* Hide text on mobile, show icon only */ .file-trigger span:not(.icon-plus):not(.file-badge) { display: none; } .console-action-right { flex: 1; justify-content: flex-end; } .pricing-note { display: none; } .btn-execute { padding: 10px 16px; font-size: 0.75rem; } .btn-execute .arrow { display: none; } /* Input area - make flex column for button positioning */ .input-area-wrapper { padding: 12px 16px 8px 16px; display: flex; flex-direction: column; } /* Input area needs padding to not overlap button */ .input-area-wrapper { padding: 12px 16px 12px 16px; } /* Textarea - Reset to match the Console design */ #taskInput { min-height: 100px; font-size: 0.95rem; padding: 14px 14px; } .pricing-note { padding: 0; font-size: 0.8rem; } /* Modals */ .modal { width: calc(100% - 24px); max-width: none; padding: 20px; margin: 12px; border-radius: 4px; max-height: 90vh; overflow-y: auto; } .modal h2 { font-size: 1.2rem; margin-bottom: 8px; } .modal p { font-size: 0.9rem; margin-bottom: 20px; } .form-input { padding: 12px; font-size: 1rem; min-height: 44px; } .modal .btn { min-height: 44px; } /* Wide modals */ .modal.modal-wide, /* Arena view */ #arenaView { padding: 0; } /* Message bubbles */ .msg { padding: 10px 12px; font-size: 0.85rem; } .status-text { font-size: 0.9rem; } /* Footer */ footer { padding: 30px 16px; } /* Toast */ .toast { width: calc(100% - 32px); left: 16px; transform: translateX(0) translateY(10px); } .toast.show { transform: translateX(0) translateY(0); } /* Result section - phone */ .result-header { padding: 20px 16px; } .section-title { font-size: 1.25rem; } .winner-badge { font-size: 0.85rem; padding: 4px 6px; } .result-answer-section { padding: 20px 16px; } .result-citations { padding: 16px; } /* Chat - phone */ .chat-conversation { padding: 8px; gap: 12px; min-height: 250px; } .chat-message { max-width: 100%; gap: 8px; } .chat-avatar { width: 26px; height: 26px; } .chat-bubble { padding: 8px 12px; } .chat-bubble .markdown-body { font-size: 0.85rem; } /* Judge IDE - mobile adjustments */ .chat-message.judge .chat-bubble { border-radius: 6px; } .chat-message.judge .chat-bubble .model-name { padding: 8px 12px; gap: 10px; } .chat-message.judge .chat-bubble .model-name::before { width: 10px; height: 10px; box-shadow: 14px 0 0 #ffbd2e, 28px 0 0 #27ca40; margin-right: 36px; } .chat-message.judge .model-name-text { font-size: 0.7rem; } .chat-message.judge .chat-bubble .model-name::after { display: none; /* Hide process ID on mobile */ } .chat-message.judge .chat-bubble .markdown-body { padding: 12px 14px; font-size: 0.8rem; } .chat-message.judge .chat-bubble .judge-line-numbers { font-size: 0.65rem; padding-right: 10px; margin-right: 10px; min-width: 22px; } /* Arbiter overlay - phone */ .arbiter-overlay { padding: 16px; top: 60px; } .arbiter-core { width: 36px; height: 36px; } .arbiter-core svg { width: 20px; height: 20px; } .arbiter-elapsed { font-size: 0.65rem; } /* Optimize modal - phone */ .optimize-modal { max-width: calc(100% - 24px) !important; margin: 12px !important; } .optimize-modal .modal-body { padding: 16px; } .optimize-title { font-size: 1rem; } .optimize-input { font-size: 0.85rem; padding: 10px; max-height: 100px; } .optimize-actions { flex-direction: column; } .optimize-btn-primary, .optimize-btn-secondary { width: 100%; } /* Terms/Privacy modals - phone */ .modal-wide { max-height: 90vh !important; } .modal-wide h2 { font-size: 1.1rem; padding: 16px; margin: 0; border-bottom: 1px solid var(--border-subtle); } .modal-wide > div[style*="max-height"] { padding: 16px; } /* Hero status line */ .hero-status { font-size: 0.65rem; } } /* ============================================ MOBILE RESPONSIVE - SMALL PHONE (360px) ============================================ */ @media (max-width: 360px) { nav { padding: 8px 10px; } .brand { font-size: 0.9rem; gap: 6px; } h1 { font-size: 1.5rem; } .subtitle { font-size: 0.85rem; } main { padding: 20px 10px; } /* Console responsive - 360px */ .console-wrapper { border-radius: 4px; box-shadow: 4px 4px 0 rgba(15, 23, 42, 0.1); } .console-header { padding: 8px 12px; } .console-title { font-size: 0.65rem; } .console-footer { padding: 10px 12px; } .line-marker { width: 24px; min-width: 24px; } #taskInput { padding: 10px 12px; } .btn-execute { padding: 10px 14px; font-size: 0.7rem; } .modal { padding: 16px; margin: 8px; } } /* ============================================ TOUCH-FRIENDLY ENHANCEMENTS ============================================ */ @media (hover: none) and (pointer: coarse) { /* Larger touch targets */ .btn { min-height: 44px; } .credit-badge { min-height: 36px; } .file-trigger { min-height: 44px; } .btn-execute { min-height: 44px; } .form-input { min-height: 48px; } /* Remove hover effects that don't work on touch */ .btn:hover { transform: none; } .console-wrapper:hover { transform: none; } /* Better tap feedback */ .btn:active { transform: scale(0.97); opacity: 0.9; } } /* ============================================ LANDSCAPE PHONE ============================================ */ @media (max-height: 500px) and (orientation: landscape) { main { padding: 20px 16px; } .header-section { margin-bottom: 20px; margin-top: 10px; } h1 { font-size: 1.8rem; } .modal { max-height: 85vh; } /* Console landscape adjustments */ .console-wrapper { margin-bottom: 30px; } .console-body { min-height: 80px; } #taskInput { min-height: 80px; } .console-footer { padding: 10px 16px; } .btn-execute { padding: 10px 20px; } } /* ============================================ SAFE AREA (iPhone notch, etc.) ============================================ */ @supports (padding: env(safe-area-inset-bottom)) { nav { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } main { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } footer { padding-bottom: max(30px, env(safe-area-inset-bottom)); } } footer{opacity:0.92;} .faq-item { background: var(--bg-card); border: 1px solid var(--border-subtle); /* Sharper corners */ border-radius: 4px; overflow: hidden; transition: border-color 0.2s var(--ease-snap), box-shadow 0.2s var(--ease-snap); margin-bottom: 12px; /* Spacing between items */ } .faq-item:hover { border-color: var(--border-focus); box-shadow: var(--shadow-sm); } /* Change: High contrast active state (No Layout Jump) */ .faq-item[open] { /* Keep border at 1px so the box size doesn't change */ border: 1px solid var(--text-primary); /* Use inset shadow to fake the 2nd pixel of thickness + add the drop shadow */ box-shadow: inset 0 0 0 1px var(--text-primary), /* Simulated 2px border */ 4px 4px 0 rgba(0,0,0,0.1); /* The Block Shadow */ } .faq-item summary { padding: 14px 16px; font-weight: 700; font-size: 0.95rem; color: var(--text-primary); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; /* Use Monospace font for the "Rule" */ font-family: var(--font-mono); } /* Tech-style icon */ .faq-item summary::after { content: '[+]'; font-family: var(--font-mono); font-size: 1rem; color: var(--text-tertiary); transition: color 0.2s var(--ease-snap); letter-spacing: 2px; } .faq-item[open] summary::after { content: '[-]'; color: var(--text-primary); transform: none; /* Remove rotation, just swap text */ } .faq-item summary::-webkit-details-marker { display: none; } /* --- TECH ACCORDION (SYSTEM PROTOCOLS) --- */ .section-subtitle { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-tertiary); margin-top: 8px; } /* ============================================================================= Human-friendly debate UI helpers (proposal cards, decision cards, stage tracker) ============================================================================= */ .stage-tracker { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; white-space: nowrap; position: relative; /* Capsule styling for the flow itself */ padding: 7px 12px; border-radius: 999px; background: rgba(37, 99, 235, 0.06); border: 1px solid rgba(37, 99, 235, 0.18); color: var(--primary); } /* Invisible guide path for the orbiting dot (used by JS for getPointAtLength). */ .stage-orbit-layer { position: absolute; /* Expand from the padding box out to the border box so the dot can trace the border line */ top: calc(0px - var(--orbit-bt, 1px)); right: calc(0px - var(--orbit-br, 1px)); bottom: calc(0px - var(--orbit-bb, 1px)); left: calc(0px - var(--orbit-bl, 1px)); pointer-events: none; z-index: var(--z-base); } .stage-orbit-guide { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; z-index: var(--z-base); } .stage-orbit-guide-path { fill: none; stroke: none; } /* A tiny orbiting DOT that traces the capsule border (decorative). The path is computed in JS from the pill size, so it hugs the rounded sides. This keeps the dot perfectly circular (no SVG stretching). */ .stage-orbit-dot { position: absolute; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: 0.55; pointer-events: none; z-index: var(--z-base); filter: drop-shadow(0 0 2px rgba(37, 99, 235, 0.30)); /* JS positions the dot; center it on the computed point */ transform: translate(-50%, -50%); } /* Stop the in-progress indicator once we're at Final Answer */ .stage-tracker.stage-done .stage-orbit-dot { display: none; } /* Ensure text sits above the decorative orbit */ .stage-tracker > *:not(.stage-orbit-layer) { position: relative; z-index: var(--z-raised); } @media (max-width: 520px) { .stage-tracker { display: flex; flex-wrap: wrap; justify-content: center; margin-left: 0; white-space: normal; } /* Keep mobile clean: no orbit decoration */ .stage-orbit-dot { display: none; } } @media (prefers-reduced-motion: reduce) { .stage-orbit-dot { display: none; } } .stage-step { font-size: 0.8rem; color: var(--text-tertiary); user-select: none; } .stage-step.active { color: var(--text-primary); font-weight: 700; } .stage-sep { font-size: 0.8rem; color: var(--text-tertiary); user-select: none; } .proposal-header { font-weight: 700; margin-bottom: 0.5em; } .judge-card { border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; background: rgba(255,255,255,0.04); padding: 12px; } .judge-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: 6px; } .judge-verdict { font-size: 1rem; font-weight: 800; margin-bottom: 8px; } .judge-votes { display: grid; gap: 6px; margin: 8px 0 6px 0; } .judge-vote-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,0.15); } .judge-vote-who { font-weight: 700; } .judge-next { color: var(--text-secondary); margin-top: 6px; } /* Claim Formatting */ .claim-id { font-weight: 700; color: var(--gpt-color); font-family: var(--font-mono); font-size: 0.8em; background: var(--bg-input); padding: 2px 6px; border-radius: 4px; margin-right: 4px; } .claim-text { color: var(--text-primary); } .claim-source { color: var(--text-secondary); font-style: italic; } .claim-unverified { color: var(--warning-color, #ff9800); font-size: 0.85em; font-weight: 600; margin-left: 6px; } /* --- TECH SPEC SECTION (Swiss/Minimalist Style) --- */ .spec-container { max-width: 900px; margin: 0 auto; font-family: var(--font-mono); } /* Header */ .spec-header { border-bottom: 2px solid var(--text-primary); padding-bottom: 20px; margin-bottom: 50px; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; } .spec-title { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; color: var(--text-primary); text-transform: uppercase; letter-spacing: -0.03em; } /* Smart Cursor (Refined) */ .cursor-blink { display: inline-block; background-color: var(--text-primary); width: 0.5em; height: 0.8em; vertical-align: baseline; margin-left: 4px; animation: blink 1s step-end infinite; } .spec-meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-tertiary); font-weight: 500; } /* Section Labels */ .section-label { font-size: 0.7rem; color: var(--text-tertiary); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; } /* Pipeline ASCII (Mobile Scrollable) */ .pipeline-ascii { background: transparent; margin-bottom: 60px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 10px; /* Scroll Hint Fade */ mask-image: linear-gradient(to right, black 95%, transparent 100%); -webkit-mask-image: linear-gradient(to right, black 95%, transparent 100%); } /* Custom Scrollbar Styling */ .pipeline-ascii::-webkit-scrollbar, .matrix-wrapper::-webkit-scrollbar { height: 6px; } .pipeline-ascii::-webkit-scrollbar-track, .matrix-wrapper::-webkit-scrollbar-track { background: transparent; } .pipeline-ascii::-webkit-scrollbar-thumb, .matrix-wrapper::-webkit-scrollbar-thumb { background: var(--border-focus); border-radius: 3px; } .pipeline-ascii pre { font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.7; color: var(--text-secondary); font-weight: 500; white-space: pre; min-width: 600px; } .ascii-highlight { color: var(--gpt-color); background-color: #ecfdf5; font-weight: 700; padding: 0 4px; } .ascii-dim { color: var(--text-tertiary); } /* Stats Row */ .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 80px; padding-bottom: 40px; border-bottom: 1px solid var(--border-subtle); } .stat-number { font-size: 2.5rem; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; } .pulsing-dot { width: 8px; height: 8px; background-color: var(--gpt-color); border-radius: 50%; display: inline-block; animation: pulse-green 2s infinite; } @keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); } 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); } } .stat-label { font-size: 0.7rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } /* Grid - Swiss Style (no cards) */ .spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 80px; } @media (max-width: 768px) { .spec-grid { grid-template-columns: 1fr; gap: 50px; } .stats-row { grid-template-columns: 1fr; gap: 30px; } .stat-number { font-size: 2rem; } .spec-header { flex-direction: column; align-items: flex-start; gap: 10px; } } /* Tech Column (replaces tech-card) */ .tech-column h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--text-primary); display: inline-block; } .tech-sub { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-tertiary); margin-bottom: 24px; display: block; } /* Objective Box */ .tech-objective { background: var(--bg-modal); border-left: 2px solid var(--text-primary); padding: 16px; margin-bottom: 30px; } .tech-objective .label { display: block; font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-tertiary); margin-bottom: 6px; letter-spacing: 0.05em; font-weight: 700; } .tech-objective .val { font-family: var(--font-mono); font-size: 0.9rem; color: var(--text-primary); font-weight: 700; text-transform: uppercase; } /* List Styles */ .tech-list { list-style: none; } .tech-list li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border-subtle); font-size: 0.85rem; color: var(--text-secondary); } .tech-list li:last-child { border-bottom: none; } .tech-list strong { color: var(--text-primary); font-weight: 700; display: block; margin-bottom: 2px; } .icon-check { color: var(--gpt-color); font-weight: bold; } .icon-warn { /* Styles defined in main .icon-warn block above */ } /* Matrix Table (Restored & Cleaned) */ .matrix-wrapper { margin-bottom: 60px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .tech-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 600px; } .tech-table th { text-align: left; padding: 16px 12px; border-bottom: 2px solid var(--text-primary); font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); } .tech-table td { padding: 16px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: top; } .tech-table .col-param { width: 40%; font-weight: 600; color: var(--text-primary); } .tech-table .col-us { width: 30%; color: var(--gpt-color); font-weight: 700; } .tech-table .col-them { width: 30%; color: var(--text-tertiary); } .param-desc { display: block; font-size: 0.7rem; color: var(--text-tertiary); margin-top: 4px; font-weight: 400; } /* Hide param description on mobile to save space */ @media (max-width: 768px) { .param-desc { display: none; } } /* System Status Footer */ .system-status { margin-top: 60px; font-size: 0.75rem; color: var(--text-primary); border-top: 1px solid var(--border-subtle); padding-top: 20px; display: flex; justify-content: space-between; font-family: var(--font-mono); } .status-online { color: var(--gpt-color); font-weight: 700; } #faq { margin-top: 100px; margin-bottom: 100px; } /* === FAQ TERMINAL STYLES === */ /* Using .faq-terminal prefix to override base .faq-item styles */ .faq-terminal { border-top: 1px solid var(--border-subtle); } .faq-terminal .faq-item { background: transparent; border: none; border-bottom: 1px solid var(--border-subtle); border-radius: 0; margin-bottom: 0; box-shadow: none; } .faq-terminal .faq-item:hover { border-color: var(--border-subtle); box-shadow: none; } .faq-terminal .faq-item[open] { border: none; border-bottom: 1px solid var(--border-subtle); box-shadow: none; } .faq-terminal .faq-item summary { list-style: none; padding: 24px 0; cursor: pointer; display: flex; justify-content: flex-start; /* Override space-between */ align-items: center; gap: 12px; transition: background-color 0.2s, padding-left 0.2s; } /* Remove the [+] indicator from terminal style */ .faq-terminal .faq-item summary::after { content: none; display: none; } .faq-terminal .faq-item summary::-webkit-details-marker { display: none; } .faq-terminal .faq-item:hover summary { background-color: var(--bg-input); padding-left: 10px; } .faq-terminal .faq-item[open] summary { color: var(--gpt-color); } /* The 'Terminal Prompt' Arrow */ .cmd-marker { font-weight: 700; color: var(--gpt-color); transition: transform 0.2s; flex-shrink: 0; } /* Rotate the arrow 90deg when open */ .faq-terminal .faq-item[open] .cmd-marker { transform: rotate(90deg); display: inline-block; } .cmd-id { font-family: var(--font-mono); color: var(--text-tertiary); font-size: 0.8rem; flex-shrink: 0; } .cmd-text { font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.02em; text-transform: uppercase; } .cmd-output { padding: 0 0 32px 34px; font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-secondary); line-height: 1.7; max-width: 650px; } /* --- TECH HERO HEADER --- */ /* The new "System Online" badge */ .hero-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); background: var(--bg-input); padding: 6px 12px; border-radius: 4px; /* Sharp corners */ border: 1px solid var(--border-subtle); margin-bottom: 24px; letter-spacing: 0.05em; } .hero-status .status-dot { width: 8px; height: 8px; background-color: var(--gpt-color); /* Green dot */ border-radius: 50%; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); } /* Update the Title to be tighter */ .header-section h1 { letter-spacing: -0.05em; /* Tighter tracking */ margin-bottom: 16px; } /* Update the Subtitle to look like code */ .subtitle { font-family: var(--font-mono); font-size: 0.9rem; /* Smaller, sharper */ color: var(--text-secondary); line-height: 1.6; opacity: 0.9; } /* --- TERMINAL FOOTER --- */ .terminal-footer { background: #020617; /* Very dark slate/black */ border-top: 1px solid var(--text-primary); padding: 60px 24px 30px 24px; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 0.85rem; margin-top: auto; } .footer-grid { max-width: 1000px; margin: 0 auto 50px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; } /* Brand Column */ .footer-brand { color: #fff; font-weight: 800; font-size: 1.1rem; letter-spacing: -0.02em; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .brand-icon { color: var(--gpt-color); } .footer-meta { line-height: 1.6; margin-bottom: 16px; color: var(--text-secondary); } .status-ok { color: var(--gpt-color); font-weight: 700; } .footer-loc { font-size: 0.75rem; opacity: 0.6; } /* Headers & Links */ .footer-header { color: #fff; font-size: 0.8rem; font-weight: 700; margin-bottom: 20px; letter-spacing: 0.1em; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 12px; } .footer-links a { color: var(--text-tertiary); text-decoration: none; transition: color 0.2s, padding-left 0.2s; } .footer-links a:hover { color: var(--primary); padding-left: 6px; /* Subtle movement */ } /* Network / External */ .network-item { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .network-link { color: #fff; font-weight: 700; text-decoration: none; border: 1px solid var(--toast-border); padding: 8px 12px; border-radius: 4px; transition: border-color 0.2s var(--ease-snap), background-color 0.2s var(--ease-snap); display: inline-flex; align-items: center; gap: 8px; } .network-link:hover { border-color: #fff; background: rgba(255,255,255,0.05); } .network-tag { font-size: 0.7rem; background: #1e293b; color: var(--text-tertiary); padding: 2px 6px; border-radius: 2px; } /* Bottom Bar */ .footer-bottom { max-width: 1000px; margin: 0 auto; border-top: 1px solid #1e293b; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--text-secondary); } @media (max-width: 600px) { .footer-bottom { flex-direction: column; gap: 12px; text-align: center; } .terminal-footer { padding: 40px 16px 24px 16px; } .footer-grid { gap: 30px; margin-bottom: 30px; } .footer-brand { font-size: 1rem; justify-content: center; } .footer-col { text-align: center; } .footer-meta { font-size: 0.8rem; } .footer-header { font-size: 0.75rem; } .footer-links li { margin-bottom: 10px; } .network-item { align-items: center; } } /* ============================================================================= ACTIVITY CHIPS - Terminal/System Protocol Theme ============================================================================= */ .activity-feed { display: flex; flex-wrap: wrap; gap: 16px; padding: 8px 16px; } .activity-chip { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: transparent; border: none; box-shadow: none; font-family: 'IBM Plex Mono', var(--font-mono), monospace; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.3px; } .activity-chip .chip-pid { opacity: 0.4; font-weight: 400; } .activity-chip .activity-text { font-weight: 700; text-transform: uppercase; } .activity-chip .chip-elapsed { opacity: 0.5; font-weight: 400; font-variant-numeric: tabular-nums; } .activity-chip .chip-cursor { font-weight: 800; animation: chipCursorBlink 1s step-end infinite; } @keyframes chipCursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Alpha (Green) */ .alpha-chip { color: #34d399; text-shadow: 0 0 8px rgba(52, 211, 153, 0.5); } /* Beta (Purple) */ .beta-chip { color: #a855f7; text-shadow: 0 0 8px rgba(168, 85, 247, 0.5); } /* Judge - Terminal green */ .judge-chip { color: #00ff41; text-shadow: 0 0 8px rgba(0, 255, 65, 0.5); } /* Light theme: darker colors, no glow */ html[data-theme="light"] .alpha-chip { color: var(--accent-green-dark); text-shadow: none; } html[data-theme="light"] .beta-chip { color: var(--gemini-color); text-shadow: none; } html[data-theme="light"] .judge-chip { color: var(--judge-color); text-shadow: none; } /* ============================================================================= OPTIMIZATION MODAL - Terminal/System Protocol Theme ============================================================================= */ .optimize-modal { max-width: 550px !important; border-radius: 0 !important; border: 2px solid #000 !important; box-shadow: 8px 8px 0px rgba(0,0,0,0.2) !important; font-family: 'Courier New', Courier, monospace; } .optimize-modal .modal-body { text-align: left; padding: 1.5rem; } .optimize-header { border-bottom: 2px solid #000; padding-bottom: 16px; margin-bottom: 20px; } .optimize-status { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; } .optimize-title { font-size: 1.1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin: 8px 0 4px 0; color: var(--text-primary); } .optimize-subtitle { font-size: 0.85rem; color: var(--text-secondary); margin: 0; } .optimize-section { margin-bottom: 16px; } .optimize-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 6px; font-weight: 700; } .optimize-label.enhanced-label { color: var(--gpt-color); } .optimize-input { border-radius: 0; border: 1px solid var(--border-subtle); background: var(--bg-input); font-family: 'Courier New', Courier, monospace; color: var(--text-primary); padding: 12px; font-size: 0.9rem; max-height: 120px; overflow-y: auto; } .optimize-input.original { background: var(--bg-card); color: var(--text-tertiary); } .optimize-input.enhanced { background: var(--bg-card); border: 2px solid var(--gpt-color); color: var(--text-primary); font-weight: 600; } .optimize-actions { display: flex; gap: 12px; margin-top: 20px; } .optimize-btn-primary { flex: 1; border-radius: 0 !important; background: #000 !important; color: #fff !important; text-transform: uppercase; font-weight: 800 !important; font-family: 'Courier New', Courier, monospace; border: 2px solid #000 !important; padding: 12px 16px !important; letter-spacing: 0.5px; } .optimize-btn-primary:hover { background: #222 !important; } .optimize-btn-secondary { flex: 1; border-radius: 0 !important; background: transparent !important; color: var(--text-primary) !important; text-transform: uppercase; font-weight: 800 !important; font-family: 'Courier New', Courier, monospace; border: 2px solid var(--border-subtle) !important; padding: 12px 16px !important; letter-spacing: 0.5px; } .optimize-btn-secondary:hover { border-color: var(--text-primary) !important; } .optimize-abort { display: block; width: 100%; margin-top: 12px; background: transparent; border: none; color: var(--text-secondary); font-family: 'Courier New', Courier, monospace; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; text-decoration: underline; padding: 8px; } .optimize-abort:hover { color: var(--text-primary); } /* ============================================ SPECS SECTION PADDING (moved out of inline HTML) ============================================ */ .specs-section { padding: 60px 24px; } @media (max-width: 768px) { .specs-section { padding: 40px 16px; } } @media (max-width: 480px) { .specs-section { padding: 30px 12px; } } /* ============================================ MOBILE NAV MENU (clean on phones) Enhanced with animated hamburger and scroll lock ============================================ */ .nav-toggle { display: none; width: 44px; height: 44px; background: transparent; border: 1px solid var(--border-subtle); border-radius: 8px; cursor: pointer; padding: 0; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text-primary); border-radius: 1px; transition: transform 0.3s var(--ease-snap), opacity 0.3s var(--ease-snap); transform-origin: center; } /* Animated X when menu is open */ nav.nav-open .nav-toggle span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); } nav.nav-open .nav-toggle span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Body scroll lock when menu is open */ body.nav-menu-open { overflow: hidden; } /* Mobile menu overlay */ .nav-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: var(--z-nav-overlay); opacity: 0; transition: opacity 0.3s var(--ease-snap); } .nav-overlay.active { display: block; opacity: 1; } @media (max-width: 600px) { nav { justify-content: flex-start; gap: 12px; flex-wrap: wrap; position: relative; z-index: var(--z-overlay); } /* Reset order for mobile - use HTML order */ .nav-right-controls { order: 0; margin-left: auto; /* Push to right edge */ } .nav-toggle { display: inline-flex; } /* Hide items until menu is opened */ .nav-items { display: none; width: 100%; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 10px; padding-top: 12px; padding-bottom: 8px; border-top: 1px solid var(--border-subtle); margin-top: 8px; } nav.nav-open .nav-items { display: flex; } nav.nav-open .nav-items .btn, nav.nav-open .nav-items .credit-badge { width: 100%; justify-content: center; min-height: 44px; /* Touch-friendly */ } /* Make text actions look like real tap targets */ nav.nav-open .nav-items .btn-text { border-color: var(--border-subtle); background: var(--bg-input); } /* Theme toggle in nav-right-controls: compact icon-only on mobile */ .nav-right-controls .theme-chevron { display: none; } .nav-right-controls .theme-btn { padding: 8px; } /* Fix the logo icon nudge on mobile font rendering */ .brand-bot-icon { transform: translateY(-1px); } } /* ============================================================================= V2: STRUCTURED CLAIMS STYLING ============================================================================= */ .structured-claim { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; padding: 0.625rem 0.875rem; background: #f9fafb; border-radius: 0.375rem; margin-bottom: 0.375rem; font-size: 0.8125rem; border-left: 3px solid #e5e7eb; } .structured-claim.verified { border-left-color: var(--gpt-color); background: var(--success-grad-1); } .structured-claim.unverified { border-left-color: var(--warning-border); background: #fffbeb; } .structured-claim .claim-id { font-weight: 600; color: var(--accent-blue-link); min-width: 2rem; } .structured-claim .claim-text { flex: 1; min-width: 150px; color: #374151; } .structured-claim .claim-source { font-size: 0.75rem; } .structured-claim .claim-source a { color: var(--text-secondary); text-decoration: none; } .structured-claim .claim-source a:hover { color: var(--accent-blue-link); text-decoration: underline; } .structured-claim .claim-unverified { color: var(--warning-color); font-style: italic; } /* ============================================================================= GLOBAL SCROLLBAR POLISH ============================================================================= */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-focus, #cbd5e1); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); border: 2px solid transparent; background-clip: content-box; } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--border-focus, #cbd5e1) transparent; } /* Debate modal body: thinner scrollbar for less noise during active debates */ .debate-modal-body::-webkit-scrollbar { width: 6px; } .debate-modal-body::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 3px; } .debate-modal-body::-webkit-scrollbar-thumb:hover { background: var(--border-focus); } /* ============================================================================= TEXT SELECTION COLOR ============================================================================= */ ::selection { background: rgba(37, 99, 235, 0.2); color: var(--text-primary); } html[data-theme="dark"] ::selection { background: rgba(96, 165, 250, 0.25); } /* ============================================ PRINT STYLES ============================================ */ @media print { /* Reset page for printing */ * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } body { background: white !important; padding: 0 !important; margin: 0 !important; } /* Hide everything except debate modal */ #siteNav, #start, #specs, #faq, #historyPanel, #authModal, #creditsModal, #settingsModal, .toast, .console-footer, .modal-close-btn, .activity-feed, .arbiter-scan-banner, footer { display: none !important; } /* Make debate modal full page, no overlay */ .debate-modal-overlay { position: static !important; background: none !important; backdrop-filter: none !important; padding: 0 !important; overflow: visible !important; display: block !important; } .debate-modal { position: static !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; border-radius: 0 !important; box-shadow: none !important; background: white !important; transform: none !important; display: flex !important; flex-direction: column !important; } /* Header - show question, hide close button */ .debate-modal-header { padding: 20px 20px 10px 20px !important; border-bottom: 1px solid #e5e7eb !important; background: white !important; } .modal-question { font-size: 1.25rem !important; font-weight: 600 !important; color: #111 !important; } .modal-close-btn { display: none !important; } /* Hide tabs and progress track */ .modal-header-tabs { display: none !important; } /* Chat area - full width, no scroll */ .debate-modal-body { flex: none !important; overflow: visible !important; padding: 20px !important; height: auto !important; } .chat-conversation { overflow: visible !important; max-height: none !important; padding: 0 !important; } /* Chat messages */ .chat-message { break-inside: avoid !important; page-break-inside: avoid !important; margin-bottom: 1rem !important; } .chat-bubble { box-shadow: none !important; border: 1px solid #e5e7eb !important; } /* Hide activity chips and waiting states */ .activity-feed, .activity-chip, .chat-message.waiting, .typing-cursor, #finalizeOverlay { display: none !important; } /* Result section */ .result-section { break-inside: avoid !important; page-break-inside: avoid !important; } .result-output { box-shadow: none !important; border: 2px solid var(--accent-green) !important; } /* Citations */ .result-citations { break-inside: avoid !important; } /* Links should show URL */ a[href]:after { content: none !important; /* Don't show URLs inline - too messy */ } /* Hide any buttons/actions */ #printDebateBtn, .copy-btn, button { display: none !important; } /* Ensure result section buttons are hidden but content shows */ .result-header button, /* Print metadata - Debatingbots.com branding with robot icon (header only) */ .debate-modal-header::after { content: " Debatingbots.com"; display: block; font-size: 0.75rem; color: #666; margin-top: 0.5rem; font-weight: 600; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 1 20 20'%3E%3Crect x='11' y='2' width='2' height='3' fill='%23666'/%3E%3Crect x='5' y='6.5' width='14' height='12' fill='none' stroke='%23666' stroke-width='2'/%3E%3Crect x='8.5' y='11' width='2.5' height='2.5' fill='%23666'/%3E%3Crect x='13' y='11' width='2.5' height='2.5' fill='%23666'/%3E%3Crect x='9' y='15.5' width='6' height='1.5' fill='%23666'/%3E%3C/svg%3E") no-repeat left center; background-size: 16px 16px; padding-left: 22px; } } /* ============================================================================= SOURCES (ChatGPT-style pills + cards) - No inline markdown links; citations rendered as UI elements - Inline "domain chips" appended to paragraphs/bullets ============================================================================= */ .sources-pill { /* Balanced spacing above/below the pill (especially in the Final Answer view). */ margin: 10px 0; } /* ============================================================================= BRUTALIST CITATION STYLES (Hard-Shadow) Sharp-cornered "stamped" style with hard offset shadow & press-down hover. ============================================================================= */ /* --- Inline Source Chips --- */ .inline-source-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 0; background-color: var(--citation-bg); border: 1px solid var(--citation-border); color: var(--citation-text); box-shadow: 4px 4px 0px var(--citation-shadow-color); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; text-decoration: none; transition: transform 0.1s var(--ease-snap), box-shadow 0.1s var(--ease-snap), background-color 0.1s var(--ease-snap), color 0.1s var(--ease-snap); cursor: pointer; margin-right: 6px; margin-bottom: 4px; } .inline-source-chip:hover { transform: translate(3px, 3px); box-shadow: 1px 1px 0px var(--citation-shadow-color); } .inline-source-chip:active { transform: translate(4px, 4px); box-shadow: 0px 0px 0px var(--citation-shadow-color); } .inline-source-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .inline-source-favicon { width: 12px; height: 12px; border-radius: 0; background: transparent; box-shadow: none; flex-shrink: 0; } .inline-source-chip.inline-source-more { background: transparent; border-style: dashed; box-shadow: 4px 4px 0px rgba(108, 92, 231, 0.4); } .inline-source-chip.inline-source-more:hover { border-style: solid; } .inline-source-chips { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: 8px; vertical-align: middle; } /* --- Sources Pill — "Stacked Deck" style --- */ .sources-trigger { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 0; background: var(--citation-bg); border: 1px solid var(--citation-border); color: var(--citation-text); box-shadow: 3px 3px 0 var(--citation-border), 6px 6px 0 var(--citation-shadow-color); font-family: var(--font-mono); font-size: 12px; font-weight: 700; cursor: pointer; user-select: none; transition: transform 0.1s var(--ease-snap), box-shadow 0.1s var(--ease-snap); margin-right: 8px; margin-bottom: 8px; } .sources-trigger:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--citation-border), 4px 4px 0 var(--citation-shadow-color); } .sources-trigger:active { transform: translate(3px, 3px); box-shadow: 0px 0px 0 var(--citation-border), 3px 3px 0 var(--citation-shadow-color); } .sources-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .sources-trigger::-webkit-details-marker { display: none; } .sources-trigger::marker { content: ''; } .sources-trigger-favicons { display: inline-flex; align-items: center; margin-right: 2px; } .sources-favicon { width: 16px; height: 16px; border-radius: 0; background: transparent; box-shadow: none; margin-left: -6px; } .sources-trigger-favicons .sources-favicon:first-child { margin-left: 0; } .sources-trigger-label { color: inherit; } .sources-trigger-count { opacity: 0.6; font-weight: 800; margin-left: 2px; } /* --- Sources Panel — "Logic Tree" style --- */ .sources-panel { position: relative; margin-top: 10px; margin-left: 12px; background: transparent; border: none; border-left: 3px solid var(--tree-line-color); border-radius: 0; box-shadow: none; overflow: visible; padding-left: 0; } .sources-panel .sources-panel-header, .sources-panel-header { display: none; } .sources-panel .sources-cards, .sources-cards { display: flex; flex-direction: column; gap: 0; background: transparent; } /* Individual source cards — tree branches */ .sources-panel .source-card, .sources-cards .source-card, a.source-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 15px 12px 25px; margin-left: 0; background: transparent; border: none; border-bottom: none; border-radius: 0; box-shadow: none; text-decoration: none; transition: background-color 0.15s var(--ease-snap), padding-left 0.15s var(--ease-snap); color: inherit; } /* Horizontal connector line (branch) */ .sources-panel .source-card::before, .sources-cards .source-card::before, a.source-card::before { content: ''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 3px; background-color: var(--tree-line-color); transition: width 0.15s var(--ease-snap), background-color 0.15s var(--ease-snap); pointer-events: none; } /* Hover: background + branch grows purple */ .sources-panel .source-card:hover, .sources-cards .source-card:hover, a.source-card:hover { background-color: rgba(108, 92, 231, 0.08); padding-left: 35px; } html[data-theme="dark"] .sources-panel .source-card:hover, html[data-theme="dark"] .sources-cards .source-card:hover, html[data-theme="dark"] a.source-card:hover { background-color: rgba(183, 148, 246, 0.1); } .sources-panel .source-card:hover::before, .sources-cards .source-card:hover::before, a.source-card:hover::before { background-color: var(--citation-shadow-color); width: 28px; } .sources-panel .source-card:last-child, .sources-cards .source-card:last-child { border-bottom: none; } /* Source card internals */ .source-card-favicon { width: 18px; height: 18px; border-radius: 0; margin-top: 0; flex-shrink: 0; background: transparent; box-shadow: none; opacity: 0.7; transition: opacity 0.15s var(--ease-snap); } .source-card:hover .source-card-favicon { opacity: 1; } .source-card-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .source-card-title { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; line-height: 1.3; color: var(--citation-text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .source-card-domain { font-family: var(--font-mono); font-size: 0.75rem; color: var(--citation-shadow-color); opacity: 0.8; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sources-panel-more { padding: 10px 15px 10px 25px; font-size: 0.75rem; color: var(--citation-shadow-color); position: relative; } .sources-panel-more::before { content: ''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 3px; background-color: var(--tree-line-color); } .citations-list { display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: 4px; } /* Inline domain chips appended to text blocks */ /* ============================================ COMPREHENSIVE DARK MODE FIXES ============================================ */ /* Judge chat bubbles */ html[data-theme="dark"] .chat-message.judge .chat-bubble { background-color: #1e293b; border-color: var(--border-subtle); } html[data-theme="dark"] .chat-message.judge .chat-bubble .markdown-body { color: var(--text-primary); } html[data-theme="dark"] .chat-message.judge .chat-bubble .markdown-body strong, html[data-theme="dark"] .chat-message.judge .chat-bubble .markdown-body b { color: #fbbf24; } html[data-theme="dark"] .chat-message.judge .chat-bubble .markdown-body em, html[data-theme="dark"] .chat-message.judge .chat-bubble .markdown-body i { color: #a5f3fc; } html[data-theme="dark"] .chat-message.judge .chat-bubble .markdown-body code { background: #334155; color: #f87171; } html[data-theme="dark"] .chat-message.judge .chat-bubble .markdown-body a { color: #67e8f9; } /* Code blocks */ html[data-theme="dark"] .markdown-body pre { background: #0f172a; border: 1px solid var(--border-subtle); } html[data-theme="dark"] .chat-bubble .markdown-body pre { background: #0f172a; } /* File chips */ html[data-theme="dark"] .file-chip:hover { background: var(--bg-input); } /* Status dots */ html[data-theme="dark"] .status-dot.active { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.3); } /* Optimize section */ html[data-theme="dark"] .optimize-section { background: var(--bg-card); } html[data-theme="dark"] .optimize-header { color: var(--text-primary); } html[data-theme="dark"] .optimize-btn-primary { background: var(--text-primary); color: var(--bg-page); } html[data-theme="dark"] .optimize-btn-primary:hover { background: var(--bg-card); } /* Error states */ /* Borders that need dark treatment */ html[data-theme="dark"] .divider, html[data-theme="dark"] hr { border-color: var(--border-subtle); } /* Pipeline and progress elements */ html[data-theme="dark"] .pipeline::before { background: var(--border-subtle); } /* ======================================== DARK MODE FIXES - Comprehensive ======================================== */ /* Accent backgrounds that need dark variants */ html[data-theme="dark"] .hero-status, html[data-theme="dark"] .modal-header.warning { background: rgba(245, 158, 11, 0.2); border-color: var(--warning-color); } html[data-theme="dark"] .tier-warnings { background: rgba(245, 158, 11, 0.15); color: var(--warning-color); border-color: var(--warning-color); } html[data-theme="dark"] .tier-warnings ul, html[data-theme="dark"] .tier-warnings li { color: var(--text-secondary); } html[data-theme="dark"] .price-opt:hover { background: rgba(16, 185, 129, 0.15); } html[data-theme="dark"] .shimmer-line { background: var(--border-subtle); background-image: linear-gradient( to right, var(--border-subtle) 0%, var(--bg-card) 50%, var(--border-subtle) 100% ); } html[data-theme="dark"] .ascii-highlight { background-color: rgba(52, 211, 153, 0.2); } /* System mode - same overrides */ /* Credit badge dark mode */ html[data-theme="dark"] .credit-badge { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.25) 100%); border-color: rgba(52, 211, 153, 0.4); } html[data-theme="dark"] .credit-badge:hover { background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.35) 100%); box-shadow: 0 2px 12px rgba(52, 211, 153, 0.3); } /* Structured claims dark mode */ html[data-theme="dark"] .structured-claim { background: var(--bg-card); border-left-color: var(--border-subtle); } html[data-theme="dark"] .structured-claim.verified { background: rgba(16, 185, 129, 0.15); } html[data-theme="dark"] .structured-claim.unverified { border-left-color: var(--warning-color); background: rgba(245, 158, 11, 0.15); } html[data-theme="dark"] .structured-claim .claim-text { color: var(--text-secondary); } html[data-theme="dark"] .structured-claim .claim-id { color: var(--primary); } /* ============================================================================= SYSTEM DEMO NODE + MODAL ============================================================================= */ /* The new schematic demo node lives directly under the Query Input console. Remove the console's bottom margin so the connector line can "hardwire" into it. */ .header-section .console-wrapper { margin-bottom: 0; } /* ===================== Demo video modal ===================== */ /* ============================================================================= MAINTENANCE BANNER ============================================================================= */ .maint-bar { position: fixed; top: 0; left: 0; width: 100%; background-color: #ffae00; color: #000000; border-bottom: 2px solid #000000; font-family: var(--font-mono); z-index: var(--z-maint); padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); box-sizing: border-box; } .maint-content { font-size: 0.85rem; letter-spacing: 0.5px; text-transform: uppercase; } .maint-icon { font-weight: 800; margin-right: 10px; } .maint-msg strong { font-weight: 700; } .maint-close { background: transparent; border: 1px solid #000000; color: #000000; font-family: inherit; font-weight: bold; font-size: 0.75rem; cursor: pointer; padding: 4px 10px; text-transform: uppercase; transition: background 0.2s, color 0.2s; flex-shrink: 0; } .maint-close:hover { background: #000000; color: #ffae00; } /* Push body content down when banner is visible */ body.has-maint-bar { padding-top: 50px; } @media (max-width: 600px) { .maint-bar { flex-direction: column; gap: 10px; text-align: center; position: relative; } body.has-maint-bar { padding-top: 0; } } /* ========================================== DRAFT CHECKPOINT BANNER (Suggestion #4) ========================================== */ .draft-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; margin: 12px 0 0 0; border: 2px solid var(--border-strong); background: var(--bg-card); color: var(--text-primary); font-family: var(--font-mono); box-shadow: var(--shadow-sm); } .draft-banner-msg { font-size: 0.78rem; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-secondary); line-height: 1.35; } .draft-banner-msg strong { color: var(--text-primary); font-weight: 800; } .draft-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; flex-shrink: 0; } .draft-banner-btn { background: transparent; border: 2px solid var(--border-strong); color: var(--text-primary); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 800; padding: 6px 10px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; transition: background 0.15s var(--ease-snap), color 0.15s var(--ease-snap), transform 0.15s var(--ease-snap); } .draft-banner-btn:hover { background: var(--border-strong); color: var(--bg-card); transform: translateY(-1px); } .draft-banner-btn:active { transform: translateY(0); } @media (max-width: 640px) { .draft-banner { flex-direction: column; align-items: flex-start; } .draft-banner-actions { width: 100%; justify-content: flex-start; } } /* ========================================== STATUS PILL - AMBIENT TICKER ========================================== */ #status-trigger { cursor: pointer; transition: background 0.2s var(--ease-snap), border-color 0.2s var(--ease-snap), transform 0.2s var(--ease-snap); } #status-trigger:hover { background: var(--bg-main); border-color: var(--text-secondary); transform: translateY(-1px); } #status-trigger:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; } #status-text { transition: opacity 0.8s var(--ease-snap); display: inline-block; min-width: 165px; text-align: center; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { #status-text { transition: none; } } /* ========================================== CHANGELOG MODAL OVERLAY ========================================== */ .modal-overlay { display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: var(--z-maint); align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s var(--ease-snap), visibility 0.2s var(--ease-snap); } .modal-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; } .modal-content { background: var(--bg-input); border: 1px solid var(--border-subtle); width: 90%; max-width: 650px; max-height: 80vh; border-radius: 4px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; transform: scale(0.95); transition: transform 0.2s var(--ease-snap); } .modal-overlay.active .modal-content { transform: scale(1); } @media (prefers-reduced-motion: reduce) { .modal-overlay { transition: none; } .modal-content { transition: none; transform: scale(1); } } .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .modal-header h2 { margin: 0; font-size: 1.1rem; font-family: var(--font-mono); color: var(--text-primary); } .close-modal { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-secondary); line-height: 1; padding: 4px 8px; border-radius: 4px; transition: background 0.2s; } .close-modal:hover { background: var(--border-subtle); } .close-modal:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; } .modal-body { padding: 24px; overflow-y: auto; flex: 1; overscroll-behavior: contain; } /* Custom scrollbar (WebKit) */ .modal-body::-webkit-scrollbar { width: 6px; } .modal-body::-webkit-scrollbar-track { background: transparent; } .modal-body::-webkit-scrollbar-thumb { background-color: var(--border-subtle); border-radius: 20px; } .modal-body::-webkit-scrollbar-thumb:hover { background-color: var(--text-secondary); } /* Mobile bottom sheet style */ @media (max-width: 600px) { .modal-overlay { align-items: flex-end; } .modal-content { width: 100%; max-width: none; max-height: 85vh; border-radius: 4px 4px 0 0; } .modal-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); } } /* ============================================================================= ENHANCE PREVIEW MODAL - Hacker/Terminal UI (Gemini redesign) Applies to Improve Question + Remove Hindsight preview overlay Scoped to #enhanceModal so other modals are unaffected. ============================================================================= */ #enhanceModal.modal-backdrop { background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(2px); } #enhanceModal .optimize-modal { max-width: 500px !important; width: 90%; padding: 0 !important; background: #fff !important; border: 2px solid #000 !important; border-radius: 0 !important; box-shadow: 10px 10px 0px rgba(0,0,0,1) !important; /* Use the site's IBM Plex typography instead of Courier */ font-family: var(--font-mono) !important; overflow: hidden; } /* Header & Subtitle */ #enhanceModal .optimize-header { background: #000; color: #fff; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: none; /* override legacy */ margin-bottom: 0; } #enhanceModal .optimize-title { font-weight: 900; font-size: 0.9rem; letter-spacing: 1px; margin: 0; color: inherit; text-transform: none; } #enhanceModal .optimize-status { font-size: 0.7rem; color: #fff; opacity: 0.8; text-transform: none; } #enhanceModal .optimize-subtitle { margin: 0; padding: 12px 15px; background: var(--hover-bg); border-bottom: 1px solid #000; font-size: 0.8rem; color: #444; } /* Body & Sections */ #enhanceModal .modal-body { padding: 20px 15px 10px 15px; } #enhanceModal .optimize-section { position: relative; margin-bottom: 25px; background: transparent; /* override theme-specific */ } #enhanceModal .optimize-label { position: absolute; top: -8px; left: 10px; background: #fff; padding: 0 6px; font-size: 0.7rem; font-weight: 900; z-index: 2; color: #000; letter-spacing: 0.5px; } #enhanceModal .optimize-input { border: 1px solid #000; /* Override legacy .optimize-input which forces Courier */ font-family: inherit !important; padding: 12px; font-size: 0.9rem; line-height: 1.4; max-height: 150px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; background: #fff; } /* Original vs Enhanced Styling */ #enhanceModal .optimize-input.original { background: repeating-linear-gradient(45deg, #fff, #fff 10px, #f2f2f2 10px, #f2f2f2 11px); color: #666; } #enhanceModal .optimize-input.enhanced { border: 2px solid #000; box-shadow: 4px 4px 0px var(--gpt-color, #10a37f); background: #fff; color: #000; } /* Actions & Buttons */ #enhanceModal .optimize-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } #enhanceModal .btn-cost { opacity: 0.6; font-size: 0.7rem; margin-left: 4px; } #enhanceModal .optimize-btn-primary { background: #000 !important; color: #fff !important; border: none !important; padding: 12px !important; font-weight: 900 !important; cursor: pointer; text-transform: uppercase; font-family: inherit; } #enhanceModal .optimize-btn-primary:hover { background: #333 !important; } #enhanceModal .optimize-btn-secondary { background: #fff !important; color: #000 !important; border: 2px solid #000 !important; padding: 12px !important; font-weight: 900 !important; cursor: pointer; text-transform: uppercase; font-family: inherit; } #enhanceModal .optimize-abort { width: 100%; background: none; border: none; color: #999; font-size: 0.7rem; margin-top: 15px; cursor: pointer; text-decoration: none; font-family: inherit; text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 0; } #enhanceModal .optimize-abort:hover { color: #ff0000; } /* Mobile adjustments */ @media (max-width: 600px) { #enhanceModal .optimize-modal { width: calc(100% - 24px); } #enhanceModal .optimize-actions { grid-template-columns: 1fr; } #enhanceModal .optimize-section { margin-bottom: 18px; } #enhanceModal .optimize-input { max-height: 120px; } } /* ========================= Debate Frame - Vertical Stack (Suggestion #3) ========================= */ .debate-frame-container.hidden { display: none; } .debate-frame-container { margin: 16px 20px; border: 2px solid var(--text-primary, #000); background: var(--bg-main, #fff); font-family: var(--font-mono, monospace); box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.08); height: auto; overflow: visible; -webkit-overflow-scrolling: touch; } /* Header bar */ .debate-frame-container .df-header { background: var(--text-primary, #000); color: var(--bg-main, #fff); padding: 8px 12px; font-size: 0.72rem; display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; gap: 10px; } .debate-frame-container .df-header-title { overflow: hidden; text-overflow: ellipsis; } .debate-frame-container .df-status { color: var(--gpt-color); font-weight: 700; letter-spacing: 0.5px; flex-shrink: 0; } /* Body with two cards */ .debate-frame-container .df-body { display: flex; flex-direction: column; gap: 12px; padding: 12px; } @media (min-width: 600px) { .debate-frame-container .df-body { flex-direction: row; } } /* Position cards */ .debate-frame-container .df-card { flex: 1; background: var(--bg-secondary, #f4f4f5); border: 1px solid var(--border-light, #e0e0e0); display: flex; flex-direction: column; } .debate-frame-container .df-card-a { border-top: 4px solid var(--accent-green-dark); } .debate-frame-container .df-card-b { border-top: 4px solid #dc2626; } .debate-frame-container .df-card-label { padding: 8px 10px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light, #e0e0e0); } .debate-frame-container .df-card-a .df-card-label { color: var(--accent-green-dark); } .debate-frame-container .df-card-b .df-card-label { color: #dc2626; } /* Card content wrapper */ .debate-frame-container .df-card-content { flex: 1; display: flex; flex-direction: column; position: relative; min-height: 70px; } /* Command buttons */ .debate-frame-container .df-cmd { background: transparent; border: none; font-family: inherit; font-size: 0.68rem; color: var(--link-color, #0000FF); cursor: pointer; font-weight: 600; padding: 2px 4px; } .debate-frame-container .df-cmd:hover { background: var(--link-color, #0000FF); color: var(--bg-main, #fff); } /* Textarea inputs */ .debate-frame-container .df-input { width: 100%; min-height: 60px; border: none; padding: 10px; font-family: inherit; font-size: 0.88rem; line-height: 1.5; resize: none; outline: none; background: transparent; color: var(--text-primary, #111); field-sizing: content; } /* Fallback for browsers without field-sizing */ @supports not (field-sizing: content) { .debate-frame-container .df-input { min-height: 80px; overflow-y: auto; } } @media (max-width: 600px) { .debate-frame-container .df-input { min-height: auto; height: auto; overflow: visible; } } .debate-frame-container .df-input[readonly] { cursor: default; } .debate-frame-container.editing .df-input { background: rgba(255, 250, 230, 0.5); } /* Footer */ .debate-frame-container .df-footer { background: var(--bg-secondary, #f4f4f5); color: var(--text-secondary, #666); padding: 8px 12px; border-top: 1px solid var(--border-light, #e0e0e0); text-align: left; font-size: 0.72rem; display: flex; align-items: center; gap: 4px; } /* Blinking cursor */ .debate-frame-container .df-blink { animation: dfBlink 1s step-end infinite; } @keyframes dfBlink { 50% { opacity: 0; } } /* ========================= Ghost Card Loading (Skeleton) ========================= */ .debate-frame-container .df-skeleton { padding: 10px; display: flex; flex-direction: column; gap: 8px; } .debate-frame-container .df-skeleton.hidden { display: none; } .debate-frame-container .df-skeleton-line { height: 10px; border-radius: 5px; background: var(--border-focus); background-image: linear-gradient( to right, var(--border-focus) 0%, var(--hover-bg) 50%, var(--border-focus) 100% ); background-size: 400px 100%; animation: dfShimmer 1.2s ease-in-out infinite; } .debate-frame-container .df-skeleton-line.w-80 { width: 80%; } .debate-frame-container .df-skeleton-line.w-60 { width: 60%; } .debate-frame-container .df-skeleton-line.w-40 { width: 40%; } @keyframes dfShimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } } /* Loading state - hide textarea, show skeleton */ .debate-frame-container.loading .df-input { display: none !important; } .debate-frame-container.loading .df-skeleton { display: flex !important; } .debate-frame-container.loading .df-cmd { display: none !important; } /* ========================= Dark Mode ========================= */ [data-theme="dark"] .debate-frame-container { border-color: var(--border-strong, #555); box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.05); } [data-theme="dark"] .debate-frame-container .df-header { background: #1e293b; color: #22c55e; } [data-theme="dark"] .debate-frame-container .df-card { background: var(--bg-secondary, #1a1a1a); border-color: var(--border-subtle, #333); } [data-theme="dark"] .debate-frame-container .df-card-label { border-color: var(--border-subtle, #333); } [data-theme="dark"] .debate-frame-container.editing .df-input { background: rgba(60, 50, 20, 0.3); } [data-theme="dark"] .debate-frame-container .df-footer { border-color: var(--border-subtle, #333); background: var(--bg-secondary, #1a1a1a); } [data-theme="dark"] .debate-frame-container .df-skeleton-line { background: #374151; background-image: linear-gradient( to right, #374151 0%, #4b5563 50%, #374151 100% ); background-size: 400px 100%; } /* ========================= Mobile ========================= */ @media (max-width: 600px) { .debate-frame-container { margin: 12px 16px; } .debate-frame-container .df-input { min-height: 60px; } .debate-frame-container .df-card-content { min-height: 60px; } } /* ========================= BRANDED MODEL CHIPS ========================= */ /* 1. Define the Brand Colors */ .mod-anthropic { --brand-color: #d97757; } /* Anthropic Terracotta */ .mod-openai { --brand-color: #10a37f; } /* OpenAI Teal */ .mod-google { --brand-color: #4285F4; } /* Google Blue */ .mod-xai { --brand-color: #666666; } /* X.AI Grey (Neutral) */ /* Dark mode adjustment for X.AI visibility */ [data-theme="dark"] .mod-xai { --brand-color: #ffffff; } /* 2. Style the Dot using the variable */ .ma-chip.mod-anthropic .ma-dot, .ma-chip.mod-openai .ma-dot, .ma-chip.mod-google .ma-dot, .ma-chip.mod-xai .ma-dot { background-color: var(--brand-color, #22c55e); box-shadow: 0 0 4px var(--brand-color); animation: brandPulse 2s infinite; } /* 3. The Custom Pulse Animation */ @keyframes brandPulse { 0% { box-shadow: 0 0 0 0 var(--brand-color); opacity: 1; } 70% { box-shadow: 0 0 0 6px transparent; opacity: 0.8; } 100% { box-shadow: 0 0 0 0 transparent; opacity: 1; } } /* 4. Subtle Border Glow on Hover */ .ma-chip.mod-anthropic:hover, .ma-chip.mod-openai:hover, .ma-chip.mod-google:hover, .ma-chip.mod-xai:hover { border-color: var(--brand-color); background-color: color-mix(in srgb, var(--brand-color) 8%, transparent); } /* ============================================= Inline Finalization Bubble (Redesigned) Tech/IDE Aesthetic - High Contrast & Active State ============================================= */ /* Standalone row for the inline finalization bubble (centers it and avoids the Judge/Arbiter chrome wrapper) */ /* ============================================================================= FINALIZATION INLINE UI - Streaming Code Style ============================================================================= */ .finalize-inline-row { display: flex; justify-content: center; width: 100%; animation: fadeIn 0.3s var(--ease-snap); } .finalize-inline { background: #f8f8f8; border: 1px solid #e5e5e5; border-radius: 6px; margin: 0; position: relative; overflow: hidden; width: 100%; max-width: 560px; box-sizing: border-box; font-family: var(--font-mono); } /* Header Row - Claude style */ .finalize-inline-header { background: #efefef; border-bottom: 1px solid #e5e5e5; padding: 8px 12px; display: flex; align-items: center; gap: 8px; font-size: 0.7rem; color: #666; } /* Pulsing Status Dot */ .finalize-status-dot { width: 6px; height: 6px; background-color: var(--warning-border); border-radius: 50%; animation: pulseStatus 1.5s ease-in-out infinite; flex-shrink: 0; } @keyframes pulseStatus { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .finalize-inline-label { font-size: 0.7rem; color: #666; font-weight: 400; } /* Code Body - Streaming area */ .finalize-code-body { padding: 12px 14px; height: 160px; overflow: hidden; font-size: 0.7rem; line-height: 1.45; color: #374151; white-space: pre-wrap; word-break: break-all; background: #f8f8f8; } /* Blinking Cursor */ .finalize-cursor { display: inline-block; width: 2px; height: 1em; background: #374151; animation: finalizeCursorBlink 0.5s step-end infinite; vertical-align: text-bottom; margin-left: 1px; } @keyframes finalizeCursorBlink { 50% { opacity: 0; } } /* Actions Footer */ .finalize-inline-actions { padding: 10px 12px; border-top: 1px solid #e5e5e5; background: #efefef; display: flex; gap: 10px; animation: fadeIn 0.3s var(--ease-snap); } /* STATE: Complete */ .finalize-inline.complete .finalize-status-dot { background-color: var(--accent-green); animation: none; } .finalize-inline.complete .finalize-inline-label { color: var(--accent-green); } .finalize-inline.complete .finalize-cursor { display: none; } /* Dark Mode */ html[data-theme="dark"] .finalize-inline { background: #1a1a1a; border-color: #2a2a2a; } html[data-theme="dark"] .finalize-inline-header { background: #141414; border-color: #252525; } html[data-theme="dark"] .finalize-inline-label { color: #888; } html[data-theme="dark"] .finalize-code-body { background: #1a1a1a; color: #9ca3af; } html[data-theme="dark"] .finalize-cursor { background: #9ca3af; } html[data-theme="dark"] .finalize-inline-actions { background: #141414; border-color: #252525; } /* System preference dark mode */ /* ============================================================================= PUNDIT PANEL (optional after-show) Styled to match pundit-preview-light.html (retro chat bubbles + tally card) ============================================================================= */ /* New Pundit Panel — flat layout, no dropdown */ .pundit-panel-section { padding: 16px 40px 20px; border-top: 1px dashed var(--border-subtle); } .pundit-panel-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .pundit-panel-header svg { stroke: var(--text-tertiary); flex-shrink: 0; } .pundit-panel-label { font-family: var(--font-mono); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); } .pundit-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px 0; } .pundit-note { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-tertiary); opacity: 0.85; } /* Scope pundit preview styles to this feature so it never affects other UI. */ #punditPanelRoot { margin-top: 10px; } /* --- Divider --- */ #punditPanelRoot .chat-divider { display: flex; align-items: center; justify-content: center; margin: 26px 0 18px 0; max-width: 550px; margin-left: auto; margin-right: auto; animation: punditFadeUp 0.6s forwards; } #punditPanelRoot .chat-divider::before, #punditPanelRoot .chat-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); } #punditPanelRoot .divider-text { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 800; color: var(--text-tertiary); padding: 0 12px; letter-spacing: 0.12em; text-transform: uppercase; } /* --- Animations --- */ @keyframes punditSlideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes punditFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* --- Pundit messages --- */ #punditPanelRoot .chat-message.pundit { width: 100%; max-width: 550px; margin: 0 auto 16px auto; display: flex; gap: 12px; animation: punditSlideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } #punditPanelRoot .pundit-avatar-img { width: 42px; height: 42px; border-radius: 4px; border: 2px solid var(--text-primary); background: var(--bg-card); box-shadow: var(--shadow-hard); padding: 2px; flex-shrink: 0; object-fit: contain; } #punditPanelRoot .pundit-bubble { flex: 1; min-width: 0; background: var(--bg-card); border: 2px solid var(--text-primary); border-radius: 4px; box-shadow: var(--shadow-hard); overflow: hidden; display: flex; flex-direction: column; } #punditPanelRoot .pundit-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-input); flex-wrap: wrap; gap: 4px; } #punditPanelRoot .pundit-name { font-family: var(--font-mono); font-weight: 900; font-size: 0.7rem; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.06em; } #punditPanelRoot .pundit-role { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; } #punditPanelRoot .pundit-body { padding: 12px; font-family: var(--font-body); font-size: 0.88rem; line-height: 1.5; color: var(--text-secondary); } #punditPanelRoot .pundit-footer { padding: 6px 12px; border-top: 1px dashed var(--border-subtle); font-family: var(--font-mono); font-size: 0.65rem; font-weight: 800; text-align: right; color: var(--text-tertiary); background: rgba(0,0,0,0.02); } #punditPanelRoot .pundit-verdict { font-size: 0.75rem; font-weight: 900; margin-left: 6px; padding: 2px 8px; border: 1px solid currentColor; text-transform: uppercase; letter-spacing: 0.08em; } #punditPanelRoot .verdict-agree { color: var(--judge-color); background: rgba(34, 197, 94, 0.12); } #punditPanelRoot .verdict-disagree { color: var(--accent-red); background: rgba(220, 38, 38, 0.10); } /* Personality accents (left border strip) */ #punditPanelRoot .pundit-logic .pundit-header { border-left: 4px solid var(--primary); } #punditPanelRoot .pundit-critic .pundit-header { border-left: 4px solid var(--accent-red); } #punditPanelRoot .pundit-ethics .pundit-header { border-left: 4px solid var(--judge-color); } #punditPanelRoot .pundit-facts .pundit-header { border-left: 4px solid var(--gemini-color); } /* Stagger */ #punditPanelRoot .chat-message.pundit:nth-of-type(2) { animation-delay: 0.06s; } #punditPanelRoot .chat-message.pundit:nth-of-type(3) { animation-delay: 0.12s; } #punditPanelRoot .chat-message.pundit:nth-of-type(4) { animation-delay: 0.18s; } #punditPanelRoot .chat-message.pundit:nth-of-type(5) { animation-delay: 0.24s; } /* --- JSON Payload Tally Card --- */ #punditPanelRoot .chat-message.system-tally { display: flex; align-items: flex-start; gap: 12px; width: 100%; max-width: 600px; margin: 20px 0 10px; animation: punditFadeUp 0.6s var(--ease-snap); } #punditPanelRoot .chat-message.system-tally .pundit-avatar-img { flex-shrink: 0; } #punditPanelRoot .json-window { flex: 1; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 6px; box-shadow: 4px 4px 0 rgba(0,0,0,0.1); overflow: hidden; font-family: 'Menlo', 'Consolas', 'Monaco', var(--font-mono), monospace; font-size: 0.78rem; line-height: 1.6; } #punditPanelRoot .json-header { background: var(--bg-input); padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 12px; } /* Name header (matches pundit-header style) */ #punditPanelRoot .json-name-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-card); } #punditPanelRoot .node-name { font-family: var(--font-mono); font-weight: 800; font-size: 0.8rem; color: var(--text-primary); letter-spacing: 0.05em; } #punditPanelRoot .node-role { font-family: var(--font-mono); font-size: 0.65rem; color: #ffbd2e; font-weight: 600; letter-spacing: 0.03em; } #punditPanelRoot .traffic-lights { display: flex; gap: 6px; } #punditPanelRoot .light { width: 10px; height: 10px; border-radius: 50%; opacity: 0.8; } #punditPanelRoot .l-red { background: #ff5f56; } #punditPanelRoot .l-yellow { background: #ffbd2e; } #punditPanelRoot .l-green { background: #27c93f; } #punditPanelRoot .filename { font-size: 0.7rem; color: var(--text-secondary); font-weight: 600; } #punditPanelRoot .code-body { padding: 14px 16px; color: var(--text-primary); } #punditPanelRoot .line { margin-bottom: 1px; white-space: nowrap; } /* Syntax Highlighting */ #punditPanelRoot .c-gray { color: var(--text-tertiary); margin-right: 12px; user-select: none; min-width: 16px; display: inline-block; } #punditPanelRoot .c-purp { color: #d63384; font-weight: 600; } #punditPanelRoot .c-blue { color: var(--text-primary); font-weight: 700; } #punditPanelRoot .c-attr { color: var(--text-primary); opacity: 0.85; } #punditPanelRoot .c-str { color: var(--judge-color); } #punditPanelRoot .c-num { color: #0070f3; font-weight: 700; font-size: 1rem; } #punditPanelRoot .c-bool { background: #ffbd2e; color: #000; padding: 1px 5px; font-weight: 700; border-radius: 2px; } #punditPanelRoot .c-comm { color: var(--text-tertiary); font-style: italic; font-size: 0.72rem; } /* Inline Progress Visualizer */ #punditPanelRoot .viz-track { display: inline-block; width: 90px; height: 8px; background: var(--bg-input); border: 1px solid var(--text-secondary); border-radius: 2px; vertical-align: middle; margin: 0 4px; position: relative; overflow: hidden; } #punditPanelRoot .viz-fill { position: absolute; top: 0; left: 0; bottom: 0; background: var(--judge-color); transition: width 0.8s var(--ease-snap); } /* --- JSON Tally Card: Mobile Responsive --- */ @media (max-width: 520px) { /* Stack avatar above card */ #punditPanelRoot .chat-message.system-tally { flex-direction: column; align-items: flex-start; gap: 8px; } #punditPanelRoot .chat-message.system-tally .pundit-avatar-img { width: 36px; height: 36px; } #punditPanelRoot .json-window { width: 100%; font-size: 0.72rem; } #punditPanelRoot .json-name-header { padding: 8px 12px; } #punditPanelRoot .node-name { font-size: 0.75rem; } #punditPanelRoot .node-role { font-size: 0.6rem; } #punditPanelRoot .code-body { padding: 12px; } /* Allow lines to wrap naturally */ #punditPanelRoot .line { white-space: normal; word-break: break-word; } /* Hide line numbers on mobile */ #punditPanelRoot .c-gray { display: none; } /* Shrink progress bar */ #punditPanelRoot .viz-track { width: 60px; } /* Hide the // comment */ #punditPanelRoot .c-comm { display: none; } }