Promptheus
styles.css•109 kB
/* ===================================================================
Promptheus Web UI - Alchemical Laboratory Design
Transform prompts into gold through digital alchemy
=================================================================== */
/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&family=Anybody:wght@400..900&display=swap');
/* ===================================================================
DESIGN SYSTEM - Alchemical Foundation
=================================================================== */
:root {
/* Color Palette - Dark Alchemical Theme */
--bg-primary: #0a0e1a;
--bg-secondary: #111827;
--bg-tertiary: #1a2332;
--surface-elevated: #151f2e;
--surface-overlay: rgba(21, 31, 46, 0.98);
/* Alchemical Gradients - Gold, Copper, Teal */
--gradient-primary: linear-gradient(135deg, #d4a574 0%, #8b6914 100%);
--gradient-secondary: linear-gradient(135deg, #b87333 0%, #cd7f32 100%);
--gradient-success: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%);
--gradient-transmute: linear-gradient(135deg, #fbbf24 0%, #d97706 50%, #b45309 100%);
--gradient-energy: radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.2) 0%, transparent 70%);
/* Semantic Colors - Mystical Palette */
--color-primary: #d4a574;
--color-primary-hover: #e5b885;
--color-secondary: #2dd4bf;
--color-accent: #f59e0b;
--color-success: #14b8a6;
--color-warning: #fbbf24;
--color-error: #ef4444;
--color-energy: #8b5cf6;
/* Text Colors - Luminous */
--text-primary: #f1f5f9;
--text-secondary: #cbd5e1;
--text-tertiary: #94a3b8;
--text-muted: #64748b;
--text-inverse: #0a0e1a;
--text-gold: #d4a574;
--text-teal: #2dd4bf;
/* Border & Dividers */
--border-subtle: #1e293b;
--border-medium: #334155;
--border-emphasis: #475569;
--border-glow: rgba(212, 165, 116, 0.3);
/* Shadows - Alchemical Glow */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.6);
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.6);
--shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.9), 0 10px 20px rgba(0, 0, 0, 0.7);
--shadow-2xl: 0 30px 60px rgba(0, 0, 0, 0.95);
/* Glowing Shadows - Energy Effects */
--shadow-gold-glow: 0 0 20px rgba(212, 165, 116, 0.4), 0 0 40px rgba(212, 165, 116, 0.2);
--shadow-teal-glow: 0 0 20px rgba(45, 212, 191, 0.4), 0 0 40px rgba(45, 212, 191, 0.2);
--shadow-energy-glow: 0 0 30px rgba(251, 191, 36, 0.5), 0 0 60px rgba(251, 191, 36, 0.3);
/* Spacing System (8px base grid) */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
/* Border Radius - Geometric */
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
/* Typography Scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
/* Font Families */
--font-display: 'Anybody', sans-serif;
--font-body: 'Crimson Text', serif;
--font-mono: 'IBM Plex Mono', monospace;
/* Font Weights */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
/* Transitions - Smooth Alchemy */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* Z-Index Scale */
--z-base: 0;
--z-dropdown: 1000;
--z-sticky: 1100;
--z-overlay: 1200;
--z-modal: 1300;
--z-toast: 1400;
}
/* ===================================================================
BASE STYLES - Alchemical Canvas
=================================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.7;
min-height: 100vh;
overflow-x: hidden;
position: relative;
display: flex;
flex-direction: column;
}
/* Atmospheric Background Effect */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(212, 165, 116, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(45, 212, 191, 0.05) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
/* Noise Texture Overlay */
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 1;
mix-blend-mode: overlay;
}
/* ===================================================================
LAYOUT - Alchemical Apparatus
=================================================================== */
.top-bar {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background: var(--surface-overlay);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-subtle);
box-shadow:
var(--shadow-md),
0 1px 0 0 rgba(212, 165, 116, 0.1);
padding: var(--space-5) var(--space-6);
}
.top-bar-content {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--space-6);
}
.logo {
display: flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
transition: all var(--transition-base);
}
.logo:hover {
transform: translateY(-2px);
}
.logo-icon {
font-size: var(--text-3xl);
filter: drop-shadow(0 0 8px rgba(212, 165, 116, 0.5));
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
}
.logo-text {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 700;
font-variation-settings: 'wdth' 100, 'wght' 700;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: 0.02em;
text-shadow: 0 0 20px rgba(212, 165, 116, 0.3);
}
.top-bar-controls {
display: flex;
align-items: center;
gap: var(--space-4);
margin-left: auto;
}
/* Hamburger Menu Button for Mobile */
.hamburger-btn {
display: none;
flex-direction: column;
gap: 6px;
background: none;
border: none;
cursor: pointer;
padding: var(--space-2);
color: var(--text-primary);
transition: all var(--transition-fast);
}
.hamburger-btn:hover {
transform: scale(1.05);
}
.hamburger-btn span {
width: 24px;
height: 2px;
background: var(--text-primary);
border-radius: var(--radius-sm);
transition: all var(--transition-fast);
}
.hamburger-btn.active span:nth-child(1) {
transform: rotate(45deg) translateY(10px);
}
.hamburger-btn.active span:nth-child(2) {
opacity: 0;
}
.hamburger-btn.active span:nth-child(3) {
transform: rotate(-45deg) translateY(-10px);
}
/* Mobile Menu Panel - Only visible on mobile */
.mobile-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(10, 14, 26, 0.95);
backdrop-filter: blur(12px);
z-index: 999;
flex-direction: column;
padding: var(--space-6);
gap: var(--space-6);
opacity: 0;
transform: translateX(-100%);
transition: all var(--transition-base);
pointer-events: none;
display: none;
visibility: hidden;
}
.mobile-menu.active {
display: flex;
opacity: 1;
transform: translateX(0);
pointer-events: auto;
visibility: visible;
}
.mobile-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-4);
}
.mobile-menu-title {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 700;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.mobile-menu-close {
background: none;
border: none;
font-size: var(--text-2xl);
color: var(--text-primary);
cursor: pointer;
padding: 0;
transition: all var(--transition-fast);
}
.mobile-menu-close:hover {
color: var(--color-primary);
transform: rotate(90deg);
}
.mobile-menu-section {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.mobile-menu-section-title {
font-family: var(--font-display);
font-size: var(--text-xs);
font-weight: 700;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--space-2);
}
/* Main Content Area */
.main-content {
max-width: 1400px;
margin: 0 auto;
padding: var(--space-10) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-10);
position: relative;
z-index: 2;
}
/* Workspace Container - Side by Side Layout */
.workspace-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
align-items: start;
}
@media (max-width: 1024px) {
.workspace-container {
grid-template-columns: 1fr;
}
}
/* ===================================================================
PROMPT CANVAS - Input Section
=================================================================== */
.prompt-canvas {
background: var(--surface-elevated);
border: 2px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-lg);
position: relative;
overflow: visible;
transition: all var(--transition-base);
min-height: 500px;
display: flex;
flex-direction: column;
}
/* Glowing Border Effect */
.prompt-canvas::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: var(--gradient-primary);
border-radius: var(--radius-xl);
opacity: 0;
transition: opacity var(--transition-slow);
z-index: -1;
filter: blur(8px);
}
.prompt-canvas:focus-within::before {
opacity: 0.3;
animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.5; }
}
.prompt-canvas:focus-within {
border-color: var(--color-primary);
box-shadow:
var(--shadow-xl),
var(--shadow-gold-glow);
transform: translateY(-4px);
}
.prompt-input-wrapper {
margin-bottom: var(--space-6);
position: relative;
flex: 1;
display: flex;
flex-direction: column;
}
/* ===================================================================
PROMPT TOOLBAR - Elegant Floating Controls
=================================================================== */
.prompt-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-4);
background: linear-gradient(135deg,
rgba(21, 31, 46, 0.95) 0%,
rgba(26, 35, 50, 0.95) 100%);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
backdrop-filter: blur(12px);
box-shadow:
var(--shadow-sm),
0 1px 0 0 rgba(212, 165, 116, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: all var(--transition-base);
position: relative;
overflow: visible;
}
/* Subtle glowing border effect */
.prompt-toolbar::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
background: linear-gradient(90deg,
rgba(212, 165, 116, 0.2) 0%,
rgba(45, 212, 191, 0.2) 50%,
rgba(212, 165, 116, 0.2) 100%);
border-radius: var(--radius-lg);
opacity: 0;
transition: opacity var(--transition-slow);
z-index: -1;
}
.prompt-toolbar:hover::before {
opacity: 0.6;
animation: toolbar-glow 3s ease-in-out infinite;
}
@keyframes toolbar-glow {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.7; }
}
.toolbar-left {
display: flex;
align-items: center;
gap: var(--space-4);
flex: 1;
}
.toolbar-right {
display: flex;
align-items: center;
gap: var(--space-3);
}
/* Toolbar Item - Individual Control Groups */
.toolbar-item {
display: flex;
align-items: center;
gap: var(--space-2);
position: relative;
}
/* Toolbar Label - Clean Text Only */
.toolbar-label {
font-family: var(--font-display);
font-size: var(--text-xs);
font-weight: 500;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
cursor: pointer;
transition: color var(--transition-fast);
display: flex;
align-items: center;
gap: var(--space-2);
}
.toolbar-label:hover {
color: var(--text-gold);
}
/* Toolbar Help Icon */
.toolbar-help-icon {
background: none;
border: none;
padding: var(--space-1);
font-size: var(--text-xs);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
opacity: 0.6;
display: inline-flex;
align-items: center;
justify-content: center;
}
.toolbar-help-icon:hover {
color: var(--text-gold);
opacity: 1;
transform: scale(1.1);
}
.toolbar-help-icon.active {
color: var(--color-primary);
opacity: 1;
}
/* Icons removed - staying true to alchemical theme without emojis */
.toolbar-text {
font-variation-settings: 'wdth' 100, 'wght' 500;
}
/* ===================================================================
ALCHEMICAL CUSTOM DROPDOWN COMPONENTS
Elegant floating select elements with mystical animations
=================================================================== */
/* Custom Dropdown Container */
.alchemical-dropdown {
position: relative;
min-width: 100px;
overflow: visible;
}
.toolbar-select {
position: relative;
width: 100%;
padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
background: linear-gradient(135deg,
rgba(21, 31, 46, 0.9) 0%,
rgba(26, 35, 50, 0.9) 100%);
border: 1px solid rgba(212, 165, 116, 0.3);
border-radius: var(--radius-lg);
font-family: var(--font-display);
font-size: var(--text-xs);
font-variation-settings: 'wdth' 100, 'wght' 600;
color: var(--text-gold);
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: all var(--transition-base);
appearance: none;
backdrop-filter: blur(8px);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
overflow: hidden;
position: relative;
z-index: 2;
}
/* Mystical gradient border effect */
.toolbar-select::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(212, 165, 116, 0.1) 25%,
rgba(45, 212, 191, 0.1) 50%,
rgba(212, 165, 116, 0.1) 75%,
transparent 100%);
border-radius: var(--radius-lg);
opacity: 0;
transition: opacity var(--transition-base);
z-index: -1;
}
/* Custom alchemical arrow */
.toolbar-select::after {
content: '⚗';
position: absolute;
right: var(--space-3);
top: 50%;
transform: translateY(-50%);
font-size: var(--text-sm);
color: var(--color-primary);
transition: all var(--transition-base);
text-shadow: 0 0 8px rgba(212, 165, 116, 0.4);
}
/* Hover state with golden glow */
.toolbar-select:hover {
border-color: rgba(212, 165, 116, 0.6);
background: linear-gradient(135deg,
rgba(26, 35, 50, 0.95) 0%,
rgba(31, 41, 55, 0.95) 100%);
transform: translateY(-1px);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.5),
0 0 20px rgba(212, 165, 116, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.toolbar-select:hover::before {
opacity: 1;
animation: alchemical-flow 3s ease-in-out infinite;
}
.toolbar-select:hover::after {
transform: translateY(-50%) scale(1.1);
text-shadow: 0 0 12px rgba(212, 165, 116, 0.6);
}
/* Focus state with enhanced glow */
.toolbar-select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow:
0 0 0 3px rgba(212, 165, 116, 0.2),
0 4px 16px rgba(0, 0, 0, 0.4),
0 0 24px rgba(212, 165, 116, 0.3);
}
.toolbar-select:focus::after {
transform: translateY(-50%) rotate(180deg);
}
/* Mystical flow animation */
@keyframes alchemical-flow {
0%, 100% {
background: linear-gradient(90deg,
transparent 0%,
rgba(212, 165, 116, 0.1) 25%,
rgba(45, 212, 191, 0.1) 50%,
rgba(212, 165, 116, 0.1) 75%,
transparent 100%);
}
50% {
background: linear-gradient(90deg,
transparent 0%,
rgba(45, 212, 191, 0.1) 25%,
rgba(212, 165, 116, 0.1) 50%,
rgba(45, 212, 191, 0.1) 75%,
transparent 100%);
}
}
/* Custom dropdown panel (hidden by default) */
.alchemical-dropdown-panel {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
padding-bottom: var(--space-3);
background: linear-gradient(135deg,
rgba(21, 31, 46, 0.98) 0%,
rgba(26, 35, 50, 0.98) 100%);
border: 1px solid rgba(212, 165, 116, 0.2);
border-radius: var(--radius-lg);
backdrop-filter: blur(16px);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(212, 165, 116, 0.1),
0 0 40px rgba(212, 165, 116, 0.15);
opacity: 0;
visibility: hidden;
transform: translateY(-8px) scale(0.95);
transition: all var(--transition-bounce);
z-index: 1000;
overflow: visible;
}
.alchemical-dropdown.active .alchemical-dropdown-panel {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* Dropdown panel mystical border effect */
.alchemical-dropdown-panel::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
background: linear-gradient(45deg,
rgba(212, 165, 116, 0.3) 0%,
rgba(45, 212, 191, 0.3) 50%,
rgba(212, 165, 116, 0.3) 100%);
border-radius: var(--radius-lg);
z-index: -1;
animation: panel-glow 2s ease-in-out infinite alternate;
}
@keyframes panel-glow {
0% { opacity: 0.5; }
100% { opacity: 1; }
}
/* Mystical dropdown animations */
@keyframes dropdownMysticalEntrance {
0% {
opacity: 0;
transform: translateY(-12px) scale(0.9) rotateX(-10deg);
filter: blur(4px);
}
50% {
opacity: 0.8;
transform: translateY(2px) scale(1.02) rotateX(2deg);
filter: blur(1px);
}
100% {
opacity: 1;
transform: translateY(0) scale(1) rotateX(0deg);
filter: blur(0);
}
}
@keyframes dropdownMysticalExit {
0% {
opacity: 1;
transform: translateY(0) scale(1) rotateX(0deg);
filter: blur(0);
}
100% {
opacity: 0;
transform: translateY(-8px) scale(0.95) rotateX(-5deg);
filter: blur(2px);
}
}
@keyframes optionMysticalSelect {
0% {
transform: translateX(0) scale(1);
background: linear-gradient(90deg,
rgba(212, 165, 116, 0.1) 0%,
rgba(45, 212, 191, 0.05) 100%);
}
25% {
transform: translateX(4px) scale(1.05);
background: linear-gradient(90deg,
rgba(212, 165, 116, 0.2) 0%,
rgba(45, 212, 191, 0.1) 100%);
}
50% {
transform: translateX(2px) scale(1.08);
box-shadow: inset 0 0 25px rgba(212, 165, 116, 0.2);
}
75% {
transform: translateX(1px) scale(1.02);
background: linear-gradient(90deg,
rgba(212, 165, 116, 0.15) 0%,
rgba(45, 212, 191, 0.08) 100%);
}
100% {
transform: translateX(0) scale(1);
background: linear-gradient(90deg,
rgba(212, 165, 116, 0.2) 0%,
rgba(45, 212, 191, 0.1) 100%);
}
}
/* Custom option styling */
.alchemical-option {
padding: var(--space-3) var(--space-4);
font-family: var(--font-display);
font-size: var(--text-xs);
font-variation-settings: 'wdth' 100, 'wght' 500;
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
position: relative;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.alchemical-option:last-child {
border-bottom: none;
}
.alchemical-option:hover {
background: linear-gradient(90deg,
rgba(212, 165, 116, 0.1) 0%,
rgba(45, 212, 191, 0.05) 100%);
color: var(--text-gold);
padding-left: var(--space-5);
text-shadow: 0 0 8px rgba(212, 165, 116, 0.3);
}
.alchemical-option.selected {
background: linear-gradient(90deg,
rgba(212, 165, 116, 0.2) 0%,
rgba(45, 212, 191, 0.1) 100%);
color: var(--text-gold);
font-weight: 600;
}
.alchemical-option.selected::before {
content: '✧';
position: absolute;
left: var(--space-2);
top: 50%;
transform: translateY(-50%);
color: var(--color-primary);
text-shadow: 0 0 6px rgba(212, 165, 116, 0.5);
}
/* Fallback for native select styling */
.toolbar-select option {
background: var(--bg-secondary);
color: var(--text-primary);
padding: var(--space-2);
}
/* Compact mode for smaller screens */
@media (max-width: 768px) {
.alchemical-dropdown {
min-width: 80px;
}
.toolbar-select {
padding: var(--space-1-5) var(--space-6) var(--space-1-5) var(--space-2);
font-size: 0.7rem;
}
.alchemical-dropdown-panel {
top: calc(100% + 4px);
}
.alchemical-option {
padding: var(--space-2) var(--space-3);
}
}
/* ===================================================================
HELP TOOLTIP SYSTEM
=================================================================== */
.help-tooltip {
position: fixed;
min-width: 320px;
max-width: 400px;
background: linear-gradient(135deg,
rgba(21, 31, 46, 0.98) 0%,
rgba(26, 35, 50, 0.98) 100%);
border: 1px solid rgba(212, 165, 116, 0.3);
border-radius: var(--radius-lg);
backdrop-filter: blur(16px);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(212, 165, 116, 0.1),
0 0 40px rgba(212, 165, 116, 0.15);
opacity: 0;
visibility: hidden;
transform: translateY(8px) scale(0.95);
transition: all var(--transition-bounce);
z-index: 9999;
overflow: hidden;
}
.help-tooltip.visible {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.help-tooltip-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-3) var(--space-4);
background: rgba(212, 165, 116, 0.05);
border-bottom: 1px solid rgba(212, 165, 116, 0.2);
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-gold);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.help-tooltip-close {
background: none;
border: none;
font-size: var(--text-sm);
color: var(--text-secondary);
cursor: pointer;
padding: var(--space-1);
transition: all var(--transition-fast);
line-height: 1;
}
.help-tooltip-close:hover {
color: var(--text-gold);
transform: scale(1.2);
}
.help-tooltip-content {
padding: var(--space-3) 0;
max-height: 400px;
overflow-y: auto;
}
.help-option {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.help-option:last-child {
border-bottom: none;
}
.help-option-name {
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-secondary);
margin-bottom: var(--space-2);
text-transform: capitalize;
}
.help-option-description {
font-family: var(--font-body);
font-size: var(--text-xs);
color: var(--text-secondary);
line-height: 1.6;
}
/* Toolbar Help Button */
.toolbar-help {
margin-left: var(--space-1);
width: 16px;
height: 16px;
font-size: var(--text-xs);
background: var(--bg-tertiary);
border: 1px solid var(--border-subtle);
}
.toolbar-help:hover {
border-color: var(--color-secondary);
box-shadow: 0 0 6px rgba(45, 212, 191, 0.3);
}
/* Input Statistics Display */
.input-stats {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--text-tertiary);
padding: var(--space-1) var(--space-2);
background: rgba(212, 165, 116, 0.05);
border-radius: var(--radius-md);
border: 1px solid rgba(212, 165, 116, 0.1);
transition: all var(--transition-fast);
}
.stat-item {
font-weight: var(--font-medium);
}
.stat-separator {
opacity: 0.5;
}
.input-stats:hover {
color: var(--text-secondary);
background: rgba(212, 165, 116, 0.08);
border-color: rgba(212, 165, 116, 0.2);
}
#prompt-input {
width: 100%;
flex: 1;
min-height: 280px;
padding: var(--space-5);
border: 1px solid var(--border-medium);
border-radius: var(--radius-lg);
font-family: var(--font-body);
font-size: var(--text-lg);
line-height: 1.8;
color: var(--text-primary);
background: var(--bg-secondary);
resize: vertical;
transition: all var(--transition-base);
}
#prompt-input:focus {
outline: none;
background: var(--bg-tertiary);
border-color: var(--color-primary);
box-shadow:
0 0 0 3px rgba(212, 165, 116, 0.15),
inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
#prompt-input::placeholder {
color: var(--text-muted);
font-style: italic;
}
/* Updated Prompt Controls - Simplified for Button Focus */
.prompt-controls {
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--space-3);
padding-top: var(--space-5);
border-top: 1px solid var(--border-subtle);
}
.prompt-controls-left {
display: flex;
align-items: center;
gap: var(--space-3);
flex: 1;
}
.prompt-controls-right {
display: flex;
align-items: center;
gap: var(--space-3);
}
/* Provider Configuration Group */
.provider-config-group {
display: flex;
align-items: center;
gap: var(--space-3);
}
/* Provider Selector - Alchemical Instrument */
.provider-selector {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: var(--bg-secondary);
border: 1px solid var(--border-medium);
border-radius: var(--radius-md);
font-family: var(--font-display);
font-size: var(--text-sm);
color: var(--text-secondary);
transition: all var(--transition-fast);
}
.provider-selector:hover {
border-color: var(--color-primary);
background: var(--bg-tertiary);
box-shadow: 0 0 10px rgba(212, 165, 116, 0.2);
}
.provider-selector > span,
.provider-selector > label {
font-family: var(--font-display);
font-size: var(--text-xs);
font-weight: 500;
}
.provider-selector select {
border: none;
background: transparent;
color: var(--text-gold);
font-family: var(--font-display);
font-weight: var(--font-medium);
cursor: pointer;
padding: var(--space-1);
font-size: var(--text-sm);
}
.provider-selector select:focus {
outline: none;
}
/* Help button inside provider selector */
.provider-selector .toolbar-help-icon {
margin-left: var(--space-2);
width: 20px;
height: 20px;
border: none;
background: rgba(212, 165, 116, 0.1);
border: 1px solid rgba(212, 165, 116, 0.2);
border-radius: 50%;
color: var(--text-tertiary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
transition: all var(--transition-fast);
flex-shrink: 0;
}
.provider-selector .toolbar-help-icon:hover {
background: rgba(212, 165, 116, 0.2);
border-color: var(--color-primary);
color: var(--color-primary);
transform: scale(1.1);
}
/* Provider dropdown option indicators */
.provider-selector select option[data-status="configured"] {
color: var(--color-success);
font-weight: 500;
}
.provider-selector select option[data-status="unconfigured"] {
color: var(--text-tertiary);
font-style: italic;
}
/* Add visual indicators using pseudo-elements */
.provider-selector select option[data-status="configured"]::before {
content: "✓ ";
color: var(--color-success);
font-weight: 600;
}
.provider-selector select option[data-status="unconfigured"]::before {
content: "○ ";
color: var(--text-tertiary);
}
/* Provider Status Indicator */
.provider-status-indicator {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-fast);
}
.provider-status-indicator:hover {
border-color: var(--color-primary);
background: var(--bg-tertiary);
box-shadow: 0 0 10px rgba(212, 165, 116, 0.2);
}
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
transition: all var(--transition-fast);
}
.status-dot.status-ok {
background: var(--color-success);
box-shadow: 0 0 8px rgba(20, 184, 166, 0.6);
}
.status-dot.status-warning {
background: var(--color-warning);
box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}
.status-dot.status-error {
background: var(--color-error);
box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}
/* System Status Section (Settings Panel) */
.system-status-actions {
display: flex;
justify-content: flex-end;
margin-bottom: var(--space-4);
}
.provider-status-table {
margin-bottom: var(--space-6);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
overflow: hidden;
}
.provider-status-table table {
width: 100%;
border-collapse: collapse;
}
.provider-status-table th {
background: var(--bg-tertiary);
padding: var(--space-3) var(--space-4);
text-align: left;
font-family: var(--font-display);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
color: var(--text-gold);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid var(--border-medium);
}
.provider-status-table td {
padding: var(--space-3) var(--space-4);
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--text-primary);
border-bottom: 1px solid var(--border-subtle);
}
.provider-status-table tbody tr:last-child td {
border-bottom: none;
}
.provider-status-table tbody tr:hover {
background: var(--bg-secondary);
}
.provider-status-cell {
display: flex;
align-items: center;
gap: var(--space-2);
}
.provider-status-icon {
font-size: var(--text-base);
}
.cache-management {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--space-4);
border-top: 1px solid var(--border-subtle);
}
.cache-timestamp {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--text-tertiary);
}
/* Select Label - Alchemical Dropdown */
.select-label {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: var(--bg-secondary);
border: 1px solid var(--border-medium);
border-radius: var(--radius-md);
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--text-secondary);
transition: all var(--transition-fast);
}
.select-label:hover {
border-color: var(--color-primary);
background: var(--bg-tertiary);
box-shadow: 0 0 10px rgba(212, 165, 116, 0.2);
}
.select-label select {
border: none;
background: transparent;
color: var(--text-gold);
font-family: var(--font-mono);
font-weight: var(--font-medium);
cursor: pointer;
padding: var(--space-1);
font-size: var(--text-sm);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23d4a574' d='M1.41 0L6 4.58L10.59 0L12 1.41l-6 6l-6-6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-2) center;
padding-right: var(--space-8);
}
.select-label select:focus {
outline: none;
}
.select-label select option {
background: var(--bg-secondary);
color: var(--text-primary);
padding: var(--space-2);
}
/* Checkbox Label - Mystical Toggle */
.checkbox-label {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: var(--bg-secondary);
border: 1px solid var(--border-medium);
border-radius: var(--radius-md);
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
user-select: none;
}
.checkbox-label:hover {
border-color: var(--color-secondary);
background: var(--bg-tertiary);
color: var(--text-teal);
box-shadow: 0 0 10px rgba(45, 212, 191, 0.2);
}
.checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--color-secondary);
}
/* ===================================================================
BUTTONS - Alchemical Actions
=================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
border: none;
border-radius: var(--radius-lg);
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 600;
font-variation-settings: 'wdth' 100, 'wght' 600;
cursor: pointer;
transition: all var(--transition-base);
white-space: nowrap;
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 0.05em;
text-decoration: none;
color: inherit;
}
/* Button-styled links */
a.btn {
text-decoration: none;
color: inherit;
}
/* Shimmer Effect */
.btn::before {
content: '';
position: absolute;
top: 0;
left: -150%;
width: 150%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.6s;
}
.btn:hover::before {
left: 150%;
}
.btn-primary {
background: var(--gradient-primary);
color: var(--text-inverse);
box-shadow:
var(--shadow-md),
0 0 20px rgba(212, 165, 116, 0.3);
border: 1px solid rgba(212, 165, 116, 0.5);
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-3px);
box-shadow:
var(--shadow-lg),
var(--shadow-gold-glow);
}
.btn-primary:active:not(:disabled) {
transform: translateY(-1px);
}
.btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.btn-secondary {
background: var(--bg-tertiary);
color: var(--text-primary);
border: 1px solid var(--border-emphasis);
box-shadow: var(--shadow-sm);
}
.btn-secondary:hover:not(:disabled) {
background: var(--surface-elevated);
border-color: var(--color-secondary);
box-shadow:
var(--shadow-md),
0 0 15px rgba(45, 212, 191, 0.2);
transform: translateY(-2px);
}
.btn-danger {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: var(--text-primary);
box-shadow:
var(--shadow-md),
0 0 20px rgba(239, 68, 68, 0.3);
border: 1px solid rgba(239, 68, 68, 0.5);
}
.btn-danger:hover {
transform: translateY(-3px);
box-shadow:
var(--shadow-lg),
0 0 30px rgba(239, 68, 68, 0.4);
}
.btn-icon {
padding: var(--space-3);
width: 42px;
height: 42px;
}
.btn-sm {
padding: var(--space-1) var(--space-3);
font-size: var(--text-xs);
opacity: 0.8;
transition: all var(--transition-fast);
}
.btn-sm:hover {
opacity: 1;
transform: translateY(-1px);
}
/* Loading Spinner - Transmutation Animation */
.spinner {
display: inline-block;
width: 18px;
height: 18px;
border: 3px solid rgba(255, 255, 255, 0.2);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Alchemical Progress Indicator - Refined Minimal */
.progress-indicator {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-6) var(--space-8);
text-align: center;
position: relative;
min-height: 80px;
background: rgba(212, 165, 116, 0.03);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
animation: border-glow 2.5s ease-in-out infinite;
}
.progress-symbol {
font-size: 1.8rem;
animation: subtle-pulse 2.5s ease-in-out infinite;
line-height: 1;
}
.progress-text {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--text-gold);
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
}
@keyframes subtle-pulse {
0%, 100% {
opacity: 0.85;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.05);
}
}
@keyframes border-glow {
0%, 100% {
border-color: var(--border-subtle);
box-shadow: 0 0 0 rgba(212, 165, 116, 0);
}
50% {
border-color: rgba(212, 165, 116, 0.4);
box-shadow: 0 0 12px rgba(212, 165, 116, 0.2);
}
}
/* ===================================================================
OUTPUT AREA - Transmutation Result
=================================================================== */
.output-section {
background: var(--surface-elevated);
border: 2px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-lg);
min-height: 500px;
max-height: 600px;
position: relative;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
/* Custom Alchemical Scrollbar */
.output-section::-webkit-scrollbar {
width: 8px;
}
.output-section::-webkit-scrollbar-track {
background: var(--bg-secondary);
border-radius: var(--radius-md);
margin: var(--space-2) 0;
}
.output-section::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
border-radius: var(--radius-md);
box-shadow: 0 0 8px rgba(212, 165, 116, 0.4);
}
.output-section::-webkit-scrollbar-thumb:hover {
background: var(--color-primary);
box-shadow: var(--shadow-gold-glow);
}
/* Firefox scrollbar */
.output-section {
scrollbar-width: thin;
scrollbar-color: var(--color-primary) var(--bg-secondary);
}
/* Loading State - Enhanced Indication */
.output-section.loading {
border-color: var(--color-primary);
animation: loading-pulse 2s ease-in-out infinite;
}
.output-section.loading::before {
opacity: 1;
animation: shimmer-flow 2s linear infinite;
}
@keyframes loading-pulse {
0%, 100% {
box-shadow:
var(--shadow-lg),
0 0 20px rgba(212, 165, 116, 0.3);
}
50% {
box-shadow:
var(--shadow-xl),
var(--shadow-gold-glow);
}
}
@keyframes shimmer-flow {
0% {
background-position: -200% center;
}
100% {
background-position: 200% center;
}
}
/* Alchemical Border Accent */
.output-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-transmute);
opacity: 0;
transition: opacity var(--transition-slow);
}
.output-section:hover::before {
opacity: 1;
box-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
}
.output-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-6);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--border-subtle);
}
.output-title {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 700;
font-variation-settings: 'wdth' 100, 'wght' 700;
color: var(--text-gold);
display: flex;
align-items: center;
gap: var(--space-3);
letter-spacing: 0.02em;
}
.output-actions {
display: flex;
gap: var(--space-2);
}
#output {
font-family: var(--font-body);
font-size: var(--text-lg);
line-height: 1.8;
color: var(--text-primary);
word-wrap: break-word;
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.optimized-prompt-content {
white-space: pre-wrap;
padding: var(--space-8);
background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(26, 35, 50, 0.95) 100%);
border-radius: var(--radius-xl);
border: 1px solid var(--border-medium);
box-shadow:
inset 0 1px 3px rgba(0, 0, 0, 0.5),
0 4px 20px rgba(0, 0, 0, 0.7),
0 0 40px rgba(212, 165, 116, 0.1);
position: relative;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
max-width: 100%;
line-height: 1.8;
font-size: var(--text-lg);
color: var(--text-primary);
font-family: var(--font-body);
}
.optimized-prompt-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: var(--gradient-transmute);
box-shadow: 0 0 15px rgba(251, 191, 36, 0.6);
border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}
/* Enhanced text formatting styles */
.optimized-prompt-content strong {
color: var(--text-gold);
font-weight: 700;
font-family: var(--font-display);
letter-spacing: 0.01em;
}
.optimized-prompt-content em {
color: var(--text-teal);
font-style: italic;
}
.optimized-prompt-content code {
background: rgba(26, 35, 50, 0.8);
padding: 0.25em 0.6em;
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 0.9em;
color: var(--color-accent);
border: 1px solid var(--border-subtle);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* Streaming Animation - Energy Pulse */
.optimized-prompt-content.streaming {
animation: energy-pulse 2s ease-in-out infinite;
}
@keyframes energy-pulse {
0%, 100% {
box-shadow:
inset 0 1px 3px rgba(0, 0, 0, 0.5),
0 4px 20px rgba(0, 0, 0, 0.7),
0 0 40px rgba(212, 165, 116, 0.1);
}
50% {
box-shadow:
inset 0 1px 3px rgba(0, 0, 0, 0.5),
0 4px 20px rgba(0, 0, 0, 0.7),
0 0 50px rgba(251, 191, 36, 0.4),
0 0 80px rgba(212, 165, 116, 0.2);
}
}
.streaming-cursor {
display: inline-block;
width: 2px;
height: 1.2em;
background: var(--color-accent);
margin-left: 2px;
animation: cursor-blink 1s step-end infinite;
vertical-align: text-bottom;
box-shadow: 0 0 8px var(--color-accent);
}
@keyframes cursor-blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
/* Status Messages - Alchemical Notifications */
.message {
padding: 0;
border-radius: var(--radius-lg);
font-family: var(--font-body);
display: flex;
flex-direction: column;
gap: 0;
background: var(--bg-secondary);
border: 1px solid var(--border-medium);
box-shadow: var(--shadow-md);
animation: message-appear 0.4s ease-out;
overflow: visible;
max-width: 100%;
margin: var(--space-4) 0;
flex-shrink: 0;
}
.message-icon {
display: none;
}
.message-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0;
}
.message-text {
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 1.8;
color: var(--text-primary);
padding: var(--space-6) var(--space-8);
word-wrap: break-word;
overflow-wrap: break-word;
border-bottom: 1px solid var(--border-subtle);
}
.error-help {
background: rgba(26, 35, 50, 0.5);
padding: var(--space-6) var(--space-8);
border-top: 1px solid var(--border-subtle);
font-family: var(--font-body);
font-size: var(--text-sm);
min-height: fit-content;
flex-shrink: 0;
}
.error-help strong {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
color: var(--color-warning);
font-weight: 600;
font-size: var(--text-base);
}
.error-help strong::before {
content: '💡';
font-size: var(--text-lg);
}
.error-help ul {
margin: 0;
padding: 0;
list-style: none;
}
.error-help li {
margin: 0;
padding: var(--space-2) 0;
color: var(--text-secondary);
line-height: 1.6;
display: flex;
align-items: center;
gap: var(--space-3);
border-bottom: 1px solid rgba(51, 65, 85, 0.2);
}
.error-help li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.error-help li::before {
content: '→';
color: var(--color-primary);
font-weight: 600;
font-size: var(--text-base);
flex-shrink: 0;
}
@keyframes message-appear {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.message-success {
border-color: rgba(45, 212, 191, 0.3);
}
.message-success .message-text {
border-bottom-color: rgba(45, 212, 191, 0.2);
}
.message-error {
border-color: rgba(239, 68, 68, 0.2);
}
.message-error .message-text {
border-bottom-color: rgba(239, 68, 68, 0.2);
}
.message-info {
border-color: rgba(212, 165, 116, 0.3);
}
/* Settings button within error messages */
.message-settings-btn {
margin-left: var(--space-3);
padding: var(--space-1) var(--space-3);
background: rgba(212, 165, 116, 0.2);
border: 1px solid var(--color-primary);
border-radius: var(--radius-md);
color: var(--color-primary);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
.message-settings-btn:hover {
background: rgba(212, 165, 116, 0.3);
border-color: var(--color-primary-hover);
color: var(--color-primary-hover);
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(212, 165, 116, 0.3);
}
.message-settings-btn:active {
transform: translateY(0);
}
/* Help Icon Button */
.help-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: none;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
color: var(--text-tertiary);
font-size: var(--text-xs);
cursor: pointer;
transition: all 0.2s ease;
margin-left: var(--space-1);
font-family: var(--font-body);
}
.help-icon-btn:hover {
background: var(--color-secondary);
color: var(--text-inverse);
box-shadow: 0 0 8px rgba(45, 212, 191, 0.3);
transform: scale(1.1);
}
.help-icon-btn:active {
transform: scale(1);
}
/* Tooltip Container */
.style-tooltip {
position: fixed;
background: var(--surface-overlay);
backdrop-filter: blur(10px);
border: 1px solid var(--color-secondary);
border-radius: var(--radius-lg);
padding: var(--space-4);
min-width: 320px;
max-width: 400px;
z-index: 9999; /* Ensure it's above everything including modals */
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-xl), 0 0 20px rgba(45, 212, 191, 0.2);
}
.style-tooltip.show {
opacity: 1;
visibility: visible;
}
/* Tooltip Content */
.style-tooltip-content {
font-family: var(--font-body);
font-size: var(--text-sm);
line-height: 1.6;
color: var(--text-primary);
}
.style-tooltip-content h4 {
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 600;
color: var(--text-gold);
margin-bottom: var(--space-4);
letter-spacing: 0.01em;
}
.style-tooltip-content .style-item {
margin-bottom: var(--space-3);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--border-subtle);
}
.style-tooltip-content .style-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.style-tooltip-content .style-name {
font-family: var(--font-display);
font-weight: 600;
color: var(--color-secondary);
margin-bottom: var(--space-1);
font-size: var(--text-sm);
text-transform: capitalize;
letter-spacing: 0.01em;
}
.style-tooltip-content .style-description {
color: var(--text-secondary);
font-size: var(--text-sm);
}
/* Tooltip arrow - pointing down (when tooltip is above) */
.style-tooltip::before {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
width: 12px;
height: 12px;
background: var(--surface-overlay);
border-right: 1px solid var(--color-secondary);
border-bottom: 1px solid var(--color-secondary);
transform: translateX(-50%) rotate(45deg);
}
/* Tooltip arrow - pointing up (when tooltip is below) */
.style-tooltip.style-tooltip-below::before {
top: -6px;
bottom: auto;
border-right: 1px solid var(--color-secondary);
border-top: 1px solid var(--color-secondary);
border-bottom: none;
transform: translateX(-50%) rotate(45deg);
}
/* ===================================================================
HISTORY SECTION - Chronicle of Transmutations
=================================================================== */
.history-section {
background: var(--surface-elevated);
border: 2px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-lg);
}
.history-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-6);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--border-subtle);
}
.history-title {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 700;
font-variation-settings: 'wdth' 100, 'wght' 700;
color: var(--text-gold);
display: flex;
align-items: center;
gap: var(--space-3);
letter-spacing: 0.02em;
}
.history-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-6);
margin-bottom: var(--space-6);
}
.history-card {
background: var(--bg-secondary);
border: 2px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-6);
cursor: pointer;
transition: all var(--transition-base);
position: relative;
overflow: hidden;
min-height: 200px;
display: flex;
flex-direction: column;
}
/* Diagonal accent line */
.history-card::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 40%,
rgba(212, 165, 116, 0.1) 50%,
transparent 60%
);
transition: all var(--transition-slow);
transform: translateX(100%);
}
.history-card:hover::before {
transform: translateX(-100%);
}
.history-card:hover {
border-color: var(--color-primary);
transform: translateY(-6px);
box-shadow:
var(--shadow-xl),
0 0 25px rgba(212, 165, 116, 0.3);
}
.history-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--space-4);
gap: var(--space-2);
}
.history-card-timestamp {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--text-tertiary);
font-weight: var(--font-medium);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.history-card-badge {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
color: var(--text-inverse);
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.badge-analysis {
background: var(--color-secondary);
box-shadow: 0 0 10px rgba(45, 212, 191, 0.4);
}
.badge-generation {
background: var(--color-energy);
box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}
.badge-code {
background: var(--color-success);
box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}
.history-card-content {
flex: 1;
margin-bottom: var(--space-4);
}
.history-card-preview {
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--text-primary);
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.history-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--space-3);
border-top: 1px solid var(--border-subtle);
}
.history-card-meta {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--text-tertiary);
font-weight: var(--font-medium);
}
.history-card-delete {
background: transparent;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: var(--space-1) var(--space-2);
font-size: var(--text-sm);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-base);
opacity: 0;
pointer-events: none;
}
.history-card:hover .history-card-delete {
opacity: 1;
pointer-events: auto;
}
.history-card-delete:hover {
background: rgba(239, 68, 68, 0.1);
border-color: var(--color-error);
color: var(--color-error);
transform: scale(1.05);
}
/* History Pagination */
.history-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-4);
padding-top: var(--space-6);
border-top: 1px solid var(--border-subtle);
}
.pagination-info {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--text-secondary);
}
.pagination-current {
padding: var(--space-2) var(--space-4);
background: var(--bg-tertiary);
border: 1px solid var(--border-medium);
border-radius: var(--radius-md);
font-weight: var(--font-semibold);
color: var(--text-gold);
}
.page-size-selector {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--text-secondary);
}
.page-size-selector select {
padding: var(--space-2) var(--space-3);
background: var(--bg-tertiary);
border: 1px solid var(--border-medium);
border-radius: var(--radius-md);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: var(--text-sm);
cursor: pointer;
transition: all var(--transition-fast);
}
.page-size-selector select:hover {
border-color: var(--color-primary);
}
/* Empty State */
.empty-state {
text-align: center;
padding: var(--space-20) var(--space-8);
}
.empty-state-icon {
font-size: 5rem;
margin-bottom: var(--space-6);
opacity: 0.3;
filter: grayscale(1);
}
.empty-state-title {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-3);
}
.empty-state-description {
font-family: var(--font-body);
font-size: var(--text-lg);
color: var(--text-tertiary);
font-style: italic;
}
/* ===================================================================
SETTINGS PANEL - Alchemical Configuration
=================================================================== */
.settings-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(12px);
z-index: var(--z-overlay);
opacity: 0;
visibility: hidden;
transition: all var(--transition-base);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
}
.settings-overlay.active {
opacity: 1;
visibility: visible;
}
.settings-panel {
position: relative;
width: 100%;
max-width: 650px;
max-height: 85vh;
background: rgba(21, 31, 46, 0.95);
backdrop-filter: blur(20px);
border: 2px solid var(--border-emphasis);
box-shadow:
var(--shadow-2xl),
0 0 60px rgba(212, 165, 116, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
border-radius: var(--radius-2xl);
z-index: var(--z-modal);
opacity: 0;
transform: scale(0.9) translateY(20px);
transition: all var(--transition-slow);
overflow: hidden;
display: flex;
flex-direction: column;
}
.settings-panel.active {
opacity: 1;
transform: scale(1) translateY(0);
}
.settings-header {
padding: var(--space-6);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(17, 24, 39, 0.6);
flex-shrink: 0;
}
.settings-header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.settings-title {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 700;
font-variation-settings: 'wdth' 100, 'wght' 700;
color: var(--text-gold);
display: flex;
align-items: center;
gap: var(--space-3);
flex: 1;
min-width: 0; /* Allow text to shrink if needed */
}
/* Mobile fixes for Settings header */
@media (max-width: 768px) {
.settings-header {
padding: var(--space-4);
}
.settings-title {
font-size: var(--text-xl);
gap: var(--space-2);
}
.btn-icon {
min-width: 36px;
height: 36px;
flex-shrink: 0;
}
}
.settings-content {
padding: var(--space-6);
overflow-y: auto;
flex: 1;
}
.settings-section {
margin-bottom: var(--space-8);
padding-bottom: var(--space-6);
border-bottom: 1px solid var(--border-subtle);
}
.settings-section:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
.settings-section-title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-5);
display: flex;
align-items: center;
gap: var(--space-2);
padding-bottom: var(--space-3);
border-bottom: 2px solid var(--border-subtle);
}
.settings-item {
margin-bottom: var(--space-5);
}
.settings-label {
display: block;
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 600;
font-variation-settings: 'wdth' 100, 'wght' 600;
color: var(--text-primary);
margin-bottom: var(--space-2);
letter-spacing: -0.01em;
}
.settings-input {
width: 100%;
padding: var(--space-3) var(--space-4);
background: var(--bg-tertiary);
border: 1px solid var(--border-medium);
border-radius: var(--radius-md);
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--text-primary);
transition: all var(--transition-fast);
}
.settings-input:hover {
border-color: var(--border-emphasis);
}
.settings-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.15);
background: var(--surface-elevated);
}
/* ===================================================================
SETTINGS CATEGORY - Refined Layout
=================================================================== */
.settings-category {
margin-bottom: var(--space-8);
}
/* Clean, minimal category sections */
.settings-category.general-settings,
.settings-category.api-keys-settings {
padding-bottom: var(--space-6);
border-bottom: 1px solid var(--border-subtle);
}
.settings-category:last-child {
border-bottom: none;
padding-bottom: 0;
}
/* Refined category headings - no icons, clean typography */
.settings-category-heading {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 700;
font-variation-settings: 'wdth' 100, 'wght' 700;
color: var(--text-primary);
margin-bottom: var(--space-6);
letter-spacing: -0.02em;
position: relative;
}
/* Subtle accent line */
.settings-category.general-settings .settings-category-heading::after {
content: '';
position: absolute;
bottom: -12px;
left: 0;
width: 48px;
height: 3px;
background: var(--gradient-primary);
border-radius: 2px;
}
.settings-category.api-keys-settings .settings-category-heading::after {
content: '';
position: absolute;
bottom: -12px;
left: 0;
width: 48px;
height: 3px;
background: var(--gradient-success);
border-radius: 2px;
}
/* System Status section styling */
.system-status-section .settings-category-heading::after {
content: '';
position: absolute;
bottom: -12px;
left: 0;
width: 56px;
height: 3px;
background: linear-gradient(90deg,
rgba(212, 165, 116, 0.6) 0%,
rgba(45, 212, 191, 0.3) 100%);
border-radius: 2px;
}
/* Provider table hover states */
.provider-status-table tbody tr {
transition: all 200ms ease;
}
.provider-status-table tbody tr:hover {
padding-left: var(--space-4);
padding-right: var(--space-4);
margin-left: calc(-1 * var(--space-4));
margin-right: calc(-1 * var(--space-4));
background: rgba(212, 165, 116, 0.02);
}
/* About section styling */
.about-section .settings-category-heading::after {
content: '';
position: absolute;
bottom: -12px;
left: 0;
width: 40px;
height: 3px;
background: var(--color-primary);
border-radius: 2px;
opacity: 0.5;
}
.about-section .settings-item {
padding: var(--space-4) 0;
}
/* Clean settings items - no heavy cards */
.settings-category .settings-item {
padding: var(--space-4) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
transition: all 0.2s ease;
}
.settings-category .settings-item:hover {
padding-left: var(--space-4);
background: rgba(212, 165, 116, 0.02);
margin-left: calc(-1 * var(--space-4));
padding-right: var(--space-4);
margin-right: calc(-1 * var(--space-4));
}
.settings-category .settings-item:last-child {
border-bottom: none;
}
.settings-category-title {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-4);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--border-subtle);
}
/* Settings label container */
.settings-label-container {
margin-bottom: var(--space-3);
flex: 1;
}
/* For checkbox items, create a flex layout */
.settings-item.checkbox-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-6);
}
.settings-item.checkbox-item .settings-label-container {
margin-bottom: 0;
}
.settings-item.checkbox-item .settings-input-container {
flex-shrink: 0;
margin-top: var(--space-1);
}
.settings-description {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--text-tertiary);
margin-top: var(--space-2);
line-height: 1.7;
font-weight: 400;
max-width: 600px;
}
.settings-input-container {
position: relative;
display: flex;
align-items: center;
gap: var(--space-2);
}
.settings-eye-btn {
position: absolute;
right: var(--space-3);
background: transparent;
border: none;
cursor: pointer;
font-size: var(--text-lg);
padding: var(--space-1);
opacity: 0.5;
transition: opacity var(--transition-fast);
z-index: 1;
}
.settings-eye-btn:hover {
opacity: 1;
}
/* API Key Validation States */
.api-key-container {
position: relative;
}
.validation-status {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
font-family: var(--font-mono);
font-size: var(--text-xs);
margin-top: var(--space-2);
animation: status-appear 0.3s ease-out;
}
@keyframes status-appear {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.validation-status.validating {
background: rgba(251, 191, 36, 0.1);
border: 1px solid rgba(251, 191, 36, 0.3);
color: var(--color-warning);
}
.validation-status.success {
background: rgba(20, 184, 166, 0.1);
border: 1px solid rgba(20, 184, 166, 0.3);
color: var(--color-success);
}
.validation-status.error {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
color: var(--color-error);
}
.validation-status-icon {
font-size: var(--text-base);
}
.validation-status-text {
flex: 1;
}
.validation-status-time {
font-size: var(--text-xs);
opacity: 0.7;
}
.validation-error-details {
margin-top: var(--space-2);
padding: var(--space-3);
background: rgba(239, 68, 68, 0.05);
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.6;
}
.validation-retry-btn {
margin-top: var(--space-2);
padding: var(--space-1) var(--space-3);
background: transparent;
border: 1px solid var(--border-medium);
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: var(--text-xs);
cursor: pointer;
transition: all var(--transition-fast);
}
.validation-retry-btn:hover {
background: var(--bg-tertiary);
border-color: var(--color-primary);
color: var(--text-gold);
}
/* Validation button states */
.btn-validate {
min-width: 120px;
transition: all var(--transition-fast);
}
.btn-validate.validating {
background: var(--gradient-transmute);
animation: validation-pulse 1.5s ease-in-out infinite;
}
@keyframes validation-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7);
}
50% {
box-shadow: 0 0 0 10px rgba(251, 191, 36, 0);
}
}
.btn-validate.success {
background: var(--gradient-success);
}
.btn-validate.error {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
/* Input field validation states */
.settings-input.validating {
border-color: var(--color-warning);
box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}
.settings-input.valid {
border-color: var(--color-success);
box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}
.settings-input.invalid {
border-color: var(--color-error);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
/* ===================================================================
CUSTOM CONFIRMATION DIALOG
=================================================================== */
.confirm-dialog-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 0;
transition: opacity 0.3s ease;
}
.confirm-dialog-overlay.active {
opacity: 1;
}
.confirm-dialog {
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
border: 2px solid var(--border-medium);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-2xl), 0 0 40px rgba(212, 165, 116, 0.15);
max-width: 480px;
width: 90%;
transform: scale(0.9) translateY(-20px);
opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.confirm-dialog.active {
transform: scale(1) translateY(0);
opacity: 1;
}
.confirm-dialog-header {
padding: var(--space-6);
border-bottom: 1px solid var(--border-subtle);
background: linear-gradient(135deg, rgba(212, 165, 116, 0.1) 0%, transparent 100%);
}
.confirm-dialog-title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 600;
font-variation-settings: 'wdth' 100, 'wght' 600;
color: var(--text-gold);
margin: 0;
}
.confirm-dialog-body {
padding: var(--space-6);
}
.confirm-dialog-message {
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
.confirm-dialog-actions {
padding: var(--space-6);
border-top: 1px solid var(--border-subtle);
display: flex;
justify-content: flex-end;
gap: var(--space-3);
background: rgba(10, 14, 26, 0.3);
}
.confirm-dialog-cancel {
min-width: 100px;
}
.confirm-dialog-confirm {
min-width: 100px;
}
/* Keyboard Shortcuts Dialog */
.keyboard-shortcuts-dialog {
max-width: 720px;
width: 95%;
}
.keyboard-shortcuts-dialog .confirm-dialog-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.shortcuts-body {
padding: 0 !important;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
max-height: 65vh;
overflow-y: auto;
}
.shortcuts-section {
padding: var(--space-5);
border-right: 1px solid var(--border-subtle);
}
.shortcuts-section:nth-child(odd):last-child {
border-right: none;
}
.shortcuts-section:nth-child(even):last-child {
border-right: none;
grid-column: span 2;
}
.shortcuts-section-title {
font-family: var(--font-display);
font-size: var(--text-xs);
font-weight: 700;
color: var(--color-secondary);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 var(--space-4) 0;
padding-bottom: var(--space-3);
border-bottom: 2px solid rgba(212, 165, 116, 0.4);
}
.shortcuts-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.shortcut-row {
display: grid;
grid-template-columns: 90px 1fr;
gap: var(--space-4);
align-items: center;
padding: var(--space-3) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: all var(--transition-fast);
}
.shortcut-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.shortcut-row:hover {
padding-left: var(--space-2);
padding-right: var(--space-2);
margin: 0 calc(-1 * var(--space-2));
background: rgba(212, 165, 116, 0.08);
border-radius: var(--radius-sm);
}
.shortcut-keys {
font-family: 'Fira Code', 'IBM Plex Mono', monospace;
font-size: 13px;
font-weight: 700;
color: var(--text-gold);
background: linear-gradient(135deg, rgba(212, 165, 116, 0.15) 0%, rgba(212, 165, 116, 0.08) 100%);
border: 1.5px solid rgba(212, 165, 116, 0.4);
border-radius: var(--radius-sm);
padding: var(--space-2) var(--space-3);
text-align: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
letter-spacing: 0.03em;
text-transform: uppercase;
line-height: 1.2;
}
.shortcut-desc {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.3;
}
/* ===================================================================
CUSTOM TOGGLE SWITCH - Alchemical Design
=================================================================== */
.settings-checkbox {
/* Hide the default checkbox */
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* Toggle switch container */
.settings-toggle-wrapper {
display: flex;
align-items: center;
gap: var(--space-3);
cursor: pointer;
user-select: none;
}
/* The switch track */
.settings-toggle-switch {
position: relative;
width: 56px;
height: 28px;
background: var(--bg-tertiary);
border: 2px solid var(--border-medium);
border-radius: var(--radius-full);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* The switch thumb */
.settings-toggle-switch::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: var(--text-tertiary);
border-radius: var(--radius-full);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
/* Hover state */
.settings-toggle-wrapper:hover .settings-toggle-switch {
border-color: var(--border-emphasis);
}
.settings-toggle-wrapper:hover .settings-toggle-switch::before {
background: var(--text-secondary);
}
/* Checked state - Alchemical Gold */
.settings-checkbox:checked + .settings-toggle-wrapper .settings-toggle-switch {
background: linear-gradient(135deg, rgba(212, 165, 116, 0.2) 0%, rgba(139, 105, 20, 0.2) 100%);
border-color: var(--color-primary);
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.3),
0 0 12px rgba(212, 165, 116, 0.3);
}
.settings-checkbox:checked + .settings-toggle-wrapper .settings-toggle-switch::before {
transform: translateX(28px);
background: var(--gradient-primary);
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.6),
0 0 8px rgba(212, 165, 116, 0.4);
}
/* Focus state for accessibility */
.settings-checkbox:focus + .settings-toggle-wrapper .settings-toggle-switch {
outline: none;
border-color: var(--color-primary);
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.3),
0 0 0 3px rgba(212, 165, 116, 0.15);
}
/* Toggle label text */
.settings-toggle-label {
font-family: var(--font-mono);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--text-secondary);
transition: color 0.2s ease;
}
.settings-checkbox:checked + .settings-toggle-wrapper .settings-toggle-label {
color: var(--color-primary);
}
/* Disabled state */
.settings-checkbox:disabled + .settings-toggle-wrapper {
opacity: 0.5;
cursor: not-allowed;
}
.settings-checkbox:disabled + .settings-toggle-wrapper .settings-toggle-switch {
background: var(--bg-tertiary);
}
/* Save-all button removed in favor of auto-save */
/* Provider Card in Settings */
.provider-card {
background: var(--bg-tertiary);
border: 2px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-5);
margin-bottom: var(--space-4);
transition: all var(--transition-fast);
}
.provider-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
}
/* Cache indicator in validation table */
.cache-indicator-row td {
background: rgba(212, 165, 116, 0.05);
border-bottom: 1px solid var(--border-subtle);
}
.provider-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-3);
}
.provider-name {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
color: var(--text-primary);
}
.provider-status {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
text-transform: uppercase;
}
.provider-status.available {
background: rgba(20, 184, 166, 0.2);
color: var(--color-secondary);
border: 1px solid var(--color-secondary);
}
.provider-status.unavailable {
background: rgba(239, 68, 68, 0.2);
color: var(--color-error);
border: 1px solid var(--color-error);
}
.provider-model {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--text-tertiary);
}
/* ===================================================================
QUESTIONS FORM - Clarification Ritual
=================================================================== */
.questions-container {
background: var(--surface-elevated);
border: 2px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-lg);
animation: appear 0.4s ease-out;
}
@keyframes appear {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.questions-header {
margin-bottom: var(--space-6);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--border-subtle);
}
.questions-title {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 700;
color: var(--text-gold);
margin-bottom: var(--space-2);
}
.questions-description {
font-family: var(--font-body);
font-size: var(--text-lg);
color: var(--text-secondary);
font-style: italic;
}
.question-item {
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin-bottom: var(--space-5);
}
.question-label {
display: block;
font-family: var(--font-body);
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--text-primary);
margin-bottom: var(--space-3);
}
.question-input {
width: 100%;
padding: var(--space-3) var(--space-4);
background: var(--surface-elevated);
border: 1px solid var(--border-medium);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--text-primary);
transition: all var(--transition-fast);
}
.question-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.15);
}
.questions-actions {
display: flex;
gap: var(--space-3);
margin-top: var(--space-6);
padding-top: var(--space-6);
border-top: 1px solid var(--border-subtle);
}
/* ===================================================================
QUESTION WIZARD - One-at-a-Time Flow
=================================================================== */
.question-wizard {
position: relative;
background: var(--surface-elevated);
border: 2px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-lg);
animation: wizardFadeIn 0.3s ease-out;
}
@keyframes wizardFadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.wizard-progress {
display: flex;
justify-content: center;
gap: var(--space-3);
margin-bottom: var(--space-8);
}
.progress-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--border-subtle);
transition: all var(--transition-fast);
}
.progress-dot.active {
background: var(--color-primary);
box-shadow: 0 0 12px rgba(212, 165, 116, 0.6);
transform: scale(1.3);
}
.progress-dot.completed {
background: var(--color-secondary);
}
.wizard-content {
animation: wizardContentFade 0.3s ease-out;
}
@keyframes wizardContentFade {
from {
opacity: 0;
transform: translateX(-10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.wizard-question-number {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--space-2);
}
.wizard-question-text {
font-family: 'IBM Plex Sans', sans-serif;
font-size: var(--text-lg);
font-weight: 500;
color: var(--text-gold);
margin-bottom: var(--space-6);
line-height: 1.45;
letter-spacing: -0.01em;
}
.wizard-input-container {
margin-bottom: var(--space-6);
}
.wizard-input {
width: 100%;
min-height: 120px;
padding: var(--space-4);
background: var(--bg-secondary);
border: 2px solid var(--border-subtle);
border-radius: var(--radius-lg);
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--text-primary);
resize: vertical;
transition: all var(--transition-fast);
line-height: 1.6;
}
.wizard-input:focus {
outline: none;
border-color: var(--color-primary);
background: var(--surface-elevated);
box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.1);
}
.wizard-input::placeholder {
color: var(--text-muted);
font-style: italic;
}
.wizard-option {
display: flex;
align-items: center;
padding: var(--space-4);
margin-bottom: var(--space-3);
background: var(--bg-secondary);
border: 2px solid var(--border-subtle);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-fast);
}
.wizard-option:hover {
background: var(--surface-elevated);
border-color: var(--border-medium);
transform: translateX(4px);
}
.wizard-option:has(input:checked) {
background: var(--surface-elevated);
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.1);
}
.wizard-option input[type="radio"],
.wizard-option input[type="checkbox"] {
margin-right: var(--space-3);
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--color-primary);
}
.wizard-option-text {
font-family: 'IBM Plex Sans', sans-serif;
font-size: var(--text-base);
color: var(--text-primary);
flex: 1;
line-height: 1.5;
}
.wizard-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-6);
padding-top: var(--space-6);
border-top: 1px solid var(--border-subtle);
}
.wizard-cancel-btn {
position: absolute;
top: var(--space-4);
right: var(--space-4);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--text-muted);
font-size: var(--text-lg);
cursor: pointer;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.wizard-cancel-btn:hover {
background: var(--bg-secondary);
color: var(--text-error);
transform: scale(1.1);
}
.btn-tertiary {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border-subtle);
}
.btn-tertiary:hover {
background: var(--bg-secondary);
color: var(--text-primary);
border-color: var(--border-medium);
}
/* ===================================================================
TWEAK PROMPT SECTION
=================================================================== */
.tweak-container {
background: var(--surface-elevated);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
}
.tweak-header {
margin-bottom: var(--space-5);
}
.tweak-title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 600;
color: var(--text-gold);
margin-bottom: var(--space-2);
}
.tweak-description {
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--text-secondary);
line-height: 1.6;
font-style: italic;
}
.tweak-item {
margin-bottom: var(--space-4);
}
.tweak-input {
width: 100%;
min-height: 130px;
padding: var(--space-4);
background: var(--bg-secondary);
border: 2px solid var(--border-subtle);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--text-primary);
resize: vertical;
transition: all var(--transition-fast);
line-height: 1.7;
}
.tweak-input:focus {
outline: none;
border-color: var(--color-primary);
background: var(--surface-elevated);
box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.1);
}
.tweak-input::placeholder {
color: var(--text-muted);
font-style: italic;
}
.tweak-examples {
background: var(--bg-secondary);
padding: var(--space-4);
border-radius: var(--radius-md);
margin-bottom: var(--space-5);
border-left: 3px solid var(--color-secondary);
}
.tweak-examples p {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--text-secondary);
margin-bottom: var(--space-2);
}
.tweak-examples ul {
margin: var(--space-2) 0 0 0;
list-style-position: inside;
}
.tweak-examples li {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--text-tertiary);
line-height: 1.8;
}
.tweak-actions {
display: flex;
gap: var(--space-3);
justify-content: flex-end;
margin-top: var(--space-5);
padding-top: var(--space-5);
border-top: 1px solid var(--border-subtle);
}
/* ===================================================================
TOAST NOTIFICATIONS - Alchemical Alerts (Stacked)
=================================================================== */
/* Toast container for stacking */
.toast-container {
position: fixed;
bottom: var(--space-8);
right: var(--space-8);
display: flex;
flex-direction: column-reverse;
gap: var(--space-3);
z-index: var(--z-toast);
pointer-events: none;
}
.toast {
background: var(--surface-elevated);
color: var(--text-primary);
padding: var(--space-4) var(--space-6);
border-radius: var(--radius-lg);
box-shadow:
var(--shadow-xl),
0 0 30px rgba(212, 165, 116, 0.3);
display: flex;
align-items: center;
gap: var(--space-3);
transform: translateX(400px);
opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
max-width: 420px;
border: 2px solid;
pointer-events: auto;
position: relative;
}
.toast.show {
transform: translateX(0);
opacity: 1;
}
/* Stacking effect - older toasts slide down and fade slightly */
.toast:not(:first-child) {
margin-bottom: calc(-1 * var(--space-2));
transform: translateX(0) translateY(-8px) scale(0.98);
opacity: 0.85;
}
.toast:not(:first-child).show {
opacity: 0.85;
}
/* Third toast and beyond gets even more subtle */
.toast:nth-child(n+3) {
transform: translateX(0) translateY(-16px) scale(0.96);
opacity: 0.7;
}
.toast:nth-child(n+3).show {
opacity: 0.7;
}
.toast-success {
border-color: var(--color-secondary);
box-shadow:
var(--shadow-xl),
var(--shadow-teal-glow);
}
.toast-error {
border-color: var(--color-error);
box-shadow:
var(--shadow-xl),
0 0 30px rgba(239, 68, 68, 0.3);
}
.toast-info {
border-color: var(--color-primary);
box-shadow:
var(--shadow-xl),
var(--shadow-gold-glow);
}
.toast-warning {
border-color: var(--color-warning);
box-shadow:
var(--shadow-xl),
0 0 30px rgba(251, 191, 36, 0.3);
}
.toast-icon {
font-size: var(--text-xl);
flex-shrink: 0;
}
.toast-message {
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.01em;
}
/* ===================================================================
MARKDOWN RENDERING - Scholarly Text
=================================================================== */
.markdown-content {
font-family: var(--font-body);
line-height: 1.5;
color: var(--text-primary);
overflow-wrap: break-word;
word-wrap: break-word;
max-width: 100%;
}
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
font-family: var(--font-display);
margin-top: var(--space-3);
margin-bottom: var(--space-1-5);
font-weight: 700;
line-height: 1.3;
color: var(--text-gold);
}
.markdown-content h1 { font-size: 2em; }
.markdown-content h2 { font-size: 1.5em; }
.markdown-content h3 { font-size: 1.25em; }
.markdown-content h4 { font-size: 1.1em; }
.markdown-content p {
margin-bottom: var(--space-2);
}
.markdown-content ul,
.markdown-content ol {
margin-bottom: var(--space-2);
margin-top: var(--space-2);
padding-left: var(--space-6);
}
.markdown-content li {
margin-bottom: var(--space-0-5);
line-height: 1.4;
}
.markdown-content code {
background: var(--bg-tertiary);
padding: 0.2em 0.5em;
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 0.9em;
color: var(--color-accent);
border: 1px solid var(--border-subtle);
}
.markdown-content pre {
background: var(--bg-tertiary);
padding: var(--space-3);
border-radius: var(--radius-md);
overflow-x: auto;
margin: var(--space-3) 0;
border: 1px solid var(--border-medium);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
line-height: 1.4;
max-width: 100%;
}
/* Custom scrollbar for code blocks */
.markdown-content pre::-webkit-scrollbar {
height: 6px;
}
.markdown-content pre::-webkit-scrollbar-track {
background: var(--bg-primary);
border-radius: var(--radius-sm);
}
.markdown-content pre::-webkit-scrollbar-thumb {
background: var(--border-medium);
border-radius: var(--radius-sm);
}
.markdown-content pre::-webkit-scrollbar-thumb:hover {
background: var(--color-primary);
}
/* Firefox scrollbar for code blocks */
.markdown-content pre {
scrollbar-width: thin;
scrollbar-color: var(--border-medium) var(--bg-primary);
}
.markdown-content pre code {
background: transparent;
padding: 0;
color: var(--text-primary);
border: none;
line-height: 1.3;
display: block;
overflow-wrap: normal;
word-break: normal;
white-space: pre;
}
.markdown-content blockquote {
border-left: 4px solid var(--color-primary);
padding-left: var(--space-5);
margin: var(--space-4) 0;
color: var(--text-secondary);
font-style: italic;
}
.markdown-content a {
color: var(--color-secondary);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--transition-fast);
}
.markdown-content a:hover {
border-bottom-color: var(--color-secondary);
}
.markdown-content table {
border-collapse: collapse;
width: 100%;
margin-bottom: var(--space-4);
}
.markdown-content th,
.markdown-content td {
border: 1px solid var(--border-subtle);
padding: var(--space-3) var(--space-4);
text-align: left;
}
.markdown-content th {
background: var(--bg-tertiary);
font-weight: 600;
color: var(--text-gold);
}
.markdown-content hr {
border: none;
border-top: 2px solid var(--border-subtle);
margin: var(--space-8) 0;
}
/* ===================================================================
RESPONSIVE DESIGN
=================================================================== */
@media (max-width: 768px) {
.main-content {
max-width: 100%;
margin: 0 auto;
padding: var(--space-6) var(--space-4) var(--space-8) var(--space-4);
gap: var(--space-6);
}
.top-bar {
padding: var(--space-4);
}
.top-bar-content {
flex-direction: row;
justify-content: space-between;
gap: var(--space-4);
}
/* Show hamburger menu on mobile */
.hamburger-btn {
display: flex;
}
/* Hide provider controls in top bar on mobile, will be in menu */
.provider-config-group {
display: none;
}
/* Show mobile menu on mobile devices */
.mobile-menu {
display: flex;
visibility: visible;
}
.main-content {
padding-top: var(--space-6);
padding-bottom: var(--space-8);
padding-left: var(--space-4);
padding-right: var(--space-4);
gap: var(--space-6);
}
.prompt-canvas,
.output-section,
.history-section {
padding: var(--space-5);
min-height: auto;
}
.prompt-canvas {
min-height: 400px;
}
.workspace-container {
grid-template-columns: 1fr;
gap: var(--space-4);
width: 100%;
}
.provider-selector {
flex-direction: column;
gap: var(--space-1);
text-align: left;
min-width: auto;
width: 100%;
}
.provider-selector select {
width: 100%;
flex: 1;
}
.prompt-toolbar {
flex-direction: column;
gap: var(--space-3);
align-items: stretch;
}
.toolbar-left {
flex-direction: column;
gap: var(--space-3);
}
.toolbar-item {
width: 100%;
}
/* Ensure no overflow on mobile */
.output-section,
.history-section {
width: 100%;
box-sizing: border-box;
}
/* Fix mobile prompt input */
#prompt-input {
width: 100%;
box-sizing: border-box;
min-height: 120px;
}
/* Fix buttons on mobile */
.prompt-controls {
flex-direction: column;
gap: var(--space-2);
align-items: stretch;
}
.prompt-controls-right {
flex-direction: column;
gap: var(--space-2);
}
/* Fix output header overflow on mobile */
.output-header {
flex-wrap: wrap;
gap: var(--space-4);
align-items: flex-start;
}
.output-title {
font-size: var(--text-xl);
flex: 1 1 auto;
min-width: 0;
}
.output-actions {
flex: 0 0 auto;
width: 100%;
justify-content: flex-end;
gap: var(--space-3);
}
.output-actions .btn {
flex: 1;
min-width: 0;
max-width: 160px;
padding: var(--space-3) var(--space-4);
font-size: var(--text-sm);
}
}
/* Additional mobile fixes for very small screens */
@media (max-width: 480px) {
.main-content {
padding: var(--space-4) var(--space-3);
}
.prompt-canvas,
.output-section,
.history-section {
padding: var(--space-4);
}
.top-bar-controls .btn {
padding: var(--space-2) var(--space-3);
font-size: var(--text-xs);
}
.provider-selector {
padding: var(--space-2);
}
/* Wizard action buttons - share space, don't take full width */
.wizard-actions {
gap: var(--space-2);
}
.wizard-actions .btn {
flex: 1;
min-width: 0;
padding: var(--space-3) var(--space-3);
font-size: var(--text-sm);
}
/* Primary action buttons should be full width */
.prompt-controls .btn-primary,
.prompt-controls .btn {
width: 100%;
padding: var(--space-3) var(--space-4);
font-size: var(--text-base);
}
/* History and navigation buttons */
.history-header .btn-sm {
padding: var(--space-2) var(--space-3);
font-size: var(--text-xs);
white-space: nowrap;
}
.history-grid {
grid-template-columns: 1fr;
gap: var(--space-5);
}
.settings-panel {
max-width: 100%;
}
}
/* ===================================================================
ACCESSIBILITY & UTILITIES
=================================================================== */
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Focus Visible */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Screen Reader Only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Utility Classes */
.hidden {
display: none !important;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
/* ===================================================================
ABOUT SECTION - Alchemical Design
=================================================================== */
.about-container {
background: var(--bg-tertiary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-subtle);
}
.about-header {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-5);
background: linear-gradient(135deg, var(--gradient-secondary));
position: relative;
}
.about-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-energy);
opacity: 0.3;
z-index: 0;
}
.about-header > * {
position: relative;
z-index: 1;
}
.about-logo {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(212, 165, 116, 0.2);
border-radius: 50%;
border: 2px solid var(--color-primary);
box-shadow: 0 0 20px rgba(212, 165, 116, 0.4);
}
.logo-symbol {
font-size: 24px;
filter: drop-shadow(0 0 8px rgba(212, 165, 116, 0.6));
}
.about-title h4 {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 700;
color: var(--text-primary);
margin: 0 0 var(--space-1) 0;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.about-tagline {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--text-secondary);
margin: 0;
font-style: italic;
}
.about-content {
padding: var(--space-5);
}
.about-description {
margin-bottom: var(--space-5);
}
.about-description p {
font-family: var(--font-body);
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
font-size: var(--text-sm);
}
.version-section {
background: var(--bg-secondary);
border-radius: var(--radius-sm);
padding: var(--space-4);
margin-bottom: var(--space-4);
border: 1px solid var(--border-subtle);
}
.version-header {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.version-icon {
font-size: 18px;
filter: drop-shadow(0 0 4px rgba(212, 165, 116, 0.4));
}
.version-label {
font-family: var(--font-display);
font-weight: 600;
color: var(--color-primary);
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.version-details {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.version-row,
.build-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-1) 0;
}
.version-field,
.build-field {
font-family: var(--font-display);
font-size: var(--text-xs);
color: var(--text-tertiary);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.version-value,
.build-value {
font-family: var(--font-body);
font-size: var(--text-xs);
color: var(--text-secondary);
font-weight: 400;
}
.version-value {
font-family: var(--font-mono);
background: rgba(212, 165, 116, 0.1);
padding: 2px 6px;
border-radius: 3px;
border: 1px solid rgba(212, 165, 116, 0.3);
}
.build-value.code {
font-family: var(--font-mono);
background: var(--bg-tertiary);
padding: 2px 6px;
border-radius: 3px;
border: 1px solid var(--border-subtle);
}
.build-value.build-dev {
color: var(--color-warning);
background: rgba(251, 191, 36, 0.1);
border: 1px solid rgba(251, 191, 36, 0.3);
}
.build-value.build-clean {
color: var(--color-success);
background: rgba(20, 184, 166, 0.1);
border: 1px solid rgba(20, 184, 166, 0.3);
}
.about-links {
margin-top: var(--space-4);
}
.about-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-secondary);
text-decoration: none;
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 500;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-lg);
transition: all var(--transition-fast);
background: linear-gradient(135deg, rgba(45, 212, 191, 0.1), rgba(45, 212, 191, 0.05));
border: 1px solid rgba(45, 212, 191, 0.3);
position: relative;
overflow: hidden;
}
.about-link::before {
content: '';
position: absolute;
top: 0;
left: -150%;
width: 150%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s ease;
}
.about-link:hover {
background: linear-gradient(135deg, rgba(45, 212, 191, 0.2), rgba(45, 212, 191, 0.1));
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(45, 212, 191, 0.4);
border-color: var(--color-secondary);
}
.about-link:hover::before {
left: 100%;
}
.about-link-icon {
font-size: 14px;
}
/* ===================================================================
APP FOOTER - Traditional Footer Design
=================================================================== */
.app-footer {
margin-top: auto;
background: var(--surface-elevated);
border-top: 1px solid var(--border-subtle);
backdrop-filter: blur(20px);
position: relative;
}
.app-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--color-primary) 50%,
transparent 100%);
opacity: 0.5;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-8);
padding: var(--space-8) var(--space-6);
max-width: 1400px;
margin: 0 auto;
}
.footer-left {
flex-shrink: 0;
max-width: 320px;
}
.footer-logo {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.footer-logo .logo-symbol {
font-size: 28px;
filter: drop-shadow(0 0 8px rgba(212, 165, 116, 0.6));
}
.footer-title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 700;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.footer-description {
font-family: var(--font-body);
color: var(--text-secondary);
font-size: var(--text-sm);
line-height: 1.6;
margin: 0;
}
.footer-links {
display: flex;
gap: var(--space-8);
flex: 1;
justify-content: flex-end;
}
.footer-section {
min-width: 160px;
}
.footer-section-title {
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-gold);
margin-bottom: var(--space-3);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.footer-link-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.footer-link {
font-family: var(--font-body);
color: var(--text-tertiary);
text-decoration: none;
font-size: var(--text-sm);
transition: all var(--transition-fast);
padding: var(--space-1) 0;
display: inline-block;
position: relative;
}
.footer-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: var(--color-primary);
transition: width var(--transition-fast);
}
.footer-link:hover {
color: var(--text-primary);
}
.footer-link:hover::after {
width: 100%;
}
.footer-bottom {
border-top: 1px solid var(--border-subtle);
padding: var(--space-4) var(--space-6);
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
}
.footer-copyright {
font-family: var(--font-display);
font-size: var(--text-xs);
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.footer-version {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--text-secondary);
background: rgba(212, 165, 116, 0.1);
padding: 2px 6px;
border-radius: 3px;
border: 1px solid rgba(212, 165, 116, 0.3);
}
/* Accessibility: Screen reader only text */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Sync indicator animation */
.sync-indicator {
position: absolute;
top: 50%;
right: var(--space-2);
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-fast);
color: var(--color-primary);
font-size: 12px;
animation: syncPulse 0.6s ease-in-out;
}
.sync-indicator.active {
opacity: 1;
}
@keyframes syncPulse {
0%, 100% { opacity: 0; transform: translateY(-50%) scale(0.8); }
50% { opacity: 1; transform: translateY(-50%) scale(1.1); }
}
/* Mobile Provider Selector Styles */
.provider-selector-mobile {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3);
background: var(--bg-secondary);
border: 1px solid var(--border-medium);
border-radius: var(--radius-md);
font-family: var(--font-display);
font-size: var(--text-sm);
color: var(--text-secondary);
transition: all var(--transition-fast);
margin-bottom: var(--space-2);
position: relative;
}
.provider-selector-mobile > label {
font-family: var(--font-display);
font-size: var(--text-xs);
font-weight: 500;
min-width: 60px;
flex-shrink: 0;
}
.provider-selector-mobile select {
border: none;
background: transparent;
color: var(--text-gold);
font-family: var(--font-display);
font-weight: var(--font-medium);
cursor: pointer;
padding: var(--space-1);
font-size: var(--text-sm);
flex: 1;
}
.provider-selector-mobile select:focus {
outline: none;
}
/* Mobile Footer Styles */
@media (max-width: 768px) {
.footer-content {
flex-direction: column;
gap: var(--space-6);
padding: var(--space-6) var(--space-4);
text-align: center;
}
.footer-left {
max-width: 100%;
text-align: center;
}
.footer-links {
justify-content: center;
flex-wrap: wrap;
gap: var(--space-6);
width: 100%;
}
.footer-section {
min-width: 120px;
}
.footer-bottom-content {
flex-direction: column;
gap: var(--space-2);
text-align: center;
padding: 0 var(--space-4);
}
.footer-description {
font-size: var(--text-xs);
}
}
@media (max-width: 480px) {
.footer-links {
flex-direction: column;
gap: var(--space-4);
}
.footer-section {
min-width: auto;
}
}
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/abhichandra21/Promptheus'
If you have feedback or need assistance with the MCP directory API, please join our Discord server