:root {
  --wine-dark: #6f2b2e;
  --wine: #8a3a34;
  --beige: #f8f2ec;
  --white: #ffffff;
  --gold: #b68a55;
  --ink: #241517;
  --muted: #7c6b69;
  --line: rgba(111, 43, 46, 0.14);
  --soft: rgba(255, 255, 255, 0.74);
  --shadow: 0 18px 48px rgba(66, 24, 22, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 0;
  /* Alguns navegadores (principalmente Chrome/Safari mobile) reajustam
     automaticamente o tamanho do texto quando acham que a página "não
     couberia" na largura da tela, inflando fontes de forma desproporcional
     ao resto da interface (ícones/avatares continuam no tamanho normal).
     Trava esse comportamento em 100% — o zoom real do usuário (Ctrl +/-,
     escala do Windows) continua funcionando normalmente. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 0;
  color: var(--ink);
  font-family: "Inter", Arial, sans-serif;
  background:
    radial-gradient(circle at 86% 6%, rgba(182, 138, 85, 0.18), transparent 26%),
    linear-gradient(135deg, var(--beige), #fffaf5 56%, #ffffff);
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

img,
svg {
  flex-shrink: 0;
}

.app-shell {
  /* "height" (não "min-height"): min-height não conta como altura definida
     pela especificação quando o conteúdo poderia ultrapassá-la — é
     exatamente essa indefinição que impedia .content-wrap/.main-content/
     .screen de resolverem "height: 100%" corretamente mais abaixo na cadeia,
     fazendo a tela de Conversas (com centenas de conversas reais) vazar uma
     altura gigante pra fora do grid interno e criar scroll na página
     inteira. Com "height" fixo aqui, overflow continua "visible" (padrão) e
     conteúdo mais alto que a viewport em qualquer outra tela ainda
     transborda e rola a página normalmente — só passa a existir uma altura
     de referência definida para quem precisar (ver .whatsapp-layout). dvh
     (quando suportado) evita contar a barra de endereço do navegador mobile
     como espaço disponível; vh cobre os navegadores mais antigos. */
  height: 100vh;
  height: 100dvh;
  display: flex;
}

/* Sidebar */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  /* 280px (antes 260px) — a margem extra é o que faz "Administrativo /
     Locação" caber numa linha só sem cortar (ver .nav-link abaixo). Qualquer
     mudança aqui precisa acompanhar .content-wrap (width/margin-left) e o
     breakpoint mobile de sidebar recolhida, que replicam este valor. */
  width: 280px;
  min-width: 280px;
  padding: 24px 14px 18px;
  color: var(--white);
  background:
    radial-gradient(circle at 40% 0%, rgba(182, 138, 85, 0.18), transparent 30%),
    linear-gradient(180deg, #4b1518 0%, #2f0d0f 100%);
  box-shadow: 18px 0 48px rgba(61, 18, 18, 0.22);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Sem overflow-x explícito, o navegador trata este eixo como "auto" (regra
     do CSS Overflow: quando só overflow-y é diferente de "visible", o outro
     eixo herda esse mesmo comportamento) — qualquer overflow horizontal
     mínimo (ex: item "Administrativo / Locação") já criava uma barra de
     rolagem no rodapé do menu. */
  overflow-x: hidden;
  scrollbar-width: thin;
}

.brand-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 8px 8px 0;
  margin-bottom: 28px;
  border: 0;
  box-shadow: none;
}

