@layer components {
  .message {
    padding: 0 8px;
    margin-block-end: 0.15em;

    @media (min-width: 768px) {
      padding: 0 20px;
      margin-block-end: 0.25em;
    }
  }

  .message__body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
  }

  .message--user .message__body {
    justify-content: flex-end;
  }

  .message--ai .message__body,
  .message--member .message__body {
    justify-content: flex-start;
  }

  /* Message bubble */
  .message__bubble {
    padding: 0.3em 0.5em;
    position: relative;
    display: inline-block;
    max-width: 85%;
    word-wrap: break-word;
    border-radius: 12px;

    @media (min-width: 768px) {
      max-width: 65%;
    }
  }

  .message--user .message__bubble {
    background-color: var(--color-personal);
    color: var(--color-ink);
    box-shadow: var(--shadow);
    border-radius: 12px 12px 4px 12px;

    .chat--hub & {
      background-color: var(--color-hub);
    }
  }

  .message--ai .message__bubble {
    background-color: var(--color-canvas);
    color: var(--color-ink);
    box-shadow: var(--shadow);
    border-radius: 12px 12px 12px 4px;

    html[data-theme="dark"] & {
      background-color: var(--color-ink-lighter);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        background-color: var(--color-ink-lighter);
      }
    }
  }

  .message--member .message__bubble {
    background-color: var(--color-member);
    color: var(--color-ink);
    box-shadow: var(--shadow);
    border-radius: 12px 12px 12px 4px;
  }

  .message--highlighted .message__bubble {
    animation: message-highlight 2s ease-out;
  }

  @keyframes message-highlight {
    0%, 30% { background-color: oklch(var(--lch-yellow-lighter)); }
    100% { background-color: inherit; }
  }

  /* Message content */
  .message__content {
    line-height: 1.4;
    font-size: var(--text-small);
    display: inline;
    word-break: break-word;
    overflow-wrap: break-word;

    p {
      margin-block-end: 0;
      display: inline;
      word-break: break-word;
    }
  }

  .message__author {
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-ink-dark);
    margin-block-end: 0.25rem;
  }

  /* Message time — inline at end of text, vertically aligned to bottom */
  .message__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    white-space: nowrap;
    margin-inline-start: 0.75em;
    vertical-align: bottom;
    line-height: 1;
  }

  .message__time {
    display: inline;
    color: var(--color-ink-medium);
    font-size: var(--text-xx-small);
    white-space: nowrap;
    line-height: 1;
  }

  /* Read receipts */
  .message__receipt {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 3px;
    vertical-align: bottom;

    svg {
      width: 12px;
      height: 9px;
      display: block;
    }

    span {
      transition: color 0.3s ease;
    }
  }

  .read-receipt-pending {
    color: var(--color-ink-light);
    opacity: 0.7;
  }

  .read-receipt-sent,
  .read-receipt-delivered {
    color: var(--color-ink-light);
  }

  .read-receipt-read {
    color: var(--color-link);
  }

  .message--user .read-receipt-pending,
  .message--user .read-receipt-sent,
  .message--user .read-receipt-delivered {
    color: var(--color-ink-medium);
  }

  .message--user .read-receipt-read {
    color: var(--color-link);
  }

  /* Message author badge */
  .message-author-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xx-small);
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 0.25rem;

    &.me, &.member, &.assistant {
      color: var(--color-ink-medium);
      background-color: oklch(var(--lch-ink-medium) / 8%);
    }
  }

  .parent-message__header .message-author-badge {
    font-size: 10px;
    padding: 1px 4px;
  }
}