/* VW_WATCH_TOGETHER_CHAT_GIF_FULL_PREVIEW_V3_5R18 */

#chatMessages .msg-gif .chat-gif-media{
  cursor:zoom-in;
  outline:none;
  -webkit-tap-highlight-color:transparent;
}
#chatMessages .msg-gif .chat-gif-media:focus-visible{
  box-shadow:0 0 0 2px rgba(139,108,255,.72);
}
body.vw-gif-preview-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
.gif-full-preview[hidden]{display:none!important}
.gif-full-preview{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  padding:
    max(8px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  box-sizing:border-box;
  overflow:hidden;
  background:rgba(3,5,9,.97);
  color:#f5f7fb;
  opacity:0;
  transition:opacity .16s ease;
}
.gif-full-preview.open{opacity:1}
.gif-full-preview-backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 40%,rgba(89,68,147,.11),transparent 42%),
    rgba(3,5,9,.9);
  pointer-events:none;
}
.gif-full-preview-head,
.gif-full-preview-stage,
.gif-full-preview-meta{
  position:relative;
  z-index:1;
  min-width:0;
}
.gif-full-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:42px;
  padding:1px 0 7px;
}
.gif-full-preview-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:72px;
  min-height:38px;
  padding:0 11px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:rgba(15,18,26,.88);
  color:#f2f4f8;
  font-size:11px;
  font-weight:800;
  line-height:1;
}
.gif-full-preview-back>span{font-size:17px;line-height:1}
.gif-full-preview-back>b{font:inherit}
.gif-full-preview-status{
  min-width:0;
  max-width:55%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#929cab;
  font-size:9px;
  font-weight:700;
  text-align:right;
}
.gif-full-preview-stage{
  display:grid;
  place-items:center;
  min-height:0;
  overflow:hidden;
  border-radius:14px;
}
.gif-full-preview-image{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  border-radius:12px;
  user-select:none;
  -webkit-user-drag:none;
}
.gif-full-preview-loader{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  pointer-events:none;
}
.gif-full-preview-loader[hidden]{display:none!important}
.gif-full-preview-loader>i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#777f8d;
  opacity:.36;
  animation:vwGifPreviewPulse 1.05s ease-in-out infinite;
}
.gif-full-preview-loader>i:nth-child(2){animation-delay:.13s}
.gif-full-preview-loader>i:nth-child(3){animation-delay:.26s}
@keyframes vwGifPreviewPulse{
  0%,100%{transform:scale(.78);opacity:.28}
  50%{transform:scale(1);opacity:.9}
}
.gif-full-preview-error{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:210px;
  max-width:82%;
  padding:26px 18px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  background:rgba(13,16,22,.82);
  text-align:center;
}
.gif-full-preview-error[hidden]{display:none!important}
.gif-full-preview-error>span{
  display:grid;
  place-items:center;
  width:44px;
  height:32px;
  border:1px solid rgba(138,108,255,.28);
  border-radius:9px;
  color:#a998ff;
  font-size:10px;
  font-weight:900;
}
.gif-full-preview-error>b{
  margin-top:4px;
  color:#e6eaf1;
  font-size:13px;
}
.gif-full-preview-error>small{
  color:#8791a0;
  font-size:10px;
  line-height:1.35;
}
.gif-full-preview-error-back{
  min-height:34px;
  margin-top:7px;
  padding:0 12px;
  border:1px solid rgba(132,94,255,.3);
  border-radius:10px;
  background:rgba(119,75,255,.12);
  color:#d9d1ff;
  font-size:10px;
  font-weight:800;
}
.gif-full-preview-meta{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  min-height:48px;
  padding:8px 2px 1px;
}
.gif-full-preview-identity{
  display:flex;
  align-items:baseline;
  gap:7px;
  min-width:0;
}
.gif-full-preview-name{
  max-width:min(54vw,260px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#e8ebf2;
  font-size:11px;
  font-weight:800;
}
.gif-full-preview-name[hidden]{display:none!important}
.gif-full-preview-time{
  flex:0 0 auto;
  color:#7f8998;
  font-size:9px;
  font-weight:700;
  white-space:nowrap;
}
.gif-full-preview-save-wrap{flex:0 0 auto}
.gif-full-preview-save-wrap[hidden]{display:none!important}
.gif-full-preview-save{
  min-height:35px;
  padding:0 12px;
  border:1px solid rgba(132,94,255,.34);
  border-radius:99px;
  background:rgba(119,75,255,.13);
  color:#d9d1ff;
  font-size:9px;
  font-weight:850;
  white-space:nowrap;
}
.gif-full-preview-save:disabled{opacity:.64}
.gif-full-preview-save.saved{
  border-color:rgba(93,184,128,.25);
  background:rgba(58,130,84,.12);
  color:#bde7ca;
}

@media(max-width:980px){
  .gif-full-preview{
    padding:
      max(7px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }
  .gif-full-preview-head{min-height:40px;padding-bottom:5px}
  .gif-full-preview-back{min-width:66px;min-height:36px;padding:0 9px}
  .gif-full-preview-stage{border-radius:10px}
  .gif-full-preview-image{border-radius:9px}
  .gif-full-preview-meta{min-height:45px;padding-top:6px}
  .gif-full-preview-save{min-height:33px;padding:0 10px}
}
@media(max-width:380px){
  .gif-full-preview-name{max-width:42vw}
  .gif-full-preview-meta{gap:6px}
  .gif-full-preview-save{padding:0 9px;font-size:8.5px}
}
@media(prefers-reduced-motion:reduce){
  .gif-full-preview{transition:none}
  .gif-full-preview-loader>i{animation:none;opacity:.55}
}