1 files changed, 53 insertions, 15 deletions

diff --git a/main.html b/main.html
index 804c8e4..c642891 100644
--- a/main.html
+++ b/main.html
@@ -27,13 +27,13 @@
             background-color: var(--bg-color);
             color: var(--text-color);
             font-family: var(--font-primary);
-            font-size: 16px;
+            font-size: var(--term-font-size, 16px);
             height: 100vh;
             display: flex;
             flex-direction: column;
             overflow: hidden;
         }
-        @media (max-width: 600px) { body { font-size: 12px; } }
+        @media (max-width: 600px) { body { font-size: var(--term-font-size, 12px); } }
         header {
             border-bottom: 1px solid var(--border-color);
             padding: 10px;
@@ -378,23 +378,61 @@
         #ollama-stream-toggle:checked + #ollama-stream-slider {
             border-color: var(--success-color);
         }
-        .copy-btn {
-            position: absolute;
-            top: 5px;
-            right: 5px;
-            background: rgba(0, 0, 0, 0.5);
+        /* ── Card Layout Styles ── */
+        .msg-card {
+            margin-bottom: 8px;
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            overflow: hidden;
+            background: var(--bg-secondary);
+        }
+        .msg-card.user { border-left: 3px solid var(--success-color); }
+        .msg-card.ai { border-left: 3px solid var(--ai-text-color); background: var(--ai-bg-color); }
+        .msg-card.system { border-left: 3px solid var(--text-muted); }
+        .msg-card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 6px 10px;
+            border-bottom: 1px solid var(--border-color);
+            background: var(--bg-tertiary);
+        }
+        .msg-role { font-weight: bold; font-size: 0.85em; white-space: nowrap; }
+        .msg-buttons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
+        .msg-card-body {
+            padding: 10px;
+            white-space: pre-wrap;
+            word-break: break-word;
+            line-height: 1.4;
+            font-size: 0.9em;
+        }
+        .card-btn {
+            display: inline-flex;
+            padding: 4px 12px;
+            font-size: 0.75em;
+            font-family: inherit;
+            background: var(--bg-tertiary);
             border: 1px solid var(--border-color);
             color: var(--text-muted);
-            font-size: 0.7em;
-            padding: 2px 6px;
+            border-radius: 4px;
             cursor: pointer;
-            border-radius: 3px;
-            font-family: sans-serif;
+            touch-action: manipulation;
+            transition: background 0.15s;
+            white-space: nowrap;
+            line-height: 1.4;
         }
-        .copy-btn:hover {
-            color: var(--text-color);
-            background: rgba(0, 255, 0, 0.1);
+        .card-btn:hover, .card-btn:active { background: var(--accent-color); color: var(--bg-color); }
+        .msg-card.ai .ai-render-container {
+            margin: 0;
+            border: 1px solid var(--border-color);
+        }
+        .msg-card.ai .ai-content {
+            display: inline;
+        }
+        .msg-card.system .msg-card-body {
+            color: inherit;
         }
+        /* ── End Card Layout ── */
         .ai-render-container {
             margin: 10px 0;
             border-radius: 6px;
@@ -1057,7 +1095,7 @@
     </script>
 
     <!-- Async dependency-ordered module loader (replaces 26 synchronous script tags) -->
-    <script src="modules/core/module-loader.js?v=35"></script>
+    <script src="modules/core/module-loader.js?v=39"></script>
 
 </body>
 </html>