:root {
    --bg-page: #0d1418;
    --bg-app: #111b21;
    --bg-header: #202c33;
    --bg-chat: #0b141a;
    --bg-card: #1f2c34;
    --bg-input: #2a3942;
    --text: #e9edef;
    --text-muted: #8696a0;
    --primary: #00a884;
    --danger: #ea868f;
    --info: #53bdeb;
    --warning: #e0a800;
    --border: #2a3942;

    /* Cor do ícone que diferencia mensagem, demanda e tarefa na conversa */
    --cor-mensagem: #8696a0;
    --cor-demanda: #f0a830;
    --cor-tarefa: #53bdeb;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    background-color: var(--bg-page);
    color: var(--text);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Celular: ocupa a tela inteira (100dvh desconta as barras do navegador) e respeita entalhe/barra de gestos */
.mobile-container {
    width: 100%;
    max-width: 480px;
    height: 100vh;
    height: 100dvh;
    background-color: var(--bg-app);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Tablet em pé: aparência de cartão centralizado */
@media (min-width: 481px) and (max-width: 899px) {
    .mobile-container {
        height: 94vh;
        height: 94dvh;
        border-radius: 24px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    }
}

/* Evita zoom automático do iOS ao tocar em campos (exige fonte >= 16px) */
@media (max-width: 899px) and (pointer: coarse) {
    input, select, textarea { font-size: 16px; }
}

/* ---------- Cabeçalho ---------- */

.app-header {
    background-color: var(--bg-header);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.app-header h3 { flex: 1; }

.btn-notificacoes {
    position: relative;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: transparent;
    font-size: 1.1rem;
    cursor: pointer;
}

.btn-notificacoes:hover { background-color: var(--bg-input); }

.btn-notificacoes .contador {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background-color: var(--danger);
    color: #000;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px;
}

.filtros-conversa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background-color: var(--bg-app);
    border-bottom: 1px solid var(--border);
}

.filtro {
    border: 1px solid var(--border);
    background-color: transparent;
    color: var(--text-muted);
    border-radius: 999px;
    padding: 4px 10px;
    min-height: 32px;
    font-size: 0.75rem;
    cursor: pointer;
}

.filtro.ativo {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.filtro .qtd { font-weight: 700; margin-left: 4px; }

/* Filtros de origem começam numa nova linha, abaixo dos filtros de tipo */
.filtros-separador { flex-basis: 100%; height: 0; }

.filtro-origem.ativo {
    background-color: var(--info);
    border-color: var(--info);
    color: #000;
}

.filtro-pendentes {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
}

.filtro-pendentes input { accent-color: var(--primary); width: 16px; height: 16px; }

.ponto {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.ponto + .ponto { margin-left: -3px; }
.ponto.mensagem { background-color: var(--cor-mensagem); }
.ponto.demanda { background-color: var(--cor-demanda); }
.ponto.tarefa { background-color: var(--cor-tarefa); }
.filtro.ativo .ponto { box-shadow: 0 0 0 1px #fff; }

.badge.tipo { background-color: #33454f; margin-right: 4px; }

.usuario-atual {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

select,
input,
textarea {
    background-color: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.85rem;
}

select:focus,
input:focus,
textarea:focus {
    outline: 2px solid var(--primary);
    outline-offset: 0;
}

/* ---------- Telas ---------- */

.view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.view[hidden] { display: none; }

.view-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
    background-color: var(--bg-app);
    border-bottom: 1px solid var(--border);
}

.view-toolbar select { flex: 1; }
.view-toolbar .btn-action { margin-top: 0; }

.toolbar-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.chat-viewport {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background-color: var(--bg-chat);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.empty-state {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    margin-top: 24px;
}

/* ---------- Conversas ---------- */

.chat-bubble {
    max-width: 85%;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.9rem;
    background-color: var(--bg-card);
    align-self: flex-start;
    border-top-left-radius: 2px;
}

.chat-bubble.propria {
    align-self: flex-end;
    background-color: #005c4b;
    border-top-left-radius: 12px;
    border-top-right-radius: 2px;
}

.chat-bubble .remetente {
    display: block;
    color: var(--primary);
    font-size: 0.75rem;
    margin-bottom: 4px;
}

.chat-bubble p {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Rodapé do balão: [ícone colorido + status] ... [hora] [⋯] */
.bubble-rodape {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    min-height: 24px;
}

.chat-bubble .hora {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.7rem;
    white-space: nowrap;
}

.chat-bubble.propria .hora { color: #b3d9d0; }

.indicador {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: default;
}

.indicador.mensagem { color: var(--cor-mensagem); }
.indicador.demanda { color: var(--cor-demanda); }
.indicador.tarefa { color: var(--cor-tarefa); }
.chat-bubble.propria .indicador.mensagem { color: #b3d9d0; }

.btn-menu-mensagem {
    flex: none;
    width: 28px;
    height: 24px;
    margin-right: -4px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.chat-bubble.propria .btn-menu-mensagem { color: #b3d9d0; }
.btn-menu-mensagem:hover,
.btn-menu-mensagem[aria-expanded="true"] { background-color: rgba(255, 255, 255, 0.1); color: var(--text); }

/* Marcas de leitura: ✓ enviada · ✓✓ entregue · ✓✓ azul lida; ▶ azul = mídia reproduzida */
.recibo,
.recibo-reproducao {
    font-size: 0.75rem;
    font-weight: 700;
    color: #b3d9d0;
    letter-spacing: -3px;
    padding-right: 3px;
    cursor: default;
}

.recibo-reproducao { letter-spacing: 0; font-size: 0.65rem; }
.recibo.lida,
.recibo-reproducao.lida { color: var(--info); }

.chat-bubble.apagada { opacity: 0.85; }

.texto-apagada {
    font-style: italic;
    color: var(--text-muted);
}

.chat-bubble.propria .texto-apagada { color: #b3d9d0; }
.texto-apagada small { font-style: normal; font-size: 0.75rem; }

/* Anexos dentro do balão */
.anexo-imagem {
    display: block;
    padding: 0;
    margin-bottom: 6px;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
    cursor: zoom-in;
}

.anexo-imagem img {
    display: block;
    max-width: 100%;
    max-height: 280px;
    object-fit: cover;
}

.anexo-midia {
    display: block;
    width: 100%;
    max-width: 320px;
    margin-bottom: 6px;
    border-radius: 8px;
}

video.anexo-midia { max-height: 280px; background-color: #000; }
audio.anexo-midia { min-width: 220px; }

.anexo-arquivo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    padding: 10px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--text);
    text-decoration: none;
}

.anexo-arquivo:hover { background-color: rgba(0, 0, 0, 0.3); }
.anexo-icone { font-size: 1.6rem; }
.anexo-info { display: flex; flex-direction: column; min-width: 0; }
.anexo-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.anexo-info small { color: var(--text-muted); font-size: 0.7rem; }

/* Composer com botão de anexar e prévia do anexo */
.btn-anexar {
    flex: none;
    width: 44px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 1.2rem;
    cursor: pointer;
}

.btn-anexar:hover,
.btn-anexar[aria-expanded="true"] { background-color: var(--bg-input); }
.btn-anexar:disabled { opacity: 0.4; cursor: not-allowed; }

.preview-anexo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background-color: var(--bg-app);
    border-top: 1px solid var(--border);
}

.preview-anexo img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
}

.preview-icone { font-size: 1.8rem; width: 48px; text-align: center; }
.preview-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.preview-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.preview-info small { color: var(--text-muted); font-size: 0.72rem; }

/* Câmera e visualizador de imagem */
.camera-area {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background-color: #000;
    aspect-ratio: 4 / 3;
}

.camera-area video,
.camera-area img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.visualizador-dialog {
    margin: auto;
    max-width: min(92vw, 900px);
    max-height: 92vh;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background-color: var(--bg-header);
    color: var(--text);
}

.visualizador-dialog::backdrop { background-color: rgba(0, 0, 0, 0.85); }

.visualizador-dialog img {
    display: block;
    max-width: 100%;
    max-height: calc(92vh - 90px);
    margin: 0 auto;
    object-fit: contain;
}

.visualizador-dialog a.btn-action { text-decoration: none; display: inline-flex; align-items: center; }

.menu-acoes {
    position: absolute;
    z-index: 20;
    min-width: 200px;
    padding: 6px 0;
    border-radius: 10px;
    background-color: var(--bg-header);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.menu-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    min-height: 40px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.menu-item:hover,
.menu-item:focus-visible { background-color: var(--bg-input); outline: none; }
.menu-item.perigo { color: var(--danger); }

.bubble-destino {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--info);
    margin-bottom: 4px;
}

.chat-bubble.privada {
    background-color: #2b2540;
    border: 1px dashed #8b7fd1;
}

.chat-bubble.propria.privada { background-color: #2f2a4a; }
.chat-bubble.privada .bubble-destino { color: #b9aef0; }

.chat-bubble.para-mim {
    box-shadow: inset 3px 0 0 var(--info);
}

.sugestoes-mencao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background-color: var(--bg-app);
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.sugestao {
    background-color: var(--bg-input);
    color: var(--text);
    border: none;
    border-radius: 999px;
    padding: 6px 12px;
    min-height: 32px;
    font-size: 0.75rem;
    cursor: pointer;
}

.sugestao:hover { background-color: #33454f; }

.btn-icone {
    flex: none;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background-color: var(--bg-input);
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
}

.btn-icone:hover { background-color: #33454f; }

.form-papeis {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
}

.form-papel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text);
    font-size: 0.85rem;
}

.form-papel select { min-width: 140px; }
.papel-fixo { color: var(--text-muted); font-size: 0.8rem; padding: 8px 10px; }

.form-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 0.85rem;
    min-height: 32px;
}

.form-checkbox input { width: 18px; height: 18px; accent-color: var(--primary); }

.bubble-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.composer {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--bg-header);
}

.composer input { flex: 1; min-height: 44px; }
.composer .btn-action { margin-top: 0; }

/* ---------- Botões ---------- */

.btn-action {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    margin-top: 8px;
    min-height: 44px;
}

.btn-action:disabled { opacity: 0.6; cursor: wait; }

.btn-primary { background-color: var(--primary); color: #fff; }
.btn-danger { background-color: var(--danger); color: #000; }
.btn-secondary { background-color: var(--bg-input); color: var(--text); }

/* ---------- Demandas ---------- */

.secao-titulo {
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 4px;
}

.card {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 12px;
    font-size: 0.85rem;
    border-left: 4px solid var(--primary);
}

.card.emergencial { border-left-color: var(--danger); }
.card.cancelado,
.card.declinado { border-left-color: var(--text-muted); opacity: 0.75; }

.card-title { font-weight: 600; margin-bottom: 6px; }
.card-meta { color: var(--text-muted); font-size: 0.75rem; margin-top: 4px; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background-color: var(--bg-input);
    color: var(--text);
}

.badge.planejado { background-color: #005c4b; }
.badge.em_execucao { background-color: #7a5c00; }
.badge.executado { background-color: var(--primary); color: #000; }
.badge.cancelado,
.badge.declinado { background-color: #5c2a30; }

/* ---------- Agenda (FullCalendar) ---------- */

.calendario-wrapper {
    flex: 1;
    min-height: 0;
    padding: 8px;
    background-color: var(--bg-chat);
}

#calendario {
    height: 100%;
    font-size: 0.75rem;

    --fc-border-color: var(--border);
    --fc-page-bg-color: var(--bg-chat);
    --fc-neutral-bg-color: var(--bg-card);
    --fc-list-event-hover-bg-color: var(--bg-card);
    --fc-today-bg-color: rgba(0, 168, 132, 0.12);
    --fc-now-indicator-color: var(--danger);
    --fc-button-bg-color: var(--bg-input);
    --fc-button-border-color: var(--bg-input);
    --fc-button-text-color: var(--text);
    --fc-button-hover-bg-color: #33454f;
    --fc-button-hover-border-color: #33454f;
    --fc-button-active-bg-color: var(--primary);
    --fc-button-active-border-color: var(--primary);
    --fc-event-text-color: #fff;
}

#calendario .fc-toolbar-title { font-size: 0.95rem; }
#calendario .fc-toolbar.fc-header-toolbar { margin-bottom: 8px; }
#calendario .fc-toolbar.fc-footer-toolbar { margin-top: 8px; }
#calendario .fc-button { padding: 6px 10px; font-size: 0.75rem; text-transform: capitalize; }
#calendario .fc-col-header-cell-cushion,
#calendario .fc-daygrid-day-number { color: var(--text); text-decoration: none; }
#calendario .fc-event { cursor: pointer; }

/* ---------- Diálogo de formulário ---------- */

.form-dialog {
    margin: auto;
    width: calc(100% - 32px);
    max-width: 420px;
    border: none;
    border-radius: 16px;
    padding: 16px;
    background-color: var(--bg-header);
    color: var(--text);
}

.form-dialog::backdrop { background-color: rgba(0, 0, 0, 0.6); }

.form-dialog h4 { margin-bottom: 12px; }

.form-campos {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.form-campo textarea { min-height: 72px; resize: vertical; }

.form-info {
    font-size: 0.85rem;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

.dialog-acoes {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* ---------- Notificações ---------- */

.toast {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 72px;
    padding: 12px 14px;
    border-radius: 10px;
    background-color: var(--primary);
    color: #fff;
    font-size: 0.85rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.toast.erro { background-color: var(--danger); color: #000; }

.form-erro {
    background-color: rgba(234, 134, 143, 0.15);
    border: 1px solid var(--danger);
    color: var(--danger);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.85rem;
}

.form-dialog .toast {
    position: static;
    margin-top: 12px;
    box-shadow: none;
}

/* ---------- Navegação ---------- */

.bottom-nav {
    height: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background-color: var(--bg-header);
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.nav-item {
    flex: 1;
    height: 100%;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.nav-item.active { color: var(--primary); }
.nav-icone { font-size: 1.15rem; line-height: 1; }

/* Nome da empresa do usuário: só aparece na barra lateral do computador */
.empresa-atual { display: none; }

.admin-empresa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    font-size: 0.8rem;
    color: var(--text);
    padding: 4px 0;
}

.admin-empresa em { color: var(--warning); font-style: normal; }
.admin-empresa .link-acesso { padding: 4px 0; font-size: 0.78rem; }

/* ---------- Conta do usuário (cabeçalho) ---------- */

.btn-perfil {
    flex: none;
    border: none;
    background: transparent;
    border-radius: 50%;
    padding: 2px;
    cursor: pointer;
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.btn-perfil:hover .avatar,
.btn-perfil[aria-expanded="true"] .avatar { box-shadow: 0 0 0 2px var(--text); }

#buscaUsuarios, #buscaEmpresas { flex: 1; min-width: 0; }

/* ---------- Telas de acesso (login, criar senha) ---------- */

.pagina-acesso {
    padding: 24px 16px;
    padding-top: calc(24px + env(safe-area-inset-top));
}

.cartao-acesso {
    width: 100%;
    max-width: 400px;
    padding: 28px 24px;
    border-radius: 16px;
    background-color: var(--bg-app);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.marca { text-align: center; }
.marca img { display: block; margin: 0 auto; } /* o ícone já tem os cantos arredondados */
.marca h1 { font-size: 1.5rem; margin-top: 8px; }
.marca p { color: var(--text-muted); font-size: 0.85rem; margin-top: 4px; }

.painel-acesso {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.painel-acesso h2 { font-size: 1.1rem; }
.painel-acesso input { min-height: 44px; font-size: 16px; }

.texto-acesso { color: var(--text-muted); font-size: 0.875rem; line-height: 1.45; }
.dica-senha { color: var(--text-muted); font-size: 0.75rem; margin-top: -6px; }

.mostrar-senha {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
}

.mostrar-senha input { min-height: 0; width: 16px; height: 16px; accent-color: var(--primary); }

.btn-bloco { width: 100%; margin-top: 4px; font-size: 0.95rem; }

.link-acesso {
    align-self: center;
    border: none;
    background: none;
    color: var(--info);
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 8px;
}

.alerta-acesso {
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.85rem;
    line-height: 1.4;
    border: 1px solid var(--danger);
    background-color: rgba(234, 134, 143, 0.12);
    color: var(--danger);
}

.alerta-acesso.sucesso { border-color: var(--primary); background-color: rgba(0, 168, 132, 0.12); color: var(--primary); }
.alerta-acesso.aviso { border-color: var(--warning); background-color: rgba(224, 168, 0, 0.12); color: var(--warning); }

/* ---------- Computador: tela inteira, navegação na lateral ---------- */

@media (min-width: 900px) {
    body { align-items: stretch; }

    .app-container {
        max-width: 1440px;
        height: 100vh;
        height: 100dvh;
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        border-left: 1px solid var(--border);
        border-right: 1px solid var(--border);
    }

    .app-container > .app-header { grid-column: 2; grid-row: 1; }
    .app-container > .view { grid-column: 2; grid-row: 2; }

    .app-container > .bottom-nav {
        grid-column: 1;
        grid-row: 1 / span 2;
        height: auto;
        padding: 16px 12px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 4px;
        border-right: 1px solid var(--border);
    }

    /* Logo "BA" + nome no topo da barra lateral */
    .app-container > .bottom-nav::before {
        content: "BusinessApp";
        display: flex;
        align-items: center;
        min-height: 36px;
        margin: 4px 12px 16px;
        padding-left: 46px;
        background: url("../icones/icone.svg") no-repeat left center / 36px 36px;
        font-weight: 700;
        font-size: 1.15rem;
        color: var(--text);
    }

    .nav-item {
        flex: none;
        height: 44px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 0 12px;
        border-radius: 8px;
        font-size: 0.9rem;
    }

    .nav-item:hover { background-color: var(--bg-input); color: var(--text); }
    .nav-item.active { background-color: rgba(0, 168, 132, 0.15); }

    .chat-viewport { padding: 20px 32px; }
    .chat-bubble { max-width: min(65%, 640px); }
    .view-toolbar, .filtros-conversa { padding-left: 32px; padding-right: 32px; }
    .composer { padding: 10px 32px; }

    .empresa-atual {
        display: block;
        margin: -10px 12px 14px 58px;
        font-size: 0.78rem;
        color: var(--text-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #listaDemandas, #listaTarefas, #listaUsuarios, #listaEmpresas {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        align-content: start;
    }

    #listaDemandas .secao-titulo, #listaTarefas .secao-titulo { grid-column: 1 / -1; }

    .toast { left: auto; right: 32px; bottom: 24px; max-width: 420px; }
    .form-dialog { max-width: 480px; }
}