/* EscalaX — Inbox igual ao respond.io (v14): ⋮ "Mais ações", ⋯ do cartão, divisor e hover da lista. Painéis usam as classes da própria Inbox; aqui só o que falta. */
.exia-root {
  --inbox-text: rgb(232, 234, 237);
  --inbox-secondary: rgb(183, 188, 194);
  --inbox-muted: rgb(139, 145, 152);
  --inbox-blue: rgb(107, 164, 255);
  --inbox-border: rgb(57, 61, 67);
  color: var(--inbox-text);
  font: 400 14px/1.4 "Inter Variable", Inter, sans-serif;
}

.exia-root *,
.exia-root *::before,
.exia-root *::after {
  box-sizing: border-box;
}

.exia-root button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

/* ⋮ com dois itens: altura pelo conteúdo. */
.exia-root .exia-more {
  height: auto;
  padding: 4px 4px 8px;
}

.exia-root .exia-panel {
  display: flex;
  flex-direction: column;
}

.exia-empty-text {
  margin: 6px 0 0;
  color: var(--inbox-secondary);
  font-size: 14px;
  line-height: 20px;
}

.exia-loading {
  justify-content: center;
  color: var(--inbox-muted);
}

.exia-root .exia-list {
  display: flex;
  height: auto;
  max-height: 266px;
  flex: 1 1 auto;
  flex-direction: column;
  padding-top: 4px;
  overflow: auto;
}

.exia-root .exia-shortcuts-menu .exia-list,
.exia-root .inbox-shortcuts-menu .exia-list {
  max-height: 270px;
}

.exia-list__head {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: #97a0aa;
  font-size: 14px;
}

.exia-row {
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 6px;
  padding: 6px 10px;
  color: #cfd3d8;
  text-align: left;
}

.exia-row:hover,
.exia-row:focus-visible {
  outline: 0;
  background: #ceced029;
}

.exia-row--shortcut {
  justify-content: flex-start;
}

.exia-row__icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #3a3b40;
  color: #ffc107;
}

