/* Custom utilities if needed */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -10px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fade-in-down {
    animation: fadeInDown 0.2s ease-out;
}

@keyframes slideUp {
    from {
        transform: translate3d(0, 100%, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

.animate-slide-up {
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Vue transition: slide-up */
.slide-up-enter-active,
.slide-up-leave-active {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.slide-up-enter-from,
.slide-up-leave-to {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
}
.slide-up-enter-to,
.slide-up-leave-from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Disable text selection and tap highlight */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Prevent pull-to-refresh without breaking scroll */
html, body {
    overscroll-behavior-y: contain;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

/* Main app container handles scrolling */
#app {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* Vue transition: slide-up-confirm (floating button) */
.slide-up-confirm-enter-active,
.slide-up-confirm-leave-active {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.slide-up-confirm-enter-from,
.slide-up-confirm-leave-to {
    opacity: 0;
    transform: translateY(100%);
}

/* Vue transition: drawer (right side panel) */
.drawer-enter-active,
.drawer-leave-active {
    transition: opacity 0.3s ease;
}
.drawer-enter-active > div:last-child,
.drawer-leave-active > div:last-child {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-enter-from,
.drawer-leave-to {
    opacity: 0;
}
.drawer-enter-from > div:last-child,
.drawer-leave-to > div:last-child {
    transform: translateX(100%);
}

/* Touch action utilities for swipe handling */
.touch-none {
    touch-action: none;
}

/* Element Plus Notification offset for Telegram WebApp safe area */
.el-notification {
    /* Use CSS variable set by App.js, add extra padding */
    top: calc(var(--tg-safe-top, 0px) + 16px) !important;
}

/* Ensure notifications don't go under the header */
.el-notification.right {
    right: 16px !important;
}

/* Vue transition: fade (for modals) */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.2s ease;
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* Scale-in animation for modal content */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scale-in {
    animation: scaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fade-saved: плавное появление/исчезновение «Сохранено» */
.fade-saved-enter-active {
    transition: opacity 0.2s ease;
}
.fade-saved-leave-active {
    transition: opacity 0.8s ease;
}
.fade-saved-enter-from,
.fade-saved-leave-to {
    opacity: 0;
}