/* ============================================================
   Emoji reactions in the anonymous chat
   Own stylesheet on purpose: the chat bubbles force
   `.chat-bubble.from-me * { color: #fff !important }`, so the chips
   live OUTSIDE the bubble in a per-message wrapper. Everything here
   is scoped to the new .chat-msg-row / .chat-reaction* classes and
   the #reactionSheet elements, so no existing chat rule changes.
   ============================================================ */

/* --- Per-message wrapper: bubble on top, chip strip underneath ---
   Takes over the 82% width and the left/right alignment the bubble
   used to own, so the layout is pixel-identical without reactions. */
.chat-msg-row {
    display: flex;
    flex-direction: column;
    max-width: 82%;
    min-width: 0;
}

.chat-msg-row.from-me {
    align-self: flex-end;
    align-items: flex-end;
}

.chat-msg-row.from-them {
    align-self: flex-start;
    align-items: flex-start;
}

/* The bubble keeps its own styling; its 82% is now relative to the row */
.chat-msg-row > .chat-bubble {
    max-width: 100%;
}

/* --- Chip strip --- */
.chat-reactions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    /* Wraps onto more lines rather than widening the row: six chips with
       3-digit counts are wider than a 320px screen. min-width: 0 keeps it
       shrinkable as a flex item of .chat-msg-row. */
    max-width: 100%;
    min-width: 0;
}

.chat-msg-row.from-me .chat-reactions {
    justify-content: flex-end;
}

/* The 1px border is the chip's only outline, so it carries the component
   boundary: #868F99 on #ffffff measures ~3.3:1 and clears the WCAG
   1.4.11 non-text floor (the usual rgba(0,0,0,0.1) hairline is ~1.25:1). */
.chat-reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid #868F99;
    border-radius: 14px;
    background: #ffffff;
    color: #2d3748;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.chat-reaction-chip:hover {
    background: #f8f9fa;
}

.chat-reaction-chip .chat-reaction-emoji {
    font-size: 14px;
    line-height: 1;
}

.chat-reaction-chip .chat-reaction-count {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* The current user's own reaction, in the chat's own purple accent
   (#7B1FA2, the from-me bubble / btn-anon colour).
   #4A148C on #F3E5F5 measures 9.87:1 and the #7B1FA2 border 6.84:1 -
   an orange variant only reached 3.46:1, below the 4.5:1 floor.
   The thicker border + inner ring are the NON-colour cue (WCAG 1.4.1):
   the pressed chip stays recognisable without seeing the hue. Padding
   drops by the extra border width so nothing reflows on toggle. */
.chat-reaction-chip[aria-pressed="true"] {
    background: #F3E5F5;
    border-color: #7B1FA2;
    border-width: 2px;
    padding: 3px 9px;
    box-shadow: inset 0 0 0 1px #ffffff, 0 1px 3px rgba(0, 0, 0, 0.12);
    color: #4A148C;
}

.chat-reaction-chip[aria-pressed="true"]:hover {
    background: #E1BEE7;
}

/* --- "Add reaction" affordance ---
   Two classes deep so it beats the chat page's `.glass-card * { color }`.
   It still DRAWS as a 32px circle and still occupies only 32px of row
   height (a 44px-tall button under every bubble pushed roughly a message
   per screen out of the 58vh chat scroller), but the two axes of the
   44x44 touch target are now built differently:

     - WIDTH is a real 44px box. A 44px-wide ::after centred on a 32px
       button hung 6px past the right edge of every right-aligned row,
       which is content the flex layout knows nothing about - it showed up
       as a 6px horizontal scrollbar on .chat-messages (whose
       `overflow-y: auto` makes overflow-x compute to `auto`). A real box
       is laid out, so `max-width: 100%` on the strip actually contains it.
     - HEIGHT is still ::after slop, because that axis is the one we do
       not want in the layout, and the chat scroller handles it anyway. */
.chat-reactions .chat-reaction-add {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 32px;
    flex: none;
    padding: 0;
    border: none;
    background: transparent;
    color: #4a5568;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* The visible 32px circle, drawn inside the 44px box. It carries the
   hover fill and the focus ring so both keep hugging the circle. */
.chat-reactions .chat-reaction-add::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: transparent;
    transition: background 0.15s ease;
}

/* The icon is in normal flow, so it would paint UNDER an absolutely
   positioned ::before - position it to lift it back on top. */
.chat-reactions .chat-reaction-add > i {
    position: relative;
    z-index: 1;
}

/* Invisible vertical hit slop: 44px tall, never wider than the button's
   own 44px box (left/right: 0 instead of a centred fixed width). */
.chat-reactions .chat-reaction-add::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 44px;
    transform: translateY(-50%);
}

.chat-reactions .chat-reaction-add:hover {
    color: #2d3748;
}

.chat-reactions .chat-reaction-add:hover::before {
    background: rgba(0, 0, 0, 0.06);
}

@media (prefers-reduced-motion: reduce) {
    .chat-reactions .chat-reaction-add::before {
        transition: none;
    }
}

/* Mouse/trackpad only: keep the strip quiet until the message is hovered
   (or the row holds focus). Opacity, not display, so the button stays in
   the tab order and in the accessibility tree at all times. */
@media (hover: hover) and (pointer: fine) {
    .chat-reactions .chat-reaction-add {
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    .chat-msg-row:hover .chat-reaction-add,
    .chat-msg-row:focus-within .chat-reaction-add,
    .chat-reactions .chat-reaction-add:focus,
    .chat-reactions .chat-reaction-add:focus-visible {
        opacity: 1;
    }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
    .chat-reactions .chat-reaction-add {
        transition: none;
    }
}

.chat-reaction-chip:focus-visible,
.chat-reaction-add:focus-visible,
.reaction-sheet-btn:focus-visible,
#reactionSheetClose:focus-visible {
    outline: 2px solid #1E88E5;
    outline-offset: 2px;
}

/* The add button's box is 44x32 but it reads as a 32px circle, so the
   ring goes on the circle (::before) - same 36px ring as before the box
   grew. Outline, not box-shadow, so forced-colours mode keeps it. */
.chat-reactions .chat-reaction-add:focus-visible {
    outline: none;
}

.chat-reactions .chat-reaction-add:focus-visible::before {
    outline: 2px solid #1E88E5;
    outline-offset: 2px;
}

/* ============================================================
   Picker: bottom sheet on phones, centred card on desktop.
   Hand-rolled (not a Bootstrap modal) so it can live in this file
   and sit above the 9999 notifications panel / toast layer.
   ============================================================ */

#reactionSheetOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#reactionSheetOverlay.is-open {
    opacity: 1;
    visibility: visible;
}

#reactionSheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 90vh;
    max-height: 90dvh; /* accounts for mobile browser chrome */
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    visibility: hidden;
}

#reactionSheet.is-open {
    transform: translateY(0);
    visibility: visible;
}

/* Decorative grab handle, matching the "Edytuj prezent" sheet */
#reactionSheet::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.18);
    pointer-events: none;
    z-index: 1;
}

.reaction-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 20px 12px;
    flex-shrink: 0;
}

.reaction-sheet-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #2d3748;
}

#reactionSheetClose {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: #2d3748;
    font-size: 20px;
    cursor: pointer;
}

#reactionSheetClose:hover {
    background: rgba(0, 0, 0, 0.1);
}

.reaction-sheet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0 20px 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

/* Same ~3.3:1 boundary as the chips - the #f8f9fa fill is a hair off the
   sheet's white, so the border is what defines the button */
.reaction-sheet-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    border: 1px solid #868F99;
    border-radius: 14px;
    background: #f8f9fa;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.reaction-sheet-btn:hover {
    background: #f1f3f5;
}

/* Thicker border + inner ring: the already-picked emoji is identifiable
   without relying on the purple fill (WCAG 1.4.1) */
.reaction-sheet-btn[aria-pressed="true"] {
    background: #F3E5F5;
    border-color: #7B1FA2;
    border-width: 2px;
    box-shadow: inset 0 0 0 1px #ffffff;
}

/* --- Desktop: the same element becomes a small centred card --- */
@media (min-width: 769px) {
    #reactionSheet {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        /* Fixed width, not auto: at the grid's intrinsic ~209px the title
           and the close button collided in the header */
        width: 320px;
        max-width: calc(100vw - 32px);
        border-radius: 20px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
        padding-bottom: 8px;
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0;
        transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    }

    #reactionSheet.is-open {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    #reactionSheet::before {
        display: none;
    }

    .reaction-sheet-header {
        padding: 16px 20px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #reactionSheetOverlay,
    #reactionSheet,
    #reactionSheet.is-open {
        transition: none;
    }

    #reactionSheet {
        transform: none;
    }

    #reactionSheet.is-open {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) and (min-width: 769px) {
    #reactionSheet,
    #reactionSheet.is-open {
        transform: translate(-50%, -50%);
    }
}