.brand-panel img {
  display: block;
  width: 115px;
  height: auto;
  object-fit: contain;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.brand-panel strong,
.sidebar-user strong {
  display: block;
  font-size: 0.94rem;
  line-height: 1.2;
}

.brand-panel span,
.sidebar-user span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.76rem;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-link,
.submenu button {
  width: 100%;
  min-height: 42px;
  border: 0;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  border-radius: 8px;
  text-align: left;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.nav-link {
  display: flex;
  align-items: center;
  /* 8px (antes 10px) — reduz o espaço ícone-texto e texto-chevron, somando
     com a largura extra do .sidebar para caber "Administrativo / Locação"
     numa linha só sem cortar. */
  gap: 8px;
  padding: 10px 10px;
  font-weight: 700;
  font-size: 0.88rem;
}

.nav-link svg {
  width: 19px;
  height: 19px;
}

.nav-link span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.active,
.nav-group.open > .nav-link {
  color: var(--white);
  background: rgba(255, 255, 255, 0.13);
}

.nav-link.active,
.submenu button.active {
  box-shadow: inset 3px 0 0 var(--gold);
}

.chevron {
  margin-left: auto;
  transition: transform 160ms ease;
}

.nav-group.open .chevron {
  transform: rotate(180deg);
}

.submenu {
  display: none;
  padding: 2px 0 8px 31px;
}

.nav-group.open .submenu {
  display: block;
}

.submenu button {
  position: relative;
  display: block;
  padding: 8px 10px 8px 18px;
  font-size: 0.81rem;
}

.submenu button::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.submenu button:hover,
.submenu button.active {
  background: rgba(255, 255, 255, 0.11);
  color: var(--white);
}

.sidebar-user {
  margin-top: auto;
  padding: 16px 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  grid-template-columns: 40px 1fr 16px;
  gap: 10px;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--wine-dark);
  background: var(--white);
  font-size: 0.78rem;
  font-weight: 800;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-overlay {
  display: none;
}

/* Header e conteudo */
.content-wrap {
  width: calc(100% - 280px);
  min-width: 0;
  margin-left: 280px;
  /* Coluna (topbar + main-content) em vez de bloco simples: dá ao
     main-content uma altura própria e definida (flex:1 abaixo), que é o que
     permite a tela de Conversas preencher exatamente o espaço restante sem
     precisar de um valor "mágico" tipo calc(100vh - 150px) — que dependia de
     estimar a altura do topbar, e ficava 1-2px errado sempre que o conteúdo
     dele (título mais longo, quebra de linha) empurrava a altura real um
     pouco além do min-height declarado, sobrando esse tico de conteúdo como
     scroll indevido na página inteira. Como overflow aqui continua "visible"
     (nada muda nesse ponto), telas com conteúdo mais alto que a viewport
     (tabelas longas, etc.) continuam simplesmente transbordando e rolando a
     página normalmente — só a tela de Conversas passa a ter uma altura
     exata quando o conteúdo cabe. */
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 28px;
  background: rgba(255, 250, 245, 0.86);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.86rem;
}

.topbar h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.45rem, 2vw, 1.92rem);
  letter-spacing: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.hamburger,
.ghost-button,
.primary-button,
.light-button {
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

/* Mesma especificidade do [hidden] nativo do navegador — sem isto, o
   display:inline-flex acima vence a cascata e o atributo hidden é ignorado
   nesses elementos. */
.hamburger[hidden],
.ghost-button[hidden],
.primary-button[hidden],
.light-button[hidden],
.chat-conductor-bar[hidden],
.interagir-button[hidden],
.devolver-button[hidden],
.insight-imovel-form[hidden],
.insight-comment-form[hidden],
.login-form[hidden] {
  display: none;
}

.hamburger {
  display: none;
  width: 42px;
  height: 42px;
  color: var(--white);
  background: var(--wine-dark);
}

.ghost-button {
  width: 42px;
  height: 42px;
  color: var(--wine-dark);
  background: transparent;
}

.primary-button {
  min-height: 42px;
  padding: 0 16px;
  color: var(--white);
  background: linear-gradient(135deg, var(--wine-dark), #551719);
  box-shadow: 0 10px 20px rgba(111, 43, 46, 0.18);
  font-weight: 800;
}

.light-button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--wine-dark);
  background: var(--white);
  border: 1px solid var(--line);
  font-weight: 700;
}

.date-card,
.profile-card {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.date-card {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.date-card strong,
.profile-card strong {
  font-size: 0.87rem;
}

.date-card span,
.profile-card span {
  color: var(--muted);
  font-size: 0.74rem;
}

.profile-card img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.main-content {
  width: 100%;
  min-width: 0;
  padding: 28px;
  flex: 1;
  /* Sem isso, um item flex mantém como piso automático a altura do próprio
     conteúdo (ver "min-height: auto" em itens flex) — que é exatamente o
     que quebrava a altura de .whatsapp-layout abaixo: como a lista de
     conversas (.chat-items) não tinha altura nenhuma travando-a de cima,
     ela virava do tamanho de TODOS os itens empilhados, e essa altura
     gigante "vazava" de volta pra cima (screen → main-content → content-wrap
     → body), sumindo com a rolagem interna e criando uma barra de rolagem
     enorme na página inteira. Com min-height: 0, main-content fica travado
     na altura calculada pelo flex (viewport menos topbar) de verdade —
     conteúdo mais alto que isso (tabelas longas, por exemplo) continua
     simplesmente transbordando por baixo e rolando a página normalmente,
     porque overflow aqui segue "visible" (nada mudou nesse ponto). */
  min-height: 0;
}

.screen {
  display: none;
  width: 100%;
  min-width: 0;
}

.screen.active {
  display: block;
}

/* Único caso hoje que precisa de altura exata (100% do main-content
   restante) em vez de altura natural pelo conteúdo — ver .whatsapp-layout,
   que usa essa altura para preencher o espaço e deixar a rolagem só por
   conta dos painéis internos (lista de conversas, mensagens, painel
   lateral). Tem que ser "height" (não "min-height"): min-height sozinho não
   estabelece uma altura definida para fins de resolução de porcentagem dos
   filhos — só "height" faz isso, o que é exatamente por que a versão
   anterior desta regra (com min-height) não funcionava. No mobile (ver media
   query abaixo) volta a ser altura natural, com a própria página rolando —
   layout empilhado ali de propósito. */
.screen[data-screen="conversas"] {
  height: 100%;
}

/* Cards e paineis */
.metric-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
}

.metric-grid.eight {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.metric-grid.four {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.metric-card,
.panel,
.template-card,
.add-card,
.alert {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  box-shadow: var(--shadow);
}

.metric-card {
  position: relative;
  min-height: 126px;
  padding: 20px 58px 18px 18px;
  overflow: hidden;
}

.metric-card span {
  display: block;
  color: #574347;
  font-size: 0.86rem;
}

.metric-card strong {
  display: block;
  margin-top: 10px;
  font-size: 1.72rem;
  color: #1e1718;
}

.metric-card small,
.muted {
  color: var(--muted);
}

.metric-card svg.metric-card-icon {
  position: absolute;
  top: 22px;
  right: 18px;
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 50%;
  color: var(--wine);
  background: rgba(182, 138, 85, 0.16);
}

.dashboard-grid,
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.panel {
  min-width: 0;
  padding: 20px;
}

.panel.wide {
  grid-column: span 1;
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.panel h2,
.insight-panel h2 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.panel p,
.panel-header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.status-list {
  display: grid;
  gap: 12px;
}

.agent-status-card {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 8px;
  color: var(--white);
  background: linear-gradient(135deg, #16834f, #0f6f62);
}

.agent-status-card strong {
  font-size: 1rem;
}

.agent-status-card span {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.86rem;
}

.status-list div,
.activity-list div,
.skill-list div,
.toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
}

.status-list svg,
.activity-list svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
  color: #16834f;
  background: rgba(22, 131, 79, 0.12);
}

.status-list span,
.activity-list span {
  flex: 1;
  min-width: 0;
}

.status-list strong {
  color: #16834f;
  font-size: 0.84rem;
}

.conversation-list span,
.activity-list span {
  color: #4f4244;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-list em,
.activity-list em {
  color: var(--muted);
  font-style: normal;
  text-align: right;
  font-size: 0.82rem;
}

.attention-list span {
  display: grid;
  gap: 3px;
  white-space: normal;
}

.attention-list span b {
  color: #2f2426;
  font-size: 0.9rem;
}

.attention-list span small {
  color: var(--muted);
  line-height: 1.35;
}

.dashboard-chat-preview {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Dashboard: cards clicáveis, tendência, sparkline e estado vazio */
.metric-card.clickable {
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.metric-card.clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(66, 24, 22, 0.14);
}

.metric-card-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 700;
}

.metric-card-trend.up {
  color: #16834f;
}

.metric-card-trend.down {
  color: #9d1f2c;
}

.metric-card-trend.flat {
  color: var(--muted);
}

.metric-card-trend svg {
  position: static;
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
}

.metric-card-empty-hint {
  display: block;
  margin-top: 8px;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.4;
}

.metric-card-sparkline {
  position: absolute;
  top: 76px;
  right: 14px;
  width: 56px;
  height: 22px;
  opacity: 0.85;
  color: var(--gold);
}

.metric-card-footer {
  margin-top: 10px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--wine);
}

/* Status do Agente: terceiro estado (erro), além de "Configurado"/"Conectado" */
.status-list div.status-error {
  background: rgba(214, 52, 69, 0.1);
}

.status-list div.status-error svg {
  color: #9d1f2c;
  background: rgba(214, 52, 69, 0.16);
}

.status-list div.status-error strong {
  color: #9d1f2c;
}

.status-list .status-detail {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
}

.status-list div.status-error .status-detail {
  color: #9d1f2c;
}

/* Conversas */
.whatsapp-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 300px;
  /* minmax(0, 1fr) na única linha do grid trava a altura dela na altura do
     próprio container, em vez do "auto" implícito (que cresce pra caber o
     conteúdo). Sem isso, com a lista de conversas real (centenas/milhares de
     itens), .chat-list crescia pra caber TODOS os itens empilhados e essa
     altura gigante "vazava" pra fora do grid, do main-content, do body — a
     causa raiz do scroll indevido na página inteira (não era só a estimativa
     de altura do topbar). Com a linha travada, cada coluna (.chat-list,
     .chat-window, .insight-panel) fica com a altura exata do grid, e cada
     uma rola por conta própria via sua própria overflow-y interna. */
  grid-template-rows: minmax(0, 1fr);
  /* column-gap fica zerado de propósito (ver .chat-window/.insight-panel
     abaixo, que usam margin-left em vez de gap) — com um "gap" único de grid,
     a coluna do painel some (largura 0) mas o gap entre ela e a coluna do
     meio continua sendo renderizado, deixando uma faixa vazia residual. Com
     margin-left por elemento dá pra zerar os dois ao mesmo tempo. */
  gap: 18px 0;
  height: 100%;
  min-height: 560px;
  overflow: hidden;
  transition: grid-template-columns 0.2s ease;
}

/* Painel fechado: binário, não um estado "colapsado fino" com ícone sobrando
   — a coluna zera de largura e o painel some por completo (margem/borda/
   padding também zerados logo abaixo), a área de mensagens ocupa o resto. */
.whatsapp-layout.insight-hidden {
  grid-template-columns: 300px minmax(0, 1fr) 0px;
}

.chat-list,
.chat-window,
.insight-panel {
  /* Item de grid: sem isso, o navegador usa o conteúdo interno como largura
     mínima ("min-width: auto" implícito de grid item) e a coluna não encolhe
     de verdade para o valor definido em grid-template-columns quando algum
     conteúdo interno for mais largo que isso. */
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.insight-panel {
  margin-left: 18px;
  transition: margin-left 0.2s ease, opacity 0.15s ease, border-color 0.2s ease;
}

.whatsapp-layout.insight-hidden .insight-panel {
  margin-left: 0;
  padding: 0;
  border-width: 0;
  opacity: 0;
  pointer-events: none;
}

.chat-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px;
}

.search-box {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: var(--muted);
  background: var(--beige);
  border-radius: 8px;
}

.chat-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  overflow-x: auto;
}

.chat-tab {
  flex: 0 0 auto;
  border: 0;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  background: rgba(111, 43, 46, 0.06);
}

.chat-tab.active {
  color: var(--white);
  background: var(--wine);
}

.chat-mine-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.chat-list-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.chat-list-toolbar .search-box {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.chat-list-toolbar #chatFilterButton {
  height: 42px;
}

.chat-filter-dropdown,
#chatFilterDropdown {
  width: 280px;
  right: 0;
  left: auto;
}

.chat-filter-dropdown label {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 6px 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.chat-filter-dropdown select {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
}

/* Checkbox de "Só não lidas": um único controle, sem justify-content
   nenhum empurrando o texto pra longe do checkbox (a distância visível
   antes vinha do checkbox virando uma caixa gigante — ver override do
   <input> logo abaixo, não de espaçamento do flex). */
.chat-filter-dropdown label.filter-checkbox {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

/* A regra genérica "input, textarea, select { width: 100%; padding: 12px;
   border: 1px solid ... }" (pensada pra campos de texto/formulário) também
   valia pro <input type="checkbox">, esticando-o pra ocupar a largura toda
   do label — por isso ele parecia "colado à esquerda" com o texto lá na
   ponta direita (o vão enorme no meio ERA o próprio checkbox inflado, não
   um espaçamento do flex). Aqui ele volta a ter o tamanho/aparência normal
   de um checkbox nativo. */
.chat-filter-dropdown label.filter-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: revert;
  background: revert;
  accent-color: var(--wine-dark);
}

.chat-filter-dropdown .filter-date-range {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-filter-dropdown .filter-date-range input {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font-size: 0.78rem;
}

.chat-filter-dropdown .filter-date-range span {
  font-size: 0.76rem;
  color: var(--muted);
  flex-shrink: 0;
}

.chat-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.chat-filters button {
  border: 1px solid rgba(111, 43, 46, 0.12);
  border-radius: 999px;
  padding: 7px 10px;
  color: #574347;
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.74rem;
  font-weight: 800;
}

.chat-filters button.active {
  color: var(--white);
  border-color: var(--wine);
  background: var(--wine);
}

.chat-items {
  min-height: 0;
  overflow-y: auto;
}

.chat-item {
  width: 100%;
  border: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  text-align: left;
  border-radius: 8px;
  background: transparent;
}

.chat-item.active,
.chat-item:hover {
  background: rgba(111, 43, 46, 0.08);
}

.chat-item-avatar {
  position: relative;
  flex: 0 0 auto;
}

.unread-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--wine);
  border: 2px solid var(--white);
}

.chat-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-item-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.chat-item-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.chat-item.unread .chat-item-row strong {
  font-weight: 900;
  color: var(--wine-dark);
}

.chat-item-row em {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
}

.chat-item-preview {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.82rem;
}

.chat-item.unread .chat-item-preview {
  color: var(--ink);
  font-weight: 600;
}

/* Linha única de metadados do card (ver buildChatItemHtml): a pill de
   temperatura não encolhe, o texto de status/setor ocupa o espaço restante
   e trunca com reticências (title tem o texto completo), e o avatar de
   responsável (quando houver) fica sempre visível no final. */
.chat-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.chat-item-classificacao {
  flex-shrink: 0;
  min-height: 20px;
  padding: 2px 8px;
  font-size: 0.68rem;
}

.chat-item-meta-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.72rem;
}

