/* Proposal: keep clip actions readable only while desktop comments are open. */
@media (min-width: 821px) {
  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide:has(> [data-clip-comments-panel]:not([hidden])) > .clip-viewer-side,
  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide.is-comments-open > .clip-viewer-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide:has(> [data-clip-comments-panel]:not([hidden])) > .clip-viewer-side > .clip-viewer-like-chip,
  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide.is-comments-open > .clip-viewer-side > .clip-viewer-like-chip {
    flex: 0 0 auto;
    width: max-content;
    min-width: max-content;
    max-width: 100%;
  }

  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide:has(> [data-clip-comments-panel]:not([hidden])) > .clip-viewer-side > .clip-viewer-info,
  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide.is-comments-open > .clip-viewer-side > .clip-viewer-info {
    flex: 0 0 100%;
    min-width: 0;
  }
}

/* The existing three-column rule can leave only 80px for actions in this band. */
@media (min-width: 821px) and (max-width: 1023px) {
  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide:has(> [data-clip-comments-panel]:not([hidden])),
  [data-clip-viewer-modal].clip-viewer-modal.is-open .clip-viewer-slide.is-comments-open {
    grid-template-columns: minmax(160px, 180px) minmax(240px, 390px) minmax(330px, 430px) !important;
  }
}