/*
 * Copyright 2026 Element Creations Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.root {
    height: 100%;
    width: 100%;
    position: relative;
}

.scroller {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /* Turn off the browser's own scroll anchoring. It would try to hold the scroll position
       when content changes, which conflicts with TanStack doing the same job in JS. */
    overflow-anchor: none;
}

/* Applied during the first load. The list is laid out and scrolled into position, but kept
   hidden (a spinner shows instead) so the user does not watch it shuffle into place. */
.hidden {
    visibility: hidden;
}

.list {
    width: 100%;
    position: relative;
    list-style: none;
    margin: 0;
}

/* Rows are positioned absolutely, stacked by TanStack rather than by normal document flow.
   TanStack writes each row's transform and the container's height straight to the DOM (the
   directDomUpdates option), so never set transform or height here — it would be overwritten
   or fight with what TanStack writes. */
.tile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow-anchor: none;
    list-style: none;
}

/* Holds the spinner shown in the middle of the panel while the timeline is still hidden. */
.cover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
