/*
 * VW_WATCH_TOGETHER_NORMALIZED_GIF_CHAT_V3_5
 * My GIFs + Recent + Room GIFs.
 */

.gif-tray[hidden],
.gif-file-input{display:none!important}

.gif-picker-btn{
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  min-width:44px;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;
  background:#101620;
  color:#d5dce8;
  font:900 10px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.gif-picker-btn>span{
  display:grid;
  place-items:center;
  width:28px;
  height:21px;
  border:1.5px solid currentColor;
  border-radius:5px;
}
.gif-picker-btn.active{
  color:#fff;
  border-color:rgba(132,94,255,.72);
  background:rgba(119,75,255,.22);
}

.gif-tray{
  flex:0 0 auto;
  width:100%;
  min-width:0;
  max-height:min(405px,49dvh);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  margin-top:6px;
  padding-top:5px;
  border-top:1px solid rgba(255,255,255,.075);
  background:#070a0f;
}

.gif-tray-handle{
  flex:0 0 auto;
  width:34px;
  height:4px;
  margin:0 auto 6px;
  border-radius:99px;
  background:rgba(255,255,255,.18);
}

.gif-tray-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 1px 7px;
}
.gif-title-block{min-width:0;display:flex;align-items:baseline;gap:7px}
.gif-title-block b{color:#f5f7fb;font-size:14px}
.gif-title-block small{color:#778291;font-size:9px;white-space:nowrap}
.gif-tray-actions{display:flex;align-items:center;gap:5px}
.gif-tray-actions button{
  min-height:32px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:#111720;
  color:#b9c2cf;
  font-size:10px;
  font-weight:750;
}
.gif-tray-actions .gif-upload-head{color:#ddd7ff;border-color:rgba(124,85,255,.35)}
.gif-tray-actions .gif-close-btn{width:32px;padding:0;font-size:20px;line-height:1}

.gif-search-box{
  flex:0 0 auto;
  height:36px;
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:6px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:#11151c;
}
.gif-search-box>span{color:#8993a2;font-size:18px}
.gif-search-box input{
  width:100%;
  min-width:0;
  height:34px;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:#edf1f7!important;
  font-size:16px!important;
}
.gif-search-box input::placeholder{color:#667282}

.gif-tabs{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  margin-bottom:6px;
  padding:3px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:#0c1118;
}
.gif-tabs button{
  min-width:0;
  min-height:34px;
  padding:0 7px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#7f8998;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}
.gif-tabs button.active{background:#181d27;color:#f3f5fa}
.gif-tabs em{
  display:inline-grid;
  place-items:center;
  min-width:17px;
  height:17px;
  margin-left:3px;
  padding:0 4px;
  border-radius:99px;
  background:rgba(255,255,255,.065);
  color:#9ca7b7;
  font-style:normal;
  font-size:8px;
}
.gif-tabs button.active em{background:rgba(124,85,255,.2);color:#cabdff}

.gif-grid{
  min-height:0;
  flex:1 1 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:116px;
  gap:5px;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:0 1px 5px;
}
.gif-grid.busy{opacity:.6;pointer-events:none}
.gif-grid.only-upload{display:none}

.gif-upload-tile,
.gif-tile{
  position:relative;
  min-width:0;
  min-height:110px;
  overflow:hidden;
  border-radius:11px;
  background:#11161e;
}
.gif-upload-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  border:1px dashed rgba(137,111,255,.46);
  color:#9f89ff;
}
.gif-upload-tile>span{font-size:27px;line-height:1}
.gif-upload-tile b{color:#ded8ff;font-size:11px}
.gif-upload-tile small{color:#798394;font-size:8px}

.gif-tile{border:0}
.gif-tile-send{
  display:block;
  width:100%;
  height:100%;
  min-height:110px;
  padding:0;
  border:0;
  background:#11161e;
}
.gif-tile-send img{
  display:block;
  width:100%;
  height:100%;
  min-height:110px;
  object-fit:cover;
}
.gif-tile-meta{
  position:absolute;
  left:5px;
  bottom:5px;
  z-index:2;
  max-width:calc(100% - 10px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:3px 6px;
  border-radius:99px;
  background:rgba(0,0,0,.61);
  color:rgba(255,255,255,.88);
  font-size:8px;
  pointer-events:none;
}
.gif-tile-save{
  position:absolute;
  right:5px;
  top:5px;
  z-index:3;
  min-height:29px;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:99px;
  background:rgba(6,8,12,.82);
  color:#fff;
  font-size:8px;
  font-weight:800;
}
.gif-tile-save.saved{color:#b9adc8;opacity:.82}
.gif-tile-remove{
  position:absolute;
  top:5px;
  right:5px;
  z-index:3;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.2);
  border-radius:99px;
  background:rgba(5,7,10,.85);
  color:#fff;
  font-size:20px;
}

.gif-empty{
  min-height:168px;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:18px;
  text-align:center;
}
.gif-empty[hidden]{display:none!important}
.gif-empty-mark{
  display:grid;
  place-items:center;
  width:47px;
  height:33px;
  margin-bottom:2px;
  border:2px solid #8568ff;
  border-radius:8px;
  color:#b7a7ff;
  font-size:11px;
  font-weight:900;
}
.gif-empty b{color:#eff2f7;font-size:12px}
.gif-empty span{max-width:250px;color:#7d8796;font-size:9px;line-height:1.45}
.gif-empty button{
  min-height:35px;
  margin-top:4px;
  padding:0 13px;
  border:0;
  border-radius:10px;
  background:#7652ef;
  color:#fff;
  font-size:10px;
  font-weight:850;
}

.gif-status{
  flex:0 0 auto;
  min-height:17px;
  padding:3px 2px 0;
  color:#7c8796;
  font-size:8px;
}
.gif-status.bad{color:#ff8e9c}

/* Chat GIF bubble */
#chatMessages .msg-gif{
  overflow:hidden;
  padding:7px!important;
}
#chatMessages .msg-gif .msg-head{padding:1px 2px 6px}
.chat-gif-media{
  overflow:hidden;
  width:max-content;
  max-width:min(320px,82vw);
  border-radius:11px;
  background:#080b10;
}
.chat-gif-image{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:280px;
  object-fit:contain;
}
.chat-gif-actions{
  display:flex;
  justify-content:flex-start;
  padding:6px 1px 0;
}
.chat-gif-save{
  min-height:28px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.085);
  border-radius:99px;
  background:#111720;
  color:#9ba6b5;
  font-size:8px;
  font-weight:800;
}
.chat-gif-save:not(.saved){color:#c9bdff;border-color:rgba(124,85,255,.3)}
.chat-gif-save.saved{opacity:.72}

/* Current Android player + chat integration */
@media (max-width:980px){
  body.vw-android-room-shell #chatForm{
    grid-template-columns:44px minmax(0,1fr) 44px!important;
  }
  body.vw-android-room-shell #chatForm>.gif-picker-btn{
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    padding:0!important;
  }
  body.vw-android-room-shell.vw-gif-tray-open .side-card.chat{
    padding-bottom:calc(6px + var(--vw-android-safe-bottom))!important;
  }
  body.vw-android-room-shell.vw-gif-tray-open #videoWrap{
    height:min(30vh,146px)!important;
    min-height:102px!important;
    aspect-ratio:auto!important;
  }
  body.vw-android-room-shell.vw-gif-tray-open .stage .controls{
    padding-top:5px!important;
    padding-bottom:5px!important;
  }
  body.vw-android-room-shell.vw-gif-tray-open .vw-android-presence-bar{
    min-height:43px;
    padding-top:3px;
    padding-bottom:3px;
  }
  body.vw-android-room-shell .gif-tray{
    max-height:min(330px,43dvh);
  }
  body.vw-android-room-shell .gif-grid{
    grid-auto-rows:112px;
  }
  body.vw-android-room-shell .chat-gif-media{
    max-width:min(290px,78vw);
  }
  body.vw-android-room-shell .chat-gif-image{
    max-height:235px;
  }
}

@media (max-width:380px){
  .gif-title-block small{display:none}
  .gif-tray-actions .gif-upload-head{padding:0 7px}
  body.vw-android-room-shell .gif-tray{max-height:min(300px,41dvh)}
  body.vw-android-room-shell .gif-grid{grid-auto-rows:100px}
}

@media (prefers-reduced-motion:reduce){
  .gif-picker-btn,
  .gif-tray button{transition:none!important}
}

/* ==========================================================================
 * VW_WATCH_TOGETHER_GIF_FULL_DISPLAY_HOTFIX_V3_5R2
 *
 * V3.5R2 fixes the Android chat GIF appearing as a thin cropped strip.
 * The generic chat-card sizing must never cap a GIF message's intrinsic
 * media height.  Keep the full aspect ratio and allow the Save action below.
 * ========================================================================== */

#chatMessages .msg.msg-gif{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  contain:none!important;
}

#chatMessages .msg.msg-gif .msg-head{
  display:flex!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}

#chatMessages .msg.msg-gif .chat-gif-media{
  display:block!important;
  position:relative!important;
  width:100%!important;
  max-width:min(430px,100%)!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  border-radius:12px!important;
  background:#05070a!important;
  line-height:0!important;
}

#chatMessages .msg.msg-gif .chat-gif-image{
  position:static!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:0!important;
  transform:none!important;
  clip:auto!important;
  clip-path:none!important;
}

#chatMessages .msg.msg-gif .chat-gif-actions{
  position:static!important;
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  height:auto!important;
  min-height:34px!important;
  max-height:none!important;
  margin:0!important;
  padding:7px 1px 1px!important;
  overflow:visible!important;
}

#chatMessages .msg.msg-gif .chat-gif-save{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  height:30px!important;
  min-height:30px!important;
  margin:0!important;
  padding:0 10px!important;
  white-space:nowrap!important;
}

/* Android gets a larger, readable GIF while preserving its real aspect ratio. */
@media (max-width:980px){
  body.vw-android-room-shell #chatMessages .msg.msg-gif{
    width:min(100%,480px)!important;
    max-width:100%!important;
    padding:8px!important;
  }

  body.vw-android-room-shell #chatMessages .msg.msg-gif .chat-gif-media{
    width:100%!important;
    max-width:100%!important;
  }

  body.vw-android-room-shell #chatMessages .msg.msg-gif .chat-gif-image{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }

  body.vw-android-room-shell #chatMessages .msg.msg-gif .chat-gif-actions{
    min-height:35px!important;
  }
}

