/*
  THE "LATEST" BUTTON, and the scrolling rule it belongs to.

  Shared and byte-identical with every site on the network, like tabbar.css and
  install.css beside it, and defensive for the same reason: this is dropped into
  seven sites with seven unrelated stylesheets. The host element is
  <jdl-latest>, a tag name no site has a rule for, and every property a host
  might set on a floating button is declared here rather than left to chance.

  It is placed in the scroll container's PARENT and positioned against it, so
  it floats over the bottom of the conversation without taking part in the
  layout and without being scrolled away by the thing it controls.
*/

jdl-latest { display: none; }

jdl-latest.jdl-latest {
  display: block;
  position: absolute;
  top: auto;
  right: 0;
  left: 0;
  bottom: 14px;
  z-index: 5;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: center;
  pointer-events: none;        /* the strip is a positioning device, not a target */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}

jdl-latest.jdl-latest.is-on {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  jdl-latest.jdl-latest { transition: none; }
}

.jdl-latest-btn {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  margin: 0;
  /* 44px is the platform's tap-target floor. The pill looks smaller than that
     because the padding carries it, so the height is stated rather than left
     to the line box. */
  min-height: 44px;
  padding: 0 16px 0 14px;
  border: 1px solid #E4EAF4;
  border-radius: 999px;
  background: #fff;
  color: #0B1220;
  box-shadow: 0 6px 20px -6px rgba(11, 18, 32, .3);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.jdl-latest-btn:active { background: #F5F8FE; }

.jdl-latest-btn svg {
  width: 15px;
  height: 15px;
  display: block;
  flex: none;
  color: var(--jdl-latest-accent, #2C55F5);
}