/* =========================================================
   MUSICALWORLD — MODAL DE PRÉ-VISUALIZAÇÃO DE NOTIFICAÇÃO

   Arquivo:
   css/components/modal-notificacao.css

   Responsabilidade:

   * Estilizar o pequeno aviso de notificação.
   * Posicionar o aviso no topo da página.
   * Criar a animação de entrada e saída.
   * Adaptar o componente para desktop e celular.
   * Manter o aviso discreto, sem ocupar grande espaço.
   * Exibir uma barra de progresso indicando o tempo restante.
   ========================================================= */


/* =========================================================
   CONTAINER
   ========================================================= */

#modal-notificacao-container {

    position: fixed;

    top: 76px;

    left: 50%;

    transform: translateX(-50%);

    width: min(
        calc(100% - 32px),
        430px
    );

    z-index: 99999;

    pointer-events: none;

    display: flex;

    flex-direction: column;

    align-items: center;

}


/* =========================================================
   MODAL
   ========================================================= */

.modal-notificacao {

    position: relative;

    width: 100%;

    box-sizing: border-box;

    pointer-events: auto;

    opacity: 0;

    transform: translateY(-130%);

    transition:
        opacity 320ms ease,
        transform 320ms cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    will-change:
        opacity,
        transform;

}


/* =========================================================
   ESTADO VISÍVEL
   ========================================================= */

.modal-notificacao.visivel {

    opacity: 1;

    transform: translateY(0);

}


/* =========================================================
   ESTADO DE SAÍDA
   ========================================================= */

.modal-notificacao.saindo {

    opacity: 0;

    transform: translateY(-130%);

}


/* =========================================================
   CONTEÚDO PRINCIPAL
   ========================================================= */

.modal-notificacao-conteudo {

    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    min-height: 70px;

    padding:
        11px
        42px
        11px
        12px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 14px;

    box-shadow:
        0 12px 30px rgba(
            15,
            23,
            42,
            0.14
        ),
        0 3px 8px rgba(
            15,
            23,
            42,
            0.06
        );

    overflow: hidden;

}



/* =========================================================
   AVATAR
   ========================================================= */

