/*
 * ========================================
 * ThinkerStreet Chat Home
 * ========================================
 */

/*
 * Lock document scrolling.
 *
 * Only the chat message area
 * should scroll independently.
 */

html:has(body.chat-home),
body.chat-home {
  width: 100%;

  height: 100%;

  overflow: hidden;

  overscroll-behavior: none;
}

/*
 * ========================================
 * Welcome screen
 * ========================================
 */

.welcome {
  min-height: 100%;

  display: flex;

  flex-direction: column;

  /*
   * Top-anchored content does not
   * recenter while the keyboard
   * resizes the chat.
   */

  justify-content: flex-start;

  align-items: center;

  text-align: center;

  padding:
    clamp(32px, 9svh, 96px)
    8px
    18px;
}

.welcome h1 {
  font:
    600 clamp(30px, 5vw, 54px)/1.06 Georgia,
    serif;

  letter-spacing: -0.035em;

  max-width: 640px;

  margin: 4px 0;
}

.welcome > p:not(.eyebrow) {
  color: var(--muted);

  font-size: 13px;
}

/*
 * ========================================
 * Welcome newsletter
 * ========================================
 */

.welcome-newsletter {
  padding: 9px 13px;

  border: 1px solid #38a7ff55;

  background:
    linear-gradient(
      140deg,
      #38a7ff15,
      #ffffff03
    );

  box-shadow: 0 0 35px #38a7ff12;

  font-size: 12px;
}

.welcome-newsletter span {
  color: #a1dcff;

  margin-right: 8px;
}

/*
 * ========================================
 * Main chat layout
 * ========================================
 */

.chat-home #main {
  min-height: 0;

  min-width: 0;

  display: grid;

  /*
   * Chat messages occupy available
   * space.
   *
   * Composer occupies its natural
   * height at the bottom.
   */

  grid-template-rows:
    minmax(0, 1fr)
    auto;

  overflow: hidden;

  transition: none;

  background:
    radial-gradient(
      ellipse at 50% 80%,
      #17487514,
      transparent 70%
    );
}

/*
 * ========================================
 * Small screens
 * ========================================
 */

@media (max-height: 540px) {
  .welcome .eyebrow,
  .welcome > p:not(.eyebrow) {
    display: none;
  }

  .welcome h1 {
    font-size: 28px;
  }

  .welcome-newsletter {
    margin-top: 14px;
  }
}