Update light_mode_chatter_owl.css

light_mode_chatter_owl.css

@@ -106,9 +106,78 @@ h1, h2 {
   padding: 16px;
 }
 
+/* TOP CONTROL BAR (for language, goal, focus) */
+.top-control-row .gr-column {
+  min-width: 160px;
+  margin-right: 16px;
+}
+
+.top-control-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+/* AUDIO BOXES SIDE-BY-SIDE */
+.audio-row {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.audio-row .gr-audio {
+  flex: 1;
+  min-width: 300px;
+}
+
+/* CLEANER TEXTBOX WRAPPING */
+.text-columns {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.text-columns .gr-textbox {
+  flex: 1;
+  min-width: 300px;
+}
+
+/* PLACING MODULE CARD STYLES */
+.gr-module-card {
+  background-color: var(--card-bg);
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow);
+  padding: 20px;
+  margin-bottom: 24px;
+}
+
+/* CONSISTENT WIDTH & SPACING */
 #main-column {
   overflow-y: auto;
-  max-height: 80vh;
+  max-height: 85vh;
+  padding-right: 8px;
+}
+
+
+/* Make sure charts and plots don’t overflow */
+.gr-plot, .gr-plot canvas {
+  width: 100% !important;
+  height: auto !important;
+}
+
+/* Optional: tighter header spacing */
+#header h2 {
+  margin-bottom: 0.5em;
+}
+
+/* Optional: lighter shadow feel for cards */
+.gr-box {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+  border-radius: 10px;
+  padding: 16px;
+  margin-bottom: 20px;
 }
 
 @keyframes float {