/* Very tall source GIFs should remain useful without taking the entire chat.
   When the natural GIF is portrait, constrain only the visual viewport while
   keeping the whole frame visible with contain rather than cropping. */
@media (max-width:980px) and (orientation:portrait){
  body.vw-android-room-shell #chatMessages .msg.msg-gif .chat-gif-media{
    max-height:360px!important;
  }
  body.vw-android-room-shell #chatMessages .msg.msg-gif .chat-gif-image{
    max-height:360px!important;
    object-fit:contain!important;
  }
}

/* ==========================================================================
 * VW_WATCH_TOGETHER_GIF_COMPACT_STACK_SCROLL_FIX_V3_5R3
 *
 * Video audit findings:
 * - R2 made every GIF nearly the full chat width.
 * - overflow:visible let adjacent GIF paint look visually merged/overlapped.
 * - a single GIF consumed almost the entire chat viewport.
 *
 * R3 treats every GIF as one isolated compact chat message.
 * ========================================================================== */

#chatMessages{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scroll-padding-top:10px!important;
  scroll-padding-bottom:18px!important;
}

#chatMessages .msg.msg-gif{
  position:relative!important;
  z-index:auto!important;
  isolation:isolate!important;
  contain:layout paint!important;

  display:flex!important;
  flex:0 0 auto!important;
  flex-direction:column!important;
  align-self:flex-start!important;
  justify-self:start!important;

  width:auto!important;
  max-width:min(78%,320px)!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  margin:0 0 9px 0!important;
  padding:7px!important;

  overflow:hidden!important;
  border-radius:12px!important;
}

#chatMessages .msg.msg-gif + .msg{
  margin-top:1px!important;
}

#chatMessages .msg.msg-gif .msg-head{
  flex:0 0 auto!important;
  width:100%!important;
  height:auto!important;
  min-height:22px!important;
  max-height:none!important;
  padding:0 2px 5px!important;
  overflow:hidden!important;
}

#chatMessages .msg.msg-gif .chat-gif-media{
  position:relative!important;
  z-index:0!important;
  flex:0 0 auto!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  width:auto!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:260px!important;

  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:10px!important;
  background:#05070a!important;
  line-height:0!important;
}

#chatMessages .msg.msg-gif .chat-gif-image{
  position:static!important;
  z-index:auto!important;

  display:block!important;
  flex:0 1 auto!important;

  width:auto!important;
  max-width:100%!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-height:260px!important;

  margin:0 auto!important;
  padding:0!important;

  object-fit:contain!important;
  object-position:center center!important;

  transform:none!important;
  translate:none!important;
  scale:none!important;
  clip:auto!important;
  clip-path:none!important;
}

#chatMessages .msg.msg-gif .chat-gif-actions{
  position:static!important;
  z-index:1!important;

  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;

  width:100%!important;
  height:auto!important;
  min-height:31px!important;
  max-height:none!important;

  margin:0!important;
  padding:6px 1px 0!important;
  overflow:hidden!important;
}

#chatMessages .msg.msg-gif .chat-gif-save{
  flex:0 1 auto!important;
  width:auto!important;
  max-width:100%!important;
  height:28px!important;
  min-height:28px!important;
  padding:0 9px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