.chat-item-responsavel {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.chat-window {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-left: 18px;
}

.chat-header {
  flex: 0 0 auto;
  min-height: 68px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.chat-header span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
}

.chat-header span b {
  color: var(--wine);
}

.chat-header-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chat-avatar-slot:empty {
  display: none;
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.chat-header-actions label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}

.chat-header-actions select {
  min-height: 34px;
  min-width: 150px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
}

/* Pill flutuante acima da caixa de resposta (ver #chatConductorBar):
   indicador de quem está conduzindo a conversa + botão "Interagir"/"Devolver
   para IA". Some por completo assim que o atendente logado assume (ver
   updateConductorBar). margin-bottom fica em 0 de propósito — a caixa de
   resposta logo abaixo (.reply-box) já tem fundo branco sólido e padding
   próprios; uma margem extra aqui só criava uma faixa em branco "morta"
   entre a pill e a caixa, sem nenhum conteúdo dentro dela. */
.chat-conductor-bar {
  flex: 0 0 auto;
  align-self: center;
  margin: -22px auto 0;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 14px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 10px 24px rgba(66, 24, 22, 0.14);
  border: 1px solid var(--line);
}

.chat-conductor-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.status-dot.ia {
  background: var(--gold);
}

.status-dot.human {
  background: #3a7d6b;
}

.interagir-button {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--white);
  background: linear-gradient(135deg, var(--gold), #96703f);
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.interagir-button svg {
  width: 15px;
  height: 15px;
}

.devolver-button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  background: var(--white);
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.devolver-button svg {
  width: 15px;
  height: 15px;
}

.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  /* "safe flex-end" (não só "flex-end"): com poucas mensagens ainda gruda no
     rodapé, junto da caixa de digitar — mas se o conteúdo passar a exceder a
     altura do container, o navegador aplica o alinhamento "seguro" (equivalente
     a flex-start) em vez de simplesmente cortar o excedente sem contar como
     scrollHeight. Testado contra este container: com "flex-end" puro, 60
     mensagens injetadas resultavam em scrollHeight === clientHeight (nenhuma
     rolagem possível, mensagens antigas inacessíveis); com "safe flex-end" o
     scrollHeight passa a refletir o conteúdo real e a rolagem funciona. O
     "iniciar já rolado até o final" continua a cargo do JS (chatMessages.scrollTop
     = chatMessages.scrollHeight em app.js), que funciona com qualquer alinhamento.
     */
  justify-content: safe flex-end;
  gap: 12px;
  background:
    linear-gradient(rgba(248, 242, 236, 0.8), rgba(248, 242, 236, 0.8)),
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(111, 43, 46, 0.03) 14px 16px);
}

