/* Styles specific to the Markdown Editor & Previewer Tool */

    .markdown-editor-container {
        max-width: 1400px; /* Allow very wide layout for side-by-side */
        margin: 1rem auto;
        padding: 1rem; /* Reduced padding */
        /* background-color: var(--bg-color); */
        height: calc(100vh - 150px); /* Adjust based on header/footer height */
        display: flex;
        flex-direction: column;
    }

    .editor-preview-wrapper {
        display: flex;
        flex-grow: 1; /* Take remaining vertical space */
        gap: 1rem;
        overflow: hidden; /* Prevent content overflow */
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background-color: var(--preview-bg);
        padding: 1rem;
    }

    .editor-panel, .preview-panel {
        flex: 1; /* Equal width */
        display: flex;
        flex-direction: column;
        overflow: hidden; /* Prevent internal overflow */
        min-width: 300px; /* Minimum width */
    }

    .editor-panel label, .preview-header label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: var(--label-text);
        font-size: 0.9rem;
        padding: 0 0.2rem; /* Align with textarea/preview padding */
    }

    #markdown-input {
        flex-grow: 1; /* Fill available vertical space */
        width: 100%;
        padding: 0.8rem;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
        font-size: 0.95rem;
        background-color: var(--bg-color);
        color: var(--text-color);
        resize: none; /* Disable manual resize, rely on flexbox */
        line-height: 1.6;
        box-sizing: border-box;
        overflow-y: auto; /* Allow vertical scrolling */
    }
    #markdown-input:focus {
        border-color: var(--accent-color);
        outline: none;
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
    }
    body.dark-mode #markdown-input:focus {
        box-shadow: 0 0 0 2px rgba(102, 191, 255, 0.25);
    }

    .preview-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0; /* Prevent header shrinking */
        position: relative; /* For copy status */
    }

    .output-controls {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

    .control-button {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
        font-weight: 500;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        transition: opacity 0.2s;
        white-space: nowrap;
    }
    .control-button.copy {
        background-color: var(--label-text);
        color: var(--bg-color);
        opacity: 0.8;
    }
    .control-button.copy:hover { opacity: 1; }

    .control-button.download {
        background-color: #6c757d; /* Grey */
        color: white;
        opacity: 0.9;
    }
     .control-button.download:hover { opacity: 1; }

    .copy-status-message {
        font-size: 0.8rem;
        color: var(--accent-color);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none;
        /* Positioned relative to button via flex gap */
    }
    .copy-status-message.visible { opacity: 1; }


    .preview-content {
        flex-grow: 1; /* Fill available vertical space */
        overflow-y: auto; /* Allow vertical scrolling */
        padding: 0.8rem;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        background-color: var(--bg-color);
        line-height: 1.6;
    }

    /* Basic Preview Styling (mimic common markdown output) */
    .preview-content > *:first-child { margin-top: 0; }
    .preview-content > *:last-child { margin-bottom: 0; }

    .preview-content h1, .preview-content h2, .preview-content h3,
    .preview-content h4, .preview-content h5, .preview-content h6 {
        margin-top: 1.2em;
        margin-bottom: 0.6em;
        color: var(--text-color);
        line-height: 1.3;
        font-weight: 600;
        padding-bottom: 0.2em;
        border-bottom: 1px solid var(--border-color);
    }
    .preview-content h1 { font-size: 2em; border-bottom-width: 2px; }
    .preview-content h2 { font-size: 1.6em; }
    .preview-content h3 { font-size: 1.3em; }
    .preview-content h4 { font-size: 1.1em; font-weight: 500; border-bottom: none;}
    .preview-content h5 { font-size: 1em; font-weight: 500; border-bottom: none;}
    .preview-content h6 { font-size: 0.9em; font-weight: 500; color: var(--label-text); border-bottom: none;}

    .preview-content p { margin-bottom: 1em; }
    .preview-content a { color: var(--accent-color); text-decoration: none; }
    .preview-content a:hover { text-decoration: underline; }
    body.dark-mode .preview-content a { color: var(--accent-color-dark); }

    .preview-content ul, .preview-content ol {
        margin-left: 1.8em;
        margin-bottom: 1em;
        padding-left: 0; /* Reset default padding */
    }
    .preview-content li { margin-bottom: 0.4em; }
    .preview-content ul ul, .preview-content ol ol,
    .preview-content ul ol, .preview-content ol ul {
        margin-bottom: 0; /* Reduce margin for nested lists */
    }

    .preview-content blockquote {
        border-left: 4px solid var(--border-color);
        margin-left: 0;
        padding-left: 1em;
        color: var(--label-text);
        font-style: italic;
        margin-bottom: 1em;
    }
    .preview-content blockquote > *:first-child { margin-top: 0; }
    .preview-content blockquote > *:last-child { margin-bottom: 0; }

    .preview-content code {
        background-color: rgba(0,0,0,0.05);
        padding: 0.2em 0.4em;
        border-radius: 3px;
        font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
        font-size: 0.9em;
        color: var(--text-color);
    }
    body.dark-mode .preview-content code { background-color: rgba(255,255,255,0.1); }

    .preview-content pre {
        background-color: rgba(0,0,0,0.05);
        padding: 0.8rem;
        border-radius: 4px;
        overflow-x: auto;
        margin-bottom: 1em;
    }
    body.dark-mode .preview-content pre { background-color: rgba(255,255,255,0.08); }
    .preview-content pre code {
        background-color: transparent;
        padding: 0;
        border-radius: 0;
        font-size: 0.9em;
        line-height: 1.5;
        white-space: pre; /* Ensure pre formatting is kept */
    }

    .preview-content img { max-width: 100%; height: auto; margin: 1em 0; }
    .preview-content hr { border: none; border-top: 1px solid var(--border-color); margin: 1.5em 0; }
    .preview-content table {
        border-collapse: collapse;
        margin-bottom: 1em;
        width: auto; /* Don't force full width */
        border: 1px solid var(--border-color);
    }
    .preview-content th, .preview-content td {
        border: 1px solid var(--border-color);
        padding: 0.5rem 0.8rem;
    }
    .preview-content th { font-weight: 600; background-color: var(--preview-bg); }

    .status-message.error {
        color: var(--error-text);
        text-align: center;
        padding: 0.5rem;
    }

    /* Responsive */
    @media (max-width: 900px) {
        .editor-preview-wrapper {
            flex-direction: column;
            height: auto; /* Allow height to adjust */
        }
        .editor-panel, .preview-panel {
            min-height: 300px; /* Ensure minimum height when stacked */
        }
        .markdown-editor-container {
             height: auto; /* Allow container to grow */
        }
    }