Made the header button show/hide work

app/styles/output.css

@@ -0,0 +1,74 @@
+/* Output Section */
+.output {
+    grid-column: 2;
+    grid-row: 1 / 4;
+    border-radius: 2em;
+    background-color: var(--output-background-color);
+    padding: 1em;
+    margin: 1em;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    font-size: 1.2em;
+    overflow-y: auto;
+    margin-bottom: 0;
+    width: 100% -2em;
+    height: 80vh;
+    margin-bottom: 1vh;
+}
+
+#conversation {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    overflow-y: auto;
+    max-height: 80vh;
+    background-color: var(--output-background-color);
+    border-radius: 10px;
+    scroll-behavior: smooth;
+}
+
+/* Message Bubbles */
+.user-message, .ai-message {
+    padding: 10px;
+    border-radius: 10px;
+    margin: 5px 0;
+    max-width: 75%;
+    word-wrap: break-word;
+}
+
+.user-message {
+    background-color: var(--user-message-background-color);
+    align-self: flex-end;
+    color: var(--user-message-text-color);
+}
+
+.ai-message {
+    background-color: var(--ai-message-background-color);
+    align-self: flex-start;
+    color: var(--ai-message-text-color);
+}
+
+/* Button Container */
+.button-container {
+    display: flex;
+    padding: 10px 0;
+}
+
+.button-container button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    background-color: var(--button-background-color);
+    border-radius: 50%;
+    padding: 10px;
+    transition: background-color 0.3s ease;
+}
+
+.button-container button:hover {
+    background-color: var(--button-hover-background-color);
+}
+
+.button-container img {
+    height: 1.5em;
+}