/* -- Message component ----------------------------------------------- */
/* One row of a conversation: an avatar beside a column of header (name,
   time), the message surface (a .bubble, an attachment, anything) and a
   footer (status, actions). Start = the other side, end = you. CSS only. */

@layer components {
  .message {
    --_av: 2rem;
    --_gap: 0.5rem;
    --_foot: 1.75rem;
    display: flex;
    align-items: flex-end;
    gap: var(--_gap);
    width: 100%;
    min-width: 0;

    &[data-align="end"] { flex-direction: row-reverse; }

    /* -- Sizes: avatar column and the text scale ------------------- */
    &[data-size="sm"] { --_av: 1.5rem; --_gap: 0.375rem; }
    &[data-size="lg"] { --_av: 2.5rem; --_gap: 0.75rem; }
  }

  /* The avatar slot keeps its column even when empty (a placeholder keeps
     consecutive messages aligned) and sits level with the surface's
     bottom edge - lifted above the footer when there is one. */
  .message-avatar {
    display: flex;
    flex: none;
    justify-content: center;
    width: var(--_av);

    & > .avatar { width: var(--_av); height: var(--_av); }
  }
  .message:has(> .message-content > .message-footer) > .message-avatar {
    margin-block-end: calc(var(--_foot) + 0.125rem);
  }
  /* no avatar column at all: data-avatar="none" on the message */
  .message[data-avatar="none"] > .message-avatar { display: none; }

  .message-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    min-width: 0;
    max-width: min(80%, 40rem);

    /* the surface fills up to the column; the column carries the 80% cap */
    & > .bubble { max-width: 100%; }
    & > .bubble[data-variant="ghost"] { width: auto; }
  }
  .message[data-align="end"] > .message-content { align-items: flex-end; }
  /* an assistant's ghost reply runs the full width */
  .message-content:has(> .bubble[data-variant="ghost"]) { max-width: 100%; flex: 1; }
  /* its header lines up with the unframed text */
  .message-content:has(> .bubble[data-variant="ghost"]) > :is(.message-header, .message-footer) { padding-inline: 0; }

  .message-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding-inline: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--muted-foreground);
  }
  .message-name {
    font-weight: 600;
    color: var(--foreground);
  }
  .message-time {
    font-variant-numeric: tabular-nums;
    color: var(--muted-foreground);
  }

  .message-footer {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: var(--_foot);
    padding-inline: 0.25rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    white-space: nowrap;

    & svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
    & .btn svg { width: 1rem; height: 1rem; }
    & .btn { color: var(--muted-foreground); }
    & .btn:hover { color: var(--foreground); }
  }

  /* data-reveal="hover": the footer's actions appear on hover / focus of
     the message; always shown where there is no hover (touch) */
  @media (hover: hover) {
    .message-footer[data-reveal="hover"] {
      opacity: 0;
      transition: opacity 150ms ease;
    }
    .message:is(:hover, :focus-within) > .message-content > .message-footer[data-reveal="hover"] { opacity: 1; }
  }

  /* -- Status: delivery ticks in the footer --------------------------- */
  .message-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    &[data-status="read"] { color: oklch(0.6 0.16 250); }
    &[data-status="failed"] { color: var(--destructive); }
  }

  /* -- Attachment: a file card as the message surface ------------------ */
  .message-attachment {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-sizing: border-box;
    width: 16rem;
    max-width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--card-foreground);
    font-size: 0.8125rem;
    text-decoration: none;

    &:is(a) { cursor: pointer; transition: background-color 150ms ease; }
    &:is(a):hover { background: var(--accent); }
    &:is(a):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  }
  .message-attachment-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background: var(--muted);
    color: var(--muted-foreground);
    & svg { width: 1.125rem; height: 1.125rem; }
  }
  .message-attachment-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
  }
  .message-attachment-name { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  .message-attachment-meta { font-size: 0.75rem; color: var(--muted-foreground); }

  /* -- Group: consecutive messages of one sender ---------------------- */
  .message-group {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;

    /* one avatar per group: only the last message shows it (the others
       keep the empty column, so everything lines up) */
    & > .message:not(:last-child) > .message-avatar > * { visibility: hidden; }
    /* one header per group: the first message's */
    & > .message:not(:first-child) > .message-content > .message-header { display: none; }
    /* the joined bubble corners tighten, as in a .bubble-group */
    & > .message:not([data-align="end"]) {
      &:not(:last-child) > .message-content > .bubble > .bubble-content { border-end-start-radius: var(--_rs); }
      &:not(:first-child) > .message-content > .bubble > .bubble-content { border-start-start-radius: var(--_rs); }
    }
    & > .message[data-align="end"] {
      &:not(:last-child) > .message-content > .bubble > .bubble-content { border-end-end-radius: var(--_rs); }
      &:not(:first-child) > .message-content > .bubble > .bubble-content { border-start-end-radius: var(--_rs); }
    }
  }

  /* -- A conversation: rows of messages, groups and markers ------------- */
  .message-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer components {
    .message-footer[data-reveal="hover"], .message-attachment { transition: none; }
  }
}

@media (prefers-contrast: more) {
  @layer components {
    .message-header, .message-footer, .message-time, .message-attachment-meta { color: var(--foreground); }
  }
}

@media (forced-colors: active) {
  @layer components {
    .message-attachment { border-color: CanvasText; }
    .message-status[data-status] { color: CanvasText; }
  }
}