h1,
h2,
h3 {
  margin-block: 10px;
  line-height: 1;
}

body {
  font-size: 14px;
  line-height: 1.35;
  height: calc(100dvh - 80px);
}

.dm,
.btn-group {
  display: none;
}

body:has(.added-content) .dm {
  display: inline;
}

body:has(.toggle-message) .btn-group {
  display: flex;
  gap: 20px;
  margin-left: auto;
}

.section {
  max-width: 1024px;
  margin-inline: auto;
}

.chat-wrapper {
  display: grid;
  gap: 20px;
  grid-template-rows: auto minmax(250px, 1fr) auto;
  padding: 20px;
  width: 750px;
  margin: auto;
  border: 1px solid #999;
  height: 100%;

  p {
    margin-bottom: 10px;
  }
}

.chat-wrapper > div:nth-child(odd) {
  padding: 15px;
  background-color: rgb(183, 183, 183);
}

.chat-history {
  overflow-y: auto;
}

.chat-writing-area {
  overflow-y: auto;
}

.chat-header {
  display: flex;
  gap: 25px;

  &:has(:not(.btn-group)) {
    justify-content: space-between;
  }
}

.form-group {
  margin-block: 20px;

  &.chat-fieds-group {
    display: flex;
    gap: 20px;

    svg {
      cursor: pointer;
    }

    input {
      flex-grow: 1;
      padding-inline: 8px;
      border: 1px solid var(--bgprimary);
      font-family: var(--ffamily);
    }
  }
}

button {
  background-color: color-mix(in lab, var(--bgprimary) 80%, var(--white) 20%);
  border: 1px solid var(--bgprimary);
  color: var(--white);
  border-radius: 5px;
  padding: 5px 25px;
  cursor: pointer;
  font-family: var(--ffamily);
}

.added-content {
  color: #ffffff;
  margin-bottom: 15px;
}

.suggested-message {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1s;
  background-color: color-mix(in lab, var(--bgprimary) 80%, var(--white) 20%);
}

.suggested-message-inner {
  overflow: hidden;
  /*grid-row: 1 / span 2; try to add if found any speed issue with child*/
}

.suggested-message-content {
  padding: 10px;

  h4 {
    color: #fff;
  }
}

.toggle-message {
  grid-template-rows: 1fr;
}

/* and the other way is to add dynamic height by .ts, in that case we can simply animate.*/