/* Geometry and motion corrections. Glass rendering stays owned by bxw-liquid-glass.css. */

@media (max-width: 767px) {
  #bxw-root {
    --bxw-panel-gap: 8px;
    width: min(calc(100vw - 32px), 560px) !important;
    max-width: calc(100vw - 32px) !important;
  }

  #bxw-root .bxw-rail,
  #bxw-root .bxw-pills,
  #bxw-root .bxw-search-slot {
    box-sizing: border-box;
    transition-property: opacity, transform !important;
    transition-duration: 180ms, 240ms !important;
    transition-timing-function: ease, cubic-bezier(.22, 1, .36, 1) !important;
  }

  #bxw-root {
    transition-property: opacity, transform !important;
    transition-duration: 180ms, 240ms !important;
    transition-timing-function: ease, cubic-bezier(.22, 1, .36, 1) !important;
  }

  #bxw-root .bxw-search-slot > .bxw-location-button {
    bottom: calc(
      100% + var(--bxw-panel-gap) + var(--bxw-segment-panel-height) + var(--bxw-panel-gap)
    ) !important;
  }

  #bxw-root :is(.bxw-conversation-toggle, .bxw-meet-toggle) {
    left: 50% !important;
    width: 100% !important;
    min-height: var(--bxw-segment-panel-height) !important;
    transform: translate3d(-50%, 10px, 0) !important;
    transform-origin: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition-property: opacity, transform, visibility !important;
    transition-duration: 180ms, 260ms, 0ms !important;
    transition-timing-function:
      cubic-bezier(.32, 0, .67, 0),
      cubic-bezier(.22, 1, .36, 1),
      linear !important;
    transition-delay: 0ms, 0ms, 260ms !important;
    backface-visibility: hidden;
  }

  #bxw-root.bxw-conversation-toggle-visible:not(.bxw-conversation-toggle-scroll-hidden)
    .bxw-conversation-toggle,
  #bxw-root.bxw-meet-toggle-visible:not(.bxw-meet-toggle-scroll-hidden)
    .bxw-meet-toggle {
    transform: translate3d(-50%, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition-delay: 0ms !important;
  }

  #bxw-root.bxw-conversation-toggle-visible.bxw-conversation-toggle-scroll-hidden
    .bxw-conversation-toggle,
  #bxw-root.bxw-meet-toggle-visible.bxw-meet-toggle-scroll-hidden
    .bxw-meet-toggle,
  #bxw-root:has(.bxw-rail.bxw-search-open) :is(.bxw-conversation-toggle, .bxw-meet-toggle) {
    transform: translate3d(-50%, 10px, 0) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition-delay: 0ms, 0ms, 260ms !important;
  }

  #bxw-root :is(
    #bxw-conversation-switch,
    #bxw-meet-toggle,
    #bxw-second-mode-toggle,
    #bxw-search-mode-toggle
  ).bxw-panel-toggle {
    width: 100% !important;
  }

  #bxw-root :is(
    #bxw-conversation-switch,
    #bxw-second-mode-toggle,
    #bxw-search-mode-toggle
  ) .toggle-option,
  #bxw-root #bxw-meet-toggle .bxw-meet-toggle-btn {
    padding-inline: var(--bxw-segment-option-pad) !important;
  }
}

@media (max-width: 340px) {
  #bxw-root {
    --bxw-segment-label-size: 11px;
    --bxw-segment-icon-size: 16px;
    --bxw-segment-option-gap: 4px;
    --bxw-segment-option-pad: 5px;
  }

  #bxw-root :is(
    #bxw-conversation-switch,
    #bxw-second-mode-toggle,
    #bxw-search-mode-toggle
  ) .bxw-conversation-toggle-icon,
  #bxw-root #bxw-meet-toggle .bxw-meet-toggle-icon {
    display: block !important;
  }
}

/* Community marker collision state. */
#community-bubble {
  width: var(--bxw-community-expanded-width, 40px);
  min-width: var(--bxw-community-expanded-width, 40px);
  height: 20px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 999px;
  transition-property: opacity, transform, width, min-width, border-color, background-color, box-shadow;
  transition-duration: 180ms, 240ms, 280ms, 280ms, 180ms, 180ms, 180ms;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

#community-bubble-icon,
#community-bubble-online {
  transition-property: opacity, transform, filter !important;
  transition-duration: 160ms, 240ms, 160ms !important;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1) !important;
}

#community-bubble-icon.touch-logo,
#community-bubble-icon.touch-logo + #community-bubble-online {
  filter: brightness(0) invert(1) !important;
}

#community-bubble.is-logo-colliding {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

#community-bubble.is-logo-colliding #community-bubble-icon,
#community-bubble.is-logo-colliding #community-bubble-online {
  opacity: 0 !important;
  transform: scale(.72) !important;
}

#community-bubble-online {
  position: relative;
  display: inline-grid;
  align-items: center;
  justify-items: center;
  min-width: 16px;
  height: 16px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

.bxw-community-metric-current,
.bxw-community-metric-previous {
  grid-area: 1 / 1;
  display: block;
  min-width: 100%;
  text-align: center;
  line-height: 16px;
}

@media (prefers-reduced-motion: reduce) {
  #bxw-root :is(.bxw-conversation-toggle, .bxw-meet-toggle),
  #community-bubble,
  #community-bubble-icon,
  #community-bubble-online {
    transition-duration: 100ms !important;
  }
}