/* GIFs in comments (gifs.py, static/gifs.js) ------------------------------------------------------------------------ */

/* A posted GIF: its box is the GIF's own shape (--gw / --gh, its stored width and height) and --gif-h tall, set by the
   place it's in (a comment, a chat message…), never wider than that place: nothing moves when the picture arrives. */
.gif {
  position: relative;
  display: block;
  width: min(100%, calc(var(--gif-h, 160px) * var(--gw, 1) / var(--gh, 1)));
  aspect-ratio: var(--gw, 1) / var(--gh, 1);
  margin-top: 6px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
}
.gif picture,
.gif img {
  display: block;
  width: 100%;
  height: 100%;
}
.gif img {
  object-fit: cover;
}
.gif-via {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.68);
  color: #fff;
  font: 600 10px/1.45 var(--font);
  letter-spacing: 0.01em;
  pointer-events: none;
}

/* Reduced motion: the still shows, with a play button over it (static/gifs.js swaps the animation in and back). */
.gif-play {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .gif-play {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .gif-play::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.68);
  }
  .gif-play::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -8px 0 0 -4px;
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent #fff;
  }
  .gif-play[aria-pressed="true"]::before,
  .gif-play[aria-pressed="true"]::after {
    opacity: 0;
  }
  .gif-play:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: -3px;
  }
}

/* The composer's GIF button */
.gif-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 40px;
  height: 36px;
  padding: 0 10px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font: 800 12px/1 var(--font);
  letter-spacing: 0.06em;
  cursor: pointer;
}
.gif-btn:hover {
  background: var(--hover);
  color: var(--text);
}
.gif-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.gif-btn[disabled] {
  opacity: 0.5;
  cursor: default;
}