.bubble {
  max-width: 72%;
  padding: 12px 14px;
  border-radius: 8px;
  line-height: 1.45;
  font-size: 0.93rem;
  box-shadow: 0 8px 18px rgba(66, 24, 22, 0.06);
}

.bubble.customer {
  align-self: flex-start;
  background: var(--white);
}

.bubble.agent {
  align-self: flex-end;
  color: var(--white);
  background: var(--wine);
}

.bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  align-self: flex-start;
  max-width: 72%;
}

.bubble-row .bubble {
  max-width: 100%;
}

.bubble-avatar {
  flex: 0 0 auto;
}

/* Resumo de conversas que vieram de outro sistema (Plaza) via Apresenta.me —
   não é uma transcrição real, então não usa o layout de bolhas. */
.plaza-summary-card {
  align-self: stretch;
  max-width: 100%;
  padding: 16px 18px;
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 8px 18px rgba(66, 24, 22, 0.06);
}

.plaza-summary-body {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--ink);
}

.plaza-summary-body a {
  color: var(--wine);
}

.reply-box {
  flex: 0 0 auto;
  min-height: 62px;
  margin: 0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  background: var(--white);
}

.reply-box input {
  width: 100%;
  height: 42px;
  border-radius: 999px;
  background: var(--beige);
}

.reply-box button {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--white);
  background: #16834f;
}

.reply-box svg {
  width: 18px;
  height: 18px;
}

.insight-panel {
  position: relative;
  min-height: 0;
  overflow-y: auto;
  padding: 44px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.insight-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--wine);
}

.insight-close-btn svg {
  width: 15px;
  height: 15px;
}

.insight-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.insight-contact-avatar {
  margin-bottom: 6px;
}

.insight-contact-avatar:empty {
  display: none;
}

.insight-contact strong {
  font-size: 1.02rem;
}

.insight-contact span {
  color: var(--muted);
  font-size: 0.82rem;
}

.insight-contact-atendimento {
  font-weight: 700;
  color: var(--wine) !important;
}

.insight-section {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.insight-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.insight-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.insight-section-row .insight-section-title {
  margin: 0;
}

.ia-tag {
  display: inline-block;
  padding: 1px 7px;
  margin-left: 4px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--wine-dark);
  background: rgba(182, 138, 85, 0.24);
  vertical-align: middle;
}

.insight-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--wine-dark);
  background: rgba(111, 43, 46, 0.1);
  vertical-align: middle;
}

.insight-transfer {
  position: relative;
}

.insight-transfer-list {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.insight-transfer-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  text-align: left;
  background: transparent;
  font-weight: 700;
  color: var(--ink);
}

.insight-transfer-item:hover {
  background: rgba(111, 43, 46, 0.08);
}

.insight-transfer-item span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
}

.insight-imovel-value {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink);
}

.insight-imovel-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.insight-imovel-form input {
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
}

.insight-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.insight-collapsible {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.insight-collapsible:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.insight-collapsible-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  background: transparent;
  text-align: left;
}

.insight-collapsible-header .insight-section-title {
  margin: 0;
}

.insight-collapsible-arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--wine);
  transition: transform 0.15s ease;
}

.insight-collapsible.collapsed .insight-collapsible-arrow {
  transform: rotate(-90deg);
}

.insight-collapsible-body {
  margin-top: 12px;
}

.insight-collapsible.collapsed .insight-collapsible-body {
  display: none;
}

.insight-activity-list .timeline {
  margin-top: 2px;
}

.insight-activity-list .timeline div {
  padding-bottom: 16px;
  font-size: 0.82rem;
}

.insight-activity-list .timeline p {
  margin-top: 3px;
  color: #4f4244;
}

.insight-comment-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.insight-comment-form textarea {
  resize: vertical;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--ink);
  background: var(--white);
}

.insight-comment-form .light-button {
  align-self: flex-end;
}

.insight-comment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.insight-comment {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(248, 242, 236, 0.86);
}

.insight-comment-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
  font-size: 0.72rem;
}

.insight-comment-meta strong {
  color: var(--wine);
}

.insight-comment-meta em {
  color: var(--muted);
  font-style: normal;
}

.insight-comment p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #4f4244;
}

.score-ring-caption {
  margin: 0;
  text-align: center;
  color: var(--wine);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.score-gauge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.score-ring {
  width: 96px;
  height: 96px;
  margin: 10px 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--wine-dark);
  font-size: 1.5rem;
  font-weight: 800;
  background: rgba(111, 43, 46, 0.06);
}

.score-ring.is-empty {
  padding: 0 14px;
  text-align: center;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  border: 2px dashed rgba(111, 43, 46, 0.18);
}

.sentiment-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(248, 242, 236, 0.86);
  font-size: 0.8rem;
  font-weight: 700;
  color: #4f4244;
}

.sentiment-indicator span:first-child {
  font-size: 1.1rem;
}

.insight-section-title {
  margin: 0 0 10px;
  color: var(--wine);
  font-size: 0.9rem;
}

.insight-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(248, 242, 236, 0.86);
  font-size: 0.8rem;
  font-weight: 700;
  color: #4f4244;
}

.chip svg {
  width: 14px;
  height: 14px;
  color: var(--wine);
}

.broker-summary,
.next-action {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(111, 43, 46, 0.08);
}

.broker-summary h3 {
  margin: 0 0 6px;
  font-size: 0.9rem;
}

.broker-summary p,
.next-action span {
  margin: 0;
  color: #4f4244;
  font-size: 0.84rem;
  line-height: 1.45;
}

.next-action {
  display: grid;
  gap: 6px;
}

.next-action strong {
  color: var(--wine);
  font-size: 0.86rem;
}

