/* Page-load progress: a 2px line on the bottom edge of the address bar. It sits
   inside the workspace (right of the sidebar) and animates transform only. */

#lineLoader {
    position: fixed;
    top: 44px;
    left: var(--sb-w, 0px);
    right: 0;
    height: 2px;
    z-index: 60;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.2s var(--ease);
}
#lineLoader.visible { opacity: 1; }
#lineLoader.finishing { opacity: 0; }

.ll-bar {
    width: 100%;
    height: 100%;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.35s var(--ease-out);
}

@media (max-width: 720px) {
    #lineLoader { top: 48px; }
}

/* the same idea for full-page waits: an indeterminate line above a short label */
.pegtop-stack { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ll-indet { position: relative; width: 160px; height: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.ll-indet::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    background: var(--accent);
    animation: llSlide 1.1s var(--ease) infinite;
}
@keyframes llSlide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.pegtop-text { color: var(--fg-2); font-size: 13px; font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
    .ll-bar { transition: none; }
    .ll-indet::after { animation: none; width: 100%; opacity: 0.5; }
}

.slow-toast {
    position: fixed;
    top: 62px;
    left: calc(50% + var(--sb-w, 0px) / 2);
    transform: translateX(-50%) translateY(-8px);
    z-index: 80;
    display: none;
    align-items: center;
    gap: 14px;
    padding: 10px 12px 10px 16px;
    background: #121117;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    font-size: 12px;
    color: var(--fg-2);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.slow-toast.visible {
    display: inline-flex;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.slow-toast .st-title {
    color: var(--fg);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: -0.005em;
}
.slow-toast .st-desc {
    color: var(--fg-3);
    font-size: 11px;
    margin-top: 2px;
}
.slow-toast #stCountdown {
    color: #ededf0;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.slow-toast .st-btn {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--fg);
    padding: 6px 12px;
    border-radius: 0;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.slow-toast .st-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.28);
}