/* The GIF chosen in a composer, with its Remove button */
.gif-chosen {
  --gif-h: 96px;
  display: block;
  max-width: 100%;
  margin: 4px 0 6px;
}
.gif-chosen[hidden] {
  display: none;
}
.gif-chosen .gif {
  margin: 0;
}
.gif-remove {
  position: absolute;
  z-index: 2;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font: 400 20px/28px var(--font);
  text-align: center;
  cursor: pointer;
}
.gif-remove:hover {
  background: rgba(0, 0, 0, 0.88);
}
.gif-remove:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* The picker */
.gif-dialog {
  width: min(480px, calc(100vw - 32px));
  max-width: none;
  height: min(620px, calc(100vh - 64px));
  height: min(620px, calc(100dvh - 64px));
  max-height: none;
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.gif-dialog[open] {
  display: flex;
  flex-direction: column;
}
.gif-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
@media (max-width: 600px) {
  .gif-dialog {
    width: 100vw;
    height: min(560px, calc(100vh - 48px));
    height: min(560px, calc(100dvh - 48px));
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}
.gif-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 8px 8px 16px;
}
.gif-dialog-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}
.gif-dialog-close {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  font: 400 26px/40px var(--font);
  cursor: pointer;
}
.gif-dialog-close:hover {
  background: var(--hover);
  color: var(--text);
}
.gif-search {
  flex: none;
  height: 42px;
  margin: 0 16px 10px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: var(--bg);
  color: var(--text);
  font: 400 16px var(--font);
}
.gif-search::placeholder {
  color: var(--text-3);
}
.gif-search:focus-visible,
.gif-dialog-close:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.gif-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 16px 8px;
}
.gif-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gif-pick {
  position: relative;
  height: 96px;
  min-width: 56px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
}
.gif-pick picture,
.gif-pick img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gif-pick:hover {
  filter: brightness(1.08);
}
.gif-pick:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.gif-status {
  margin: 16px 0;
  color: var(--text-2);
  font-size: 14px;
  text-align: center;
}
.gif-status[hidden] {
  display: none;
}
.gif-more {
  display: block;
  margin: 10px auto 4px;
}
.gif-more[hidden] {
  display: none;
}
.gif-powered {
  flex: none;
  margin: 0;
  padding: 9px 16px 11px;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: 12px;
  text-align: center;
}
.gif-powered strong {
  color: var(--text);
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* How tall a GIF shows in each place */
.comment { --gif-h: 160px; }
.post-card { --gif-h: 220px; }
.score-comment { --gif-h: 120px; }

/* Video and post comments (templates/_comments.html): the GIF button starts the comment box's action row */
.comment-form .form-actions .gif-btn { height: 32px; margin: 3px auto 3px 0; }
.comment-form .form-actions:has(.gif-btn) .comment-at-chip { margin-right: 8px; }
/* On a phone, the "at 2:15" chip and GIF share a row, and Cancel and Comment go under them together */
@media (max-width: 480px) {
  .comment-form .form-actions.has-at-chip:has(.gif-btn)::before { content: ""; order: 1; flex-basis: 100%; height: 0; margin-top: -6px; }
  .comment-form .form-actions.has-at-chip:has(.gif-btn) > [data-cancel],
  .comment-form .form-actions.has-at-chip:has(.gif-btn) > [type="submit"] { order: 2; }
}
.comment-form .gif-chosen { margin-top: 8px; }
.comment-body:empty { display: none; }

/* Creator posts (templates/_post.html): under the text; on Home's Posts shelf the GIF fills the tile's picture */
.post-card .post-gif { margin: 10px 0 4px; }
.post-tile-gif .gif { width: 100%; height: 100%; aspect-ratio: auto; margin: 0; border-radius: 0; }
.composer-drop .gif-btn { height: 36px; }

/* NoRep Studio and Admin: GIFs in lists stay small */
.studio-gif,
.a-report-gif { --gif-h: 96px; }

/* Workout score comments (templates/_boards.html): box | GIF | Post, the chosen GIF on its own row */
.score-comment-form:has(.gif-btn) { grid-template-columns: minmax(0, 1fr) auto auto; }
.score-comment-form .gif-btn { height: 32px; }
.score-comment-form .gif-chosen { grid-column: 1 / -1; margin: 0; }

/* The live chat (templates/_live_chat.html, static/chat.js): small GIFs under the words */
.chat-msg { --gif-h: 96px; }
.chat-line .gif { margin: 4px 0 2px; }
.chat-gif-pick { display: inline-flex; flex: none; }
.chat-gif-pick[hidden] { display: none; }
.chat-gif-pick .gif-btn { height: 34px; min-width: 38px; padding: 0 8px; }
.chat-composer .gif-chosen { --gif-h: 64px; margin: 0 0 6px; }

/* A featured chat message's GIF in the banner over the video (static/featured.js) */
.feat-banner .feat-gif { --gif-h: 56px; flex: none; margin: 0; }

/* Training: whiteboard and feed comments (box | GIF | Comment, the chosen GIF under them), feed posts */
.tr-comment { --gif-h: 120px; }
.tr-comment-body .gif { margin-top: 4px; }
.tr-comment-form:has(.gif-btn) { grid-template-columns: minmax(0, 1fr) auto auto; }
.tr-comment-form .gif-btn { height: 34px; }
.tr-comment-form .gif-chosen { grid-column: 1 / -1; margin: 0; }
.tr-post .trs-gif { --gif-h: 220px; margin: 8px 0 4px; }
.trs-composer .gif-chosen { --gif-h: 120px; }
.trs-composer-go .gif-btn { height: 34px; margin-right: auto; }

/* Training's members chat and direct messages (templates/_training_chat_*.html): box | GIF | Send */
.trc-msg { --gif-h: 140px; }
.trc-bubble .gif { margin: 4px 0 2px; }
.trc-composer:has(.gif-btn) { grid-template-columns: minmax(0, 1fr) auto auto; }
.trc-composer .gif-btn { height: 44px; min-width: 44px; border-radius: 22px; }
.trc-composer .gif-chosen { grid-column: 1 / -1; grid-row: 1; margin: 0; }