/* Telegram Theme Variables */
:root {
    --tg-bg-color: #ffffff;
    --tg-text-color: #000000;
    --tg-hint-color: #999999;
    --tg-link-color: #2481cc;
    --tg-button-color: #2481cc;
    --tg-button-text-color: #ffffff;
}

/* Apply Telegram theme when available */
body {
    background-color: var(--tg-bg-color);
    color: var(--tg-text-color);
}

/* Prevent pull-to-refresh on mobile */
html, body {
    overscroll-behavior: none;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Native iOS scrolling */
.native-scroll {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

/* Hide scrollbar but keep functionality */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Loading animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Card hover effect */
.card-hover {
    transition: transform 0.2s, box-shadow 0.2s;
}

.card-hover:active {
    transform: scale(0.98);
}

/* Safe area padding for iOS and Telegram Mini App */
:root {
    --tg-content-safe-area-top: 0px;
    --tg-safe-area-bottom: 0px;
}

@supports (padding-top: env(safe-area-inset-top)) {
    .safe-top {
        padding-top: env(safe-area-inset-top);
    }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .safe-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Number input without spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}