/* Message scroller · DS nv-o-message-scroller (preview rail, typing, entering turns). Behaviour: js/nv-message-scroller.js */
.nv-o-message-scroller-host {
  --nv-msg-text: var(--dash-text, #f5f5f6);
  --nv-msg-muted: var(--dash-muted, #8f9098);
  --nv-msg-ease: cubic-bezier(.16, 1, .3, 1);
  --nv-msg-spring: cubic-bezier(.34, 1.25, .64, 1);
  position: relative;
}

.nv-m-message-entering { animation: nv-message-pop 360ms var(--nv-msg-ease) both; transform-origin: 50% 100%; }
@keyframes nv-message-pop {
  from { opacity: 0; filter: blur(4px); transform: translateY(8px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.nv-a-message-typing { display: inline-flex; height: 24px; align-items: center; gap: 4px; color: var(--nv-msg-muted); }
.nv-a-message-typing span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: nv-message-typing 550ms var(--nv-msg-ease) infinite; }
.nv-a-message-typing span:nth-child(2) { animation-delay: .1s; }
.nv-a-message-typing span:nth-child(3) { animation-delay: .2s; }
@keyframes nv-message-typing { 0%, 100% { opacity: .45; transform: none; } 50% { opacity: 1; transform: translateY(-4px); } }

.nv-m-preview-rail {
  position: absolute; z-index: 2; inset-block: 12px; right: 4px; display: grid; width: 28px;
  align-content: center; padding-block: 4px; box-sizing: border-box;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 150ms ease, visibility 0s 150ms;
}
.nv-o-message-scroller-host.is-overflowing .nv-m-preview-rail { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 150ms ease; }
.nv-m-preview-rail__item {
  display: flex; width: 28px; height: 14px; align-items: center; justify-content: flex-end;
  padding: 0; border: 0; border-radius: 4px; background: none; color: var(--nv-msg-muted); cursor: pointer;
}
.nv-m-preview-rail__item:focus-visible { outline: 2px solid var(--nv-msg-text); outline-offset: 1px; }
.nv-m-preview-rail__item.is-highlighted { color: var(--nv-msg-text); }
.nv-m-preview-rail__tick {
  display: block; width: 16px; height: 1px; background: currentColor; transform-origin: right center;
  transform: scaleX(var(--nv-tick-scale, .25)); transition: transform 320ms var(--nv-msg-spring), color 150ms ease;
}
.nv-m-preview-rail__card {
  position: absolute; z-index: 3; top: 0; right: 36px; width: min(256px, calc(100% - 48px)); height: 80px;
  box-sizing: border-box; padding: 12px; overflow: hidden; border-radius: 16px;
  background: var(--dash-popover-bg, #121212); box-shadow: var(--dash-popover-shadow, 0 16px 48px rgb(0 0 0 / 45%)); color: var(--nv-msg-text);
  opacity: 0; pointer-events: none; transform: translateY(var(--nv-card-y, 0px));
  transition: transform 320ms var(--nv-msg-spring), opacity 120ms ease;
}
.nv-m-preview-rail__card.is-visible { opacity: 1; }
.nv-m-preview-rail__card-body.is-swapping { animation: nv-preview-swap 180ms var(--nv-msg-ease) both; }
@keyframes nv-preview-swap { from { opacity: 0; transform: translateY(4px); filter: blur(6px); } }
.nv-m-preview-rail__title { display: -webkit-box; margin: 0; overflow: hidden; font: 500 12px/16px Inter, sans-serif; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.nv-m-preview-rail__description { display: -webkit-box; margin: 4px 0 0; overflow: hidden; color: var(--nv-msg-muted); font: 400 12px/16px Inter, sans-serif; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

@media (hover: none) { .nv-m-preview-rail__card { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .nv-m-message-entering, .nv-m-preview-rail__card-body.is-swapping, .nv-a-message-typing span { animation: none; }
  .nv-m-preview-rail__tick, .nv-m-preview-rail__card { transition: none; }
}