/* 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%;
  scrollbar-gutter: stable both-edges;

  &[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
    );
    position: relative;

    /* TODO: Bug 2033070 -  Nova tokens were implemented as the default value for the custom properties, and the fallbacks (and lint exceptions) will need to be removed after launch */
    @media -moz-pref("browser.nova.enabled") {
      mask-image: none;

      &::after,
      &::before {
        backdrop-filter: blur(2px);
        content: "";
        height: var(--size-item-xlarge);
        inset-inline: 0;
        position: fixed;
      }

      &::after {
        mask: linear-gradient(var(--color-black) 30%, var(--color-black-alpha-60) 50%, transparent 70%);
        top: 0;
      }

      &::before {
        bottom: 0;
        mask: linear-gradient(transparent 30%, var(--color-black-alpha-60) 50%, var(--color-black) 70%);
      }
    }
  }

  &[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:not(.chat-bubble-user) {
    padding-block-end: var(--smart-window-fade-size);
  }

  & > ai-action-result[is-expanded] {
    margin-block-end: var(--space-large);
  }

  & > ai-action-result + .chat-bubble-assistant {
    padding-block-start: 0;
    margin-block-start: calc(-2 * var(--space-small));
  }
}

.assistant-response-announcer {
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Temporary chat bubble styling */
.chat-bubble {
  box-sizing: border-box;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  --smartwindow-message-chat-bubble-line-height: 1.5; /* for readability */
  line-height: var(--smartwindow-message-chat-bubble-line-height);
  padding-block: var(--space-large);

  @media -moz-pref("browser.nova.enabled") and (not (forced-colors)) {
    --text-color: light-dark(
      color-mix(in srgb, var(--color-violet-desaturated-90) 70%, transparent),
      color-mix(in srgb, var(--color-violet-desaturated-0) 70%, transparent)
    );
  }
}

.chat-bubble-user {
  align-self: flex-end;
  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;

  @media not (forced-colors) {
    --chat-bubble-background-color: light-dark(var(--color-white), var(--color-violet-110));
    --chat-bubble-inset-color: color-mix(in srgb, var(--color-violet-30) 12%, transparent);
    background: var(--chat-bubble-background-color);
  }

  /* TODO: Bug 2033070 -  Nova tokens were implemented as the default value for the custom properties, and the fallbacks (and lint exceptions) will need to be removed after launch */
  @media -moz-pref("browser.nova.enabled") {
    border: var(--border-width) solid var(--border-color);
    box-shadow: none;

    @media not (forced-colors) {
      --chat-bubble-background-color: light-dark(var(--color-white), var(--color-neutral-120, #1e1d20));
      --chat-bubble-border-color: light-dark(var(--color-violet-desaturated-10), var(--color-violet-desaturated-50));
      border-color: var(--chat-bubble-border-color);
    }
  }
}

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

  /* TODO: Bug 2033070 -  Nova tokens were implemented as the default value for the custom properties, and the fallbacks (and lint exceptions) will need to be removed after launch */
  @media -moz-pref("browser.nova.enabled") and (not (forced-colors)) {
    --chat-bubble-assistant-background-color: var(--ai-background-color);
    /* Background color is needed in order to have the blur effect on the edges */
    background-color: var(--chat-bubble-assistant-background-color);
  }
}

moz-button.jump-to-bottom-button {
  --button-border-radius: var(--border-radius-large);
  --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;

  @media not (forced-colors) {
    --button-background-color-ghost: light-dark(var(--color-white), var(--color-gray-80));
    --button-text-color-ghost: light-dark(var(--color-gray-70), var(--color-white));
    --button-background-color-ghost-hover: light-dark(var(--color-violet-0), var(--color-gray-70));
  }
}

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;
}

/* TODO - move these styles into a component https://bugzilla.mozilla.org/show_bug.cgi?id=2046155 */
moz-button.tool-retry-button {
  --button-background-color: light-dark(var(--color-violet-0), var(--color-gray-80));
  --button-background-color-active: light-dark(color-mix(in srgb, var(--color-violet-50) 25%, transparent), color-mix(in srgb, white 15%, transparent));
  --button-background-color-disabled: var(--color-gray-20);
  --button-background-color-hover: light-dark(color-mix(in srgb, var(--color-violet-50) 15%, transparent), color-mix(in srgb, white 10%, transparent));
  --button-background-color-selected: light-dark(color-mix(in srgb, var(--color-violet-50) 25%, transparent), color-mix(in srgb, white 15%, transparent));
  --button-border-radius: var(--border-radius-circle);
  --button-font-size: var(--font-size-small);
  --button-font-weight: var(--font-weight);
  --button-padding: var(--space-small);
  --button-text-color: var(--smartwindow-brand-accent);
  --button-text-color-hover: var(--smartwindow-brand-accent);
  --button-text-color-active: var(--smartwindow-brand-accent);
}

moz-button.tool-retry-button::part(button) {
  position: relative;
  box-shadow: var(--smartwindow-shadow, var(--box-shadow-level-2));
}

moz-button.tool-retry-button::part(button)::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--border-width));
  border-radius: inherit;
  padding: var(--border-width);
  background: light-dark(
    linear-gradient(
      180deg,
      var(--color-white-alpha-20) 0%,
      color-mix(in srgb, var(--color-violet-110) 5%, transparent) 31.73%,
      color-mix(in srgb, var(--color-violet-110) 15%, transparent) 100%
    ),
    linear-gradient(180deg, var(--color-black-alpha-30) 0%, var(--color-violet-50) 100%)
  );
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
