feat(chat.html): Clean up UI

1 files changed, 77 insertions, 41 deletions

diff --git a/src/umapyai/chat.html b/src/umapyai/chat.html
index 5c3508d..c49d837 100644
--- a/src/umapyai/chat.html
+++ b/src/umapyai/chat.html
@@ -6,6 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <style>
+      :root {
+        --radius: 1.5rem; /* 24px */
+        --gap: 0.5rem; /* 8px */
+      }
+
       html,
       body {
         height: 100%;
@@ -14,8 +19,7 @@
       }
 
       body {
-        min-height: 100vh;
-        background: #323232;
+        background: #212121;
         color: #fff;
         font-family:
           system-ui,
@@ -25,50 +29,60 @@
           Roboto,
           "Helvetica Neue",
           Arial,
-          sans‑serif;
+          sans-serif;
         display: flex;
         flex-direction: column;
         height: 100vh;
+        box-sizing: border-box;
       }
 
       input,
       button {
         font-family: inherit;
+        font-size: 1rem;
       }
 
       #chatbox {
-        flex: 1 1 0;
+        flex: 1 1 auto;
         overflow-y: auto;
-        padding: 1em;
-        box-sizing: border-box;
-        max-width: 50vw;
+        padding: var(--gap);
         width: 100%;
+        max-width: 800px;
         margin: 0 auto;
         display: flex;
         flex-direction: column;
-        gap: calc(22px / 2);
-        padding-bottom: 5.5em;
+        gap: var(--gap);
+        padding-bottom: 6rem;
+        box-sizing: border-box;
       }
 
       .bubble {
-        max-width: 50vw;
-        padding: 1em;
-        border-radius: 22px;
-        margin: 0;
+        max-width: 80%;
+        padding: 1rem;
+        border-radius: var(--radius);
         line-height: 1.5;
         white-space: pre-wrap;
+        word-wrap: break-word;
       }
 
       .bubble.user {
-        background: #4d4d4d;
+        background: #303030;
         color: #fff;
-        border-bottom-right-radius: calc(22px / 4);
+        border-bottom-right-radius: var(--gap);
+        align-self: flex-end;
+      }
+
+      .bubble.ai {
+        /* background: #424242; */
+        /* color: #fff; */
+        /* border-bottom-left-radius: var(--gap); */
+        align-self: flex-start;
       }
 
       .source {
-        font-size: 0.95em;
-        color: #cdcdcd;
-        margin-top: 0.5em;
+        font-size: 0.8rem;
+        color: #bdbdbd;
+        margin-top: 0.5rem;
       }
 
       #input-bar {
@@ -76,50 +90,58 @@
         position: fixed;
         left: 0;
         bottom: 0;
-        padding: 1em 0 1em 0;
-        display: flex;
-        justify-content: center;
-        z-index: 100;
+        padding: 1rem;
+        box-sizing: border-box;
+        border-top: 1px solid #3a3a3a;
       }
 
       #prompt-box {
-        max-width: 50vw;
-        width: 100%;
+        max-width: 800px;
+        margin: 0 auto;
         display: flex;
-        gap: calc(22px / 2);
+        gap: var(--gap);
+        align-items: center;
       }
 
       #prompt {
         flex: 1;
-        font-size: 1em;
-        background: #3c3c3c;
+        background: #303030;
         color: #fff;
-        border: 1px solid #505050;
-        border-radius: 22px;
-        padding: 1em;
+        border: 1px solid #3a3a3a;
+        border-radius: var(--radius);
+        padding: 1rem;
         outline: none;
         resize: none;
         box-sizing: border-box;
+        min-height: 50px;
       }
 
       #send-button {
-        font-size: 1em;
         background: #fff;
-        color: #212121;
+        color: #000;
         border: none;
-        border-radius: 22px;
-        padding: 0 22px;
+        border-radius: 50%;
         cursor: pointer;
+        width: 50px;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+
+      #send-button svg {
+        width: 28px;
+        height: 28px;
       }
 
-      @media (max-width: 700px) {
-        #chatbox,
-        #prompt-box {
-          max-width: 90vw;
+      @media (min-width: 768px) {
+        :root {
+          --radius: 28px;
         }
 
-        .bubble {
-          max-width: 90vw;
+        #chatbox {
+          padding-bottom: 7rem;
         }
       }
     </style>
@@ -137,7 +159,21 @@
           autofocus
         />
 
-        <button id="send-button">Send</button>
+        <button id="send-button">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="28"
+            height="28"
+            fill="currentColor"
+            class="bi bi-arrow-up-short"
+            viewBox="0 0 16 16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5"
+            />
+          </svg>
+        </button>
       </div>
     </div>