.chat-container {
  background-color: var(--elevation-background-color, --color-accent-surface-elevation-1);
  display: grid;
  block-size: 100%;
  overflow: auto;
  grid-template-rows: 1fr;
  position: relative;
  --chat-common-border-radius: 4px;
}

.chat-container.with-header {
  grid-template-rows: max-content 1fr;
}

.section {
  display: contents;
}

.header {
  padding: 4px 4px 4px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap-l);
  color: var(--color-text-neutral-default);
  border-block-end: 1px solid var(--color-border-surface-on-elevation-1);
}
.header .button-copy-chat,
.header .button-delete-chat {
  --control-border-color: transparent !important;
}
.header .button-delete-chat:hover {
  filter: brightness(1.3);
}
.header .button-delete-chat:active {
  filter: brightness(0.8);
}

.ch-chat-container {
  overflow: auto;
  position: relative;
  display: grid;
}

.chat-container__conversation-copied {
  position: absolute;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  background: var(--color-accent-neutral-black);
  opacity: 0.75;
  backdrop-filter: saturate(180%) blur(20px);
  display: grid;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-padding-xxxl);
  pointer-events: none;
  overflow: hidden;
  animation: fadeIn 100ms ease-in-out forwards;
  opacity: 0;
}

.chat-container__conversation-copied-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-l);
  position: relative;
  inset-block-start: 4px;
  opacity: 0;
  animation: liftUp var(--timing-fast) ease-in-out forwards;
  animation-delay: var(--timing-fast);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes liftUp {
  from {
    opacity: 0;
    inset-block-start: 4px;
  }
  to {
    opacity: 1;
    inset-block-start: 0;
  }
}
.chat::part(code-block-header__copy) {
  --copy-text-opacity: 0;
  --copy-text-translate-x: 8px;
  opacity: var(--copy-text-opacity);
  pointer-events: none;
  transform: translateX(var(--copy-text-translate-x));
  transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;
  font-size: var(--font-size-body-s);
}

.chat::part(code-block-header__copy-copied) {
  --copy-button-pointer-events: none !important;
  --copy-text-opacity: 1;
  --copy-text-translate-x: 0;
}

.chat::part(code-block-header) {
  align-items: center;
  display: flex;
  gap: var(--spacing-gap-m);
}