:host {
  block-size: 100%;
}

.welcome-container {
  --opacity: 1;
  --translate-y: 0;
  opacity: var(--opacity);
  transform: translateY(var(--translate-y));
  transition: all var(--transition-duration);
  display: flex;
  block-size: 100%;
  grid-template-rows: max-content max-content;
  flex-direction: column;
  justify-content: space-between;
  background-repeat: no-repeat;
  background-size: cover;
  background-size: contain;
}
.welcome-container.hidden {
  --opacity: 0;
  --translate-y: 4px;
}

.header {
  --opacity: 0;
  --translate-y: 3px;
  transition: all var(--transition-duration) var(--transition-delay) cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(var(--translate-y));
  opacity: var(--opacity);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-xl);
  align-items: center;
  padding: 16px;
}
.header--visible {
  --opacity: 1;
  --translate-y: 0;
}
.header__circle {
  inline-size: 55px;
  block-size: 55px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-block-end: calc(8px * -1);
}
.header__title {
  display: grid;
  text-align: center;
  margin: 0;
  text-align: center;
  white-space: pre-line;
  line-height: var(--line-height-regular);
  font-weight: var(--font-style-semi-bold);
  font-size: var(--font-size-header-h3);
}
.header__greeting {
  line-height: var(--line-height-relaxed);
  text-align: center;
  font-weight: var(--font-style-regular);
}

.suggested-prompts {
  --opacity: 1;
  opacity: var(--opacity);
  transition: opacity var(--transition-duration);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-xl);
  list-style: none;
  margin: 0;
  padding: 16px;
}
.suggested-prompts.hidden {
  --opacity: 0;
}
.suggested-prompts__button {
  opacity: 0;
  transform: translateX(-3px);
  animation: fadeInSuggestedPromptButton var(--timing-regular) ease forwards;
  animation-delay: var(--delay, 0s);
  padding: var(--spacing-padding-l);
  border-radius: 44px;
  font-style: oblique;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-m);
  max-inline-size: 300px;
  background-color: var(--color-component-button-suggestion-accent-default);
  color: var(--color-text-neutral-default);
  border: 1px solid var(--color-component-button-suggestion-border-default);
}
.suggested-prompts__button:hover {
  background-color: var(--color-component-button-suggestion-accent-hover);
  border-color: var(--color-component-button-suggestion-border-hover);
  color: var(--color-text-primary-hover);
}
.suggested-prompts__button:active {
  background-color: var(--color-component-button-suggestion-accent-pressed);
  border-color: var(--color-component-button-suggestion-border-pressed);
  color: var(--color-text-neutral-pressed);
}
.suggested-prompts__icon {
  flex-shrink: 0;
}

@keyframes fadeInSuggestedPromptButton {
  from {
    opacity: 0;
    transform: translateX(-3px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}