Changeset 0.17.2 (#77)

src/css/styles.css

@@ -6,7 +6,7 @@
    ========================================== */
 
 :root {
-    /* ── Core palette ────────────────────────── */
+    /* ── Core palette (Dark — default) ────────── */
     --bg:           #0e0e10;
     --bg-surface:   #18181b;
     --bg-raised:    #222227;
@@ -60,6 +60,44 @@
     --banner-fg: transparent;
 }
 
+/* ── Light Theme ─────────────────────────────── */
+[data-theme="light"] {
+    --bg:           #ffffff;
+    --bg-surface:   #f8f9fa;
+    --bg-raised:    #f0f1f3;
+    --bg-hover:     #e8e9ec;
+    --border:       #d5d7db;
+    --border-light: #c0c3c9;
+    --text:         #1a1a2e;
+    --text-2:       #555770;
+    --text-3:       #8b8da3;
+    --accent:       #4a7cdb;
+    --accent-hover: #3968c4;
+    --accent-dim:   rgba(74,124,219,0.10);
+    --danger:       #dc2626;
+    --success:      #16a34a;
+    --warning:      #ca8a04;
+    --purple:       #7c3aed;
+    --purple-dim:   rgba(124,58,237,0.08);
+
+    --text-on-color:   #fff;
+    --text-on-warning: #000;
+
+    --accent-light:  #2563eb;
+    --danger-light:  #dc2626;
+    --success-light: #16a34a;
+    --warning-light: #ca8a04;
+
+    --danger-dim:    rgba(220,38,38,0.10);
+    --success-dim:   rgba(22,163,74,0.10);
+    --warning-dim:   rgba(202,138,4,0.10);
+
+    --overlay:       rgba(0,0,0,0.35);
+    --glass:         rgba(0,0,0,0.02);
+
+    color-scheme: light;
+}
+
 *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 html, body { height: 100%; }
 body { font-family: var(--font); background: var(--bg); color: var(--text); overflow: hidden; font-size: 14px; }
@@ -912,6 +950,27 @@ a:hover { text-decoration: underline; }
 .input-wrap textarea:focus { outline: none; }
 .input-wrap textarea::placeholder { color: var(--text-3); }
 
+/* CM6 chat input — match textarea layout within .input-wrap */
+#messageInputWrap {
+    flex: 1; min-width: 0;
+}
+#messageInputWrap .cm-editor {
+    background: transparent;
+    padding: 12px 0 12px 8px;
+    max-height: 200px;
+    font-family: var(--font);
+    font-size: 14px;
+    line-height: 1.5;
+}
+#messageInputWrap .cm-editor.cm-focused { outline: none; }
+#messageInputWrap .cm-scroller { overflow-y: auto; }
+
+/* CM6 extension editor containers */
+.ext-edit-form .cm-editor {
+    height: 100%;
+    font-size: 12px;
+}
+
 .input-actions { display: flex; align-items: center; gap: 2px; padding: 6px 8px; }
 
 /* Left-side toolbar: attach, tools, KB — single container handles alignment */
@@ -1276,6 +1335,25 @@ select option { background: var(--bg-surface); color: var(--text); }
 .range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); }
 .checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; margin: 0.5rem 0; color: var(--text-2); }
 
+/* ── Theme Toggle ────────────────────────── */
+.theme-toggle {
+    display: flex; gap: 4px; padding: 3px;
+    background: var(--bg); border: 1px solid var(--border);
+    border-radius: var(--radius); width: fit-content;
+}
+.theme-btn {
+    display: flex; align-items: center; gap: 6px;
+    padding: 6px 14px; border-radius: calc(var(--radius) - 2px);
+    border: none; background: none; color: var(--text-3);
+    font-family: var(--font); font-size: 13px; font-weight: 500;
+    cursor: pointer; transition: all var(--transition);
+}
+.theme-btn:hover { color: var(--text); background: var(--bg-hover); }
+.theme-btn.active {
+    color: var(--text); background: var(--bg-raised);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
+}
+
 /* ── Modal ────────────────────────────────── */
 
 .modal-overlay {