/**
 * Ultra Smooth APK Experience v1.0
 * 
 * Premium buttery-smooth animations and effects specifically optimized
 * for the Capacitor APK build. Targets 60fps consistently on all devices.
 * 
 * Features:
 * - GPU-accelerated micro-interactions
 * - Premium haptic-style feedback animations
 * - AMOLED-optimized colors
 * - Native-feel touch response
 * - Smooth page transitions
 */

/* ==================== APK-SPECIFIC OPTIMIZATIONS ==================== */

/* Detect APK mode via CSS (Android WebView) */
@supports (-webkit-overflow-scrolling: touch) {
    body.apk-mode {
        /* True black for AMOLED screens */
        --apk-bg-pure-black: #000000;
        --apk-bg-elevated: #0a0a0a;
        --apk-surface: #121212;
        --apk-surface-elevated: #1a1a1a;
        
        /* Vibrant accent colors for AMOLED */
        --apk-accent-gold: #fbbf24;
        --apk-accent-gold-glow: rgba(251, 191, 36, 0.5);
        --apk-accent-indigo: #6366f1;
        --apk-accent-emerald: #10b981;
    }
}

/* ==================== BUTTERY SMOOTH TRANSITIONS ==================== */

/* Master smooth transition timing */
:root {
    --smooth-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --smooth-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --smooth-overshoot: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --smooth-swift: cubic-bezier(0.4, 0, 0.2, 1);
    --smooth-natural: cubic-bezier(0.4, 0, 0.6, 1);
}

/* Ultra-smooth universal transitions */
.ultra-smooth,
.ultra-smooth * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.transition-ultra {
    transition: all 0.2s var(--smooth-swift);
    will-change: transform, opacity;
}

.transition-ultra-bounce {
    transition: all 0.3s var(--smooth-bounce);
}

.transition-ultra-fast {
    transition: all 0.12s var(--smooth-swift);
}

/* ==================== PREMIUM MICRO-INTERACTIONS ==================== */

/* Button press effect - feels like native */
.btn-native-press {
    transform: translate3d(0, 0, 0);
    transition: transform 0.1s var(--smooth-swift),
                box-shadow 0.1s var(--smooth-swift),
                background-color 0.1s var(--smooth-swift);
}

.btn-native-press:active {
    transform: translate3d(0, 1px, 0) scale(0.98);
}

/* Premium gold button with glow */
.btn-gold-premium {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    color: #000;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    transition: all 0.2s var(--smooth-swift);
}

.btn-gold-premium::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 70%
    );
    transform: translateX(-100%) rotate(45deg);
    transition: transform 0.6s var(--smooth-swift);
}

.btn-gold-premium:hover::before {
    transform: translateX(100%) rotate(45deg);
}

