/* ==========================================
   SaaS Generator - Minimal Custom Styles
   Only styles that Tailwind can't handle
   ========================================== */

/* Dark mode color scheme */
html.dark { color-scheme: dark; }

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar,
.result-content::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track,
.result-content::-webkit-scrollbar-track { background: transparent; border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb,
.result-content::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover,
.result-content::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb,
.dark .result-content::-webkit-scrollbar-thumb { background: #334155; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover,
.dark .result-content::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Slide up animation */
@keyframes slide-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-slide-up { animation: slide-up 0.2s ease-out; }

/* Slide down animation */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Spinner for button loading */
@keyframes spin { to { transform: rotate(360deg); } }
.btn-loader::before {
    content: ''; display: inline-block; width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
    border-radius: 50%; animation: spin .7s linear infinite; margin-right: 6px;
}

/* Stream progress bar animation */
@keyframes streamPulse {
    0% { width: 10%; margin-left: 0; }
    50% { width: 40%; margin-left: 30%; }
    100% { width: 10%; margin-left: 90%; }
}

/* Select styling fix for dark mode */
select option { background: white; color: #0f172a; }
.dark select option { background: #1e293b; color: #f8fafc; }

/* Partial regen button positioning */
.partial-regen-btn {
    position: absolute; z-index: 1100;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
}

/* ---- Rendered Markdown Styles ---- */
.rendered-markdown { font-size: 0.95rem; line-height: 1.8; }
.rendered-markdown h1 { font-size: 1.8rem; margin: 24px 0 12px; padding-bottom: 8px; border-bottom: 2px solid #e2e8f0; font-weight: 700; }
.rendered-markdown h2 { font-size: 1.5rem; margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #e2e8f0; font-weight: 600; }
.rendered-markdown h3 { font-size: 1.25rem; margin: 16px 0 8px; font-weight: 600; }
.rendered-markdown h4 { font-size: 1.1rem; margin: 14px 0 6px; font-weight: 600; }
.rendered-markdown h5 { font-size: 1rem; margin: 12px 0 6px; font-weight: 600; }
.rendered-markdown h6 { font-size: .9rem; margin: 10px 0 6px; color: #64748b; font-weight: 600; }
.rendered-markdown p { margin: 0 0 12px; }
.rendered-markdown ul, .rendered-markdown ol { margin: 0 0 12px; padding-left: 24px; }
.rendered-markdown li { margin-bottom: 4px; }
.rendered-markdown li > ul, .rendered-markdown li > ol { margin-bottom: 0; }
.rendered-markdown blockquote {
    border-left: 4px solid #3b82f6; margin: 12px 0; padding: 8px 16px;
    background: rgba(59, 130, 246, .05); color: #64748b;
}
.rendered-markdown blockquote p { margin-bottom: 4px; }
.rendered-markdown pre {
    background: #1e293b; color: #e2e8f0; padding: 16px; border-radius: 8px;
    overflow-x: auto; margin: 12px 0; font-size: .88rem; line-height: 1.5;
}
.rendered-markdown code {
    background: #f1f5f9; padding: 2px 6px; border-radius: 4px;
    font-size: .88rem; font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
}
.rendered-markdown pre code { background: none; padding: 0; border-radius: 0; color: inherit; }
.rendered-markdown table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.rendered-markdown th, .rendered-markdown td { padding: 8px 12px; border: 1px solid #e2e8f0; text-align: left; }
.rendered-markdown th { background: #f8fafc; font-weight: 600; }
.rendered-markdown tr:nth-child(even) { background: rgba(0,0,0,.02); }
.rendered-markdown a { color: #2563eb; text-decoration: underline; }
.rendered-markdown img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
.rendered-markdown hr { border: none; border-top: 2px solid #e2e8f0; margin: 20px 0; }
.rendered-markdown .mermaid { margin: 16px 0; text-align: center; }

/* Dark mode markdown overrides */
.dark .rendered-markdown h1, .dark .rendered-markdown h2 { border-color: #334155; }
.dark .rendered-markdown h6 { color: #94a3b8; }
.dark .rendered-markdown blockquote { color: #94a3b8; background: rgba(59, 130, 246, .08); }
.dark .rendered-markdown code { background: #1e293b; }
.dark .rendered-markdown pre { background: #0f172a; }
.dark .rendered-markdown th, .dark .rendered-markdown td { border-color: #334155; }
.dark .rendered-markdown th { background: #1e293b; }
.dark .rendered-markdown tr:nth-child(even) { background: rgba(255,255,255,.02); }

/* Legacy toast (kept for app.js showToast compatibility) */
.toast {
    position: fixed; bottom: 20px; right: 20px; padding: 14px 22px;
    border-radius: 12px; z-index: 2000; max-width: 420px; font-size: .92rem;
    font-family: 'Inter', sans-serif; color: #fff;
    background: #1e293b; box-shadow: 0 10px 25px -5px rgba(0,0,0,.2);
    animation: slide-up 0.3s ease-out;
}
.toast.success { background: #10b981; }
.toast.error { background: #ef4444; }