/* R51: transparent circular messages and shared tactile playback controls. */
.bubble:has(.vy-vc2-player){background:transparent!important;box-shadow:none!important;border:0!important}
.bubble:has(.vy-vc2-player)::before,.bubble:has(.vy-vc2-player)::after{display:none!important}
.vy-vc2-player{max-width:min(240px,100%);padding:5px}
.vy-vc2-note{box-shadow:0 4px 16px rgb(0 0 0 / .12);isolation:isolate}
.vy-vc2-note:focus-visible{outline:3px solid var(--accent,#2563eb);outline-offset:6px}
.vy-vc2-controls{display:grid!important;grid-template-columns:minmax(0,1fr) 58px 44px;align-items:center;gap:0 4px;width:100%;margin-top:8px;padding:2px 6px;border-radius:16px;background:var(--panel,#fff);color:var(--text,#17243b);box-sizing:border-box;box-shadow:0 2px 10px rgb(0 0 0 / .06)}
.vy-vc2-controls input[type=range]{grid-column:1/-1;width:100%;min-width:0;height:44px;margin:0;accent-color:var(--accent,#2563eb);cursor:pointer}
.vy-vc2-controls__time{font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.vy-vc2-controls select,.vy-vc2-controls__download{min-width:44px;min-height:44px;background:transparent;color:inherit;border:0;border-radius:10px;font:inherit;font-size:12px}
.vy-vc2-controls__download{display:grid;place-items:center;text-decoration:none}
.vy-vc2-controls :is(input,select,a):focus-visible{outline:2px solid var(--accent,#2563eb);outline-offset:2px}
.clip-playback{position:absolute;z-index:6;left:12px;right:12px;bottom:8px;width:auto;color:#fff;background:rgb(10 17 30 / .8);backdrop-filter:blur(12px)}
.clip-playback select{color:#fff}.clip-playback option{color:#17243b;background:#fff}
.clip-slide__stage:has(.clip-playback) .clip-slide__shade-bottom{bottom:102px}
@media(prefers-reduced-motion:reduce){.vy-vc2-note,.vy-vc2-controls *{animation:none!important;transition:none!important}}
/* Circle-only overrides also outrank the legacy player style injected at boot. */
#app #view-chats #messages .msg > .bubble:has(.vy-vc2-player),
#app #view-chats #messages .msg--out > .bubble:has(.vy-vc2-player),
#app #view-chats #messages .msg--in > .bubble:has(.vy-vc2-player){background:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important;padding:4px!important}
#app #view-chats #messages .bubble:has(.vy-vc2-player)::before,
#app #view-chats #messages .bubble:has(.vy-vc2-player)::after{display:none!important;background:transparent!important}
#app .vy-vc2-player{box-sizing:border-box;width:180px;max-width:100%;padding:0;gap:4px}
#app .vy-vc2-player > .vy-vc2-controls{grid-template-columns:minmax(0,1fr) 48px 44px;grid-template-rows:44px 14px;gap:0 4px;margin:0;padding:0 2px 2px;border-radius:14px;background:transparent;box-shadow:none;min-width:0}
#app .vy-vc2-player > .vy-vc2-controls input[type=range]{grid-column:1;grid-row:1;width:100%;height:44px;min-height:44px;margin:0}
#app .vy-vc2-player > .vy-vc2-controls .vy-vc2-controls__time{grid-column:1;grid-row:2;align-self:start;justify-self:center;font-size:10px;line-height:14px;max-width:100%}
#app .vy-vc2-player > .vy-vc2-controls select{grid-column:2;grid-row:1/3;align-self:center;width:48px;min-width:44px;min-height:44px;padding:0 2px;border:0;border-radius:12px;background:color-mix(in srgb,var(--surface,#fff) 75%,transparent);font-size:11px}
#app .vy-vc2-player > .vy-vc2-controls .vy-vc2-controls__download{grid-column:3;grid-row:1/3;align-self:center;width:44px;height:44px;min-width:44px;min-height:44px;border-radius:12px;background:color-mix(in srgb,var(--surface,#fff) 75%,transparent)}
/* Keep the resting message a circle. Only its explicit menu reveals tools. */
#app .vy-vc2-player > .vy-vc2-controls{display:none!important}
#app .vy-vc2-player.is-tools-open > .vy-vc2-controls{display:grid!important;animation:r51-circle-tools-in 140ms ease-out both}
@keyframes r51-circle-tools-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#app .vy-vc2-player > .vy-vc2-controls{animation:none!important}}
/* Gesture feedback overlays never intercept a tap or native scrolling. */
.vy-video-gesture-hint{position:absolute;left:50%;top:20%;z-index:9;transform:translateX(-50%);padding:7px 13px;border-radius:999px;background:rgb(12 20 34 / .8);color:#fff;font:650 15px/1.3 system-ui,sans-serif;pointer-events:none;opacity:0;transition:opacity 120ms ease;white-space:nowrap}
.vy-video-gesture-hint.is-visible{opacity:1}
@media(prefers-reduced-motion:reduce){.vy-video-gesture-hint{transition:none}}
/* Shorts keep a dedicated strip above Create; legacy circle styles cannot reflow it. */
#app #view-clips .clip-slide__stage > .clip-playback{display:grid!important;grid-template-columns:minmax(0,1fr) 56px 44px!important;grid-template-rows:44px 44px!important;gap:0 8px!important;left:12px!important;right:12px!important;bottom:80px!important;width:auto!important;height:88px!important;min-height:88px;max-height:88px;padding:0 10px!important;box-sizing:border-box;border:1px solid rgb(255 255 255 / .14);border-radius:16px;background:rgb(10 17 30 / .94)!important;color:#fff!important;box-shadow:none;overflow:visible}
#app #view-clips .clip-playback input[type=range]{grid-column:1/-1!important;grid-row:1!important;height:44px;min-height:44px;margin:0;width:100%;accent-color:#91b7ff}
#app #view-clips .clip-playback .vy-vc2-controls__time{grid-column:1!important;grid-row:2!important;color:#fff!important;font-size:12px;line-height:20px;align-self:center;justify-self:start}
#app #view-clips .clip-playback select{grid-column:2!important;grid-row:2!important;min-width:44px!important;width:56px!important;min-height:44px!important;height:44px!important;color:#fff!important;background:transparent!important;border:0!important}
#app #view-clips .clip-playback .vy-vc2-controls__download{grid-column:3!important;grid-row:2!important;width:44px!important;height:44px!important;min-height:44px!important;color:#fff!important;background:transparent!important;display:grid!important;place-items:center}
#app #view-clips .clip-slide__stage:has(>.clip-playback) .clip-slide__shade-bottom{bottom:180px!important}
#app #view-clips .clip-playback select option{background:#14213a!important;color:#fff!important}
#app #view-clips .clip-slide__stage:has(>.clip-playback) .clip-slide__meta{padding:10px 12px!important}

/* Circle v4: a single fixed media cell. Original metadata stays in the DOM
   and keeps receiving receipt updates; captions/replies occupy separate rows. */
#app #view-chats #messages .bubble:has(.vy-vc2-player):not(:has(> .vy-vc2-player ~ .vy-vc2-player)) {
  display:grid!important;
  grid-template-columns:minmax(0,176px);
  grid-template-areas:"reply" "circle" "caption" "reactions";
  align-items:start;
  gap:0;
}
#app #view-chats #messages .bubble :is(.vy-vc2-player,.mg-vwrap:has(> .vy-vc2-player)) {
  grid-area:circle;
  position:relative;
  display:block;
  width:176px;
  height:176px;
  max-width:100%;
  padding:0;
  gap:0;
}
#app #view-chats #messages .bubble:has(.vy-vc2-player):not(:has(> .vy-vc2-player ~ .vy-vc2-player)) > .bubble__reply {grid-area:reply;margin-bottom:6px}
#app #view-chats #messages .bubble:has(.vy-vc2-player):not(:has(> .vy-vc2-player ~ .vy-vc2-player)) > .bubble__text {grid-area:caption;margin-top:6px}
#app #view-chats #messages .bubble:has(.vy-vc2-player):not(:has(> .vy-vc2-player ~ .vy-vc2-player)) > .bubble__reacts {grid-area:reactions}
#app #view-chats #messages .bubble:has(.vy-vc2-player):not(:has(> .vy-vc2-player ~ .vy-vc2-player)) > .bubble__meta {
  grid-area:circle;
  position:relative!important;
  inset:auto!important;
  align-self:end;
  justify-self:center;
  transform:translateX(21px);
  z-index:4;
  box-sizing:border-box;
  min-height:20px;
  height:20px;
  max-width:80px;
  margin:0 0 24px!important;
  padding:2px 6px!important;
  border-radius:999px;
  background:rgb(9 15 26 / .78)!important;
  color:#fff!important;
  font-size:10px!important;
  line-height:16px!important;
  gap:3px;
  pointer-events:none;
}
#app #view-chats #messages .bubble:has(.vy-vc2-player):not(:has(> .vy-vc2-player ~ .vy-vc2-player)) > .bubble__meta .ticks {color:#fff!important;filter:none}
#app .vy-vc2-player > .vy-vc2-note {width:176px;height:176px;max-width:100%;aspect-ratio:1}
#app .vy-vc2-player .vy-vc2-note__dur {
  left:34px;right:auto;bottom:24px;
  box-sizing:border-box;
  min-width:39px;height:20px;
  padding:2px 5px;
  font-size:10px;line-height:16px;text-align:center;
  background:rgb(9 15 26 / .78);
}
#app .vy-vc2-player > .vy-vc2-controls {
  position:absolute;
  z-index:5;
  left:22px;right:22px;bottom:36px;
  box-sizing:border-box;
  width:132px;height:88px;
  grid-template-columns:repeat(3,44px)!important;
  grid-template-rows:44px 44px!important;
  gap:0!important;
  margin:0!important;padding:0!important;
  border:0;border-radius:0;
  background:transparent!important;
  box-shadow:none!important;
  color:#fff;
}
#app .vy-vc2-player > .vy-vc2-controls select,
#app .vy-vc2-player > .vy-vc2-controls .vy-vc2-controls__download,
#app .vy-vc2-player > .vy-vc2-controls .vy-vc2-controls__fullscreen {
  grid-row:1!important;
  box-sizing:border-box;
  width:44px!important;height:44px!important;min-width:44px;min-height:44px;
  margin:0;padding:0 2px!important;
  border:0;border-radius:50%!important;
  color:#fff!important;background:rgb(9 15 26 / .72)!important;
  display:grid;place-items:center;
  font:600 11px/1 system-ui,sans-serif;
  cursor:pointer;
}
#app .vy-vc2-player > .vy-vc2-controls select {grid-column:1!important;appearance:auto}
#app .vy-vc2-player > .vy-vc2-controls select option {color:#17243b;background:#fff}
#app .vy-vc2-player > .vy-vc2-controls .vy-vc2-controls__download {grid-column:2!important}
#app .vy-vc2-player > .vy-vc2-controls .vy-vc2-controls__fullscreen {grid-column:3!important}
#app .vy-vc2-player > .vy-vc2-controls input[type=range] {grid-column:1/-1!important;grid-row:2!important;width:132px;height:44px;min-height:44px;accent-color:#fff;filter:drop-shadow(0 1px 2px #0009)}
#app .vy-vc2-player > .vy-vc2-controls .vy-vc2-controls__time {position:absolute;grid-area:auto!important;top:-17px;left:0;right:0;max-width:none;text-align:center;font-size:10px;color:#fff;text-shadow:0 1px 3px #000;line-height:14px}
#app .vy-vc2-player.is-tools-open .vy-vc2-note__dur,
#app #view-chats #messages .bubble:has(.vy-vc2-player.is-tools-open) > .bubble__meta {visibility:hidden}
#app .vy-vc2-controls__fullscreen:focus-visible{outline:2px solid #fff;outline-offset:2px}
#app .vy-vc2-player > .vy-vc2-controls .vy-vc2-controls__time{left:25px;right:25px;top:-22px;padding:2px 4px;border-radius:999px;background:rgb(9 15 26 / .78);text-shadow:none}
#app .vy-vc2-note__video:fullscreen{width:100vw!important;height:100vh!important;object-fit:contain!important;border-radius:0!important;background:#000}
#app .vy-vc2-player .vy-vc2-note__mute{left:50%;right:auto;top:24px;bottom:auto;transform:translateX(-50%);font-size:10px;white-space:nowrap}
#app #view-chats #messages .bubble:has(.vy-vc2-player) > .bubble__meta .ticks--read{color:#9bdcff!important}

/* Gallery may decorate first (wrapper > player) or second (player.mg-vwrap).
   Both hosts stay in the same media cell; its existing viewer action survives. */
#app #view-chats #messages .bubble > .mg-vwrap:has(.vy-vc2-player){grid-area:circle;width:176px;height:176px;position:relative;max-width:100%;padding:0;margin:0}
#app #view-chats #messages .mg-vwrap:has(.vy-vc2-player) > .vy-vc2-player{width:176px!important;height:176px!important;margin:0;padding:0}
#app #view-chats #messages :is(.mg-vwrap:has(.vy-vc2-player),.vy-vc2-player.mg-vwrap) > .mg-vexpand {
  position:absolute;left:auto;right:22px;top:52px;bottom:auto;
  width:44px!important;height:44px!important;min-width:44px;min-height:44px;
  margin:0;padding:0;border-radius:50%;z-index:7;
  background:rgb(9 15 26 / .72);color:#fff;
}
#app #view-chats #messages :is(.mg-vwrap:has(.vy-vc2-player),.vy-vc2-player.mg-vwrap):has(> .mg-vexpand) .vy-vc2-controls__fullscreen{display:none!important}
#app #view-chats #messages :is(.mg-vwrap:has(.vy-vc2-player),.vy-vc2-player.mg-vwrap):is(.is-tools-open,:has(> .vy-vc2-player.is-tools-open)) > .mg-vexpand{right:22px;top:52px}
#app #view-chats #messages .mg-vwrap:has(> .vy-vc2-player.is-tools-open) > .vy-vc2-player > .vy-vc2-controls{display:grid!important}
#app #view-chats #messages .bubble:has(.mg-vwrap:has(> .vy-vc2-player.is-tools-open) .vy-vc2-player) > .bubble__meta,
#app #view-chats #messages .mg-vwrap:has(> .vy-vc2-player.is-tools-open) > .vy-vc2-player .vy-vc2-note__dur{visibility:hidden}
/* Explicit circle menu: playback, hover and keyboard focus never open tools. */
#app #view-chats #messages .vy-vc2-player > .vy-vc2-controls {display:none!important}
#app #view-chats #messages .vy-vc2-player.is-tools-open > .vy-vc2-controls {display:grid!important}
#app #view-chats #messages :is(.mg-vwrap:has(.vy-vc2-player),.vy-vc2-player.mg-vwrap) > .mg-vexpand {display:none!important}
#app #view-chats #messages :is(.mg-vwrap:has(> .vy-vc2-player.is-tools-open),.vy-vc2-player.mg-vwrap.is-tools-open) > .mg-vexpand {display:grid!important}
#app #view-chats #messages .bubble:has(.vy-vc2-player) > .bubble__meta,
#app #view-chats #messages .vy-vc2-player .vy-vc2-note__dur {visibility:visible!important}
#app #view-chats #messages .bubble:has(.vy-vc2-player.is-tools-open) > .bubble__meta,
#app #view-chats #messages .vy-vc2-player.is-tools-open .vy-vc2-note__dur {visibility:hidden!important}
#app #view-chats #messages .vy-vc2-player > .vy-vc2-tools-toggle {
  position:absolute;left:66px;top:8px;z-index:8;
  width:44px!important;height:44px!important;min-width:44px;min-height:44px;
  padding:0;margin:0;border:0;border-radius:50%;
  display:grid;place-items:center;background:transparent;color:#fff;
  cursor:pointer;filter:drop-shadow(0 1px 2px #000);box-shadow:none;
}
#app #view-chats #messages .vy-vc2-tools-toggle[aria-expanded="true"] {background:rgb(9 15 26 / .6)}
#app #view-chats #messages .vy-vc2-tools-toggle:focus-visible {outline:2px solid #fff;outline-offset:-4px}
#app .vy-vc2-player .vy-vc2-note__mute{top:104px}
#app .vy-vc2-player.is-tools-open .vy-vc2-note__mute{visibility:hidden}

#app #view-chats #messages .vy-vc2-player > .vy-vc2-controls .vy-vc2-controls__time{display:none}

/* R52: make the explicit menu readable over bright footage, without expanding
   its visual footprint to the full 44px touch target. Do not reveal tools. */
#app #view-chats #messages .vy-vc2-player > .vy-vc2-tools-toggle {
  background:radial-gradient(circle, rgb(9 15 26 / .68) 0 15px, transparent 16px);
  filter:none;
}
#app #view-chats #messages .vy-vc2-tools-toggle[aria-expanded="true"] {
  background:radial-gradient(circle, rgb(9 15 26 / .84) 0 15px, transparent 16px);
}
/* The play badge occupies the same centre as the manual controls. It must not
   shine through their gaps while paused; the video remains visible beneath. */
#app #view-chats #messages .vy-vc2-player.is-tools-open .vy-vc2-note__badge {
  visibility:hidden;
}