/* ==========================================================================
   CliqueChat — identidade visual
   Layout claro, discreto, azul como cor principal, cards estilo painel de
   atendimento. Pensado para rodar dentro de um iframe estreito.
   ========================================================================== */

:root {
  --azul-600: #1d5fd6;
  --azul-700: #164ab0;
  --azul-100: #eaf1ff;
  --azul-50:  #f5f8ff;
  --cinza-900:#1f2430;
  --cinza-600:#5b6472;
  --cinza-300:#dfe3ea;
  --cinza-100:#f3f5f8;
  --branco:   #ffffff;
  --verde:    #1fa971;
  --vermelho: #e5484d;
  --amarelo:  #d99a1b;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(20, 30, 60, 0.06), 0 2px 8px rgba(20, 30, 60, 0.04);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  background: var(--cinza-100);
  color: var(--cinza-900);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- Cabeçalho compacto ---------- */
.cc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: var(--branco);
  border-bottom: 1px solid var(--cinza-300);
  position: sticky;
  top: 0;
  z-index: 5;
}

.cc-header__brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cc-header__logo {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--azul-600);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}

.cc-header__titulos { line-height: 1.15; }
.cc-header__nome { font-weight: 600; font-size: 13px; color: var(--cinza-900); }
.cc-header__sub { font-size: 11px; color: var(--cinza-600); }

.cc-header__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--cinza-600);
}

.cc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cinza-300);
  flex-shrink: 0;
}
.cc-dot.online   { background: var(--verde); box-shadow: 0 0 0 3px rgba(31,169,113,.15); }
.cc-dot.offline  { background: var(--vermelho); box-shadow: 0 0 0 3px rgba(229,72,77,.15); }
.cc-dot.pending  { background: var(--amarelo); box-shadow: 0 0 0 3px rgba(217,154,27,.15); }

/* ---------- Conteúdo ---------- */
.cc-content {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- Cards de painel de atendimento ---------- */
.cc-card {
  background: var(--branco);
  border: 1px solid var(--cinza-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.cc-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cinza-100);
  background: var(--azul-50);
}

.cc-card__title {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--cinza-900);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cc-card__body { padding: 12px; }

.cc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--cinza-100);
  color: var(--cinza-600);
}
.cc-badge.online  { background: rgba(31,169,113,.12); color: var(--verde); }
.cc-badge.offline { background: rgba(229,72,77,.12);  color: var(--vermelho); }
.cc-badge.pending { background: rgba(217,154,27,.12);  color: var(--amarelo); }

/* ---------- Linhas de dados (rótulo/valor) ---------- */
.cc-linha {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--cinza-100);
  font-size: 12.5px;
}
.cc-linha:last-child { border-bottom: none; }
.cc-linha__label { color: var(--cinza-600); }
.cc-linha__valor { color: var(--cinza-900); font-weight: 600; text-align: right; }

/* ---------- Botões de ações rápidas ---------- */
.cc-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.cc-btn {
  appearance: none;
  border: 1px solid var(--azul-600);
  background: var(--azul-600);
  color: #fff;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s ease, transform .05s ease;
}
.cc-btn:hover { background: var(--azul-700); }
.cc-btn:active { transform: scale(0.98); }

.cc-btn--ghost {
  background: var(--branco);
  color: var(--azul-600);
}
.cc-btn--ghost:hover { background: var(--azul-100); }

.cc-btn--sm { padding: 5px 9px; font-size: 11.5px; }
.cc-btn:disabled { opacity: .5; cursor: not-allowed; }

.cc-btn--icon {
  padding: 4px 7px;
  font-size: 13px;
  line-height: 1;
  border-radius: 999px;
}

/* ---------- Seletor de contratos ---------- */
.cc-select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--cinza-300);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  background: var(--branco);
  color: var(--cinza-900);
  font-family: var(--font);
}

/* ---------- Inputs ---------- */
.cc-input, textarea.cc-input {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--cinza-300);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-family: var(--font);
  color: var(--cinza-900);
}
.cc-campo { margin-bottom: 8px; }
.cc-campo label {
  display: block;
  font-size: 11.5px;
  color: var(--cinza-600);
  margin-bottom: 3px;
  font-weight: 600;
}

/* ---------- Estado vazio / carregando ---------- */
.cc-estado {
  text-align: center;
  padding: 24px 10px;
  color: var(--cinza-600);
  font-size: 12.5px;
}
.cc-estado__icone { font-size: 22px; margin-bottom: 6px; }

.cc-skeleton {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cinza-100) 25%, #eceff3 37%, var(--cinza-100) 63%);
  background-size: 400% 100%;
  animation: cc-shimmer 1.4s ease infinite;
  margin: 6px 0;
}
@keyframes cc-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---------- Toast ---------- */
.cc-toast {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--cinza-900);
  color: #fff;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 50;
  white-space: nowrap;
}
.cc-toast.mostrar {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Abas (Contratos com múltiplos contratos) ---------- */
.cc-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.cc-tab {
  border: 1px solid var(--cinza-300);
  background: var(--branco);
  color: var(--cinza-600);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.cc-tab.ativo {
  background: var(--azul-600);
  border-color: var(--azul-600);
  color: #fff;
}

/* ---------- Rodapé discreto ---------- */
.cc-footer {
  text-align: center;
  font-size: 10.5px;
  color: var(--cinza-600);
  padding: 8px 0 14px;
}

/* ---------- Responsivo ---------- */
@media (max-width: 340px) {
  .cc-content { padding: 8px; }
  .cc-card__body { padding: 9px; }
}