/* Tabelas e componentes */
.table-wrap {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

th,
td {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}

th {
  color: var(--muted);
  font-weight: 800;
  background: rgba(248, 242, 236, 0.72);
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
}

.badge.hot,
.badge.danger {
  color: #9d1f2c;
  background: rgba(214, 52, 69, 0.12);
}

.badge.warm {
  color: #8a4b00;
  background: rgba(182, 138, 85, 0.18);
}

.badge.gold {
  color: #7e5422;
  background: rgba(182, 138, 85, 0.22);
}

.badge.neutral {
  color: #6b5b58;
  background: rgba(111, 43, 46, 0.08);
}

.badge.success {
  color: #16834f;
  background: rgba(22, 131, 79, 0.12);
}

.funnel {
  max-width: 520px;
  margin: 20px auto 0;
  display: grid;
  gap: 6px;
  text-align: center;
  color: var(--white);
  font-weight: 800;
}

.funnel div {
  min-height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border-radius: 8px;
  background: var(--wine);
}

.funnel div:nth-child(1) { width: 100%; background: #8fb8e8; }
.funnel div:nth-child(2) { width: 82%; background: #8dd0b2; }
.funnel div:nth-child(3) { width: 62%; background: #f0c75d; color: #4c3216; }
.funnel div:nth-child(4) { width: 44%; background: #e99861; }
.funnel div:nth-child(5) { width: 28%; background: #dc5c64; }

.alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px 16px;
  color: var(--wine-dark);
  background: rgba(182, 138, 85, 0.14);
  font-weight: 800;
}

label,
.settings-grid label {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.84);
}

textarea {
  min-height: 140px;
  resize: vertical;
}

.users-table {
  min-width: 980px;
}

.user-feedback {
  display: none;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(22, 131, 79, 0.18);
  border-radius: 8px;
  color: #16834f;
  background: rgba(22, 131, 79, 0.08);
  font-size: 0.84rem;
  font-weight: 800;
}

.user-feedback.show {
  display: block;
}

.empty-table {
  color: var(--muted);
  text-align: center;
}

.table-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wine-dark);
  background: rgba(255, 255, 255, 0.72);
}

.icon-button.small {
  width: 32px;
  height: 32px;
}

.icon-button.danger {
  color: #9d1f2c;
}

.icon-button svg {
  width: 17px;
  height: 17px;
}

.icon-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(35, 12, 12, 0.44);
}

.modal-backdrop.show {
  display: flex;
}

.modal-card {
  width: min(680px, 100%);
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf5;
  box-shadow: 0 24px 70px rgba(35, 12, 12, 0.24);
}

.modal-card form {
  padding: 20px;
}

.modal-card > .modal-header,
.modal-card > p,
.modal-card > .alert,
.modal-card > .timeline,
.modal-card > .permission-info-body,
.modal-card > .convite-link-box,
.modal-card > .save-feedback,
.modal-card > .disponibilidade-modal-body,
.modal-card > .modal-actions {
  margin-left: 20px;
  margin-right: 20px;
}

.disponibilidade-modal-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-card > .modal-header {
  margin-top: 20px;
}

.modal-card > .modal-actions {
  margin-bottom: 20px;
}

.modal-card.small {
  width: min(440px, 100%);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.modal-header h2 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}

.modal-header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.modal-grid label {
  margin: 0;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* Simulador IA */
.ai-simulator {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  pointer-events: none;
}

.ai-simulator-window {
  pointer-events: auto;
  display: none;
  width: min(680px, calc(100vw - 48px));
  height: min(640px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid rgba(15, 107, 63, 0.18);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 24px 70px rgba(35, 12, 12, 0.22);
}

.ai-simulator.open .ai-simulator-window {
  display: flex;
  flex-direction: column;
}

.ai-simulator-header {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: var(--white);
  background: linear-gradient(135deg, #075e54, #0f6b3f);
}

.ai-simulator-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.ai-simulator-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #075e54;
  background: var(--white);
}

.ai-simulator-avatar svg {
  width: 21px;
  height: 21px;
}

.ai-simulator-brand strong,
.ai-simulator-brand span {
  display: block;
}

.ai-simulator-brand span {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
}

.ai-simulator-brand span b {
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  display: inline-block;
  background: #36d77d;
  box-shadow: 0 0 0 4px rgba(54, 215, 125, 0.16);
}

.ai-simulator-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-simulator-icon {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
}

.ai-simulator-icon:hover {
  background: rgba(255, 255, 255, 0.2);
}

.ai-simulator-icon svg {
  width: 18px;
  height: 18px;
}

.ai-simulator-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  background: #efe7dd;
}

.ai-simulator-chat {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(7, 94, 84, 0.12);
}

.ai-simulator-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
    linear-gradient(rgba(239, 231, 221, 0.9), rgba(239, 231, 221, 0.9)),
    repeating-linear-gradient(45deg, transparent 0 16px, rgba(7, 94, 84, 0.035) 16px 18px);
}

.ai-simulator-message {
  max-width: 82%;
  padding: 10px 12px;
  border-radius: 8px;
  line-height: 1.42;
  font-size: 0.91rem;
  box-shadow: 0 8px 18px rgba(35, 12, 12, 0.06);
  word-break: break-word;
}

.ai-simulator-message.client {
  align-self: flex-end;
  background: #dcf8c6;
}

.ai-simulator-message.agent {
  align-self: flex-start;
  background: var(--white);
}

.ai-simulator-message.error {
  color: #9d1f2c;
  background: #fff1f2;
}

.ai-simulator-message img {
  display: block;
  max-width: 100%;
  border-radius: 6px;
  margin-bottom: 6px;
}

.ai-typing {
  display: none;
  padding: 0 18px 12px;
  color: #42645d;
  background: #efe7dd;
  font-size: 0.82rem;
  font-weight: 800;
}

.ai-typing.show {
  display: block;
}

.ai-simulator-form {
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: #f7f3ee;
  border-top: 1px solid rgba(7, 94, 84, 0.12);
}

.ai-simulator-form input {
  height: 42px;
  border-radius: 999px;
  background: var(--white);
}

.ai-simulator-message-input {
  align-self: center;
}

.ai-simulator-form button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: #16834f;
}

.ai-simulator-form button:disabled,
.ai-simulator-form input:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.ai-simulator-form svg {
  width: 19px;
  height: 19px;
}

.ai-simulator-insights {
  min-width: 0;
  padding: 16px;
  background: #fffaf5;
  overflow-y: auto;
}

.ai-simulator-insights h2 {
  margin: 0 0 12px;
  color: var(--wine-dark);
  font-size: 0.96rem;
}

.ai-simulator-insights dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.ai-simulator-insights dl div {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(248, 242, 236, 0.72);
}

.ai-simulator-insights dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.ai-simulator-insights dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 800;
}

.ai-simulator-insights .ai-simulator-summary {
  grid-column: 1 / -1;
}

