/* Cafe WhatsApp Oficial — Estilos */

:root {
    --cafe-gold: #C9922A;
    --cafe-dark: #0D0B09;
    --whats-green: #25d366;
    --whats-dark: #075e54;
    --msg-sent: #dcf8c6;
    --msg-received: #ffffff;
    --bg-chat: #e5ddd5;
}

/* Reset */
* { box-sizing: border-box; }

/* Inputs config */
.cfg-input {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s;
}
.cfg-input:focus {
    border-color: var(--cafe-gold);
}
textarea.cfg-input {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Conversas lista */
.conv-item { transition: background 0.15s; }
.conv-item.active {
    background-color: #f0fdf4;
    border-left: 3px solid var(--whats-green);
}

/* Message bubbles */
.msg-bubble {
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    max-width: 100%;
    word-wrap: break-word;
}
.msg-bubble.sent {
    background: var(--msg-sent);
    border-bottom-right-radius: 2px;
}
.msg-bubble.received {
    background: var(--msg-received);
    border-bottom-left-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Chat bg pattern */
#messagesContainer {
    background-color: var(--bg-chat);
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 10px,
        rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 20px
    );
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #888; }

/* Toast animation */
#toast {
    animation: slideIn 0.25s ease;
}
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Message input */
#messageInput {
    min-height: 36px;
    max-height: 120px;
}

/* Responsivo */
@media (max-width: 768px) {
    .msg-bubble { max-width: 85%; }

    /* Nav: compactar botões */
    .nav-btn { padding: 0.25rem 0.5rem; font-size: 0.7rem; }
    .nav-btn i { margin-right: 0 !important; }
    .nav-btn .btn-label { display: none; }

    /* Chat: sidebar full-width, chat hidden por padrão */
    #page-chat > .flex { flex-direction: column; }
    #page-chat .w-80 { width: 100%; max-height: none; height: 100%; }
    #page-chat .flex-1.flex.flex-col.bg-gray-50 { display: none; }

    /* Quando conversa selecionada: sidebar esconde, chat aparece */
    #page-chat.chat-active .w-80 { display: none; }
    #page-chat.chat-active .flex-1.flex.flex-col.bg-gray-50 { display: flex; height: 100%; }

    /* Chat header: botão voltar no mobile */
    #btnVoltar { display: inline-block !important; }

    /* Chat header compacto no mobile */
    #chatArea > .bg-white.border-b { flex-wrap: wrap; gap: 0.25rem; padding: 0.5rem; }
    #chatNome { font-size: 0.8rem; }
    #chatNumero { display: none; }
    #chatStatusBadge { font-size: 0.6rem; }
    #btnAssumir, #btnDevolver { font-size: 0.65rem; padding: 0.2rem 0.5rem; }

    /* Config: sidebar full-width */
    #page-config > .flex { flex-direction: column; }
    #page-config .w-72 { width: 100%; max-height: 35vh; }

    /* Dashboard cards: 2 cols mobile */
    .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }

    /* Usuarios: scroll horizontal */
    #page-usuarios table { font-size: 0.75rem; }
}