/* Shared attachment cards: native button focus/keyboard behavior, no nested controls. */
.msgr-video-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 260px;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 0 10px;
  margin: 4px 0;
  border: 1px solid var(--m-line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--m-surface);
  color: var(--m-video-ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.msgr-video-card:focus-visible { outline: 3px solid var(--m-brand); outline-offset: 3px; }
.msgr-video-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 88px;
  overflow: hidden;
  background: var(--m-video-stage);
  color: var(--m-video-stage-ink);
}
.msgr-video-frame { display: block; width: 100%; height: 100%; object-fit: contain; }
.msgr-video-frame[hidden], .msgr-video-placeholder[hidden] { display: none; }
.msgr-video-placeholder { font-size: var(--fs-base, 14px); }
.msgr-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--m-video-play-line);
  border-radius: 50%;
  background: var(--m-video-play-bg);
  color: var(--m-video-on-control);
  font-size: 20px;
}
.msgr-video-name, .msgr-video-meta, .msgr-video-card > .msgr-video-status { display: block; padding: 0 10px; max-width: 100%; box-sizing: border-box; }
.msgr-video-name { font-size: var(--fs-base, 14px); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgr-video-meta, .msgr-video-card > .msgr-video-status { color: var(--m-ink-2); font-size: var(--fs-meta, 12px); line-height: 1.45; overflow-wrap: anywhere; }

/* Staff viewer, built by the side module. */
.msgr-video-viewer { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; background: var(--m-video-scrim); }
.msgr-video-dialog { display: flex; flex-direction: column; gap: 12px; width: 960px; max-width: 100%; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); min-height: 0; padding: 16px; box-sizing: border-box; overflow: auto; border: 1px solid var(--m-video-dialog-line); border-radius: 16px; background: var(--m-video-dialog); color: var(--m-video-on-dialog); }
.msgr-video-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.msgr-video-title { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-title, 16px); font-weight: 600; overflow-wrap: anywhere; }
.msgr-video-close { flex: 0 0 auto; min-width: 44px; min-height: 44px; border: 1px solid var(--m-video-line); border-radius: 8px; background: var(--m-video-close); color: var(--m-video-on-dialog); font: inherit; cursor: pointer; }
.msgr-video-player { display: block; width: 100%; max-width: 100%; min-height: 0; max-height: 60vh; max-height: 60dvh; object-fit: contain; background: var(--m-video-player); }
.msgr-video-dialog > .msgr-video-status { color: var(--m-video-stage-ink); font-size: var(--fs-base, 14px); line-height: 1.5; overflow-wrap: anywhere; }
.msgr-video-download { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 44px; padding: 0 14px; border: 1px solid var(--m-video-line); border-radius: 8px; color: var(--m-on-badge); background: var(--m-video-download); font-size: var(--fs-base, 14px); text-decoration: none; }
.msgr-video-close:focus-visible, .msgr-video-download:focus-visible { outline: 3px solid var(--m-video-focus); outline-offset: 3px; }