/* The menu and active chat use the same horizontal brand. */
@media (max-width: 1000px) {
  body.chat-active .search-home > .chat-meta {
    position: fixed;
    top: 24px;
    right: 84px;
    height: 48px;
    z-index: 45;
  }
  body.chat-active .search-home > .chat-meta #resetChat {
    min-height: 48px;
    padding: 0 8px;
  }
}
@media (max-width: 600px) {
  body.chat-active .search-home > .chat-meta #resetChat {
    font-size: 0;
    width: 44px;
    gap: 0;
    justify-content: center;
  }
  body.chat-active .search-home > .chat-meta #resetChat svg {
    width: 18px;
    height: 18px;
  }
}
.panel-brand > span,
body.chat-active .brand .chat-brand-mark > span {
  opacity: var(--brand-name-opacity, 1);
  translate: calc((1 - var(--brand-name-opacity, 1)) * -6px) 0;
  transition:
    opacity 180ms ease-out,
    translate 180ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .panel-brand > span,
  body.chat-active .brand .chat-brand-mark > span {
    transition: none;
    translate: none;
  }
}
.chat-brand-mark {
  display: none;
}
body.chat-active .brand .brand-logo {
  display: none;
}
body.chat-active .brand {
  width: auto;
  min-height: 46px;
  margin: 0 0 24px;
  text-align: left;
}
body.chat-active .chat-brand-mark,
.brand-transition {
  display: flex;
  align-items: center;
  gap: 17px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: #edf2f7;
  letter-spacing: normal;
  white-space: nowrap;
}
body.chat-active .chat-brand-mark > span {
  color: inherit;
  font-weight: inherit;
}
body.chat-active .chat-brand-mark {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 45;
}
.site-panel .panel-brand {
  position: fixed;
  top: 24px;
  left: 24px;
}
.chat-brand-mark img,
.brand-transition img {
  width: 46px;
  height: 46px;
  filter: brightness(0) invert(1);
}
.brand-transition {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  margin: 0;
}
body.brand-in-transit .panel-brand,
body.brand-in-transit .chat-brand-mark {
  visibility: hidden;
}
@media (max-width: 600px) {
  body.chat-active .brand {
    min-height: 39px;
  }
  body.chat-active .chat-brand-mark,
  .brand-transition {
    font-size: 17px;
    gap: 14px;
  }
  .chat-brand-mark img,
  .brand-transition img {
    width: 39px;
    height: 39px;
  }
}

/* Brands stay at the viewport edge and fade independently of the page slide. */
.menu-brand-fixed.panel-brand {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 45;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 240ms ease-out,
    visibility 0s linear 240ms;
}
body.navigation-open .menu-brand-fixed {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 380ms ease-out 420ms,
    visibility 0s linear 420ms;
}
body.chat-active .chat-brand-mark > span {
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: inherit;
  opacity: var(--brand-name-opacity, 1);
}
body.chat-active .chat-brand-mark {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 380ms ease-out 420ms,
    visibility 0s linear;
}
body.chat-active.navigation-open .chat-brand-mark {
  opacity: 1;
  visibility: visible;
  transition: none;
}
body.chat-active .chat-brand-mark {
  transition: none;
}
body.chat-active.navigation-open .menu-brand-fixed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
@media (max-width: 600px) {
  body.chat-active .chat-brand-mark > span {
    font-size: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .menu-brand-fixed.panel-brand,
  body.navigation-open .menu-brand-fixed,
  body.chat-active .chat-brand-mark,
  body.chat-active.navigation-open .chat-brand-mark {
    transition: none;
  }
}

/* Isolate the wordmark from heading/span typography inherited from the welcome logo. */
body.chat-active .brand .chat-brand-mark > span,
.brand-transition > span {
  display: block;
  position: static;
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  word-spacing: normal;
  white-space: nowrap;
  transform: none;
  width: auto;
  flex: 0 0 auto;
}
body.chat-active .brand .chat-brand-mark img {
  flex: 0 0 46px;
}
@media (max-width: 600px) {
  body.chat-active .brand .chat-brand-mark > span,
  .brand-transition > span {
    font-size: 17px;
  }
  body.chat-active .brand .chat-brand-mark img {
    flex-basis: 39px;
  }
}

/* Decorative hover sequence preserves the logo link's hit area and accessible name. */
:is(.panel-brand, .chat-brand-mark) .brand-pacman {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
}
:is(.panel-brand, .chat-brand-mark).pacman-playing > img,
:is(.panel-brand, .chat-brand-mark).pacman-playing > span {
  pointer-events: none;
}
/* Let the animation own opacity; CSS fading otherwise causes a blink at handoff. */
:is(.panel-brand, .chat-brand-mark).pacman-playing > span {
  transition: none !important;
}