.exia-row__text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.exia-row__text strong {
  overflow: hidden;
  color: #e3e5e8;
  font-size: 14px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exia-row__text small {
  overflow: hidden;
  color: var(--inbox-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exia-root .exia-stop {
  flex: none;
  border-radius: 6px;
  padding: 4px 8px;
  color: #ff5f57;
  font-size: 14px;
}

.exia-root .exia-stop:hover {
  background: #ff5f5722;
}

.exia-none {
  margin: 18px 12px;
  color: var(--inbox-muted);
  font-size: 13px;
  text-align: center;
}

/* Janela */
.exia-backdrop {
  position: fixed;
  z-index: 240;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #0006;
}

.exia-modal {
  width: min(432px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  border-radius: 8px;
  background: #222225;
  color: #cfd3d8;
  box-shadow: 0 14px 36px #0000007a;
}

.exia-modal__header {
  display: flex;
  min-height: 49px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 16px;
  border-bottom: 1px solid rgba(182, 188, 195, 0.16);
}

.exia-modal__header h2 {
  margin: 0;
  color: #d5d8dd;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.exia-root .exia-modal__close {
  display: grid;
  width: 32px;
  height: 32px;
  flex: none;
  place-items: center;
  border-radius: 8px;
  color: #d3d6da;
}

.exia-root .exia-modal__close:hover {
  background: #ffffff14;
}

.exia-modal__body {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.exia-modal__body p {
  margin: 0;
  line-height: 1.5;
}

.exia-modal__desc {
  color: var(--inbox-muted);
}

.exia-alert {
  display: flex;
  gap: 10px;
  border-radius: 4px;
  padding: 12px 14px;
  background: #2a3a55;
  color: #dbe6ff;
}

.exia-alert svg {
  flex: none;
  margin-top: 2px;
  color: #6ba4ff;
}

.exia-selected strong {
  color: #e3e5e8;
  font-weight: 600;
}

.exia-field {
  display: grid;
  gap: 4px;
}

.exia-field > span {
  color: #9ea5ae;
  font-size: 12px;
  font-weight: 600;
}

.exia-field.is-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.exia-field.is-check > span {
  order: 2;
  color: #cfd3d8;
  font-size: 14px;
  font-weight: 400;
}

.exia-input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(207, 211, 216, 0.15);
  border-radius: 8px;
  outline: 0;
  background: #0e0f11;
  color: #e2e4e7;
  font: inherit;
  color-scheme: dark;
}

.exia-input:focus {
  border-color: #6ba4ff;
}

.exia-check {
  width: 18px;
  height: 18px;
  accent-color: #6f8ff7;
}

.exia-modal__error {
  color: #ff7a86;
}

.exia-modal__error[hidden] {
  display: none;
}

.exia-modal__footer {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
  padding: 8px 12px;
}

.exia-root .exia-btn {
  height: 32px;
  border-radius: 8px;
  padding: 0 13px;
  font-weight: 550;
}

.exia-root .exia-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

.exia-root .exia-btn--ghost {
  color: #d5d8dc;
}

.exia-root .exia-btn--ghost:hover:not(:disabled) {
  background: #ffffff0e;
}

.exia-root .exia-btn--primary {
  background: #6ba4ff;
  color: #0e1722;
}

.exia-root .exia-btn--danger {
  background: #e53935;
  color: #fff;
}

.exia-root button:focus-visible {
  outline: 2px solid #6ba4ff;
  outline-offset: 2px;
}

.exia-toast {
  position: fixed;
  z-index: 250;
  bottom: 24px;
  left: 50%;
  max-width: min(520px, calc(100vw - 32px));
  border-radius: 8px;
  padding: 10px 16px;
  background: #2f2f32;
  color: #e3e5e8;
  box-shadow: 0 8px 24px #0008;
  transform: translateX(-50%);
}

.exia-toast.is-error {
  background: #4a1f24;
  color: #ffd7db;
}

@media (prefers-reduced-motion: reduce) {
  .exia-root * {
    animation: none !important;
    transition: none !important;
  }
}

/* A regra da Inbox pinta de vermelho o último item do ⋮ (é o "Bloquear contato"); aqui não. */
.exia-root .exia-more .inbox-menu-action:last-child {
  margin-top: 4px;
  color: #cfd3d8 !important;
}

.exia-root .exia-more .inbox-menu-action.is-selected {
  background: #ceced029 !important;
  color: var(--inbox-text) !important;
}

/* Estado vazio: altura pelo texto (3 linhas no respond.io), botão e link numa linha. */
.exia-root .inbox-shortcuts-menu,
.exia-root .exia-ongoing {
  height: auto;
  min-height: 314px;
}

.exia-root .exia-panel .inbox-workflows-body {
  height: auto;
}

.exia-root .exia-panel .inbox-workflows-body__inner {
  height: auto;
  min-height: 254px;
  justify-content: flex-start;
  padding: 24px 20px 20px;
}

.exia-root .exia-panel .inbox-workflows-body p.exia-empty-text {
  height: auto;
  margin: 14px 0 0;
}

.exia-root .exia-panel .inbox-workflows-body .inbox-workflows-primary {
  width: auto;
  margin-top: 16px;
  white-space: nowrap;
}

.exia-root .exia-panel .inbox-workflows-body .inbox-workflows-learn {
  width: auto;
  margin-top: 16px;
  white-space: nowrap;
}

/* ============ v3 — lista igual ao respond.io (medido ao vivo em 24/09) ============ */

/* Cartão: 98px fixo, transição de 150ms e hover rgb(47,47,50) (o selecionado não muda no hover). */
.inbox-page .inbox-conversation-card {
  height: 98px;
  transition: background-color 150ms;
}
.inbox-page .inbox-conversation-card:not(.is-selected):hover {
  background: rgb(47, 47, 50);
}

/*
 * Linha entre um contato e outro: só na área de conteúdo (à direita do avatar),
 * padding-bottom 12px e borda rgba(182,188,195,.16). Some no hover e no selecionado.
 * No respond.io o conteúdo (89px) passa 3px do cartão de 98px; aqui fica igual.
 */
.inbox-page .inbox-conversation-card__content {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(182, 188, 195, 0.16);
}
.inbox-page .inbox-conversation-card:hover .inbox-conversation-card__content,
.inbox-page .inbox-conversation-card.is-selected .inbox-conversation-card__content {
  border-bottom-color: transparent;
}

/* A hora dá lugar ao ⋯ no hover. */
.inbox-page .inbox-conversation-card:hover .escalax-top-right time {
  visibility: hidden;
}

/* Conversa fechada: check verde de 20px antes do responsável. */
.inbox-page .escalax-card-meta-right {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.inbox-page .escalax-card-closed {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  background: rgb(81, 210, 113) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.2l2.7 2.7L14 7.6' fill='none' stroke='%231c1c1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

/* Barra lateral: hover rgb(62,62,65); selecionado rgb(53,60,69) também nas etapas do ciclo de vida. */
.inbox-page .inbox-filter-row:not(.is-selected):hover,
.inbox-page .inbox-lifecycle-filter:not(.is-selected):hover {
  background: rgb(62, 62, 65);
  color: #cfd3d8;
}
.inbox-page .inbox-lifecycle-filter.is-selected {
  background: #353c45;
  color: #cfd3d8;
}

/* Cabeçalho: sem o "Adiar" solto (no respond.io ele fica dentro do ⋯ como "Silenciar"). */
.inbox-page .inbox-header-control-wrap:has(> button[aria-label="Adiar"]) {
  display: none !important;
}

/* Editor: fora os botões de demonstração que inserem texto fixo (voltam com a função real). */
.inbox-page .inbox-composer-tool-wrap:has(> button[aria-label="Variáveis dinâmicas"]),
.inbox-page .inbox-composer-tool-wrap:has(> button[aria-label="Snippets"]),
.inbox-page .inbox-composer-tool-wrap:has(> button[aria-label="Modelos do WhatsApp"]) {
  display: none !important;
}

/* ⋯ "Mostrar ações" do cartão (desenhado no <body>). */
.exia-root .exia-card-more {
  position: fixed;
  z-index: 60;
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 8px;
  color: rgb(207, 211, 216);
}
.exia-root .exia-card-more[hidden] {
  display: none;
}
.exia-root .exia-card-more:hover,
.exia-root .exia-card-more[aria-expanded="true"] {
  background: rgba(206, 206, 208, 0.16);
}

/* Menu do ⋯ do cartão: medidas do respond.io (padding 4, itens de 34px a cada 38px, raio 4). */
.exia-root .exia-card-menu {
  width: auto;
  min-width: 181px;
  height: auto;
  gap: 4px;
  padding: 4px;
  background: rgb(47, 47, 50);
}
.exia-root .exia-card-menu .inbox-menu-action {
  height: 34px;
  margin: 0;
  padding: 8px 10px;
  gap: 8px;
  border-radius: 4px;
  color: rgb(207, 211, 216) !important;
}
.exia-root .exia-card-menu .inbox-menu-action:last-child {
  margin-top: 0;
}
.exia-root .exia-card-menu .inbox-menu-action:hover,
.exia-root .exia-card-menu .inbox-menu-action:focus-visible {
  background: #ceced029;
}
.exia-root .exia-card-menu .inbox-menu-action > span {
  flex: 1 1 auto;
  white-space: nowrap;
}
.exia-root .exia-card-menu .inbox-menu-action > :is(svg, iconsax-icon) {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.exia-root .exia-chevron {
  display: inline-flex;
  margin-left: auto;
  font-style: normal;
}

/* Submenu Ciclo de vida. */
.exia-root .exia-lifecycle {
  width: 220px;
  height: auto;
  max-height: 360px;
  overflow: auto;
  padding: 4px 0 8px;
}
.exia-root .exia-lifecycle .inbox-menu-action {
  width: calc(100% - 8px);
  height: 34px;
  margin: 0 4px;
  padding: 0 10px;
  gap: 8px;
  border-radius: 4px;
}
.exia-root .exia-lifecycle .inbox-menu-action > span {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exia-root .exia-lifecycle .inbox-menu-action:hover {
  background: #ceced029;
}
.exia-root .exia-lifecycle .inbox-menu-action.is-selected {
  color: rgb(107, 164, 255) !important;
}
.exia-root .exia-lifecycle .exia-none {
  padding: 12px 16px;
}

/* ============ v4 — ciclo de vida no cabeçalho e barra lateral (medido no respond.io em 25/09) ============ */

/* "Selecionar etapa" | ›  — grupo com borda de 1px; a largura acompanha o texto (156px sem etapa). */
.inbox-page .inbox-lifecycle-trigger {
  width: auto;
  max-width: 220px;
}
.inbox-page .inbox-lifecycle-trigger.is-empty > span {
  color: rgb(151, 160, 170);
}
/* Sem etapa: ícone refresh-circle de 18px (cinza) no lugar do emoji. */
.inbox-page .inbox-stage-emoji.escalax-stage-empty {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: rgb(128, 139, 153);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z'/%3E%3Cpath d='M15 13.6a3.2 3.2 0 0 1-5.8.9M9 10.4a3.2 3.2 0 0 1 5.8-.9M14.8 7.3v2.3h-2.3M9.2 16.7v-2.3h2.3'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z'/%3E%3Cpath d='M15 13.6a3.2 3.2 0 0 1-5.8.9M9 10.4a3.2 3.2 0 0 1 5.8-.9M14.8 7.3v2.3h-2.3M9.2 16.7v-2.3h2.3'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
.inbox-page .inbox-lifecycle-step:not(:disabled) {
  color: rgb(207, 211, 216);
  cursor: pointer;
}
.inbox-page .inbox-lifecycle-step:not(:disabled):hover {
  background: #ceced029 !important;
}
.inbox-page .inbox-lifecycle-step:disabled {
  cursor: default;
  opacity: 0.5;
}

/* Barra lateral: o contador de leads de cada etapa do ciclo de vida continua visível (pedido do Diego, 25/09). */

/* v5 — em tela estreita o grupo "etapa | ›" encolhe (reticências) em vez de invadir o responsável. */
.inbox-page .inbox-conversation-header__contact {
  min-width: 0;
}
.inbox-page .inbox-conversation-header__contact > .inbox-header-control-wrap {
  display: flex;
  min-width: 0;
  flex: 0 1 auto;
}
.inbox-page .inbox-lifecycle-trigger {
  min-width: 64px;
  flex: 0 1 auto;
}
.inbox-page .inbox-lifecycle-step {
  flex: 0 0 34px;
}

/* ============ v6 — responsável (medido no respond.io em 25/09: menu de 271px, títulos 14/600 cinza, "Criar Agente de IA" 12/600 lilás) ============ */
.exia-root .exia-assignee {
  display: flex;
  width: 280px;
  height: auto;
  max-height: 380px;
  flex-direction: column;
  padding: 4px;
}
.exia-root .exia-assignee__search {
  flex: 0 0 auto;
  margin: 0 0 4px;
}
.exia-root .exia-assignee__body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: auto;
}
.exia-root .exia-assignee__heading {
  display: flex;
  height: 32px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0 6px;
  color: rgb(151, 160, 170);
  font-size: 14px;
  font-weight: 600;
}
.exia-root .exia-beta {
  padding: 0 6px;
  border-radius: 4px;
  background: #353c45;
  color: rgb(107, 164, 255);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
}
.exia-root .exia-assignee__create {
  display: flex;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  border-radius: 4px;
  color: rgb(147, 143, 255);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}
.exia-root .exia-assignee__row {
  display: flex;
  width: 100%;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  border-radius: 4px;
  color: rgb(207, 211, 216);
  font-size: 14px;
  text-align: left;
}
.exia-root .exia-assignee__row > span:not(.exia-avatar) {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exia-root .exia-assignee__create:hover,
.exia-root .exia-assignee__row:hover,
.exia-root .exia-assignee__row:focus-visible,
.exia-root .exia-assignee__row.is-selected {
  background: #ceced029;
}
.exia-root .exia-assignee__remove svg {
  margin: 0 2px;
}
.exia-root .exia-avatar {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #7851c1;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.exia-root .exia-avatar.is-ai {
  background: transparent;
  font-size: 15px;
}

/* Foto do próprio operador (perfil); o fundo roxo fica por trás até a imagem pintar. */
.exia-root .exia-avatar.has-photo {
  overflow: hidden;
}
.exia-root .exia-avatar__img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Cartão: inicial do responsável (IA = emoji); sem responsável não mostra avatar, como no respond.io. */
.inbox-page .inbox-conversation-card__channel.is-unassigned {
  display: none;
}
.inbox-page .escalax-assignee-initial {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
}

/* ============ v7 — ⋯ igual ao respond.io (medido em 25/09: 315px, padding 4, título 14/500, itens a cada 38px, alfinete 28px) ============ */
.exia-root .exia-more--respond {
  display: flex;
  width: 315px;
  height: auto;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  background: rgb(47, 47, 50);
}
.exia-root .exia-more__heading {
  display: flex;
  height: 32px;
  align-items: center;
  margin: 0;
  padding: 0 11px;
  color: rgb(151, 160, 170);
  font-size: 14px;
  font-weight: 500;
}
.exia-root .exia-more__row {
  display: flex;
  height: 34px;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
}
.exia-root .exia-more__row:hover {
  background: #ceced029;
}
.exia-root .exia-more--respond .exia-more__row .inbox-menu-action {
  min-width: 0;
  height: 34px;
  flex: 1 1 auto;
  margin: 0;
  padding: 0 10px;
  gap: 8px;
  border-radius: 4px;
  background: transparent !important;
  color: rgb(207, 211, 216) !important;
}
.exia-root .exia-more--respond .exia-more__row .inbox-menu-action:last-child {
  margin-top: 0;
}
.exia-root .exia-more--respond .inbox-menu-action.is-selected {
  background: transparent !important;
}
.exia-root .exia-more__row:has(.inbox-menu-action.is-selected) {
  background: #ceced029;
}
.exia-root .exia-pin {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  border-radius: 6px;
  color: rgb(82, 82, 86);
}
.exia-root .exia-pin:hover {
  color: rgb(151, 160, 170);
}
.exia-root .exia-pin.is-pinned {
  color: rgb(151, 160, 170);
}
.exia-root .exia-pin.is-pinned svg path {
  fill: currentColor;
}
.exia-root .exia-pin[data-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Pausar até */
.exia-root .exia-snooze {
  width: 300px;
  height: auto;
  padding: 4px;
}
.exia-root .exia-snooze .inbox-menu-action.exia-snooze__row {
  justify-content: space-between;
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0 10px;
  border-radius: 4px;
}
.exia-root .exia-snooze .exia-snooze__row:hover {
  background: #ceced029;
}
.exia-root .exia-snooze small {
  color: rgb(151, 160, 170);
  font-size: 12px;
}
.exia-root .exia-snooze__custom {
  display: flex;
  gap: 8px;
  padding: 6px 10px 8px;
}
.exia-root .exia-snooze__custom[hidden] {
  display: none;
}
.exia-root .exia-snooze__input {
  min-width: 0;
  flex: 1 1 auto;
}

/* Fixados no cabeçalho (slots estáticos do bundle; a sobreposição só liga o <body>). */
.inbox-page .escalax-pin-slot {
  display: none;
}
body[data-escalax-pins~="snooze"] .inbox-page .escalax-pin-slot[data-escalax-pin="snooze"],
body[data-escalax-pins~="workflows"] .inbox-page .escalax-pin-slot[data-escalax-pin="workflows"],
body[data-escalax-pins~="shortcuts"] .inbox-page .escalax-pin-slot[data-escalax-pin="shortcuts"] {
  display: inline-flex;
}
.inbox-page .escalax-pin-slot::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--exia-pin-icon) center / 20px 20px no-repeat;
  mask: var(--exia-pin-icon) center / 20px 20px no-repeat;
}
.inbox-page .escalax-pin-slot[data-escalax-pin="snooze"] {
  --exia-pin-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 22a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM9 2h6M12 2v4M10 12v4M14 12v4'/%3E%3C/svg%3E");
}
.inbox-page .escalax-pin-slot[data-escalax-pin="workflows"] {
  --exia-pin-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3h4v4h-4zM4 17h4v4H4zM16 17h4v4h-4zM12 7v5M6 17v-2.5c0-.8.7-1.5 1.5-1.5h9c.8 0 1.5.7 1.5 1.5V17'/%3E%3C/svg%3E");
}
.inbox-page .escalax-pin-slot[data-escalax-pin="shortcuts"] {
  --exia-pin-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M13 2 4.5 13.2c-.4.5 0 1.3.7 1.3H11l-1 7.5 8.5-11.2c.4-.5 0-1.3-.7-1.3H13l1-7.5Z'/%3E%3C/svg%3E");
}

/* ⋯ do cabeçalho: 28×28, raio 8, sem fundo parado; fundo só com o menu aberto (medido no respond.io). */
.inbox-page button[data-escalax-more="1"] {
  background: transparent;
  border-radius: 8px;
}
.inbox-page button[data-escalax-more="1"][aria-expanded="true"],
.inbox-page button[data-escalax-more="1"]:hover {
  background: rgb(62, 62, 65);
}

/* Cartão silenciado: o fim da pausa no lugar da prévia. */
.inbox-page .escalax-card-snoozed {
  color: rgb(151, 160, 170);
  font-size: 14px;
  font-style: normal;
}

/* v8 — "Fluxos de trabalho em andamento" cabe inteiro (respond.io: texto de 222px, alfinete encostado à direita). */
.exia-root .exia-more__row {
  gap: 0;
}
.exia-root .exia-pin {
  margin-right: 0;
}
.exia-root .exia-more--respond .exia-more__row .inbox-menu-action > span {
  overflow: visible;
  white-space: nowrap;
}

/* v11 — ⋯ do cabeçalho: três pontos lado a lado (mdi-dots-horizontal do respond.io), não o "more" triangular do iconsax. */
.inbox-page button[data-escalax-more="1"] > iconsax-icon {
  display: none !important;
}
.inbox-page button[data-escalax-more="1"]::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
.inbox-page button[data-escalax-more="1"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(207, 211, 216);
}

/* v12 — contadores como no respond.io (medido na conta de teste, 25/09): texto 14px/400 cinza, sem fundo; o da caixa selecionada fica claro. */
.inbox-page .inbox-filter-row strong,
.inbox-page .inbox-lifecycle-filter > strong {
  min-width: 0;
  margin-left: auto;
  padding: 0;
  background: none;
  color: rgb(151, 160, 170);
  font-size: 14px;
  font-weight: 400;
}
.inbox-page .inbox-filter-row.is-selected strong,
.inbox-page .inbox-lifecycle-filter.is-selected > strong {
  color: rgb(207, 211, 216);
}

/* v13 — separador e "Bloquear contato" em rgb(255,95,87) com ícone ⛔ (medido no respond.io). */
.exia-root .exia-more__separator {
  height: 1px;
  margin: 2px 6px;
  background: rgba(182, 188, 195, 0.16);
}
.exia-root .exia-more--respond .inbox-menu-action.exia-more__block {
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0 10px;
  gap: 8px;
  border-radius: 4px;
  color: rgb(207, 211, 216) !important;
}
.exia-root .exia-more--respond .inbox-menu-action.exia-more__block.is-danger {
  color: rgb(255, 95, 87) !important;
}
.exia-root .exia-more--respond .inbox-menu-action.exia-more__block:hover {
  background: #ceced029 !important;
}

/* v14 — construtor de fluxos: o ⚠️ "Workflow incompleto" abre a lista do que falta (pedido do Diego, 25/09). */
.workflow-builder-warning-details {
  position: relative;
  display: inline-flex;
}
.workflow-builder-warning-details > summary {
  display: inline-flex;
  cursor: pointer;
  list-style: none;
}
.workflow-builder-warning-details > summary::-webkit-details-marker {
  display: none;
}
.workflow-builder-warning-list {
  position: absolute;
  top: 32px;
  left: 50%;
  z-index: 90;
  width: 340px;
  max-height: 360px;
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid rgba(182, 188, 195, 0.16);
  border-radius: 8px;
  background: #2f2f32;
  box-shadow: 0 14px 36px #0000007a;
  color: #cfd3d8;
  font-size: 13px;
  line-height: 18px;
  transform: translateX(-50%);
}
.workflow-builder-warning-list strong {
  display: block;
  margin-bottom: 8px;
  color: rgb(255, 160, 36);
  font-size: 13px;
  font-weight: 600;
}
.workflow-builder-warning-list p {
  margin: 0 0 6px;
}
.workflow-builder-warning-list p:last-child {
  margin-bottom: 0;
}