Integrate AI chat styles into existing prose pattern

app/assets/stylesheets/application.css

@@ -1,56 +0,0 @@
-/* Application styles */
-
-/* Chat styles */
-#chat-messages {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
-}
-
-#chat-messages::-webkit-scrollbar {
-  width: 6px;
-}
-
-#chat-messages::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-#chat-messages::-webkit-scrollbar-thumb {
-  background-color: rgba(156, 163, 175, 0.5);
-  border-radius: 3px;
-}
-
-/* Ensure message content wraps properly */
-#messages p {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-word;
-}
-
-/* Fix any images within messages */
-#messages img {
-  max-width: 100%;
-  height: auto;
-}
-
-/* Thinking indicator styles */
-#thinking {
-  opacity: 1;
-  transition: opacity 0.3s ease-in-out;
-  z-index: 10; /* Ensure it's above other elements */
-  position: relative; /* Needed for z-index to work */
-}
-
-#thinking.hidden {
-  display: none !important;
-  opacity: 0;
-}
-
-#thinking .animate-bounce {
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-}
-
-/* Ensure the thinking indicator is always visible */
-#thinking.flex {
-  display: flex !important;
-}

app/assets/tailwind/application.css

@@ -8,7 +8,7 @@
 @plugin "@tailwindcss/typography";
 @plugin "@tailwindcss/forms";
 
-@import "../stylesheets/simonweb_pickr.css";
+@import "./simonweb_pickr.css";
 
 @layer components {
   .pcr-app{
@@ -112,6 +112,24 @@
   }
 }
 
+.prose--ai {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+
+  ::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(156, 163, 175, 0.5);
+    border-radius: 3px; 
+  }
+}
+
 /* Custom scrollbar implementation for Windows browsers */
 .windows {
   ::-webkit-scrollbar {
@@ -142,5 +160,4 @@
     background: #a6a6a6;
   }
 }
-
-/* The following Markdown CSS has been removed as requested */
+/* The following Markdown CSS has been removed as requested */

app/views/chats/show.html.erb

@@ -34,4 +34,3 @@
     <%= render "messages/form", chat: @chat, message: @message, scroll_behavior: true %>
   </div>
 </div>
- 

app/views/layouts/shared/_ai_sidebar.html.erb

@@ -49,7 +49,7 @@
   <% if !Current.user.ai_enabled? %>
     <%= render "layouts/shared/ai_consent" %>
   <% else %>
-    <div id="chat-messages" class="flex-grow overflow-y-auto px-4 py-3" data-controller="chat-scroll" data-chat-scroll-target="container">
+    <div id="chat-messages" class="prose prose--ai flex-grow overflow-y-auto px-4 py-3" data-controller="chat-scroll" data-chat-scroll-target="container">
       <%# Chat List Menu (hidden by default) %>
       <div data-chat-menu-target="content" class="hidden">
         <div class="mb-6">

app/views/layouts/shared/_head.html.erb

@@ -5,7 +5,6 @@
   <%= csp_meta_tag %>
 
   <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
-  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
 
   <%= javascript_include_tag "https://cdn.plaid.com/link/v2/stable/link-initialize.js" %>
   <%= combobox_style_tag %>

app/views/messages/_message.html.erb

@@ -4,7 +4,7 @@
 %>
 
 <% if show_message %>
-  <div id="message_<%= message.id %>" class="flex items-start gap-3 <%= message.user? ? 'justify-end' : (is_debug_message ? 'justify-start debug-message' : '') %> mb-4 w-full">
+  <div id="<%= dom_id(message) %>" class="flex items-start gap-3 <%= message.user? ? 'justify-end' : (is_debug_message ? 'justify-start debug-message' : '') %> mb-4 w-full">
     <% if is_debug_message %>
       <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 w-full text-gray-700 text-xs font-mono">
         <div class="flex items-center mb-1">