/* Comments thread: a chronological list of avatar + author + rich-text body, plus the composer.
   Adapted from Fizzy to HogPoint's design tokens. */
@layer components {
  .comments {
    --avatar-size: 2.5rem;
    --comment-max: 70ch;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--block-space);
    inline-size: 100%;
    margin-block-start: var(--block-space);
  }

  .comment {
    display: flex;
    align-items: flex-start;
    inline-size: 100%;
    max-inline-size: var(--comment-max);
  }

  /* Avatar overlaps the comment surface by ~1/3 of its width (Fizzy pattern): it sits above the
     bubble's rounded corner via z-index, while the content slides left under it (see __content). */
  .comment__avatar {
    flex: 0 0 auto;
    margin: 0;
    margin-block-start: var(--block-space-half);
    position: relative;
    z-index: 1;
  }

  .comment__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-inline-size: 0;
    gap: calc(var(--block-space-half) / 2);
    /* Pull left under the avatar (overlap = 1/3 avatar), then pad the text back clear of it. */
    margin-inline-start: calc(var(--avatar-size) / -3);
    padding-inline-start: calc(var(--avatar-size) / 3 + var(--inline-space));
  }

  /* Posted comments get the same surface as the notes field (composer keeps its plain background). */
  .comment:not(.comment--new) .comment__content {
    background-color: var(--color-notes-bg);
    border: 1px solid var(--color-ink-lighter);
    border-radius: 0.3rem;
    padding-block: var(--block-space-half);
    padding-inline-end: var(--block-space-half);
  }

  .comment__author {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);

    h3 {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      column-gap: 0.5ch;
      margin: 0;
      font-size: var(--text-normal);
      font-weight: normal;
    }
  }

  .comment__permalink-title {
    color: var(--color-ink-light);
    font-size: var(--text-small);
  }

  /* Edit affordance: subtle, and only shown to the author (see layouts/shared/_user_css). */
  .comment__edit {
    margin-inline-start: auto;
    opacity: 0.5;

    &:hover,
    &:focus-visible {
      opacity: 1;
    }
  }

  .comment__body {
    inline-size: 100%;
    overflow-wrap: anywhere;

    /* Embedded media should never overflow the body column. */
    img,
    video {
      max-inline-size: 100%;
      height: auto;
      border-radius: 0.5rem;
    }
  }

  .comment--new {
    margin-block-start: var(--block-space-half);
  }

  .comment__submit {
    align-self: flex-start;
  }

  /* Initials avatar chip (HogPoint users have no uploaded picture). --avatar-bg set inline per user. */
  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--avatar-size, 2.5rem);
    block-size: var(--avatar-size, 2.5rem);
    border-radius: 50%;
    background-color: var(--avatar-bg, var(--color-ink-light));
    color: white;
    font-size: var(--text-small);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
  }
}