.ai-simulator-insights .ai-simulator-summary dd {
  white-space: pre-line;
  line-height: 1.45;
  font-size: 0.78rem;
  font-weight: 700;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.template-card,
.add-card {
  min-height: 180px;
  padding: 20px;
  text-align: left;
}

.template-card h3 {
  margin: 0 0 12px;
}

.template-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.template-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.template-card-header input {
  flex: 1;
  min-width: 0;
  font-weight: 800;
}

.template-modo-badge {
  flex-shrink: 0;
  white-space: nowrap;
}

.template-modo-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.template-modo-field select {
  width: auto;
  min-height: 36px;
  padding: 0 8px;
  font-size: 0.78rem;
}

.add-card {
  border-style: dashed;
  color: var(--wine-dark);
  background: rgba(255, 255, 255, 0.5);
  font-weight: 800;
}

/* Administrativo / Locação — Painel/Resultados/Desocupações */
.locacao-resultados-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.categoria-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.categoria-bar-row .categoria-bar-label {
  width: 150px;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.categoria-bar-track {
  flex: 1;
  height: 20px;
  border-radius: 6px;
  background: rgba(111, 43, 46, 0.08);
  overflow: hidden;
}

.categoria-bar-fill {
  height: 100%;
  background: var(--wine);
  border-radius: 6px;
}

.categoria-bar-row .categoria-bar-count {
  width: 28px;
  flex-shrink: 0;
  text-align: right;
  font-weight: 800;
  font-size: 0.82rem;
}

.dia-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
}

.dia-count-row:last-child {
  border-bottom: none;
}

.desocupacao-periodo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.desocupacao-periodo input {
  min-height: 34px;
  padding: 0 8px;
}

.ticket-ver-conversa {
  margin: 4px 0 12px;
}

@media (max-width: 980px) {
  .locacao-resultados-grid {
    grid-template-columns: 1fr;
  }
}

/* SLA de retorno do corretor (Leads > Transferidos) */
.sla-corretor-config {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sla-corretor-config label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}

.sla-corretor-config input {
  min-height: 34px;
  padding: 0 8px;
}

/* Calendário de Visitas (Leads > Calendário de Visitas) */
.calendario-visitas-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendario-visitas-grid {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.calendario-visitas-row {
  display: grid;
  grid-template-columns: 64px repeat(7, minmax(120px, 1fr));
  border-bottom: 1px solid var(--line);
}

.calendario-visitas-row:last-child {
  border-bottom: none;
}

.calendario-visitas-header {
  background: var(--soft);
  position: sticky;
  top: 0;
  z-index: 1;
}

.calendario-visitas-hora-col {
  padding: 8px;
  font-size: 0.74rem;
  color: var(--muted);
  text-align: right;
  border-right: 1px solid var(--line);
}

.calendario-visitas-dia-col {
  padding: 10px 8px;
  text-align: center;
  border-right: 1px solid var(--line);
}

.calendario-visitas-dia-col strong {
  display: block;
  text-transform: capitalize;
  font-size: 0.8rem;
}

.calendario-visitas-dia-col span {
  font-size: 0.74rem;
  color: var(--muted);
}

.calendario-visitas-celula {
  min-height: 44px;
  padding: 4px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.calendario-visitas-dia-col.indisponivel,
.calendario-visitas-celula.indisponivel {
  background: repeating-linear-gradient(45deg, rgba(111, 43, 46, 0.04), rgba(111, 43, 46, 0.04) 6px, transparent 6px, transparent 12px);
}

.calendario-visitas-item {
  display: block;
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--wine);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skill-list,
#comportamentoList {
  display: grid;
  gap: 10px;
}

.comportamento-template {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
}

.skill-group-title {
  margin: 14px 0 2px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.skill-group-title:first-child {
  margin-top: 0;
}

.skill-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
}

.skill-card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(111, 43, 46, 0.08);
  color: var(--wine);
}

.skill-card-icon svg {
  width: 20px;
  height: 20px;
}

.skill-card-body {
  min-width: 0;
  flex: 1;
}

.skill-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.skill-card-header strong {
  font-size: 0.92rem;
}

.skill-card-body > p {
  margin: 4px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
}

.skill-card-resumo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(111, 43, 46, 0.06);
  font-size: 0.78rem;
  font-weight: 700;
  color: #574347;
}

.skill-card-resumo .light-button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.76rem;
  flex-shrink: 0;
}

.skill-card-resumo .light-button svg {
  width: 14px;
  height: 14px;
}

.skill-list div,
.toggle-row {
  justify-content: space-between;
}

.switch {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(111, 43, 46, 0.18);
  position: relative;
}

.switch::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  transition: left 160ms ease;
}

.switch.on {
  background: var(--wine);
}

.switch.on::after {
  left: 23px;
}

.numero-card {
  min-height: 0;
  margin-bottom: 16px;
}

.numero-card .panel-header {
  align-items: flex-end;
  margin-bottom: 0;
}

.numero-card .panel-header label {
  margin-top: 0;
}

.numero-ia-fields {
  margin-top: 4px;
}

.numero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.timeline {
  display: grid;
  gap: 0;
}

.timeline div {
  position: relative;
  padding: 0 0 22px 30px;
  border-left: 2px solid rgba(111, 43, 46, 0.16);
}

.timeline div::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
}

.timeline span {
  color: var(--muted);
  font-size: 0.8rem;
}

.timeline strong {
  display: block;
  margin-top: 4px;
}

.timeline p {
  margin-top: 6px;
}

