.custom_scrollbar {
    position: absolute;
    top: calc(var(--padding) + 40px + var(--gap));
    right: var(--padding);
    width: 5px;
    height: 100%;
    background: transparent;
    pointer-events: none;
}

.custom_thumb {
    position: absolute;
    top: 0;
    width: 100%;
    backdrop-filter: invert(1);
    opacity: .3;
    border-radius: 4px;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity var(--ease-fast);
    z-index: 10;
}

.custom_thumb:hover {
    opacity: .8;
}

timestamp_table {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    position: absolute;
    right: calc(var(--padding) + var(--padding));
    top: 50%;
    transform: translateY(-50%);
    z-index: +300;

    cursor: pointer;
}

timestamp_table:hover figure {
    opacity: 1;
}

.active_timestamp {
    opacity: 1 !important;
}

timestamp_table figure {
    margin: 0;
    padding: 0;
    height: 2px;
    opacity: .5;
    transition: opacity var(--ease-fast), width var(--ease-fast);
    backdrop-filter: invert(1);
}

timestamp_table figure:nth-child(1), timestamp_table figure:nth-child(3) {
    width: 10px;
}

timestamp_table figure:nth-child(2) {
    width: 20px;
}

timestamp_table:hover figure:nth-child(1) {
    width: 25px;
}

timestamp_table:hover figure:nth-child(2) {
    width: 20px;
}

timestamp_table:hover figure:nth-child(3) {
    width: 15px;
}

/* ─── Timestamp Panel ─────────────────────────────────────────── */

.timestamp_buttoncontainer {
    display: flex;
    position: absolute;
    color: var(--color-text);
    flex-direction: column;
    gap: 0;

    top: 0px;
    right: 0px;
    width: 0px;
    max-width: 400px;
    height: 100%;

    border-radius: var(--radius-sm);
    transition: width 200ms cubic-bezier(.4, 0, .2, 1), padding 200ms cubic-bezier(.4, 0, .2, 1);

    backdrop-filter: var(--glassFilter);
    -webkit-backdrop-filter: var(--glassFilter);
    z-index: +200;
    box-sizing: border-box;
    overflow: hidden;

    background-color: var(--color-primary);
    box-shadow: -5px 0px 20px 0px rgba(0, 0, 0, 0.9);
    padding: 0px;
}

.timestamp_buttoncontainer.open {
    width: min(75%, 380px);
    padding: var(--padding);
}

/* ─── Header ──────────────────────────────────────────────────── */

.timestamp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.45;
    padding-bottom: 8px;
    margin-bottom: 4px;
    white-space: nowrap;
    gap: 8px;
    position: relative;
}

.timestamp-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        var(--color-accent) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        transparent 100%
    );
}

/* ─── Close button ────────────────────────────────────────────── */

.ts-close-btn {
    background: none;
    border: none;
    color: var(--color-muted);
    font-size: 0.7rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: color var(--ease-fast), background var(--ease-fast);
    flex-shrink: 0;
    opacity: 0.5;
    letter-spacing: 0;
    text-transform: none;
}

.ts-close-btn:hover {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.06);
    opacity: 1;
}

/* ─── Empty state ─────────────────────────────────────────────── */

.ts-empty {
    font-size: 0.72rem;
    opacity: 0.25;
    padding: 16px 0 8px;
    white-space: normal;
    text-align: center;
    font-style: italic;
    line-height: 1.6;
}

/* ─── List ────────────────────────────────────────────────────── */

.ts-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
    padding: 2px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--color-muted) transparent;
}

.ts-list::-webkit-scrollbar { width: 3px; }
.ts-list::-webkit-scrollbar-track { background: transparent; }
.ts-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}
.ts-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ─── Row slide-in animation ─────────────────────────────────── */

@keyframes ts-row-in {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0);   }
}

