/* css-base.css — fundo, fontes e cabeçalho */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #ffffff;
  --surface:  #f5f6f8;
  --surface2: #eceef1;
  --border:   rgba(0,0,0,0.10);
  --neon-cyan:#1a73e8;
  --neon-mag: #fb8c00;
  --accent-blue:  #1a73e8;
  --accent-red:   #e53935;
  --accent-orange:#fb8c00;
  --text:     #1a1d23;
  --muted:    #6b7280;
  --online:   #1a73e8;
  --font:     'Outfit', -apple-system, sans-serif;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── CABEÇALHO ── */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #ff0000;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 10px;
}
.header-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.perfil-icone {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0; cursor: pointer;
  border: 1px solid var(--border);
}
.perfil-icone .perfil-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Título único do agente (nome + assunto fundidos): ocupa todo o espaço
   entre o ícone e os 3 pontinhos. O tamanho da letra é ajustado via JS
   (ajustarTamanhoTitulo em app.js) pra sempre caber numa linha, sem cortar. */
.header-titulo-wrap {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-titulo-unico {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  white-space: nowrap;
  max-width: 100%;
}

.header-acoes { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.btn-contatos {
  color: var(--muted); font-size: 14px; font-weight: 600;
  background: none; border: none; cursor: pointer;
}
.btn-contatos:hover { color: var(--text); }
.header-acoes .menu-3pontos { cursor: pointer; }
.header-acoes svg { width: 22px; height: 22px; fill: #ffffff; }
.header-acoes svg:hover { fill: var(--text); }