/* Vidro neutro: reflexos, bordas polidas e profundidade.
   Porte da comprecomigo (cbef136..fe46dd3) pra Samara em 06/10/2026 — mesma paleta Onyx & Ouro.
   Abas: Ativos, Fechados, Pedidos, Repasses, Fornecedores, Monitor IA (6). */
.tabs, .ann-toptabs { column-gap: .5cm; }
.ann-toptabs { align-items: center; padding-block: 7px; }
.tab-btn[data-tab] { --tab-rgb: 110, 110, 110; }
body .tab-btn[data-tab] {
  zoom: .8;
  flex-shrink: 0;
  min-height: 46px;
  padding: 7px 12px;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.24);
  border-top-color: rgba(255,255,255,.65);
  border-left-color: rgba(255,255,255,.5);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255,255,255,.18), transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(255,255,255,.14), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025) 55%, rgba(255,255,255,.08));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7), inset 1px 0 1px rgba(255,255,255,.25),
    inset 0 -1px 1px rgba(255,255,255,.35), inset -1px 0 2px rgba(0,0,0,.09),
    0 4px 6px -2px rgba(0,0,0,.25), 2px 2px 4px rgba(0,0,0,.07);
  backdrop-filter: blur(6px) saturate(.2);
  -webkit-backdrop-filter: blur(6px) saturate(.2);
  color: #343434;
  font-size: 12px;
  font-weight: 750;
  opacity: 1;
  transition: background-color .18s, box-shadow .18s, transform .18s;
}
/* Ícone em SVG inline (antes: fonte de ícones, que chegava depois e alargava o botão). 1em = font-size abaixo. */
body .tab-btn[data-tab] .tab-icon { font-size: 27px; width: 1em; height: 1em; display: block; color: inherit; flex-shrink: 0; }
/* As abas da barra superior só aparecem com fonte, contagens e alinhamento no lugar: entram sem se mexer. */
.ann-toptabs { transition: opacity .16s ease; }
.ann-toptabs.is-settling { opacity: 0; pointer-events: none; transition: none; }
body .tab-btn[data-tab]::after { content: '\203A'; font-size: 22px; font-weight: 400; margin-left: auto; opacity: .65; }
body .tab-btn[data-tab]:hover { background-color: rgba(255,255,255,.08); }
body .tab-btn[data-tab].active {
  border-color: rgba(255,255,255,.6);
  background-color: rgba(255,255,255,.09);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.85), inset 0 -1px 1px rgba(255,255,255,.5),
    0 0 0 1px rgba(0,0,0,.12), 0 4px 7px -2px rgba(0,0,0,.3);
}
body .tab-btn[data-tab]:focus-visible { outline: 3px solid rgb(var(--tab-rgb)); outline-offset: 2px; }
body .tab-btn[data-tab] .tab-count {
  color: inherit;
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
}
/* No escuro, o vidro preserva os tons quentes do fundo da loja. */
[data-theme="dark"] body .tab-btn[data-tab] {
  --tab-rgb: 207, 185, 153;
  color: var(--text);
  border-color: rgba(207,185,153,.18);
  border-top-color: rgba(236,220,196,.32);
  border-left-color: rgba(236,220,196,.25);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(236,220,196,.1), transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(236,220,196,.07), transparent 40%),
    linear-gradient(135deg, rgba(207,185,153,.045), rgba(207,185,153,.015) 55%, rgba(207,185,153,.05));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 1px rgba(236,220,196,.26), inset 1px 0 1px rgba(236,220,196,.1),
    inset 0 -1px 1px rgba(236,220,196,.13), 0 3px 6px -2px rgba(0,0,0,.3);
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
[data-theme="dark"] body .tab-btn[data-tab]:hover { background-color: rgba(207,185,153,.06); }
[data-theme="dark"] body .tab-btn[data-tab].active {
  border-color: rgba(207,185,153,.45);
  background-color: rgba(207,185,153,.08);
  box-shadow: inset 0 1px 2px rgba(236,220,196,.38), inset 0 -1px 1px rgba(236,220,196,.2),
    0 3px 7px -2px rgba(0,0,0,.3);
}
[data-theme="dark"] body .tab-btn[data-tab] .tab-icon { color: inherit; }
[data-theme="dark"] body .tab-btn[data-tab] .tab-count {
  color: var(--text);
  background: rgba(207,185,153,.12);
  border-color: rgba(207,185,153,.18);
}
body .tab-btn[data-tab]:active { transform: scale(.97); }
@media (max-width: 640px) {
  body .tabs { gap: 6px; padding: 7px 6px; }
  body .tabs .tab-btn[data-tab] { flex: 1 0 auto; min-height: 44px; padding: 6px 8px; font-size: 11px; gap: 5px; }
  body .tabs .tab-btn[data-tab] .tab-icon { order: -1; font-size: 21px; }
  body .tabs .tab-btn[data-tab]::after { display: none; }
}
/* ── Tablet (761–1024px) — 28/09/2026, porte da Micarla (60c0de7) ─────────
   Acima de 1024 as abas sobem pra barra superior. Aqui ficavam na faixa com
   largura natural e, centralizadas numa faixa estreita, vazavam pelos DOIS lados
   (iPad em pé: "Anúncios Ativos" e "Monitor IA" cortados). Agora as 6 dividem a
   linha por igual, com nome curto e o ícone antes (o nome inteiro cortava até 1024px). */
