/* Video meetings (12VIDEO) - the meeting window (notification plugin, customClass vm-window).
   The call is an <iframe>, and an iframe swallows mouse movement: while the window is being
   dragged or resized, the pointer passing over the video would stop the drag. The plugin
   marks those moments with these two classes. */
.vm-window.notification-dragging iframe,
.vm-window.notification-resizing iframe { pointer-events: none; }

/* PHONES (Bill, 2026-10-14: "how will this look on a phone?"). Beside the call, the Invite and Guests
   panels left both too narrow to use. Below Bootstrap's md width a panel COVERS the call instead (the
   call keeps running underneath - nobody drops out) and "Back to the call" shows it again. The invite
   tree and "Who that is" stack. Theme tokens only. */
.vm-window .vm-back { display: none; }
.vm-window .vm-back .vm-back-dock { display: none; }
/* docked bar (a computer): the panels close with "Done" (Bill, 2026-10-15: "not obvious how to shrink this again") */
.vm-window.vm-docked .vm-back { display: inline-block; }
.vm-window.vm-docked .vm-back .vm-back-phone { display: none; }
.vm-window.vm-docked .vm-back .vm-back-dock { display: inline; }
@media (max-width: 767.98px) {
  .vm-window .vm-body > .vm-side {
    position: absolute; inset: 0; z-index: 5;
    width: 100% !important; max-width: none !important;
    padding: 0 !important; border: 0 !important;
    background: var(--bs-body-bg);
    overflow: auto;
  }
  .vm-window .vm-back { display: inline-block; }
  .vm-window .vm-invite-cols { flex-direction: column; }
  .vm-window .vm-invite-cols > .vm-invite-tree { width: 100% !important; height: 45vh; flex: 0 0 auto; }
}

/* 12VIDEO-DOCK (Bill, 2026-10-15: "the original modal is still there in the way"). On a computer the
   call lives in its own browser window; the Wezi meeting window shrinks to a bar docked bottom-right
   (the plugin sizes and centres the window inline, hence !important). Invite / Guests widen it while
   open. The video stage is hidden while docked. Theme tokens only. */
.vm-window.vm-docked {
  top: auto !important; left: auto !important;
  /* dragged by its title bar: an offset from the bottom-right corner (dockDrag) */
  right: calc(16px - var(--vm-dx, 0px)) !important; bottom: calc(16px - var(--vm-dy, 0px)) !important;
  transform: none !important;
  width: min(760px, calc(100vw - 32px)) !important; height: auto !important; min-height: 0 !important;
}
.vm-window.vm-docked [id^="vmRoot"] { height: auto !important; min-height: 0 !important; }
.vm-window.vm-docked [data-vm="stage"] { display: none !important; }
.vm-window.vm-docked .notification-resize-handle { display: none; }
.vm-window.vm-docked.vm-panel-open { height: min(75vh, 680px) !important; }
.vm-window.vm-docked.vm-panel-open [id^="vmRoot"] { height: 100% !important; }
.vm-window.vm-docked .vm-body > .vm-side { width: 100% !important; max-width: none !important; border: 0 !important; padding-left: 0 !important; }
/* the docked bar's title bar is its handle; the call's iframe must not swallow the pointer meanwhile */
.vm-window.vm-docked .notification-header { cursor: move; user-select: none; }
.vm-window.vm-dragging iframe { pointer-events: none; }