.ts-list .ts-row:nth-child(1)  { animation-delay:   0ms; }
.ts-list .ts-row:nth-child(2)  { animation-delay:  30ms; }
.ts-list .ts-row:nth-child(3)  { animation-delay:  60ms; }
.ts-list .ts-row:nth-child(4)  { animation-delay:  90ms; }
.ts-list .ts-row:nth-child(5)  { animation-delay: 120ms; }
.ts-list .ts-row:nth-child(n+6) { animation-delay: 150ms; }

/* ─── Rows ─────────────────────────────────────────────────────── */

.timestamp_buttoncontainer button.ts-row {
    all: unset;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    min-height: 50px;
    box-sizing: border-box;
    overflow: hidden;
    max-width: 100%;
    height: fit-content;
    transition:
        background-color var(--ease-fast),
        border-color var(--ease-fast),
        transform var(--ease-fast);
    border: var(--color-secondary) 1px solid;
    animation: ts-row-in 200ms ease-out both;
}

.timestamp_buttoncontainer button.ts-row:hover {
    background-color: rgba(255, 255, 255, 0.04);
    border-left-color: var(--color-accent);
    transform: translateX(2px);
}

.timestamp_buttoncontainer button.ts-row.ts-active {
    background-color: rgba(255, 255, 255, 0.05);
    border-left-color: var(--color-accent);
}

/* ─── Index number ────────────────────────────────────────────── */

.timestamp_buttoncontainer button .ts-index {
    font-size: 0.6rem;
    font-weight: 600;
    opacity: 0.25;
    min-width: 14px;
    text-align: center;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
}

/* ─── Info column (time + label stacked) ─────────────────────── */

.timestamp_buttoncontainer button .ts-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
}

/* ─── Time ────────────────────────────────────────────────────── */

.timestamp_buttoncontainer button .ts-time {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    transition: opacity var(--ease-fast);
    opacity: 0.8;

    &::before {
        content: '';
        position: relative;
        background-image: url(../../../media/icons/filled/hourglass.png);
        background-size: contain;
        background-repeat: no-repeat;
        aspect-ratio: 1 / 1;
        height: .7rem;
        flex-shrink: 0;
        filter: var(--icon-brigtness);
        margin-right: 4px;
        opacity: .65;
    }
}

.timestamp_buttoncontainer button.ts-row:hover .ts-time,
.timestamp_buttoncontainer button.ts-row.ts-active .ts-time {
    opacity: 1;
}

/* ─── Label ───────────────────────────────────────────────────── */

.timestamp_buttoncontainer button .ts-label {
    font-size: 0.9rem;
    opacity: 0.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
    transition: opacity var(--ease-fast);
}

.timestamp_buttoncontainer button.ts-row:hover .ts-label,
.timestamp_buttoncontainer button.ts-row.ts-active .ts-label {
    opacity: 0.6;
}

/* ─── Highlight flash ─────────────────────────────────────────── */

.highlight {
    animation: highlightAnimation 3s ease forwards;
}

@keyframes highlightAnimation {
    0%   { background-color: rgba(112, 63, 161, 0.25); }
    100% { background-color: transparent; }
}

/* CodeBox content */

.codeBoxContainer {
    font-family: Consolas, 'Courier New', monospace;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: fit-content;
    min-height: 1rem;
    padding: var(--padding-sm);
    box-sizing: border-box;
    background-color: var(--color-codeBox);
    border-radius: var(--radius-sm);
    white-space:pre-wrap;
    margin: var(--gap) 0px;
    position: relative;
    opacity: 1;
    animation: appear 100ms forwards ease-out;
}

.codeBoxContainer div { white-space: pre-wrap;}

.code { 
    font-size: .85rem;
    color: rgb(234, 234, 234);
}


@keyframes appear {
    0% { 
        opacity: 0; 
        transform: translateX(-0.1em);
    }
    100% { 
        opacity: 1; 
        transform: translateX(0em);
    }
}