/* Phone: deliberately NOT full width.
   One GIF should leave enough chat viewport for the messages that follow. */
@media (max-width:980px){
  body.vw-android-room-shell #chatMessages{
    gap:8px!important;
    padding-bottom:12px!important;
  }

  body.vw-android-room-shell #chatMessages .msg.msg-gif{
    width:auto!important;
    max-width:min(70vw,250px)!important;
    margin-bottom:9px!important;
    padding:7px!important;
  }

  body.vw-android-room-shell #chatMessages .msg.msg-gif .chat-gif-media{
    width:auto!important;
    max-width:100%!important;
    max-height:180px!important;
  }

  body.vw-android-room-shell #chatMessages .msg.msg-gif .chat-gif-image{
    width:auto!important;
    max-width:100%!important;
    height:auto!important;
    max-height:180px!important;
    object-fit:contain!important;
  }

  body.vw-android-room-shell #chatMessages .msg.msg-gif .chat-gif-actions{
    min-height:30px!important;
    padding-top:5px!important;
  }

  body.vw-android-room-shell #chatMessages .msg.msg-gif .chat-gif-save{
    height:27px!important;
    min-height:27px!important;
    font-size:8px!important;
  }
}

@media (max-width:380px){
  body.vw-android-room-shell #chatMessages .msg.msg-gif{
    max-width:min(72vw,238px)!important;
  }

  body.vw-android-room-shell #chatMessages .msg.msg-gif .chat-gif-media,
  body.vw-android-room-shell #chatMessages .msg.msg-gif .chat-gif-image{
    max-height:165px!important;
  }
}

/* ==========================================================================
 * VW_WATCH_TOGETHER_CHAT_EXPERIENCE_V3_5R4
 *
 * Standard chat behavior:
 * - compact readable text messages instead of full-row slabs
 * - incoming messages do not yank a user away from older chat
 * - a floating "new message" control appears when not following latest
 * - composer stays visually separated and send-pending state is clear
 * ========================================================================== */

body.vw-android-room-shell .side-card.chat{
  position:relative!important;
}

/* Text messages: compact chat bubbles while preserving sender + time. */
#chatMessages .msg:not(.msg-gif):not(.room-presence-event){
  display:block!important;
  align-self:flex-start!important;
  width:fit-content!important;
  min-width:138px!important;
  max-width:min(88%,460px)!important;
  height:auto!important;
  margin:0 0 2px 0!important;
  padding:8px 10px!important;
  overflow:hidden!important;
  border-radius:12px!important;
}

#chatMessages .msg:not(.msg-gif):not(.room-presence-event) .msg-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  min-width:0!important;
  margin:0 0 4px!important;
}

#chatMessages .msg:not(.msg-gif):not(.room-presence-event) .msg-name{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

#chatMessages .msg:not(.msg-gif):not(.room-presence-event) .msg-head>span:last-child{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  opacity:.72!important;
}

#chatMessages .msg:not(.msg-gif):not(.room-presence-event) p{
  margin:0!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}

/* New-message indicator only appears while the user is intentionally above bottom. */
.chat-latest-pill{
  position:absolute;
  left:50%;
  bottom:63px;
  z-index:18;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:118px;
  max-width:calc(100% - 30px);
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(139,108,255,.42);
  border-radius:999px;
  background:rgba(19,24,34,.96);
  color:#ebe7ff;
  box-shadow:0 8px 24px rgba(0,0,0,.34);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}

.chat-latest-pill[hidden]{display:none!important}
.chat-latest-pill span{font-size:14px;line-height:1;color:#a990ff}
.chat-latest-pill b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font:inherit;
}

body.vw-gif-tray-open .chat-latest-pill{display:none!important}

/* Composer stays visually anchored above Android's bottom safe area. */
body.vw-android-room-shell #chatForm{
  z-index:12!important;
  padding-top:3px!important;
  background:linear-gradient(180deg,rgba(7,10,15,0),#070a0f 28%)!important;
}

body.vw-android-room-shell #chatForm button[type="submit"].sending{
  opacity:.58!important;
  cursor:wait!important;
}

/* GIF failure should be a neat message, not a blank black rectangle. */
#chatMessages .chat-gif-media.gif-load-failed{
  min-width:150px!important;
  min-height:88px!important;
  display:grid!important;
  place-items:center!important;
  padding:12px!important;
  line-height:1.3!important;
}

#chatMessages .chat-gif-media.gif-load-failed::after{
  content:"GIF unavailable";
  color:#8f9aaa;
  font-size:10px;
  font-weight:750;
  line-height:1.3;
}

/* Keep enough bottom breathing room so the last bubble never sits under composer. */
body.vw-android-room-shell #chatMessages{
  padding-bottom:18px!important;
  scroll-padding-bottom:24px!important;
}

@media (max-width:380px){
  #chatMessages .msg:not(.msg-gif):not(.room-presence-event){
    max-width:91%!important;
  }
  .chat-latest-pill{
    bottom:62px;
    min-width:108px;
    min-height:32px;
  }
}



/* ==========================================================================
 * VW_WATCH_TOGETHER_ANDROID_TEXT_KEYBOARD_REGRESSION_FIX_V3_5R5
 * ========================================================================== */

/*
 * Normal text messages:
 * R4 depended too much on inherited theme properties.
 * Make text presentation explicit.
 */
#chatMessages .msg:not(.msg-gif):not(.room-presence-event) > p{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;

  position:static!important;

  width:auto!important;
  height:auto!important;
  min-height:1.25em!important;
  max-height:none!important;

  padding:0!important;
  margin:0!important;

  color:#e8edf5!important;
  -webkit-text-fill-color:#e8edf5!important;

  background:transparent!important;

  font-size:12px!important;
  font-weight:500!important;
  line-height:1.38!important;

  white-space:pre-wrap!important;
  overflow:visible!important;

  text-indent:0!important;
}


/* ==========================================================================
 * VW_WATCH_TOGETHER_CHAT_GEOMETRY_SCROLL_R7
 *
 * Android room shell owns composer/viewport positioning. GIF chat measures the
 * real overlap at runtime and reserves exactly that space inside the scroller.
 * ========================================================================== */
body.vw-android-room-shell .side-card.chat{
  --vw-chat-composer-height:56px;
  --vw-chat-composer-overlap:0px;
  --vw-chat-bottom-reserve:72px;
}

body.vw-android-room-shell #chatMessages{
  min-height:0!important;
  /* Real content padding changes scrollHeight; scroll-padding alone does not. */
  padding-bottom:var(--vw-chat-bottom-reserve,72px)!important;
  scroll-padding-bottom:calc(var(--vw-chat-bottom-reserve,72px) + 4px)!important;
  overscroll-behavior-y:contain!important;
}

body.vw-android-room-shell .chat-latest-pill{
  bottom:calc(var(--vw-chat-composer-height,56px) + 12px)!important;
}