/* ============================================================
   Full emoji picker
   The "+" tile in the quick grid switches the SAME #reactionSheet
   dialog into this mode (#reactionSheet.is-all): back button, a row of
   category tabs and a scrollable emoji grid (emoji-picker.js). Plain text
   glyphs only (+, arrow, emoji) - no icon font - so it also works offline
   and with the CDN blocked. Palette as above: purple #7B1FA2, text
   #2d3748, focus #1E88E5.
   ============================================================ */

/* display:grid / flex on these beats the UA [hidden] rule, so restore it */
.reaction-sheet-grid[hidden],
#emojiPickerRoot[hidden],
#reactionSheetBack[hidden] {
    display: none;
}

/* The "+" tile is text, not an emoji, so it is drawn a little larger */
.reaction-sheet-more {
    font-size: 30px;
    line-height: 1;
    color: #2d3748;
}

/* Same 44x44 round button as #reactionSheetClose */
#reactionSheetBack {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: #2d3748;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

#reactionSheetBack:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Full mode header: back | title | close */
#reactionSheet.is-all .reaction-sheet-header h2 {
    flex: 1;
    min-width: 0;
    margin: 0 8px;
}

/* Full mode sizing. A fixed height (not content height) keeps the sheet from
   jumping when the category changes the number of rows; the grid scrolls. */
#reactionSheet.is-all {
    height: 78vh;
    height: min(78dvh, 560px);
}

#emojiPickerRoot {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 8px 12px 0;
}

/* Category tabs: the ONE intentional horizontal scroller (9 x 44px is wider
   than a 320px screen). Scrollbar hidden; the row is reachable by swipe,
   arrow keys and Home/End. */
.emoji-picker-tabs {
    position: relative;
    display: flex;
    flex: none;
    gap: 4px;
    padding: 0 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-bottom: 1px solid #e2e6ea;
    -webkit-overflow-scrolling: touch;
}

.emoji-picker-tabs::-webkit-scrollbar {
    display: none;
}

/* Selected tab = 3px purple underline (+ aria-selected): a non-colour-only
   cue as well, since it is a shape the unselected tabs do not have. */
.emoji-picker-tab {
    box-sizing: border-box;
    flex: none;
    min-width: 44px;
    height: 44px;
    padding: 0 8px;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.emoji-picker-tab:hover {
    background: #f1f3f5;
}

.emoji-picker-tab[aria-selected="true"] {
    border-bottom-color: #7B1FA2;
}

/* Outer horizontal scroll container: every category is one full-width page
   (card) and the grid snaps to whole pages. The horizontal scrollbar is
   deliberately VISIBLE along the bottom edge: drag it or swipe the cards
   to move between categories (the tab above follows). */
.emoji-picker-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
    /* The browser's own scrollbar is hidden: it is not reliable on phones.
       .emoji-picker-pager below is the scrollbar people see. */
    scrollbar-width: none;
}

.emoji-picker-grid::-webkit-scrollbar {
    display: none;
}

/* Dragging the pager thumb: snapping off so the cards follow smoothly */
.emoji-picker-grid.emoji-picker-grid--dragging {
    scroll-snap-type: none;
}

/* Page scrollbar under the cards: a 24px-tall touch target that draws a
   10px bar. The thumb is one card wide and is moved by emoji-picker.js. */
.emoji-picker-pager {
    position: relative;
    flex: none;
    height: 24px;
    margin: 4px 4px 0;
    touch-action: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.emoji-picker-pager::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 10px;
    transform: translateY(-50%);
    border-radius: 5px;
    background: #e9ecef;
    pointer-events: none;
}

.emoji-picker-pager-thumb {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    touch-action: none;
    cursor: grab;
    will-change: transform;
}

.emoji-picker-pager-thumb::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 10px;
    transform: translateY(-50%);
    border-radius: 5px;
    background: #7B1FA2;
}

.emoji-picker-grid--dragging ~ .emoji-picker-pager .emoji-picker-pager-thumb {
    cursor: grabbing;
}

/* Search results are one vertical list, so there are no cards to scroll */
.emoji-picker-grid--search ~ .emoji-picker-pager {
    display: none;
}

.emoji-picker-btn {
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.emoji-picker-btn:hover {
    background: #f1f3f5;
}

/* Already reacted: same cue as .reaction-sheet-btn[aria-pressed=true] -
   purple fill, 2px purple border (the transparent 2px border above means no
   reflow) and an inner white ring. */
.emoji-picker-btn[aria-pressed="true"] {
    background: #F3E5F5;
    border-color: #7B1FA2;
    box-shadow: inset 0 0 0 1px #ffffff;
}

.emoji-picker-btn[aria-pressed="true"]:hover {
    background: #E1BEE7;
}

/* Focus ring. Inside the two scrollers it is drawn INSIDE the box
   (negative offset) so overflow:auto cannot clip it. */
.emoji-picker-btn:focus-visible,
.emoji-picker-tab:focus-visible {
    outline: 2px solid #1E88E5;
    outline-offset: -2px;
}

#reactionSheetBack:focus-visible {
    outline: 2px solid #1E88E5;
    outline-offset: 2px;
}

