.chatVideoExpand {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(transparent, #0005);
  color: #fff;
  font: 600 14px/1.2 system-ui, sans-serif;
  cursor: pointer;
}
.chatVideoThumbnail { position: relative; width: min(100%, 300px); min-width: 120px; border-radius: 12px; overflow: hidden; background: #102d43; }
.chatVideoThumbnail video.chatMediaVideo { width: 100%; max-height: 280px; min-height: 140px; }
.chatVideoExpand span { padding: 4px 9px; border-radius: 8px; background: #084c76; color: white; }
#vobixVideoViewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  color: #fff;
  overflow: hidden;
  overscroll-behavior: contain;
  box-sizing: border-box;
}
#vobixVideoViewer[open] { display: flex; flex-direction: column; }
#vobixVideoViewer::backdrop { background: #000; }
#vobixVideoViewer .chatVideoViewerToolbar {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
}
#vobixVideoViewer button {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #697784;
  border-radius: 12px;
  background: #18232c;
  color: #fff;
  font: 600 14px/1.2 system-ui, sans-serif;
  cursor: pointer;
}
#vobixVideoViewer .chatVideoViewerTitle {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 14px/1.4 system-ui, sans-serif;
}
#vobixVideoViewer .chatVideoViewerStage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#vobixVideoViewer video.chatMediaVideo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: #000;
}

/* Compact document cards keep the filename and action legible on a phone. */
body.vobixConversation .chatDocumentLink {
  width: min(100%, 300px);
  box-sizing: border-box;
  gap: 10px;
  padding: 11px;
  border: 1px solid #b8d7ed;
  border-radius: 12px;
  font: 600 14px/1.35 system-ui, sans-serif;
}
body.vobixConversation .chatDocumentIcon { flex: 0 0 32px; font-size: 0; }
body.vobixConversation .chatDocumentInfo { flex: 1 1 auto; gap: 5px; }
body.vobixConversation .chatDocumentName { font-size: 14px; overflow-wrap: anywhere; }
body.vobixConversation .chatDocumentPreviewLabel { color: #0879c1; font-size: 12px; font-weight: 600; }
body.vobixConversation .chatDocumentDetails { font-size: 11px; }
body.vobixConversation .chatDocumentInfo .chatAttachmentMeta { color: #46647b; }

#vobixPdfViewer {
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0; border-radius: 0;
  width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none;
  box-sizing: border-box; background: #edf5fa; color: #183a50; overflow: hidden;
}
#vobixPdfViewer[open] { display: flex; flex-direction: column; }
#vobixPdfViewer::backdrop { background: #15364d; }
#vobixPdfViewer .chatPdfToolbar {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px; background: #fff; border-bottom: 1px solid #cbdfed;
}
#vobixPdfViewer .chatPdfToolbar strong { flex: 1 1 150px; font: 600 14px/1.4 system-ui,sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vobixPdfViewer button { min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid #b4d6ed; border-radius: 10px; background: #fff; color: #09699e; font: 600 14px/1.2 system-ui,sans-serif; cursor: pointer; }
#vobixPdfViewer button:disabled { opacity: .35; cursor: default; }
#vobixPdfViewer .chatPdfStatus { margin: 0; padding: 8px 12px; flex: 0 0 auto; font: 13px/1.4 system-ui,sans-serif; text-align: center; }
#vobixPdfViewer .chatPdfStage { flex: 1 1 0; min-height: 0; overflow: auto; padding: 12px; overscroll-behavior: contain; }
#vobixPdfViewer canvas { display: block; margin: 0 auto; background: #fff; box-shadow: 0 2px 12px #163f5820; }
#vobixPdfViewer .chatPdfControls { flex: 0 0 auto; display: flex; justify-content: center; gap: 6px; padding: 8px 8px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid #cbdfed; background: #fff; }

/* Chat playback uses the full viewport, with controls over the media. */
#vobixVideoViewer .chatVideoViewerStage{position:absolute;inset:0;padding:0;}
#vobixVideoViewer .chatVideoViewerToolbar{position:absolute;top:0;left:0;right:0;z-index:2;background:linear-gradient(#0009,transparent);}
html.vobixInstalled #vobixVideoViewer .chatVideoViewerToolbar{padding-top:max(28px,var(--vobix-safe-top,28px));}
#vobixVideoViewer video.chatMediaVideo{width:100%;height:100%;object-fit:contain;background:#000;}
@layer vobixLight{
 body #vobixVideoViewer,body #vobixVideoViewer .chatVideoViewerStage,body #vobixVideoViewer video.chatMediaVideo{background:#000!important;}
}