From b07e776b7aa9ac8ec1da90182fbf752b7ec8c739 Mon Sep 17 00:00:00 2001
From: Meleki <meleki@gott.local>
Date: Fri, 27 Feb 2026 23:39:06 +0100
Subject: [PATCH] Massive style changes

---
 wwwroot/css/base.css          |  41 ++++++----
 wwwroot/css/chat.css          | 145 +++++++++++++++++-----------------
 wwwroot/css/dashboard.css     |  40 +++++-----
 wwwroot/css/file-explorer.css |  32 +++-----
 wwwroot/css/form.css          |  40 +++++-----
 wwwroot/css/main.css          |  19 ++---
 wwwroot/css/markdown.css      |  26 +++---
 wwwroot/css/mobile.css        |   6 ++
 wwwroot/css/nav.css           |  30 ++++---
 wwwroot/css/placeholder.css   |   8 +-
 wwwroot/css/theme.css         |  23 ++++--
 wwwroot/index.html            |  20 ++---
 wwwroot/js/chat.js            |   4 +-
 wwwroot/js/history.js         |   2 +-
 wwwroot/js/pages/chat-page.js |   1 +
 wwwroot/js/ui.js              |  15 +---
 16 files changed, 235 insertions(+), 217 deletions(-)
 create mode 100644 wwwroot/css/mobile.css

