fix UI

static/styles.css

@@ -1,824 +1,860 @@
 /* Base Variables */
 :root {
-    --primary: #FF7D1E;
-    --primary-light: #FFF8F2;
-    --primary-selected: #FFE8D5;
-    --accent: #6B7280;
-    --text-dark: #333333;
-    --text-medium: #666666;
-    --border-light: #E6E6E6;
-    --background-light: #F9F9F9;
-    --background-main: #FFFFFF;
-    --highlight: #FFFBEB;
-    --model-a-color: #92B4F4;
-    --model-b-color: #F8ADA7;
-    --query-background: #F0F7FF;
-    --query-border: #D1E3F8;
-    --query-text: #2E5AAC;
-    --insufficient-alert-bg: #fff0f0;
-    --insufficient-alert-border: #f78989;
-    --insufficient-alert-text: #b92020;
-  }
-  
-  /* Dark Mode */
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --primary: #FF9542;
-      --primary-light: #3D3026;
-      --primary-selected: #4D3927;
-      --accent: #9CA3AF;
-      --text-dark: #E6E6E6;
-      --text-medium: #BBBBBB;
-      --border-light: #444444;
-      --background-light: #2A2A2A;
-      --background-main: #1A1A1A;
-      --highlight: #3D3825;
-      --model-a-color: #5A85C7;
-      --model-b-color: #C47A74;
-      --query-background: #2A3F5C;
-      --query-border: #3A5277;
-      --query-text: #A9C2E8;
-      --insufficient-alert-bg: #3D2525;
-      --insufficient-alert-border: #913F3F;
-      --insufficient-alert-text: #FF8A8A;
-    }
-  }
-  
-  /* Global Styles */
-  body, .gradio-container {
-    background-color: var(--background-main);
-    font-size: 15px;
-    overflow-x: hidden !important;
-    color: var(--text-dark);
-  }
-  
-  /* Common Resets */
-  .gradio-container {
-    padding: 0 !important;
-  }
-  
-  .gradio-column > *, .gradio-row > *, 
-  .gradio-markdown, .gradio-markdown p {
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-    padding-top: 0 !important;
-    padding-bottom: 0 !important;
-  }
-  
-  .gradio-markdown p {
-    margin-bottom: 0.5em !important;
-  }
-  
-  .gradio-row {
-    overflow: visible !important;
-  }
-  
-  /* Tab Navigation */
-  .tabs {
-    margin-top: 0 !important;
-  }
-  
-  .tab-nav {
-    background-color: var(--background-light) !important;
-    padding: 5px 10px !important;
-    border-radius: 8px 8px 0 0 !important;
-    border-bottom: 1px solid var(--border-light) !important;
-  }
-  
-  .tab-nav button {
-    font-size: 1.1em !important;
-    font-weight: 600 !important;
-    padding: 10px 25px !important;
-    margin: 0 5px !important;
-    border-radius: 6px 6px 0 0 !important;
-    border: none !important;
-    background-color: transparent !important;
-    color: var(--text-medium) !important;
-    transition: all 0.3s ease !important;
-  }
-  
-  .tab-nav button.selected {
-    background-color: var(--background-main) !important;
-    color: var(--primary) !important;
-    border-bottom: 2px solid var(--primary) !important;
-  }
-  
-  .tab-nav button:hover:not(.selected) {
-    background-color: rgba(255, 255, 255, 0.1) !important;
-    color: var(--text-dark) !important;
-  }
-  
-  .tabitem {
-    border: none !important;
-  }
-  
-  /* Common Typography */
-  h1 {
-    font-size: 1.6em !important;
-    color: var(--primary) !important;
-    margin: 10px 0 5px 0 !important;
-    padding: 0 !important;
-  }
-  
-  h3, 
-  .section-heading {
-    font-size: 1.2em !important;
-    font-weight: 600 !important;
-    margin: 5px 0 2px 0 !important;
-    padding: 0 !important;
-    color: var(--text-dark) !important;
-  }
-  
-  .orange-title {
-    color: var(--primary) !important;
-    font-weight: bold !important;
-  }
-  
-  /* Common Dividers */
-  hr {
-    margin: 5px 0 !important;
-    border: none !important;
-    height: 1px !important;
-    background-color: var(--border-light) !important;
-  }
-  
-  .results-reveal-area hr {
-    margin: 25px 0 20px 0 !important;
-    width: 100% !important;
-  }
-  
-  /* Query Section */
-  #query-title-row {
-    margin: 0 !important;
-    display: flex !important;
-    align-items: center !important;
-    overflow: visible !important;
-    min-height: 40px !important;
-    white-space: normal !important;
+  --primary: #FF7D1E;
+  --primary-light: #FFF8F2;
+  --primary-selected: #FFE8D5;
+  --accent: #6B7280;
+  --text-dark: #333333;
+  --text-medium: #666666;
+  --border-light: #E6E6E6;
+  --background-light: #F9F9F9;
+  --background-main: #FFFFFF;
+  --highlight: #FFFBEB;
+  --model-a-color: #92B4F4;
+  --model-b-color: #F8ADA7;
+  --query-background: #F0F7FF;
+  --query-border: #D1E3F8;
+  --query-text: #2E5AAC;
+  --insufficient-alert-bg: #fff0f0;
+  --insufficient-alert-border: #f78989;
+  --insufficient-alert-text: #b92020;
+}
+
+/* Dark Mode */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --primary: #FF9542;
+    --primary-light: #3D3026;
+    --primary-selected: #4D3927;
+    --accent: #9CA3AF;
+    --text-dark: #E6E6E6;
+    --text-medium: #BBBBBB;
+    --border-light: #444444;
+    --background-light: #2A2A2A;
+    --background-main: #1A1A1A;
+    --highlight: #3D3825;
+    --model-a-color: #5A85C7;
+    --model-b-color: #C47A74;
+    --query-background: #2A3F5C;
+    --query-border: #3A5277;
+    --query-text: #A9C2E8;
+    --insufficient-alert-bg: #3D2525;
+    --insufficient-alert-border: #913F3F;
+    --insufficient-alert-text: #FF8A8A;
+  }
+}
+
+/* Global Styles */
+body, .gradio-container {
+  background-color: var(--background-main);
+  font-size: 15px;
+  overflow-x: hidden !important;
+  color: var(--text-dark);
+}
+
+/* Common Resets */
+.gradio-container {
+  padding: 0 !important;
+}
+
+.gradio-column > *, .gradio-row > *, 
+.gradio-markdown, .gradio-markdown p {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.gradio-markdown p {
+  margin-bottom: 0.5em !important;
+}
+
+.gradio-row {
+  overflow: visible !important;
+}
+
+/* Tab Navigation */
+.tabs {
+  margin-top: 0 !important;
+}
+
+.tab-nav {
+  background-color: var(--background-light) !important;
+  padding: 5px 10px !important;
+  border-radius: 8px 8px 0 0 !important;
+  border-bottom: 1px solid var(--border-light) !important;
+}
+
+.tab-nav button {
+  font-size: 1.1em !important;
+  font-weight: 600 !important;
+  padding: 10px 25px !important;
+  margin: 0 5px !important;
+  border-radius: 6px 6px 0 0 !important;
+  border: none !important;
+  background-color: transparent !important;
+  color: var(--text-medium) !important;
+  transition: all 0.3s ease !important;
+}
+
+.tab-nav button.selected {
+  background-color: var(--background-main) !important;
+  color: var(--primary) !important;
+  border-bottom: 2px solid var(--primary) !important;
+}
+
+.tab-nav button:hover:not(.selected) {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  color: var(--text-dark) !important;
+}
+
+.tabitem {
+  border: none !important;
+}
+
+/* Common Typography */
+h1 {
+  font-size: 1.6em !important;
+  color: var(--primary) !important;
+  margin: 10px 0 5px 0 !important;
+  padding: 0 !important;
+}
+
+h3, 
+.section-heading {
+  font-size: 1.2em !important;
+  font-weight: 600 !important;
+  margin: 5px 0 2px 0 !important;
+  padding: 0 !important;
+  color: var(--text-dark) !important;
+}
+
+.orange-title {
+  color: var(--primary) !important;
+  font-weight: bold !important;
+}
+
+/* Common Dividers */
+hr {
+  margin: 5px 0 !important;
+  border: none !important;
+  height: 1px !important;
+  background-color: var(--border-light) !important;
+}
+
+.results-reveal-area hr {
+  margin: 25px 0 20px 0 !important;
+  width: 100% !important;
+}
+
+/* Query Section */
+#query-title-row {
+  margin: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  overflow: visible !important;
+  min-height: 40px !important;
+  white-space: normal !important;
+}
+
+#query-title-row h3 {
+  margin: 0 !important;
+  padding: 0 !important;
+  line-height: 1.3 !important;
+  flex-grow: 0 !important;
+  flex-shrink: 0 !important;
+  white-space: normal !important;
+  overflow: visible !important;
+  width: auto !important;
+  display: inline-block !important;
+}
+
+#query-container {
+  display: flex !important;
+  align-items: stretch !important;
+  gap: 10px !important;
+  overflow: visible !important;
+}
+
+.query-box-row {
+  background-color: var(--query-background) !important;
+  padding: 12px 15px !important;
+  border-radius: 6px !important;
+  border: 1px solid var(--query-border) !important;
+  margin: 0 !important;
+  align-items: flex-start !important;
+  flex: 1 1 70% !important;
+  max-width: 70% !important;
+  overflow: visible !important;
+  display: flex !important;
+  min-height: 50px !important;
+  height: auto !important;
+}
+
+.query-text {
+  padding: 0 !important;
+  margin: 0 !important;
+  background-color: transparent !important;
+  border: none !important;
+  overflow: visible !important;
+  width: 100% !important;
+  display: block !important;
+}
+
+.query-text p {
+  font-size: 1.2em !important;
+  font-weight: 600 !important;
+  color: var(--query-text) !important;
+  line-height: 1.4 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  background-color: transparent !important;
+  border: none !important;
+  overflow-wrap: break-word !important;
+  word-wrap: break-word !important;
+  word-break: normal !important;
+  hyphens: auto !important;
+  white-space: normal !important;
+  overflow: visible !important;
+}
+
+/* Buttons */
+.query-button, 
+.context-toggle-button {
+  background-color: var(--background-light) !important;
+  color: var(--text-medium) !important;
+  border: 1px solid var(--border-light) !important;
+  border-radius: 6px !important;
+  font-weight: 500 !important;
+  transition: all 0.2s ease !important;
+}
+
+.query-button {
+  padding: 0 20px !important;
+  flex: 0 0 auto !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  font-size: 0.95em !important;
+  min-height: 50px !important;
+  white-space: nowrap !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
+}
+
+.context-toggle-button {
+  padding: 5px 10px !important;
+  font-size: 0.85em !important;
+  height: 30px !important;
+  line-height: 1 !important;
+  width: auto !important;
+  min-width: 0 !important;
+  max-width: 150px !important;
+  margin: 0 !important;
+  cursor: pointer !important;
+}
+
+.query-button:hover, 
+.context-toggle-button:hover {
+  background-color: var(--primary-light) !important;
+  color: var(--primary) !important;
+  border-color: var(--primary) !important;
+}
+
+/* Action Buttons */
+#submit-button,
+#try-another-btn {
+  background-color: var(--primary) !important;
+  color: white !important;
+  padding: 12px 30px !important;
+  border-radius: 6px !important;
+  font-weight: 600 !important;
+  font-size: 1.2em !important;
+  transition: all 0.2s ease !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
+  border: none !important;
+}
+
+#submit-button {
+  margin-top: 15px !important;
+}
+
+#try-another-btn {
+  width: 100% !important;
+  max-width: 100% !important;
+  margin: 10px auto !important;
+  display: block !important;
+}
+
+#submit-button:hover,
+#try-another-btn:hover {
+  background-color: #E56E0F !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
+}
+
+.control-buttons button {
+  margin: 0 10px !important;
+  font-size: 1em !important;
+  border-radius: 6px !important;
+  padding: 8px 16px !important;
+  transition: all 0.2s ease !important;
+}
+
+/* Context Section */
+.context-description {
+  background-color: transparent !important;
+  font-style: normal !important;
+  color: var(--text-medium) !important;
+  font-size: 1.05em !important;
+}
+
+.context-topic {
+  display: inline-flex !important;
+  align-items: center !important;
+  background-color: transparent !important;
+  padding: 0 !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}
+
+.topic-label {
+  font-weight: 600 !important;
+  color: var(--text-medium) !important;
+  margin-right: 6px !important;
+}
+
+#context-header-row {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+}
+
+.context-title {
+  margin: 0 !important;
+  padding: 0 !important;
+  font-size: 1.2em !important;
+  font-weight: 600 !important;
+  color: var(--text-dark) !important;
+}
+
+.context-items-container {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.context-item {
+  border: 1px solid var(--border-light);
+  background-color: var(--background-light);
+  padding: 12px;
+  border-radius: 6px;
+  margin-bottom: 8px;
+  font-size: 1em;
+  line-height: 1.5;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+.primary-context {
+  border-left: 3px solid var(--model-a-color) !important;
+}
+
+.chunk-header {
+  font-weight: 600;
+  color: var(--query-text);
+  margin-bottom: 8px;
+  padding-bottom: 5px;
+  border-bottom: 1px solid var(--query-border);
+}
+
+.highlight {
+  background-color: #FFECB3 !important;
+  padding: 0.1em 0.3em !important;
+  border-radius: 3px !important;
+  font-weight: 600 !important;
+  color: #664500 !important;
+}
+
+/* Insufficient Alert */
+.insufficient-alert {
+  border: 2px solid var(--insufficient-alert-border);
+  background-color: var(--insufficient-alert-bg);
+  color: var(--insufficient-alert-text);
+  padding: 12px;
+  border-radius: 6px;
+  margin-bottom: 12px;
+  font-size: 1em;
+}
+
+.insufficient-alert strong {
+  display: inline-flex !important;
+  align-items: center !important;
+  margin-bottom: 5px;
+  font-size: 1.1em !important;
+  font-weight: 600 !important;
+}
+
+.insufficient-alert strong svg {
+  margin-right: 8px !important;
+  width: 1em !important;
+  height: 1em !important;
+}
+
+.insufficient-alert p {
+  margin: 0;
+  font-size: 1em;
+}
+
+/* Summary Cards */
+.summary-card-wrapper {
+  height: 100% !important;
+  overflow-y: auto !important;
+}
+
+#summary-containers {
+  margin-top: 10px !important;
+}
+
+#main-interface-area > div:nth-child(7) > div {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: stretch !important;
+}
+
+#main-interface-area > div:nth-child(7) > div > div {
+  flex: 1 !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+#main-interface-area > p:first-of-type {
+  font-size: 1em !important;
+  margin: 0 0 8px 0 !important;
+  padding: 0 !important;
+  line-height: 1.4 !important;
+  color: var(--text-medium) !important;
+}
+
+.summary-card {
+  border: 1px solid var(--border-light) !important;
+  border-radius: 6px !important;
+  background-color: var(--background-light) !important;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
+  margin: 0 !important;
+  padding: 12px !important;
+  display: flex !important;
+  flex-direction: column !important;
+  height: auto !important;
+  min-height: 200px !important;
+  overflow: visible !important;
+}
+
+.summary-card-a {
+  border-left: 3px solid var(--model-a-color) !important;
+}
+
+.summary-card-b {
+  border-left: 3px solid var(--model-b-color) !important;
+}
+
+.summary-card .gr-form,
+.summary-card .gr-form > div {
+  margin: 0 !important;
+  padding: 0 !important;
+  flex: 1 !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+.summary-card .gr-input-label,
+.feedback-section .gr-input-label {
+  font-size: 1.1em !important;
+  font-weight: 600 !important;
+  color: var(--text-dark) !important;
+}
+
+.summary-card .gr-input-label {
+  margin: 0 0 5px 0 !important;
+  padding: 0 !important;
+}
+
+.feedback-section .gr-input-label {
+  margin-bottom: 0.6em !important;
+}
+
+.summary-card .gr-textbox {
+  border: none !important;
+  background: transparent !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  flex: 1 !important;
+}
+
+.summary-card textarea {
+  background-color: transparent !important;
+  border: none !important;
+  color: var(--text-dark) !important;
+  font-size: 1.1em !important;
+  line-height: 1.4 !important;
+  height: auto !important;
+  min-height: 150px !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  width: 100% !important;
+  resize: none !important;
+  overflow-y: visible !important;
+}
+
+/* Voting Section */
+.vote-button {
+  flex-grow: 1;
+  margin: 0 5px 5px 5px !important;
+  font-size: 1.05em !important;
+  padding: 12px 15px !important;
+  border-radius: 6px !important;
+  transition: all 0.2s ease !important;
+  background-color: var(--background-light) !important;
+  border: 1px solid var(--border-light) !important;
+  min-height: 50px !important;
+  font-weight: 500 !important;
+  color: var(--text-dark) !important;
+}
+
+.vote-button:hover:not(.vote-button-neither) {
+  background-color: var(--primary-light) !important;
+  border-color: var(--primary) !important;
+  color: var(--primary) !important;
+}
+
+.vote-button-neither:hover {
+  background-color: var(--insufficient-alert-bg) !important; 
+  border-color: var(--insufficient-alert-border) !important;
+  color: var(--insufficient-alert-text) !important;
+}
+
+.vote-button.selected:not(.vote-button-neither) {
+  border-width: 2px !important; 
+  border-style: solid !important;
+  border-color: var(--primary) !important;
+  background-color: var(--primary-light) !important;
+  color: var(--primary) !important;
+  font-weight: 600 !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
+}
+
+.vote-button-neither.selected { 
+  border-width: 2px !important;
+  border-style: solid !important;
+  border-color: var(--insufficient-alert-border) !important;
+  background-color: var(--insufficient-alert-bg) !important; 
+  color: var(--insufficient-alert-text) !important;
+  font-weight: 600 !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Feedback Section */
+.feedback-section {
+  padding: 3px 0 !important;
+  background-color: transparent !important;
+  margin: 3px 0 !important;
+  font-size: 1em;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.feedback-section .gr-check-radio {
+  font-size: 1.05em !important;
+}
+
+.feedback-section .gr-check-radio span { 
+  font-size: 1.05em !important;
+  color: var(--text-dark) !important;
+}
+
+.feedback-section input[type="checkbox"] {
+  width: 18px !important;
+  height: 18px !important;
+  margin-right: 6px !important;
+}
+
+.feedback-section input[type="checkbox"]:checked {
+  accent-color: var(--primary) !important;
+  border-color: var(--primary) !important;
+  background-color: var(--primary) !important;
+}
+
+/* Model Reveal */
+.model-reveal {
+  font-size: 1.1em !important;
+  text-align: center !important;
+  font-weight: 600 !important;
+  background-color: transparent !important;
+  padding: 0 !important;
+  border: none !important;
+}
+
+.model-reveal span {
+  font-size: 1.3em !important; 
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 100% !important;
+  padding: 25px 15px !important; 
+  min-height: 50px !important; 
+}
+
+.model-a-reveal span {
+  background-color: rgba(146, 180, 244, 0.2) !important;
+}
+
+.model-b-reveal span {
+  background-color: rgba(248, 173, 167, 0.2) !important;
+}
+
+/* DataFrames and Tables */
+.gr-dataframe table {
+  font-size: 0.95em !important;
+  border-collapse: separate !important;
+  border-spacing: 0 !important;
+  overflow: hidden !important;
+}
+
+.gr-dataframe th, 
+.gr-dataframe td {
+  padding: 8px 10px !important;
+  border: none !important;
+  border-bottom: 1px solid var(--border-light) !important;
+}
+
+.gr-dataframe th {
+  background-color: var(--background-light) !important;
+  color: var(--text-dark) !important;
+  font-weight: 600 !important;
+}
+
+.gradio-container .prose {
+  line-height: 1.4 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+/* Override any general prose table styles */
+.gradio-container .prose table,
+.gradio-container-5-28-0 .prose table {
+  border-collapse: separate !important;
+  border-spacing: 0 !important;
+  border: none !important;
+  width: 100% !important;
+  margin: 16px 0 !important;
+  overflow: hidden !important;
+}
+
+/* Leaderboard Styles */
+.model-link {
+  color: var(--text-dark) !important;
+  text-decoration: none !important;
+  border-bottom: 1px dotted var(--border-light) !important;
+  transition: color 0.2s, border-color 0.2s !important;
+  padding: 2px 0 !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  font-weight: 500 !important;
+}
+
+.model-link:hover {
+  color: #FF5500 !important;
+  border-color: #FF5500 !important;
+}
+
+.external-icon {
+  display: inline-block !important;
+  margin-left: 5px !important;
+  opacity: 0.6 !important;
+  transition: opacity 0.2s !important;
+}
+
+.model-link:hover .external-icon {
+  opacity: 1 !important;
+}
+
+#leaderboard-info {
+  margin: 15px 0 !important;
+  padding: 0 !important;
+  background-color: rgba(255, 236, 224, 0.5) !important;
+  border: none !important;
+}
+
+#leaderboard-info > div {
+  margin: 0 !important;
+  padding: 15px !important;
+  background-color: var(--background-light) !important;
+  border: none !important;
+}
+
+#leaderboard-info h3 {
+  margin-top: 0 !important;
+  margin-bottom: 10px !important;
+  color: var(--primary) !important;
+}
+
+#leaderboard-info p {
+  margin-bottom: 8px !important;
+  line-height: 1.5 !important;
+}
+
+#leaderboard-info ul {
+  margin-bottom: 10px;
+  padding-left: 20px;
+}
+
+#leaderboard-info li {
+  margin-bottom: 4px;
+  line-height: 1.4;
+}
+
+/* Leaderboard Table Specific Styles - With FIX for HF Spaces */
+.leaderboard-table {
+  width: 100% !important;
+  border-collapse: separate !important;
+  border-spacing: 0 !important;
+  font-size: 1.05em !important;
+  margin-top: 15px !important;
+  overflow: hidden !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+  border-radius: 8px !important;
+}
+
+/* FIX: Override any table styles from Gradio or HF Spaces */
+.leaderboard-table,
+.leaderboard-table tbody,
+.leaderboard-table thead,
+.leaderboard-table tr {
+  border: none !important;
+}
+
+/* FIX: Explicitly set cell borders to override Gradio/HF styles */
+.leaderboard-table th,
+.leaderboard-table td {
+  border: none !important;
+  border-bottom: 1px solid var(--border-light) !important;
+  text-align: left !important;
+  padding: 12px 15px !important;
+  background-color: var(--background-main) !important;
+}
+
+/* Header row styling */
+.leaderboard-table th {
+  background-color: #FFF1E6 !important;
+  color: var(--text-dark) !important;
+  font-weight: 600 !important;
+  font-size: 1.1em !important;
+  padding: 15px !important;
+  border: none !important;
+  border-bottom: 1px solid var(--border-light) !important;
+}
+
+/* First column styling */
+.leaderboard-table td:first-child,
+.leaderboard-table th:first-child {
+  background-color: #FFF8F2 !important;
+  font-weight: 600 !important;
+}
+
+.leaderboard-table th.centered,
+.leaderboard-table td.centered {
+  text-align: center !important;
+}
+
+.leaderboard-table td.elo-col {
+  font-weight: 600 !important;
+  color: var(--primary) !important;
+}
+
+.leaderboard-table .confidence-value {
+  color: var(--text-medium) !important;
+  font-size: 0.9em !important;
+  font-weight: normal !important;
+}
+
+/* Dark mode overrides for leaderboard */
+@media (prefers-color-scheme: dark) {
+  .leaderboard-table th {
+    background-color: #3D3026 !important;
   }
   
-  #query-title-row h3 {
-    margin: 0 !important;
-    padding: 0 !important;
-    line-height: 1.3 !important;
-    flex-grow: 0 !important;
-    flex-shrink: 0 !important;
-    white-space: normal !important;
-    overflow: visible !important;
-    width: auto !important;
-    display: inline-block !important;
+  .leaderboard-table td:first-child,
+  .leaderboard-table th:first-child {
+    background-color: #2A2A2A !important;
   }
-  
+}
+
+/* Blockquote styling */
+.gradio-container .prose blockquote,
+.gradio-container-5-28-0 .prose blockquote {
+  margin: 3px 0 !important;
+  border-left: 8px solid var(--border-color-primary) !important;
+  padding-left: var(--size-2) !important;
+  font-style: normal !important;
+  color: var(--text-dark) !important;
+}
+
+/* Spacing for Markdown content */
+span.svelte-7ddecg p {
+  line-height: 1.8 !important;
+  margin-top: 0 !important;
+  margin-bottom: 0.5em !important;
+}
+
+.html-container.svelte-phx28p.padding {
+  padding: 0 !important;
+}
+
+/* Smooth scrolling for the entire page */
+html {
+  scroll-behavior: smooth;
+}
+
+/* For the query section scroll margin */
+#query-section {
+  scroll-margin-top: 20px;
+}
+
+/* Responsive Styles */
+@media screen and (max-width: 768px) {
   #query-container {
-    display: flex !important;
-    align-items: stretch !important;
-    gap: 10px !important;
-    overflow: visible !important;
+    flex-direction: column !important;
   }
   
   .query-box-row {
-    background-color: var(--query-background) !important;
-    padding: 12px 15px !important;
-    border-radius: 6px !important;
-    border: 1px solid var(--query-border) !important;
-    margin: 0 !important;
-    align-items: flex-start !important;
-    flex: 1 1 70% !important;
-    max-width: 70% !important;
-    overflow: visible !important;
-    display: flex !important;
-    min-height: 50px !important;
-    height: auto !important;
-  }
-  
-  .query-text {
-    padding: 0 !important;
-    margin: 0 !important;
-    background-color: transparent !important;
-    border: none !important;
-    overflow: visible !important;
-    width: 100% !important;
-    display: block !important;
-  }
-  
-  .query-text p {
-    font-size: 1.2em !important;
-    font-weight: 600 !important;
-    color: var(--query-text) !important;
-    line-height: 1.4 !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    background-color: transparent !important;
-    border: none !important;
-    overflow-wrap: break-word !important;
-    word-wrap: break-word !important;
-    word-break: normal !important;
-    hyphens: auto !important;
-    white-space: normal !important;
-    overflow: visible !important;
-  }
-  
-  /* Buttons */
-  .query-button, 
-  .context-toggle-button {
-    background-color: var(--background-light) !important;
-    color: var(--text-medium) !important;
-    border: 1px solid var(--border-light) !important;
-    border-radius: 6px !important;
-    font-weight: 500 !important;
-    transition: all 0.2s ease !important;
+    flex: 1 1 100% !important;
+    max-width: 100% !important;
+    margin-bottom: 10px !important;
   }
   
   .query-button {
-    padding: 0 20px !important;
-    flex: 0 0 auto !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    font-size: 0.95em !important;
-    min-height: 50px !important;
-    white-space: nowrap !important;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
-  }
-  
-  .context-toggle-button {
-    padding: 5px 10px !important;
-    font-size: 0.85em !important;
-    height: 30px !important;
-    line-height: 1 !important;
-    width: auto !important;
-    min-width: 0 !important;
-    max-width: 150px !important;
-    margin: 0 !important;
-    cursor: pointer !important;
-  }
-  
-  .query-button:hover, 
-  .context-toggle-button:hover {
-    background-color: var(--primary-light) !important;
-    color: var(--primary) !important;
-    border-color: var(--primary) !important;
-  }
-  
-  /* Action Buttons */
-  #submit-button,
-  #try-another-btn {
-    background-color: var(--primary) !important;
-    color: white !important;
-    padding: 12px 30px !important;
-    border-radius: 6px !important;
-    font-weight: 600 !important;
-    font-size: 1.2em !important;
-    transition: all 0.2s ease !important;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
-    border: none !important;
-  }
-  
-  #submit-button {
-    margin-top: 15px !important;
-  }
-  
-  #try-another-btn {
     width: 100% !important;
