/* WOPR CRT Theme - Open WebUI Edition */
/* Green terminal aesthetic without breaking chat UI */

/* === BASE: Dark terminal look === */
body {
    background: #0a0a0a !important;
    color: #e0e0e0 !important;
    font-family: "JetBrains Mono", "Fira Code", "Courier New", monospace !important;
}

/* === SIDEBAR: Bigger icons, more breathing room === */
nav, [data-sidebar], .sidebar {
    background: #0d0d0d !important;
    border-right: 1px solid #1a3a1a !important;
}

/* Sidebar icon buttons */
nav button, nav a,
[data-sidebar] button, [data-sidebar] a {
    padding: 12px !important;
    margin: 4px 6px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
    transition: background 0.2s ease !important;
}

nav button:hover, nav a:hover,
[data-sidebar] button:hover, [data-sidebar] a:hover {
    background: rgba(0, 255, 0, 0.08) !important;
}

/* Sidebar icons - larger */
nav svg, [data-sidebar] svg {
    width: 22px !important;
    height: 22px !important;
    color: #4a9a4a !important;
}

nav button:hover svg, nav a:hover svg {
    color: #00ff00 !important;
}

/* === CHAT AREA === */
main, [role="main"], .relative.flex.h-full {
    background: #0a0a0a !important;
}

/* Push chat content up */
.flex.flex-col.items-center.justify-center {
    padding-top: 1rem !important;
}

/* === MESSAGES: ADHD-friendly spacing === */
[data-message], .message, .group {
    padding: 1rem 1.5rem !important;
    margin-bottom: 0.5rem !important;
    border-radius: 8px !important;
}

/* Assistant messages - subtle glow */
[data-role="assistant"], .assistant-message {
    background: rgba(0, 40, 0, 0.3) !important;
    border-left: 3px solid #1a6a1a !important;
    padding-left: 1.5rem !important;
}

/* Message text - bigger line height, less dense */
.prose, .markdown-content, [data-message] p,
.message-content p, main p {
    line-height: 1.8 !important;
    font-size: 0.95rem !important;
    color: #c8e6c8 !important;
    max-width: 75ch !important;
}

/* Headings - green accent, clear visual breaks */
.prose h1, .prose h2, .prose h3, .prose h4,
.markdown-content h1, .markdown-content h2,
.markdown-content h3, .markdown-content h4 {
    color: #00dd00 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.4rem !important;
    border-bottom: 1px solid #1a3a1a !important;
    font-weight: 600 !important;
}

/* Bold - brighter green */
.prose strong, .markdown-content strong {
    color: #00ff88 !important;
    font-weight: 700 !important;
}

/* Lists - more space between items */
.prose li, .markdown-content li {
    margin-bottom: 0.6rem !important;
    line-height: 1.7 !important;
    color: #b8d8b8 !important;
}

.prose ul, .prose ol {
    padding-left: 1.5rem !important;
    margin: 1rem 0 !important;
}

.prose li::marker {
    color: #00aa00 !important;
}

/* Code blocks */
.prose pre, .markdown-content pre, pre {
    background: #0d1a0d !important;
    border: 1px solid #1a4a1a !important;
    border-radius: 6px !important;
    padding: 1rem !important;
    margin: 1rem 0 !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
}

.prose code, .markdown-content code {
    color: #00ffaa !important;
    background: rgba(0, 255, 0, 0.06) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.88rem !important;
}

/* === INPUT === */
textarea, .chat-input, [contenteditable] {
    background: #0d0d0d !important;
    border: 1px solid #2a5a2a !important;
    color: #00ff00 !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
}

textarea:focus, .chat-input:focus, [contenteditable]:focus {
    border-color: #00ff00 !important;
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.15) !important;
    outline: none !important;
}

/* === MODEL SELECTOR === */
button[aria-haspopup], .model-selector {
    color: #4a9a4a !important;
    font-size: 0.95rem !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #1a4a1a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2a6a2a; }

/* === ACTION BUTTONS === */
button { transition: all 0.15s ease !important; }

.prose + div button, [data-message] button {
    color: #4a8a4a !important;
    padding: 6px !important;
    border-radius: 6px !important;
}

.prose + div button:hover, [data-message] button:hover {
    color: #00ff00 !important;
    background: rgba(0, 255, 0, 0.08) !important;
}

/* === LINKS === */
a { color: #00cc88 !important; }
a:hover { color: #00ffaa !important; }