/* Responsivo */
@media (max-width: 1220px) {
  .metric-grid.eight,
  .metric-grid.four {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .whatsapp-layout {
    grid-template-columns: 250px minmax(360px, 1fr) 280px;
  }

  .whatsapp-layout.insight-hidden {
    grid-template-columns: 250px minmax(360px, 1fr) 0px;
  }

  .topbar-actions .date-card {
    display: none;
  }
}

@media (max-width: 980px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 220ms ease;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: block;
    background: rgba(35, 12, 12, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
  }

  .sidebar-overlay.show {
    opacity: 1;
    pointer-events: auto;
  }

  .content-wrap {
    width: 100%;
    margin-left: 0;
  }

  .hamburger {
    display: inline-flex;
  }

  .topbar {
    padding: 16px 18px;
  }

  .profile-card {
    display: none;
  }

  .main-content {
    padding: 20px 18px;
  }

  .dashboard-grid,
  .settings-grid,
  .template-grid,
  .whatsapp-layout {
    grid-template-columns: 1fr;
  }

  /* .whatsapp-layout.insight-hidden (duas classes) tem mais especificidade
     que a regra acima (uma classe) e continuava vencendo aqui mesmo dentro
     deste breakpoint — o empilhamento em coluna única do mobile nunca
     chegava a acontecer enquanto o painel estivesse escondido. */
  .whatsapp-layout.insight-hidden {
    grid-template-columns: 1fr;
  }

  .whatsapp-layout {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .chat-window,
  .insight-panel {
    margin-left: 0;
  }

  /* Empilhado (coluna única), display:none remove a linha inteira da grade —
     diferente do desktop (0 de largura + margem/borda zeradas), aqui isso
     evita uma faixa de row-gap residual acima/abaixo do painel escondido. */
  .whatsapp-layout.insight-hidden .insight-panel {
    display: none;
  }

  .chat-list,
  .insight-panel {
    max-height: none;
  }

  .chat-window {
    min-height: 620px;
  }
}

@media (max-width: 620px) {
  .topbar {
    align-items: flex-start;
  }

  .topbar-actions {
    gap: 8px;
  }

  .ghost-button {
    display: none;
  }

  .primary-button {
    padding: 0 12px;
    font-size: 0.84rem;
  }

  .metric-grid.eight,
  .metric-grid.four {
    grid-template-columns: 1fr;
  }

  .conversation-list em,
  .activity-list em {
    text-align: left;
  }

  .chat-header,
  .panel-header {
    flex-direction: column;
    align-items: stretch;
  }

  .bubble {
    max-width: 92%;
  }

  .template-grid {
    grid-template-columns: 1fr;
  }

  .modal-grid {
    grid-template-columns: 1fr;
  }

  .modal-actions {
    flex-direction: column-reverse;
  }

  .ai-simulator {
    inset: 0;
    z-index: 90;
  }

  .ai-simulator-window {
    width: 100vw;
    height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .ai-simulator-body {
    grid-template-columns: 1fr;
  }

  .ai-simulator-chat {
    border-right: 0;
  }

  .ai-simulator-insights {
    max-height: 174px;
    border-top: 1px solid rgba(7, 94, 84, 0.12);
  }

  .ai-simulator-insights dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-simulator-form {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .ai-simulator-message {
    max-width: 88%;
  }
}

/* Login */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  padding: 36px 32px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  box-shadow: var(--shadow);
  text-align: center;
}

.login-card img {
  width: 120px;
  margin: 0 auto 18px;
  display: block;
}

.login-card h1 {
  margin: 0 0 6px;
  font-size: 1.2rem;
  color: var(--ink);
}

.login-card p {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 0.86rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.login-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
}

.login-form input {
  padding: 13px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
}

/* Campo de senha com o botão de mostrar/ocultar (o olhinho) embutido à
   direita — ver password-toggle.js. */
.password-field {
  position: relative;
}

.password-field input {
  padding-right: 40px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: var(--wine);
}

.password-toggle svg {
  width: 18px;
  height: 18px;
}

.login-error {
  min-height: 18px;
  color: #b3261e;
  font-size: 0.8rem;
}

.login-success {
  min-height: 18px;
  color: #16834f;
  font-size: 0.8rem;
}

.login-card .primary-button {
  width: 100%;
  margin-top: 4px;
}

.login-hint {
  margin-top: 18px;
  font-size: 0.76rem;
  color: var(--muted);
}

.login-hint a {
  color: var(--wine);
  font-weight: 700;
}

.save-feedback {
  display: inline-block;
  margin-left: 12px;
  font-size: 0.82rem;
  color: var(--muted);
  opacity: 0;
  transition: opacity 200ms ease;
}

.save-feedback.show {
  opacity: 1;
  color: var(--wine-dark);
}

.chat-disclaimer {
  padding: 8px 16px 14px;
  font-size: 0.74rem;
}

/* Sidebar colapsável */
.brand-panel {
  position: relative;
}

.sidebar-collapse-btn {
  position: absolute;
  right: 4px;
  top: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.sidebar-collapse-btn svg {
  width: 16px;
  height: 16px;
}

.sidebar,
.content-wrap,
.brand-panel img,
.nav-link span,
.sidebar-user > div:not(.avatar) {
  transition: width 200ms ease, margin-left 200ms ease, opacity 160ms ease, transform 200ms ease;
}

.app-shell.sidebar-collapsed .sidebar {
  width: 72px;
  min-width: 72px;
  /* Volta ao comportamento de antes da correção acima (overflow-x implícito
     como "auto") só neste estado — o submenu flutuante que aparece ao passar
     o mouse sobre um item recolhido usa position:absolute + left:100% de
     propósito para ultrapassar a borda direita da barra; overflow-x:hidden
     aqui cortaria esse submenu. */
  overflow-x: auto;
}

.app-shell.sidebar-collapsed .content-wrap {
  width: calc(100% - 72px);
  margin-left: 72px;
}

.app-shell.sidebar-collapsed .brand-panel img {
  opacity: 0;
  width: 0;
  position: absolute;
}

.app-shell.sidebar-collapsed .sidebar-collapse-btn {
  position: static;
  margin: 0 auto;
}

.app-shell.sidebar-collapsed .brand-panel {
  justify-content: center;
}

.app-shell.sidebar-collapsed .nav-link span,
.app-shell.sidebar-collapsed .chevron,
.app-shell.sidebar-collapsed .sidebar-user > div:not(.avatar),
.app-shell.sidebar-collapsed .sidebar-user > button {
  display: none;
}

.app-shell.sidebar-collapsed .nav-link {
  justify-content: center;
}

.app-shell.sidebar-collapsed .submenu {
  display: none !important;
}

.app-shell.sidebar-collapsed .nav-group {
  position: relative;
}

/* Submenu flutuante do menu recolhido. position:fixed (não absolute) de
   propósito: o próprio .sidebar tem overflow-y:auto, e pela regra do CSS
   Overflow spec (eixo "visible" ao lado de um eixo não-visible vira "auto"
   também), overflow-x nunca fica realmente "visible" nesse container — um
   position:absolute aqui era clipado de verdade mesmo com z-index correto
   (confirmado testando: um elementFromPoint no centro do submenu retornava
   o card por trás dele, não o próprio submenu). position:fixed escapa desse
   clipping porque nenhum ancestral usa transform/filter/will-change (que
   criaria um novo containing block para fixed) — mas exige left/top em
   coordenadas de viewport, calculadas via JS a partir da posição real do
   item na tela (ver app.js) em vez de "left:100%" relativo ao pai. */
.app-shell.sidebar-collapsed .submenu.flyout-open {
  display: block !important;
  position: fixed;
  width: 220px;
  padding: 8px;
  background: linear-gradient(180deg, #4b1518 0%, #2f0d0f 100%);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  z-index: 40;
}

.app-shell.sidebar-collapsed .submenu.flyout-open button {
  padding: 8px 10px;
}

.app-shell.sidebar-collapsed .sidebar-user {
  justify-content: center;
  grid-template-columns: 40px;
}

/* Filtros da tela de usuários */
.users-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}

.users-filters .search-box {
  flex: 1;
  min-width: 220px;
}

.users-filters .search-box input {
  border: 0;
  background: transparent;
  flex: 1;
  color: var(--ink);
}

.users-filters select {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
}

.filter-multiselect {
  position: relative;
}

.filter-dropdown {
  position: absolute;
  top: 44px;
  left: 0;
  z-index: 30;
  width: 220px;
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

/* Enquanto aberto, o dropdown é reparentado para <body> (ver openDropdownPortal
   em app.js) com position: fixed calculado via JS — evita ser cortado pelo
   overflow: hidden de containers como .chat-list, e o z-index bem acima do
   resto da interface garante que fique por cima de qualquer painel. */
.dropdown-portal {
  z-index: 1000;
}

.filter-dropdown label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: 0.86rem;
  font-weight: 500;
}

.info-icon-btn {
  width: 18px;
  height: 18px;
  line-height: 16px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}

.info-icon-btn:hover {
  background: var(--wine-dark);
  color: var(--white);
  border-color: var(--wine-dark);
}

.permission-info-body p {
  margin: 0 0 12px;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Avatares */
.table-avatar,
.avatar-preview {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--white);
  border: 2px solid transparent;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Avatar padrão (sem foto cadastrada) — ver DEFAULT_AVATAR_SVG em app.js.
   Precisa do próprio background porque .table-avatar/.avatar-preview acima
   não definem um (só a cor da borda) — sem isso o ícone/texto de fallback
   fica sem contraste contra o fundo claro do painel por trás. */
.avatar-fallback {
  background: #e4e6eb;
  overflow: hidden;
}

.avatar-fallback svg {
  width: 68%;
  height: 68%;
}

/* Foto de perfil do WhatsApp (ver renderContactAvatarHtml em app.js): as
   iniciais ficam sempre presentes por baixo como fallback; quando a foto do
   contato está disponível, a <img> cobre o círculo inteiro por cima. Se a
   imagem falhar ao carregar (ela mesma se remove via onerror), as iniciais
   já renderizadas por baixo aparecem normalmente — nunca fica quebrado. */
.chat-avatar {
  position: relative;
  overflow: hidden;
}

.chat-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.user-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-upload-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.avatar-preview {
  width: 56px;
  height: 56px;
  font-size: 1rem;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
}

/* Defesa extra: .avatar-preview normalmente é preenchido via background-image
   (ver renderConfigSdr em config-ia-sdr.js e o modal de Usuários em app.js),
   nunca com uma <img> filha — mas se algum código novo inserir uma <img>
   aqui, esta regra garante que ela fique contida no mesmo círculo pequeno em
   vez de vazar no tamanho natural da imagem por cima do resto do formulário
   (mesmo padrão já usado em .chat-avatar). */
.avatar-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.file-input-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.file-input-label input {
  font-weight: 400;
}

/* Convite */
.convite-link-box {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.convite-link-box input {
  flex: 1;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--beige);
  color: var(--ink);
  font-size: 0.82rem;
}

.badge.pending {
  background: rgba(182, 138, 85, 0.18);
  color: #8a5a1f;
}

.audit-diff {
  margin: 6px 0 0;
  padding: 8px 10px;
  font-size: 0.72rem;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
}

.danger-button {
  background: linear-gradient(135deg, #b3261e, #7a1a15) !important;
}

@media (max-width: 980px) {
  .app-shell.sidebar-collapsed .sidebar {
    width: 280px;
    min-width: 280px;
  }

  .app-shell.sidebar-collapsed .content-wrap {
    width: 100%;
    margin-left: 0;
  }
}

/* Tickets */
.ticket-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ticket-toolbar .search-box {
  height: 42px;
  min-width: 220px;
}

/* Linha de filtros (Pendentes/Todos, busca, categoria, prioridade) separada
   do panel-header — antes vinha misturada com a config de SLA na mesma
   faixa, confundindo "filtro da tela" com "configuração do sistema". */
.ticket-toolbar-standalone {
  padding-top: 14px;
  margin-top: -2px;
  margin-bottom: 16px;
  border-top: 1px solid var(--line);
}

/* Config de SLA (Painel de Tickets): ícone de engrenagem no canto do
   panel-header abrindo um popover pequeno, em vez de ficar lado a lado com
   os filtros (ver .ticket-toolbar-standalone acima). */
.ticket-sla-config {
  position: relative;
}

.ticket-sla-popover[hidden] {
  display: none;
}

.ticket-sla-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  width: max-content;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.ticket-sla-popover label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.ticket-sla-popover input {
  min-height: 34px;
  padding: 0 8px;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover {
  background: rgba(111, 43, 46, 0.04);
}

.ticket-detail-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ticket-detail-notas {
  margin: 0;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  font-size: 0.86rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.ticket-detail-body label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.ticket-detail-body select {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
}

/* ===== Configurações — expansão (Imobiliária + IA SDR/ADM) ===== */

.field-hint {
  display: block;
  margin: 2px 0 12px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
}

.logo-preview {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--muted);
  flex: 0 0 auto;
}

.logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.feriados-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 14px 0;
}

.feriado-nacional-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.64);
  margin-bottom: 6px;
}

/* Abas SDR/ADM (reaproveita a mesma aparência de .chat-tab) */
.ia-bot-tabs {
  display: flex;
  gap: 6px;
  margin: 24px 0 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.ia-bot-panel {
  display: none;
}

.ia-bot-panel.active {
  display: block;
}

/* Layout de sub-abas: lista vertical estreita + painel da sub-aba ativa */
.subtab-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.subtab-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  /* --topbar-h vem de config-shared.js (ResizeObserver na .topbar, também
     sticky/top:0) — sem esse offset a lista de sub-abas tentaria grudar em
     top:0 e ficaria por baixo da topbar em vez de logo abaixo dela ao rolar
     a página. Evitamos um valor fixo "chutado" (ex: 92px) porque a altura
     real da topbar varia com o tamanho da fonte responsiva do título
     (clamp) e com quebras de linha em telas estreitas. */
  top: var(--topbar-h, 92px);
}

.subtab-list button {
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}

.subtab-list button:hover {
  background: rgba(111, 43, 46, 0.06);
}

.subtab-list button.active {
  background: var(--wine);
  color: var(--white);
}

.subtab-content {
  min-width: 0;
}

.subtab-panel {
  display: none;
}

.subtab-panel.active {
  display: block;
}

/* Disponibilidade por dia da semana (Agenda de Visitas) */
.day-toggle-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 10px 0 16px;
}

.day-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
  font-size: 0.82rem;
  font-weight: 700;
}

/* Cards de lista editável (feriados personalizados, telefones bloqueados,
   FAQ, qualificação, personalizações, campanhas Meta...) */
.editable-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  padding: 16px;
  margin-bottom: 12px;
}

.editable-card .editable-card-remove {
  position: absolute;
  top: 10px;
  right: 10px;
}

.editable-card label:first-of-type {
  margin-top: 0;
}

@media (max-width: 980px) {
  .subtab-layout {
    grid-template-columns: 1fr;
  }

  .subtab-list {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
  }

  .feriados-grid {
    grid-template-columns: 1fr;
  }
}

/* Atualização de Base (Captação > Atualização de base) — disparo em massa de
   confirmação de disponibilidade com proprietários. */
/* Só neste toolbar (não altera .search-box/.ticket-toolbar genéricos usados
   em Tickets/Conversas): sem isso, o <input>/<select> herdam a regra global
   "input, textarea, select { width: 100% }" (pensada pra campos de
   formulário isolados) e brigam pelo espaço com o ícone de busca dentro do
   .search-box, cortando o texto do placeholder. */
.disponibilidade-toolbar .search-box input {
  width: auto;
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
}

.disponibilidade-toolbar select {
  width: auto;
  min-width: 170px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
}

.disponibilidade-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.disponibilidade-simulacao-banner {
  margin: -8px 0 16px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(182, 138, 85, 0.16);
  color: #7e5422;
  font-weight: 700;
  font-size: 0.82rem;
}

.disponibilidade-steps {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
  flex-wrap: wrap;
}

.disponibilidade-steps svg {
  color: var(--muted);
  flex-shrink: 0;
}

.disponibilidade-step {
  min-width: 180px;
}

.disponibilidade-step strong {
  display: block;
  font-size: 0.86rem;
}

.disponibilidade-step span {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  margin-top: 2px;
}

.disponibilidade-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.disponibilidade-criterio-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}

.disponibilidade-criterio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.86rem;
  cursor: pointer;
}

.disponibilidade-criterio-option input {
  width: auto;
}

.disponibilidade-manual-list {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.disponibilidade-manual-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 0.84rem;
}

.disponibilidade-manual-item input {
  width: auto;
  margin-top: 3px;
}

.disponibilidade-detail-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  padding: 14px;
  margin-bottom: 12px;
}

.disponibilidade-detail-item h4 {
  margin: 0 0 6px;
  font-size: 0.92rem;
}

.disponibilidade-detail-msg {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 4px 0;
}

.disponibilidade-detail-resposta {
  font-size: 0.86rem;
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
}

.disponibilidade-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}