/* 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/. */

:host {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  align-self: center;
  align-items: center;
  justify-items: center;
  width: 100%;
}

/* Fullpage: browser collapsed (0 height) until chat starts, showing prompts and smartbar */
:host([mode="fullpage"]) {
  grid-template-areas:
    "browser"
    "."
    "heading"
    "smartbar"
    "prompts"
    "."
    "footer";
  grid-template-rows: 0 1fr auto auto auto 1fr auto;
  align-content: stretch;
}

:host([mode="sidebar"]) {
  grid-template-areas:
    "sidebar-header"
    "browser"
    "prompts"
    "smartbar"
    "disclaimer";
  grid-template-rows: auto 1fr auto auto auto;
}

/* Expands browser to full height and removes prompts from grid when chat starts */
:host(.chat-active) {
  grid-template-areas:
    "browser"
    "smartbar"
    "disclaimer";
  grid-template-rows: 1fr auto auto;
}

:host([mode="sidebar"].chat-active) {
  grid-template-areas:
    "sidebar-header"
    "browser"
    "smartbar"
    "disclaimer";
  grid-template-rows: auto 1fr auto auto;
}

#browser-container {
  grid-area: browser;
  display: contents;
  width: 100%;
}

#aichat-browser {
  width: 100%;
  height: 100%;
}

#smartbar-wrapper {
  grid-area: smartbar;
  height: var(--smartbar-height, auto);
  margin-block-end: var(--space-small);
  /* smartbar max width must be the same as the child context (ai-window-content.css) container */
  max-width: var(--smartwindow-content-max-width);
  position: relative;
  width: calc(100% - var(--space-large));
}

#ai-window-smartbar {
  position: absolute;
  z-index: 1;
}

.disclaimer {
  --disclaimer-text-color: light-dark(var(--color-gray-60), var(--color-gray-30));
  color: var(--disclaimer-text-color);
  font-size: var(--font-size-small);
  grid-area: disclaimer;
  margin-block-end: var(--space-small);
  user-select: none;
}

/* These colors are duplicated from `.message-assistant a` styles in
 * `ai-chat-message.css` to ensure the disclaimer links have the same color
 *  and behavior as assistant message links, even outside of the chat message
 * context. We can consider centralizing these styles if we find more use cases
 * for assistant-styled links outside of chat messages and the disclaimer.
 */
.disclaimer a {
  --smartwindow-assistant-link-color: light-dark(var(--color-violet-50), var(--color-violet-20));
  --smartwindow-assistant-link-color-hover: light-dark(var(--color-violet-90), var(--color-violet-50));
  --smartwindow-assistant-link-color-visited: light-dark(var(--color-violet-70), var(--color-violet-40));
  --smartwindow-assistant-link-color-active: light-dark(var(--color-violet-90), var(--color-violet-50));
  --smartwindow-assistant-accent-color-focus: light-dark(var(--color-violet-70), var(--color-violet-40));
  color: var(--smartwindow-assistant-link-color);
}

.disclaimer a:visited {
  color: var(--smartwindow-assistant-link-color-visited);
}

.disclaimer a:hover {
  color: var(--smartwindow-assistant-link-color-hover);
}

.disclaimer a:active {
  color: var(--smartwindow-assistant-link-color-active);
}

.disclaimer a:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  accent-color: var(--smartwindow-assistant-accent-color-focus);
}

:host([mode="fullpage"]) #ai-window-smartbar {
  top: 0;
}

:host([mode="sidebar"]) #ai-window-smartbar {
  bottom: 0;
}

smartwindow-prompts {
  grid-area: prompts;
  width: 100%;
}

#browser-container.chat-active #ai-window-smartbar {
  grid-area: 2 / 1;
}

.sidebar-header {
  box-sizing: border-box;
  grid-area: sidebar-header;
  padding: var(--space-small);
  width: 100%;
}

moz-button.new-chat-icon-button {
  --button-border-radius: var(--border-radius-large);
  /* Updating background color for light only, persisting default dark background-color */
  --button-background-color: light-dark(var(--color-white), rgba(0, 0, 0, 0.33));
  --button-text-color: light-dark(var(--color-violet-80), var(--color-white));
  --button-background-color-hover: color-mix(in srgb, currentColor 11%, transparent);
}

moz-button.new-chat-icon-button::part(button) {
  box-shadow: var(--box-shadow-level-1);
}

#smartbar-toggle-button:not([hidden]) {
  display: flex;
  justify-self: center;
  align-self: center;
  --icon-size: var(--icon-size-medium);
}

#smartbar-toggle-button {
  --smartbar-button-border-color: color-mix(in srgb, var(--color-purple-70) 15%, transparent);
  --smartbar-button-background-color: color-mix(in srgb, var(--color-purple-40) 20%, transparent);
  --smartbar-button-text-color: var(--color-gray-100);
}

#smartbar-toggle-button::part(button) {
  display: flex;
  padding: calc(var(--space-medium) + var(--space-xxsmall)) var(--space-large);
  border-radius: var(--border-radius-circle);
  border: var(--border-width) solid var(--smartbar-button-border-color);
  background: var(--smartbar-button-background-color);
  box-shadow: var(--box-shadow-level-2);
}

#smartbar-toggle-button::part(moz-button-label) {
  color: var(--smartbar-button-text-color);
  font-size: var(--button-font-size);
  font-weight: var(--font-weight);
}

smartwindow-heading {
  grid-area: heading;
}

:host(.chat-active) smartwindow-heading {
  display: none;
}

smartwindow-footer {
  grid-area: footer;
  width: 100%;
  display: flex;
  justify-content: center;
}
