:root {
  --oto-adaptive-panel-gap: 12px;
  --oto-adaptive-panel-width: clamp(420px, 36vw, 600px);
  --oto-adaptive-panel-ease: cubic-bezier(.22, .78, .2, 1);
}

#globalSearchDrawer.oto-adaptive-panel,
.internal-chat-drawer.oto-adaptive-panel {
  position: fixed !important;
  right: var(--oto-adaptive-panel-gap) !important;
  width: min(var(--oto-adaptive-panel-width), calc(100vw - (var(--oto-adaptive-panel-gap) * 2))) !important;
  min-height: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px solid rgba(111, 161, 189, .42) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 70px rgba(5, 29, 51, .24), 0 5px 18px rgba(5, 29, 51, .13) !important;
  will-change: top, bottom, transform, opacity;
  transition:
    top .3s var(--oto-adaptive-panel-ease),
    bottom .3s var(--oto-adaptive-panel-ease),
    transform .3s var(--oto-adaptive-panel-ease),
    opacity .2s ease,
    box-shadow .2s ease !important;
}

#globalSearchDrawer.oto-adaptive-panel.open,
.internal-chat-drawer.oto-adaptive-panel.open {
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#globalSearchDrawer.oto-adaptive-panel:not(.open),
.internal-chat-drawer.oto-adaptive-panel:not(.open) {
  transform: translateX(calc(100% + (var(--oto-adaptive-panel-gap) * 2))) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.oto-panel-search-open:not(.oto-panel-dual-open) #globalSearchDrawer.open,
body.oto-panel-chat-open:not(.oto-panel-dual-open) .internal-chat-drawer.open {
  top: var(--oto-adaptive-panel-gap) !important;
  bottom: var(--oto-adaptive-panel-gap) !important;
  height: auto !important;
  max-height: calc(100dvh - (var(--oto-adaptive-panel-gap) * 2)) !important;
}

body.oto-panel-dual-open #globalSearchDrawer.open {
  top: var(--oto-adaptive-panel-gap) !important;
  bottom: calc(50% + (var(--oto-adaptive-panel-gap) / 2)) !important;
  height: auto !important;
  max-height: none !important;
}

body.oto-panel-dual-open .internal-chat-drawer.open {
  top: calc(50% + (var(--oto-adaptive-panel-gap) / 2)) !important;
  bottom: var(--oto-adaptive-panel-gap) !important;
  height: auto !important;
  max-height: none !important;
}

body.oto-panel-dual-open.oto-panel-focus-search #globalSearchDrawer.open,
body.oto-panel-dual-open.oto-panel-focus-chat .internal-chat-drawer.open {
  top: var(--oto-adaptive-panel-gap) !important;
  bottom: var(--oto-adaptive-panel-gap) !important;
  z-index: 1200 !important;
}

body.oto-panel-dual-open.oto-panel-focus-search .internal-chat-drawer.open,
body.oto-panel-dual-open.oto-panel-focus-chat #globalSearchDrawer.open {
  transform: translateX(calc(100% + (var(--oto-adaptive-panel-gap) * 2))) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#globalSearchDrawer.oto-adaptive-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

#globalSearchDrawer.oto-adaptive-panel .global-search-body {
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
}

.internal-chat-drawer.oto-adaptive-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.internal-chat-drawer.oto-adaptive-panel .internal-chat-users,
.internal-chat-drawer.oto-adaptive-panel .internal-chat-conversation {
  min-height: 0 !important;
  height: auto !important;
}

#globalSearchExpand[hidden],
[data-chat-expand][hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  :root {
    --oto-adaptive-panel-gap: 0px;
  }

  #globalSearchDrawer.oto-adaptive-panel,
  .internal-chat-drawer.oto-adaptive-panel {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #globalSearchDrawer.oto-adaptive-panel,
  .internal-chat-drawer.oto-adaptive-panel {
    transition: none !important;
  }
}