-    max-width: 100% !important;
-    margin: 10px auto !important;
-    display: block !important;
-  }
-  
-  #submit-button:hover,
-  #try-another-btn:hover {
-    background-color: #E56E0F !important;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
-  }
-  
-  .control-buttons button {
-    margin: 0 10px !important;
-    font-size: 1em !important;
-    border-radius: 6px !important;
-    padding: 8px 16px !important;
-    transition: all 0.2s ease !important;
-  }
-  
-  /* Context Section */
-  .context-description {
-    background-color: transparent !important;
-    font-style: normal !important;
-    color: var(--text-medium) !important;
-    font-size: 1.05em !important;
-  }
-  
-  .context-topic {
-    display: inline-flex !important;
-    align-items: center !important;
-    background-color: transparent !important;
-    padding: 0 !important;
-    border-radius: 0 !important;
-    box-shadow: none !important;
-  }
-  
-  .topic-label {
-    font-weight: 600 !important;
-    color: var(--text-medium) !important;
-    margin-right: 6px !important;
-  }
-  
-  #context-header-row {
-    display: flex !important;
-    justify-content: space-between !important;
-    align-items: center !important;
-  }
-  
-  .context-title {
-    margin: 0 !important;
-    padding: 0 !important;
-    font-size: 1.2em !important;
-    font-weight: 600 !important;
-    color: var(--text-dark) !important;
-  }
-  
-  .context-items-container {
-    border-radius: 6px;
-    overflow: hidden;
-  }
-  
-  .context-item {
-    border: 1px solid var(--border-light);
-    background-color: var(--background-light);
-    padding: 12px;
-    border-radius: 6px;
-    margin-bottom: 8px;
-    font-size: 1em;
-    line-height: 1.5;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
-  }
-  
-  .primary-context {
-    border-left: 3px solid var(--model-a-color) !important;
-  }
-  
-  .chunk-header {
-    font-weight: 600;
-    color: var(--query-text);
-    margin-bottom: 8px;
-    padding-bottom: 5px;
-    border-bottom: 1px solid var(--query-border);
-  }
-  
-  .highlight {
-    background-color: #FFECB3 !important;
-    padding: 0.1em 0.3em !important;
-    border-radius: 3px !important;
-    font-weight: 600 !important;
-    color: #664500 !important;
-  }
-  
-  /* Insufficient Alert */
-  .insufficient-alert {
-    border: 2px solid var(--insufficient-alert-border);
-    background-color: var(--insufficient-alert-bg);
-    color: var(--insufficient-alert-text);
-    padding: 12px;
-    border-radius: 6px;
-    margin-bottom: 12px;
-    font-size: 1em;
-  }
-  
-  .insufficient-alert strong {
-    display: inline-flex !important;
-    align-items: center !important;
-    margin-bottom: 5px;
-    font-size: 1.1em !important;
-    font-weight: 600 !important;
-  }
-  
-  .insufficient-alert strong svg {
-    margin-right: 8px !important;
-    width: 1em !important;
-    height: 1em !important;
-  }
-  
-  .insufficient-alert p {
-    margin: 0;
-    font-size: 1em;
-  }
-  
-  /* Summary Cards */
-  .summary-card-wrapper {
-    height: 100% !important;
-    overflow-y: auto !important;
-  }
-  
-  #summary-containers {
-    margin-top: 10px !important;
-  }
-  
-  #main-interface-area > div:nth-child(7) > div {
-    display: flex !important;
-    flex-direction: row !important;
-    align-items: stretch !important;
   }
