#sky {
    z-index: 1;
    position: absolute;
}

#planet-container {
    z-index: 3;
    position: absolute;
}

#comet-container {
    z-index: 4;
    position: absolute;
}

#asteroids {
    z-index: 5;    
    position: absolute;
}

#tesla {
    z-index: 9;
    position: fixed;
}

#landscape {
    z-index: 6;
    position: absolute;
}

.tips {
    z-index: 10000;
    position: absolute;
}


#cards {
    z-index: 8;
    position: absolute;
}

.vr {
    z-index: 9;
    position: fixed;
}

#navbar {
    z-index: 1000;
    position: fixed;
    /* Запобігаємо перезапису через inline styles на touch-пристроях */
    /* transform: translateZ(0); */
    /* -webkit-transform: translateZ(0); */
}

#mobile-navbar {
    z-index: 1000;
    position: fixed;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

#preloader {
    z-index: 9;
    position: fixed;
}

/* #documents {
    z-index: 10;
    position: absolute;
} */

#ai-assistant-button {
    --tooltip-expanded-width: 122px;
    z-index: 1000;
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    height: 80px;

    .ai-assistant-button__center {
        width: 80px;
        height: 80px;
        background: url("../ai-assistant/ai-icon.png") center / contain no-repeat;
        flex: 0 0 80px;
        font-family: 'RoadRadio', sans-serif;
        color: #E6C44C;
        font-size: 7px;
        font-weight: 100;
        text-transform: uppercase;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        letter-spacing: 14%;
    }

    .ai-assistant-button__tooltip {
        display: flex;
        font-family: 'RoadRadio', sans-serif;
        color: #E6C44C;
        font-size: 7px;
        font-weight: 100;
        height: 79px;
        width: 0;
        min-width: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transition: width 900ms ease, margin 900ms ease, opacity 250ms ease;
        flex-direction: column;
        justify-content: space-between;
        margin: 2px 0 2px 2px;

        > * {
            min-width: var(--tooltip-expanded-width);
        }

        .ai-assistant-button__tooltip__info {
            text-transform: uppercase;
            letter-spacing: 12%;
            display: flex;
            flex-direction: column;
            background-color: #1E2132CC;
            padding: 2px 4px;

            span:not(:first-child) {
                margin-top: 2px;
            }
        }

        .ai-assistant-button__tooltip__button {
            width: 100%;
            background-color: #E6C44C;
            color: #202230;
            font-size: 8px;
            text-align: center;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 10%;
            padding: 2px 0;
        }

        .ai-assistant-button__tooltip__footer {
            text-transform: none;
            font-family: 'Montserrat', sans-serif;
            font-weight: 400;
            font-size: 6.5px;
            background-color: #1E2132CC;
            padding: 2px 7px;
            height: 14px;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                height: 9px;
                margin-left: 2px;
            }
        }
    }

    .ai-assistant-button__side {
        height: 80px;
        width: auto;
        display: block;
    }

    .ai-assistant-button__side:first-child {
        margin-right: 2px;
    }

}

#ai-assistant-button:hover .ai-assistant-button__tooltip {
    width: var(--tooltip-expanded-width);
    opacity: 1;
    pointer-events: auto;
    margin: 2px 0 2px 4px;
}