/*
 * ============================================================
 * SCROLL TAB + MESSAGE NAVIGATOR
 * ============================================================
 */

.chat-scroll-tab {
position:absolute;
z-index:50;
top:0;
right:4px;
width:3px;
height:42px;
border-radius:999px;
opacity:0;
pointer-events:none;
background:var(--scroll-color,var(--accent));
box-shadow:0 0 6px var(--scroll-color,var(--accent)),0 0 14px color-mix(in srgb,var(--scroll-color,var(--accent)) 42%,transparent);
transition:opacity 500ms ease,background 260ms ease,box-shadow 260ms ease;
}
.chat-scroll-tab.is-available {
opacity:0.24;
}
.chat-scroll-tab.is-scrolling {
opacity:0.94;
}
.chat-scroll-tab.is-dragging { opacity:1; width:4px; box-shadow:0 0 12px var(--scroll-color,var(--accent)),0 0 26px var(--scroll-color,var(--accent)); }
.message-navigator {
position:absolute;
z-index:80;
bottom:12px;
right:15px;
display:grid;
place-items:center;
width:44px;
height:44px;
margin:0;
padding:0;
border:1.5px solid color-mix(in srgb,var(--scroll-color,var(--accent)) 58%,#ffffff20);
border-radius:15px;
opacity:0;
pointer-events:none;
transform:translate3d(9px,0,0) scale(0.88);
background:radial-gradient(circle at 35% 25%,color-mix(in srgb,var(--scroll-color,var(--accent)) 19%,#ffffff10),#08121ff2 72%);
color:color-mix(in srgb,var(--scroll-color,var(--accent)) 80%,white);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
box-shadow:0 12px 34px #00000055,0 0 19px color-mix(in srgb,var(--scroll-color,var(--accent)) 19%,transparent),inset 0 1px 0 #ffffff1d;
cursor:pointer;
touch-action:none;
-webkit-tap-highlight-color:transparent;
transition:opacity 280ms ease,transform 300ms cubic-bezier(0.16,1,0.3,1),color 260ms ease,border-color 260ms ease,box-shadow 260ms ease;
}
.message-navigator.is-visible {
opacity:1;
pointer-events:auto;
transform:translate3d(0,0,0) scale(1);
}
.message-navigator:hover,.message-navigator:focus-visible,.message-navigator.is-dragging {
border-color:color-mix(in srgb,var(--scroll-color,var(--accent)) 88%,white);
box-shadow:0 14px 38px #00000060,0 0 28px color-mix(in srgb,var(--scroll-color,var(--accent)) 30%,transparent),inset 0 1px 0 #ffffff27;
}
.message-navigator svg {
width:21px;
height:21px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
transition:transform 320ms cubic-bezier(0.16,1,0.3,1);
}
.message-navigator[ data-direction="down" ] svg {
transform:rotate(180deg);
}
.message-navigator[ data-direction="up" ] svg {
transform:rotate(0deg);
}
.message-navigator.is-dragging { transform:translate3d(0,var(--drag-y,0px),0) scale(1.1); transition:none; border-color:var(--scroll-color,var(--accent)); box-shadow:0 16px 42px #0008,0 0 34px color-mix(in srgb,var(--scroll-color,var(--accent)) 58%,transparent),inset 0 1px 0 #ffffff55; cursor:grabbing; }
.message-navigator.is-armed { transform:translate3d(0,var(--drag-y,0px),0) scale(1.16); box-shadow:0 16px 42px #0008,0 0 44px color-mix(in srgb,var(--scroll-color,var(--accent)) 75%,transparent),inset 0 1px 0 #ffffff77; }
.message-navigator:active:not(.is-dragging) {
transform:translate3d(0,0,0) scale(0.91);
}