@layer ui-reset, ui;

/* avatar */
@layer ui {
  .avatar {
    aspect-ratio: 1;
    height: calc(var(--ui-spacing-2) * 2 + 1lh);
    border-radius: var(--ui-rounded-full);
    background-color: var(--ui-neutral-200);
    color: var(--ui-neutral-700);
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding-block: 0;
    padding-inline: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.14286rem;
    display: inline-flex;
    position: relative;

    & + .avatar {
      margin-inline-start: -.6em;
    }

    &:has( + .avatar) {
      mask-image: radial-gradient(100% 100% at calc(50% + (var(--ui-spacing-2) + .5lh + .6em - 2px)), #0000 0% calc(50% + 2px), #000 0% 100%);
    }

    & img {
      object-fit: cover;
      border-radius: inherit;
      width: 100%;
      height: 100%;
    }

    &.square {
      border-radius: var(--ui-rounded-3);
    }

    & > .badge {
      width: 1.2em;
      height: 1.2em;
      box-shadow: 0 0 0 .15em var(--ui-background-color);
      padding: .2em;
      position: absolute;
      bottom: 0;
      right: 0;

      & svg {
        width: .8em;
        height: .8em;
      }
    }
  }
}

/* shimmer */
@layer ui {
  @keyframes ui-shimmer {
    to {
      background-position-x: calc(100% + var(--shimmer-spread)), 0;
    }
  }

  .shimmer {
    --shimmer-duration: 2s;
    --shimmer-spread: calc(3ch + 40px);
    --shimmer-angle: 20deg;
    --shimmer-color: currentColor;
    --shimmer-muted: color-mix(in oklch, currentColor, var(--ui-neutral-0) 60%);
    background-image: linear-gradient(calc(90deg + var(--shimmer-angle)), transparent, var(--shimmer-color), transparent), linear-gradient(var(--shimmer-muted), var(--shimmer-muted));
    background-size: var(--shimmer-spread) 100%,
    100% 100%;
    background-position: calc(-1 * var(--shimmer-spread)) 0,
    0 0;
    -webkit-text-fill-color: transparent;
    animation: ui-shimmer var(--shimmer-duration) var(--ease-in-out-sine) infinite;
    background-repeat: no-repeat;
    background-clip: text;

    &:dir(rtl) {
      animation-direction: reverse;
    }

    &.reverse {
      animation-direction: reverse;

      &:dir(rtl) {
        animation-direction: normal;
      }
    }

    &.once {
      animation-iteration-count: 1;
    }

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }
}

/* chat */
@layer ui {
  @keyframes ui-chat-message {
    from {
      opacity: 0;
      translate: 0 1rem;
    }
  }

  @keyframes ui-chat-jump-hide {
    50%, to {
      opacity: 0;
      visibility: hidden;
    }
  }

  .chat {
    --ui-chat-tail: var(--ui-rounded-2);
    inline-size: -webkit-fill-available;
    inline-size: -moz-available;
    inline-size: stretch;
    overflow-y: auto;
    container-type: scroll-state;

    & ul {
      gap: var(--ui-spacing-4);
      flex-direction: column;
      inline-size: -webkit-fill-available;
      inline-size: -moz-available;
      inline-size: stretch;
      display: flex;
    }

    & .bubble {
      width: fit-content;
      border-radius: var(--ui-rounded-3);
      max-inline-size: min(80%, 60ch);

      &:not(.ghost) {
        padding-inline: var(--ui-spacing-3);
        padding-block: var(--ui-spacing-2);
        background-color: var(--ui-neutral-200);
      }

      & * {
        text-wrap-style: auto;
      }

      & p, & ul, & ol {
        line-height: 1.3;
      }

      &:not(li):not(:first-of-type) {
        margin-block-start: .63em;
      }

      &:not(.me) {
        border-end-start-radius: var(--ui-chat-tail);
      }

      &.me {
        animation: ui-chat-message var(--ease-snap-2);
        background-color: var(--ui-primary);
        color: var(--ui-primary-fg, contrast-color(color-mix(var(--ui-primary), black 15%)));
        border-end-end-radius: var(--ui-chat-tail);
        margin-inline-start: auto;

        @media (prefers-reduced-motion: reduce) {
          animation: none;
        }
      }
    }

    & ul > li > .shimmer {
      width: fit-content;
      padding-inline: var(--ui-spacing-3);
      padding-block: var(--ui-spacing-2);
    }

    & ul > li:has( > .avatar) {
      padding-inline-start: calc(20px + var(--ui-spacing-2));
      position: relative;

      & > .avatar {
        height: 20px;
        font-size: 10px;
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: 0;
      }

      &:has( > .bubble.me) {
        padding-inline: 0 calc(20px + var(--ui-spacing-2));

        & > .avatar {
          inset-inline: auto 0;
        }
      }
    }

    & .jump {
      margin-left: 50%;
      position: sticky;
      bottom: 0;
      transform: translateX(-50%);

      @supports (container-type: scroll-state) {
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--ease-glide-3),
        visibility .2s allow-discrete;
        animation: linear both ui-chat-jump-hide;
        animation-timeline: scroll();
        animation-range: calc(100% - 1rem) 100%;

        @container scroll-state(scrollable: bottom) {
          opacity: 1;
          visibility: visible;
        }
      }
    }

    & > li {
      position: relative;

      &:has( > .avatar) {
        padding-inline-start: calc(var(--ui-spacing-2) * 2 + 1lh + var(--ui-spacing-2));
      }

      & > .avatar {
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: 0;
      }

      &:has( > small) > .avatar {
        inset-block-end: calc(1lh + var(--ui-spacing-1));
      }

      & > small {
        padding-inline: var(--ui-spacing-3);
        color: var(--ui-neutral-500);
        font-size: var(--ui-text-xs);
      }

      &.sent {
        & > * {
          margin-left: auto;
        }

        &:has( > .avatar) {
          padding-inline-start: 0;
          padding-inline-end: calc(var(--ui-spacing-2) * 2 + 1lh + var(--ui-spacing-2));
        }

        & > .avatar {
          inset-inline: auto 0;
        }
      }

      & > p.typing {
        --ui-chat-on: color-mix(in oklch, currentColor 70%, transparent);
        --ui-chat-off: color-mix(in oklch, currentColor 20%, transparent);

        &:before {
          content: "";
          vertical-align: middle;
          border-radius: var(--ui-rounded-full-fixed);
          background-color: var(--ui-chat-on);
          block-size: .4em;
          inline-size: .4em;
          margin-inline-end: 1.4em;
          animation: 1.2s step-end infinite ui-chat-typing;
          display: inline-block;
        }

        @media (prefers-reduced-motion: reduce) {
          &:before {
            animation: none;
          }
        }
      }
    }
  }
}