@media (min-width: 761px) and (max-width: 1024px) {
  body .tabs { flex-wrap: nowrap; justify-content: center; column-gap: 8px; padding: 8px 12px; overflow: visible; }
  body .tabs .tab-btn[data-tab] { zoom: 1; flex: 1 1 0; min-width: 0; max-width: 220px; justify-content: center; min-height: 42px; padding: 6px 8px; gap: 6px; font-size: 12.5px; border-radius: 14px; white-space: nowrap; }
  body .tabs .tab-btn[data-tab] .tab-icon { font-size: 20px; }
  body .tabs .tab-btn[data-tab]::after { display: none; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  body .tabs .tab-btn[data-tab] > span:not(.tab-count) { display: none; }
  body .tabs .tab-btn[data-tab]::before { content: attr(data-short); }
  body .tabs .tab-btn[data-tab] .tab-icon { order: -1; }
}
/* ── Notebook / iPad deitado (1025–1499px), abas NA BARRA SUPERIOR — 28/09/2026 ──
   As 6 abas com nome inteiro pedem ~930px; ao lado da saudação sobravam 535 (1040),
   675 (1180) e 861 (1366): "Monitor IA" saía cortado e o resto só por rolagem lateral.
   Nome curto + sem a setinha; até 1199px a saudação sai do topo (como no celular). */
@media (min-width: 1025px) and (max-width: 1499px) {
  body.ann-tabs-in-top .ann-toptabs { column-gap: 10px; }
  body.ann-tabs-in-top .ann-toptabs .tab-btn[data-tab] { padding: 7px 11px; gap: 7px; }
  body.ann-tabs-in-top .ann-toptabs .tab-btn[data-tab] > span:not(.tab-count) { display: none; }
  body.ann-tabs-in-top .ann-toptabs .tab-btn[data-tab]::before { content: attr(data-short); }
  body.ann-tabs-in-top .ann-toptabs .tab-btn[data-tab] .tab-icon { order: -1; }
  body.ann-tabs-in-top .ann-toptabs .tab-btn[data-tab]::after { display: none; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  body.ann-tabs-in-top .mf-top__who { display: none; }
}
/* ── Celular (≤760px) — 28/09/2026 ──────────────────────────────────────────
   Eram 4 abas + 2 esticadas numa 2ª fileira. Agora as 6 numa linha só: ícone em
   cima, nome curto embaixo, e o contador vira selinho no canto (não come largura). */
@media (max-width: 760px) {
  body .tabs { flex-wrap: nowrap; justify-content: space-between; column-gap: 4px; padding: 10px 6px 8px; overflow: visible; }
  body .tabs::after { display: none; } /* a quebra forçada antiga (100%) espremia as abas */
  body .tabs .tab-btn[data-tab] { zoom: 1; position: relative; overflow: visible; flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; align-items: center; min-height: 50px; padding: 5px 1px; gap: 3px; font-size: 10.5px; letter-spacing: -.02em; line-height: 1.1; border-radius: 12px; white-space: nowrap; }
  body .tabs .tab-btn[data-tab] .tab-icon { order: -1; font-size: 19px; }
  body .tabs .tab-btn[data-tab]::after { display: none; }
  body .tabs .tab-btn[data-tab] .tab-count { position: absolute; top: -7px; right: -3px; min-width: 16px; height: 16px; line-height: 14px; font-size: 9px !important; padding: 0 4px !important; margin: 0; border-radius: 99px; text-align: center; background: var(--surface2, var(--surface)) !important; border: 1px solid var(--border); }
  body .tabs .tab-btn[data-tab] .tab-count:empty { display: none; }
}
/* ── Celular: vendedoras numa linha só (28/09/2026, pedido do dono) ──────────
   No Fechados a linha era `nowrap` com o filtro, a busca e o botão juntos: o filtro
   ficava espremido e Todas / Brena / Camila empilhavam em 3 linhas, com a busca
   cortada ("Busca"). Agora: 1ª linha = as vendedoras lado a lado dividindo a largura;
   2ª linha = busca (cresce) + "+ Anúncio Manual". Vale pras três abas com filtro. */
@media (max-width: 760px) {
  body #tabAtivos .ann-search-row, body #tabFechados .ann-search-row, body #tabPedidos .ann-search-row { flex-wrap: wrap !important; justify-content: flex-start !important; row-gap: 8px !important; padding-left: 10px !important; padding-right: 10px !important; }
  /* Samara: 7 vendedoras + Todas + Sem vendedora não cabem divididas na largura
     (a comprecomigo tem 2). Fila própria, chips no tamanho natural e rolagem de
     lado — a regra de "uma fila só, nunca amontoa" da página continua valendo. */
  body .tab-content .ann-search-row > .sender-filter:not(:empty) { order: -1 !important; flex: 1 0 100%; min-width: 0; flex-wrap: nowrap; gap: 6px; padding-left: 2px; justify-content: flex-start; }
  body .ann-search-row > .sender-filter .sender-chip { flex: 0 0 auto; height: 34px; }
  body #tabFechados .ann-search-row .tabs-search { flex: 1 1 0 !important; min-width: 0; }
  body #tabFechados .ann-search-row > button { height: 36px !important; border-radius: 18px !important; }
  body #tabFechados .ann-search-row .tabs-search input { height: 36px !important; }
}
/* Celular pequeno (≤360px): chips um pouco mais compactos. */
@media (max-width: 360px) {
  body .ann-search-row > .sender-filter .sender-chip { gap: 4px; font-size: 11px; padding: 0 5px 0 3px; }
  body .ann-search-row > .sender-filter .sender-chip__ava { width: 20px; height: 20px; }
  body .ann-search-row > .sender-filter .sender-chip__n { min-width: 18px; height: 18px; padding: 0 4px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { body .tab-btn[data-tab] { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   BUSCA "Buscar por #enquete ou produto…" — barra-pílula de vidro com lupa
   escura (porte da Micarla 2929bd1 / Talita 3ec89e9, 06/10/2026). Campo à
   esquerda + botão noir com a lupa à direita; o ✕ de limpar aparece entre os
   dois quando há texto. 300×34px → 364×42px. Cores no Onyx & Ouro da Samara
   (ouro #cfa872 no foco e no botão do escuro, tons quentes no vidro escuro).
   ═══════════════════════════════════════════════════════════════════════ */
body .ann-searchbar {
  position: relative; display: flex; align-items: stretch; gap: 4px;
  width: 100%; max-width: 364px; height: 42px; padding: 3px;
  box-sizing: border-box; border-radius: 999px; overflow: visible;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -1px 1px rgba(24, 19, 16, .05),
    0 4px 10px -4px rgba(24, 19, 16, .22);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  transition: box-shadow .18s, border-color .18s, background-color .18s;
}
body .ann-searchbar:focus-within {
  border-color: rgba(207, 168, 114, .75);
  background: rgba(255, 255, 255, .26);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .8), 0 0 0 3px rgba(207, 168, 114, .2), 0 4px 10px -4px rgba(24, 19, 16, .26);
}
body .ann-searchbar input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  padding: 0 10px 0 15px; border: 0; outline: none; background: transparent;
  color: var(--text); font-size: 14px; font-weight: 600;
}
body .ann-searchbar input::placeholder { color: var(--text-muted); opacity: .75; font-weight: 500; }
body .ann-searchbar .ann-clear {
  flex: 0 0 auto; width: 30px; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: 15px; line-height: 1;
}
body .ann-searchbar .ann-clear:hover { color: var(--text); background: rgba(207, 168, 114, .14); }
body .ann-searchbar__btn {
  flex: 0 0 auto; width: 50px; border: 1px solid rgba(255, 255, 255, .14); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(24, 19, 16, .82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #e7c999; font-size: 19px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18), 0 2px 4px -1px rgba(24, 19, 16, .3);
  transition: background-color .15s, transform .15s;
}
body .ann-searchbar__btn:hover { background: rgba(24, 19, 16, .92); }
body .ann-searchbar__btn:active { transform: scale(.95); }
body .ann-searchbar__btn:focus-visible { outline: 2px solid #cfa872; outline-offset: 2px; }

[data-theme="dark"] body .ann-searchbar {
  border-color: rgba(207, 185, 153, .2);
  border-top-color: rgba(236, 220, 196, .3);
  background: rgba(207, 185, 153, .05);
  box-shadow: inset 0 1px 1px rgba(236, 220, 196, .18), 0 4px 10px -4px rgba(0, 0, 0, .4);
}
[data-theme="dark"] body .ann-searchbar:focus-within { border-color: rgba(207, 168, 114, .6); background: rgba(207, 185, 153, .08); box-shadow: 0 0 0 3px rgba(207, 168, 114, .15); }
[data-theme="dark"] body .ann-searchbar input::placeholder { color: var(--text); opacity: .5; }
[data-theme="dark"] body .ann-searchbar__btn { background: rgba(207, 168, 114, .85); color: #1b130b; border-color: rgba(255, 255, 255, .2); }
[data-theme="dark"] body .ann-searchbar__btn:hover { background: rgba(207, 168, 114, .97); }

@media (max-width: 760px) {
  body .ann-searchbar { height: 40px; }
  body .ann-searchbar__btn { width: 44px; font-size: 18px; }
  body #tabFechados .ann-search-row .tabs-search.ann-searchbar input,
  body .tabs-search.ann-searchbar input { height: 100% !important; }
}