/* Custom styles on top of Tailwind */

/* Smooth scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4B5563; }

/* Code blocks in markdown - ChatGPT/Claude style */
.prose pre {
    background: #1f2937 !important;
    border: 1px solid #374151;
    border-radius: 8px;
    position: relative;
    margin: 1rem 0;
    overflow-x: auto !important;
    max-width: 100%;
    width: 100%;
}

.prose pre code {
    display: block;
    padding: 1rem;
    background: transparent !important;
    color: #e5e7eb;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre !important;
    word-wrap: normal;
    overflow-wrap: normal;
}

/* Inline code */
.prose code {
    color: #93c5fd;
    background: #1e3a5f;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.875em;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    word-break: break-word;
}

.prose pre code {
    padding: 1rem;
    word-break: normal;
}

/* Code block header with language and copy button */
.prose pre::before {
    content: attr(data-language);
    position: sticky;
    left: 0;
    top: 0;
    display: block;
    padding: 0.5rem 1rem;
    background: #111827;
    border-bottom: 1px solid #374151;
    font-size: 0.75rem;
    color: #9ca3af;
    text-transform: uppercase;
    font-family: system-ui, -apple-system, sans-serif;
    z-index: 2;
}

.prose pre[data-language] code {
    padding-top: 0;
    margin-top: 2.5rem;
}

/* Copy button for code blocks */
.code-copy-btn {
    position: sticky;
    top: 0.5rem;
    right: 0.5rem;
    float: right;
    padding: 0.4rem 0.8rem;
    background: #374151;
    border: 1px solid #4b5563;
    border-radius: 4px;
    color: #d1d5db;
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
    font-family: system-ui, -apple-system, sans-serif;
    z-index: 10;
}

.prose pre:hover .code-copy-btn {
    opacity: 1;
}

.code-copy-btn:hover {
    background: #4b5563;
    color: #ffffff;
}

.code-copy-btn.copied {
    background: #059669;
    border-color: #10b981;
    color: #ffffff;
}

/* Ensure code doesn't break out of container */
.prose {
    overflow-wrap: break-word;
    word-wrap: break-word;
    min-width: 0;
    max-width: 100%;
}

.prose p, .prose li, .prose h1, .prose h2, .prose h3 {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Blazor validation */
.validation-message { color: #f87171; font-size: 0.75rem; margin-top: 4px; }
.invalid { border-color: #ef4444 !important; }

/* Textarea auto-resize */
textarea { field-sizing: content; }

/* Smooth animations */
* { transition-property: color, background-color, border-color; transition-duration: 150ms; }

/* ── Light Theme Overrides ───────────────────────────────────────────── */
html.light body                     { background-color: #f9fafb !important; color: #111827 !important; }

/* Backgrounds */
html.light .bg-gray-900             { background-color: #f3f4f6 !important; }
html.light .bg-gray-800             { background-color: #ffffff !important; }
html.light .bg-gray-700             { background-color: #f3f4f6 !important; }
html.light .bg-gray-600             { background-color: #e5e7eb !important; }
html.light .hover\:bg-gray-600:hover { background-color: #d1d5db !important; }
html.light .hover\:bg-gray-500:hover { background-color: #e5e7eb !important; }
html.light .hover\:bg-red-600:hover  { background-color: #dc2626 !important; }

/* Text */
html.light .text-gray-100           { color: #111827 !important; }
html.light .text-gray-300           { color: #374151 !important; }
html.light .text-gray-400           { color: #6b7280 !important; }
html.light .text-gray-500           { color: #9ca3af !important; }
html.light .text-white              { color: #111827 !important; }

/* Borders */
html.light .border-gray-700         { border-color: #e5e7eb !important; }
html.light .border-gray-600         { border-color: #d1d5db !important; }

/* Inputs & textareas */
html.light input, html.light textarea, html.light select {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}
html.light input::placeholder, html.light textarea::placeholder {
    color: #9ca3af !important;
}

/* AI message bubble */
html.light .bg-gray-700.text-gray-100 {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
}

/* Prose (markdown) in light mode */
html.light .prose-invert            { color: #111827 !important; }
html.light .prose-invert p,
html.light .prose-invert li,
html.light .prose-invert td         { color: #111827 !important; }
html.light .prose-invert h1,
html.light .prose-invert h2,
html.light .prose-invert h3         { color: #111827 !important; }
html.light .prose-invert code       { color: #1d4ed8 !important; background-color: #eff6ff !important; }
html.light .prose-invert pre        { background-color: #f3f4f6 !important; border-color: #e5e7eb !important; }
html.light .prose-invert pre code   { color: #111827 !important; background: transparent !important; }
html.light .prose-invert a          { color: #2563eb !important; }

/* Code block header in light mode */
html.light .prose pre::before {
    background: #e5e7eb !important;
    border-bottom-color: #d1d5db !important;
    color: #6b7280 !important;
}

/* Copy button in light mode */
html.light .code-copy-btn {
    background: #e5e7eb !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
}

html.light .code-copy-btn:hover {
    background: #d1d5db !important;
    color: #111827 !important;
}

/* Scrollbar in light mode */
html.light ::-webkit-scrollbar-thumb { background: #d1d5db; }
html.light ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Keep blue/accent colors unchanged in light mode */
html.light .bg-blue-600             { background-color: #2563eb !important; }
html.light .hover\:bg-blue-700:hover { background-color: #1d4ed8 !important; }
html.light .text-blue-400           { color: #2563eb !important; }
html.light .text-blue-500           { color: #3b82f6 !important; }
html.light .border-blue-500         { border-color: #3b82f6 !important; }

/* User message bubble: keep blue, override text to white */
html.light .bg-blue-600.text-white  { color: #ffffff !important; }