@media (max-width:600px){
  #chatMessages .msg:not(.msg-gif):not(.room-presence-event) > p{
    font-size:12px!important;
  }
}


/* R7 invariant: do not override #chatForm position/bottom/transform here.
   android-room-shell remains the single owner of mobile composer placement. */


/* ==========================================================================
 * VW_WATCH_TOGETHER_CHAT_BOTTOM_SENTINEL_R8
 *
 * Hard guarantee for Android Chrome/WebView:
 * - real DOM spacer is the final child of #chatMessages
 * - avoids relying on padding-only scrollHeight / unreliable overlay detection
 * - last message always has physical scrollable room above the composer
 * ========================================================================== */

body.vw-android-room-shell .side-card.chat{
  --vw-chat-bottom-reserve:96px;
}

body.vw-android-room-shell #chatMessages{
  /* R8 uses a real sentinel for the large reserve; keep only compact visual pad. */
  padding-bottom:8px!important;
  scroll-padding-bottom:calc(var(--vw-chat-bottom-reserve,96px) + 12px)!important;
}

#chatMessages > .vw-chat-bottom-sentinel{
  display:block!important;
  flex:0 0 var(--vw-chat-bottom-reserve,18px)!important;
  width:100%!important;
  height:var(--vw-chat-bottom-reserve,18px)!important;
  min-height:var(--vw-chat-bottom-reserve,18px)!important;
  max-height:220px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  pointer-events:none!important;
  user-select:none!important;
  visibility:hidden!important;
}

body:not(.vw-android-room-shell) #chatMessages > .vw-chat-bottom-sentinel{
  flex-basis:18px!important;
  height:18px!important;
  min-height:18px!important;
}

body.vw-android-room-shell #chatMessages > .msg{
  scroll-margin-bottom:12px!important;
}

body.vw-android-room-shell .chat-latest-pill{
  bottom:calc(var(--vw-chat-composer-height,56px) + 14px)!important;
}


/* ==========================================================================
 * VW_WATCH_TOGETHER_CHAT_INFLOW_COMPOSER_CONTEXT_FIX_V3_5R11
 *
 * Exact DOM + Android-shell audit:
 * #chatForm is in normal flex flow below #chatMessages, not an overlay. R8's
 * forced 76-96px Android sentinel therefore consumed chat viewport and pushed
 * recent text above the visible area after a GIF. Keep only a tiny in-flow gap.
 * ========================================================================== */
body.vw-android-room-shell .side-card.chat{
  --vw-chat-bottom-reserve:10px;
}

body.vw-android-room-shell #chatMessages{
  padding-bottom:4px!important;
  scroll-padding-bottom:12px!important;
}

body.vw-android-room-shell #chatMessages > .vw-chat-bottom-sentinel{
  flex-basis:var(--vw-chat-bottom-reserve,10px)!important;
  height:var(--vw-chat-bottom-reserve,10px)!important;
  min-height:var(--vw-chat-bottom-reserve,10px)!important;
  max-height:180px!important;
}

/* Keep one GIF useful but leave room for neighboring text on compact phones. */
@media (max-width:980px){
  body.vw-android-room-shell #chatMessages .msg.msg-gif{
    max-width:min(66vw,230px)!important;
  }
  body.vw-android-room-shell #chatMessages .msg.msg-gif .chat-gif-media,
  body.vw-android-room-shell #chatMessages .msg.msg-gif .chat-gif-image{
    max-height:140px!important;
  }
}

@media (max-width:380px){
  body.vw-android-room-shell #chatMessages .msg.msg-gif{
    max-width:min(68vw,218px)!important;
  }
  body.vw-android-room-shell #chatMessages .msg.msg-gif .chat-gif-media,
  body.vw-android-room-shell #chatMessages .msg.msg-gif .chat-gif-image{
    max-height:125px!important;
  }
}

/* ==========================================================================
 * VW_WATCH_TOGETHER_TEXT_MESSAGE_FINAL_VISUAL_FIX_R12
 *
 * Final authority for NORMAL TEXT chat messages only.
 * GIF / presence / composer geometry are intentionally untouched.
 *
 * Goals:
 * - message text must always remain visible
 * - no fixed minimum bubble width
 * - no inherited height/max-height/clip can hide text
 * - short messages stay compact; long messages wrap naturally
 * - sender + time remain readable without taking unnecessary space
 * ========================================================================== */

/* ---------- Normal text bubble ---------- */
#chatMessages .msg:not(.msg-gif):not(.room-presence-event),
#chatMessages .msg.msg-text{
  position:relative!important;
  z-index:1!important;

  display:flex!important;
  flex:0 0 auto!important;
  flex-direction:column!important;
  align-self:flex-start!important;
  justify-content:flex-start!important;

  width:fit-content!important;
  min-width:0!important;
  max-width:min(88%,430px)!important;

  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  margin:0 0 6px 0!important;
  padding:8px 10px 9px!important;

  overflow:visible!important;
  contain:none!important;

  border:1px solid rgba(255,255,255,.055)!important;
  border-radius:13px!important;
  background:linear-gradient(
    180deg,
    rgba(18,24,34,.98),
    rgba(11,16,23,.98)
  )!important;
  box-shadow:0 3px 10px rgba(0,0,0,.16)!important;
}

/* ---------- Sender + time ---------- */
#chatMessages .msg:not(.msg-gif):not(.room-presence-event) .msg-head,
#chatMessages .msg.msg-text .msg-head{
  position:static!important;

  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;

  width:100%!important;
  min-width:0!important;

  height:auto!important;
  min-height:14px!important;
  max-height:none!important;

  gap:8px!important;
  margin:0 0 5px!important;
  padding:0!important;

  overflow:visible!important;
  visibility:visible!important;
  opacity:1!important;
}

#chatMessages .msg:not(.msg-gif):not(.room-presence-event) .msg-name,
#chatMessages .msg.msg-text .msg-name{
  display:block!important;
  min-width:0!important;
  max-width:190px!important;

  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;

  color:#cbd3df!important;
  -webkit-text-fill-color:#cbd3df!important;

  font-size:10px!important;
  font-weight:800!important;
  line-height:1.2!important;
}

#chatMessages .msg:not(.msg-gif):not(.room-presence-event) .msg-head > span:last-child,
#chatMessages .msg.msg-text .msg-head > span:last-child{
  flex:0 0 auto!important;
  margin-left:auto!important;

  color:#788493!important;
  -webkit-text-fill-color:#788493!important;

  font-size:9px!important;
  font-weight:600!important;
  line-height:1.2!important;
  white-space:nowrap!important;

  visibility:visible!important;
  opacity:1!important;
}

