@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --blue-700: #1D4ED8;
  --blue-600: #2563EB;
  --success: #10B981;
  --warning: #F59E0B;
  --warning-strong: #F97316;
  --error: #EF4444;

  --bg: #F4F6FB;
  --surface: #FFFFFF;
  --texto: #0D1526;
  --texto-fraco: #5B6478;
  --borda: #E3E7F0;
  --erro-cor: #EF4444;
}

:root[data-tema="dark"] {
  /* Mesma família do azul de marca (#1D4ED8/#2563EB), só numa nuance bem
     mais escura, pra continuar lendo como azul de verdade em vez de virar
     preto/cinza neutro (o problema do fundo neutro anterior) nem ficar tão
     escuro que perde a cor (o problema do primeiro azul-marinho). */
  --bg: #16214A;
  --surface: #202F5C;
  --texto: #E8EEFF;
  --texto-fraco: #A8B2CE;
  --borda: #34437F;
  --erro-cor: #F87171;
}

/* O azul (#1D4ED8/#2563EB) é sempre o mesmo, claro ou escuro — só a
   intensidade do "tingimento" (badge, ícone, foco) muda, porque a mesma
   transparência sobre fundo escuro lê como um azul mais apagado/acinzentado
   do que sobre fundo branco. Aqui só aumenta o alfa da mesma cor, nunca
   troca o tom. */
:root[data-tema="dark"] .badge-aberto,
:root[data-tema="dark"] .badge-media {
  background: rgba(37,99,235,.28); color: #6EA8FF;
}
/* Ícone de categoria vívido de verdade no escuro, igual a logo, em vez de
   um tom translúcido murcho que lê como "azul quase preto". */
:root[data-tema="dark"] .item-chamado .icone-categoria {
  background: var(--blue-700); color: #fff;
}
:root[data-tema="dark"] input:focus,
:root[data-tema="dark"] textarea:focus,
:root[data-tema="dark"] select:focus {
  box-shadow: 0 0 0 3px rgba(37,99,235,.28);
}
:root[data-tema="dark"] .btn-primario {
  box-shadow: 0 1px 2px rgba(37,99,235,.35), 0 4px 14px rgba(37,99,235,.28);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--texto);
  min-height: 100vh;
}

a { color: var(--blue-600); text-decoration: none; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px; background: var(--surface); border-bottom: 1px solid var(--borda);
}

.topbar h1 { font-size: 15px; font-weight: 600; margin: 0; color: var(--texto-fraco); }
.topbar h1 span { color: var(--texto); font-weight: 700; }
.topbar-divisor { width: 1px; height: 22px; background: var(--borda); }

/* Marca ProspectIA, mesmo ícone/lettering do CRM (crm.prospectia.space),
   adaptado pro fundo claro do Helpdesk (lá é usado em cima de painel escuro). */
.ph-logo { display: flex; align-items: center; gap: 10px; }
.ph-logo-icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: var(--blue-700);
  display: flex; align-items: center; justify-content: center;
}
.ph-logo-text { font-size: 16px; font-weight: 800; color: var(--texto); letter-spacing: -.3px; }
.ph-logo-text em { font-style: normal; color: var(--blue-600); }
.topbar .acoes { display: flex; align-items: center; gap: 12px; }

.container { max-width: 1100px; margin: 0 auto; padding: 32px 28px; }

.pagina-titulo { font-size: 22px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.3px; }
.pagina-subtitulo { font-size: 13px; color: var(--texto-fraco); margin: 0 0 24px; }

.card {
  background: var(--surface); border: 1px solid var(--borda); border-radius: 14px;
  padding: 20px; box-shadow: 0 1px 3px rgba(13,21,38,0.04);
}
.card.card-lista { padding: 10px; }

