.content-wrapper {
  min-height: calc(100vh - 220px);
}

.layout-with-chat {
  --chat-top-offset: 0px;
}

.chat-fixed-container {
  position: relative;
  height: 100%;
  width: 100%;
  align-self: stretch;
}

.chat-fixed,
.page-chat-rail {
  position: sticky;
  top: var(--chat-top-offset);
  z-index: 100;
  max-height: calc(100vh - 16px);
  margin-bottom: 16px;
  overflow: visible;
  width: 100%;
}

.chat-panel,
.ai-shop-chat-container {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-direction: column;
  height: 100%;
  min-height: 500px;
  width: 100%;
}

.chat-header {
  border-radius: 0.5rem 0.5rem 0 0;
}

.ai-chat-panel-header {
  color: #fff;
  background: linear-gradient(135deg, #1f4b7a, #2f8acb, #1f4b7a);
  background-size: 200% 200%;
  animation: aiChatHeaderShift 12s ease-in-out infinite;
}

.ai-chat-subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
}

.chat-messages {
  flex: 0 0 150px;
  overflow-y: auto;
  min-height: 150px;
  max-height: 170px;
}

.ai-chat-panel-messages {
  flex: 0 0 150px;
  min-height: 150px;
  max-height: 170px;
}

.chat-footer {
  border-radius: 0 0 0.5rem 0.5rem;
}

.chat-footer,
.ai-chat-panel-input {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.ai-chat-panel-input .js-ai-chat-form {
  flex: 1 1 auto;
  display: flex;
}

.ai-chat-panel-input .js-ai-chat-form > div {
  flex: 1 1 auto;
}

.ai-chat-submit-btn {
  display: block;
  width: min(220px, 100%);
  min-width: 150px;
  margin: 0.25rem auto 0;
  text-align: center;
  padding: 0.5rem 1.25rem;
  white-space: nowrap;
}

.ai-chat-textarea {
  flex: 1 1 auto;
  min-height: 240px;
}

.col-lg-4 .chat-fixed {
  max-width: 100%;
}

.col-lg-4 .chat-messages {
  max-height: 500px;
}

@keyframes aiChatHeaderShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media (max-width: 991.98px) {
  .chat-fixed,
  .page-chat-rail {
    position: static;
    top: auto;
    max-height: none;
    margin-top: 16px;
  }

  .chat-panel,
  .ai-shop-chat-container {
    min-height: auto;
    max-height: none;
  }
}