/* WYDSP short-video feed: PC exports and mobile frames 45112:477258 / 477341. */
:is(.pc-short-video-page, .mobile-douyin-page) .mobile-douyin-media__video.is-landscape {
  object-fit: contain;
}

:is(.pc-short-video-page, .mobile-douyin-page) .mobile-douyin-copy h1 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

:is(.pc-short-video-page, .mobile-douyin-page) .mobile-douyin-copy__description {
  position: relative;
  display: block;
  max-width: none;
  max-height: none;
  overflow: visible;
  color: rgba(255, 255, 255, .55);
}

:is(.pc-short-video-page, .mobile-douyin-page) .mobile-douyin-copy__description > span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

:is(.pc-short-video-page, .mobile-douyin-page) .mobile-douyin-copy__description button {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0 0 0 16px;
  background: linear-gradient(90deg, transparent, rgba(1, 4, 6, .85) 16px);
  color: rgba(255, 255, 255, .55);
  font: inherit;
  line-height: inherit;
}

:is(.pc-short-video-page, .mobile-douyin-page) .mobile-douyin-copy__description.is-expanded {
  max-height: min(240px, 35dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

:is(.pc-short-video-page, .mobile-douyin-page) .mobile-douyin-copy__description:is(.is-expanded, .is-measuring) > span {
  display: inline;
  -webkit-line-clamp: unset;
}

:is(.pc-short-video-page, .mobile-douyin-page) .mobile-douyin-copy__description.is-expanded button {
  position: static;
  padding-left: 8px;
  background: none;
}

:is(.pc-short-video-page, .mobile-douyin-page) .mobile-douyin-action {
  width: 30px;
  min-width: 30px;
  gap: 0;
  color: rgba(255, 255, 255, .9);
  font-size: 12px;
  line-height: 18px;
  -webkit-tap-highlight-color: transparent;
}

:is(.pc-short-video-page, .mobile-douyin-page) .mobile-douyin-action .mobile-like-motion-graphic {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}

.pc-short-video-page .mobile-douyin-action .mobile-like-motion-frame {
  width: 40px;
  height: 40px;
}

:is(.pc-short-video-page, .mobile-douyin-page) .mobile-douyin-progress input:focus-visible,
:is(.pc-short-video-page, .mobile-douyin-page) button:focus-visible {
  outline: 2px solid var(--wydsp-accent, #fd2d55);
  outline-offset: 3px;
}

@media (min-width: 769px) {
  html.pc-short-video-document {
    overflow-y: auto;
    scrollbar-gutter: auto;
  }
  body.pc-short-video-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
  }
  .pc-short-video-page > .site-header { flex: none; }
  .pc-short-video-page > .to-top { display: none; }
  .pc-short-video-main {
    display: grid;
    flex: none;
    /* Keep the current first-screen player size; the footer follows below. */
    height: calc(100dvh - 76px);
    min-height: 0;
    place-items: center;
    padding: clamp(12px, 3dvh, 32px) 64px;
  }
  /* Keep the design ratio while fitting the space below the shared header. */
  .pc-short-video-stage {
    width: auto;
    height: 100%;
    max-height: 887px;
    aspect-ratio: 500 / 887;
  }
  .pc-short-video-page .mobile-douyin-shell { width: 100%; height: 100%; border-radius: 8px; }
  .pc-short-video-page .mobile-douyin-copy { right: 86px; bottom: 62px; }
  .pc-short-video-page .mobile-douyin-copy h1 { font-weight: 600; }
  .pc-short-video-page .mobile-douyin-copy__tags { flex-wrap: nowrap; gap: 6px; overflow-x: auto; }
  .pc-short-video-page .mobile-douyin-copy__tag { flex: none; border-radius: 3px; padding: 4px 8px; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .9); }
  .pc-short-video-page .mobile-douyin-actions { right: 24px; bottom: 150px; gap: 10px; }
  .pc-short-video-page .mobile-douyin-progress { height: 20px; bottom: 22px; grid-template-columns: 38px 1fr 38px; gap: 16px; font-size: 14px; line-height: 20px; }
  .pc-short-video-page .mobile-douyin-progress > span:last-child { text-align: right; }
  .pc-short-video-page .mobile-douyin-progress input { --progress: 0%; display: block; min-width: 0; height: 20px; margin: 0; padding: 0; appearance: none; background: transparent; cursor: pointer; }
  .pc-short-video-page .mobile-douyin-progress input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, #fff var(--progress), rgba(255, 255, 255, .3) var(--progress)); }
  .pc-short-video-page .mobile-douyin-progress input::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%; appearance: none; background: #fff; }
  .pc-short-video-page .mobile-douyin-progress input::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .3); }
  .pc-short-video-page .mobile-douyin-progress input::-moz-range-progress { height: 4px; border-radius: 4px; background: #fff; }
  .pc-short-video-page .mobile-douyin-progress input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }
  .pc-short-video-switch button:hover { color: #fff; }
  .pc-short-video-switch button::before { content: none; }
  .pc-short-video-switch button img { display: block; width: 24px; height: 24px; pointer-events: none; }
}

@media (max-width: 768px) {
  .mobile-short-video-detail-page { --mobile-tabbar-bottom: env(safe-area-inset-bottom, 0px); }
  :is(.mobile-douyin-page, .pc-short-video-page) .mobile-douyin-media { bottom: 0; }
  :is(.mobile-douyin-page, .pc-short-video-page) .mobile-douyin-media__video.is-landscape { height: calc(100% - var(--short-video-bottom-reserve, 110px) - var(--mobile-tabbar-bottom)); }
  :is(.mobile-douyin-page, .pc-short-video-page) .mobile-douyin-shell:has(.mobile-douyin-media__video.is-landscape) .mobile-douyin-player-toggle { top: calc((100% - var(--short-video-bottom-reserve, 110px) - var(--mobile-tabbar-bottom)) / 2); }
  :is(.mobile-douyin-page, .pc-short-video-page) .mobile-douyin-copy { right: 68px; left: 16px; bottom: calc(var(--mobile-tabbar-bottom) + 118px); }
  :is(.mobile-douyin-page, .pc-short-video-page) .mobile-douyin-actions { right: 16px; bottom: calc(var(--mobile-tabbar-bottom) + 273px); width: 30px; gap: 10px; }
  :is(.mobile-douyin-page, .pc-short-video-page) .mobile-douyin-progress { right: 16px; left: 16px; bottom: calc(var(--mobile-tabbar-bottom) + 80px); gap: 16px; }
  :is(.mobile-douyin-page, .pc-short-video-page) .mobile-douyin-progress input { width: auto; flex: 1 1 0; }
  :is(.mobile-douyin-page, .pc-short-video-page) .mobile-douyin-copy__tags { max-width: none; overflow-x: auto; }
  :is(.mobile-douyin-page, .pc-short-video-page) .mobile-douyin-copy__tag { flex: none; }
}

@media (max-width: 768px) and (max-height: 520px) {
  :is(.mobile-douyin-page, .pc-short-video-page) .mobile-douyin-actions { bottom: calc(var(--mobile-tabbar-bottom) + 156px); }
  :is(.mobile-douyin-page, .pc-short-video-page) .mobile-douyin-copy h1 { font-size: 16px; line-height: 22px; margin-bottom: 6px; -webkit-line-clamp: 1; }
  :is(.mobile-douyin-page, .pc-short-video-page) .mobile-douyin-copy__description { margin-bottom: 6px; }
  :is(.mobile-douyin-page, .pc-short-video-page) .mobile-douyin-copy__description.is-expanded { max-height: 20dvh; }
}