app/styles/output.css

@@ -62,7 +62,6 @@
     background-color: var(--button-background-color);
     border-radius: 50%;
     padding: 10px;
-    padding-top: 0;
     transition: background-color 0.3s ease;
 }
 

app/styles/responsive.css

@@ -1,68 +1,76 @@
+/* responsive.css */
+
 /* Responsive behavior - applies only on smaller screens */
 @media (max-width: 1200px) {
-  header li{
-    display: block;
-  }
-
-  .container {
-    display: flex;
-    justify-content: center; /* Centers horizontally */
-    width: 90vw;
-    margin-top: 10vh;
-  }
 
+    /* Left panel as an overlay */
     .left-panel {
-    display: none; /* Initially hidden */
+        margin: 0 auto;
-    min-width: 90%; /* Takes full width when shown */
+        min-width: 100vw;
+        max-width: 100vw;
+        padding: 1em;
+    }
+
+    .left-panel.hidden {
+        width: 0;
+        /* Set width to 0 when hidden */
+        visibility: hidden;
+        /* Fully hide the panel */
         margin: 0;
+        padding: 0;
+        overflow: hidden;
     }
 
-
+    header {
-  .conversation-container {
+        height: 125px;
-      width: 90%;
     }
 
-  .left-panel.visible {
+    header li {
+        flex-direction: column;
         display: block;
+        padding: 2px;
     }
 
-  .conversation-container.collapsed {
+    body {
-      display: none;
+        margin-top: 100px;
     }
 
     .conversation-container.expanded {
-      width: 100%;
+
+        width: 0;
+        /* Set width to 0 when hidden */
+        visibility: hidden;
+        /* Fully hide the panel */
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
     }
 
-  .grid {
+    .conversation-container.collapsed {
-    grid-template-columns: 1fr; /* One item per line */
-  }
-
-  .model-box {
-      max-width: none; /* Remove max-width constraint */
-      margin: 0 auto; /* Center each model-box */
-  }
-
-  .input {
-    grid-column: 1 / -1;
-    flex-direction: row;
-    gap: 10px;
-    padding: 0.5em;
         margin: 0 auto;
-    align-items: center;
+        min-width: 100vw;
-    width: 90%;
+        max-width: 100vw;
+        padding: 1em;
+        margin-left: 0;
+
+    }
 }
 
-  .input input {
+/* Responsive design adjustments */
-      font-size: 1em; /* Adjust font size */
+@media (max-width: 768px) {
-      max-width: 65%;
+  .title {
-      margin-right: 0;
+    font-size: 1.5rem;
   }
 
-  .input button {
+  .subtitle {
-      height: 40px; /* Adjust button height */
+    font-size: 1.25rem;
-      width: 40px; /* Adjust button width */
+  }
-      font-size: 1.2em; /* Adjust button font size */
+
-      margin: auto;
+  .subsection-title {
+    font-size: 1rem;
+  }
+
+  .paragraph {
+    font-size: 0.9rem;
   }
 }