/* Ferramenta Aco PE 1.5.1.1: estados vazios leves e contextuais.
 * Apenas componentes que trazem a classe fx-empty-state sao estilizados.
 * Nao modifica estados de carregamento, erro, tabelas preenchidas ou logica de negocio.
 */
.fx-empty-state {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  max-width: 100%;
  padding: 25px 18px;
  color: #718091;
  background: radial-gradient(ellipse at 65% 105%, rgba(23,80,126,.045), transparent 59%),
              linear-gradient(145deg,rgba(255,255,255,.60),rgba(242,246,250,.32));
  border-radius: 14px;
  line-height: 1.42;
}
.fx-empty-state::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: clamp(100px, 28%, 250px);
  height: 105px;
  right: -18px;
  bottom: -43px;
  opacity: .22;
  transform: skewX(-26deg) rotate(-4deg);
  border-left: 15px solid rgba(12,72,115,.13);
  border-right: 35px solid rgba(12,72,115,.11);
  box-shadow: inset 13px 0 0 rgba(12,72,115,.085),
              -25px 0 0 rgba(12,72,115,.065);
}
.fx-empty-state > * {position: relative; z-index: 1;}
.fx-empty-state strong {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
  color: #34495c;
}
.fx-empty-state > span:not(.fx-empty-icon) {
  max-width: 360px;
  font-size: 11px;
  line-height: 1.5;
  color: #738297;
}
.fx-empty-state .fx-empty-icon,
.fx-empty-state .chat-empty-icon,
.fx-empty-state .queue-empty-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 16px;
  color: #346389;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  border: 1px solid rgba(37,99,144,.11);
  background: linear-gradient(145deg, #f2f8fb, #e7f0f6);
  box-shadow: 0 6px 20px rgba(23,72,107,.045);
}
.fx-empty-state.fx-empty-compact {
  min-height: 128px;
  padding: 22px 12px;
  gap: 7px;
  width: 100%;
}
.fx-empty-state.fx-empty-compact .fx-empty-icon {width: 35px;height:35px;border-radius:11px;font-size:18px}
.fx-empty-state.fx-empty-compact strong {font-size:12px}
.fx-empty-state.fx-empty-compact > span:not(.fx-empty-icon) {font-size:10px}
.fx-empty-state.fx-empty-large {min-height: 190px; padding: 30px 20px}
/* Conversas: a area direita recebe composicao discreta sem perder seu espaco central. */
.chat-area > .chat-empty.fx-empty-state {
  width: 100%;
  height: 100%;
  min-height: min(460px, 56vh);
  border-radius: 0;
  background: radial-gradient(ellipse at 52% 45%, rgba(255,255,255,.72), rgba(245,248,251,.38) 64%, transparent 80%);
}
.chat-area > .chat-empty.fx-empty-state::after {
  content: "";
  position: absolute;
  width: min(36vw, 360px);
  height: 160px;
  bottom: 6%;
  right: 5%;
  opacity: .055;
  background: url('/img/pernambuco-aco.png') center / contain no-repeat;
  pointer-events: none;
  z-index: -1;
}
/* Na coluna de conversas, nao criar cartoes grandes em listas estreitas. */
.conversation-list > .fx-empty-state {
  width: calc(100% - 20px);
  margin: 14px 10px;
  border: 1px dashed #e2eaf0;
}
/* Fila e quadros: manter rolagem e funcionamento do drag-and-drop. */
.queue-empty.fx-empty-state {width: 100%; min-height: 215px;}
.kanban-empty.fx-empty-state {margin: 0; width: 100%; min-height: 116px;}
.commercial-cards .empty-column.fx-empty-state {
  margin: 0;
  width: 100%;
  min-height: 148px;
  border: 1px dashed rgba(63,104,134,.14);
}
/* Tabelas: nao alterar display de td/tr, mantendo alinhamento e acessibilidade. */
.fx-empty-table {min-height: 128px; margin: 2px auto;}
.empty-ticket:has(.fx-empty-table),
.empty-contacts:has(.fx-empty-table),
.empty-report:has(.fx-empty-table) {padding: 10px 14px !important;}
@media (max-width: 768px) {
  .fx-empty-state.fx-empty-large {min-height: 150px; padding: 20px 12px}
  .chat-area > .chat-empty.fx-empty-state {min-height: 260px}
  .chat-area > .chat-empty.fx-empty-state::after {width: 190px; height: 95px; right: 4%; bottom: 5%}
  .fx-empty-state::before {opacity: .13}
}
@media (prefers-reduced-motion: reduce) {
  .fx-empty-state, .fx-empty-state * {animation: none !important; transition: none !important;}
}