Massive style changes

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);
 }