/* ---------- Optional nested text wrapper ---------- */
#chatMessages .msg:not(.msg-gif):not(.room-presence-event) .msg-text-body,
#chatMessages .msg.msg-text .msg-text-body{
  position:static!important;
  z-index:auto!important;

  display:block!important;

  width:auto!important;
  min-width:0!important;
  max-width:100%!important;

  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  margin:0!important;
  padding:0!important;

  overflow:visible!important;
  visibility:visible!important;
  opacity:1!important;

  transform:none!important;
  clip:auto!important;
  clip-path:none!important;
}

/* ---------- Actual message text: direct <p> OR nested wrapper <p> ---------- */
#chatMessages .msg:not(.msg-gif):not(.room-presence-event) > p,
#chatMessages .msg:not(.msg-gif):not(.room-presence-event) .msg-text-body > p,
#chatMessages .msg.msg-text > p,
#chatMessages .msg.msg-text .msg-text-body > p{
  position:static!important;
  z-index:auto!important;

  display:block!important;
  visibility:visible!important;
  opacity:1!important;

  width:auto!important;
  min-width:0!important;
  max-width:100%!important;

  height:auto!important;
  min-height:1.35em!important;
  max-height:none!important;

  margin:0!important;
  padding:0!important;

  overflow:visible!important;
  text-overflow:clip!important;

  color:#f1f4f8!important;
  -webkit-text-fill-color:#f1f4f8!important;
  background:transparent!important;

  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:13.5px!important;
  font-weight:500!important;
  line-height:1.42!important;
  letter-spacing:0!important;

  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  hyphens:auto!important;

  text-indent:0!important;
  transform:none!important;
  translate:none!important;
  scale:none!important;
  clip:auto!important;
  clip-path:none!important;
  filter:none!important;
}

/* Do not let empty paragraphs create a fake-looking message body. */
#chatMessages .msg:not(.msg-gif):not(.room-presence-event) > p:empty,
#chatMessages .msg:not(.msg-gif):not(.room-presence-event) .msg-text-body > p:empty,
#chatMessages .msg.msg-text > p:empty,
#chatMessages .msg.msg-text .msg-text-body > p:empty{
  display:none!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}

/* ---------- Android sizing ---------- */
@media (max-width:980px){
  body.vw-android-room-shell #chatMessages .msg:not(.msg-gif):not(.room-presence-event),
  body.vw-android-room-shell #chatMessages .msg.msg-text{
    width:fit-content!important;
    min-width:0!important;
    max-width:88%!important;
    margin-bottom:6px!important;
    padding:8px 10px 9px!important;
  }

  body.vw-android-room-shell #chatMessages .msg:not(.msg-gif):not(.room-presence-event) > p,
  body.vw-android-room-shell #chatMessages .msg:not(.msg-gif):not(.room-presence-event) .msg-text-body > p,
  body.vw-android-room-shell #chatMessages .msg.msg-text > p,
  body.vw-android-room-shell #chatMessages .msg.msg-text .msg-text-body > p{
    font-size:13.5px!important;
    line-height:1.42!important;
  }
}

@media (max-width:380px){
  body.vw-android-room-shell #chatMessages .msg:not(.msg-gif):not(.room-presence-event),
  body.vw-android-room-shell #chatMessages .msg.msg-text{
    max-width:91%!important;
  }

  body.vw-android-room-shell #chatMessages .msg:not(.msg-gif):not(.room-presence-event) > p,
  body.vw-android-room-shell #chatMessages .msg:not(.msg-gif):not(.room-presence-event) .msg-text-body > p,
  body.vw-android-room-shell #chatMessages .msg.msg-text > p,
  body.vw-android-room-shell #chatMessages .msg.msg-text .msg-text-body > p{
    font-size:13px!important;
  }
}


/* ===== CHAT SENDER RIGHT / RECEIVER LEFT ===== */

#chatMessages{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
}

/* Apna message -> RIGHT */
#chatMessages .msg.msg-self{
  align-self:flex-end!important;
  margin-left:auto!important;
  margin-right:0!important;
}

/* Dusre ka message -> LEFT */
#chatMessages .msg.msg-other{
  align-self:flex-start!important;
  margin-left:0!important;
  margin-right:auto!important;
}

/* Own text */
#chatMessages .msg.msg-self:not(.msg-gif):not(.room-presence-event){
  background:linear-gradient(180deg,rgba(102,76,255,.28),rgba(63,43,168,.26))!important;
  border-color:rgba(145,120,255,.34)!important;
}

/* Other text */
#chatMessages .msg.msg-other:not(.msg-gif):not(.room-presence-event){
  background:#0b1017!important;
  border-color:rgba(255,255,255,.055)!important;
}

/* Own GIF */
#chatMessages .msg.msg-gif.msg-self{
  align-self:flex-end!important;
  margin-left:auto!important;
  background:rgba(77,56,190,.22)!important;
}

/* Other GIF */
#chatMessages .msg.msg-gif.msg-other{
  align-self:flex-start!important;
  margin-right:auto!important;
  background:#0b1017!important;
}

/* Text readable */
#chatMessages .msg.msg-self p,
#chatMessages .msg.msg-other p,
#chatMessages .msg.msg-self .msg-text-body p,
#chatMessages .msg.msg-other .msg-text-body p{
  color:#f1f4f8!important;
  -webkit-text-fill-color:#f1f4f8!important;
  visibility:visible!important;
  opacity:1!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  text-align:left!important;
}

@media(max-width:980px){
  body.vw-android-room-shell #chatMessages .msg.msg-self,
  body.vw-android-room-shell #chatMessages .msg.msg-other{
    max-width:88%!important;
  }

  body.vw-android-room-shell #chatMessages .msg.msg-gif.msg-self,
  body.vw-android-room-shell #chatMessages .msg.msg-gif.msg-other{
    max-width:min(66vw,230px)!important;
  }
}

/* ==========================================================================
 * VW_WATCH_TOGETHER_TEXT_LEFT_RIGHT_SPECIFICITY_FIX_V3_5R14
 *
 * Root cause confirmed by R13A2 audit:
 * The R12 normal-text selector:
 *   #chatMessages .msg:not(.msg-gif):not(.room-presence-event)
 * has higher specificity than R13's generic:
 *   #chatMessages .msg.msg-self
 * Both declarations are !important, so text cards remain flex-start.
 *
 * GIF cards already work because their R13 selectors are equally/more specific.
 * This block changes TEXT alignment only and deliberately uses a selector whose
 * specificity is higher than the inherited R12 text rule.
 * ========================================================================== */

/* My TEXT message -> RIGHT */
#chatMessages .msg.msg-self:not(.msg-gif):not(.room-presence-event){
  align-self:flex-end!important;
  margin-left:auto!important;
  margin-right:0!important;
}

/* Other user's TEXT message -> LEFT */
#chatMessages .msg.msg-other:not(.msg-gif):not(.room-presence-event){
  align-self:flex-start!important;
  margin-left:0!important;
  margin-right:auto!important;
}