.grid { display: grid; gap: 16px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-radius: 9px; border: 1px solid transparent;
  cursor: pointer; transition: filter .15s, transform .1s, box-shadow .15s;
}
.btn:hover { filter: brightness(0.95); }
.btn:active { transform: scale(0.98); }
.btn-primario { background: var(--blue-700); color: #fff; box-shadow: 0 1px 2px rgba(29,78,216,.25), 0 4px 10px rgba(29,78,216,.15); }
.btn-primario:hover { box-shadow: 0 2px 4px rgba(29,78,216,.3), 0 6px 16px rgba(29,78,216,.2); }
.btn-secundario { background: var(--surface); color: var(--texto); border-color: var(--borda); }
.btn-secundario:hover { background: var(--bg); }
.btn-perigo { background: var(--error); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

input, textarea, select {
  font-family: inherit; font-size: 14px; padding: 11px 14px;
  border-radius: 9px; border: 1.5px solid var(--borda);
  background: var(--bg); color: var(--texto); width: 100%;
  transition: border-color .15s, background .15s;
}
input:hover, textarea:hover, select:hover { border-color: color-mix(in srgb, var(--blue-600) 40%, var(--borda)); }
::placeholder { font-style: italic; color: var(--texto-fraco); opacity: .85; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--blue-600); background: var(--surface);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

label { font-size: 12px; font-weight: 600; color: var(--texto-fraco); display: block; margin-bottom: 6px; }
.campo { margin-bottom: 14px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-aberto { background: rgba(37,99,235,.12); color: var(--blue-600); }
.badge-em_andamento { background: rgba(245,158,11,.14); color: var(--warning); }
.badge-aguardando_cliente { background: rgba(249,115,22,.14); color: var(--warning-strong); }
.badge-resolvido { background: rgba(16,185,129,.14); color: var(--success); }

.badge-baixa { background: rgba(139,148,172,.14); color: var(--texto-fraco); }
.badge-media { background: rgba(37,99,235,.12); color: var(--blue-600); }
.badge-alta { background: rgba(245,158,11,.14); color: var(--warning); }
.badge-urgente { background: rgba(239,68,68,.14); color: var(--erro-cor); }

.lista-chamados { display: flex; flex-direction: column; gap: 8px; }
.item-chamado {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px; border: 1px solid transparent; border-radius: 12px; cursor: pointer;
  background: var(--surface); transition: box-shadow .15s, border-color .15s, transform .1s;
}
.item-chamado:hover {
  border-color: var(--borda);
  box-shadow: 0 4px 16px rgba(13,21,38,.07);
  transform: translateY(-1px);
}
.item-chamado .icone-categoria {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(37,99,235,.10); color: var(--blue-600);
}
.item-chamado .conteudo { flex: 1; min-width: 0; }
.item-chamado .titulo { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-chamado .meta { font-size: 12px; color: var(--texto-fraco); margin-top: 3px; }
.item-chamado .badges { display: flex; gap: 6px; flex-shrink: 0; }

/* Chamado resolvido fica visualmente "apagado". Quem olha a lista bate o
   olho e já sabe o que ainda precisa de atenção, sem ler nenhum rótulo
   (padrão usado no Zendesk pra listas longas). */
.item-chamado.resolvido { opacity: .55; }
.item-chamado.resolvido:hover { opacity: .85; }
.item-chamado.resolvido .icone-categoria { background: var(--bg); color: var(--texto-fraco); }

.modal-fundo {
  position: fixed; inset: 0; background: rgba(8,14,28,.45);
  backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center;
  z-index: 50; padding: 20px;
}
.modal {
  background: var(--surface); border-radius: 14px; padding: 24px;
  width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 12px 40px rgba(8,14,28,.25);
}
.modal h2 { margin-top: 0; font-size: 17px; }

.toast-wrap { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast {
  background: var(--surface); border: 1px solid var(--borda); border-radius: 10px;
  padding: 12px 16px; font-size: 13px; box-shadow: 0 6px 20px rgba(8,14,28,.15);
  animation: entrar .2s ease-out;
}
.toast-erro { border-left: 3px solid var(--erro-cor); }
.toast-sucesso { border-left: 3px solid var(--success); }
.toast-info { border-left: 3px solid var(--blue-600); }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.thread { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.msg { padding: 10px 14px; border-radius: 10px; max-width: 80%; font-size: 13px; }
.msg-cliente { background: rgba(37,99,235,.08); align-self: flex-start; }
.msg-interno { background: rgba(16,185,129,.08); align-self: flex-end; }
.msg-interna { background: rgba(245,158,11,.14); align-self: flex-end; border: 1px dashed var(--warning); max-width: 90%; }
.msg .autor { font-size: 11px; font-weight: 700; color: var(--texto-fraco); margin-bottom: 3px; }
.tag-nota-interna { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--warning); letter-spacing: .03em; }

.stat-card {
  padding: 18px; border: 1px solid var(--borda); border-radius: 14px; background: var(--surface);
  box-shadow: 0 1px 3px rgba(13,21,38,0.04);
}
.stat-card .valor { font-size: 28px; font-weight: 800; letter-spacing: -.5px; }
.stat-card .rotulo { font-size: 12px; color: var(--texto-fraco); margin-top: 3px; font-weight: 500; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; }

.icone-tema {
  width: 18px; height: 18px; cursor: pointer; padding: 8px; box-sizing: content-box;
  border-radius: 8px; transition: background .15s; color: var(--texto-fraco);
}
.icone-tema:hover { background: var(--bg); color: var(--texto); }

.vazio { text-align: center; padding: 40px 20px; color: var(--texto-fraco); font-size: 13px; }
.vazio-ilustrado { text-align: center; padding: 30px 20px; }
.vazio-ilustrado img { width: 160px; margin-bottom: 12px; }
.vazio-ilustrado .texto { color: var(--texto-fraco); font-size: 13px; }
.banner-resolvido { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); border-radius: 10px; margin-bottom: 14px; }
.banner-resolvido img { width: 48px; }
.banner-resolvido span { font-size: 13px; font-weight: 600; color: var(--success); }

.filtros { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.filtros select { width: auto; }