/* R52: clips engagement overlays and resilient metadata. */
#view-clips .clip-slide__text { min-width: 0; flex: 1; }
#view-clips .clip-slide__byline { display: flex; flex-wrap: wrap; gap: 4px 8px; }
#view-clips .clip-slide__author { min-width: 0; min-height: 44px; max-width: 100%; }
#view-clips .clip-slide__author strong { max-width: 100%; margin-bottom: 0; }
#view-clips .clip-slide__follow { min-height: 44px; }
#view-clips .clip-slide__text p { overflow-wrap: anywhere; }
#view-clips .clip-rail__btn[aria-busy="true"] { opacity: .6; }
#view-clips .clip-rail__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.vy-share-row > span:last-child { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.vy-share-row__name { display: block; max-width: 100%; }
.vy-share-row__hint { display: block; }
.vy-share-status { padding: 8px 16px max(12px, env(safe-area-inset-bottom)); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.vy-share-status:empty { display: none; }
.vy-share-sheet .btn-icon { flex: 0 0 44px; min-width: 44px; min-height: 44px; }
.vy-share-sheet :is(button,input):focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.clip-edit { box-sizing: border-box; width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: 0 24px 80px #0005; }
.clip-edit::backdrop { background: #080e1bb3; }
.clip-edit:not([open]) { display: none; }
.clip-edit__form { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.clip-edit header,.clip-edit footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.clip-edit h2 { margin: 0; font-size: 18px; }
.clip-edit label { font-size: 13px; color: var(--text-muted); }
.clip-edit textarea { box-sizing: border-box; width: 100%; min-height: 140px; max-height: 40dvh; resize: vertical; padding: 12px; border: 1px solid var(--border); border-radius: 12px; font: 400 16px/1.5 system-ui, sans-serif; color: var(--text); background: var(--surface-2); }
.clip-edit :is(button,textarea):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.clip-edit button { min-height: 44px; }
.clip-edit__status { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.clip-edit__status:empty { display: none; }
.clip-edit__source { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.clip-edit__source a { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { #view-clips .clip-rail__btn { transition: none; animation: none; } }

/* The timeline is revealed by interaction; its menu remains a reachable target. */
#app #view-clips .clip-slide__stage > .clip-playback {
  display: flex !important; align-items: center; gap: 8px !important;
  left: 10px !important; right: 10px !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  height: 52px !important; min-height: 52px; max-height: 52px;
  padding: 3px 4px 3px 10px !important; margin: 0;
  background: rgb(8 14 24 / .62) !important; border-radius: 16px;
}
#app #view-clips .clip-slide__stage > .clip-playback:not(.is-revealed):not(.is-tools-open):not(:focus-within):not(:active) {
  background: transparent !important; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  pointer-events: none;
}
#app #view-clips .clip-playback__position { transition: opacity 140ms ease; }
#app #view-clips .clip-playback:not(.is-revealed):not(.is-tools-open):not(:focus-within):not(:active) .clip-playback__position {
  opacity: 0; pointer-events: none;
}
#app #view-clips .clip-playback .clip-playback__more { pointer-events: auto; background: rgb(10 17 29 / .76); }
#app #view-clips .clip-playback__position { position: relative; display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; }
#app #view-clips .clip-playback__position input[type="range"] { flex: 1; min-width: 0; width: 0; height: 44px; }
#app #view-clips .clip-playback__position .vy-vc2-controls__time { flex: 0 0 auto; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#app #view-clips .clip-playback__more { display: grid; place-items: center; flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; border: 0; border-radius: 12px; color: #fff; background: transparent; cursor: pointer; }
#app #view-clips .clip-playback__tools {
  position: absolute; z-index: 1; bottom: calc(100% + 8px); right: 0;
  display: flex; flex-direction: column; gap: 4px; box-sizing: border-box;
  width: min(248px, 100%); max-height: min(272px, calc(100dvh - 148px));
  overflow-y: auto; overscroll-behavior: contain; padding: 8px;
  border: 1px solid rgb(255 255 255 / .18); border-radius: 16px;
  color: #fff; background: rgb(14 22 36 / .97); box-shadow: 0 12px 36px #0005;
}
#app #view-clips .clip-playback__tools[hidden] { display: none !important; }
#app #view-clips .clip-playback__speed { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding-left: 10px; font-size: 13px; }
#app #view-clips .clip-playback .clip-playback__tools select { flex: 0 0 68px; width: 68px !important; padding: 0 6px; border-radius: 10px; background: rgb(255 255 255 / .08) !important; }
#app #view-clips .clip-playback__fit { width: 100%; min-height: 44px; padding: 10px; text-align: left; font: 500 13px/1.4 system-ui, sans-serif; border: 0; border-radius: 10px; color: #fff; background: transparent; cursor: pointer; }
#app #view-clips .clip-playback .clip-playback__tools .vy-vc2-controls__download { display: flex !important; justify-content: flex-start; align-items: center; gap: 10px; width: 100% !important; padding: 0 10px; box-sizing: border-box; font: 500 13px/1.4 system-ui, sans-serif; }
#app #view-clips .clip-playback :is(button,a,select):focus-visible { outline: 2px solid #a8c8ff; outline-offset: -2px; }
#app #view-clips .clip-playback__more[aria-expanded="true"],
#app #view-clips .clip-playback__tools :is(button,a):hover { background: rgb(255 255 255 / .1) !important; }
#app #view-clips .clip-slide__stage:has(> .clip-playback) .clip-slide__shade-bottom { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 60px) !important; }
#app #view-clips.vd-player-mode #btn-shorts-record { display: none !important; }
#app #view-clips .clip-slide[data-clip-fit="contain"] .clip-slide__video { object-fit: contain !important; }
#app #view-clips .clip-slide[data-clip-fit="cover"] .clip-slide__video { object-fit: cover !important; }

#app #view-clips .clip-caption { min-width: 0; pointer-events: auto; }
#app #view-clips .clip-caption p { margin: 0; max-height: 2.7em; line-height: 1.35; overflow: hidden; overflow-wrap: anywhere; }
#app #view-clips .clip-caption__toggle { min-width: 44px; min-height: 44px; margin: 0; padding: 4px 0; border: 0; background: transparent; color: #d9e8ff; font: 600 13px/1.3 system-ui, sans-serif; text-align: left; cursor: pointer; }
#app #view-clips .clip-caption__toggle[hidden] { display: none !important; }
#app #view-clips .clip-caption.is-expanded p { max-height: min(220px, 30dvh); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; }
#app #view-clips .clip-caption :focus-visible { outline: 2px solid #a8c8ff; outline-offset: 2px; }
/* Player chrome follows the video, including when the surrounding app is light. */
#app #view-clips.vd-player-mode :is(.clips-scroller,.clip-slide,.clip-slide__stage,.clip-slide__media,.clip-slide__video) { background: #070b12; color: #fff; }
#app #view-clips.vd-player-mode { background: #090d14; }
#app #view-clips.vd-player-mode .view-header { display: none; }
#app #view-clips.vd-player-mode .clip-slide { padding: 8px 16px; }
#app #view-clips.vd-player-mode .clip-slide__stage { max-height: none; }
#app #view-clips.vd-player-mode .vd-player-bar {
  top: 8px; left: 50%; right: auto; transform: translateX(-50%);
  width: min(calc(100% - 32px), calc((100dvh - 72px) * 9 / 16));
  gap: 8px; min-height: 60px; padding: 8px; box-sizing: border-box;
  border-radius: 20px 20px 0 0; background: linear-gradient(to bottom, rgb(7 11 18 / .8), transparent);
}
#app #view-clips.vd-player-mode :is(.vd-player-back,.vd-player-mute) { min-height: 44px; min-width: 44px; box-sizing: border-box; }
#app #view-clips.vd-player-mode :is(.vd-player-back,.vd-player-mute):focus-visible { outline: 3px solid #a8c8ff; outline-offset: -3px; }
#app #view-clips.vd-player-mode .vd-player-hint { display: none; }
#app #view-clips.vd-player-mode .clip-slide__shade-top { height: 88px; background: linear-gradient(to bottom, rgb(7 11 18 / .36), transparent); }
#app #view-clips.vd-player-mode .clip-slide__shade-bottom { padding: 64px 10px 8px; background: linear-gradient(to top, rgb(7 11 18 / .86), rgb(7 11 18 / .28) 45%, transparent 94%); }
#app #view-clips.vd-player-mode .clip-slide__meta { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; border-radius: 0; }
#app #view-clips.vd-player-mode :is(.clip-slide__meta strong,.clip-slide__text p,.clip-slide__author,.clip-rail__n) { color: #fff; text-shadow: 0 1px 5px rgb(0 0 0 / .65); }
#app #view-clips.vd-player-mode :is(.clip-slide__views,.clip-slide__music) { color: #c8d2e2; text-shadow: 0 1px 4px #0008; }
#app #view-clips.vd-player-mode :is(.vd-player-back,.vd-player-count,.vd-player-nav,.vd-player-hint,.clip-slide__playpause,.clip-rail__btn,.clip-slide__err) { background: rgb(10 17 29 / .66); color: #fff; border-color: rgb(255 255 255 / .22); }
#app #view-clips.vd-player-mode .clip-rail__ico { background: transparent; color: inherit; box-shadow: none; }
#app #view-clips.vd-player-mode .clip-rail__btn { border-radius: 50%; }
#app #view-clips.vd-player-mode .clip-rail__btn:has(.clip-rail__n:not(:empty)) { border-radius: 18px; }
#app #view-clips.vd-player-mode .clip-rail__btn.is-active,
#app #view-clips.vd-player-mode .clip-rail__btn.is-active .clip-rail__ico { color: #ff7292; background: rgb(58 15 35 / .7); }
#app #view-clips.vd-player-mode :is(.vd-player-back,.vd-player-nav,.clip-rail__btn):hover { background: rgb(40 56 83 / .88); color: #fff; border-color: rgb(255 255 255 / .38); }
#app #view-clips.vd-player-mode .clip-slide__follow { background: rgb(10 17 29 / .62); color: #fff; border-color: rgb(255 255 255 / .35); }
@media (max-width: 640px) {
  #app #view-clips.vd-player-mode .clip-slide { padding: 0; }
  #app #view-clips.vd-player-mode .vd-player-bar {
    top: 0; left: 0; width: 100%; transform: none; border-radius: 0;
    padding: max(8px, env(safe-area-inset-top)) 10px 8px;
  }
}
@media (max-height: 540px) and (orientation: landscape) {
  #app #view-clips.vd-player-mode .clip-slide { padding: 0 10px; }
  #app #view-clips.vd-player-mode .clip-slide__stage { width: min(100%, 860px); max-height: none; }
  #app #view-clips.vd-player-mode .vd-player-bar { top: 0; left: 50%; width: min(calc(100% - 20px), 860px); transform: translateX(-50%); }
  #app #view-clips .clip-slide__shade-bottom { padding: 12px 10px 4px; align-items: flex-end; }
  #app #view-clips .clip-rail { flex-direction: row; align-items: flex-end; gap: 2px; }
  #app #view-clips .clip-caption:not(.is-expanded) p { max-height: 1.35em; }
  #app #view-clips .clip-caption.is-expanded p { max-height: 18dvh; }
  #app #view-clips .clip-slide__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #app #view-clips .clip-playback__position { transition: none; }
}