/* -----------------------------------------------------------------------
   Design tokens (aegis-design/tokens/tokens.json)
   Semânticos com valores Light por padrão, sobrescritos em modo escuro via
   prefers-color-scheme. Primitivos não usados diretamente aqui: só os
   semânticos, pra manter a troca de tema automática.
----------------------------------------------------------------------- */
:root {
    --background-primary: #fdfdfd;
    --background-secondary: #f1f1f4;
    --background-tertiary: #d9dbe1;
    --background-skeleton: #f1f1f4;
    --background-brand: #1c7296;
    --background-brand-light: #def1fb;
    --background-brand-hover: #175974;

    --border-primary: #72778d;
    --border-secondary: #d9dbe1;
    --border-brand: #1c7296;
    --border-focus: #1c7296;

    --content-primary: #131417;
    --content-secondary: #393c47;
    --content-tertiary: #5f6376;
    --content-disable: #72778d;
    --content-brand: #1c7296;
    --content-on-brand: #fdfdfd;

    --background-alert-danger: #fde9eb;
    --background-alert-warning: #fef7e7;
    --background-alert-success: #e8f9f2;
    --background-alert-information: #def1fb;

    --border-alert-danger: #e61e32;
    --border-alert-warning: #f9ab10;
    --border-alert-success: #15be78;
    --border-alert-information: #1c7296;

    --content-alert-danger: #8a121e;
    --content-alert-warning: #95670a;
    --content-alert-success: #0d7248;
    --content-alert-information: #13475d;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-primary: #0e0e10;
        --background-secondary: #17181b;
        --background-tertiary: #2e2f35;
        --background-skeleton: #17181b;
        --background-brand: #208cb8;
        --background-brand-light: #06131a;
        --background-brand-hover: #42b4e3;

        --border-primary: #898ea0;
        --border-secondary: #2e2f35;
        --border-brand: #208cb8;
        --border-focus: #208cb8;

        --content-primary: #ebecef;
        --content-secondary: #c4c7d0;
        --content-tertiary: #9da1b0;
        --content-disable: #9da1b0;
        --content-brand: #208cb8;
        --content-on-brand: #fdfdfd;

        --background-alert-danger: #1e0b0d;
        --background-alert-warning: #1a150a;
        --background-alert-success: #0b1913;
        --background-alert-information: #06131a;

        --border-alert-danger: #e42538;
        --border-alert-warning: #f6c25a;
        --border-alert-success: #25e495;
        --border-alert-information: #208cb8;

        --content-alert-danger: #f28892;
        --content-alert-warning: #fad68f;
        --content-alert-success: #8cf2c8;
        --content-alert-information: #42b4e3;
    }
}

body {
    background-color: var(--background-primary);
    color: var(--content-primary);
}

/* -----------------------------------------------------------------------
   Responsivo: abaixo de 576px o .card-group do Bootstrap já empilha os
   cards (flex-direction: column). Aqui a gente controla qual painel fica
   visível por vez — Contatos ou Mensagens — igual ao WhatsApp Web mobile.
   "Dados do Contato" fica escondido nesse modo (não cabem 3 painéis).
----------------------------------------------------------------------- */
.mensagens-voltar-btn {
    display: none;
    color: var(--content-brand);
    font-size: 1.1em;
}

@media (max-width: 575.98px) {
    .card {
        height: calc(100vh - 60px);
    }

    .contato-info-container {
        display: none !important;
    }

    .mensagem-container {
        display: none;
    }

    .card-group.mostrar-mensagens .contato-container {
        display: none;
    }

    .card-group.mostrar-mensagens .mensagem-container {
        display: flex;
    }

    .card-group.mostrar-mensagens .mensagens-voltar-btn {
        display: inline-block;
    }
}

.fixed-top {
	z-index: 999 !important;
}

.bg-dark-blue {
	background-color: var(--background-brand) !important;
}

.container-fluid {
    padding-top: 60px;
}

