videochat integriert

2026-06-17 12:53:03 +02:00
parent 8c9a600645
commit 10e6e7a80a
22 changed files with 4443 additions and 510 deletions
--- a/client/src/components/ChatWindow.vue
+++ b/client/src/components/ChatWindow.vue
@@ -23,8 +23,48 @@
        </span>
      </div>
    </div>
-    
+
    <div v-else class="messages-container">
+      <div v-if="currentVideoSession" class="video-call-banner">
+        <div class="video-call-banner-copy">
+          <strong>{{ currentVideoSession.withUserName }}</strong>
+          <span>{{ statusLabel(currentVideoSession.status) }} · {{ currentVideoSession.remoteMuted ? 'Mikro aus' : 'Mikro an' }}</span>
+        </div>
+        <div class="video-call-banner-actions">
+          <button
+            v-if="currentVideoSession.status === 'ringing' && currentVideoSession.initiatedBy !== chatStore.userName"
+            type="button"
+            @click="chatStore.acceptVideoCall(currentVideoSession.callId)"
+          >
+            Annehmen
+          </button>
+          <button
+            v-if="currentVideoSession.status === 'ringing' && currentVideoSession.initiatedBy !== chatStore.userName"
+            type="button"
+            class="danger"
+            @click="chatStore.rejectVideoCall(currentVideoSession.callId)"
+          >
+            Ablehnen
+          </button>
+          <button
+            v-if="currentVideoSession.status === 'ringing' && currentVideoSession.initiatedBy === chatStore.userName"
+            type="button"
+            class="secondary"
+            @click="chatStore.cancelVideoCall(currentVideoSession.callId)"
+          >
+            Abbrechen
+          </button>
+          <button
+            v-if="currentVideoSession.status === 'connecting' || currentVideoSession.status === 'active'"
+            type="button"
+            class="secondary"
+            @click="chatStore.bringVideoSessionToFront(currentVideoSession.callId)"
+          >
+            Vordergrund
+          </button>
+        </div>
+      </div>
+
      <div
        v-for="(message, index) in chatStore.messages"
        :key="index"
@@ -33,33 +73,33 @@
      >
        <strong>{{ message.from }}:</strong>
        <span v-if="message.isImage" class="image-message">
-          <img 
-            :src="message.message" 
-            :alt="'Bild von ' + message.from" 
-            class="chat-image" 
+          <img
+            :src="message.message"
+            :alt="'Bild von ' + message.from"
+            class="chat-image"
            @click="openImageModal(message.message)"
          />
        </span>
        <span v-else v-html="replaceSmileys(message.message)"></span>
-      
-      <!-- Bild-Modal -->
+      </div>
+
      <div v-if="selectedImage" class="image-modal-overlay" @click="closeImageModal">
        <div class="image-modal-content" @click.stop>
          <button class="image-modal-close" @click="closeImageModal" title="Schließen">×</button>
          <img :src="selectedImage" alt="Vergrößertes Bild" class="image-modal-image" />
        </div>
      </div>
-      </div>
    </div>
  </div>
 </template>

 <script setup>
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useChatStore } from '../stores/chat';

 const chatStore = useChatStore();
 const selectedImage = ref(null);
