/* Shared by the app and its served screen studies. Keep UI glyph styles off the mark. */
svg.langoor-logo {
  display: block;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  overflow: visible;
  fill: none;
  stroke: none;
  stroke-width: 0;
}

img.langoor-logo { display: block; object-fit: contain; flex-shrink: 0; }
.brand .langoor-logo,
.app-shell .brand .langoor-logo { width: 40px; height: 40px; }
.loading .brand .langoor-logo { width: 56px; height: 56px; }
.loading-emblem .langoor-logo { width: 100px; height: 100px; }
.helper-title .langoor-logo { width: 30px; height: 30px; }
.app-shell .helper-title > span { background: none; border: 0; }
.assistant-label .langoor-logo { width: 18px; height: 18px; }

.langoor-logo .lg-eye-wink { opacity: 0; }

/* Logo and help controls share one expression; answer avatars stay still. */
:is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button) .lg-head {
  transform-box: view-box;
  transform-origin: 64px 72px;
  transform: translateY(0) rotate(0deg);
  transition: transform 210ms cubic-bezier(.22, .68, 0, 1);
}
:is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button) .lg-eye-open,
:is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button) .lg-eye-wink {
  transform-box: view-box;
  transform-origin: 80px 53px;
}
:is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button) .lg-eye-open {
  opacity: 1;
  transform: scaleY(1);
  transition: transform 160ms cubic-bezier(.22, .68, 0, 1), opacity 110ms ease-out;
}
:is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button) .lg-eye-wink {
  transform: scaleY(.72);
  transition: opacity 120ms ease-out, transform 170ms cubic-bezier(.22, .68, 0, 1);
}
:is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button) .lg-mouth {
  transform-box: view-box;
  transform-origin: 64px 91px;
  transform: scaleX(1);
  transition: transform 210ms cubic-bezier(.22, .68, 0, 1);
}

@media (hover: hover) and (pointer: fine) {
  :is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button):hover:not(:focus-visible) .lg-head { transform: translateY(-.5px) rotate(-3deg); }
  :is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button):hover .lg-eye-open { opacity: 0; transform: scaleY(.08); }
  :is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button):hover .lg-eye-wink { opacity: 1; transform: scaleY(1); }
  :is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button):hover:not(:focus-visible) .lg-mouth { transform: scaleX(1.08); }
}

/* Keyboard users receive the expression immediately, without a moving focus target. */
:is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button):focus-visible .lg-head,
:is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button):focus-visible .lg-mouth { transform: none; }
:is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button):focus-visible .lg-eye-open { opacity: 0; }
:is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button):focus-visible .lg-eye-wink { opacity: 1; transform: none; }
:is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button):focus-visible .lg-head,
:is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button):focus-visible .lg-mouth,
:is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button):focus-visible .lg-eye-open,
:is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button):focus-visible .lg-eye-wink { transition: none; }

@media (prefers-reduced-motion: reduce) {
  :is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button) .lg-head,
  :is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button):hover:not(:focus-visible) .lg-head,
  :is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button) .lg-mouth,
  :is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button):hover:not(:focus-visible) .lg-mouth { transform: none; transition: none; }
  :is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button) .lg-eye-open,
  :is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button) .lg-eye-wink,
  :is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button):hover .lg-eye-open,
  :is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button):hover .lg-eye-wink { transform: none; transition: opacity 70ms linear; }
  :is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button):focus-visible .lg-eye-open,
  :is(a.brand, .langoor-trigger, .helper-launch, .conversation-help > button):focus-visible .lg-eye-wink { transition: none; }
}

@media (max-width: 799px) {
  .topbar .brand .langoor-logo,
  .app-shell .brand .langoor-logo { width: 36px; height: 36px; }
}

/* The mascot is the visual signpost for asking questions, and the author of replies. */
.app-shell button.helper-launch { background: #faf8ef; border: 1px solid #d8ded2; }
.app-shell .helper-launch .langoor-logo { width: 36px; height: 36px; }
.app-shell .floating-helper-launch .langoor-logo { width: 44px; height: 44px; }
.app-shell .helper-title > span { width: 40px; height: 40px; }
.app-shell .helper-title .langoor-logo { width: 40px; height: 40px; }
.conversation-help > button .langoor-logo { width: 26px; height: 26px; }
.briefing-control-icon .langoor-logo { width: 34px; height: 34px; }
.langoor-response-label { display: flex; align-items: center; gap: 7px; color: #52624d; }
.langoor-response-label .langoor-logo { width: 27px; height: 27px; }
.response-label.langoor-response-label { font-size: 10px; letter-spacing: .6px; }
.sentence-reference > .langoor-response-label { margin-bottom: 10px; font-size: 11px; }
.followup-coach .langoor-response-label { font-size: 11px; }
.helper-history strong .langoor-logo { display: inline-block; width: 23px; height: 23px; vertical-align: middle; margin-right: 4px; }