/**
 * Material UI Vanilla - Messages Component
 * Implementa estilos para o sistema de mensagens no estilo Material Design
 */

/* Container principal das mensagens */
.mui-messages-container {
    position: fixed;
    top: calc(var(--appbar-height) + 16px);
    right: 16px;
    max-width: 90%;
    width: 400px;
    max-height: calc(100vh - var(--appbar-height) - 32px);
    overflow-y: auto;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none; /* Permite cliques em elementos abaixo */
    transition: margin var(--transition-speed, 0.3s);
}

/* Em desktop com o drawer aberto, ajusta a posi����o */
@media (min-width: 992px) {
    .mui-drawer-open .mui-messages-container {
        margin-right: 16px;
    }
}

/* Estilo para WebKit (Chrome, Safari, Edge moderno) */
.mui-messages-container::-webkit-scrollbar {
    width: 6px;
}

.mui-messages-container::-webkit-scrollbar-track {
    background: transparent;
}

.mui-messages-container::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

[data-theme="dark"] .mui-messages-container::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Estilo para Firefox */
.mui-messages-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

[data-theme="dark"] .mui-messages-container {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* Elemento individual de mensagem */
.mui-message {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: var(--border-radius, 4px);
    background-color: var(--surface-color, #ffffff);
    box-shadow: var(--shadow-2, 0 4px 8px rgba(0, 0, 0, 0.2));
    margin-bottom: 8px;
    pointer-events: auto; /* Restaura a interatividade */
    transform-origin: top right;
    animation: mui-message-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ��cone da mensagem */
.mui-message-icon {
    margin-right: 12px;
    font-size: 24px;
}

/* Conte��do da mensagem */
.mui-message-content {
    flex: 1;
    min-width: 0; /* Para permitir text-overflow funcionar */
}

/* T��tulo da mensagem (opcional) */
.mui-message-title {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 2px;
}

/* Texto da mensagem */
.mui-message-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color, rgba(0, 0, 0, 0.87));
    word-break: break-word;
}

/* Bot��o de fechar */
.mui-message-close {
    background: none;
    border: none;
    color: var(--text-secondary, rgba(0, 0, 0, 0.6));
    cursor: pointer;
    padding: 4px;
    margin-left: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 24px;
    font-size: 18px;
    transition: background-color 0.2s;
}

.mui-message-close:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .mui-message-close:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Varia����es de tipo/cor */
.mui-message-info {
    border-left: 4px solid #2196F3;
}

.mui-message-info .mui-message-icon {
    color: #2196F3;
}

.mui-message-success {
    border-left: 4px solid #4CAF50;
}

.mui-message-success .mui-message-icon {
    color: #4CAF50;
}

.mui-message-warning {
    border-left: 4px solid #FFC107;
}

.mui-message-warning .mui-message-icon {
    color: #FFC107;
}

.mui-message-error {
    border-left: 4px solid var(--error-color, #B00020);
}

.mui-message-error .mui-message-icon {
    color: var(--error-color, #B00020);
}

/* Anima����es */
@keyframes mui-message-in {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Classes para anima����o de entrada/sa��da */
.mui-message-entering {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
}

.mui-message-exiting {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
    transition: opacity 0.3s, transform 0.3s;
}

/* Ajustes para mensagens em modo escuro */
[data-theme="dark"] .mui-message {
    background-color: var(--surface-color, #2a3a47);
}

[data-theme="dark"] .mui-message-text {
    color: var(--text-color, rgba(255, 255, 255, 0.87));
}

/* Compatibilidade com mensagens do PrimeFaces */
#msg-conteiner[data-mui-processed="true"],
#rich-msg[data-mui-processed="true"],
.ui-messages[data-mui-processed="true"],
.ui-messages-error[data-mui-processed="true"],
.ui-messages-warn[data-mui-processed="true"],
.ui-messages-info[data-mui-processed="true"],
.ui-messages-success[data-mui-processed="true"] {
    display: none !important; /* Oculta mensagens originais ap��s processamento */
}

/* Seletor adicional para ajudar a ocultar mensagens */
[data-mui-processed="true"] {
    display: none !important;
}

/* Op����o para manter vis��veis as mensagens originais */
.mui-keep-original-messages [data-mui-processed="true"] {
    display: block !important; /* Mant��m mensagens originais vis��veis se a classe for aplicada */
}

/* Responsividade */
@media (max-width: 600px) {
    .mui-messages-container {
        width: calc(100% - 32px);
        top: calc(var(--appbar-height) + 8px);
        right: 16px;
        left: 16px;
        max-width: 100%;
    }
    
    .mui-message {
        padding: 10px 12px;
    }
    
    .mui-message-icon {
        font-size: 20px;
    }
}

/* Estilo para mensagens em pilha (quando h�� muitas) */
.mui-messages-container.mui-messages-stacked .mui-message {
    margin-bottom: 4px;
}

/* Estilos para mensagens com a����es (bot��es adicionais) */
.mui-message-actions {
    display: flex;
    margin-top: 8px;
    gap: 8px;
}

.mui-message-action-button {
    background: none;
    border: none;
    color: var(--primary-color, #f10b5c);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: var(--border-radius, 4px);
    cursor: pointer;
    transition: background-color 0.2s;
}

.mui-message-action-button:hover {
    background-color: rgba(241, 11, 92, 0.04);
}

[data-theme="dark"] .mui-message-action-button:hover {
    background-color: rgba(255, 76, 134, 0.08);
}

/* Mensagens "toast" mais compactas (opcional) */
.mui-toast {
    padding: 10px 16px;
    border-radius: 24px;
    background-color: rgba(50, 50, 50, 0.9);
    color: white;
    border-left: none;
    min-width: auto;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.mui-toast .mui-message-text {
    color: white;
}

.mui-toast .mui-message-icon,
.mui-toast .mui-message-close {
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .mui-toast {
    background-color: rgba(80, 80, 80, 0.9);
}

/* Estilo alternativo: mensagens com bordas superiores */
.mui-message-top-border {
    border-left: none;
    border-top: 4px solid transparent;
}

.mui-message-top-border.mui-message-info {
    border-top-color: #2196F3;
}

.mui-message-top-border.mui-message-success {
    border-top-color: #4CAF50;
}

.mui-message-top-border.mui-message-warning {
    border-top-color: #FFC107;
}

.mui-message-top-border.mui-message-error {
    border-top-color: var(--error-color, #B00020);
}