shiny-chat-container {
  --shiny-chat-border: var(--bs-border-width, 1px) solid var(--bs-border-color, #e9ecef);
  --shiny-chat-user-message-bg: RGBA(var(--bs-primary-rgb, 0, 123, 194), 0.06);
  --_chat-container-padding: 0.25rem;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  margin: 0 auto;
  gap: 0;
  padding: var(--_chat-container-padding);
  padding-bottom: 0; // Bottom padding is on input element

  p:last-child {
    margin-bottom: 0;
  }

  .suggestion,
  [data-suggestion] {
    cursor: pointer;
  }

  // Styling for inline-text
  .suggestion {
    color: var(--bs-link-color, #007bc2);

    text-decoration-color: var(--bs-link-color, #007bc2);
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;

    padding-inline: 2px;

    &:hover {
      text-decoration-style: solid;
    }

    &::after {
      content: "\2726"; // diamond/star
      display: inline-block;
      margin-inline-start: 0.15em;
    }

    &.submit,
    &[data-suggestion-submit=""],
    &[data-suggestion-submit="true"] {
      &::after {
        content: "\21B5"; // return key symbol
      }
    }
  }

  // Styling for card suggestions
  .card[data-suggestion]:hover {
    color: var(--bs-link-color, #007bc2);
    border-color: rgba(var(--bs-link-color-rgb), 0.5);
  }
}

shiny-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  overflow: auto;
  margin-bottom: 1rem;

  // Make space for the scroll bar
  --_scroll-margin: 1rem;
  padding-right: var(--_scroll-margin);
  margin-right: calc(-1 * var(--_scroll-margin));
}

shiny-chat-message {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  > * {
    height: fit-content;
  }
  .message-icon {
    border-radius: 50%;
    border: var(--shiny-chat-border);
    height: 2rem;
    width: 2rem;
    display: grid;
    place-items: center;
    overflow: clip;

    > * {
      // images and avatars are full-bleed
      height: 100%;
      width: 100%;
      max-width: 100%;
      max-height: 100%;
      margin: 0 !important;
      object-fit: contain;
    }

    > svg,
    > .icon,
    > .fa,
    > .bi {
      // icons and svgs need some padding within the circle
      max-height: 66%;
      max-width: 66%;
    }

    // Provide .border-0 as a way to opt-out of border container
    &:has(> .border-0) {
      border: none;
      border-radius: unset;
      overflow: unset;
    }
  }

  /* Vertically center the 2nd column (message content) */
  shiny-markdown-stream {
    align-self: center;
  }
}

/* Align the user message to the right */
shiny-user-message {
  align-self: flex-end;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background-color: var(--shiny-chat-user-message-bg);
  max-width: 100%;
}

shiny-user-message,
shiny-chat-message {
  &[content_type="text"] {
    white-space: pre;
    overflow-x: auto;
  }
}

shiny-chat-input {
  --_input-padding-top: 0;
  --_input-padding-bottom: var(--_chat-container-padding, 0.25rem);

  margin-top: calc(-1 * var(--_input-padding-top));
  position: sticky;
  bottom: calc(-1 * var(--_input-padding-bottom) + 4px);
  // 4px: autoscroll adds 2px to height, this keeps input from wiggling when scrolling on top of chat
  padding-block: var(--_input-padding-top) var(--_input-padding-bottom);

  textarea {
    --bs-border-radius: 26px;
    resize: none;
    padding-right: 36px !important;
    max-height: 175px;
    &::placeholder {
      color: var(--bs-gray-600, #707782) !important;
    }
  }
  button {
    position: absolute;
    bottom: calc(6px + var(--_input-padding-bottom));
    right: 8px;
    background-color: transparent;
    color: var(--bs-primary, #007bc2);
    transition: color 0.25s ease-in-out;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 16px;
    border-radius: 50%;
    &:disabled {
      cursor: not-allowed;
      color: var(--bs-gray-500, #8d959e);
    }
  }
}

/*
  Disable the page-level pulse when the chat input is disabled
  (i.e., when a response is being generated and brought into the chat)
*/
.shiny-busy:has(shiny-chat-input[disabled])::after {
  display: none;
}