/* Android/mobile final authority */
@media(max-width:980px){
  body.vw-android-room-shell #chatMessages .msg.msg-self:not(.msg-gif):not(.room-presence-event){
    align-self:flex-end!important;
    margin-left:auto!important;
    margin-right:0!important;
    max-width:88%!important;
  }

  body.vw-android-room-shell #chatMessages .msg.msg-other:not(.msg-gif):not(.room-presence-event){
    align-self:flex-start!important;
    margin-left:0!important;
    margin-right:auto!important;
    max-width:88%!important;
  }
}


/* ==========================================================================
 * VW_WATCH_TOGETHER_OWN_NAME_HIDE_GIF_COMPACT_V3_5R15
 *
 * Self:
 *   RIGHT + sent time, no repeated own name.
 * Other:
 *   LEFT + sender name + sent time.
 * GIF chat message:
 *   no Save/Saved row; saving remains in GIF tray -> Room.
 * ========================================================================== */

/* The sender already knows who they are; side + bubble treatment conveys ownership. */
#chatMessages .msg.msg-self .msg-name{
  display:none!important;
}

/* Self header contains time only and anchors it to the right edge. */
#chatMessages .msg.msg-self .msg-head{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:0!important;
}

#chatMessages .msg.msg-self .msg-head > .msg-time,
#chatMessages .msg.msg-self .msg-head > span:last-child{
  flex:0 0 auto!important;
  margin-left:0!important;
  margin-right:0!important;
  text-align:right!important;
}

/* Other-user header stays conventional: name left, time right. */
#chatMessages .msg.msg-other .msg-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}

#chatMessages .msg.msg-other .msg-head > .msg-time,
#chatMessages .msg.msg-other .msg-head > span:last-child{
  flex:0 0 auto!important;
  margin-left:auto!important;
  text-align:right!important;
}

/* No vertical space is reserved for in-message Save/Saved controls. */
#chatMessages .msg.msg-gif .chat-gif-actions,
#chatMessages .msg.msg-gif .chat-gif-save{
  display:none!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  max-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
}

/* Tighten GIF cards now that the action row is gone. */
#chatMessages .msg.msg-gif{
  margin-bottom:7px!important;
  padding-bottom:7px!important;
}

#chatMessages .msg.msg-gif.msg-self .msg-head{
  min-height:13px!important;
  margin:0!important;
  padding:0 2px 4px!important;
}

#chatMessages .msg.msg-gif.msg-other .msg-head{
  margin:0!important;
  padding:0 2px 5px!important;
}

/* Keep self text metadata compact as well. */
#chatMessages .msg.msg-self:not(.msg-gif):not(.room-presence-event) .msg-head{
  min-height:12px!important;
  margin:0 0 4px!important;
}

/* Explicit sent-time styling for both message types. */
#chatMessages .msg .msg-time{
  color:#788493!important;
  -webkit-text-fill-color:#788493!important;
  font-size:9px!important;
  font-weight:600!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  visibility:visible!important;
  opacity:1!important;
}

@media(max-width:980px){
  body.vw-android-room-shell #chatMessages .msg.msg-gif{
    margin-bottom:7px!important;
  }

  body.vw-android-room-shell #chatMessages .msg.msg-gif.msg-self .msg-head{
    min-height:12px!important;
    padding-bottom:4px!important;
  }
}



/* ==========================================================================
 * VW_WATCH_TOGETHER_GIF_DEDICATED_PREMIUM_MODE_V3_5R16
 * ========================================================================== */
