/* Limpeza visual das Conversas (app/limpeza.js). Topo enxuto (busca + abas + Filtros) na Lista e, desde 21/10/2026, também
   na grade (body.tzl-largo, só no computador). Linha enxuta e Espiar só no modo Lista (body.tzl). */
.tzl-tabs, .tzl-grid-btn { display: none; }
@media (max-width: 760px) {
  .tzl-tabs { display: flex; gap: 8px; margin: 0 0 10px; padding-bottom: 4px; }
  .tzl-tab { flex: 0 0 auto; padding: 8px 10px; border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 12px; }
  .tzl-tab.active { background: var(--blue2); color: var(--blue); font-weight: 700; }
  .tzl-tab b { margin-left: 5px; }
  .tzl-agent, .tzl-mine, .tzl-filters-btn { display: none; }
  #conversations .card.tzl-not-mine { display: none !important; }
}
body.tzl .tzl-grid-btn { display: inline-block; margin-left: auto; margin-right: 6px; border: 1px solid var(--tz-outline-control); background: var(--panel); border-radius: var(--tz-r-sm); padding: 7px 10px; font: inherit; font-size: 13px; line-height: 1; color: var(--muted); cursor: pointer; }
body.tzl-largo .tzl-tabs { display: flex; min-width: 0; overflow: hidden; padding-bottom: 1px; align-items: center; gap: 0; margin: 0 0 8px; max-width: 100%; border-bottom: 1px solid var(--line); }
body.tzl .tzl-grid-btn { display: inline-block; margin-left: auto; margin-right: 6px; border: 1px solid var(--tz-outline-control); background: var(--panel); border-radius: var(--tz-r-sm); padding: 7px 10px; font: inherit; font-size: 13px; line-height: 1; color: var(--muted); cursor: pointer; }
body.tzl-largo .tzl-tabs { display: flex; min-width: 0; overflow: hidden; padding-bottom: 1px; align-items: center; gap: 0; margin: 0 0 8px; max-width: 100%; border-bottom: 1px solid var(--tz-outline-divider); }
body.tzl-largo .tzl-tab { border: 0; background: none; padding: 8px 3px; font: inherit; font-size: 12px; white-space: nowrap; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
body.tzl-largo .tzl-tab b { margin-left: 3px; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--blue2); color: var(--muted); font-weight: 600; }
body.tzl-largo .tzl-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
body.tzl-largo .tzl-tab.active b { background: var(--blue); color: #fff; }
body.tzl-largo .tzl-filters-btn { margin-left: auto; flex: none; border: 1px solid var(--tz-outline-control); background: var(--panel); border-radius: var(--tz-r-sm); padding: 4px 9px; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
body.tzl-largo .tzl-filters-btn.active, body.tzl-largo .tzl-filters-btn.on { color: var(--blue); border-color: var(--blue); }
/* "Minhas + fila": botão de ligar/desligar ao lado de Filtros; com ele ligado, conversas de outras pessoas somem */
body.tzl-largo .tzl-mine { margin-left: auto; flex: none; border: 1px solid var(--tz-outline-container); background: var(--panel); border-radius: var(--tz-r-md); padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
body.tzl-largo .tzl-mine b { margin-left: 5px; font-size: 11px; font-weight: 600; }
body.tzl-largo .tzl-mine.on { background: var(--blue2); border-color: var(--blue); color: var(--blue); }
body.tzl-largo .tzl-mine + .tzl-filters-btn { margin-left: 6px; }
/* "Atendente ▾" (22/10/2026): fica à vista no topo; com uma pessoa escolhida, ocupa o lugar do "Minhas + fila" */
body.tzl-largo .tzl-agent { margin-left: auto; flex: none; border: 1px solid var(--tz-outline-container); background: var(--panel); border-radius: var(--tz-r-md); padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
body.tzl-largo .tzl-agent.on { background: var(--blue2); border-color: var(--blue); color: var(--blue); }
body.tzl-largo .tzl-agent + .tzl-mine, body.tzl-largo .tzl-agent + .tzl-filters-btn { margin-left: 6px; }
body.tzl .tzl-agent { font-size: 11.5px !important; padding: 3px 8px !important; }
/* conversa aberta ao lado da grade (topo estreito): Atendente, Minhas + fila e Filtros descem em vez de serem cortados */
body.tzl-largo .tzl-tabs { flex-wrap: wrap; row-gap: 6px; overflow: visible; }
/* em Filtros saem os botões repetidos nas abas e no topo (abertos, atendente, não atendidas, finalizados) */
body.tzl-largo #teamFilters > .team-filter[data-scope], body.tzl-largo #teamFilters > .tztp-agents, body.tzl-largo #teamFilters > .team-label { display: none !important; }
body.tzl-largo #conversations .card.tzl-not-mine { display: none !important; }
/* na Lista (coluna estreita) as abas ficam numa linha e "Minhas + fila" e "Filtros" descem para a de baixo, à direita */
body.tzl .tzl-tabs { flex-wrap: wrap; row-gap: 6px; padding-bottom: 6px; overflow: visible; height: auto; max-height: none; }
body.tzl .tzl-mine { font-size: 11.5px !important; padding: 3px 8px !important; margin-left: auto; }
/* na grade há espaço: abas maiores e mais afastadas */
body.tzl-largo:not(.tzl) .tzl-tabs { margin: 2px 0 12px; }
body.tzl-largo:not(.tzl) .tzl-tab { padding: 9px 4px; margin-right: 18px; font-size: 13px; }

/* status e etiqueta ficam nas abas e em Filtros: os botões antigos "Todos os status" e "Todas as tags" saem (eram repetidos) */
body.tzl-largo .toolbar > #status, body.tzl-largo .toolbar > #tags { display: none !important; }
/* filtros recolhidos: na grade ficam a busca e "Exibição" (troca para Lista); na Lista, só a busca (o ▦ volta para a grade) */
body.tzl-largo:not(.tzl-filters-open) .toolbar > :not(.search):not(.tzc-view-button),
body.tzl-largo:not(.tzl-filters-open) #teamFilters { display: none !important; }
body.tzl:not(.tzl-filters-open) .toolbar > .tzc-view-button { display: none !important; }
body.tzl .toolbar { margin-bottom: 4px; }

/* linha enxuta: o atraso fica só na cor do tempo */
body.tzl .conversations.list .card .waiting-time { background: none !important; border: 0 !important; padding: 0 !important; font-weight: 700; }

/* cabeçalho da conversa: o convite "Ligar a uma empresa" só aparece ao passar o mouse */
body.tzl .drawer-head .tzbc-chip.ghost { opacity: 0; transition: opacity .15s; }
body.tzl .drawer-head:hover .tzbc-chip.ghost, body.tzl .drawer-head .tzbc-chip.ghost:focus-visible { opacity: 1; }

/* Espiar: olhinho no canto da linha, aparece ao passar o mouse */
body.tzl .conversations.list .card { position: relative; }
body.tzl .conversations.list .card .tzl-peek { position: absolute; right: 10px; top: 28px; width: 24px; height: 24px; padding: 0; border: 1px solid var(--tz-outline-container); border-radius: var(--tz-r-md); background: var(--panel); font-size: 12px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; filter: grayscale(1); }
body.tzl .conversations.list .card:hover .tzl-peek, body.tzl .conversations.list .card .tzl-peek:focus-visible { opacity: 1; }