Create styles.css

styles.css

@@ -0,0 +1,218 @@
+/* Import Oswald font - Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
+
+/* HIDE the HTML components that create scrollbars */
+#component-1, #component-2, #component-3 {
+    display: none !important;
+    height: 0 !important;
+    min-height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    visibility: hidden !important;
+}
+
+}
+
+/* Apply Oswald globally */
+*, *::before, *::after {
+    font-family: "Oswald", sans-serif !important;
+    color: #120f0e !important;
+}
+
+.title-header {
+    background-color: rgb(240, 236, 230) !important;
+    padding: 10px 20px;
+    margin: 0 !important;
+    border-bottom: 1pt solid #59524f;
+    text-align: left;
+    flex-shrink: 0 !important;
+    height: 60px !important;
+    display: flex !important;
+    align-items: center !important;
+    width: 100% !important;
+}
+
+.title-header h1 {
+    font-size: 1.5rem;
+    font-weight: 600 !important;
+    color: #120f0e !important;
+    margin: 0;
+    padding: 0;
+}
+
+/* Input controls styling - acts as footer */
+.input-controls {
+    padding: 15px 20px !important;
+    background-color: rgb(240, 236, 230) !important;
+    border-top: 1pt solid #59524f;
+    flex-shrink: 0 !important;
+    width: 100% !important;
+}
+
+/* Main container styling - viewport height with no top margin */
+.gradio-container-5-42-0 {
+    background-color: rgb(240, 236, 230) !important;
+    font-family: "Oswald", sans-serif !important;
+    color: #120f0e !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    height: 100vh !important;
+    max-height: 100vh !important;
+    overflow: hidden !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+/* Target Gradio's internal structure */
+.gradio-container-5-42-0 > div {
+    height: 95% !important;
+    display: flex !important;
+    flex-direction: column !important;
+    padding-top: 0 !important;
+    margin-top: 0 !important;
+}
+
+/* Chat styling - FLEX to fill space */
+.gradio-container-5-42-0 .gradio-chatbot {
+    background-color: #d9d1ce !important;
+    border: 1pt solid #59524f !important;
+    border-radius: 6px !important;
+    padding: 15px !important;
+    flex: 1 !important;              /* Fill all remaining space */
+    min-height: 0 !important;        /* Prevent overflow issues */
+    overflow-y: auto !important;
+    margin: 15px 20px !important;
+}
+
+/* Message styling */
+.gradio-container-5-42-0 .gradio-chatbot .message.bot .markdown {
+    background-color: #f09c7d !important;
+    color: #120f0e !important;
+    border-radius: 8px !important;
+    padding: 12px 16px !important;
+    border: 1pt solid #59524f !important;
+    max-width: 70%;
+    margin-left: 0;
+    margin-right: auto;
+    word-wrap: break-word;
+    font-weight: 400 !important;
+    margin-bottom: 10px !important;
+}
+
+.gradio-container-5-42-0 .gradio-chatbot .message.user .markdown {
+    background-color: #a69189 !important;
+    color: #120f0e !important;
+    border-radius: 8px !important;
+    padding: 12px 16px !important;
+    border: 1pt solid #59524f !important;
+    max-width: 70%;
+    margin-left: auto;
+    margin-right: 0;
+    word-wrap: break-word;
+    font-weight: 400 !important;
+    margin-bottom: 10px !important;
+}
+
+/* Input controls styling */
+.input-controls {
+    padding: 15px 20px !important;
+    background-color: rgb(240, 236, 230) !important;
+    border-top: 1pt solid #59524f;
+    flex-shrink: 0 !important;
+}
+
+.input-textbox textarea {
+    background-color: #f0ece6 !important;
+    border: 1pt solid #59524f !important;
+    border-radius: 6px !important;
+    color: #120f0e !important;
+    font-family: "Oswald", sans-serif !important;
+    padding: 10px !important;
+    resize: none !important;
+}
+
+.input-textbox textarea:focus {
+    border-color: #f09c7d !important;
+    box-shadow: 0 0 0 2px rgba(240, 156, 125, 0.2) !important;
+}
+
+.button-column {
+    margin-left: 10px !important;
+    min-width: 80px !important;
+}
+
+.send-button, .clear-button {
+   border: 1pt solid #59524f !important;
+   border-radius: 6px !important;
+   font-weight: 500 !important;
+   padding: 8px 16px !important;
+   margin-bottom: 5px !important;
+   width: 100% !important;
+}
+
+.send-button {
+   background-color: #f09c7d !important;
+   color: #120f0e !important;
+}
+
+.send-button:hover {
+   background-color: #e8895a !important;
+   border-color: #4a3f3c !important;
+}
+
+.clear-button {
+   background-color: #a69189 !important;
+   color: #120f0e !important;
+}
+
+.clear-button:hover {
+   background-color: #8f7d73 !important;
+   border-color: #4a3f3c !important;
+}
+
+/* Ensure Gradio footer is visible and properly positioned */
+footer.svelte-czcr5b {
+    display: flex !important;
+    visibility: visible !important;
+    position: fixed !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    background-color: rgba(240, 236, 230, 0.95) !important;
+    backdrop-filter: blur(5px) !important;
+    border-top: 1pt solid #59524f !important;
+    padding: 8px 16px !important;
+    z-index: 1000 !important;
+    height: auto !important;
+    min-height: 40px !important;
+}
+
+/* Style the footer buttons to match your theme */
+footer.svelte-czcr5b button {
+    background-color: transparent !important;
+    color: #120f0e !important;
+    border: none !important;
+    font-family: "Oswald", sans-serif !important;
+    font-size: 12px !important;
+}
+
+footer.svelte-czcr5b .divider {
+    color: #59524f !important;
+}
+
+/* Adjust main container to account for footer */
+.main-container {
+    padding-bottom: 50px !important;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .gradio-container-5-42-0 .gradio-chatbot .message.bot .markdown,
+    .gradio-container-5-42-0 .gradio-chatbot .message.user .markdown {
+        max-width: 85%;
+    }
+    
+    .input-controls {
+        padding: 10px !important;
+    }
+}