diff --git a/wwwroot/css/base.css b/wwwroot/css/base.css
index e1b6d6f..3b3c69f 100644
--- a/wwwroot/css/base.css
+++ b/wwwroot/css/base.css
@@ -1,3 +1,9 @@
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--f3-bg); }
+::-webkit-scrollbar-thumb:hover { background: var(--f3-border); }
+* { scrollbar-width: thin; scrollbar-color: var(--f3-bg) transparent; }
+
 * {
   margin: 0;
   padding: 0;
@@ -12,38 +18,41 @@ body {
   flex-direction: column;
 }
 
-body, input, select, button, textarea {
-  font-family: monospace;
-  font-size: 1em;
-  line-height: 1.5;
+body, button, input, select, textarea {
+  font-family: var(--font);
   color: var(--text);
 }
 
-input {
-  min-width: 0;
+body {
+  font-size: var(--font-size);
 }
 
-input, textarea, select {
-  padding: var(--s2);
-}
-
-h1, h2, h3, h4, h5 {
+button, input, select, textarea, h1, h2, h3, h4, h5 {
   font-size: 1em;
 }
 
-textarea, p {
+h1, h2, h3, h4, h5 {
+  color: var(--text-accent);
+}
+
+body, button, input, select, textarea, p {
   line-height: 1.5;
 }
 
-button, select, input, textarea {
+button, input, select, textarea {
   border: var(--border-width) solid var(--f3-border);
   background: var(--f3-bg);
   outline: none;
+  border-radius: var(--border-radius);
+}
+
+input, select, textarea {
+  padding: var(--input-padding);
 }
 
 button {
   line-height: 1.25;
-  padding: var(--s2) var(--s3);
+  padding: var(--button-padding);
 }
 
 button:not(:disabled) {
@@ -58,6 +67,10 @@ button:disabled {
   opacity: var(--semi-transparent);
 }
 
+input {
+  min-width: 0;
+}
+
 textarea {
   height: 12em;
   min-height: 12em;
diff --git a/wwwroot/css/chat.css b/wwwroot/css/chat.css
index a6158f1..be2b445 100644
--- a/wwwroot/css/chat.css
+++ b/wwwroot/css/chat.css
@@ -1,9 +1,24 @@
+.chat-page .page-content {
+  align-items: stretch;
+}
+
+#chat {
+  flex: 1;
+  overflow-y: auto;
+  padding: 2em 1em 3em;
+  gap: calc(var(--box-spacing) / 2);
+  display: flex;
+  flex-direction: column;
+  background: var(--chat-bg);
+  border-radius: var(--border-radius);
+}
+
 /* Custom Command Buttons */
 
 .custom-cmd-bar {
   display: flex;
-  gap: var(--s2);
-  margin-left: var(--s3);
+  gap: var(--badge-spacing);
+  margin-left: var(--badge-spacing);
   flex-wrap: wrap;
   align-items: center;
 }
@@ -32,9 +47,10 @@
   position: absolute;
   top: 100%;
   right: 0;
-  margin-top: var(--s1);
+  margin-top: .5em;
   background: var(--f3-bg);
   border: var(--border-width) solid var(--f3-border);
+  border-radius: var(--border-radius);
   min-width: 10em;
   z-index: 100;
   display: flex;
@@ -48,7 +64,7 @@
 .header-menu-item {
   border: none;
   text-align: left;
-  padding: var(--s2) var(--s3);
+  padding: var(--menu-item-padding);
   background: none;
   white-space: nowrap;
 }
@@ -58,30 +74,25 @@
   border: none;
 }
 
-.chat-page .page-content > * {
-  width: 1000px;
-}
-
-#chat {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--s4);
-  display: flex;
-  flex-direction: column;
-  gap: var(--s4);
-}
-
 .meta-bar {
-  padding: var(--s2);
+  margin: var(--badge-spacing);
+  padding: var(--box-padding);
   background: var(--f1-bg);
   border-bottom: var(--border-width) solid var(--f1-border);
+  border-radius: var(--border-radius);
   flex-shrink: 0;
-  min-height: 2.5em;
   opacity: var(--semi-transparent);
+  height: 3em;
+  line-height: 1.3;
+}
+
+.msg, .tool-box {
+  border-radius: var(--border-radius);
+  padding: var(--box-padding);
+  max-width: 80%;
 }
 
 .msg {
-  padding: var(--s3) var(--s4);
   white-space: pre-wrap;
   word-break: break-word;
 }
@@ -100,9 +111,8 @@
 
 .msg.system-info {
   align-self: center;
-  border: var(--border-width) solid var(--f2-border);
   text-align: center;
-  padding: var(--s2);
+  border: var(--border-width) solid var(--f2-border);
 }
 
 .msg .cursor {
@@ -124,7 +134,10 @@
   align-self: flex-start;
   background: var(--f1-bg);
   border: var(--border-width) solid var(--f1-border);
-  padding: var(--s3);
+}
+
+.tool-box > * {
+  overflow-x: auto;
 }
 
 .tool-box:has(.tool-box-header) {
@@ -138,21 +151,20 @@
 .tool-box-header {
   display: flex;
   align-items: center;
-  gap: var(--s2);
-  padding: var(--s3);
+  gap: var(--box-spacing);
+  padding: var(--box-padding);
   flex-wrap: wrap;
 }
 
 .tool-error-badge {
-  color: #ff6b6b;
-  border: var(--border-width) solid #ff6b6b;
-  padding: 0 var(--s1);
+  color: var(--dangerous);
+  border: var(--border-width) solid var(--dangerous);
+  padding: var(--box-padding);
 }
 
 /* Diff View */
 
 .tool-diff {
-  font-family: monospace;
   max-height: 16.5em;
   overflow: auto;
 }
@@ -179,28 +191,21 @@
   text-align: center;
   user-select: none;
   border-right: var(--border-width) solid var(--f2-border);
-  margin-right: var(--s2);
+  margin-right: .5em;
 }
 
 .diff-content {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding-right: var(--s2);
-}
-
-.diff-more {
-  padding: var(--s1) var(--s2);
-  opacity: var(--semi-transparent);
-  font-family: monospace;
+  padding-right: .5em;
 }
 
 .tool-result {
   white-space: pre-wrap;
   word-break: break-word;
-  font-family: monospace;
-  padding: var(--s4);
-  max-height: 16em;
+  padding: var(--box-padding);
+  max-height: 16.5em;
   overflow: auto;
 }
 
@@ -210,11 +215,20 @@
 }
 
 .input-area {
-  border-top: var(--border-width) solid var(--f1-border);
   display: flex;
   flex-shrink: 0;
-  gap: var(--s4);
-  padding: var(--s4);
+  align-items: center;
+  margin-bottom: var(--page-spacing);
+  margin-inline: var(--badge-spacing);
+  gap: var(--badge-spacing);
+}
+
+.input-area button {
+  width: 2em;
+  aspect-ratio: 1;
+  padding: 0;
+  line-height: 1;
+  overflow: hidden;
 }
 
 .input-area textarea {
@@ -224,18 +238,10 @@
   overflow: hidden;
 }
 
-.input-area button {
-  align-self: flex-end;
-}
-
-.input-area button:disabled {
-  cursor: not-allowed;
-}
-
 .archive-container {
   display: flex;
   flex-direction: column;
-  gap: var(--s4);
+  gap: var(--box-spacing);
 }
 
 .archived {
@@ -250,11 +256,11 @@
 /* Workspace Refs */
 
 .ref-preview {
-  padding: var(--s2) var(--s4);
   background: var(--f1-bg);
   border-top: var(--border-width) solid var(--f1-border);
   flex-wrap: wrap;
-  gap: var(--s2);
+  padding: var(--box-padding);
+  gap: var(--badge-spacing);
 }
 
 .ref-preview:not([hidden]) {
@@ -264,8 +270,8 @@
 .ref-preview-item {
   display: flex;
   align-items: center;
-  gap: var(--s2);
-  padding: var(--s1) var(--s2);
+  padding: var(--badge-padding);
+  gap: var(--badge-spacing);
   background: var(--f2-bg);
   border: var(--border-width) solid var(--f2-border);
 }
@@ -282,20 +288,22 @@
 
 /* File Upload */
 
-.file-btn {
-  align-self: flex-end;
-}
-
 .file-preview {
-  padding: var(--s2) var(--s4);
+  flex-direction: column;
+  gap: var(--box-spacing);
+  padding: var(--box-padding);
   background: var(--f1-bg);
   border-top: var(--border-width) solid var(--f1-border);
 }
 
+.file-preview:not([hidden]) {
+  display: flex;
+}
+
 .file-preview-inner {
   display: flex;
   align-items: center;
-  gap: var(--s3);
+  gap: var(--box-spacing);
 }
 
 .file-thumb {
@@ -305,10 +313,6 @@
   border: var(--border-width) solid var(--f2-border);
 }
 
-.file-icon {
-  font-size: 2em;
-}
-
 .file-name {
   flex: 1;
   overflow: hidden;
@@ -320,7 +324,6 @@
   background: none;
   border: none;
   cursor: pointer;
-  padding: var(--s1);
   color: var(--text);
   opacity: var(--semi-transparent);
 }
@@ -332,7 +335,7 @@
 /* Attachments in History */
 
 .attachment-indicator {
-  margin-top: var(--s2);
+  margin-top: var(--badge-spacing);
   opacity: var(--semi-transparent);
 }
 
@@ -341,10 +344,10 @@
 }
 
 .attachment-container {
-  margin-top: var(--s2);
+  margin-top: var(--badge-spacing);
   display: flex;
   flex-wrap: wrap;
-  gap: var(--s2);
+  gap: var(--badge-spacing);
 }
 
 .attachment-image {
@@ -357,7 +360,7 @@
 
 .attachment-file {
   display: inline-block;
-  padding: var(--s2) var(--s3);
+  padding: var(--badge-padding);
   background: var(--f2-bg);
   border: var(--border-width) solid var(--f2-border);
   text-decoration: none;
diff --git a/wwwroot/css/dashboard.css b/wwwroot/css/dashboard.css
index ab18750..55e72f7 100644
--- a/wwwroot/css/dashboard.css
+++ b/wwwroot/css/dashboard.css
@@ -1,9 +1,9 @@
 .dashboard .page-content {
-  padding: calc(var(--s4) * 2);
+  padding: var(--page-padding);
 }
 
 .dashboard section {
-  margin-bottom: calc(var(--s4) * 2);
+  margin-bottom: var(--page-spacing);
   width: 100%;
 }
 
@@ -11,13 +11,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: var(--s4);
+  margin-bottom: var(--box-spacing);
 }
 
 .card-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: var(--s4);
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: var(--page-spacing);
 }
 
 .card {
@@ -26,6 +26,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  border-radius: var(--border-radius);
 }
 
 .card.clickable {
@@ -49,20 +50,18 @@
 }
 
 .card-body {
-  padding: var(--s3);
+  padding: var(--box-padding);
   display: flex;
   flex-direction: column;
-  gap: var(--s1);
 }
 
 .card-title-row {
   display: flex;
   align-items: center;
-  gap: var(--s2);
+  gap: var(--badge-spacing);
 }
 
 .card-title {
-  font-weight: bold;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -74,16 +73,16 @@
 }
 
 .badge {
-  padding: var(--s1) var(--s2);
+  padding: var(--badge-padding);
   background: var(--f1-bg);
-  border: var(--border-width) solid var(--f2-border);
+  border: var(--border-width) solid var(--f1-border);
   white-space: nowrap;
   flex-shrink: 0;
 }
 
 #newAgentCard,
 #newSessionCard {
-  margin-top: var(--s4);
+  margin-top: var(--box-spacing);
 }
 
 #newAgentCard .card,
@@ -92,11 +91,16 @@
   justify-content: center;
 }
 
+#newAgentCard .card-body,
+#newSessionCard .card-body {
+  padding: var(--button-padding);
+}
+
 .card-meta {
   display: flex;
   flex-direction: column;
-  gap: var(--s1);
-  margin-top: var(--s1);
+  gap: var(--badge-spacing);
+  margin-top: var(--badge-spacing);
 }
 
 .card-meta:empty {
@@ -109,11 +113,3 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
-.card-workspace {
-  font-family: monospace;
-}
-
-.card-persona {
-  font-style: italic;
-}
diff --git a/wwwroot/css/file-explorer.css b/wwwroot/css/file-explorer.css
index 414c5ed..d5e9e59 100644
--- a/wwwroot/css/file-explorer.css
+++ b/wwwroot/css/file-explorer.css
@@ -13,6 +13,8 @@
 .fe-modal {
   background: var(--f2-bg);
   border: var(--border-width) solid var(--f2-border);
+  border-radius: var(--border-radius);
+  overflow: hidden;
   width: 90vw;
   max-width: 1100px;
   height: 80vh;
@@ -24,7 +26,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--s2) var(--s3);
+  padding: .5em;
   border-bottom: var(--border-width) solid var(--f1-border);
   background: var(--f1-bg);
   flex-shrink: 0;
@@ -33,7 +35,7 @@
 .fe-nav {
   display: flex;
   align-items: center;
-  gap: var(--s2);
+  gap: .5em;
   flex: 1;
   overflow: hidden;
 }
@@ -45,10 +47,6 @@
   white-space: nowrap;
 }
 
-.fe-btn {
-  padding: var(--s1) var(--s2);
-}
-
 .fe-body {
   display: flex;
   flex: 1;
@@ -75,7 +73,7 @@
 }
 
 .fe-item {
-  padding: var(--s1) var(--s3);
+  padding: .5em 1em;
   cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
@@ -100,7 +98,7 @@
 }
 
 .fe-loading, .fe-error, .fe-empty, .fe-placeholder {
-  padding: var(--s4);
+  padding: 1em;
   text-align: center;
   opacity: var(--semi-transparent);
   align-self: center;
@@ -114,21 +112,16 @@
   display: flex;
   flex: 1;
   overflow: hidden;
-  font-size: 0.9em;
 }
 
 .fe-line-numbers {
-  padding: var(--s2);
-  padding-right: var(--s3);
+  padding: .5em;
   background: var(--f1-bg);
   color: var(--text);
   opacity: var(--semi-transparent);
   text-align: right;
   overflow: hidden;
   user-select: none;
-  line-height: 1.5;
-  font-family: monospace;
-  font-size: 1em;
   border-right: var(--border-width) solid var(--f1-border);
   flex-shrink: 0;
   min-width: 3em;
@@ -143,16 +136,15 @@
   border: none;
   background: var(--f2-bg);
   color: var(--text);
-  font-family: monospace;
-  font-size: 1em;
   line-height: 1.5;
-  padding: var(--s2);
+  padding: .5em;
   outline: none;
   overflow-y: auto;
   white-space: pre;
   tab-size: 4;
-  min-height: unset;
   height: auto;
+  min-height: unset;
+  max-height: unset;
 }
 
 .fe-textarea:hover {
@@ -169,11 +161,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--s2) var(--s3);
+  padding: .5em .5em .5em 1em;
   border-top: var(--border-width) solid var(--f1-border);
   background: var(--f1-bg);
   flex-shrink: 0;
-  gap: var(--s3);
+  gap: .5em;
 }
 
 .fe-info {
diff --git a/wwwroot/css/form.css b/wwwroot/css/form.css
index fbf5add..0d4076b 100644
--- a/wwwroot/css/form.css
+++ b/wwwroot/css/form.css
@@ -1,18 +1,23 @@
 .form {
-  padding: calc(var(--s4) * 2);
+  padding: var(--page-padding);
   display: flex;
   flex-direction: column;
-  gap: var(--s3);
+  gap: var(--box-spacing);
+  width: 100%;
 }
 
 .form label {
-  margin-top: var(--s4);
+  margin-top: var(--box-spacing);
+}
+
+#openChatBtn {
+  margin-left: var(--badge-spacing);
 }
 
 .avatar-section {
   display: flex;
   align-items: center;
-  gap: var(--s4);
+  gap: var(--box-spacing);
 }
 
 .avatar-preview {
@@ -23,9 +28,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 2em;
   overflow: hidden;
   flex-shrink: 0;
+  border-radius: var(--border-radius);
 }
 
 .avatar-preview img {
@@ -36,7 +41,7 @@
 
 .input-with-btn {
   display: flex;
-  gap: var(--s2);
+  gap: var(--badge-spacing);
 }
 
 .input-with-btn input {
@@ -45,13 +50,12 @@
 
 .input-addon-btn {
   flex-shrink: 0;
-  font-size: 1.1em;
 }
 
 .form-actions {
   display: flex;
-  gap: var(--s4);
-  margin-top: var(--s4);
+  gap: var(--badge-spacing);
+  margin-top: var(--box-spacing);
 }
 
 /* ── Custom Commands ── */
@@ -59,7 +63,7 @@
 .custom-commands {
   display: flex;
   flex-direction: column;
-  gap: var(--s3);
+  gap: var(--badge-spacing);
 }
 
 .custom-command-item {
@@ -69,7 +73,7 @@
 .custom-command-fields {
   flex: 1;
   display: flex;
-  gap: var(--s2);
+  gap: var(--badge-spacing);
 }
 
 .custom-command-fields .cmd-name {
@@ -81,13 +85,13 @@
 }
 
 .custom-command-item .remove-cmd-btn {
-  margin-left: var(--s2);
-  color: #ff6b6b;
-  border-color: #ff6b6b;
+  margin-left: var(--badge-spacing);
+  color: var(--dangerous);
+  border-color: var(--dangerous);
 }
 
 .custom-command-item .remove-cmd-btn:hover {
-  background: #ff6b6b;
+  background: var(--dangerous);
   color: var(--f1-bg);
 }
 
@@ -96,11 +100,11 @@
 }
 
 .danger-btn {
-  color: #ff6b6b;
-  border-color: #ff6b6b;
+  color: var(--dangerous);
+  border-color: var(--dangerous);
 }
 
 .danger-btn:hover {
-  background: #ff6b6b;
+  background: var(--dangerous);
   color: var(--f1-bg);
 }
diff --git a/wwwroot/css/main.css b/wwwroot/css/main.css
index 2093cbc..d6ec577 100644
--- a/wwwroot/css/main.css
+++ b/wwwroot/css/main.css
@@ -1,9 +1,8 @@
 header {
-  padding: var(--s4) calc(var(--s4) * 2);
-  border-bottom: var(--border-width) solid var(--f1-border);
+  padding: var(--box-padding);
   display: flex;
   align-items: center;
-  gap: var(--s4);
+  gap: var(--box-spacing);
   flex-shrink: 0;
 }
 
@@ -11,6 +10,7 @@ header {
   flex: 1;
   display: flex;
   flex-direction: column;
+  align-items: center;
   overflow: hidden;
 }
 
@@ -19,6 +19,8 @@ header {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  width: var(--page-width);
+  max-width: 100%;
 }
 
 .page-content {
@@ -28,14 +30,3 @@ header {
   overflow-y: auto;
   flex: 1;
 }
-
-.page-content > * {
-  width: 600px;
-  max-width: 100%;
-}
-
-.back-btn {
-  background: none;
-  border: none;
-  padding: var(--s1) var(--s2);
-}
diff --git a/wwwroot/css/markdown.css b/wwwroot/css/markdown.css
index 7db23c9..8955ed1 100644
--- a/wwwroot/css/markdown.css
+++ b/wwwroot/css/markdown.css
@@ -13,7 +13,7 @@
 }
 
 .msg.markdown p {
-  margin: 0 0 var(--s3) 0;
+  margin: 0 0 .5em 0;
 }
 
 .msg.markdown p:last-child {
@@ -26,7 +26,7 @@
 .msg.markdown h4,
 .msg.markdown h5,
 .msg.markdown h6 {
-  margin: var(--s4) 0 var(--s2) 0;
+  margin: 1em 0 .5em 0;
 }
 
 .msg.markdown h1:first-child,
@@ -37,12 +37,12 @@
 
 .msg.markdown ul,
 .msg.markdown ol {
-  margin: 0 0 var(--s3) 0;
+  margin: 0 0 .5em 0;
   padding-left: 1.5em;
 }
 
 .msg.markdown li {
-  margin-bottom: var(--s1);
+  margin-bottom: 1em;
 }
 
 .msg.markdown li:last-child {
@@ -52,14 +52,13 @@
 .msg.markdown code {
   background: var(--f3-bg);
   padding: .1em .3em;
-  font-size: .9em;
 }
 
 .msg.markdown pre {
   background: var(--f3-bg);
   border: var(--border-width) solid var(--f3-border);
-  padding: var(--s3);
-  margin: 0 0 var(--s3) 0;
+  padding: .5em;
+  margin: 0 0 .5em 0;
   overflow-x: auto;
 }
 
@@ -70,13 +69,12 @@
 .msg.markdown pre code {
   background: none;
   padding: 0;
-  font-size: .9em;
 }
 
 .msg.markdown blockquote {
   border-left: 3px solid var(--f3-border);
-  margin: 0 0 var(--s3) 0;
-  padding: var(--s2) var(--s3);
+  margin: 0 0 .5em 0;
+  padding: .5em;
   opacity: var(--semi-transparent);
 }
 
@@ -87,12 +85,12 @@
 .msg.markdown hr {
   border: none;
   border-top: var(--border-width) solid var(--f3-border);
-  margin: var(--s3) 0;
+  margin: .5em 0;
 }
 
 .msg.markdown table {
   border-collapse: collapse;
-  margin: 0 0 var(--s3) 0;
+  margin: 0 0 .5em 0;
   width: 100%;
 }
 
@@ -103,7 +101,7 @@
 .msg.markdown th,
 .msg.markdown td {
   border: var(--border-width) solid var(--f3-border);
-  padding: var(--s2) var(--s3);
+  padding: .5em;
   text-align: left;
 }
 
@@ -121,5 +119,5 @@
 }
 
 .msg.markdown input[type="checkbox"] {
-  margin-right: var(--s2);
+  margin-right: .5em;
 }
diff --git a/wwwroot/css/mobile.css b/wwwroot/css/mobile.css
new file mode 100644
index 0000000..69d7c93
--- /dev/null
+++ b/wwwroot/css/mobile.css
@@ -0,0 +1,6 @@
+/* === Mobile === */
+@media (max-width: 768px) {
+  .msg, .tool-box {
+    max-width: 100%;
+  }
+}
diff --git a/wwwroot/css/nav.css b/wwwroot/css/nav.css
index b9d32ca..c7c3ac6 100644
--- a/wwwroot/css/nav.css
+++ b/wwwroot/css/nav.css
@@ -1,28 +1,40 @@
 #nav {
-  padding: var(--s3) calc(var(--s4) * 1.5);
   border-bottom: var(--border-width) solid var(--f2-border);
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.nav-content {
   display: flex;
   align-items: center;
-  gap: calc(var(--s4) * 2);
-  flex-shrink: 0;
+  gap: var(--page-spacing);
+  width: var(--page-width);
+  max-width: 100%;
+  padding: var(--box-padding);
+}
+
+.nav-brand,
+.nav-link {
+  padding: var(--badge-padding);
+  color: var(--text);
+  border-bottom: 2px solid transparent;
 }
 
 .nav-links {
   display: flex;
-  gap: var(--s4);
+  gap: var(--box-spacing);
 }
 
 .nav-link {
   text-decoration: none;
-  padding: var(--s1) var(--s2);
-  color: var(--text);
 }
 
 .nav-link:hover {
-  color: var(--text);
+  color: var(--text-accent);
 }
 
 .nav-link.active {
-  color: var(--text);
-  border-bottom: 2px solid var(--primary);
+  color: var(--text-accent);
+  border-bottom-color: var(--primary);
 }
diff --git a/wwwroot/css/placeholder.css b/wwwroot/css/placeholder.css
index f646bf2..eb96cff 100644
--- a/wwwroot/css/placeholder.css
+++ b/wwwroot/css/placeholder.css
@@ -2,10 +2,6 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: var(--s2);
-  padding: calc(var(--s4) * 2);
-}
-
-.settings-page .placeholder-icon {
-  font-size: 4em;
+  gap: var(--box-spacing);
+  padding: var(--page-padding);
 }
diff --git a/wwwroot/css/theme.css b/wwwroot/css/theme.css
index d4d84b8..8b485f9 100644
--- a/wwwroot/css/theme.css
+++ b/wwwroot/css/theme.css
@@ -1,17 +1,30 @@
 :root {
-  --text: #eee;
+  --text: #ddd;
+  --text-accent: #fff;
   --primary: #b41;
   --secondary: #4a1;
+  --dangerous: #f66;
+  --warning: #fa0;
   --f1-bg: #111;
   --f1-border: #333;
   --f2-bg: #222;
   --f2-border: #444;
   --f3-bg: #333;
   --f3-border: #555;
-  --s1: .25em;
-  --s2: .5em;
-  --s3: .75em;
-  --s4: 1em;
+  --chat-bg: #1c1c1c;
   --border-width: 1px;
   --semi-transparent: 0.6;
+  --font: sans-serif;
+  --font-size: .85em;
+  --border-radius: .5em;
+  --page-padding: 2em;
+  --page-spacing: 2em;
+  --box-padding: .75em 1em;
+  --box-spacing: 1em;
+  --input-padding: .45em .7em;
+  --button-padding: .45em .8em;
+  --badge-padding: .2em .6em;
+  --badge-spacing: .5em;
+  --menu-item-padding: .5em .75em;
+  --page-width: 900px;
 }
diff --git a/wwwroot/index.html b/wwwroot/index.html
index 7047746..d6ff8c4 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -15,14 +15,17 @@
   <link rel="stylesheet" href="css/placeholder.css">
   <link rel="stylesheet" href="css/file-explorer.css">
   <link rel="stylesheet" href="css/markdown.css">
+  <link rel="stylesheet" href="css/mobile.css">
 </head>
 <body>
 
 <nav id="nav">
-  <div class="nav-brand">// gott</div>
-  <div class="nav-links">
-    <a href="#" data-page="dashboard" class="nav-link active">Dashboard</a>
-    <a href="#" data-page="settings" class="nav-link">Einstellungen</a>
+  <div class="nav-content">
+    <div class="nav-brand">// gott</div>
+    <div class="nav-links">
+      <a href="#" data-page="dashboard" class="nav-link active">Dashboard</a>
+      <a href="#" data-page="settings" class="nav-link">Einstellungen</a>
+    </div>
   </div>
 </nav>
 
@@ -149,10 +152,10 @@
       <div id="refPreview" class="ref-preview" hidden></div>
       <div class="input-area">
         <input type="file" id="fileInput" accept="image/jpeg,image/png,image/gif,image/webp,application/pdf" multiple hidden>
-        <button id="explorerBtn" class="file-btn" title="Workspace durchsuchen">📂</button>
         <button id="fileBtn" class="file-btn" title="Datei anhängen">📎</button>
-        <textarea id="input" placeholder="Nachricht eingeben... (Ctrl+Enter)" rows="1"></textarea>
-        <button id="send">Senden</button>
+        <button id="explorerBtn" class="file-btn" title="Workspace durchsuchen">📂</button>
+        <textarea id="input" placeholder="Nachricht..." rows="1"></textarea>
+        <button id="send">→</button>
       </div>
     </div>
   </div>
@@ -165,8 +168,7 @@
       <h1>Einstellungen</h1>
     </header>
     <div class="page-content placeholder">
-      <div class="placeholder-icon">⚙️</div>
-      <h2>Einstellungen</h2>
+      <h2>⚙️ Einstellungen</h2>
       <p>Hier können diverse Einstellungen getroffen werden.</p>
     </div>
   </div>
diff --git a/wwwroot/js/chat.js b/wwwroot/js/chat.js
index ce144d7..b16611f 100644
--- a/wwwroot/js/chat.js
+++ b/wwwroot/js/chat.js
@@ -65,10 +65,10 @@ async function sendMessage() {
   addUserBubble(bubbleText, true);
 
   input.value = '';
-  input.style.height = 'auto';
+  input.dispatchEvent(new Event('input'))
   btn.disabled = true;
   isStreaming = true;
-  setMetaHtml('<span style="color:#7c83ff">⏳ Streaming...</span>');
+  setMetaHtml('<span>⏳ Streaming...</span>');
 
   let fullText = '';
   let currentToolBox = null;
diff --git a/wwwroot/js/history.js b/wwwroot/js/history.js
index 53a4104..564e233 100644
--- a/wwwroot/js/history.js
+++ b/wwwroot/js/history.js
@@ -148,7 +148,7 @@ async function loadLatestArchive() {
           }
           case 'error':
             div.className = 'msg system-info archived';
-            div.style.color = '#ff6b6b';
+            div.style.color = 'var(--dangerous)';
             div.textContent = (msg.content || '').trim();
             break;
           default:
diff --git a/wwwroot/js/pages/chat-page.js b/wwwroot/js/pages/chat-page.js
index 886863f..cfd40ed 100644
--- a/wwwroot/js/pages/chat-page.js
+++ b/wwwroot/js/pages/chat-page.js
@@ -70,6 +70,7 @@ registerPage('chat', {
         this.style.height = 'auto';
         this.style.height = Math.min(this.scrollHeight, 150) + 'px';
       });
+      inputEl.dispatchEvent(new Event('input'))
     }
 
     // Workspace Explorer
diff --git a/wwwroot/js/ui.js b/wwwroot/js/ui.js
index e7f6485..7da3989 100644
--- a/wwwroot/js/ui.js
+++ b/wwwroot/js/ui.js
@@ -52,7 +52,7 @@ function addErrorBubble(text, streamed = false) {
   const div = document.createElement('div');
   div.className = 'msg system-info';
   if (streamed) div.classList.add('streamed');
-  div.style.color = '#ff6b6b';
+  div.style.color = 'var(--dangerous)';
   div.textContent = (text || '').trim();
   chatEl().appendChild(div);
   scrollDown();
@@ -62,7 +62,7 @@ function addWarningBubble(text, streamed = false) {
   const div = document.createElement('div');
   div.className = 'msg system-info';
   if (streamed) div.classList.add('streamed');
-  div.style.color = '#f0a500';
+  div.style.color = 'var(--warning)';
   div.textContent = (text || '').trim();
   chatEl().appendChild(div);
   scrollDown();
@@ -243,13 +243,11 @@ function buildEditDiff(oldText, newText) {
 
 function buildWritePreview(content) {
   const lines = content.split('\n');
-  const maxLines = 20;
-  const shown = lines.slice(0, maxLines);
 
   const container = document.createElement('div');
   container.className = 'tool-diff';
 
-  for (const line of shown) {
+  for (const line of lines) {
     const row = document.createElement('div');
     row.className = 'diff-line diff-added';
     const marker = document.createElement('span');
@@ -263,13 +261,6 @@ function buildWritePreview(content) {
     container.appendChild(row);
   }
 
-  if (lines.length > maxLines) {
-    const more = document.createElement('div');
-    more.className = 'diff-more';
-    more.textContent = '… ' + (lines.length - maxLines) + ' weitere Zeilen';
-    container.appendChild(more);
-  }
-
   return container;
 }