/* public/style.css - VERSÃO 4.0 (Escrevendo... e Responder) */

/* --- Variáveis de Cores e Estilos Globais --- */
:root {
    --primary-bg: #f0f2f5;
    --secondary-bg: #ffffff;
    --accent-color: #008069;
    --icon-color: #54656f;
    --text-primary: #111b21;
    --text-secondary: #667781;
    --border-color: #e9edef;
    --message-out-bg: #d9fdd3;
    --message-in-bg: #ffffff;
    --background-chat: #e5ddd5;
}

/* --- Estrutura Base e Reset --- */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background-color: var(--primary-bg);
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-primary);
}

/* --- Container de Autenticação --- */
#auth-container {
    background: var(--secondary-bg);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    width: 380px;
}
.view { display: flex; flex-direction: column; width: 100%; }
#auth-container h2 { text-align: center; color: var(--text-primary); margin: 0 0 20px 0; }
#auth-container form { display: flex; flex-direction: column; gap: 10px; }
#auth-container label { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: -5px; }
#auth-container input { padding: 10px; border: 1px solid var(--border-color); border-radius: 5px; font-size: 1rem; }
#auth-container button { margin-top: 10px; padding: 12px; background-color: var(--accent-color); color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; font-weight: bold; transition: background-color 0.3s; }
#auth-container button:hover { background-color: #006a58; }
.message { margin-top: 15px; text-align: center; min-height: 20px; font-size: 0.9rem; }
.message.success { color: green; }
.message.error { color: red; }
.form-link { text-align: center; margin-top: 20px; font-size: 0.9rem; color: #00a884; text-decoration: none; }
.form-link:hover { text-decoration: underline; }

/* --- ESTRUTURA PRINCIPAL DO CHAT --- */
.hidden { display: none !important; }
#chat-container { display: flex; width: 100%; height: 100%; }
#contacts-container { flex: 0 1 380px; display: flex; flex-direction: column; background-color: var(--secondary-bg); border-right: 1px solid var(--border-color); }
#chat-window { flex: 1; display: flex; flex-direction: column; background-color: var(--background-chat); overflow: hidden; }
#contacts-container header, #chat-header { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background-color: var(--primary-bg); min-height: 60px; }
#contacts-list { flex-grow: 1; overflow-y: auto; }
#messages-container { flex-grow: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
#message-form-container { flex-shrink: 0; background-color: var(--primary-bg); }

/* --- Componentes do Chat --- */
.header-controls { display: flex; align-items: center; gap: 10px; }
.header-controls button { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--icon-color); border-radius: 50%; padding: 8px; }
.header-controls button:hover { background-color: rgba(0,0,0,0.05); }
#logout-btn { font-size: 0.9rem; color: var(--text-secondary); }
.contact { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; cursor: pointer; border-bottom: 1px solid var(--border-color); transition: background-color 0.2s; }
.contact:hover, .contact.active { background-color: var(--primary-bg); }
.unread-badge { background-color: #25d366; color: white; font-size: 0.75rem; font-weight: bold; border-radius: 50%; min-width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; padding: 0 4px; }
#chat-window { background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png'); background-repeat: repeat; }

/* Bolhas de Mensagem */
.message-bubble { padding: 6px 10px; border-radius: 8px; max-width: 70%; word-wrap: break-word; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,0.05); }
.message-bubble.sent { background-color: var(--message-out-bg); align-self: flex-end; cursor: pointer; }
.message-bubble.received { background-color: var(--message-in-bg); align-self: flex-start; }
.message-bubble .content { font-size: 0.95rem; }
.message-bubble .timestamp { font-size: 0.7rem; color: var(--text-secondary); text-align: right; margin-top: 5px; display: flex; justify-content: flex-end; align-items: center; }
/* NOVO: Estilo para limitar o tamanho das imagens nas mensagens */
/* Estilo para limitar o tamanho das imagens nas mensagens */
.message-bubble .content img {
    display: block;
    /* A imagem tenta ocupar 100% do espaço da bolha... */
    width: 100%; 
    height: auto; /* ...mantendo a proporção correta */

    /* ...MAS é limitada por estes valores máximos. */
    max-width: 350px;
    max-height: 450px;

    /* Garante que a imagem preencha este espaço de forma elegante, cortando o excesso em vez de distorcer */
    object-fit: cover; 
    
    border-radius: 8px;
    cursor: pointer;
    background-color: #e9edef;
}
.status-ticks { font-size: 0.9rem; margin-left: 5px; line-height: 1; }
.status-ticks.enviada::after { content: '✓'; color: var(--text-secondary); }
.status-ticks.recebida::after { content: '✓✓'; color: var(--text-secondary); }
.status-ticks.lida::after { content: '✓✓'; color: #53bdeb; }
.message-bubble .content.deleted, .message-bubble .edited-label { color: var(--text-secondary); font-style: italic; font-size: 0.8rem; }

/* Formulário de Envio de Mensagem */
#message-form-container { padding: 8px 16px; }
#message-form { display: flex; align-items: center; gap: 8px; }
#message-form button { background: none; border: none; color: var(--icon-color); cursor: pointer; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s; padding: 0; }
#message-form button:hover { background-color: rgba(0,0,0,0.05); }
#send-btn, #mic-btn { background-color: var(--accent-color); color: white; }
#send-btn:hover, #mic-btn:hover { background-color: #006a58; }
#mic-btn.recording { background-color: #e63946; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
#input-wrapper { flex: 1; background-color: var(--secondary-bg); border-radius: 20px; display: flex; align-items: center; padding: 0 15px; }
#message-input { flex: 1; border: none; outline: none; padding: 10px 0; background: transparent; font-size: 1rem; }
.message-bubble .content audio { width: 280px; max-width: 100%; display: block; }

/* --- NOVOS ESTILOS (V4) --- */

/* Estilo para o cabeçalho do chat e indicador "a escrever..." */
#chat-header > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#active-chat-username { margin: 0; font-size: 1.1rem; }
#typing-indicator {
    margin: 0;
    font-size: 0.8rem;
    color: var(--accent-color);
    font-weight: 500;
    height: 16px; /* Evita que o layout "salte" quando o texto aparece/desaparece */
    line-height: 16px;
}

