Update styles

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -3,7 +3,7 @@
 }
 
 .tabs--container--with-border {
-  @apply border-b border-n-weak;
+  @apply border-b border-b-n-weak;
 }
 
 .tabs--container--compact.tab--chat-type {

app/javascript/dashboard/components-next/copilot/Copilot.vue

@@ -113,40 +113,44 @@ watch(
         </div>
       </div>
     </div>
-    <div ref="chatContainer" class="flex-1 px-4 py-4 space-y-6 overflow-y-auto">
-      <template v-for="message in messages" :key="message.id">
-        <CopilotAgentMessage
-          v-if="message.role === 'user'"
-          :support-agent="supportAgent"
-          :message="message"
-        />
-        <CopilotAssistantMessage
-          v-else-if="COPILOT_USER_ROLES.includes(message.role)"
-          :message="message"
-          :conversation-inbox-type="conversationInboxType"
-        />
-      </template>
+    <div ref="chatContainer" class="flex-1 px-4 py-4 overflow-y-auto">
+      <div
+        v-if="messages.length"
+        class="space-y-6 flex-1 flex items-center justify-center"
+      >
+        <template v-for="message in messages" :key="message.id">
+          <CopilotAgentMessage
+            v-if="message.role === 'user'"
+            :support-agent="supportAgent"
+            :message="message"
+          />
+          <CopilotAssistantMessage
+            v-else-if="COPILOT_USER_ROLES.includes(message.role)"
+            :message="message"
+            :conversation-inbox-type="conversationInboxType"
+          />
+        </template>
 
-      <CopilotLoader v-if="isCaptainTyping" />
-    </div>
-
-    <div
-      v-if="!messages.length"
-      class="flex-1 flex items-center justify-center"
-    >
-      <div class="h-fit px-3 py-3 space-y-1">
-        <span class="text-xs text-n-slate-10">
-          {{ $t('COPILOT.TRY_THESE_PROMPTS') }}
-        </span>
-        <button
-          v-for="prompt in promptOptions"
-          :key="prompt.label"
-          class="px-2 py-1 rounded-md border border-n-weak bg-n-slate-2 text-n-slate-11 flex items-center gap-1"
-          @click="() => useSuggestion(prompt)"
-        >
-          <span>{{ t(prompt.label) }}</span>
-          <Icon icon="i-lucide-chevron-right" />
-        </button>
+        <CopilotLoader v-if="isCaptainTyping" />
+      </div>
+      <div
+        v-if="!messages.length"
+        class="flex-1 flex items-center justify-center"
+      >
+        <div class="h-fit px-3 py-3 space-y-1">
+          <span class="text-xs text-n-slate-10">
+            {{ $t('COPILOT.TRY_THESE_PROMPTS') }}
+          </span>
+          <button
+            v-for="prompt in promptOptions"
+            :key="prompt.label"
+            class="px-2 py-1 rounded-md border border-n-weak bg-n-slate-2 text-n-slate-11 flex items-center gap-1"
+            @click="() => useSuggestion(prompt)"
+          >
+            <span>{{ t(prompt.label) }}</span>
+            <Icon icon="i-lucide-chevron-right" />
+          </button>
+        </div>
       </div>
     </div>
 

app/javascript/dashboard/components/ChatListHeader.vue

@@ -80,11 +80,9 @@ const toggleConversationLayout = () => {
 
 <template>
   <div
-    class="flex items-center justify-between gap-2 px-3 h-12"
+    class="flex items-center justify-between gap-2 px-3 h-12 pt-3 pb-3"
     :class="{
-      'pb-3 border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
-      'pt-3 pb-2': showV4View,
-      'mb-2 pb-0': !showV4View,
+      'border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
     }"
   >
     <div class="flex items-center justify-center min-w-0">

app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue

@@ -114,7 +114,7 @@ export default {
     <woot-tabs
       v-if="dashboardApps.length && currentChat.id"
       :index="activeIndex"
-      class="-mt-px bg-white dashboard-app--tabs dark:bg-slate-900"
+      class="-mt-px border-t border-t-transparent bg-white dashboard-app--tabs"
       @change="onDashboardAppTabChange"
     >
       <woot-tabs-item