.card {
    height: calc(100vh - 65px);
    background-color: var(--background-secondary);
    border-color: var(--border-secondary);
    color: var(--content-primary);
}

.card-header {
    background-color: var(--background-secondary);
    border-color: var(--border-secondary);
    color: var(--content-secondary);
}

.card-footer {
    background-color: var(--background-secondary);
    border-color: var(--border-secondary);
}

.contato-container .card-body {
    overflow-y: auto;
}

.contato-search-container {
    background-color: var(--background-secondary);
}

.contato-search-container #contato-search {
    border-radius: 20px;
    background-color: var(--background-primary);
    border-color: var(--border-secondary);
    color: var(--content-primary);
    font-size: 0.9em;
}

.contato-search-container #contato-search:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 0.2rem var(--background-brand-light);
}

.contato-item:hover {
    background-color: var(--background-tertiary);
}

.contato-item.contato-ativo {
    background-color: var(--background-tertiary);
}

.contato-info-container .card-body {
    overflow-y: auto;
}

.contato-container .nova-mensagem {
    background-color: var(--background-alert-warning);
}

.contato-item {
    border-bottom: 1px solid var(--border-secondary);
    cursor: pointer;
    font-size: 0.9em;
    padding: 10px 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.contato-item:last-child {
    border-bottom: none;
}

.pic {
    background-image: url('/assets/images/profile_placeholder.png');
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    background-size: 30px;
    border-radius: 20px;
}

.contato-item .contato-nome {
    float: left;
    font-weight: bold;
    text-align: left;
    color: var(--content-primary);
}

.contato-item .contato-mensagem-data {
    color: var(--content-tertiary);
    font-size: 0.7em;
    text-align: right;
    float: left;
}

.contato-item .contato-mensagem {
    width: 100%;
    color: var(--content-secondary);
    font-style: italic;
    font-size: 12px;
}

.contato-item .contato-mensagem-nao-lida {
    font-size: 1.0em;
}

.mensagem-container .card-body {
    overflow-y: auto;
}

#mensagem {
    resize: none;
    max-height: 100px;
    background-color: var(--background-primary);
    border-color: var(--border-secondary);
    color: var(--content-primary);
}

#mensagem:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 0.2rem var(--background-brand-light);
}

.bubble {
    width: 60%;
    margin: 5px 0;
    border-radius: 15px;
    color: var(--content-primary);
    padding: 8px 10px 6px 10px;
    position: relative;
    font-size: 0.8em;
}

.bubble-msg-me {
    background: var(--background-brand-light);
    float: right;
    text-align: left;
    padding-right: 15px;
}
.bubble-msg-me:before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 15px solid var(--background-brand-light);
    border-right: 15px solid transparent;
    border-top: 15px solid var(--background-brand-light);
    border-bottom: 15px solid transparent;
    right: -16px;
    top: 0px;
}

.bubble-msg-other {
    background: var(--background-tertiary);
    float: left;
    text-align: left;
    padding-left: 15px;
}
.bubble-msg-other:before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 15px solid transparent;
    border-right: 15px solid var(--background-tertiary);
    border-top: 15px solid var(--background-tertiary);
    border-bottom: 15px solid transparent;
    left: -16px;
    top: 0px;
}

.bubble .name {
    font-weight: 800;
    font-size: 0.9em;
    margin: 0;
}

.bubble-msg-me .name {
    color: var(--content-brand);
}

.bubble .message {
    font-size: 0.9em;
    margin: 3px 0 0 0;
}

.bubble .date {
    font-weight: 400;
    font-size: 0.8em;
    margin:0;
    color: var(--content-tertiary);
    text-align: right;
}

#btnEnviarMsg {
    background-color: var(--background-brand);
    border-color: var(--background-brand);
    color: var(--content-on-brand);
}

#btnEnviarMsg:hover,
#btnEnviarMsg:focus {
    background-color: var(--background-brand-hover);
    border-color: var(--background-brand-hover);
}

.contato-mensagem-nao-lida .badge-success {
    background-color: var(--background-brand);
    color: var(--content-on-brand);
}