feat: enhance UI and functionality across chat and settings

- Added custom scrollbar styles for improved aesthetics and usability across the interface.
- Implemented responsive adjustments for chat sidebar and input components to enhance mobile experience.
- Integrated tooltip components in select elements for better user guidance and information display.
- Updated chat input and message components for improved styling and functionality.
- Enhanced settings page with semantic query expansion options and improved model selection UI.
- Refactored sidebar list to include better date formatting and tooltip support for session titles.
- Introduced GPU stats monitoring in the system panel for better hardware insights.

app/globals.css

@@ -152,3 +152,148 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Custom Scrollbar Styles - Padronizado para toda interface */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: hsl(var(--muted));
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--primary));
+  border-radius: 4px;
+  transition: background 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--primary) / 0.8);
+}
+
+/* Firefox scrollbar */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--primary)) hsl(var(--muted));
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+}
+
+/* Responsive layout adjustments */
+@media (max-width: 650px) {
+  /* Sidebar compact mode - hide labels, show only icons */
+  .sidebar-compact .sidebar-label {
+    display: none;
+  }
+  
+  .sidebar-compact .sidebar-icon {
+    font-size: 24px;
+  }
+}
+
+/* Ensure proper spacing and padding at all resolutions */
+@media (min-width: 320px) and (max-width: 2560px) {
+  /* Prevent layout breaking at extreme sizes */
+  .chat-container {
+    min-width: 320px;
+    max-width: 100vw;
+  }
+  
+  .message-container {
+    padding-left: clamp(12px, 4vw, 24px);
+    padding-right: clamp(12px, 4vw, 24px);
+  }
+}
+
+/* Prevent text overflow in cards and messages */
+.truncate-with-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Ensure cards never stick to edges */
+.card-container {
+  padding: clamp(8px, 2vw, 16px);
+}
+
+/* Responsive font sizes */
+@media (max-width: 640px) {
+  .responsive-text {
+    font-size: clamp(14px, 4vw, 16px);
+  }
+}
+
+/* Model name truncation - ensure long model names don't break layout */
+.model-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 70vw;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+@media (max-width: 600px) {
+  .model-name {
+    max-width: 54vw;
+    font-size: 15px;
+  }
+}
+
+/* Select value truncation */
+[data-radix-select-trigger] span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: block;
+}
+
+/* Ensure SelectItems also truncate properly */
+[data-radix-select-item] {
+  min-width: 0;
+}
+
+[data-radix-select-item] span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 70vw;
+  display: block;
+}
+
+/* Scrollbar específico para lista de chats - mais fino e discreto */
+.sidebar-chat-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sidebar-chat-list::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 3px;
+}
+
+.sidebar-chat-list::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 3px;
+  transition: background 0.2s ease;
+}
+
+.sidebar-chat-list::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--primary) / 0.6);
+}
+
+/* Firefox scrollbar para lista de chats */
+.sidebar-chat-list {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
+}