/* 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 #cbd5e1;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  color: #172033;
  text-align: left;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.msgr-video-card:focus-visible { outline: 3px solid #2563eb; 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: #172033;
  color: #e2e8f0;
}
.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 #ffffff80;
  border-radius: 50%;
  background: #0f172acc;
  color: #fff;
  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: #475569; 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: #020617d9; }
.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 #475569; border-radius: 16px; background: #0f172a; color: #f8fafc; }
.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 #64748b; border-radius: 8px; background: #1e293b; color: #f8fafc; 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: #000; }
.msgr-video-dialog > .msgr-video-status { color: #e2e8f0; 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 #64748b; border-radius: 8px; color: #fff; background: #334155; font-size: var(--fs-base, 14px); text-decoration: none; }
.msgr-video-close:focus-visible, .msgr-video-download:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }