.mc-chat-self-preview {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.mc-chat-info .mc-local-tile.mc-local-tile-sidebar {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  margin: 0 !important;
  border-radius: 14px;
  overflow: hidden;
  cursor: default !important;
  transform: none !important;
  z-index: auto !important;
}

.mc-chat-info .mc-local-tile.mc-local-tile-sidebar video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



/* Chat page isolation: do not show the old public-site footer/CTA below Chat. */
.mc-mi-connect,
.site-footer,
.mc-footer,
.mc-footer--michigan {
  display: none !important;
}

/* Incoming-video full screen.
   Browser full screen applies to rtc-stage only, so the remote video fills
   the screen without changing any media stream or WebRTC resolution. */
#rtc-stage:fullscreen,
#rtc-stage:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: none !important;
  background: #000 !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
}

#rtc-stage:fullscreen .mc-remote-video,
#rtc-stage:fullscreen .mc-screen-video,
#rtc-stage:-webkit-full-screen .mc-remote-video,
#rtc-stage:-webkit-full-screen .mc-screen-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
}

/* Full-screen-only controls stay accessible after the normal call toolbar
   disappears outside the fullscreen element. */
.mc-stage-fullscreen-tools {
  position: fixed;
  top: 18px;
  left: 18px;
  right: auto;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: calc(100vw - 36px);
}

.mc-stage-fullscreen-tools[hidden] {
  display: none !important;
}

.mc-stage-fullscreen-tools button {
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 10px;
  padding: 10px 14px;
  background: rgba(10,18,25,.82);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.mc-stage-fullscreen-tools button:hover {
  background: rgba(25,40,52,.95);
}

/* The right-column You preview becomes a movable PiP only while rtc-stage
   is actually in browser full-screen mode. */
#rtc-stage:fullscreen .mc-local-tile.is-fullscreen-you,
#rtc-stage:-webkit-full-screen .mc-local-tile.is-fullscreen-you {
  position: absolute !important;
  width: min(24vw, 300px) !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  max-width: 300px !important;
  margin: 0 !important;
  border: 2px solid rgba(255,255,255,.85) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  z-index: 25 !important;
  cursor: grab !important;
  transform: none !important;
  touch-action: none;
  background: #111 !important;
}

#rtc-stage:fullscreen .mc-local-tile.is-fullscreen-you.is-dragging,
#rtc-stage:-webkit-full-screen .mc-local-tile.is-fullscreen-you.is-dragging {
  cursor: grabbing !important;
}

#rtc-stage:fullscreen .mc-local-tile.is-fullscreen-you video,
#rtc-stage:-webkit-full-screen .mc-local-tile.is-fullscreen-you video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Live text messaging during video calls.
   The panel is OUTSIDE the old video-window container and sits immediately
   below the call controls as a normal center-column block. */
.mc-video-message-drawer.mc-video-message-below-window {
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  display: flex;
  flex-direction: column;
  width: 100% !important;
  height: 160px !important;
  min-height: 160px !important;
  max-height: 160px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 0 !important;
  background: #101820 !important;
  color: #fff !important;
  box-shadow: none !important;
}

.mc-video-message-drawer.mc-video-message-below-window[hidden] {
  display: none !important;
}

.mc-video-message-below-window .mc-video-message-head {
  flex: 0 0 48px !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  color: #fff !important;
}

.mc-video-message-below-window .mc-video-message-head > div {
  min-width: 0 !important;
}

.mc-video-message-below-window .mc-video-message-head strong {
  display: inline !important;
  color: #fff !important;
  font-size: 15px !important;
}

.mc-video-message-below-window .mc-video-message-head span {
  display: inline !important;
  margin-left: 8px !important;
  color: rgba(255,255,255,.68) !important;
  font-size: 12px !important;
}

.mc-video-message-below-window .mc-video-message-head button {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  font-size: 20px !important;
  line-height: 32px !important;
  cursor: pointer !important;
}

.mc-video-message-below-window .mc-video-message-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: block !important;
  overflow-y: auto !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  color: #fff !important;
}

.mc-video-message-below-window .mc-video-message-status {
  display: block !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  color: rgba(255,255,255,.68) !important;
  text-align: center !important;
  font-size: 13px !important;
}

.mc-video-message-below-window .mc-video-message-row {
  display: flex !important;
  margin: 0 0 8px !important;
}

.mc-video-message-below-window .mc-video-message-row.is-mine {
  justify-content: flex-end !important;
}

.mc-video-message-below-window .mc-video-message-bubble {
  display: block !important;
  max-width: 78% !important;
  padding: 8px 10px !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
}

.mc-video-message-below-window .mc-video-message-row.is-mine .mc-video-message-bubble {
  background: #1688bf !important;
}

.mc-video-message-below-window .mc-video-message-bubble p {
  display: block !important;
  margin: 0 !important;
  color: #fff !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}

.mc-video-message-below-window .mc-video-message-bubble time {
  display: block !important;
  margin-top: 3px !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 10px !important;
  text-align: right !important;
}

.mc-video-message-below-window .mc-video-message-compose {
  flex: 0 0 58px !important;
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  background: #101820 !important;
}

.mc-video-message-below-window .mc-video-message-compose textarea {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  resize: none !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 9px !important;
  background: rgba(0,0,0,.22) !important;
  color: #fff !important;
  font: inherit !important;
}

.mc-video-message-below-window .mc-video-message-compose button {
  min-width: 72px !important;
  height: 42px !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #1688bf !important;
  color: #fff !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

@media (max-height: 800px) {
  .mc-video-message-drawer.mc-video-message-below-window {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
  }
}


/* DEMO shell recovery 2026-08-09: Devices panel must sit above the fixed
   right contact/profile rail. Presentation only; device/WebRTC logic unchanged. */
.mc-chat-video-pane #rtc-side-panel.mc-side-panel {
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  left: auto !important;
  width: min(360px, calc(100vw - 36px)) !important;
  max-width: calc(100vw - 36px) !important;
  z-index: 100000 !important;
  overflow: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 760px) {
  .mc-chat-video-pane #rtc-side-panel.mc-side-panel {
    top: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }
}