/* Estilo para a pré-visualização da resposta (acima do input) */
#reply-preview-container {
    background-color: #f0f2f5; /* Mesmo fundo do rodapé */
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Estica os itens para a mesma altura */
}
#reply-preview-content {
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Adiciona "..." se o texto for muito longo */
    border-left: 3px solid var(--accent-color);
    padding: 4px 0 4px 12px;
}
#close-reply-preview {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--icon-color);
    padding: 0 8px;
}

/* Estilo para o bloco de resposta dentro da bolha de mensagem */
.reply-context {
    background-color: rgba(0,0,0,0.05);
    border-radius: 6px;
    padding: 6px 10px;
    margin: -2px -6px 8px -6px; /* Ajuste para encaixar melhor na bolha */
    border-left: 3px solid var(--accent-color);
    cursor: pointer; /* Sugere que é clicável (para futura funcionalidade de "ir para mensagem") */
}
.message-bubble.sent .reply-context {
    background-color: rgba(0, 92, 75, 0.1);
    border-left-color: #0b7f63;
}
.reply-context p { margin: 0; }
.reply-sender {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--accent-color);
    margin-bottom: 2px;
}
.message-bubble.sent .reply-sender { color: #0b7f63; }
.reply-content {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Media Query para Responsividade --- */
@media (max-width: 768px) {
    #auth-container {
        width: 100%;
        height: 100%;
        border-radius: 0;
        justify-content: center;
    }

    #chat-container {
        flex-direction: column;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    /* O container de contatos terá uma altura fixa, sem crescer */
    #contacts-container {
        flex-shrink: 0; /* Impede que o container encolha */
        width: 100%;
        height: 220px; /* Uma altura fixa para a lista de contatos */
        overflow-y: auto; /* Adiciona scroll se houver muitos contatos */
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    /* A janela de chat irá ocupar TODO o espaço restante */
    #chat-window {
        flex-grow: 1; /* Esta é a chave: faz a janela crescer e preencher o espaço */
        width: 100%;
        min-height: 0; /* Truque de Flexbox para garantir que o layout não quebre */
    }
}
/* Estilo para o indicador de carregamento de histórico */
#history-loader {
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: var(--accent-color);
    animation: spin 1s ease infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* Estilo para o botão de Chamar Atenção (Nudge) */
.chat-header-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

#nudge-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease;
}

#nudge-btn:hover {
    transform: scale(1.2);
}

#nudge-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Animação de Tremor */
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* Classe que aplica a animação */
.shake {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}