+const currentVideoSession = computed(() => chatStore.currentConversationVideoSession);

 function openImageModal(imageSrc) {
  selectedImage.value = imageSrc;
@@ -69,7 +109,6 @@ function closeImageModal() {
  selectedImage.value = null;
 }

-// Smiley-Definitionen (wie im Original)
 const smileys = {
  ':)': { code: '1F642' },
  ':D': { code: '1F600' },
@@ -95,21 +134,18 @@ const smileys = {

 function replaceSmileys(text) {
  if (!text) return '';
-  
-  // HTML-Sonderzeichen escapen
+
  let outputText = text
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
-  
-  // Smileys ersetzen (längere Codes zuerst, um Überschneidungen zu vermeiden)
+
  const sortedCodes = Object.keys(smileys).sort((a, b) => b.length - a.length);
-  
  for (const code of sortedCodes) {
    const regex = new RegExp(escapeRegex(code), 'g');
    outputText = outputText.replace(regex, `&#x${smileys[code].code};`);
  }
-  
+
  return outputText;
 }

@@ -121,6 +157,19 @@ function formatTime(timestamp) {
  const date = new Date(timestamp);
  return date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
 }
+
+function statusLabel(status) {
+  switch (status) {
+    case 'ringing':
+      return 'Videoanruf klingelt';
+    case 'connecting':
+      return 'Videoanruf verbindet';
+    case 'active':
+      return 'Videoanruf aktiv';
+    default:
+      return status;
+  }
+}
 </script>

 <style scoped>
@@ -212,15 +261,63 @@ function formatTime(timestamp) {
  font-size: 11px;
 }

-@media (max-width: 620px) {
-  .empty-stats {
-    grid-template-columns: 1fr;
-  }
-}
-
 .messages-container {
  display: flex;
  flex-direction: column;
+  gap: 10px;
+}
+
+.video-call-banner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid #d8e1da;
+  border-radius: 10px;
+  background: #f7fbf8;
+}
+
+.video-call-banner-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.video-call-banner-copy strong {
+  color: #223026;
+}
+
+.video-call-banner-copy span {
+  color: #58685d;
+  font-size: 13px;
+}
+
+.video-call-banner-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.video-call-banner-actions button {
+  min-height: 34px;
+  border: 0;
+  border-radius: 8px;
+  padding: 0 12px;
+  background: #1d6a42;
+  color: #ffffff;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.video-call-banner-actions button.secondary {
+  background: #edf2ee;
+  color: #1d6a42;
+  border: 1px solid #ccd9cf;
+}
+
+.video-call-banner-actions button.danger {
+  background: #b03737;
 }

 .chat-image {
@@ -298,4 +395,15 @@ function formatTime(timestamp) {
  object-fit: contain;
  border-radius: 4px;
 }
+
+@media (max-width: 620px) {
+  .empty-stats {
+    grid-template-columns: 1fr;
+  }
+
+  .video-call-banner {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
 </style>
--- a/client/src/components/FloatingVideoWindow.vue
+++ b/client/src/components/FloatingVideoWindow.vue
@@ -0,0 +1,240 @@
+<template>
+  <div
+    v-if="session"
+    class="floating-video-window"
+    :style="windowStyle"
+  >
+    <header class="floating-video-header" @mousedown="startDrag">
+      <div class="floating-video-title">
+        <strong>{{ session.withUserName }}</strong>
+        <span>{{ session.remoteMuted ? 'Mikro aus' : 'Mikro an' }}</span>
+      </div>
+      <div class="floating-video-header-actions">
+        <button type="button" class="secondary" @click="chatStore.minimizeForegroundVideo()">Minimieren</button>
+        <button type="button" class="danger" @click="chatStore.endVideoCall(session.callId)">Beenden</button>
+      </div>
+    </header>
+
+    <div class="floating-video-body">
+      <div class="floating-video-stage">
+        <VideoSessionSurface v-if="session" :session="session" :muted="false" />
+      </div>
+
+      <div class="floating-self-preview">
+        <video ref="selfVideoRef" autoplay muted playsinline></video>
+      </div>
+    </div>
+
+    <footer class="floating-video-footer">
+      <div class="floating-video-footer-state">
+        <span>{{ session.remoteMuted ? 'Partner: Mikro aus' : 'Partner: Mikro an' }}</span>
+        <span>{{ chatStore.selfMuted ? 'Du: Mikro aus' : 'Du: Mikro an' }}</span>
+      </div>
+      <div class="floating-video-footer-actions">
+        <button type="button" @click="chatStore.toggleSelfMute()">
+          {{ chatStore.selfMuted ? 'Mikro aktivieren' : 'Mikro stummschalten' }}
+        </button>
+        <button type="button" class="secondary" @click="chatStore.toggleSelfCamera()">
+          {{ chatStore.selfCameraEnabled ? 'Kamera aus' : 'Kamera an' }}
+        </button>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { useChatStore } from '../stores/chat';
+import VideoSessionSurface from './VideoSessionSurface.vue';
+
+const chatStore = useChatStore();
+const session = computed(() => chatStore.foregroundVideoSession);
+const selfVideoRef = ref(null);
+
+const windowStyle = computed(() => ({
+  left: `${chatStore.floatingVideoPosition.x}px`,
+  top: `${chatStore.floatingVideoPosition.y}px`
+}));
+
+watch(
+  () => chatStore.selfPreviewStream,
+  (stream) => {
+    if (selfVideoRef.value) {
+      selfVideoRef.value.srcObject = stream || null;
+    }
+  },
+  { immediate: true }
+);
+
+function statusLabel(status) {
+  switch (status) {
+    case 'ringing':
+      return 'Klingelt';
+    case 'connecting':
+      return 'Verbindet';
+    case 'active':
+      return 'Aktiv';
+    default:
+      return status;
+  }
+}
+
+function startDrag(event) {
+  const startX = event.clientX;
+  const startY = event.clientY;
+  const { x, y } = chatStore.floatingVideoPosition;
+
+  const handleMove = (moveEvent) => {
+    chatStore.updateFloatingVideoPosition({
+      x: x + (moveEvent.clientX - startX),
+      y: y + (moveEvent.clientY - startY)
+    });
+  };
+
+  const handleUp = () => {
+    window.removeEventListener('mousemove', handleMove);
+    window.removeEventListener('mouseup', handleUp);
+  };
+
+  window.addEventListener('mousemove', handleMove);
+  window.addEventListener('mouseup', handleUp);
+}
+
+onBeforeUnmount(() => {
+  if (selfVideoRef.value) {
+    selfVideoRef.value.srcObject = null;
+  }
+});
+</script>
+
+<style scoped>
+.floating-video-window {
+  position: fixed;
+  z-index: 1300;
+  width: min(46vw, 720px);
+  min-width: 340px;
+  border-radius: 16px;
+  border: 1px solid #cad5ce;
+  background: #ffffff;
+  box-shadow: 0 24px 60px rgba(10, 19, 14, 0.28);
+  overflow: hidden;
+}
+
+.floating-video-header {
+  min-height: 58px;
+  padding: 0 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #1a211d;
+  color: #eef5f0;
+  cursor: move;
+}
+
+.floating-video-title {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.floating-video-title strong {
+  font-size: 16px;
+}
+
+.floating-video-title span {
+  font-size: 12px;
+  opacity: 0.82;
+}
+
+.floating-video-header-actions,
+.floating-video-footer-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.floating-video-header-actions button,
+.floating-video-footer-actions button {
+  min-height: 34px;
+  border: 0;
+  border-radius: 8px;
+  padding: 0 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.floating-video-header-actions button.secondary,
+.floating-video-footer-actions button.secondary {
+  background: #edf2ee;
+  color: #214f36;
+}
+
+.floating-video-header-actions button.danger {
+  background: #b13838;
+  color: #ffffff;
+}
+
+.floating-video-body {
+  position: relative;
+  background: #08100b;
+}
+
+.floating-video-stage {
+  aspect-ratio: 16 / 9;
+  position: relative;
+}
+
+.floating-self-preview {
+  position: absolute;
+  right: 18px;
+  bottom: 18px;
+  width: min(24%, 150px);
+  aspect-ratio: 4 / 3;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
+  background: #16211a;
+}
+
+.floating-self-preview video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: scaleX(-1);
+}
+
+.floating-video-footer {
+  padding: 12px 14px 14px;
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+}
+
+.floating-video-footer-state {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  color: #4e5d53;
+  font-size: 13px;
+}
+
+.floating-video-footer-actions button {
+  background: #1d6a42;
+  color: #ffffff;
+}
+
+@media (max-width: 860px) {
+  .floating-video-window {
+    width: calc(100vw - 24px);
+    min-width: 0;
+    left: 12px !important;
+    top: 12px !important;
+  }
+
+  .floating-video-footer {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+</style>
--- a/client/src/components/VideoDock.vue
+++ b/client/src/components/VideoDock.vue
@@ -0,0 +1,204 @@
+<template>
+  <aside v-if="chatStore.hasVideoSessions" class="video-dock">
+    <section class="video-dock-card video-dock-card-self">
+      <div class="video-card-frame video-card-frame-self">
+        <video ref="selfVideoRef" autoplay muted playsinline></video>
+        <div v-if="!chatStore.selfPreviewStream" class="video-card-placeholder">
+          <strong>Eigene Vorschau</strong>
+          <span>Kamera nicht aktiv</span>
+        </div>
+      </div>
+      <div class="video-card-meta">
+        <strong>Du</strong>
+        <span>{{ chatStore.selfMuted ? 'Mikro aus' : 'Mikro an' }}</span>
+      </div>
+    </section>
+
+    <section
+      v-for="session in chatStore.dockVideoSessions"
+      :key="session.callId"
+      class="video-dock-card"
+    >
+      <div class="video-card-frame">
+        <VideoSessionSurface :session="session" :muted="true" />
+      </div>
+      <div class="video-card-meta">
+        <strong>{{ session.withUserName }}</strong>
+        <span>{{ session.remoteMuted ? 'Mikro aus' : 'Mikro an' }}</span>
+      </div>
+      <div class="video-card-actions">
+        <button type="button" @click="chatStore.bringVideoSessionToFront(session.callId)">
+          In den Vordergrund
+        </button>
+        <button
+          v-if="session.status === 'ringing' && session.initiatedBy !== chatStore.userName"
+          type="button"
+          class="secondary"
+          @click="chatStore.acceptVideoCall(session.callId)"
+        >
+          Annehmen
+        </button>
+        <button
+          v-else-if="session.status === 'ringing' && session.initiatedBy === chatStore.userName"
+          type="button"
+          class="secondary"
+          @click="chatStore.cancelVideoCall(session.callId)"
+        >
+          Abbrechen
+        </button>
+        <button
+          v-else-if="session.status === 'connecting' || session.status === 'active'"
+          type="button"
+          class="secondary"
+          @click="chatStore.endVideoCall(session.callId)"
+        >
+          Beenden
+        </button>
+        <button
+          v-if="session.status === 'ringing' && session.initiatedBy !== chatStore.userName"
+          type="button"
+          class="danger"
+          @click="chatStore.rejectVideoCall(session.callId)"
+        >
+          Ablehnen
+        </button>
+      </div>
+    </section>
+  </aside>
+</template>
+
+<script setup>
+import { onBeforeUnmount, ref, watch } from 'vue';
+import { useChatStore } from '../stores/chat';
+import VideoSessionSurface from './VideoSessionSurface.vue';
+
+const chatStore = useChatStore();
+const selfVideoRef = ref(null);
+
+watch(
+  () => chatStore.selfPreviewStream,
+  (stream) => {
+    if (selfVideoRef.value) {
+      selfVideoRef.value.srcObject = stream || null;
+    }
+  },
+  { immediate: true }
+);
+
+onBeforeUnmount(() => {
+  if (selfVideoRef.value) {
+    selfVideoRef.value.srcObject = null;
+  }
+});
+
+function statusLabel(status) {
+  switch (status) {
+    case 'ringing':
+      return 'Klingelt';
+    case 'connecting':
+      return 'Verbindet';
+    case 'active':
+      return 'Aktiv';
+    default:
+      return status;
+  }
+}
+</script>
+
+<style scoped>
+.video-dock {
+  width: min(20vw, 320px);
+  min-width: 220px;
+  max-width: 320px;
+  padding: 12px;
+  border-left: 1px solid #dfe6e1;
+  background: linear-gradient(180deg, #f5f8f6 0%, #edf3ef 100%);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.video-dock-card {
+  border: 1px solid #d5dfd8;
+  border-radius: 12px;
+  background: #ffffff;
+  overflow: hidden;
+  box-shadow: 0 10px 20px rgba(25, 39, 31, 0.07);
+}
+
+.video-card-frame {
+  aspect-ratio: 16 / 10;
+  background: #0e1511;
+  position: relative;
+}
+
+.video-card-frame video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: scaleX(-1);
+}
+
+.video-card-frame-self video {
+  object-fit: cover;
+}
+
+.video-card-meta {
+  padding: 10px 12px 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.video-card-meta strong {
+  color: #1d2821;
+  font-size: 14px;
+}
+
+.video-card-meta span {
+  color: #59685e;
+  font-size: 12px;
+}
+
+.video-card-actions {
+  padding: 0 12px 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.video-card-actions button {
+  min-height: 34px;
+  border: 0;
+  border-radius: 8px;
+  padding: 0 10px;
+  background: #1d6a42;
+  color: #ffffff;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.video-card-actions button.secondary {
+  background: #edf2ee;
+  color: #1d6a42;
+  border: 1px solid #c9d7cd;
+}
+
+.video-card-actions button.danger {
+  background: #a23333;
+}
+
+@media (max-width: 1100px) {
+  .video-dock {
+    width: 240px;
+    min-width: 240px;
+  }
+}
+
+@media (max-width: 860px) {
+  .video-dock {
+    display: none;
+  }
+}
+</style>
--- a/client/src/components/VideoSessionSurface.vue
+++ b/client/src/components/VideoSessionSurface.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="video-surface">
+    <video
+      v-show="remoteStream"
+      ref="videoRef"
+      autoplay
+      playsinline
+      :muted="muted"
+    ></video>
+    <div v-if="!remoteStream" class="video-surface-placeholder">
+      <strong>{{ session.withUserName }}</strong>
+      <span>{{ placeholderText }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { useChatStore } from '../stores/chat';
+
+const props = defineProps({
+  session: {
+    type: Object,
+    required: true
+  },
+  muted: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const chatStore = useChatStore();
+const videoRef = ref(null);
+
+const remoteStream = computed(() => chatStore.getRemoteStream(props.session.callId));
+const placeholderText = computed(() => {
+  switch (props.session.status) {
+    case 'ringing':
+      return 'Klingelt';
+    case 'connecting':
+      return 'Verbindet';
+    case 'active':
+      return 'Warte auf Videobild';
+    default:
+      return props.session.status || 'Verbinde';
+  }
+});
+
+watch(
+  remoteStream,
+  (stream) => {
+    if (videoRef.value) {
+      videoRef.value.srcObject = stream || null;
+    }
+  },
+  { immediate: true }
+);
+
+onBeforeUnmount(() => {
+  if (videoRef.value) {
+    videoRef.value.srcObject = null;
+  }
+});
+</script>
+
+<style scoped>
+.video-surface {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #09110d;
+}
+
+.video-surface video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background: #09110d;
+}
+
+.video-surface-placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #f7fff9;
+  gap: 6px;
+  text-align: center;
+  padding: 14px;
+}
+
+.video-surface-placeholder strong {
+  font-size: 17px;
+}
+
+.video-surface-placeholder span {
+  font-size: 13px;
+  opacity: 0.84;
+}
+</style>
--- a/client/src/stores/chat.js
+++ b/client/src/stores/chat.js
--- a/client/src/views/ChatView.vue
+++ b/client/src/views/ChatView.vue
@@ -108,6 +108,36 @@
                        <span v-if="currentUserInfo">{{ currentUserInfo.age }} · {{ currentUserInfo.gender }}</span>
                      </div>
                    </div>
+                    <div class="chat-header-actions">
+                      <button
+                        type="button"
+                        class="video-toggle-button"
+                        :class="{ 'is-active': chatStore.videoConsent.localConsent }"
+                        @click="chatStore.setVideoConsent(!chatStore.videoConsent.localConsent)"
+                      >
+                        {{ chatStore.videoConsent.localConsent ? 'Video erlaubt' : 'Video erlauben' }}
+                      </button>
+                      <button
+                        v-if="chatStore.videoConsent.videoVisible"
+                        type="button"
+                        class="video-call-button"
+                        :disabled="!chatStore.canStartVideoCall"
+                        @click="chatStore.inviteVideoCall()"
+                      >
+                        Videochat öffnen
+                      </button>
+                    </div>
+                  </div>
+                  <div v-if="chatStore.currentConversation" class="chat-video-status">
+                    <span>
+                      {{ chatStore.videoConsent.remoteConsent ? 'Partner hat Video freigegeben' : 'Partner hat Video noch nicht freigegeben' }}
+                    </span>
+                    <span v-if="chatStore.maxVideoConnectionsReached" class="chat-video-status-error">
+                      Maximal drei Videoverbindungen gleichzeitig erlaubt
+                    </span>
+                    <span v-else-if="chatStore.currentConversationVideoSession">
+                      {{ videoStatusLabel(chatStore.currentConversationVideoSession.status) }}
+                    </span>
                  </div>
                  <HeaderAdBanner v-if="chatStore.currentConversation" />
                  <ChatWindow />
@@ -115,9 +145,11 @@
                <ChatInput />
              </div>
            </div>
+            <VideoDock />
          </div>
        </section>
      </div>
+      <FloatingVideoWindow />
      <ImprintContainer />
    </template>

@@ -157,6 +189,8 @@ import InboxView from '../components/InboxView.vue';
 import HistoryView from '../components/HistoryView.vue';
 import ImprintContainer from '../components/ImprintContainer.vue';
 import HeaderAdBanner from '../components/HeaderAdBanner.vue';
+import VideoDock from '../components/VideoDock.vue';
+import FloatingVideoWindow from '../components/FloatingVideoWindow.vue';

 const chatStore = useChatStore();

@@ -202,6 +236,19 @@ onMounted(async () => {
    }
  }
 });
+
+function videoStatusLabel(status) {
+  switch (status) {
+    case 'ringing':
+      return 'Videoanruf klingelt';
+    case 'connecting':
+      return 'Videoanruf verbindet';
+    case 'active':
+      return 'Videoanruf aktiv';
+    default:
+      return '';
+  }
+}
 </script>

 <style scoped>
@@ -358,4 +405,92 @@ onMounted(async () => {
  position: sticky;
  top: 0;
 }
+
+.horizontal-box-app {
+  align-items: stretch;
+}
+
+.chat-content {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+}
+
+.chat-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.chat-header-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.chat-header-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.chat-header-actions button {
+  min-height: 38px;
+  border: 0;
+  border-radius: 9px;
+  padding: 0 14px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.video-toggle-button {
+  background: #edf2ee;
+  color: #265437;
+  border: 1px solid #c8d6cd;
+}
+
+.video-toggle-button.is-active {
+  background: #dff0e5;
+  color: #1c6037;
+}
+
+.video-call-button {
+  background: #1d6a42;
+  color: #ffffff;
+}
+
+.video-call-button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.chat-video-status {
+  margin: 10px 0 14px;
+  border: 1px solid #d8e0da;
+  border-radius: 10px;
+  padding: 10px 12px;
+  background: #f8fbf9;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 16px;
+  color: #516257;
+  font-size: 13px;
+}
+
+.chat-video-status-error {
+  color: #9f2c2c;
+  font-weight: 700;
+}
+
+@media (max-width: 860px) {
+  .chat-header {
+    flex-wrap: wrap;
+  }
+
+  .chat-header-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+}
 </style>