/* Desktop: a wider card so the grid shows several columns */
@media (min-width: 769px) {
    #reactionSheet.is-all {
        width: 360px;
        max-width: calc(100vw - 32px);
        height: min(70vh, 480px);
        height: min(70dvh, 480px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .emoji-picker-tabs {
        scroll-behavior: auto;
    }

    #reactionSheetBack,
    .emoji-picker-tab,
    .emoji-picker-btn {
        transition: none;
    }
}

/* ============================================================
   Emoji picker — search input
   ============================================================ */

.emoji-picker-search {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 4px;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #f9fafb;
    font-size: 15px;
    color: #2d3748;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.emoji-picker-search::placeholder {
    color: #9ca3af;
}

.emoji-picker-search:focus {
    border-color: #7B1FA2;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(123, 31, 162, 0.15);
}

.emoji-picker-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    cursor: pointer;
    opacity: 1;
}

/* When search is active, the grid gets a slightly different label */
.emoji-picker-grid[data-search-active="true"] {
    /* No visual change needed — just a hook for potential future styling */
}

/* Each category is one full-width "page" */
.emoji-picker-section {
    flex: 0 0 100%;
    scroll-snap-align: start;
    /* a hard flick lands on the next card instead of flying past it */
    scroll-snap-stop: always;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    align-content: start;
    overflow-y: auto;
    /* A card only scrolls up and down. Without this its overflow-x
       computes to `auto` as well, and a sideways swipe that starts on the
       card has nowhere to go. */
    overflow-x: hidden;
    padding: 8px 12px;
    gap: 2px;
    box-sizing: border-box;
    /* Contain ONLY the vertical axis: `contain` on both axes stops a
       sideways swipe from reaching the snapping row, so the cards could not
       be swiped at all (only the scrollbar moved them). */
    overscroll-behavior-x: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

/* display:grid above beats the UA [hidden] rule (search mode hides pages) */
.emoji-picker-section[hidden] {
    display: none;
}

/* Section heading inside each page — just a label at the top, NOT sticky */
.emoji-picker-section-heading {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 600;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 0 4px;
}

/* Search mode: vertical layout (single section, no horizontal paging) */
.emoji-picker-grid.emoji-picker-grid--search {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: none;
}

.emoji-picker-grid.emoji-picker-grid--search .emoji-picker-section {
    flex: none;
    width: 100%;
    /* The grid itself scrolls the result list. Both axes must be `visible`:
       a card's `overflow-x: hidden` would otherwise turn this into a
       (content-sized) scroll container whose overscroll containment stops
       the wheel and touch from reaching the grid. */
    overflow: visible;
    overscroll-behavior: auto;
    scroll-snap-align: none;
}

@media (prefers-reduced-motion: reduce) {
    .emoji-picker-search {
        transition: none;
    }
}
/* ============================================================
   Vertical scrollbar of a card: invisible until you scroll
   The thin bar's space is always reserved (so nothing shifts sideways when
   it appears) but its thumb is transparent. emoji-picker.js adds
   .is-scrolling while a card moves and removes it shortly after the
   scrolling stops. Touch phones already auto-hide their overlay bars.
   ============================================================ */
.emoji-picker-section,
.emoji-picker-grid.emoji-picker-grid--search {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.emoji-picker-section.is-scrolling,
.emoji-picker-grid.emoji-picker-grid--search.is-scrolling {
    scrollbar-color: rgba(123, 31, 162, 0.65) transparent;
}

/* Safari / older WebKit (ignored where the standard properties above work) */
.emoji-picker-section::-webkit-scrollbar,
.emoji-picker-grid.emoji-picker-grid--search::-webkit-scrollbar {
    display: block;
    width: 8px;
}

.emoji-picker-section::-webkit-scrollbar-track,
.emoji-picker-grid.emoji-picker-grid--search::-webkit-scrollbar-track {
    background: transparent;
}

.emoji-picker-section::-webkit-scrollbar-thumb,
.emoji-picker-grid.emoji-picker-grid--search::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
}

.emoji-picker-section.is-scrolling::-webkit-scrollbar-thumb,
.emoji-picker-grid.emoji-picker-grid--search.is-scrolling::-webkit-scrollbar-thumb {
    background: rgba(123, 31, 162, 0.65);
}