Refactor model info UI

internal/service/static/css/main.css

@@ -86,8 +86,7 @@ body {
   height: 100dvh;
   max-width: calc(var(--measure) + var(--s3) * 2);
   margin-inline: auto;
-  padding: var(--s0);
-  padding-bottom: 0;
+  padding: 0 var(--s0);
 }
 
 /* ==================== */
@@ -253,21 +252,6 @@ body {
   gap: 0.125rem;
 }
 
-.compose__model {
-  padding: 0 var(--s-1);
-  font-size: 0.7rem;
-  font-family: var(--font-mono);
-  color: var(--color-text-muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1;
-}
-
-.compose__model:empty {
-  display: none;
-}
-
 .compose__attachment {
   display: flex;
   align-items: center;
@@ -352,10 +336,25 @@ body {
 /* ==================== */
 
 .footer {
-  margin-top: var(--s0);
   background: var(--color-bg);
 }
 
+.footer__status {
+  padding: var(--s-2) var(--s-1);
+  font-size: 0.7rem;
+  font-family: var(--font-mono);
+  font-style: italic;
+  color: var(--color-text);
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.footer__status[hidden] {
+  display: none;
+}
+
 .footer__select {
   height: 2rem;
   padding: 0 var(--s-1);
@@ -863,7 +862,6 @@ body {
 @media (max-width: 639px) {
   .container {
     padding: 0;
-    padding-top: var(--s-1);
   }
 
   .chat {
@@ -872,7 +870,6 @@ body {
   }
 
   .footer {
-    margin-top: var(--s-1);
     padding-bottom: 0;
   }