.gif-messages-btn{
  display:none;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:34px;
  padding:0 9px;
  border:1px solid rgba(132,94,255,.34);
  border-radius:10px;
  background:rgba(119,75,255,.12);
  color:#ddd7ff;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}
.gif-messages-btn>span{font-size:14px;line-height:1}
.gif-messages-btn>b{font:inherit}
.gif-messages-btn>em{
  display:inline-grid;
  place-items:center;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border-radius:99px;
  background:#7652ef;
  color:#fff;
  font-style:normal;
  font-size:8px;
  line-height:1;
}
.gif-messages-btn>em[hidden]{display:none!important}
.gif-messages-btn.has-unread{
  border-color:rgba(139,108,255,.72);
  background:rgba(124,85,255,.2);
  color:#fff;
}

@media(max-width:980px){
  body.vw-android-room-shell.vw-gif-tray-open .side-card.chat{
    padding:5px 8px calc(6px + var(--vw-android-safe-bottom))!important;
  }

  /* Dedicated picker: normal conversation UI gives all of its height to GIFs. */
  body.vw-android-room-shell.vw-gif-tray-open #chatMessages,
  body.vw-android-room-shell.vw-gif-tray-open #chatForm{
    display:none!important;
    flex:0 0 0!important;
    width:0!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-tray{
    display:flex!important;
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:3px 0 0!important;
    overflow:hidden!important;
    border-top:0!important;
    background:transparent!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-tray-handle{
    width:34px!important;
    height:3px!important;
    margin:0 auto 5px!important;
    opacity:.72;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-tray-head{
    min-height:36px!important;
    padding:0 0 6px!important;
    gap:6px!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-messages-btn{
    display:inline-flex!important;
    flex:0 0 auto!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-title-block{
    display:none!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-tray-actions{
    min-width:0!important;
    margin-left:auto!important;
    gap:5px!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-tray-actions button{
    min-height:34px!important;
  }

  /* Messages is the single clean mobile return action. */
  body.vw-android-room-shell.vw-gif-tray-open .gif-close-btn{
    display:none!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-search-box{
    height:35px!important;
    min-height:35px!important;
    margin-bottom:5px!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-tabs{
    margin-bottom:5px!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-tabs button{
    min-height:33px!important;
  }

  /* Header/search/tabs stay visible; only the GIF grid scrolls. */
  body.vw-android-room-shell.vw-gif-tray-open .gif-grid{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    grid-auto-rows:124px!important;
    padding-bottom:4px!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-empty{
    flex:1 1 auto!important;
    min-height:0!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-status{
    min-height:15px!important;
    padding-top:2px!important;
  }
}

@media(max-width:380px){
  body.vw-android-room-shell.vw-gif-tray-open .gif-messages-btn{
    min-height:32px!important;
    padding:0 7px!important;
  }
  body.vw-android-room-shell.vw-gif-tray-open .gif-tray-actions button{
    min-height:32px!important;
    padding-left:7px!important;
    padding-right:7px!important;
  }
  body.vw-android-room-shell.vw-gif-tray-open .gif-grid{
    grid-auto-rows:114px!important;
  }
}


/* ==========================================================================
 * VW_WATCH_TOGETHER_COMPACT_GIF_CATEGORIES_V3_5R17
 *
 * Permanent space cost: one 28px category row.
 * Low-frequency categories live in an overlay popover, never a second row.
 * Upload/edit category selection uses a temporary overlay editor.
 * ========================================================================== */

.gif-tray{
  position:relative!important;
}

.gif-category-bar{
  position:relative;
  z-index:7;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
  height:28px;
  min-height:28px;
  margin:0 0 5px;
}

.gif-category-scroll{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:4px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.gif-category-scroll::-webkit-scrollbar{display:none}

.gif-category-chip,
.gif-category-more{
  flex:0 0 auto;
  height:28px;
  min-height:28px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:999px;
  background:#0e141c;
  color:#7f8998;
  font-size:9px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

.gif-category-chip.active,
.gif-category-more.active{
  border-color:rgba(130,96,255,.48);
  background:rgba(119,75,255,.18);
  color:#e7e2ff;
}

.gif-category-more{
  max-width:96px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.gif-category-popover{
  position:absolute;
  top:32px;
  right:0;
  z-index:24;
  width:min(250px,88vw);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;
  padding:7px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:12px;
  background:rgba(12,17,24,.985);
  box-shadow:0 14px 34px rgba(0,0,0,.42);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.gif-category-popover[hidden]{display:none!important}

.gif-category-popover-chip{
  min-width:0;
  min-height:31px;
  padding:0 8px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.065);
  border-radius:9px;
  background:#121923;
  color:#98a3b2;
  font-size:9px;
  font-weight:800;
}
.gif-category-popover-chip.active{
  border-color:rgba(130,96,255,.52);
  background:rgba(119,75,255,.19);
  color:#eeeaff;
}

/* Temporary upload/edit overlay. It consumes zero normal picker height. */
.gif-category-editor{
  position:absolute;
  inset:0;
  z-index:60;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:6px;
}
.gif-category-editor[hidden]{display:none!important}

.gif-category-editor-backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,5,8,.72);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.gif-category-editor-panel{
  position:relative;
  z-index:1;
  width:100%;
  max-height:calc(100% - 2px);
  display:flex;
  flex-direction:column;
  gap:7px;
  overflow:auto;
  padding:10px;
  border:1px solid rgba(255,255,255,.105);
  border-radius:15px;
  background:#0d131b;
  box-shadow:0 -12px 34px rgba(0,0,0,.42);
}

.gif-category-editor-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.gif-category-editor-head>div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.gif-category-editor-head b{
  color:#f2f4f8;
  font-size:12px;
  line-height:1.2;
}
.gif-category-editor-head small{
  color:#778291;
  font-size:8.5px;
}
.gif-category-editor-close{
  flex:0 0 auto;
  width:30px;
  height:30px;
  padding:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  background:#151c26;
  color:#9ca6b4;
  font-size:18px;
}

.gif-category-editor-preview{
  min-height:54px;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:5px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:11px;
  background:#090e14;
}
.gif-category-editor-preview img{
  display:block;
  width:64px;
  height:50px;
  object-fit:cover;
  border-radius:8px;
  background:#05070a;
}
.gif-category-editor-preview>div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.gif-category-editor-preview b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#dfe4ec;
  font-size:10px;
}
.gif-category-editor-preview small{
  color:#8e99a8;
  font-size:8.5px;
}

.gif-category-editor-options{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.gif-category-editor-chip{
  min-height:29px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:999px;
  background:#121923;
  color:#8f9aa9;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}
.gif-category-editor-chip.active{
  border-color:rgba(130,96,255,.56);
  background:rgba(119,75,255,.2);
  color:#eeeaff;
}

.gif-category-editor-actions{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:7px;
}
.gif-category-editor-actions button{
  min-height:36px;
  border-radius:10px;
  font-size:10px;
  font-weight:850;
}
.gif-category-editor-cancel{
  border:1px solid rgba(255,255,255,.08);
  background:#151c26;
  color:#9ba5b4;
}
.gif-category-editor-save{
  border:1px solid rgba(129,94,255,.5);
  background:#7652ef;
  color:#fff;
}
.gif-category-editor-save:disabled{
  opacity:.45;
}

/* Edit mode: tapping a My GIF edits categories; the existing X still removes. */
.gif-tray .gif-manage-btn:not([hidden]){touch-action:manipulation}

/* Reclaim almost all of the 28px category cost from existing chrome. */
@media(max-width:980px){
  body.vw-android-room-shell.vw-gif-tray-open .gif-search-box{
    height:32px!important;
    min-height:32px!important;
    margin-bottom:4px!important;
  }
  body.vw-android-room-shell.vw-gif-tray-open .gif-search-box input{
    height:30px!important;
  }
  body.vw-android-room-shell.vw-gif-tray-open .gif-tabs{
    margin-bottom:4px!important;
    padding:2px!important;
  }
  body.vw-android-room-shell.vw-gif-tray-open .gif-tabs button{
    min-height:30px!important;
  }
  body.vw-android-room-shell.vw-gif-tray-open .gif-category-bar{
    height:28px!important;
    min-height:28px!important;
    margin-bottom:4px!important;
  }
  body.vw-android-room-shell.vw-gif-tray-open .gif-grid{
    min-height:0!important;
    flex:1 1 auto!important;
  }
}

@media(max-width:380px){
  .gif-category-chip,
  .gif-category-more{
    padding-left:8px;
    padding-right:8px;
    font-size:8.5px;
  }
  .gif-category-more{max-width:82px}
  .gif-category-popover{
    width:min(224px,88vw);
    gap:4px;
    padding:6px;
  }
  .gif-category-editor-panel{
    padding:8px;
    gap:6px;
  }
}

/* ==========================================================================
 * VW_WATCH_TOGETHER_GIF_COMPACT_TOPBAR_V3_5R19
 *
 * Exact-live additive merge on top of:
 * - V3.5R16 dedicated GIF mode
 * - V3.5R17 compact categories
 * - V3.5R18 GIF preview
 * - V3.6R1 keyboard-stable Android shell
 *
 * Target:
 * [ ← ] [ Search GIFs................ ] [ ＋ ] [ Edit ]
 * ========================================================================== */

.gif-compact-topbar{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 40px 46px;
  align-items:center;
  gap:5px;
  width:100%;
  min-width:0;
  margin:0 0 5px;
  padding:0;
}

/* When Edit is intentionally hidden outside My GIFs, reclaim its column. */
.gif-compact-topbar:has(.gif-manage-btn[hidden]){
  grid-template-columns:38px minmax(0,1fr) 40px;
}

.gif-compact-topbar .gif-search-box{
  min-width:0;
  width:100%;
  margin:0;
}

.gif-compact-topbar .gif-messages-btn,
.gif-compact-topbar .gif-upload-head,
.gif-compact-topbar .gif-manage-btn{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  height:34px;
  min-height:34px;
  margin:0;
  padding:0;
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:#111720;
  color:#b9c2cf;
  font-size:9.5px;
  font-weight:800;
  line-height:1;
}

.gif-compact-topbar .gif-back-compact{
  position:relative;
  border-color:rgba(132,94,255,.38);
  background:rgba(119,75,255,.14);
  color:#ddd7ff;
  font-size:18px;
}

.gif-compact-topbar .gif-back-compact>b{
  display:none!important;
}

.gif-compact-topbar .gif-back-compact>span{
  font-size:18px;
  line-height:1;
}

.gif-compact-topbar .gif-back-compact>em{
  position:absolute;
  top:-5px;
  right:-5px;
  z-index:2;
  min-width:15px;
  height:15px;
  padding:0 3px;
  font-size:7px;
  box-shadow:0 2px 7px rgba(0,0,0,.35);
}

.gif-compact-topbar .gif-upload-compact{
  border-color:rgba(132,94,255,.4);
  background:rgba(119,75,255,.14);
  color:#e3dcff;
  font-size:19px;
}

.gif-compact-topbar .gif-manage-btn{
  font-size:9.5px;
}

.gif-compact-topbar .gif-manage-btn[hidden]{
  display:none!important;
}

.gif-compact-topbar .gif-close-compat{
  display:none!important;
}

/* Android dedicated GIF mode: this one row replaces old head + search rows. */
@media(max-width:980px){
  body.vw-android-room-shell.vw-gif-tray-open .gif-tray{
    padding-top:2px!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-tray-handle{
    width:32px!important;
    height:3px!important;
    margin:0 auto 4px!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-compact-topbar{
    grid-template-columns:38px minmax(0,1fr) 40px 46px!important;
    gap:5px!important;
    min-height:34px!important;
    margin:0 0 4px!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-compact-topbar:has(.gif-manage-btn[hidden]){
    grid-template-columns:38px minmax(0,1fr) 40px!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-compact-topbar .gif-messages-btn{
    display:inline-flex!important;
    min-height:34px!important;
    padding:0!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-compact-topbar .gif-search-box{
    height:34px!important;
    min-height:34px!important;
    margin:0!important;
    padding:0 9px!important;
    border-radius:10px!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-compact-topbar .gif-search-box>span{
    flex:0 0 auto!important;
    font-size:16px!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-compact-topbar .gif-search-box input{
    height:32px!important;
    min-height:32px!important;
    font-size:13.5px!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-compact-topbar .gif-upload-head,
  body.vw-android-room-shell.vw-gif-tray-open .gif-compact-topbar .gif-manage-btn{
    height:34px!important;
    min-height:34px!important;
    padding:0!important;
  }

  /* Old two-row header no longer exists, but neutralize any inherited rules. */
  body.vw-android-room-shell.vw-gif-tray-open .gif-tray-head{
    display:none!important;
  }

  /* Keep R17 categories compact and give the reclaimed height to the grid. */
  body.vw-android-room-shell.vw-gif-tray-open .gif-tabs{
    margin-bottom:4px!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-category-bar{
    margin-bottom:4px!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-grid{
    min-height:0!important;
    flex:1 1 auto!important;
  }
}

@media(max-width:380px){
  body.vw-android-room-shell.vw-gif-tray-open .gif-compact-topbar{
    grid-template-columns:36px minmax(0,1fr) 38px 42px!important;
    gap:4px!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-compact-topbar:has(.gif-manage-btn[hidden]){
    grid-template-columns:36px minmax(0,1fr) 38px!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-compact-topbar .gif-search-box{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  body.vw-android-room-shell.vw-gif-tray-open .gif-compact-topbar .gif-search-box input{
    font-size:13px!important;
  }
}



/* ==========================================================================
 * V3.15R8R9G1 — DENSE PRIVATE GIF BROWSER
 * ========================================================================== */
@media (max-width:980px){
  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-tray-handle{
    width:28px!important;
    height:2px!important;
    margin:0 auto 2px!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-compact-topbar{
    grid-template-columns:32px minmax(0,1fr) 34px 38px!important;
    gap:3px!important;
    min-height:28px!important;
    height:28px!important;
    margin:0 0 2px!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-compact-topbar:has(.gif-manage-btn[hidden]){
    grid-template-columns:32px minmax(0,1fr) 34px!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-compact-topbar .gif-messages-btn,
  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-compact-topbar .gif-upload-head,
  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-compact-topbar .gif-manage-btn{
    height:28px!important;
    min-height:28px!important;
    border-radius:8px!important;
    font-size:8px!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-compact-topbar .gif-search-box{
    height:28px!important;
    min-height:28px!important;
    margin:0!important;
    padding:0 7px!important;
    border-radius:8px!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-compact-topbar .gif-search-box>span{
    font-size:14px!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-compact-topbar .gif-search-box input{
    height:26px!important;
    min-height:26px!important;
    font-size:12px!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-tabs{
    min-height:24px!important;
    margin:0 0 2px!important;
    padding:2px!important;
    gap:3px!important;
    border-radius:9px!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-tabs button{
    min-height:22px!important;
    height:22px!important;
    padding:0 4px!important;
    border-radius:7px!important;
    font-size:8.5px!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-tabs em{
    min-width:14px!important;
    height:14px!important;
    margin-left:2px!important;
    padding:0 3px!important;
    font-size:7px!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-category-bar{
    height:24px!important;
    min-height:24px!important;
    margin:0 0 2px!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-category-chip,
  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-category-more{
    height:22px!important;
    min-height:22px!important;
    padding:0 7px!important;
    font-size:8px!important;
    border-radius:8px!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-auto-rows:78px!important;
    gap:4px!important;
    min-height:0!important;
    max-height:none!important;
    flex:1 1 auto!important;
    padding:0 0 3px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-upload-tile,
  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-tile{
    min-height:0!important;
    height:78px!important;
    border-radius:9px!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-tile-send,
  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-tile-send img{
    min-height:0!important;
    height:100%!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-upload-tile{
    gap:1px!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-upload-tile>span{
    font-size:20px!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-upload-tile b{
    font-size:9px!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-upload-tile small{
    font-size:7px!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-tile-meta{
    left:3px!important;
    bottom:3px!important;
    max-width:calc(100% - 6px)!important;
    padding:2px 4px!important;
    font-size:7px!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-tile-save{
    top:3px!important;
    right:3px!important;
    min-height:22px!important;
    padding:0 5px!important;
    font-size:7px!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-tile-remove{
    top:3px!important;
    right:3px!important;
    width:24px!important;
    height:24px!important;
  }

  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-status{
    min-height:10px!important;
    height:auto!important;
    padding-top:1px!important;
    font-size:7.5px!important;
  }
}

@media (max-width:380px){
  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-grid{
    grid-auto-rows:72px!important;
    gap:3px!important;
  }
  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-upload-tile,
  body.vw-android-room-shell.vw-pm-single-owner-ready.vw-private-thread-open.vw-gif-tray-open #gifTray .gif-tile{
    height:72px!important;
  }
}