html, body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important; }

/* Helferklassen (JS setzt diese) */
.mmxd-own-camera {
  outline: 2px solid rgba(255,255,255,0.25) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 22px rgba(0,0,0,0.35) !important;
  position: relative !important;
}
.mmxd-webrtc-in {
  outline: 2px solid rgba(0,255,170,0.35) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 22px rgba(0,0,0,0.35) !important;
  position: relative !important;
}

/* Optional: Labels */
.mmxd-own-camera::before {
  content: "Eigene Kamera";
  position: absolute; top: 10px; left: 10px;
  padding: 6px 10px; font-size: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.9);
  z-index: 999999; pointer-events: none;
}
.mmxd-webrtc-in::before {
  content: "WebRTC Input";
  position: absolute; top: 10px; left: 10px;
  padding: 6px 10px; font-size: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.9);
  z-index: 999999; pointer-events: none;
}

/* Overlay-Helfer (Menu ist bei dir schon weg) */
.mmxd-hide { display:none !important; }
.mmxd-hide-visibility { opacity:0 !important; pointer-events:none !important; }

/* -----------------------------------------
   DIREKT: localVideo / remoteVideo stylen
   -> entfernt roten Rahmen / outline / border
----------------------------------------- */

/* localVideo: roten Rahmen überschreiben */
#localVideo, video#localVideo {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* remoteVideo: falls remoteVideo selbst Rahmen hat */
#remoteVideo, video#remoteVideo {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Falls der rote Rahmen am CONTAINER hängt, nicht am <video>:
   wir stylen das Parent-Element über Klassen, die JS setzt
*/

/* --- FIX: remove red border/outline/shadow on local container (#user-video) --- */
#user-video {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Sometimes jQuery UI adds focus outlines or shadows */
#user-video.ui-resizable,
#user-video.ui-draggable {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* If the red frame is on resizable handles, hide or neutralize them */
#user-video .ui-resizable-handle {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* As a last resort: nuke any outline/border inside that tile */
#user-video, #user-video * {
  outline-color: transparent !important;
  border-color: transparent !important;
}

/* --- REMOVE LABELS COMPLETELY --- */
.mmxd-own-camera::before,
.mmxd-webrtc-in::before {
  content: none !important;
  display: none !important;
}

/* --- LOCAL VIDEO: 2x SIZE --- */
#user-video {
  transform: scale(2);
  transform-origin: top left;
}

/* Prevent side-effects */
#user-video video {
  width: 100%;
  height: 100%;
}

/* -------------------------------------------------
   ROUNDED CORNERS FINE-TUNING
------------------------------------------------- */

/* REMOTE VIDEO: completely square (no rounding) */
.mmxd-webrtc-in,
.mmxd-webrtc-in video {
  border-radius: 0 !important;
}

/* LOCAL VIDEO: keep rounding, but softer */
#user-video,
#user-video video {
  border-radius: 6px !important;   /* vorher ~14px, jetzt dezenter */
}

/* -------------------------------------------------
   REMOVE GREEN OUTLINE / BORDER FROM REMOTE VIDEO
------------------------------------------------- */

/* Container + Video selbst */
.mmxd-webrtc-in,
.mmxd-webrtc-in video {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Falls der Rahmen als inset-shadow kommt */
.mmxd-webrtc-in {
  box-shadow: none !important;
  filter: none !important;
}

/* Falls ein Pseudo-Element den Rahmen malt */
.mmxd-webrtc-in::before,
.mmxd-webrtc-in::after {
  content: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Absolute Notbremse: alles im Remote-Container neutralisieren */
.mmxd-webrtc-in * {
  outline-color: transparent !important;
  border-color: transparent !important;
}

/* -------------------------------------------------
   LOCAL VIDEO TOGGLE BUTTON (bottom-left)
------------------------------------------------- */

#mmxd-local-toggle {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 9999999;

  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;

  background: rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.85);

  border-radius: 6px;
  border: none;
  cursor: pointer;

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  opacity: 0.55;
  transition: opacity 0.2s ease;
}

#mmxd-local-toggle:hover {
  opacity: 1;
}

/* Hidden state for local video */
.mmxd-local-hidden {
  display: none !important;
}

/* -------------------------------------------------
   LOCAL VIDEO TOGGLE – ICON + MOUSEMOVE
------------------------------------------------- */