-  
-  #main-interface-area > div:nth-child(7) > div > div {
-    flex: 1 !important;
-    display: flex !important;
-    flex-direction: column !important;
-  }
-  
-  #main-interface-area > p:first-of-type {
-    font-size: 1em !important;
-    margin: 0 0 8px 0 !important;
-    padding: 0 !important;
-    line-height: 1.4 !important;
-    color: var(--text-medium) !important;
+
+  .vote-button {
+    font-size: 0.9em !important;
+    padding: 10px 8px !important;
   }
-  
+
   .summary-card {
-    border: 1px solid var(--border-light) !important;
-    border-radius: 6px !important;
-    background-color: var(--background-light) !important;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
-    margin: 0 !important;
-    padding: 12px !important;
-    display: flex !important;
-    flex-direction: column !important;
-    height: auto !important;
-    min-height: 200px !important;
-    overflow: visible !important;
+    margin-bottom: 15px !important;
   }
-  
-  .summary-card-a {
-    border-left: 3px solid var(--model-a-color) !important;
-  }
-  
-  .summary-card-b {
-    border-left: 3px solid var(--model-b-color) !important;
-  }
-  
-  .summary-card .gr-form,
-  .summary-card .gr-form > div {
-    margin: 0 !important;
-    padding: 0 !important;
-    flex: 1 !important;
-    display: flex !important;
+
+  #main-interface-area > div:nth-child(7) > div {
     flex-direction: column !important;
   }
