.um-reels-related .um-video-related-item {
  grid-template-columns: 76px minmax(0, 1fr);
}

.um-reels-related .um-video-related-thumb {
  aspect-ratio: 9 / 16;
}

.um-reels-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: stretch;
  max-width: 1600px;
  height: calc(100vh - 64px);
  margin: 0 auto;
  padding: 18px;
  overflow: hidden;
  transition: grid-template-columns 200ms ease;
}

.um-reels-layout.is-related-collapsed {
  grid-template-columns: minmax(0, 1fr) 64px;
}

.um-reel-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.um-reel-column {
  display: grid;
  grid-template-columns: minmax(280px, 430px) 88px;
  gap: 16px;
  align-items: end;
  justify-content: center;
}

.um-reel-phone {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  max-height: calc(100vh - 126px);
  min-height: 560px;
  border-radius: 8px;
  background: #101315;
  box-shadow: 0 18px 46px rgba(32, 35, 31, 0.22);
}

.um-reel-video,
.um-reel-placeholder {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #101315;
}

.um-reel-phone .um-media {
  width: 100%;
  height: 100%;
  max-height: none;
}

.um-reel-enter-down {
  animation: umReelEnterDown 260ms ease-out;
}

.um-reel-enter-up {
  animation: umReelEnterUp 260ms ease-out;
}

@keyframes umReelEnterDown {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes umReelEnterUp {
  from { transform: translateY(-24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.um-reel-phone .um-link-embed,
.um-reel-phone .um-link-embed-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  max-height: none;
}

.um-reel-phone .um-link-embed-play {
  font-size: 56px;
}

.um-reel-phone .um-link-card {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}

.um-reel-phone .um-link-card > img,
.um-reel-phone .um-link-card > .um-media-image-shell {
  width: 100%;
  height: 100%;
}

.um-reel-phone .um-media-image-shell {
  height: 100%;
}

.um-reel-phone .um-link-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 55%;
  padding: 32px 16px 16px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0));
  color: #fff;
  overflow: hidden;
}

.um-reel-phone .um-link-card-body strong,
.um-reel-phone .um-link-card-body small {
  color: #fff;
}

.um-reel-phone .um-link-card-body strong {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.um-reel-phone .um-link-card-body p {
  color: rgba(255, 255, 255, 0.85);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.um-reel-placeholder {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 28px;
  font-weight: 850;
}

/* Sits above the related list inside the same column. It used to be position:fixed over that
   column, which covered the list instead of sharing space with it. */
.um-reel-details {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  border: 1px solid var(--um-line);
  border-radius: 8px;
  padding: 14px;
  background: var(--um-bg);
  overflow-y: auto;
}

.um-reel-details-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.um-reel-details-head h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.um-reel-details-count {
  color: var(--um-muted);
  font-size: 13px;
  font-weight: 400;
}

.um-reel-details-close {
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--um-muted);
  cursor: pointer;
}

.um-reel-details-author {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.um-reel-details-author span {
  display: block;
  color: var(--um-muted);
  font-size: 12px;
}

.um-reel-post-link {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 4px;
  border: 1px solid var(--um-line);
  border-radius: 8px;
  padding: 7px 12px;
  background: var(--um-surface-strong);
  color: var(--um-text);
  font-weight: 800;
  cursor: pointer;
}

.um-reel-details-message {
  margin: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.um-reel-details-empty {
  color: var(--um-muted);
}

.um-reel-actions {
  position: relative;
  display: grid;
  gap: 12px;
  padding-bottom: 8px;
}

/* Floats beside the Like button (the rail's first tile) instead of pushing the whole rail
   down in-flow, which used to shove Comment/Share/etc. off their usual spots whenever the
   picker opened. To the rail's right (toward the related-reels sidebar), not its left --
   left covered the reel itself, which sits immediately to that side. */
.um-reel-actions .um-reaction-picker {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 10px;
  z-index: 5;
  border-radius: 999px;
  background: rgba(20, 20, 22, 0.85);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

/* Icon and count only, no button chrome -- the rail sits beside the phone frame on the
   page's own background (not over the video itself), so it uses the same theme-aware
   --um-text/--um-muted colors as everything else instead of a fixed color: they already
   flip light/dark with .um-shell.is-display-dark (see unlimarket-social-base.css and
   unlimarket-social-shell-secondary-nav.css), so this stays readable in both themes. */
.um-reel-actions button {
  display: grid;
  place-items: center;
  gap: 4px;
  width: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 4px;
  color: var(--um-text);
  cursor: pointer;
}

.um-reel-actions button.is-active,
.um-reel-actions button.is-reacted {
  color: var(--um-primary);
}

.um-reel-actions strong {
  font-size: 14px;
}

.um-reel-actions span {
  color: var(--um-muted);
  font-size: 12px;
}

/* The reel rail now carries the shared post-card action buttons, which bring their own icon
   and badge markup rather than the rail's old <strong>/<span> pair. */
.um-reel-actions .um-card-action-icon {
  width: 22px;
  height: 22px;
}

.um-reel-actions .um-card-action-emoji {
  width: 22px;
  height: 22px;
  font-size: 20px;
}

.um-reel-actions .um-action-badge {
  display: inline;
  min-width: 0;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--um-text);
  font-size: 13px;
  font-weight: 600;
}

/* A TikTok share in Reels stays full-bleed like any other reel: the feed's fixed-ratio card
   (composer.css, three classes) must not apply inside the phone frame. */
.um-reel-phone .um-media.um-link-card.um-link-card-tiktok {
  display: block;
  aspect-ratio: auto;
  background: #000;
}

.um-reel-phone .um-link-card-tiktok > .um-media-image-shell {
  border-left: 0;
}