/* Preview-specific styles */
.preview-pane {
    border-left: 1px solid var(--border);
    overflow-y: auto;
    background: var(--bg-main);
    padding: 0;
}

.markdown-body { 
    padding: 30px 30px 50px; 
    max-width: 800px; 
    margin: 0 auto; 
    line-height: 1.7; 
}

.code-preview-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: white; /* Default background for code preview */
}

.markdown-body h1, 
.markdown-body h2, 
.markdown-body h3 {
    color: var(--accent);
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.markdown-body h1 { 
    border-bottom: 1px solid var(--border); 
    padding-bottom: 0.3em; 
}

.markdown-body p { 
    margin-bottom: 1em; 
}

.markdown-body a { 
    color: var(--accent); 
    text-decoration: none; 
}

.markdown-body a:hover { 
    text-decoration: underline; 
}

.markdown-body blockquote {
    border-left: 4px solid var(--accent);
    background: rgba(122, 162, 247, 0.1);
    padding: 10px 15px;
    margin: 1em 0;
    color: #cfc9c2;
    border-radius: 0 5px 5px 0;
}

.markdown-body img, 
.markdown-body video {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    margin: 10px 0;
}

.markdown-body code {
    background-color: var(--code-bg);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Fira Code', monospace;
    font-size: 0.9em;
}

.markdown-body pre {
    background-color: var(--code-bg);
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1em 0;
    line-height: 1.5;
}

/* Ensure Prism styles take precedence */
.markdown-body pre[class*="language-"] {
    border: 1px solid var(--border);
}