#mmxd-local-toggle {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 9999999;

  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.85);

  border-radius: 50%;
  border: none;
  cursor: pointer;

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* visible on mouse move */
#mmxd-local-toggle.mmxd-show {
  opacity: 0.7;
  pointer-events: auto;
}

#mmxd-local-toggle:hover {
  opacity: 1;
}

/* icon size */
#mmxd-local-

/* -------------------------------------------------
   LOCAL VIDEO TOGGLE – ICON + MOUSEMOVE
------------------------------------------------- */

#mmxd-local-toggle {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 9999999;

  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.85);

  border-radius: 50%;
  border: none;
  cursor: pointer;

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* visible on mouse move */
#mmxd-local-toggle.mmxd-show {
  opacity: 0.7;
  pointer-events: auto;
}

#mmxd-local-toggle:hover {
  opacity: 1;
}

/* icon size */
#mmxd-local-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* hidden state for local video */
.mmxd-local-hidden {
  display: none !important;
}

/* -------------------------------------------------
   LOCAL POSITION + SIZE TWEAK
   - 20% smaller than current 2x => 1.6x
   - shift to the right so it starts after remote area
------------------------------------------------- */

#user-video {
  /* size: 2.0 -> 1.6 (20% smaller) */
  transform: translateX(120px) scale(1.6) !important;

  /* anchor */
  transform-origin: top left !important;
}

/* -------------------------------------------------
   LOCAL POSITION + SIZE TWEAK
   - 20% smaller than current 2x => 1.6x
   - shift to the right so it starts after remote area
------------------------------------------------- */

#user-video {
  /* size: 2.0 -> 1.8 (10% smaller) */
  transform: translateX(60px) scale(1.8) !important;

  /* anchor */
  transform-origin: top left !important;
}

/* -------------------------------------------------
   LOCAL POSITION + SIZE TWEAK
   - 20% smaller than current 2x => 1.6x
   - shift to the right so it starts after remote area
------------------------------------------------- */

#user-video {
  /* size: 2.0 -> 1.8 (10% smaller) */
  transform: translateX(10px) scale(1.8) !important;

  /* anchor */
  transform-origin: top left !important;
}

/* -------------------------------------------------
   LOCAL POSITION + SIZE TWEAK
   - 20% smaller than current 2x => 1.6x
   - shift to the right so it starts after remote area
------------------------------------------------- */

#user-video {
  /* size: 2.0 -> 1.8 (10% smaller) */
  transform: translateX(0px) scale(1.8) !important;

  /* anchor */
  transform-origin: top left !important;
}

/* -------------------------------------------------
   LOCAL POSITION + SIZE TWEAK
   - 20% smaller than current 2x => 1.6x
   - shift to the right so it starts after remote area
------------------------------------------------- */

#user-video {
  /* size: 2.0 -> 1.8 (10% smaller) */
  transform: translateX(-15px) scale(1.8) !important;

  /* anchor */
  transform-origin: top left !important;
}

/* -------------------------------------------------
   LOCAL POSITION + SIZE TWEAK
   - 20% smaller than current 2x => 1.6x
   - shift to the right so it starts after remote area
------------------------------------------------- */

#user-video {
  /* size: 2.0 -> 1.8 (10% smaller) */
  transform: translateX(-20px) scale(1.7) !important;

  /* anchor */
  transform-origin: top left !important;
}

/* -------------------------------------------------
   LOCAL POSITION + SIZE TWEAK
   - 20% smaller than current 2x => 1.6x
   - shift to the right so it starts after remote area
------------------------------------------------- */

#user-video {
  /* size: 2.0 -> 1.8 (10% smaller) */
  transform: translateX(-17px) scale(1.75) !important;

  /* anchor */
  transform-origin: top left !important;
}

/* -------------------------------------------------
   SECOND BUTTON (screenshare) – same style, above local
------------------------------------------------- */

/* local button stays at bottom:14px; screenshare goes above it */
#mmxd-screenshare-toggle {
  position: fixed;
  left: 14px;
  bottom: 58px;               /* 14px + (36px button) + ~8px gap */
  z-index: 9999999;

  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.85);

  border-radius: 50%;
  border: none;
  cursor: pointer;

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

#mmxd-screenshare-toggle.mmxd-show {
  opacity: 0.7;
  pointer-events: auto;
}

#mmxd-screenshare-toggle:hover {
  opacity: 1;
}

#mmxd-screenshare-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Optional: show "active" state a bit brighter */
#mmxd-screenshare-toggle.mmxd-active {
  opacity: 1 !important;
}