/*
 * THE RECORD'S THREAD — one author/timestamp/content row per comment, oldest
 * first, the ⋯ menu hanging off the row's own right edge rather than inside the
 * body, so the prose column keeps one left AND one right edge down the list.
 *
 * The avatar's 4px lead is what puts the disc on the author's LINE rather than
 * on the top of its box: the name's line box is taller than the 28px mark.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-comments-thread {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-16);
    min-width: 0;
  }

  .lotics-comments-thread__comment {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--lotics-space-8);
    min-width: 0;
  }

  .lotics-comments-thread__main {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1;
    gap: var(--lotics-space-8);
    min-width: 0;
  }

  /* The menu keeps its target; the comment body beside it is what gives way. */
  .lotics-comments-thread__actions,
  .lotics-comments-thread__mark {
    flex-shrink: 0;
  }

  /* The name and the standing on one line: the badge follows the author rather
     than sitting in a column of its own, so a thread of unanswered entries
     reserves no width for a mark none of them wears. */
  .lotics-comments-thread__line {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-8);
    min-width: 0;
  }

  .lotics-comments-thread__answer {
    flex-shrink: 0;
  }

  .lotics-comments-thread__avatar {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-shrink: 0;
    padding-block-start: var(--lotics-space-4);
  }

  .lotics-comments-thread__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
  }

  /* The lead-in under the timestamp, on the two things that can follow it. */
  .lotics-comments-thread__content,
  .lotics-comments-thread__form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-8);
    padding-block-start: var(--lotics-space-8);
    min-width: 0;
  }

  .lotics-comments-thread__form-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--lotics-space-8);
  }

  .lotics-comments-thread__files {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lotics-space-8);
  }

  .lotics-comments-thread__file {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-6);
    min-width: 0;
  }
}