/* Global Reset */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
    box-sizing: border-box;
    background-color: #ECEFF4;
}

/* Layout */
body {
    display: flex;
    flex-direction: column;
    padding: 20px;
    min-height: 100vh;
}

.footer-bar {
    text-align: center;
    padding: 10px 0;
    font-size: 11px;
    color: #4C566A;
    background-color: #E5E9F0;
    border-top: 1px solid #D8DEE9;
    margin-top: 10px;
    flex-shrink: 0;
}


.container {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
}

#dragbar {
    width: 8px;
    background-color: #D8DEE9;
    cursor: col-resize;
    height: 100%;
    flex-shrink: 0;
    position: relative;
}

#dragbar::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#dragbar::before {
    background-image: repeating-linear-gradient(
        to bottom,
        #4C566A,
        #4C566A 2px,
        transparent 2px,
        transparent 6px
    );
}



#dragbar:hover {
    background-color: #81A1C1;
}
#dragbar:hover::before {
    background-image: repeating-linear-gradient(
        to bottom,
        #5E81AC,
        #5E81AC 2px,
        transparent 2px,
        transparent 6px
    );
}




.pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: #E5E9F0;
    border: 1px solid #D8DEE9;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.pane:first-child {
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.03);
}


/* Header */
.pane-title {
    font-weight: bold;
    padding: 10px 0;
    text-align: center;
    background-color: #D8DEE9;
    color: #4C566A;
    border-bottom: 1px solid #ccc;
    flex-shrink: 0;
}

/* Buttons */
.button-group {
    display: flex;
    justify-content: flex-end;
    padding: 8px 10px;
    background-color: #E5E9F0;
    border-bottom: 1px solid #D8DEE9;
    gap: 10px;
    flex-shrink: 0;
}

.button-group button {
    padding: 8px 15px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: #fff;
    border: 1px solid transparent;
}

#inject-sample-button {
    background-color: #A3BE8C;
    border-color: #A3BE8C;
}
#inject-sample-button:hover {
    background-color: #8FBC8F;
}

#clear-button {
    background-color: #BF616A;
    border-color: #BF616A;
}
#clear-button:hover {
    background-color: #B3555F;
}

#copy-button {
    background-color: #5E81AC;
    border-color: #5E81AC;
}
#copy-button:hover {
    background-color: #4C6F99;
}

#save-button {
    background-color: #B48EAD;
    border-color: #B48EAD;
    color: #fff;
}

#save-button:hover {
    background-color: #9F79A0;
}




/* Markdown Editor */
#markdown-editor {
    flex: 1;
    overflow-y: auto;
    position: relative;
    padding: 20px;
    font-size: 15px;
    line-height: 1.6;
    color: #2E3440;
    font-family: 'Fira Code', 'Source Code Pro', monospace;
    background-color: #EDF1F5;
    border: none;
    outline: none;
    border-right: 1px solid #D8DEE9;
    white-space: pre-wrap;
    word-break: break-word;
    tab-size: 4;
    caret-color: #5E81AC;
    scroll-behavior: smooth;
}

#markdown-editor:focus {
    box-shadow: inset 0 0 0 2px #81A1C144;
    background-color: #FFFFFF;
}

#markdown-editor:empty:before {
    content: attr(data-placeholder);
    color: #aaa;
}

#markdown-editor::-webkit-scrollbar {
    width: 8px;
}
#markdown-editor::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
#markdown-editor::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Preview Styling */
#markdown-preview {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: #FFFFFF;
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #2E3440;
    scroll-behavior: smooth;
}

#markdown-preview h1,
#markdown-preview h2,
#markdown-preview h3 {
    color: #3B4252;
    margin-top: 1.2em;
}

#markdown-preview h1 {
    font-size: 1.8em;
    border-bottom: 1px solid #D8DEE9;
    padding-bottom: 0.3em;
}

#markdown-preview h2 {
    font-size: 1.5em;
    border-bottom: 1px solid #D8DEE9;
    padding-bottom: 0.25em;
}

#markdown-preview h3 {
    font-size: 1.2em;
}

#markdown-preview p {
    margin-bottom: 1em;
}

#markdown-preview a {
    color: #5E81AC;
    text-decoration: none;
}
#markdown-preview a:hover {
    text-decoration: underline;
}

#markdown-preview blockquote {
    border-left: 4px solid #D8DEE9;
    padding-left: 15px;
    color: #4C566A;
    background-color: #F1F3F5;
    margin: 1em 0;
    font-style: italic;
}

#markdown-preview pre {
    background-color: #F0F4F8;
    color: #2E3440;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    margin: 1.2em 0;
    font-family: 'Fira Code', 'Source Code Pro', monospace;
    font-size: 0.9em;
    line-height: 1.4;
    white-space: pre;
}

#markdown-preview code {
    background-color: #ECEFF4;
    color: #BF616A;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Fira Code', monospace;
    font-size: 0.9em;
}

#markdown-preview pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
    display: block;
    font-size: 1em;
}

#markdown-preview ul,
#markdown-preview ol {
    margin-left: 20px;
    margin-bottom: 1em;
}
#markdown-preview li {
    margin-bottom: 0.5em;
}

#markdown-preview table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;
    font-size: 0.95em;
}

#markdown-preview th,
#markdown-preview td {
    border: 1px solid #D8DEE9;
    padding: 10px;
    text-align: left;
}

#markdown-preview th {
    background-color: #E5E9F0;
}