-  
-  .summary-card .gr-input-label,
-  .feedback-section .gr-input-label {
-    font-size: 1.1em !important;
-    font-weight: 600 !important;
-    color: var(--text-dark) !important;
-  }
-  
-  .summary-card .gr-input-label {
-    margin: 0 0 5px 0 !important;
-    padding: 0 !important;
-  }
-  
-  .feedback-section .gr-input-label {
-    margin-bottom: 0.6em !important;
-  }
-  
-  .summary-card .gr-textbox {
-    border: none !important;
-    background: transparent !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    flex: 1 !important;
-  }
-  
-  .summary-card textarea {
-    background-color: transparent !important;
-    border: none !important;
-    color: var(--text-dark) !important;
-    font-size: 1.1em !important;
-    line-height: 1.4 !important;
-    height: auto !important;
-    min-height: 150px !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    width: 100% !important;
-    resize: none !important;
-    overflow-y: visible !important;
-  }
-  
-  /* Voting Section */
-  .vote-button {
-    flex-grow: 1;
-    margin: 0 5px 5px 5px !important;
-    font-size: 1.05em !important;
-    padding: 12px 15px !important;
-    border-radius: 6px !important;
-    transition: all 0.2s ease !important;
-    background-color: var(--background-light) !important;
-    border: 1px solid var(--border-light) !important;
-    min-height: 50px !important;
-    font-weight: 500 !important;
-    color: var(--text-dark) !important;
-  }
-  
-  .vote-button:hover:not(.vote-button-neither) {
-    background-color: var(--primary-light) !important;
-    border-color: var(--primary) !important;
-    color: var(--primary) !important;
-  }
-  
-  .vote-button-neither:hover {
-    background-color: var(--insufficient-alert-bg) !important; 
-    border-color: var(--insufficient-alert-border) !important;
-    color: var(--insufficient-alert-text) !important;
-  }
-  
-  .vote-button.selected:not(.vote-button-neither) {
-    border-width: 2px !important; 
-    border-style: solid !important;
-    border-color: var(--primary) !important;
-    background-color: var(--primary-light) !important;
-    color: var(--primary) !important;
-    font-weight: 600 !important;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
-  }
-  
-  .vote-button-neither.selected { 
-    border-width: 2px !important;
-    border-style: solid !important;
-    border-color: var(--insufficient-alert-border) !important;
-    background-color: var(--insufficient-alert-bg) !important; 
-    color: var(--insufficient-alert-text) !important;
-    font-weight: 600 !important;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
-  }
-  
-  /* Feedback Section */
-  .feedback-section {
-    padding: 3px 0 !important;
-    background-color: transparent !important;
-    margin: 3px 0 !important;
-    font-size: 1em;
-    border: none !important;
-    box-shadow: none !important;
-  }
-  
-  .feedback-section .gr-check-radio {
-    font-size: 1.05em !important;
-  }
-  
-  .feedback-section .gr-check-radio span { 
-    font-size: 1.05em !important;
-    color: var(--text-dark) !important;
-  }
-  
-  .feedback-section input[type="checkbox"] {
-    width: 18px !important;
-    height: 18px !important;
-    margin-right: 6px !important;
-  }
-  
-  .feedback-section input[type="checkbox"]:checked {
-    accent-color: var(--primary) !important;
-    border-color: var(--primary) !important;
-    background-color: var(--primary) !important;
-  }
-  
-  /* Model Reveal */
-  .model-reveal {
-    font-size: 1.1em !important;
-    text-align: center !important;
-    font-weight: 600 !important;
-    background-color: transparent !important;
-    padding: 0 !important;
-    border: none !important;
-  }
-  
-  .model-reveal span {
-    font-size: 1.3em !important; 
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    width: 100% !important;
-    padding: 25px 15px !important; 
-    min-height: 50px !important; 
-  }
-  
-  .model-a-reveal span {
-    background-color: rgba(146, 180, 244, 0.2) !important;
-  }
-  
-  .model-b-reveal span {
-    background-color: rgba(248, 173, 167, 0.2) !important;
-  }
-  
-  /* DataFrames and Tables */
-  .gr-dataframe table {
-    font-size: 0.95em !important;
-    border-collapse: separate !important;
-    border-spacing: 0 !important;
-    overflow: hidden !important;
-  }
-  
-  .gr-dataframe th, 
-  .gr-dataframe td {
-    padding: 8px 10px !important;
-    border: none !important;
-    border-bottom: 1px solid var(--border-light) !important;
-  }
-  
-  .gr-dataframe th {
-    background-color: var(--background-light) !important;
-    color: var(--text-dark) !important;
-    font-weight: 600 !important;
-  }
-  
-  .gradio-container .prose {
-    line-height: 1.4 !important;
-    margin: 0 !important;
-    padding: 0 !important;
-  }
-  
-  .gradio-container-5-28-0 .prose table {
-    border: none !important;
-  }
-  
-  .gradio-container-5-28-0 .prose th,
-  .gradio-container-5-28-0 .prose td {
-    border: 1px solid var(--border-light) !important;
-  }
-  
-  /* Leaderboard Styles */
-  .model-link {
-    color: var(--text-dark) !important;
-    text-decoration: none !important;
-    border-bottom: 1px dotted var(--border-light) !important;
-    transition: color 0.2s, border-color 0.2s !important;
-    padding: 2px 0 !important;
-    display: inline-flex !important;
-    align-items: center !important;
-    font-weight: 500 !important;
-  }
-  
-  .model-link:hover {
-    color: #FF5500 !important;
-    border-color: #FF5500 !important;
-  }
-  
-  .external-icon {
-    display: inline-block !important;
-    margin-left: 5px !important;
-    opacity: 0.6 !important;
-    transition: opacity 0.2s !important;
-  }
-  
-  .model-link:hover .external-icon {
-    opacity: 1 !important;
-  }
-  
-  #leaderboard-info {
-    margin: 15px 0 !important;
-    padding: 0 !important;
-    background-color: rgba(255, 236, 224, 0.5) !important;
-    border: none !important;
-  }
-  
-  #leaderboard-info > div {
-    margin: 0 !important;
-    padding: 15px !important;
-    background-color: var(--background-light) !important;
-    border: none !important;
-  }
-  
-  #leaderboard-info h3 {
-    margin-top: 0 !important;
-    margin-bottom: 10px !important;
-    color: var(--primary) !important;
-  }
-  
-  #leaderboard-info p {
-    margin-bottom: 8px !important;
-    line-height: 1.5 !important;
-  }
-  
-  #leaderboard-info ul {
-    margin-bottom: 10px;
-    padding-left: 20px;
-  }
-  
-  #leaderboard-info li {
-    margin-bottom: 4px;
-    line-height: 1.4;
-  }
-  
-  .leaderboard-table {
-    width: 100%;
-    border-collapse: collapse;
-    border-spacing: 0;
-    font-size: 1.05em !important;
-    margin-top: 15px;
-  }
-  
-  .leaderboard-table th {
-    background-color: #FFF1E6 !important;
-    color: var(--text-dark) !important;
-    font-weight: 600;
-    text-align: left;
-    padding: 14px 15px !important;
-    border-bottom: 1px solid var(--border-light) !important;
-    font-size: 1.1em !important;
-  }
+}
 
