.summarize-button-container{
    margin: 0;
    margin-top: 32px;
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.summarize-button{
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    outline: none;
    border-radius: 10px;
    background: var(--light-blue-bg);
    padding: 12px;
    padding-inline-end: 16px;
    transition: 0.3s;
    width: auto;
}

.summarize-button svg{
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.summarize-button .small-text-bold-article{
    color: var(--black);
}

.summarize-popup-container{
    display: none; 
    align-items: center;
    justify-content: center;
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: env(safe-area-inset-bottom, 0);
    width: 100%; 
    height: calc(100dvh - env(safe-area-inset-bottom, 0)); 
    background: #0B152166;
    z-index: 1000;
}

[dir=rtl] .summarize-popup-container{
    left: auto;
    right: 0;
}

.summarize-popup{
    background: var(--white);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    position: relative;
    width: 100%;
    height: auto;
    max-width: 680px;
}

#close-summarize-button{
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    background: transparent;
}

.summarize-button-container .mobile-btn{
    display: none;
}

[dir=rtl] #close-summarize-button{
    left: 14px;
    right: auto;
}

#close-summarize-button svg{
    width: 32px;
    height: 32px;
}

#close-summarize-button path{
    transition: 0.3s;
}

.summarize-popup-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.summarize-popup-header-subtitle{
    display: flex;
    align-items: center;
    gap: 10px;
}

.summarize-popup-header-subtitle svg{
    width: 24px;
    height: 24px;
}

.summarize-popup-header .h4-title{
    text-align: center;
}

.summarize-ai-tools{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.summarize-ai-link{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: 0.3s;
    background: var(--light-blue-bg);
    padding: 12px;
    border-radius: 10px;
}

.summarize-ai-link svg{
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

@media (hover: hover){
    .summarize-button:hover{
        background: var(--n-very-light-accent);
    }

    #close-summarize-button:hover path{
        fill: var(--light-grey);
    }

    .summarize-ai-link:hover{
        background: var(--accent-highlight);
    }
}

@media (max-width: 1919px) {
    .summarize-popup{
        gap: 32px;
    }

    .summarize-button{
        gap: 8px;
    }

    .summarize-button svg{
        flex-shrink: 0;
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 1439px) {
    .summarize-popup{
        border-radius: 16px;
        padding: 32px;
        gap: 24px;
    }

    .summarize-popup-header{
        gap: 8px;
    }

    .summarize-ai-link svg{
        width: 36px;
        height: 36px;
    }

    .summarize-button-container{
        margin-top: 24px;
    }
}

@media (max-width: 1079px) {
    .summarize-button-container .desktop-btn{
        display: none;
    }

    .summarize-button-container .mobile-btn{
        display: block;
    }

    .summarize-button-container{
        margin-top: 32px;
        gap: 8px;
    }

    .summarize-popup{
        border-radius: 16px 16px 0 0;
        padding: 32px 32px 60px 32px;
        max-width: unset;
        transform: translateY(100%); /* Начальное положение за экраном */
        transition: transform 0.4s ease;
    }

    .summarize-popup.active{
        transform: translateY(0);
    }

    .summarize-popup-container{
        align-items: end;
        justify-content: center;
    }
}

@media (max-width: 577px) {
    .summarize-button-container{
        margin-top: 24px;
    }

    .summarize-popup{
        padding: 40px 16px;
    }

    #close-summarize-button{
        top: 0;
        right: 0;
        padding: 10px;
    }

    [dir=rtl] #close-summarize-button{
        left: 0;
        right: auto;
    }

    .summarize-popup-header-subtitle{
        gap: 6px;
    }
}