:root {
  --toolbar-chatbot-width: 100vw;
  --toolbar-chatbot-expand-amount: 0rem;
}

/* 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 250ms ease-out, 250ms ease-out;
  z-index: calc(var(--admin-toolbar-z-index-top-bar, 505) + 1);
  pointer-events: none;
}

body.ai-chatbot-opened {
  /* Prevent the Site Header of Olivero (and the toolbar) overlapping the chat – 
   * when the chat is in the Header region.
   */
  & .toolbar-oriented {
    & .toolbar-bar {
      z-index: 1;
    }
  }
  & .site-header__initial {
    z-index: unset;
  }

  /* Prevent the Site Header of Olivero (and the toolbar) overlapping the chat –
   * when the chat is in a region in the main section.
   */
  & .layout-main-wrapper {
    z-index: unset;
  }
  
  & .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: 0px 0 16px 0;
  border: 0 !important;
  box-shadow: none !important;
}

/* Chatbot styles */
.chat-container {
  padding: 0px 0px 0px 16px;
  background-color: white;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #E3E3E3;
}

/* Header */
.sidebar-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  height: 72px;
  margin: 0px 0px 0px -16px;
  padding: 20px 12px;
  border-bottom: 1px solid #D8DADE;
}

.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;
  border: 0px;
  cursor: pointer;
}
.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.chat-dropdown-button::before {
  mask-image: url('../assets/three-dots.svg');
}
.sidebar-header--icon.expand::before {
  mask-image: url('../assets/caret-right.svg');
  mask-size: 7px;
}
.sidebar-header--icon.close::before {
  mask-image: url('../assets/close.svg');
}
.sidebar-header--icon:hover {
  color: var(--gin-color-primary, #0550e6);
  background-color: var(--gin-bg-item-hover, #0550e61a);
}
.sidebar-header--icon.expand.active {
  color: var(--gin-color-primary, #0550e6);
  background-color: var(--gin-bg-item-hover, #0550e61a);
}

.sidebar-header--icon.expand {
  display: none;
}

.sidebar-header--title {
  margin-right: auto;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #4B4F58;
}
.sidebar-header--title::before {
  background-image: url(../assets/ai-icon-gradient.svg);
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: center;
  content: ' ';
  width: 24px;
  height: 24px;
}

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

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

.chat-dropdown-link {
  display: block;
  padding: 8px;
  color: #4a5568;
  font-size: 14px;
  line-height: 20px;
  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) {
  :root {
    --toolbar-chatbot-width: 21rem;
  }

  /* Expanded state */
  body.ai-chatbot-expanded {
    --toolbar-chatbot-expand-amount: 20rem;
  }

  body.ai-chatbot-expanded .sidebar-header--icon.expand::before {
    mask-image: url('../assets/caret-right.svg');
    mask-size: 7px;
    transform: rotate(180deg);
  }

  .sidebar-header--icon.expand {
    display: flex;
  }

  /* Page positioning */
  body.ai-chatbot-opened {
    --toolbar-chatbot-width: calc(21rem + var(--toolbar-chatbot-expand-amount));
    --drupal-displace-offset-left: calc(26rem + var(--toolbar-chatbot-expand-amount));
  }

  body.ai-chatbot-opened .gin--navigation-top-bar {
    --admin-toolbar-sidebar-width: calc(26rem + var(--toolbar-chatbot-expand-amount));
    z-index: 1;
  }

  body.ai-chatbot-opened .admin-toolbar__content {
    border-left: 0px;
  }

  :is(#ai-chatbot, body) {
    &.ai-chatbot-opened .admin-toolbar {
      /* !important used as it's necessary for different states of the toolbar */
      transform: translateX(var(--toolbar-chatbot-width)) !important;
    }

    &.ai-chatbot-opened .toolbar-popover:not(.toolbar-popover--expanded) [data-toolbar-popover-wrapper] {
      transform: translateX(0);
    }
  }

  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;
  }

  deep-chat::after {
    content: "";
    position: absolute;
    top: 0;
    right: 16px;
    left: 0;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
    height: 56px;
  }
}
