:host {
  /**
  * @prop --klevu-chat-layout-max-height 100vh: The maxium height for the chat layout.
  */
  height: 100%;
  display: flex !important;
  flex-direction: column;
  max-height: 100vh;
  --chat-height: var( --klevu-chat-layout-height, 200px);
  --chat-max-height: var(--klevu-chat-layout-max-height, 100vh);
  --footer-border-top: var(--klevu-footer-border-top, 1px solid var(--klevu-color-neutral-3));
}

main {
  height: var(--chat-height);
  min-height: 200px;
  max-height: var(--chat-max-height);
  flex-grow: 1;
}

footer {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: var(--klevu-spacing-04);
  border-top: var(--footer-border-top);
}

footer .inputs {
  display: flex;
  gap: var(--klevu-spacing-04);
}

footer klevu-textfield {
  width: 100%;
}

klevu-popup div[slot="content"] {
  padding: var(--klevu-spacing-04);
}