/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* stylelint-disable */

/*
 * The styles in this file are intended to be applied to `aiChatContent.html`,
 * which runs in a nested, remote frame for sandboxing reasons. They
 * are not intended to be used directly in `aiWindow.html`
 */

:host {
  display: flex;
  flex-direction: column;
  height: 100%;
  --smart-window-fade-size: var(--size-item-xlarge);
  /* space between chat bubbles + spacing around the header + header size */
  --smart-window-top-spacing-chat: calc(var(--space-large) * 2 + var(--space-small) * 2 + var(--button-size-icon));
  position: relative;
}

.chat-content-wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  width: 100%;

  &[overflowing] {
    --bottom-fade-size: var(--smart-window-fade-size);
    mask-image: linear-gradient(
      to bottom,
      transparent,
      var(--color-black) var(--smart-window-fade-size),
      var(--color-black) calc(100% - var(--bottom-fade-size)),
      transparent
    );
  }

  &[overflowing][scrolled-to-bottom] {
    --bottom-fade-size: 0px;
  }

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

.chat-inner-wrapper {
  /*
   * Without this box-sizing, even a medium size chat-bubble-user flexes this
   * element horizontally, and since it has width: 100% and a lot of padding,
   * that flexion overflows the visible part of the sidebar viewport and
   * part of the chat-bubble-user is clipped.
   */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
  padding-block-start: var(--smart-window-top-spacing-chat);
  padding-inline: max(var(--space-medium), calc((100% - var(--smartwindow-content-max-width)) / 2));
  --content-height: 100%;
  min-height: var(--content-height);
  width: 100%;

  & > :last-child {
    padding-block-end: var(--smart-window-fade-size);
  }
}

/* Temporary chat bubble styling */
.chat-bubble {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding-block: var(--space-large);
}

.chat-bubble-user {
  --chat-bubble-inset-color: color-mix(in srgb, var(--color-violet-30) 12%, transparent);

  align-self: flex-end;
  background: light-dark(white, var(--color-violet-110));
  border-radius: var(--space-medium);
  box-shadow:
    var(--smartwindow-shadow, var(--box-shadow-level-2)),
    inset 0 0 5px var(--chat-bubble-inset-color, var(--box-shadow-color-lighter-layer-1));
  gap: var(--space-medium);
  max-width: 75%;
  overflow-wrap: anywhere;
  padding-inline: var(--space-large);
  width: fit-content;
}

.chat-bubble-assistant {
  gap: var(--space-small);
  width: 100%;
}

moz-button.jump-to-bottom-button {
  --button-border-radius: var(--border-radius-large);
  --button-background-color: light-dark(var(--color-white), var(--color-gray-80));
  --button-text-color: light-dark(var(--color-gray-70), var(--color-white));
  --button-background-color-hover: light-dark(var(--color-violet-0), var(--color-gray-70));
  --button-opacity-disabled: 1;
  bottom: var(--space-large);
  inset-inline: 0;
  margin-inline: auto;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition:
    opacity 100ms linear,
    visibility 100ms linear;
  visibility: hidden;
  width: max-content;
}

moz-button.jump-to-bottom-button::part(button) {
  box-shadow: var(--box-shadow-level-1);
}

moz-button.jump-to-bottom-button[visible] {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
