[x-cloak] {
    display: none !important;
}

/* Scrollbar Styling */
html,
body {
    overscroll-behavior: none;
    height: 100%;
    width: 100%;
    /* Safari iOS fix for horizontal overflow */
    overflow-x: hidden !important;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

/* Prevent any element from causing horizontal scroll */
* {
    max-width: 100vw;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.dark * {
    scrollbar-color: #475569 transparent;
}

/* iOS Safe Area Utilities */
.safe-pt {
    padding-top: env(safe-area-inset-top, 20px) !important;
}

.safe-pt-header {
    padding-top: calc(env(safe-area-inset-top, 20px) + 0.75rem) !important;
}

.safe-pb-sidebar {
    padding-bottom: env(safe-area-inset-bottom, 20px) !important;
}

/* Reset legacy class for cached HTML */
.safe-pb {
    padding-bottom: 0 !important;
}

.h-dvh {
    height: 100vh;
    /* Fallback */
    height: 100dvh;
}

.scroll-touch {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}