/* Estilos próprios do Web Corretor (complementam o Bootstrap 5.3). */
:root { --wc-brand: #0d6efd; }
body { min-height: 100vh; }
.navbar-brand { letter-spacing: .3px; }
.card { border: 0; box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* ----------------------------- Chat ----------------------------- */
.chat-wrap { overflow: hidden; }
.chat-side { display: flex; flex-direction: column; }
.chat-contatos { overflow-y: auto; max-height: clamp(340px, 62vh, 720px); }
.chat-results { position: relative; max-height: 50vh; overflow-y: auto; }
.chat-contato.active { background: var(--bs-primary-bg-subtle, #e7f1ff); }
.chat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 2px; }
.chat-dot.on { background: #198754; }
.chat-dot.off { background: #adb5bd; }
.chat-main { position: relative; }
/* Frame de mensagens com altura própria que rola sozinho; o compositor vem
   logo abaixo em fluxo normal -> sempre visível (qualquer zoom/navegador). */
.chat-empty { display: flex; align-items: center; justify-content: center; min-height: clamp(300px, 56vh, 640px); }
.chat-head { background: #fff; }
.chat-mensagens { height: clamp(300px, 56vh, 640px); overflow-y: auto; padding: 1rem; background: #f5f6f8; }
.chat-row { display: flex; margin-bottom: .35rem; }
.chat-row.chat-mine { justify-content: flex-end; }
.chat-bubble { max-width: 78%; padding: .4rem .6rem; border-radius: .75rem; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.08); position: relative; }
.chat-mine .chat-bubble { background: #d9fdd3; }
.chat-text { white-space: pre-wrap; word-wrap: break-word; }
.chat-cap { white-space: pre-wrap; word-wrap: break-word; margin-top: .25rem; }
.chat-img { max-width: 240px; max-height: 240px; border-radius: .5rem; display: block; }
.chat-file { display: inline-block; font-weight: 500; text-decoration: none; }
.chat-meta { display: block; text-align: right; font-size: .7rem; color: #667; margin-top: .15rem; }
.chat-tick-read { color: #34b7f1; }
.chat-datesep { text-align: center; margin: .5rem 0; font-size: .72rem; color: #667; }
.chat-compose { background: #fff; position: relative; }
.chat-compose textarea { resize: none; max-height: 120px; }
.chat-status { min-height: 1rem; }
/* Ações por mensagem (editar/apagar) + estado apagada + edição inline */
.chat-acts { margin-top: .15rem; font-size: .68rem; line-height: 1; }
.chat-act { color: #8a8a8a; text-decoration: none; }
.chat-act:hover { color: var(--bs-primary, #0d6efd); text-decoration: underline; }
.chat-apagada { font-style: italic; color: #888; }
.chat-edit-area { width: 100%; }
.chat-edit-bar { margin-top: .25rem; font-size: .72rem; }
/* Seletor de emojis */
.chat-emoji-panel { position: absolute; bottom: calc(100% + 6px); left: 6px; width: 300px; max-height: 220px;
  overflow-y: auto; background: #fff; border: 1px solid #dee2e6; border-radius: .5rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.15); padding: .35rem; display: flex; flex-wrap: wrap; gap: 2px; z-index: 20; }
.chat-emoji { border: 0; background: transparent; font-size: 1.25rem; line-height: 1; padding: .12rem .25rem; border-radius: .35rem; cursor: pointer; }
.chat-emoji:hover { background: #f0f0f0; }