Refactor chat interface and enhance user experience

- Updated the ChatWindow component to provide clearer instructions and actions when no conversation is selected, improving user guidance.
- Redesigned the MenuBar to display session timeout information more effectively.
- Enhanced the SearchView component with a more user-friendly country selection using a Multiselect dropdown.
- Improved the UserList component to display user age and gender, enhancing user profile visibility.
- Updated various views (ChatView, FaqView, FeedbackView, PartnersView, RulesView, SafetyView) to include a consistent app branding link for better navigation.

These changes collectively enhance the chat interface, improve user engagement, and streamline navigation across the application.

client/src/components/ChatWindow.vue

@@ -1,7 +1,27 @@
 <template>
   <div class="chat-window">
     <div v-if="!chatStore.currentConversation" class="no-conversation">
-      <p>Wähle einen Benutzer aus der Liste aus, um eine Unterhaltung zu starten.</p>
+      <div class="empty-icon">C</div>
+      <h2>Unterhaltung starten</h2>
+      <p>Wähle eine Person aus der aktiven Liste oder suche gezielt nach jemandem.</p>
+      <div class="empty-actions">
+        <button type="button" @click="chatStore.setView('search')">Zur Suche</button>
+        <button type="button" class="secondary" @click="chatStore.setView('history')">Verlauf ansehen</button>
+      </div>
+      <div class="empty-stats">
+        <span>
+          <strong>Sicherer Chat</strong>
+          Privater Austausch
+        </span>
+        <span>
+          <strong>{{ chatStore.users.length }} online</strong>
+          Aktive Kontakte
+        </span>
+        <span>
+          <strong>Profile</strong>
+          Direkt erreichbar
+        </span>
+      </div>
     </div>
     
     <div v-else class="messages-container">
@@ -105,12 +125,97 @@ function formatTime(timestamp) {
 
 <style scoped>
 .no-conversation {
-  padding: 20px;
+  min-height: 100%;
+  padding: 60px 24px;
   text-align: center;
-  color: #637067;
-  border: 1px dashed #d7dfd9;
-  border-radius: 12px;
+  color: #4f5c54;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-icon {
+  width: 74px;
+  height: 74px;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  background: #ffffff;
+  color: #1e6840;
+  font-size: 24px;
+  font-weight: 900;
+  box-shadow: 0 18px 34px rgba(29, 45, 36, 0.08);
+}
+
+.no-conversation h2 {
+  margin: 24px 0 12px;
+  color: #202720;
+  font-size: 25px;
+  line-height: 1.15;
+}
+
+.no-conversation p {
+  max-width: 430px;
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.55;
+}
+
+.empty-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 28px;
+}
+
+.empty-actions button {
+  min-height: 46px;
+  border: 0;
+  border-radius: 8px;
+  padding: 0 24px;
+  background: #1f6e43;
+  color: #ffffff;
+  font-weight: 800;
+}
+
+.empty-actions button.secondary {
+  background: #ebeeec;
+  color: #2c5f40;
+}
+
+.empty-stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(120px, 1fr));
+  gap: 12px;
+  width: min(520px, 100%);
+  margin-top: 48px;
+}
+
+.empty-stats span {
+  min-height: 58px;
+  border-radius: 8px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   background: rgba(255, 255, 255, 0.72);
+  color: #707c73;
+  font-size: 10px;
+  line-height: 1.2;
+}
+
+.empty-stats strong {
+  margin-bottom: 3px;
+  color: #253027;
+  font-size: 11px;
+}
+
+@media (max-width: 620px) {
+  .empty-stats {
+    grid-template-columns: 1fr;
+  }
 }
 
 .messages-container {