-  .gradio-container-5-28-0 .prose blockquote {
-    margin: 12px 0 var(--size-6) 0 !important;
-    border-left: 5px solid var(--border-color-primary);
-    padding-left: var(--size-2);
+@media screen and (max-width: 480px) {
+  #main-interface-area > div:nth-child(10) > div {
+    display: grid !important;
+    grid-template-columns: 1fr 1fr !important;
+    gap: 8px !important;
   }
 
-  @media (prefers-color-scheme: dark) {
-    .leaderboard-table th {
-      background-color: #3D3026 !important; /* Use the primary-light variable for dark mode */
-      color: var(--text-dark) !important;
-    }
-  }
-  
-  .leaderboard-table td {
-    padding: 12px 15px !important;
-    border-bottom: 1px solid var(--border-light) !important;
-    background-color: var(--background-main) !important;
-    font-size: 1.05em !important;
-  }
-  
-  .leaderboard-table th.centered,
-  .leaderboard-table td.centered {
-    text-align: center;
-  }
-  
-  .leaderboard-table td.elo-col {
-    font-weight: 600;
-    color: var(--primary) !important;
-  }
-  
-  .leaderboard-table .confidence-value {
-    color: var(--text-medium) !important;
-    font-size: 0.9em;
-    font-weight: normal;
-  }
-  
-  .html-container.svelte-phx28p.padding {
-    padding: 0 !important;
-  }
-  
-  span.svelte-7ddecg p {
-    line-height: 2 !important;
-    margin-top: 0 !important;
-  }
-  
-  /* Smooth scrolling for the entire page */
-  html {
-    scroll-behavior: smooth;
-  }
-  
-  /* For the query section scroll margin */
-  #query-section {
-    scroll-margin-top: 20px;
-  }
-  
-  /* Responsive Styles */
-  @media screen and (max-width: 768px) {
-    #query-container {
-      flex-direction: column !important;
-    }
-    
-    .query-box-row {
-      flex: 1 1 100% !important;
-      max-width: 100% !important;
-      margin-bottom: 10px !important;
-    }
-    
-    .query-button {
-      width: 100% !important;
-    }
-  
-    .vote-button {
-      font-size: 0.9em !important;
-      padding: 10px 8px !important;
-    }
-  
-    .summary-card {
-      margin-bottom: 15px !important;
-    }
-  
-    #main-interface-area > div:nth-child(7) > div {
-      flex-direction: column !important;
-    }
+  .vote-button {
+    margin: 0 !important;
+    padding: 8px 5px !important;
   }
-  
-  @media screen and (max-width: 480px) {
-    #main-interface-area > div:nth-child(10) > div {
-      display: grid !important;
-      grid-template-columns: 1fr 1fr !important;
-      gap: 8px !important;
-    }
-  
-    .vote-button {
-      margin: 0 !important;
-      padding: 8px 5px !important;
-    }
-  }
+}