.modal-notificacao-avatar-wrapper {

    flex: 0 0 auto;

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.modal-notificacao-avatar {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    overflow: hidden;

    box-sizing: border-box;

}


.modal-notificacao-avatar.possui-imagem {

    object-fit: cover;

    background: #f1f3f7;

    border: 1px solid #e5e7eb;

}


.modal-notificacao-avatar.sem-imagem {

    background: #ede9fe;

    color: #6d4aff;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.02em;

}


.modal-notificacao-avatar-iniciais {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ede9fe;

    color: #6d4aff;

    font-size: 14px;

    font-weight: 700;

}


/* =========================================================
   ÁREA DE TEXTO
   ========================================================= */

.modal-notificacao-texto {

    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 2px;

}


/* =========================================================
   CABEÇALHO DO TEXTO
   ========================================================= */

.modal-notificacao-cabecalho {

    display: flex;

    align-items: center;

    gap: 6px;

    min-width: 0;

}


.modal-notificacao-nome {

    min-width: 0;

    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #172033;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.25;

}


/* =========================================================
   ÍCONE DO TIPO
   ========================================================= */

.modal-notificacao-tipo-icon {

    width: 18px;

    height: 18px;

    flex: 0 0 18px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #6d4aff;

}


.modal-notificacao-tipo-icon svg {

    width: 16px;

    height: 16px;

    display: block;

}


/* =========================================================
   TÍTULO
   ========================================================= */

.modal-notificacao-titulo {

    color: #4b5563;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.3;

}


/* =========================================================
   PRÉVIA
   ========================================================= */

.modal-notificacao-preview {

    color: #6b7280;

    font-size: 12px;

    line-height: 1.35;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    word-break: break-word;

}


/* =========================================================
   BOTÃO FECHAR
   ========================================================= */

.modal-notificacao-fechar {

    position: absolute;

    top: 8px;

    right: 8px;

    width: 28px;

    height: 28px;

    padding: 0;

    border: 0;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;

    color: #9ca3af;

    cursor: pointer;

    transition:
        background-color 160ms ease,
        color 160ms ease;

}


.modal-notificacao-fechar:hover {

    background: #f3f4f6;

    color: #374151;

}


.modal-notificacao-fechar:active {

    background: #e5e7eb;

}


.modal-notificacao-fechar:focus-visible {

    outline: 2px solid #6d4aff;

    outline-offset: 2px;

}


.modal-notificacao-fechar svg {

    width: 16px;

    height: 16px;

    display: block;

}


/* =========================================================
   NOTIFICAÇÃO CLICÁVEL
   ========================================================= */

.modal-notificacao.tem-acao {

    cursor: pointer;

}


.modal-notificacao.tem-acao
.modal-notificacao-conteudo {

    transition:
        box-shadow 160ms ease,
        transform 160ms ease;

}


.modal-notificacao.tem-acao:hover
.modal-notificacao-conteudo {

    box-shadow:
        0 16px 36px rgba(
            15,
            23,
            42,
            0.17
        ),
        0 4px 10px rgba(
            15,
            23,
            42,
            0.07
        );

}


.modal-notificacao.tem-acao:active
.modal-notificacao-conteudo {

    transform: scale(0.99);

}


/* =========================================================
   BARRA DE PROGRESSO DA NOTIFICAÇÃO
   =========================================================

   A barra representa visualmente o tempo restante
   antes do fechamento automático da notificação.

   O JavaScript controla a duração da transição
   utilizando o mesmo tempo configurado para
   exibição da notificação.
   ========================================================= */

.modal-notificacao-progresso {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    width: 100%;

    height: 3px;

    overflow: hidden;

    background: rgba(
        109,
        74,
        255,
        0.10
    );

    border-radius: 0 0 14px 14px;

    pointer-events: none;

}


/* =========================================================
   BARRA INTERNA
   ========================================================= */

.modal-notificacao-progresso-barra {

    width: 100%;

    height: 100%;

    background: #6d4aff;

    transform-origin: left center;

    transition:
        width 6500ms linear;

}


/* =========================================================
   RESPONSIVIDADE — CELULAR
   ========================================================= */

@media (max-width: 600px) {

    #modal-notificacao-container {

        top: 66px;

        width: calc(100% - 20px);

    }


    .modal-notificacao-conteudo {

        min-height: 64px;

        gap: 10px;

        padding:
            10px
            38px
            10px
            10px;

        border-radius: 12px;

    }


    .modal-notificacao-avatar-wrapper,
    .modal-notificacao-avatar,
    .modal-notificacao-avatar-iniciais {

        width: 40px;

        height: 40px;

    }


    .modal-notificacao-nome {

        font-size: 13px;

    }


    .modal-notificacao-titulo {

        font-size: 11px;

    }


    .modal-notificacao-preview {

        font-size: 11px;

        -webkit-line-clamp: 2;

    }


    .modal-notificacao-fechar {

        top: 7px;

        right: 7px;

        width: 26px;

        height: 26px;

    }


    .modal-notificacao-fechar svg {

        width: 15px;

        height: 15px;

    }


    .modal-notificacao-progresso {

        height: 3px;

        border-radius: 0 0 12px 12px;

    }

}


/* =========================================================
   TELAS MUITO PEQUENAS
   ========================================================= */

@media (max-width: 360px) {

    #modal-notificacao-container {

        width: calc(100% - 14px);

        top: 62px;

    }


    .modal-notificacao-conteudo {

        gap: 8px;

        padding-right: 36px;

    }


    .modal-notificacao-avatar-wrapper,
    .modal-notificacao-avatar,
    .modal-notificacao-avatar-iniciais {

        width: 36px;

        height: 36px;

    }


    .modal-notificacao-avatar.sem-imagem,
    .modal-notificacao-avatar-iniciais {

        font-size: 12px;

    }


}


/* =========================================================
   ACESSIBILIDADE — REDUÇÃO DE MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .modal-notificacao {

        transition: none;

        transform: none;

        opacity: 0;

    }


    .modal-notificacao.visivel {

        opacity: 1;

        transform: none;

    }


    .modal-notificacao.saindo {

        opacity: 0;

        transform: none;

    }


    .modal-notificacao-conteudo,
    .modal-notificacao-fechar {

        transition: none;

    }


    .modal-notificacao-progresso-barra {

        transition: none;

    }

}