.container {
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  width: 100dvw;
  max-width: 100vw;
  max-width: 100dvw;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.chatbot {
  border: 1px solid var(--h-stroke-default, var(--color-border));
  border-radius: var(--h-border-radius-lg, 16px);
  flex: 1 1 auto;
  flex-direction: column;
  height: min(100%, 100vh);
  margin-bottom: 0;
  pointer-events: auto;
  position: relative;
  z-index: 999;
  background: var(--h-bg-neutral-default, var(--color-background));
  display: flex;
  box-shadow: 0 0 12px rgba(29, 30, 32, 0.16);
  overflow: hidden;
}

.chatbot[data-v-1d291a88] {
  height: 100% !important;
  z-index: unset !important;
}

.chatbot__support {
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  width: 100%;
  max-width: 100vw;
  height: 100%;
  overflow: hidden;
  position: relative;
  min-height: 0;
  max-height: 100%;
}

/* Header Styles — deep navy design */
.chatbot-header {
  background: var(--color-header-bg, #1e1b4b);
  display: flex;
  border-radius: var(--h-border-radius-lg) var(--h-border-radius-lg) 0 0;
  height: 64px;
  justify-content: space-between;
  padding: 10px 14px;
  z-index: 1;
  align-items: center;
  pointer-events: auto;
  border: 0;
  box-sizing: border-box;
  margin: 0;
}

.chatbot-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chatbot-header__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.chatbot-header__avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chatbot-header__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 50%;
}

/* Shown from the moment a real photo starts loading (branding.js) until it
   finishes — otherwise a slow-loading logo just leaves an empty circle. The
   <img> itself is faded out rather than removed so it pops in directly once
   loaded, no layout shift. */
.chatbot-header__avatar--loading img {
  opacity: 0;
}

.chatbot-header__avatar--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: chatbot-avatar-spin 0.7s linear infinite;
}

@keyframes chatbot-avatar-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Green dot moves inline into the status line (avatar dot hidden) */
.chatbot-header__online-dot {
  display: none;
}

/* Bot name + status */
.chatbot-header__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.chatbot-header__text {
  color: #ffffff;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

.chatbot-header__status {
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.chatbot-header__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

.chatbot-header__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 4px);
}

.chatbot-header .h-icon-button--text-neutral {
  color: rgba(255, 255, 255, 0.8);
}

.chatbot-header .h-icon-button--text-neutral:hover:not(:disabled) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

/* Legacy header class for backward compatibility */
.chatbot__header {
  background: var(--h-bg-neutral-default, var(--color-background));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-xl);
  height: var(--header-height);
  color: var(--h-fg-neutral-default, var(--color-text-primary));
  transition: all var(--transition-base);
  border-bottom: 1px solid var(--h-stroke-default, var(--color-border));
  flex-shrink: 0;
}

.chatbot__header-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex: 1;
}

.chatbot__header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.chatbot__messages {
  flex: 1 1 auto;
  padding: var(--spacing-lg, 16px);
  padding-top: var(--spacing-lg, 16px);
  padding-bottom: var(--spacing-md, 12px);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex-shrink: 1;
}

.chatbot__messages::-webkit-scrollbar {
  width: var(--spacing-xs);
}

.chatbot__messages::-webkit-scrollbar-track {
  background: transparent;
}

.chatbot__messages::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 2px;
}

.chatbot__footer {
  padding: 6px;
  border-top: none;
  flex-shrink: 0;
  background: var(--h-bg-neutral-default, var(--color-background));
  position: relative;
  z-index: var(--z-header, 100);
  display: flex;
  flex-direction: column;
  min-height: fit-content;
  visibility: visible;
  opacity: 1;
  overflow: visible;
}

.chatbot__quick-actions {
  display: flex;
  justify-content: stretch;
  gap: 8px;
  margin-bottom: 6px;
  padding: 0 2px;
}

.chatbot__input-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.chatbot__footer-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.chatbot-wrapper__footer-hint {
  font-size: var(--font-size-xs);
  color: var(--h-fg-neutral-secondary, var(--color-text-secondary));
  font-family: var(--font-family);
}

.chatbot__footer-powered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.chatbot__footer-powered-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

.chatbot__footer-powered-link:hover {
  opacity: 0.8;
}

.chatbot__footer-logo {
  display: inline-block;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .container {
    height: 100vh;
    height: 100dvh;
    max-width: 100vw;
    overflow: hidden;
    overscroll-behavior: contain;
  }

  .chatbot {
    width: 100%;
    max-width: 100vw;
    height: 100%;
  }

  .chatbot__support {
    width: 100%;
    max-width: 100vw;
    height: 100%;
    overscroll-behavior: contain;
  }

  .chatbot__header {
    height: var(--header-height-mobile);
    padding: 0 var(--spacing-lg);
  }

  .chatbot__messages {
    padding: var(--spacing-lg);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    min-height: 1px;
  }

  .chatbot__footer {
    padding: 6px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
}

/* Short viewports: reclaim vertical space so the start screen fits */
@media (max-height: 640px) {
  .chatbot__messages {
    padding-top: 10px;
    padding-bottom: 8px;
  }
}

@media (max-width: 480px) {
  .chatbot__header {
    height: var(--header-height-mobile-small);
    padding: 0 var(--spacing-md);
  }

  .chatbot__messages {
    padding: var(--spacing-md);
  }

  .chatbot__footer {
    padding: 6px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
}