/* 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 https://mozilla.org/MPL/2.0/. */

:host {
  @media not (forced-colors) {
    --card-background-color: light-dark(var(--color-violet-10), var(--color-violet-50));
    --card-border-color: light-dark(var(--color-violet-10), var(--color-violet-50));
    --box-shadow-level-4: 0 4px 12px 2px rgba(58, 15, 110, 0.24);
  }
}

.ai-chat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  padding: var(--space-xsmall);

  /* @TODO: Replace 12px with token Bug 2030460 */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  border-radius: 12px;

  border: var(--card-border);
  background: var(--background-color-box);
  box-shadow: var(--box-shadow-level-2);

  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens -- history thumbnail Figma */
  width: 100%;

  img.thumbnail,
  div.thumbnail {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    aspect-ratio: 1.55;
    object-fit: cover;
    border-radius: var(--border-radius-medium);
    background: var(--card-background-color);
  }

  div.thumbnail {
    display: flex;
    justify-content: center;

    div {
      display: flex;
      width: var(--size-image-xsmall);
      height: var(--size-image-xsmall);
      align-self: center;
      justify-content: center;
      border-radius: var(--border-radius-circle);
      background: var(--background-color-box);

      img {
        box-sizing: border-box;
        border-radius: var(--border-radius-circle);
        width: var(--icon-size-large);
        height: var(--icon-size-large);
        align-self: center;
      }
    }
  }

  .title {
    color: var(--text-color);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    font-style: normal;
    line-height: normal;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .description {
    display: flex;
    flex-direction: column;
    gap: var(--space-xsmall);
    padding: var(--space-xsmall);
    align-self: stretch;

    .meta {
      display: flex;
      gap: var(--space-xsmall);
      align-content: center;
      justify-content: space-between;
      width: 100%;
      color: var(--text-color-deemphasized);
      letter-spacing: 0.22px;
      font-size: var(--font-size-small);
      line-height: var(--font-size-small);
      font-style: normal;
      font-weight: var(--font-weight);

      .timestamp {
        text-align: end;
        white-space: nowrap;
      }
    }

    .meta > .site {
      display: flex;
      gap: var(--space-xsmall);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      .favicon {
        width: var(--icon-size-small);
        height: var(--icon-size-small);
      }

      .domain {
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  &:hover,
  &:active {
    box-shadow: var(--box-shadow-level-4);
  }

  &:active {
    outline: 1px solid var(--focus-outline-color);
  }

  &:focus-visible {
    outline: 2px solid var(--focus-outline-color);
  }
}

.ai-chat-card-thumbnail-fallback {
  border-radius: var(--border-radius-medium);
  overflow: hidden;

  .background {
    fill: transparent;

    @media not (forced-colors) {
      /* stylelint-disable-next-line -- Figma design */
      fill: light-dark(var(--color-violet-10), var(--color-violet-70));
    }

    @media -moz-pref("browser.nova.enabled") and (not (forced-colors)) {
      /* stylelint-disable-next-line -- Figma design */
      fill: light-dark(var(--color-violet-desaturated-10), var(--color-violet-desaturated-70));
    }
  }

  .box {
    fill: var(--icon-color);

    @media not (forced-colors) {
      /* stylelint-disable-next-line -- Figma design */
      fill: light-dark(var(--color-white-alpha-60), var(--color-white-alpha-30));
    }
  }
}
