/* Base styling for the app */

.glassmorphism {
    background: rgba(21, 28, 44, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Tab active state styling */
.tab-btn.active {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.format-btn.active {
    background: #3B82F6;
    color: white;
}

/* View Sections */
.view-section {
    display: none;
}

.view-section.active {
    display: flex;
}

/* Toast animations */
.toast-visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* Markdown HTML Render styling (prose wrapper styling) */
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.prose th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: #1E293B;
    border-bottom: 2px solid #334155;
    color: #F8FAFC;
    font-size: 0.875rem;
}

.prose td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #334155;
    color: #CBD5E1;
    font-size: 0.875rem;
}

.prose td code {
    background: #0B0F19;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    color: #3B82F6;
    font-family: inherit;
    border: 1px solid #1E293B;
}

.prose h2 {
    color: #F8FAFC;
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.prose h3 {
    color: #E2E8F0;
    font-size: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}