Create static/css/custom.css

static/css/custom.css

@@ -0,0 +1,74 @@
+/* Additional custom styles if needed */
+
+/* Message content styling */
+.prose {
+    color: #374151;
+    line-height: 1.75;
+}
+
+.prose p {
+    margin-bottom: 1rem;
+}
+
+.prose a {
+    color: #6366f1;
+    text-decoration: underline;
+}
+
+.prose a:hover {
+    color: #4f46e5;
+}
+
+.prose img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 0.5rem;
+}
+
+.prose table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1rem 0;
+}
+
+.prose th,
+.prose td {
+    border: 1px solid #e5e7eb;
+    padding: 0.75rem;
+    text-align: left;
+}
+
+.prose th {
+    background-color: #f9fafb;
+    font-weight: 600;
+}
+
+/* Loading skeleton */
+.skeleton {
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+    0% { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
+}
+
+/* Custom scrollbar for message content */
+.prose::-webkit-scrollbar {
+    width: 6px;
+}
+
+.prose::-webkit-scrollbar-track {
+    background: #f1f5f9;
+}
+
+.prose::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 3px;
+}
+
+.prose::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+}