/* FastFix CRM — Fila de atendimento, Funil de vendas e tela de Conversas mais limpa (carregado depois do fastfix-crm-plus.css) */
:root {
  --ffq-felipe: #e03131;
  --ffq-wait: #e8590c;
  --ffq-promise: #1c7ed6;
  --ffq-felipe-bg: #fff5f5;
  --ffq-promise-bg: #e7f5ff;
  --ffq-wait-bg: #fff4e6;
}

/* ---------------------------------------------------------------- topo mais enxuto */
body.ffp .inbox-summary { padding: 0 2px 6px !important; }
body.ffp .inbox-summary .sync-label { font-size: 12px !important; }
@media (min-width: 951px) {
  body.ffp .inbox-frame { height: calc(100dvh - 96px) !important; }
}

/* ---------------------------------------------------------------- cabeçalho da lista numa linha só */
body.ffp .list-heading { min-height: 52px !important; padding: 8px 12px !important; gap: 6px !important; flex-wrap: nowrap !important; align-items: center !important; }
body.ffp .list-heading > div { display: flex !important; align-items: baseline !important; gap: 6px !important; min-width: 0 !important; flex: 1 1 auto !important; }
body.ffp .list-heading h2 { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 15px !important; margin: 0 !important; }
body.ffp .list-heading > div > span { font-size: 12px !important; }
body.ffp .list-heading > svg { display: none !important; }
body.ffp .list-heading button { white-space: nowrap !important; flex: 0 0 auto !important; }
body.ffp .list-heading > div { min-width: 96px !important; }
/* "+ Nova conversa" vira "+ Nova" para o título caber na mesma linha */
body.ffp .list-heading .ffc-new-btn { padding: 0 10px !important; height: 30px !important; font-size: 0 !important; line-height: 1 !important; }
body.ffp .list-heading .ffc-new-btn::before { content: "+ Nova"; font-size: 13px; font-weight: 600; }
/* "Selecionar" (encerrar várias) vira ícone; o total de conversas sai do cabeçalho para o título caber */
body.ffp .list-heading .ffc-select-btn { padding: 0 !important; width: 30px !important; min-width: 30px !important; height: 30px !important; font-size: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
body.ffp .list-heading .ffc-select-btn::before { content: ""; width: 16px; height: 16px; background: currentColor; -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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E") center / contain 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E") center / contain no-repeat; }
body.ffp .list-heading > div > span { display: none !important; }
.ffq-order {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border-radius: 999px;
  border: 1px solid var(--ffp-line); background: #fff; color: var(--ffp-ink-2); font: 600 12.5px system-ui, sans-serif; cursor: pointer; flex: 0 0 auto;
}
.ffq-order .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ffp-muted); }
.ffq-order[data-mode="fila"] { color: var(--ffp-green-dark); border-color: #b2ead9; background: #f2fbf8; }
.ffq-order[data-mode="fila"] .dot { background: var(--ffp-green); }
.ffq-order:hover { filter: brightness(.97); }

/* Filtros: quebram linha em vez de ficarem cortados */
body.ffp .inbox-filters { flex-wrap: wrap !important; overflow: visible !important; height: auto !important; gap: 6px !important; row-gap: 6px !important; padding: 2px 12px 8px !important; }
body.ffp .inbox-filters [data-slot="tabs-trigger"] { height: 26px !important; padding: 2px 10px !important; font-size: 12.5px !important; }

/* ---------------------------------------------------------------- linhas da lista mais compactas */
body.ffp button.thread { min-height: 64px !important; gap: 11px !important; padding-left: 12px !important; flex: none !important; }
body.ffp button.thread .thread-content { min-height: 64px !important; padding: 8px 12px 8px 0 !important; gap: 1px !important; }
body.ffp button.thread .contact-avatar { width: 42px !important; height: 42px !important; min-width: 42px !important; font-size: 14px !important; }
body.ffp button.thread .thread-line b { font-size: 15px !important; }
body.ffp button.thread .thread-preview { font-size: 13.5px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; }
body.ffp button.thread .thread-content > .thread-line:last-child { min-height: 18px; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; padding-right: 92px; min-width: 0; }
/* A etiqueta da Fila/etapa substitui "Com atendente" / "Aguardando equipe" */
body.ffp button.thread.ffq-tagged .mode-label { display: none !important; }
.ffq-tag {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 11.5px/18px system-ui, sans-serif; border-radius: 6px; padding: 0 7px; color: var(--ffp-ink-2); background: var(--ffp-header);
}
.ffq-tag.felipe { color: var(--ffq-felipe); background: var(--ffq-felipe-bg); }
.ffq-tag.promise { color: var(--ffq-promise); background: var(--ffq-promise-bg); }
.ffq-tag.stage.ready { color: #2b8a3e; background: #ebfbee; }
.ffq-tag.stage.store { color: #8a4b00; background: #fff4e6; }
.ffq-tag.stage.scheduled { color: #0b7285; background: #e3fafc; }
.ffq-tag.stage.closed { color: var(--ffp-muted); font-weight: 500; }

/* ---------------------------------------------------------------- Fila: blocos com título */
.ffq-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px 6px; position: sticky; top: 0; z-index: 2;
  background: #fff; font: 700 12px system-ui, sans-serif; letter-spacing: .02em; text-transform: uppercase; color: var(--ffp-muted);
  border-bottom: 1px solid var(--ffp-line);
}
.ffq-head b { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; color: #fff; background: var(--ffp-muted); }
.ffq-head.felipe { color: var(--ffq-felipe); } .ffq-head.felipe b { background: var(--ffq-felipe); }
.ffq-head.wait { color: var(--ffq-wait); } .ffq-head.wait b { background: var(--ffq-wait); }
.ffq-head.promise { color: var(--ffq-promise); } .ffq-head.promise b { background: var(--ffq-promise); }
.ffq-head.rest { font-weight: 600; }
.ffq-head.rest.clear { color: #2b8a3e; text-transform: none; letter-spacing: 0; font-size: 13px; padding: 12px 14px; background: #f4fbf6; }
body:not(.ffq-fila) .ffq-head { display: none !important; }
/* Na aba Grupos a Fila não se aplica */
body.ffc-groups .ffq-head { display: none !important; }
body.ffp button.thread[data-ffq-sec="1"] { box-shadow: inset 3px 0 0 var(--ffq-felipe) !important; }
body.ffp button.thread[data-ffq-sec="2"] { box-shadow: inset 3px 0 0 var(--ffq-wait) !important; }
body.ffp button.thread[data-ffq-sec="3"] { box-shadow: inset 3px 0 0 var(--ffq-promise) !important; }

/* ---------------------------------------------------------------- topo do chat numa linha, botões secundários só com ícone */
body.ffp header.chat-top { min-height: 56px !important; padding: 6px 12px !important; gap: 10px !important; flex-wrap: nowrap !important; align-items: center !important; }
body.ffp header.chat-top .chat-title { flex: 0 1 auto !important; width: 46% !important; min-width: 240px !important; max-width: 480px !important; display: flex !important; flex-direction: column !important; gap: 1px !important; }
body.ffp header.chat-top .chat-title b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ffp header.chat-top .chat-controls { flex-wrap: wrap !important; justify-content: flex-end !important; gap: 2px !important; align-items: center !important; flex: 1 1 0 !important; min-width: 0 !important; }
body.ffp header.chat-top .chat-controls > button { white-space: nowrap !important; flex: 0 0 auto !important; }
body.ffp header.chat-top .chat-controls > button.ffp-sale-btn,
body.ffp header.chat-top .chat-controls > button.ffp-book-btn,
body.ffp header.chat-top .chat-controls > button.ffo-chat-btn { height: 32px !important; padding: 0 10px !important; font-size: 12.5px !important; }
body.ffp header.chat-top .chat-controls > button.triage-btn,
body.ffp header.chat-top .chat-controls > button.lojista-btn,
body.ffp header.chat-top .chat-controls > button.fastfix-schedule-btn,
body.ffp header.chat-top .chat-controls > button.fastfix-crm-btn,
body.ffp header.chat-top .chat-controls > button.ffc-pin-btn {
  font-size: 0 !important; width: 34px !important; min-width: 34px !important; padding: 0 !important; justify-content: center !important; gap: 0 !important; position: relative;
}
body.ffp header.chat-top .chat-controls > button.triage-btn svg,
body.ffp header.chat-top .chat-controls > button.lojista-btn svg,
body.ffp header.chat-top .chat-controls > button.fastfix-schedule-btn svg { width: 17px !important; height: 17px !important; margin: 0 !important; }
/* Fixar e Contato/CRM não têm ícone próprio: ícone desenhado aqui */
body.ffp header.chat-top .chat-controls > button.ffc-pin-btn::before,
body.ffp header.chat-top .chat-controls > button.fastfix-crm-btn::before {
  content: ""; width: 17px; height: 17px; background: currentColor; display: block;
  -webkit-mask: var(--ffq-ic) center / contain no-repeat; mask: var(--ffq-ic) center / contain no-repeat;
}
body.ffp header.chat-top .chat-controls > button.ffc-pin-btn { --ffq-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E"); }
body.ffp header.chat-top .chat-controls > button.fastfix-crm-btn { --ffq-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M22 11h-6'/%3E%3C/svg%3E"); }
body.ffp header.chat-top .chat-controls > button.ffc-pin-btn.on { background: #fff4e6 !important; }
/* Dica ao passar o mouse nos botões só com ícone */
body.ffp header.chat-top .chat-controls > button[aria-label]:is(.triage-btn, .lojista-btn, .fastfix-schedule-btn, .fastfix-crm-btn, .ffc-pin-btn):hover::after {
  content: attr(aria-label); position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; white-space: nowrap;
  background: var(--ffp-ink); color: #fff; font: 500 12px system-ui, sans-serif; padding: 5px 8px; border-radius: 6px; pointer-events: none;
}
body.ffp header.chat-top .chat-controls > button.takeover { font-weight: 600 !important; color: var(--ffp-green-dark) !important; }

/* Etapa e promessa embaixo do nome no chat */
.ffq-chatbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; font: 12px system-ui, sans-serif; white-space: normal; }
.ffq-sel { display: inline-flex; align-items: center; gap: 4px; color: var(--ffp-muted); }
.ffq-sel select { font: 600 12px system-ui, sans-serif; color: var(--ffp-ink-2); border: 1px solid var(--ffp-line); background: #fff; border-radius: 6px; padding: 2px 4px; cursor: pointer; max-width: 170px; }
.ffq-auto { font-weight: 600; border-radius: 6px; padding: 2px 7px; background: var(--ffp-header); color: var(--ffp-ink-2); }
.ffq-auto.ready { color: #2b8a3e; background: #ebfbee; } .ffq-auto.store { color: #8a4b00; background: #fff4e6; } .ffq-auto.scheduled { color: #0b7285; background: #e3fafc; }
.ffq-prom { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; line-height: 1.35; color: var(--ffq-promise); background: var(--ffq-promise-bg); border-radius: 6px; padding: 2px 4px 2px 8px; font-weight: 600; max-width: 100%; }
.ffq-prom button { border: 0; background: #fff; color: var(--ffq-promise); font: 600 11.5px system-ui, sans-serif; border-radius: 5px; padding: 2px 7px; cursor: pointer; }
.ffq-prom button:hover { background: #d0ebff; }

/* Resumo amarelo da transferência: mais discreto */
body.ffp .conversation-mode { font-size: 13px !important; padding: 6px 14px !important; line-height: 1.4 !important; }

/* Ações de cada mensagem (Editar, Responder) só aparecem ao passar o mouse */
body.ffp article.chat-message footer button { opacity: 0 !important; transition: opacity .12s; }
body.ffp article.chat-message:hover footer button,
body.ffp article.chat-message footer button:focus-visible { opacity: 1 !important; }

/* Contador de não lidas dos grupos (milhares) não ajuda: some do menu */
#ffc-tab-groups .fastfix-nav-badge { display: none !important; }

/* Aviso dos Anúncios Meta: no canto de baixo, sem cobrir o topo da tela */
#ffads-toast { top: auto !important; bottom: 16px !important; }

/* ---------------------------------------------------------------- aba Funil */
body.ffq-on main.workspace > .page-heading,
body.ffq-on .main-tabs > [data-slot="tabs-content"],
body.ffq-on #fastfix-agent-flow-container,
body.ffq-on #ffp-dashboard,
body.ffq-on main.workspace > section:not(#ffq) { display: none !important; }
body.ffq-on .modern-workspace .navigation [data-slot="tabs-trigger"][data-state="active"]:not(.ffp-nav-btn) { background: transparent !important; color: var(--ffp-ink-2) !important; font-weight: 500 !important; }
#ffq { display: none; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ffp-ink); }
body.ffq-on #ffq { display: flex; flex-direction: column; height: calc(100dvh - 40px); min-height: 480px; }
.ffq-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.ffq-top h1 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.ffq-top p { margin: 4px 0 0; color: var(--ffp-muted); font-size: 13px; max-width: 720px; }
.ffq-search { border: 1px solid var(--ffp-line); background: #fff; border-radius: 8px; padding: 8px 11px; font: inherit; width: min(280px, 100%); }
.ffq-board { flex: 1; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(176px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.ffq-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--ffp-header); border-radius: 12px; border: 2px solid transparent; transition: border-color .12s, background .12s; }
.ffq-col .ch { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 10px 12px 8px; border-top: 4px solid var(--ffq-col, var(--ffp-muted)); border-radius: 10px 10px 0 0; }
.ffq-col .ch b { font-size: 13.5px; }
.ffq-col .ch .n { margin-left: auto; font: 700 12px system-ui, sans-serif; color: var(--ffp-muted); background: #fff; border-radius: 999px; padding: 1px 8px; }
.ffq-col .ch small { flex-basis: 100%; color: var(--ffp-muted); font-size: 11.5px; }
.ffq-col .cards { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.ffq-col .empty { color: var(--ffp-muted); font-size: 12.5px; text-align: center; padding: 18px 8px; border: 1px dashed #cfd6da; border-radius: 10px; }
.ffq-col.c-new { --ffq-col: #868e96; } .ffq-col.c-quoted { --ffq-col: #7048e8; } .ffq-col.c-scheduled { --ffq-col: #0c8599; }
.ffq-col.c-store { --ffq-col: #e8590c; } .ffq-col.c-ready { --ffq-col: #2b8a3e; } .ffq-col.c-closed { --ffq-col: #495057; }
.ffq-col.over { border-color: var(--ffp-green); background: #ebfbf5; }
body.ffq-dragging .ffq-col.auto { opacity: .55; }
.ffq-card { flex: none; min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--ffp-line); border-radius: 10px; padding: 8px 10px; cursor: pointer; display: grid; gap: 3px; box-shadow: 0 1px 1px rgba(11,20,26,.04); }
.ffq-card[draggable="true"] { cursor: grab; }
.ffq-card:hover, .ffq-card:focus-visible { border-color: #b8c4ca; outline: none; }
.ffq-card.dragging { opacity: .45; }
.ffq-card .t { display: flex; gap: 8px; align-items: baseline; }
.ffq-card .t b { font-size: 13.5px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ffq-card .t time { font-size: 11.5px; color: var(--ffp-muted); white-space: nowrap; }
.ffq-card .w { font-size: 12.5px; color: var(--ffp-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ffq-card .f { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.ffq-card .f > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ffq-card .pill, .ffq-card .meta { font: 600 11px/18px system-ui, sans-serif; border-radius: 6px; padding: 0 6px; white-space: nowrap; }
.ffq-card .meta { background: var(--ffp-header); color: var(--ffp-ink-2); }
.ffq-card .pill.s1 { background: var(--ffq-felipe-bg); color: var(--ffq-felipe); }
.ffq-card .pill.s2 { background: var(--ffq-wait-bg); color: var(--ffq-wait); }
.ffq-card .pill.s3 { background: var(--ffq-promise-bg); color: var(--ffq-promise); }

/* Modal "Encerrar" */
.ffq-modal { width: min(460px, calc(100vw - 32px)) !important; }
.ffq-close { padding: 4px 20px 20px; display: grid; gap: 14px; }
.ffq-close .grp { display: flex; flex-wrap: wrap; gap: 6px; }
.ffq-close .grp small { flex-basis: 100%; color: var(--ffp-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.ffq-close .opt { border: 1px solid var(--ffp-line); background: #fff; border-radius: 999px; padding: 6px 12px; font: 500 13px system-ui, sans-serif; cursor: pointer; color: var(--ffp-ink); }
.ffq-close .opt.ok:hover, .ffq-close .opt.ok:focus-visible { border-color: #8ce99a; background: #ebfbee; }
.ffq-close .opt.bad:hover, .ffq-close .opt.bad:focus-visible { border-color: #ffa8a8; background: #fff5f5; }
.ffq-close form.other { display: flex; gap: 6px; flex-basis: 100%; }
.ffq-close form.other input { flex: 1; border: 1px solid var(--ffp-line); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; }

@media (max-width: 950px) {
  body.ffp header.chat-top { flex-wrap: wrap !important; }
  body.ffp header.chat-top .chat-controls { flex-wrap: wrap !important; }
  body.ffq-on #ffq { height: auto; }
  .ffq-board { grid-auto-columns: minmax(78vw, 1fr); }
}

/* Na Fila, a cor fica só na barra lateral, no anel da foto e no selo de tempo (sem fundo rosa piscando em várias linhas) */
body.ffq-fila.ffp button.thread[data-ffq-sec][data-ffp-level] { background: #fff !important; animation: none !important; }
body.ffq-fila.ffp button.thread[data-ffq-sec][data-ffp-level]:hover { background: var(--ffp-hover) !important; }
body.ffq-fila.ffp button.thread[data-ffq-sec].selected { background: #f0f2f5 !important; }

/* "Registrar venda" vira "Venda" (mesmo botão verde), para sobrar espaço para o nome do cliente */
body.ffp header.chat-top .chat-controls > button.ffp-sale-btn { font-size: 0 !important; gap: 0 !important; }
body.ffp header.chat-top .chat-controls > button.ffp-sale-btn::before { content: "💰 Venda"; font-size: 12.5px; font-weight: 600; }

/* "CRM e retornos" vira "Retornos programados"; o Kanban (igual ao Funil de vendas) fica escondido. */
html body .main-tabs button[data-ffq-rename] { --ffq-gap: 6px; }
html body.ffp .modern-workspace .navigation.navigation > button[data-ffq-rename]:not(.ffn-h) { --ffq-gap: 10px; }
html body .main-tabs button[data-ffq-rename], html body .crm-heading h2[data-ffq-rename],
html body.ffp .modern-workspace .navigation.navigation > button[data-ffq-rename]:not(.ffn-h) { font-size: 0 !important; }
html body .main-tabs button[data-ffq-rename]::after,
html body.ffp .modern-workspace .navigation.navigation > button[data-ffq-rename]:not(.ffn-h)::after { content: attr(data-ffq-rename) !important; font-size: 13px !important; margin-left: calc(-1 * var(--ffq-gap, 10px)) !important; display: inline !important; position: static !important; width: auto !important; height: auto !important; background: none !important; opacity: 1 !important; transform: none !important; }
html body .crm-heading h2[data-ffq-rename]::after { content: attr(data-ffq-rename); font-size: 22px; }
.crm-panel [id$="-trigger-board"] { display: none !important; }