:root {
  --toolbar-chatbot-width: 21rem;
}

/* Klaro applies the same display style as the element it wraps, 
   which can stop the container from scrolling properly. 
   To fix this, we override it with 'contents' to ignore the wrapper.
   Only applies when consent has been given (i.e., not display: none). */
.ai-deepchat.toolbar > [data-modified-by-klaro]:not([style*="display: none"]) {
  display: contents !important;
}

/* Chatbot positioning */
.block-ai-deepchat-block {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  opacity: 0;
  transition: width var(--admin-toolbar-transition), var(--admin-toolbar-transition);
  z-index: calc(var(--admin-toolbar-z-index-top-bar, 505) + 1);
  pointer-events: none;
}
body.ai-chatbot-opened .block-ai-deepchat-block {
  opacity: 1;
  width: var(--toolbar-chatbot-width);
  pointer-events: all;
  z-index: calc(var(--admin-toolbar-z-index-admin-toolbar-control-bar, 505) + 1);
}

.block-ai-deepchat-block deep-chat {
  margin: 16px 0;
  border: 0 !important;
  box-shadow: none !important;
}

/* Chatbot styles */
.chat-container {
  padding: 0 16px;
  background-color: white;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 10px rgb(0, 0, 0, 0.2);
}

/* Header */
.sidebar-header {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.sidebar-header--icon {
  padding-inline: 10px;
  padding-block: calc(var(--gin-spacing-xs) + 1px);
  margin-block-end: var(--gin-spacing-xxxs);
  height: 38px;
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 6px;
  display: flex;
}
.sidebar-header--icon::before {
  mask-size: 18px;
  background-color: black;
  mask-repeat: no-repeat;
  mask-position: center;
  content: ' ';
  width: 38px;
  height: 38px;
}
.sidebar-header--icon.close::before {
  mask-image: url('../assets/close.svg');
}
.sidebar-header--icon.chat-dropdown-button::before {
  mask-image: url('../assets/three-dots.svg');
}
.sidebar-header--icon.expand::before {
  mask-image: url('../assets/expand.svg');
}
.sidebar-header--icon:hover {
  color: var(--gin-color-primary);
  background-color: var(--gin-bg-item-hover);
}

.sidebar-header--title {
  margin-right: auto;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-header--title::before {
  background-image: url(../assets/ai-star-avatar.svg);
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: center;
  content: ' ';
  width: 18px;
  height: 18px;
}

.chat-dropdown {
  position: relative;
  display: inline-block;
}

.chat-dropdown-content {
  position: absolute;
  padding: 8px;
  z-index: 99;
  top: 3rem;
  right: -50%;
  visibility: hidden;
  width: 14rem;
  transition: all 0.3s ease;
  transform: scaleY(0);
  transform-origin: top right;
  opacity: 0;
  border-radius: 0.375rem;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.chat-dropdown-link {
  display: block;
  padding: 8px;
  color: #4a5568;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: 4px;
  border: none;
  background: white;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.chat-dropdown-link:hover {
  color: #111827;
  background: #f1f1f1;
}

.chat-dropdown.active .chat-dropdown-content {
  visibility: visible;
  transform: scaleY(1);
  opacity: 1;
}

@media (min-width: 1024px) { 
  /* Page positioning */
  body.ai-chatbot-opened  {
    --drupal-displace-offset-left: 25rem;
  }

  body.ai-chatbot-opened .gin--navigation-top-bar {
    --admin-toolbar-sidebar-width: 24rem;
    z-index: 1;
  }

  body.ai-chatbot-opened .admin-toolbar {
    margin-left: var(--toolbar-chatbot-width);
    transition: margin var(--admin-toolbar-transition);
  }

  body.ai-chatbot-opened [data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper] {
    transform: translateX(calc(var(--admin-toolbar-sidebar-width) + var(--toolbar-chatbot-width)));
  }

  body:not(.ai-chatbot-opened) .admin-toolbar ~ .dialog-off-canvas-main-canvas {
    --drupal-displace-offset-left: var(--admin-toolbar-sidebar-width);
  }

  .admin-toolbar__content,
  .admin-toolbar__footer {
    border-inline-start: 1px solid var(--admin-toolbar-color-gray-100);
  }

  .gin--core-navigation .chat-container {
    box-shadow: none;
  }
}