/* Overlay stays outside the keyed transcript, so live updates preserve it. */
.chat-view { position:relative; }
.chat-scroll-overlay { position:absolute; z-index:4; pointer-events:none; overflow:hidden; }
.chat-scroll-overlay[hidden], .chat-scroll-latest[hidden] { display:none!important; }
.chat-scroll-date { position:absolute; inset-block-start:9px; left:50%; transform:translateX(-50%); max-width:calc(100% - 28px); padding:6px 13px; border-radius:20px; background:var(--surface, #17212b); color:var(--text, #f4f7fa); border:1px solid var(--line, #365066); box-shadow:0 3px 12px #0003; font-size:11px; font-weight:650; line-height:1.5; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s ease; }
.chat-scroll-date.visible { opacity:1; visibility:visible; }
.chat-scroll-latest { position:absolute; inset-inline-end:18px; inset-block-end:14px; width:42px; height:42px; display:grid; place-items:center; padding:0; border:1px solid var(--line, #365066); border-radius:50%; background:var(--surface, #17212b); color:var(--accent, #58b8ff); box-shadow:0 3px 14px #0004; font:500 25px/1 system-ui,sans-serif; cursor:pointer; pointer-events:auto; }
.chat-scroll-latest:hover { filter:brightness(1.15); }
.chat-scroll-latest:focus-visible { outline:3px solid var(--accent, #58b8ff); outline-offset:2px; }
#chat-view.secret-mode > .chat-scroll-overlay { display:block!important; }
#chat-view.secret-mode > .chat-scroll-overlay[hidden] { display:none!important; }
@media (prefers-reduced-motion:reduce) { .chat-scroll-date { transition:none; } }