:root { --mobile-nav-height: 0px; }
.mobile-navigation { display: none; }

@media (max-width: 1199px) {
    :root:has(.mobile-navigation) { --mobile-nav-height: calc(72px + env(safe-area-inset-bottom, 0px)); scroll-padding-bottom: calc(var(--mobile-nav-height) + 20px); }
    body:has(.mobile-navigation) { padding-bottom: var(--mobile-nav-height) !important; }
    .mobile-navigation {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        position: fixed;
        inset: auto 0 0;
        height: var(--mobile-nav-height);
        padding: 5px max(6px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
        background: #fff;
        border-top: 1px solid #e5e2e9;
        box-shadow: 0 -4px 20px #2020240a;
        z-index: 1000;
    }
    .mobile-navigation__item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
        height: 61px;
        padding: 4px 0;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: #68646f;
        font: 600 11px/1.2 Manrope, sans-serif;
        letter-spacing: 0;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-navigation__item > img, .mobile-navigation__help-icon > img { opacity: .6; object-fit: contain; }
    .mobile-navigation__item[aria-current="page"] { color: #44246d; background: #f0e8fc; }
    .mobile-navigation__item[aria-current="page"] img { opacity: 1; }
    .mobile-navigation__item:hover { color: #161419; background: #f4f2f7; }
    .mobile-navigation__item:focus-visible, .mobile-profile a:focus-visible, .mobile-bot:focus-visible, .menu__btn:focus-visible { outline: 2px solid #8155be; outline-offset: -2px; }
    .mobile-navigation__order { gap: 2px; color: #18151d; }
    .mobile-navigation__order-icon { display: grid; place-items: center; width: 44px; height: 38px; border-radius: 12px; background: #18151d; }
    .mobile-navigation__order-icon img { filter: invert(1); }
    .mobile-navigation__help-icon { display: block; width: 24px; height: 24px; position: relative; }
    .mobile-navigation__unread { position: absolute; top: -2px; right: -3px; width: 9px; height: 9px; background: #df475e; border: 2px solid #fff; border-radius: 50%; }

    header .menu__btn { border: 0; width: 44px; height: 44px; top: -6px; }
    header .menu__btn > span { left: 13px; top: 21px; }
    #menu__toggle { position: absolute; width: 1px; height: 1px; pointer-events: none; }
    #menu__toggle:checked + .menu__btn { top: 16px; right: max(16px, env(safe-area-inset-right)); }
    #menu__toggle:checked + .menu__btn > span::before { transform: rotate(0deg); }
    body.menu-open header { z-index: 1001; backdrop-filter: none; -webkit-backdrop-filter: none; }
    body.menu-open::before { z-index: 999; }
    header .menu__box {
        right: 0;
        width: 100%;
        height: calc(100vh - var(--mobile-nav-height)) !important;
        height: calc(100dvh - var(--mobile-nav-height)) !important;
        padding: 76px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)) !important;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        background: #f5f4f6;
        visibility: hidden;
        border-radius: 0 !important;
    }
    #menu__toggle:checked ~ .menu__box { visibility: visible; }
    header .menu__box .menu__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 18px 0 !important; align-items: stretch; }
    header .menu__box .menu__nav a { padding: 14px 0; font-size: 16px; }
    header .menu__box .menu__nav a::after { display: none; }
    .mobile-profile { padding: 18px; background: #fff; border-radius: 20px; }
    .mobile-profile__identity { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 10px; }
    .mobile-profile__identity > div { min-width: 0; }
    .mobile-profile__identity strong { display: block; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
    .mobile-profile__identity span { display: block; color: #76717d; font-size: 12px; overflow-wrap: anywhere; margin-top: 3px; }
    .mobile-profile__settings { display: grid; place-items: center; width: 40px; height: 44px; border-radius: 12px; background: #f5f3f7; }
    .mobile-profile__balance { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #eeebf1; margin-top: 16px; padding-top: 16px; }
    .mobile-profile__balance > div { min-width: 0; }
    .mobile-profile__balance span { display: block; color: #76717d; font-size: 12px; }
    .mobile-profile__balance strong { display: block; font-size: 24px; font-weight: 750; overflow-wrap: anywhere; }
    header .mobile-profile__top-up { display: inline-flex; align-items: center; min-height: 44px; border-radius: 100px; padding: 10px 16px; background: #18151d; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
    .mobile-profile__history { display: inline-flex; align-items: center; min-height: 44px; margin-right: 12px; color: #674092; font-size: 12px; text-decoration: none; }
    .mobile-bots { display: grid; gap: 10px; }
    .mobile-bot { display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; color: #201d25; text-decoration: none; }
    .mobile-bot--telegram { background: #e6f3fc; }
    .mobile-bot--max { background: #eae5fc; }
    .mobile-bot strong { display: block; font-size: 14px; }
    .mobile-bot span span { display: block; margin-top: 4px; font-size: 12px; color: #655e70; }
    body:has(.mobile-navigation) .mobile-cta-button { display: none; }

    /* Floating controls stay above the app navigation, below modal surfaces. */
    body:has(.mobile-navigation) .cart-fab--top { bottom: calc(var(--mobile-nav-height) + 12px); z-index: 990; }
    body:has(.mobile-navigation) .chat_ai_help .chat_img_main { bottom: calc(var(--mobile-nav-height) + 12px); z-index: 990; }
    body:has(.mobile-navigation) .chat-hint-bubble { bottom: calc(var(--mobile-nav-height) + 100px); z-index: 991; }
    body:has(.mobile-navigation) .cookie-consent { bottom: var(--mobile-nav-height); }
    .cookie-consent__panel { max-height: calc(100dvh - var(--mobile-nav-height) - 32px); overflow-y: auto; }
    body.menu-open .cart-fab, body.menu-open .chat_img_main, body.menu-open .chat-hint-bubble { visibility: hidden; }
    body:has(.mobile-navigation) .cabinet_block { padding-bottom: 32px; }
    body:has(.mobile-navigation) #liftgpt-page { height: calc(100dvh - var(--mobile-nav-height)); max-height: calc(100dvh - var(--mobile-nav-height)); min-height: 0; }
    .cabinet_block .about_block .right_contents { min-width: 0; max-width: 100%; }
    .cabinet_block .about_block .right_contents .cards_cabinet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 12px; overflow: visible; }
    .cabinet_block .about_block .right_contents .cards_cabinet .card_block { min-width: 0 !important; width: 100% !important; max-width: none; height: auto; min-height: 148px; padding: 14px; }
    .cabinet_block .about_block .right_contents .cards_cabinet .title_block { flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
    .cabinet_block .about_block .right_contents .cards_cabinet .card_block .title_block h4 { font-size: 13px; }
    .cabinet_block .about_block .right_contents .cards_cabinet .card_block .title_block span { font-size: 12px; }
    .cabinet_block .about_block .right_contents .cards_cabinet .cost { flex-wrap: wrap; gap: 10px; }
    .cabinet_block .about_block .right_contents .cards_cabinet .card_block .cost .tetx_left span { font-size: 22px; overflow-wrap: anywhere; }
    .cabinet_block .about_block .right_contents .cards_cabinet .card_block .cost .tetx_left p { font-size: 12px; }
    .cabinet_block .about_block .right_contents .cards_cabinet .card_block .cost a { font-size: 12px; padding: 10px 12px; min-height: 36px; }
    .your_orders .tab_menu .nav-pills { flex-wrap: wrap; gap: 8px; overflow: visible; }
    .your_orders .tab_menu .nav-pills .nav-link { width: auto; min-height: 44px; padding: 10px 14px; font-size: 13px; }
    .your_orders .tab_menu { flex-wrap: wrap; gap: 12px; }
    .loyalty-shortcut { display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; gap: 6px 10px; }
    .loyalty-shortcut > img:first-child { grid-column: 1; grid-row: 1; }
    .loyalty-shortcut-copy { grid-column: 2; grid-row: 1; }
    .loyalty-shortcut > img:last-child { grid-column: 3; grid-row: 1; }
    .loyalty-shortcut > .loyalty-badge:not([hidden]) { display: inline-flex; grid-column: 2; justify-self: start; }
}

@media (max-width: 767px) {
    .table-mobile-cards tbody td.cell-xs:nth-child(2) { grid-column: span 1; padding-inline: 4px; }
    .table-mobile-cards tbody td.cell-xs:nth-child(3) { grid-column: span 3; }
}

@media (max-width: 640px) {
    body:has(.mobile-navigation) .lgpt-input-panel { bottom: var(--mobile-nav-height); padding-bottom: 12px; z-index: 990; }
    body:has(.mobile-navigation) .lgpt-chat-messages,
    body:has(.mobile-navigation) .lgpt-chat-empty { padding-bottom: calc(190px + var(--mobile-nav-height)); }
    body:has(.mobile-navigation) .lgpt-chat-wrap { padding-bottom: calc(174px + var(--mobile-nav-height)); }
}

@media (prefers-reduced-motion: reduce) {
    header .menu__box, header .menu__btn > span { transition: none; }
}