1 files changed, 73 insertions, 0 deletions
diff --git a/static/style.css b/static/style.css
index d463876..a2cb765 100644
--- a/static/style.css
+++ b/static/style.css
@@ -193,6 +193,79 @@ textarea {
 
 textarea:focus { border-color: var(--accent-green); box-shadow: 0 0 0 2px var(--badge-green-bg); }
 
+.message-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.message-header label { margin-bottom: 0.4rem; }
+
+.preview-toggle {
+    background: var(--file-label-bg);
+    border: 1px solid var(--field-border);
+    border-radius: 6px;
+    color: var(--label);
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 0.68rem;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    padding: 0.25rem 0.6rem;
+    margin-bottom: 0.5rem;
+    cursor: pointer;
+    transition: border-color 0.2s, color 0.2s;
+}
+
+.preview-toggle:hover { border-color: var(--accent-blue-text); color: var(--accent-blue-text); }
+
+.md-preview {
+    width: 100%;
+    min-height: 160px;
+    max-height: 400px;
+    overflow-y: auto;
+    background: var(--field-bg);
+    border: 1px solid var(--field-border);
+    border-radius: 6px;
+    color: var(--text);
+    font-size: 0.88rem;
+    line-height: 1.6;
+    padding: 0.9rem;
+    margin-bottom: 1.4rem;
+    box-sizing: border-box;
+}
+
+.md-preview .md-empty { color: var(--tagline); font-style: italic; }
+.md-preview h1, .md-preview h2, .md-preview h3 { color: var(--heading); margin: 0.6rem 0 0.4rem; line-height: 1.3; }
+.md-preview h1 { font-size: 1.2rem; }
+.md-preview h2 { font-size: 1.08rem; }
+.md-preview h3 { font-size: 0.98rem; }
+.md-preview p { margin-bottom: 0.7rem; }
+.md-preview p:last-child { margin-bottom: 0; }
+.md-preview ul, .md-preview ol { margin: 0 0 0.7rem 1.4rem; }
+.md-preview blockquote {
+    border-left: 3px solid var(--field-border);
+    color: var(--tagline);
+    margin: 0 0 0.7rem;
+    padding: 0.1rem 0 0.1rem 0.8rem;
+}
+.md-preview code {
+    background: var(--file-label-bg);
+    border-radius: 3px;
+    padding: 0.1rem 0.3rem;
+    font-size: 0.85em;
+}
+.md-preview pre {
+    background: var(--file-label-bg);
+    border: 1px solid var(--field-border);
+    border-radius: 6px;
+    padding: 0.7rem;
+    overflow-x: auto;
+    margin-bottom: 0.7rem;
+}
+.md-preview pre code { background: none; padding: 0; }
+.md-preview a { color: var(--accent-blue-text); }
+.md-preview hr { border: none; border-top: 1px solid var(--field-border); margin: 0.8rem 0; }
+
 .file-section { margin-bottom: 1.8rem; }
 
 .file-label {