Update static/style.css

static/style.css

@@ -12,6 +12,7 @@
   --visual_green: #d7d9ae;
   --aqua: #689d6a;
 }
+
 .dark {
   --bg0: #32302f;
   --bg1: #3c3836;
@@ -27,17 +28,32 @@
 }
 
 /* Base Styling */
+html, body {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
 body {
   background-color: var(--bg0);
   color: var(--fg0);
 }
-input, button, #chatContainer {
+
+body > .main-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+input, button {
   background-color: var(--bg1);
   color: var(--fg0);
 }
+
 input::placeholder {
   color: var(--fg1);
 }
+
 button {
   background-color: var(--blue) !important;
   color: var(--fg1) !important;
@@ -47,6 +63,7 @@ button {
   transition: background-color 0.3s;
   border: none;
 }
+
 button:hover {
   background-color: var(--purple) !important;
   color: var(--fg0) !important;
@@ -61,12 +78,15 @@ button:hover {
   flex-direction: column;
   gap: 1rem;
 }
+
 #configPanel > h2 {
   text-align: center;
 }
+
 #configPanel .grid {
   justify-items: center;
 }
+
 .model-zone {
   display: flex;
   flex-direction: column;
@@ -80,14 +100,17 @@ button:hover {
 #configPanel.minimal .options {
   display: none !important;
 }
+
 #configPanel.minimal .model-name {
   display: inline-block;
   font-weight: bold;
   margin-top: 0.25rem;
 }
+
 #configPanel.minimal .loader {
   display: none;
 }
+
 #configPanel.minimal .model-zone.loading .loader {
   display: flex;
   justify-content: center;
@@ -99,12 +122,15 @@ button:hover {
 #configPanel.expanded .model-dropdown {
   display: block;
 }
+
 #configPanel.expanded .model-name {
   display: none;
 }
+
 #configPanel.expanded .loader {
   display: none;
 }
+
 #configPanel.expanded .model-zone.loading .loader {
   display: flex;
   justify-content: center;
@@ -119,6 +145,7 @@ button:hover {
   border-radius: 0.5rem;
   cursor: pointer;
 }
+
 .options {
   position: absolute;
   top: 100%;
@@ -134,14 +161,17 @@ button:hover {
   overflow-y: auto;
   display: none;
 }
+
 .options.show {
   display: block;
 }
+
 .options div {
   padding: 0.5rem;
   text-align: center;
   cursor: pointer;
 }
+
 .options div:hover {
   background-color: var(--blue);
   color: var(--fg1);
@@ -152,15 +182,18 @@ button:hover {
 .options::-webkit-scrollbar {
   width: 8px;
 }
+
 .options::-webkit-scrollbar-track {
   background-color: var(--bg-statusline1);
   border-radius: 0.25rem;
 }
+
 .options::-webkit-scrollbar-thumb {
   background-color: #665c54;
   border-radius: 4px;
   border: 2px solid var(--bg-statusline1);
 }
+
 .options::-webkit-scrollbar-thumb:hover {
   background-color: #7c6f64;
 }
@@ -174,6 +207,7 @@ button:hover {
   gap: 4px;
   margin-top: 4px;
 }
+
 .dot {
   width: 8px;
   height: 8px;
@@ -181,12 +215,15 @@ button:hover {
   border-radius: 50%;
   animation: bounce 1.4s infinite ease-in-out both;
 }
+
 .dot:nth-child(2) {
   animation-delay: 0.15s;
 }
+
 .dot:nth-child(3) {
   animation-delay: 0.3s;
 }
+
 @keyframes bounce {
   0%, 80%, 100% { transform: scale(0); }
   40% { transform: scale(1); }
@@ -200,13 +237,49 @@ footer {
   color: var(--fg1);
   opacity: 0.7;
 }
-/* Chat */
+
+/* Chat Scrollable Container */
 #chatContainer {
-  position: relative;
-  z-index: 0;
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+  background-color: var(--bg1);
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  height: 100%;
 }
 
-#chatContainer > div {
+/* Message Alignment */
+.message-wrapper {
+  display: flex;
+  width: 100%;
+}
+
+.message-wrapper.user {
+  justify-content: flex-end;
+}
+
+.message-wrapper.bot {
+  justify-content: flex-start;
+}
+
+.message-bubble {
+  max-width: 80%;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
   white-space: pre-wrap;
   word-break: break-word;
 }
+
+.user .message-bubble {
+  background-color: var(--blue);
+  color: var(--fg0);
+}
+
+.bot .message-bubble {
+  background-color: var(--green);
+  color: var(--fg0);
+}