/* Telegram Mini App Styles */

/* CSS Variables for Telegram theme (not used when keeping original styling) */
: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;
    --tg-secondary-bg-color: #f4f4f5;
}

/* ============================================
   MINIMAL TELEGRAM STYLES
   Only essential changes for functionality
   ============================================ */

/* Hide auth form in Telegram (auto-authenticated) */
body.telegram-mini-app #auth-form {
    display: none !important;
}

/* Remove tap highlight on mobile */
body.telegram-mini-app * {
    -webkit-tap-highlight-color: transparent;
}

/* Ensure proper spacing for Telegram safe areas (iOS notch, etc.) */
body.telegram-mini-app {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Adjust main content area */
body.telegram-mini-app main {
    min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

/* Hide Cloudflare Turnstile in Telegram (not needed for Telegram auth) */
body.telegram-mini-app .turnstile-container {
    display: none !important;
}

/* Telegram info display in profile - uses existing app styles */
.telegram-info-container {
    margin-bottom: 1.5rem;
}

.telegram-info {
    padding: 1.5rem;
    border-radius: 12px;
}

.telegram-info h3 {
    margin: 0 0 1rem 0;
    font-size: 1.2rem;
}

.telegram-info p {
    margin: 0.5rem 0;
}

.telegram-info-note {
    margin-top: 1rem;
    padding-top: 1rem;
    font-size: 0.9rem;
    font-style: italic;
    opacity: 0.7;
}

/* Breadcrumb adjustments for Telegram mini app */
body.telegram-mini-app .exercises-breadcrumbs,
body.telegram-mini-app .exercise-selection-breadcrumbs {
    /* Position below Telegram's header buttons (close, share, etc.) */
    top: max(70px, calc(env(safe-area-inset-top) + 60px));
}

/* Ensure breadcrumbs are readable and don't interfere with Telegram UI */
body.telegram-mini-app .exercises-breadcrumbs {
    background: rgba(42, 36, 34, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 12px;
    border-radius: 20px;
    width: fit-content;
    max-width: calc(100% - 40px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

body.telegram-mini-app .exercise-selection-breadcrumbs {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 12px;
    border-radius: 20px;
    width: fit-content;
    max-width: calc(100% - 40px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Additional padding for exercises content in Telegram */
body.telegram-mini-app .exercises {
    padding-top: max(100px, calc(env(safe-area-inset-top) + 90px));
}

/* iOS specific adjustments for devices with notch */
@supports (padding-top: env(safe-area-inset-top)) {
    body.telegram-mini-app .exercises-breadcrumbs,
    body.telegram-mini-app .exercise-selection-breadcrumbs {
        /* Ensure minimum clearance on iOS devices with notch */
        top: max(75px, calc(env(safe-area-inset-top) + 65px));
    }
}

/* Landscape orientation adjustments for Telegram */
@media (orientation: landscape) {
    body.telegram-mini-app .exercises-breadcrumbs,
    body.telegram-mini-app .exercise-selection-breadcrumbs {
        top: max(60px, calc(env(safe-area-inset-top) + 55px));
    }
}