/* Shared floating actions: chat above the reading-progress button. */
:root {
  --action-edge: max(24px, env(safe-area-inset-right));
  --action-bottom: max(24px, env(safe-area-inset-bottom));
}
body #scrollup {
  right: var(--action-edge);
  bottom: var(--action-bottom);
  width: 48px;
  height: 48px;
  overflow: visible;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s,
    visibility 0.25s;
}
body #scrollup.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  box-shadow: 0 5px 18px rgba(22, 59, 91, 0.16);
}
body #scrollup .scroll-to-top {
  position: relative;
  display: grid;
  place-items: center;
  transform: none;
  background: rgba(248, 253, 255, 0.94);
  backdrop-filter: blur(12px);
  color: #173554;
  border: 1px solid rgba(255, 255, 255, 0.8);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
  opacity: 1;
}
body #scrollup .floating-arrow {
  width: 21px;
  height: 21px;
}
body #scrollup .floating-progress {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 2.4;
  transform: rotate(-90deg);
  pointer-events: none;
}
.floating-progress-track {
  stroke: #d7e4ec;
}
.floating-progress-value {
  stroke: url('#scroll-progress-gradient');
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--scroll-progress, 0));
}
body .pcbt-launcher {
  right: calc(var(--action-edge) - 2px);
  bottom: calc(var(--action-bottom) + 62px);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: linear-gradient(125deg, #2368e4, #189b9f 65%, #24b78a);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 6px 20px rgba(30, 105, 151, 0.24);
  opacity: 1;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
body .pcbt-launcher svg {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0;
}
body .pcbt-launcher[aria-expanded='true'] {
  opacity: 1;
}
body #scroll-top::after,
body .pcbt-launcher::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  padding: 8px 12px;
  border-radius: 9px;
  background: #142e47;
  color: #fff;
  font: 500 12px/1.4 var(--primary-font, sans-serif);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(5px, -50%);
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.2s,
    visibility 0.2s;
  box-shadow: 0 4px 14px rgba(17, 40, 60, 0.15);
}
body #scroll-top:focus-visible::after,
body .pcbt-launcher:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}
body #scroll-top:focus-visible,
body .pcbt-launcher:focus-visible {
  outline: 2px solid #3266c5;
  outline-offset: 4px;
}
body .pcbt-panel.open,
body .pcbt-panel.closing {
  right: var(--action-edge);
  bottom: calc(var(--action-bottom) + 128px);
  max-height: calc(100dvh - var(--action-bottom) - 144px);
  transform-origin: bottom right;
}
body .pcbt-panel.closing {
  display: flex;
  animation: actionChatOut 0.18s ease both;
  pointer-events: none;
}
@keyframes actionChatOut {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
@media (hover: hover) {
  body #scrollup .scroll-to-top:hover,
  body .pcbt-launcher:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(30, 105, 151, 0.25);
    opacity: 1;
  }
  body #scroll-top:hover::after,
  body .pcbt-launcher:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
  }
}
body #scrollup .scroll-to-top:active,
body .pcbt-launcher:active {
  transform: scale(0.95);
}
@media (max-width: 575px) {
  :root {
    --action-edge: max(16px, env(safe-area-inset-right));
    --action-bottom: max(16px, env(safe-area-inset-bottom));
  }
  body .pcbt-panel.open,
  body .pcbt-panel.closing {
    right: 12px;
    left: 12px;
    width: auto;
    height: min(570px, calc(100dvh - 152px));
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  body .pcbt-panel.open,
  body .pcbt-panel.closing {
    top: 8px;
    bottom: 8px;
    height: auto;
    max-height: none;
    right: calc(var(--action-edge) + 68px);
    width: min(400px, calc(100vw - 104px));
    left: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  body #scrollup,
  body #scrollup .scroll-to-top,
  body .pcbt-launcher,
  body #scroll-top::after,
  body .pcbt-launcher::after {
    transition: none;
  }
  body .pcbt-panel.closing {
    animation: none;
  }
}