.btn-gold-premium:active {
    transform: translate3d(0, 2px, 0) scale(0.97);
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

/* ==================== SMOOTH SCROLL CONTAINERS ==================== */

/* Premium scroll container */
.scroll-ultra-smooth {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    overscroll-behavior-y: none;
}

/* Hide scrollbar but keep functionality (premium feel) */
.scroll-hidden-premium {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scroll-hidden-premium::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Momentum scroll with snap */
.scroll-momentum-snap {
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
}

.scroll-momentum-snap > * {
    scroll-snap-align: start;
}

/* ==================== MODAL & OVERLAY ANIMATIONS ==================== */

/* Premium modal backdrop */
@keyframes modal-backdrop-in {
    from {
        opacity: 0;
        backdrop-filter: blur(0);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(12px);
    }
}

.modal-backdrop-ultra {
    animation: modal-backdrop-in 0.25s var(--smooth-swift) forwards;
    background: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Premium modal slide up */
@keyframes modal-slide-up-premium {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.modal-content-ultra {
    animation: modal-slide-up-premium 0.35s var(--smooth-bounce) forwards;
}

/* Modal exit animation */
@keyframes modal-exit-premium {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        opacity: 0;
        transform: translate3d(0, 20px, 0) scale(0.97);
    }
}

.modal-exit-ultra {
    animation: modal-exit-premium 0.2s var(--smooth-swift) forwards;
}

/* ==================== MESSAGE ANIMATIONS ==================== */

/* New message slide in */
@keyframes message-slide-in {
    from {
        opacity: 0;
        transform: translate3d(0, 16px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.message-animate-in {
    animation: message-slide-in 0.3s var(--smooth-swift) forwards;
}

/* AI typing indicator */
@keyframes typing-dots {
    0%, 100% {
        transform: translate3d(0, 0, 0);
        opacity: 0.4;
    }
    50% {
        transform: translate3d(0, -4px, 0);
        opacity: 1;
    }
}

.typing-dot-1 { animation: typing-dots 1s var(--smooth-natural) infinite; animation-delay: 0s; }
.typing-dot-2 { animation: typing-dots 1s var(--smooth-natural) infinite; animation-delay: 0.2s; }
.typing-dot-3 { animation: typing-dots 1s var(--smooth-natural) infinite; animation-delay: 0.4s; }

/* ==================== PREMIUM LOADING STATES ==================== */

/* Shimmer loading effect */
@keyframes shimmer-ultra {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.shimmer-ultra {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer-ultra 1.5s var(--smooth-swift) infinite;
}

/* Skeleton loading with AMOLED optimization */
.skeleton-amoled {
    background: #1a1a1a;
    position: relative;
    overflow: hidden;
}

.skeleton-amoled::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.05),
        transparent
    );
    animation: shimmer-ultra 2s infinite;
}

/* Premium spinner */
@keyframes spin-ultra {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner-ultra {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(251, 191, 36, 0.2);
    border-top-color: #fbbf24;
    border-radius: 50%;
    animation: spin-ultra 0.8s linear infinite;
}

/* ==================== HAPTIC FEEDBACK VISUAL CUES ==================== */

/* Pulse effect for interactive elements */
@keyframes pulse-haptic {
    0% { 
        box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4);
        transform: scale(1);
    }
    70% { 
        box-shadow: 0 0 0 12px rgba(251, 191, 36, 0);
        transform: scale(1.02);
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
        transform: scale(1);
    }
}

.haptic-pulse {
    animation: pulse-haptic 0.4s var(--smooth-swift);
}

/* Success checkmark animation */
@keyframes checkmark-draw {
    0% {
        stroke-dashoffset: 24;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.checkmark-animated {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: checkmark-draw 0.4s var(--smooth-bounce) 0.1s forwards;
}

/* ==================== PREMIUM GLASS EFFECTS ==================== */

/* Premium glass card */
.glass-ultra {
    background: rgba(10, 10, 10, 0.85);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Gold-tinted glass */
.glass-gold {
    background: rgba(251, 191, 36, 0.05);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(251, 191, 36, 0.15);
}

/* ==================== PAGE TRANSITIONS ==================== */

/* Fade transition */
@keyframes page-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.page-transition-fade {
    animation: page-fade-in 0.25s var(--smooth-swift);
}

/* Slide from right */
@keyframes page-slide-right {
    from {
        opacity: 0;
        transform: translate3d(50px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.page-transition-slide-right {
    animation: page-slide-right 0.3s var(--smooth-swift);
}

/* Slide from bottom (for modals/sheets) */
@keyframes page-slide-up {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.page-transition-slide-up {
    animation: page-slide-up 0.4s var(--smooth-bounce);
}

/* ==================== TOUCH FEEDBACK ==================== */

/* Subtle scale on touch */
.touch-scale {
    transition: transform 0.1s var(--smooth-swift);
}

.touch-scale:active {
    transform: scale(0.97);
}

/* Highlight on touch */
.touch-highlight {
    transition: background-color 0.1s var(--smooth-swift);
}

.touch-highlight:active {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ==================== PREMIUM GLOW EFFECTS ==================== */

/* Gold glow */
.glow-gold {
    box-shadow: 
        0 0 20px rgba(251, 191, 36, 0.3),
        0 0 40px rgba(251, 191, 36, 0.2),
        0 0 60px rgba(251, 191, 36, 0.1);
}

/* Animated gold glow */
@keyframes glow-gold-pulse {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(251, 191, 36, 0.3),
            0 0 40px rgba(251, 191, 36, 0.15);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(251, 191, 36, 0.4),
            0 0 60px rgba(251, 191, 36, 0.2);
    }
}

.glow-gold-animated {
    animation: glow-gold-pulse 2s var(--smooth-natural) infinite;
}

/* Indigo glow */
.glow-indigo {
    box-shadow: 
        0 0 20px rgba(99, 102, 241, 0.3),
        0 0 40px rgba(99, 102, 241, 0.2);
}

/* ==================== OPTIMIZED WILL-CHANGE ==================== */

/* Apply will-change judiciously */
.will-transform {
    will-change: transform;
}

.will-opacity {
    will-change: opacity;
}

.will-transform-opacity {
    will-change: transform, opacity;
}

/* Reset will-change after animation */
.will-change-reset {
    will-change: auto;
}

/* ==================== PERFORMANCE UTILITIES ==================== */

/* GPU layer promotion */
.promote-layer {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Contain for better performance */
.contain-layout {
    contain: layout;
}

.contain-paint {
    contain: paint;
}

.contain-strict {
    contain: strict;
}

/* ==================== AMOLED OPTIMIZATIONS ==================== */

/* True black background */
.bg-amoled {
    background-color: #000000;
}

/* Pure black surface */
.surface-amoled {
    background-color: #0a0a0a;
}

/* Elevated AMOLED surface */
.surface-amoled-elevated {
    background-color: #121212;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* High contrast text for AMOLED */
.text-amoled {
    color: #ffffff;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
}

/* ==================== REDUCED MOTION FALLBACK ==================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .scroll-ultra-smooth {
        scroll-behavior: auto;
    }
}

/* ==================== APK-SPECIFIC MEDIA QUERY ==================== */

/* High DPI screens (most modern phones) */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
    /* Sharper text */
    body {
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }
    
    /* Sharper borders */
    .border-sharp {
        border-width: 0.5px;
    }
}

/* Large phone screens */
@media screen and (min-width: 390px) and (max-width: 768px) {
    .btn-native-press {
        min-height: 48px;
        font-size: 16px;
    }
}

/* ==================== APK v2.0 PREMIUM ENHANCEMENTS ==================== */

/* Biometric button styling */
.biometric-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 16px;
    color: white;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 
        0 4px 16px rgba(16, 185, 129, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.2s var(--smooth-swift);
}

.biometric-btn:active {
    transform: scale(0.97);
    box-shadow: 
        0 2px 8px rgba(16, 185, 129, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.biometric-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Biometric fingerprint icon animation */
@keyframes fingerprint-scan {
    0% { stroke-dashoffset: 100; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 100; }
}

.fingerprint-icon {
    animation: fingerprint-scan 2s ease-in-out infinite;
}

/* Chat message virtualization - performance enhancement */
.chat-container-virtualized {
    contain: strict;
    content-visibility: auto;
    contain-intrinsic-size: auto 80px;
}

.chat-message-virtualized {
    contain: layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: auto 100px;
}

/* Lazy load images for performance */
.lazy-image {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    transition: opacity 0.3s var(--smooth-swift);
}

.lazy-image.loaded {
    opacity: 1;
}

.lazy-image.loading {
    opacity: 0.5;
}

/* Premium input field styling for APK */
.input-premium-apk {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 18px;
    color: white;
    font-size: 16px;
    transition: all 0.2s var(--smooth-swift);
}

.input-premium-apk:focus {
    outline: none;
    border-color: #fbbf24;
    box-shadow: 
        0 0 0 3px rgba(251, 191, 36, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.3);
}

.input-premium-apk::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Premium bottom navigation for APK */
.bottom-nav-premium {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(10, 10, 10, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    display: flex;
    justify-content: space-around;
    z-index: 100;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.2s var(--smooth-swift);
    border-radius: 12px;
}

.bottom-nav-item.active {
    color: #fbbf24;
}

.bottom-nav-item:active {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.95);
}

/* Premium card lift effect */
.card-lift-premium {
    transition: all 0.3s var(--smooth-bounce);
    transform: translateZ(0);
}

.card-lift-premium:hover,
.card-lift-premium:focus-visible {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 
        0 12px 24px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(251, 191, 36, 0.1);
}

/* Pull-to-refresh indicator */
@keyframes pull-refresh-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.pull-refresh-indicator {
    animation: pull-refresh-spin 1s linear infinite;
    color: #fbbf24;
}

/* Swipe action reveal */
.swipe-action-reveal {
    transition: transform 0.3s var(--smooth-bounce);
}

.swipe-action-reveal.swiped-left {
    transform: translateX(-80px);
}

.swipe-action-reveal.swiped-right {
    transform: translateX(80px);
}

/* Premium toast notifications */
.toast-premium {
    background: rgba(10, 10, 10, 0.95);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 14px 20px;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: toast-slide-up 0.4s var(--smooth-bounce);
}

@keyframes toast-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.toast-premium.success {
    border-color: rgba(16, 185, 129, 0.3);
}

.toast-premium.error {
    border-color: rgba(239, 68, 68, 0.3);
}

.toast-premium.warning {
    border-color: rgba(251, 191, 36, 0.3);
}

/* Floating action button premium */
.fab-premium {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom));
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 16px rgba(251, 191, 36, 0.4),
        0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s var(--smooth-bounce);
    z-index: 90;
}

.fab-premium:active {
    transform: scale(0.9);
    box-shadow: 
        0 2px 8px rgba(251, 191, 36, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.2);
}

/* High refresh rate optimizations */
@supports (scrollbar-gutter: stable) {
    .scroll-ultra-smooth {
        scrollbar-gutter: stable;
    }
}

/* Optimize for 120Hz displays */
@media (min-resolution: 2dppx) {
    .transition-ultra,
    .transition-ultra-bounce {
        transition-duration: 0.15s;
    }
}

/* Touch ripple effect */
.touch-ripple {
    position: relative;
    overflow: hidden;
}

.touch-ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.2) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
}

.touch-ripple:active::after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}

/* Keyboard avoidance - prevent content jumping */
.keyboard-avoiding {
    transition: padding-bottom 0.3s var(--smooth-swift);
}

body.keyboard-visible .keyboard-avoiding {
    padding-bottom: calc(env(keyboard-inset-height, 0px) + 16px);
}