@use "../../wc";

:host {
  display: block;
  padding-inline: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));

  // Bubble tints by message origin / type (overridable per consumer).
  --message-bubble-agent: rgba(4, 114, 225, 0.1);
  --message-bubble-customer: rgba(48, 170, 61, 0.1);
  --message-bubble-internal: rgba(255, 203, 0, 0.1);
}

.message {
  display: flex;
  gap: var(--zn-spacing-small);
  align-items: flex-start;

  &__avatar {
    flex: 0 0 36px;
    display: flex;
    justify-content: center;
  }

  &__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--zn-spacing-x-small);
  }

  &__header {
    display: flex;
    align-items: center;
    gap: var(--zn-spacing-x-small);
    min-height: 36px; // keeps the header centred against the avatar
  }

  &__sender {
    @include wc.text-style(h1);
  }

  &__time {
    @include wc.text-style(subheading-small);
  }

  &__bubble {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: var(--zn-spacing-small);
    padding: 11px var(--zn-spacing-small); // 11px top/bottom + 24px line = 46px base
    border-radius: var(--zn-border-radius);
    background: var(--message-bubble-agent);
    min-height: 46px; // base (padding included); grows only when text wraps

    &--sending {
      border: 1px dashed rgb(var(--zn-border-color));
      opacity: 0.7;
      flex-direction: column;
    }
  }

  &__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--zn-spacing-small);
  }

  &__attachments {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--zn-spacing-small);

    &--visible {
      display: flex;
    }

    ::slotted(zn-chat-message-attachment) {
      min-width: 0;
    }
  }

  &__content {
    @include wc.text-style(chat);

    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;

    // Bodies passed through the default slot (e.g. alongside attachments) must
    // match the chat type scale, not inherit the host's default size.
    ::slotted(*) {
      @include wc.text-style(chat);
    }

    p {
      margin: 0;
      padding: 0;
    }

    pre {
      background-color: #23241f;
      border-radius: 3px;
      margin-block: 5px;
      padding: 5px 10px;
      color: #f8f8f2;
      overflow: auto;
    }

    blockquote {
      border-left: 4px solid rgb(var(--zn-border-color));
      margin: 5px 0;
      padding-left: 16px;
    }

    ol, ul {
      padding: 0;
      margin: 0;
    }

    li {
      list-style-type: none;
      padding-left: 1em;
      position: relative;
    }

    ol {
      counter-reset: list-0 0;
    }

    ol > li {
      counter-increment: list-0 1;
    }

    ul > li::before {
      content: "•";
    }

    ol > li::before {
      content: counter(list-0) ". ";
    }

    ol li::before, ul li::before {
      display: inline-block;
      margin-left: -1.5em;
      margin-right: 0.3em;
      text-align: right;
      white-space: nowrap;
      width: 1.2em;
    }

    img {
      max-width: 100%;
    }

    a {
      color: rgb(var(--zn-color-info));
    }
  }

  &__meta {
    @include wc.text-style(subheading-small);
  }

  &__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 24px; // match the chat line height; taller slotted triggers overlap the padding instead of growing the bubble
  }
}

// Bubble tints by message origin / type.
:host([agent-initiated]) .message__bubble {
  background: var(--message-background, var(--message-bubble-agent));
}

:host([customer-initiated]) .message__bubble {
  background: var(--message-background, var(--message-bubble-customer));
}

:host([action-type="internal"]) .message__bubble {
  background: var(--message-background, var(--message-bubble-internal));
}

:host([action-type="error"]) .message__bubble {
  background: var(--message-background, rgba(var(--zn-color-error), 0.12));
}

// Consecutive messages from the same participant are grouped together.
:host(.message-continued) {
  .message {
    margin-top: 3px;
  }

  .message__avatar {
    visibility: hidden;
  }

  .message__header {
    display: none;
  }
}

// System events — a centred, understated card.
.message--system {
  margin-top: var(--zn-spacing-x-small);
}

.system-card {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--zn-spacing-x-small);
  padding: 6px 12px;
  border-radius: var(--zn-border-radius);
  border: 1px solid rgb(var(--zn-border-color));
  font-size: 12px;
  color: rgb(var(--zn-text-color));
  min-height: 46px; // base height, matching message bubbles

  &__text {
    @include wc.text-style(paragraph);
  }

  &__time {
    @include wc.text-style(subheading-small);
    white-space: nowrap;
  }
}