/* The Activity section under a video: leave the creator a video, and see the
   ones they chose to show.

   Sits between the wall and the comments, so it borrows the comment section's
   spacing and type scale rather than inventing a third look for the same
   column. */

.vreply { margin: 26px 0 34px; }
.vreply[hidden] { display: none; }

.vreply__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.vreply__head h2 { margin: 0; font-size: 16px; font-weight: 700; }

.vreply-block { margin-bottom: 22px; }
.vreply-block:last-child { margin-bottom: 0; }
.vreply-block[hidden] { display: none; }

.vreply-block__title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--app-dim);
}
.vreply-block__count {
  margin-left: 8px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* ---- Leave a video ------------------------------------------------------- */

.vreply-leave {
  padding: 18px;
  border: 1px solid var(--app-line);
  border-radius: 14px;
}

.vreply-leave__title { margin: 0; font-size: 15.5px; font-weight: 700; }
.vreply-leave__sub {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--app-dim);
}

.vreply-leave__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.vreply-qr {
  display: flex;
  align-items: center;
  gap: 14px;
}
.vreply-qr[hidden] { display: none; }
.vreply-qr__img {
  display: block;
  width: 148px;
  height: 148px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--app-line);
  border-radius: 12px;
}
.vreply-qr__hint {
  max-width: 15ch;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

/* The divider between scanning and recording here. Vertical on a desktop,
   where the two actions sit side by side. */
.vreply-leave__or {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  color: var(--app-dim);
}
.vreply-leave__or-line {
  flex: 1;
  width: 1px;
  min-height: 22px;
  background: var(--app-line);
}
.vreply-leave__or-text { font-size: 11.5px; font-weight: 700; text-transform: uppercase; }

.vreply-record {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 700;
  color: #04170d;
  text-decoration: none;
  background: var(--app-accent);
  border-radius: 999px;
}
.vreply-record:hover { filter: brightness(1.06); }
.vreply-record::before { content: '●'; font-size: 11px; color: #b4231f; }

/* ---- Featured replies ---------------------------------------------------- */

.vreply-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 132px;
  gap: 12px;
  overflow-x: auto;
  /* The row scrolls inside itself; the watch column must never scroll
     sideways because somebody featured nine replies. */
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.vreply-card {
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.vreply-card__shot {
  position: relative;
  aspect-ratio: 9 / 16;
  background-color: rgba(127, 127, 127, .18);
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
}
.vreply-card:hover .vreply-card__shot { filter: brightness(1.08); }

.vreply-card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 26px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.vreply-card__len {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, .72);
  border-radius: 5px;
}

.vreply-card__who {
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vreply-card__when { font-size: 11.5px; color: var(--app-dim); }

/* ---- The player dialog --------------------------------------------------- */

.vreply-player {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .72);
}

.vreply-player__card {
  width: min(420px, 100%);
  overflow: hidden;
  background: var(--app-bg);
  border-radius: 16px;
}

.vreply-player__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
.vreply-player__who { font-size: 14px; }
.vreply-player__len { font-size: 12px; color: var(--app-dim); }
.vreply-player__close {
  margin-left: auto;
  width: 30px;
  height: 30px;
  font: inherit;
  font-size: 14px;
  color: inherit;
  background: rgba(127, 127, 127, .16);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.vreply-player__video {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: #000;
}

.vreply-player__report {
  margin-left: auto;
  padding: 5px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #d1344b;
  background: rgba(209, 52, 75, .12);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.vreply-player__report:hover { background: rgba(209, 52, 75, .2); }
/* Report takes the auto margin, so Close no longer needs it. */
.vreply-player__report + .vreply-player__close { margin-left: 8px; }

/* ---- The report dialog --------------------------------------------------- */
/* Over everything, including the player it is usually opened from. Short on
   purpose: somebody reporting a video of themselves being harassed should not
   be reading a form. */

.vrep {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .74);
}

.vrep__card {
  width: min(400px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px;
  background: var(--app-bg);
  border-radius: 16px;
}

.vrep__title { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.vrep__sub { margin: 0 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--app-dim); }

.vrep__reasons { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.vrep__reason {
  padding: 8px 13px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: inherit;
  text-align: left;
  background: rgba(127, 127, 127, .14);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
.vrep__reason:hover { background: rgba(127, 127, 127, .24); }
.vrep__reason.is-on {
  color: #fff;
  background: #d1344b;
  border-color: #d1344b;
}

.vrep__details {
  display: block;
  width: 100%;
  padding: 10px;
  font: inherit;
  /* 16px so iOS Safari does not zoom the page when this is focused. */
  font-size: 16px;
  line-height: 1.45;
  color: inherit;
  background: rgba(127, 127, 127, .1);
  border: 1px solid var(--app-line);
  border-radius: 10px;
  resize: vertical;
}

.vrep__check {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.45;
}
.vrep__check input { margin-top: 2px; width: 17px; height: 17px; }

.vrep__msg { min-height: 15px; margin: 10px 0 0; font-size: 12.5px; font-weight: 600; color: #d1344b; }

.vrep__row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.vrep__btn {
  padding: 9px 18px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: inherit;
  background: rgba(127, 127, 127, .16);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.vrep__btn:disabled { opacity: .5; cursor: not-allowed; }
.vrep__btn--danger { color: #fff; background: #d1344b; }
.vrep__btn--danger:disabled { background: rgba(209, 52, 75, .45); }

/* ---- The creator's inbox ------------------------------------------------- */
/* Lives in the Video Replies tab on the profile page. In this file rather than
   in profile.css because it shares the player dialog above, and splitting the
   two would mean the profile page loading a stylesheet for a dialog whose rules
   were somewhere else. */

.vrin-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.vrin-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.vrin-count { font-size: 12.5px; color: var(--app-dim); }

.vrin-list { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }

.vrin-row {
  display: flex;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--app-line);
}
.vrin-row:last-child { border-bottom: 0; padding-bottom: 0; }

.vrin-row__shot {
  position: relative;
  flex: 0 0 84px;
  align-self: flex-start;
  aspect-ratio: 9 / 16;
  padding: 0;
  background-color: rgba(127, 127, 127, .18);
  background-size: cover;
  background-position: center;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}
.vrin-row__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.vrin-row__len {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 1px 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, .72);
  border-radius: 4px;
}

.vrin-row__body { min-width: 0; flex: 1; }

.vrin-row__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vrin-row__who { font-size: 14px; }
.vrin-row__when { font-size: 12px; color: var(--app-dim); }

.vrin-chip {
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(127, 127, 127, .18);
}
/* Only the two states a creator has to act on are coloured. Everything else
   stays grey so the ones that need attention are the ones that stand out. */
.vrin-chip--submitted { color: #04170d; background: var(--app-accent); }
.vrin-chip--featured { color: #fff; background: #6b4dfb; }

.vrin-row__from {
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--app-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vrin-row__from-link { color: inherit; font-weight: 700; }

.vrin-row__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.vrin-btn {
  padding: 6px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: inherit;
  background: rgba(127, 127, 127, .16);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.vrin-btn:hover:not(:disabled) { background: rgba(127, 127, 127, .26); }
.vrin-btn:disabled { opacity: .5; cursor: not-allowed; }
.vrin-btn--on { color: #fff; background: #6b4dfb; }
.vrin-btn--danger { color: #d1344b; }

.vrin-row__msg { min-height: 14px; margin: 8px 0 0; font-size: 12px; font-weight: 600; }
.vrin-row__msg--error { color: #d1344b; }

/* ---- Narrow ------------------------------------------------------------- */

@media (max-width: 720px) {
  .vreply-leave { padding: 16px; }
  .vreply-leave__actions { margin-top: 14px; }
  /* The one action a phone is offered fills the width — it is the whole point
     of the section on a device that already has the camera. */
  .vreply-record { width: 100%; padding: 14px 22px; font-size: 15px; }
  .vreply-row { grid-auto-columns: 118px; }
  .vrin-row__shot { flex-basis: 68px; }
}