/* ===========================================
   LISTA DE PEDIDOS — estética plana com dividers
   Sem sombra, sem borda arredondada de card.
   ======================================== */
.pedidos-list {
  display: flex;
  flex-direction: column;
  /* O respiro lateral vem do padding da .scroll-area (--space-md), como no feed de
     profissionais/vagas — aqui SEM padding horizontal (senão dobrava: os cards
     ficavam mais estreitos que os de pro/vaga). Vertical zerado: o topo/base já
     vêm da .scroll-area. */
  padding: 0;
  gap: var(--space-sm);
}

.pedido-item {
  padding: 14px;
  border-radius: var(--radius-balloon) var(--radius-balloon) var(--radius-balloon) 4px;   /* balão: canto inferior ESQUERDO quase reto */
  /* Padrão dos demais cards: fundo BRANCO + sombra (era o único feed com fill
     translúcido --card-on-green sobre o verde). */
  background: var(--bg-white);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  /* O card inteiro é tocável (abre a indicação) — feedback de alvo grande. */
  cursor: pointer;
  transition: transform 0.12s var(--ease);
}

.pedido-item:active {
  transform: scale(var(--press-scale-subtle));
}

/* Feedback do pressionar-longo (denunciar): ao atingir o limiar o card "arma" —
   encolhe + tint vermelho suave (--danger-soft) — sinalizando a ação de denúncia. */
.pedido-item.long-press-armed {
  transform: scale(0.985);
  background: var(--danger-soft);
  transition: transform 0.15s var(--ease), background 0.15s var(--ease);
}

/* Símbolo "Urgente" embutido antes do texto */
.pedido-item__urgent-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--danger);
  color: var(--t-light);
  font-size: var(--fs-2);
  font-weight: var(--fw-bold);
  padding: 2px 7px 2px 4px;
  border-radius: var(--radius-pill);
  margin-right: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

.pedido-item__urgent-badge .icon {
  font-size: 0.95rem;
}

/* Linha de meta: avatar pequeno + nome + IC + flag */
.pedido-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.pedido-item__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-soft);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);   /* mesma elevação da foto nos cards de profissional */
  flex-shrink: 0;
}

.pedido-item__name {
  font-size: var(--fs-6);
  font-weight: var(--fw-bold);
  color: var(--t-main);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* IC compacto na lista de pedidos: apenas escudo + % (sem a palavra "Confiável") */
.pedido-item .ic-bar {
  flex-shrink: 0;
}


/* IC usa as cores PADRÃO (verde/gold/vermelho) sobre o fundo branco — sem override.
   A denúncia do pedido migrou de botão dedicado para o pressionar-longo do card. */

/* Texto do pedido */
.pedido-item__text {
  font-size: var(--fs-6);
  line-height: 1.45;
  color: var(--t-main);
}

/* Ações: botão indicar + badge de contagem */
.pedido-item__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: 2px;
}

/* Slot do botão de indicar: a frase é sobreposta (absoluta) e faz CROSSFADE de
   opacity com o botão — sem animar largura (não clipa) e SIMÉTRICO na abertura e no
   fechamento. O botão de contagem (2/3) fica fora, à direita. */
.pedido-item__morph {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
}

.pedido-item__actions .post-card__indicate-btn {
  width: 100%;
  height: 36px;
  padding: 0 var(--space-sm);
  font-size: var(--fs-5);
  transition: opacity 0.28s ease;
}

.post-card__indicate-btn--morph-out {
  opacity: 0;
  pointer-events: none;
}

.pedido-item__actions .post-card__indicate-info {
  background: var(--bg-soft);
  color: var(--t-sub);
  border-radius: var(--radius-md);
  padding: 0 10px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-5);
  font-weight: var(--fw-bold);
}

.pedido-item__actions .post-card__indicate-info .icon {
  font-size: 1.1rem;
}


/* ===========================================
   CARDS DE POST
   ======================================== */
.post-card {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  overflow: hidden;
  /* reconciliado com o token (era sombra dupla bespoke) — mesma elevação dos
     demais cards em repouso do feed (.contract-card) */
  box-shadow: var(--shadow-sm);
}

.post-card__indicate-btn {
  flex: 3 1 55%;
  gap: var(--space-xs);
  padding: 9px var(--space-sm);        /* reduzido: de 14px para 9px */
  font-size: var(--fs-6);
}

.post-card__indicate-count {
  line-height: 1;
}

/* Badge de quantos já foram indicados — fração + pessoas. É um <button> (nos
   pedidos de terceiros abre o popup de profissionais indicados). */
.post-card__indicate-info {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  color: var(--t-sub);
  font-size: var(--fs-6);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.post-card__indicate-info .icon {
  font-size: 1.2rem;
}


/* Frase SOBREPOSTA ao botão (dentro do .pedido-item__morph): mesmo slot, quebra
   normalmente e entra/sai só por OPACITY (crossfade) — simétrico na abertura e no
   fechamento, sem clipar. O botão de contagem (2/3) fica à direita, intacto.
   Ganha a forma/fundo de uma PÍLULA verde semitransparente (mesmo slot do botão
   "Indicar alguém" que ela substitui) para não parecer texto solto ao lado do
   botão de contagem — fundo verde a 10% sobre o card branco (tint da marca). */
.pedido-item__prompt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-md);   /* MESMA forma do botão "Indicar alguém" (.btn = radius-md), não pílula */
  background: rgba(var(--p-green-rgb), 0.1);
  font-size: var(--fs-7);
  font-weight: var(--fw-heavy);
  line-height: 1.15;
  color: var(--p-green);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.pedido-item__prompt--in {
  opacity: 1;
}

/* Espaçador invisível que guarda o lugar do card na lista enquanto ele é MOVIDO
   para o overlay (altura definida em JS = altura do card no momento). */
.indicate-card-placeholder {
  flex-shrink: 0;
}

/* Botão "Fechar" do popup de indicados — compõe .btn .btn--close e a receita
   única .btn--close-on-green (HTML); aqui só a métrica compacta. */
.agenda-indicated__cancel {
  font-size: var(--fs-5);
  padding: 9px var(--space-sm);
  flex-shrink: 0;
}

/* =========================================================================
   OVERLAY DO MODO INDICAÇÃO (v352) — flutua SOBRE o feed de pedidos
   O feed de pedidos fica atrás, coberto pelo blur escuro (mesmo das gavetas).
   Sobre o blur: o card (clone nítido) flutua ao topo e a seção de profissionais
   (busca + cards) sobe deslizando de baixo.
   ========================================================================= */
.indicate-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-indicate);
  display: flex;
  flex-direction: column;
}

/* Blur escuro — MESMA receita das gavetas (--overlay + blur-sm). */
.indicate-overlay__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--overlay);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  opacity: 0;
  transition: opacity var(--fade-backdrop) var(--ease);   /* duração única de fade dos backdrops (padrão) */
}

.indicate-overlay--open .indicate-overlay__backdrop {
  opacity: 1;
}

/* Barra de abas REAL: durante a indicação é MOVIDA para dentro do overlay (JS) e
   empilha ENTRE o card do pedido (z-index:1, atrás) e a seção de profissionais
   (z-index:3, na frente) — o card sobe/desce ATRÁS dela, sem "pular" para frente.
   O backdrop-filter dá o "blur só sobre a barra" (dimma o card que passa por trás,
   igual ao resto da tela). */
.indicate-overlay .bottom-bar {
  z-index: 2;
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
}

/* Card nítido que flutua ao topo (sobre a região da action bar). O FLIP é por
   transform inline (JS). Carrega o safe-area do topo. */
.indicate-overlay .indicate-post-ref {
  position: relative;
  z-index: 1;   /* ATRÁS da barra de abas (que é movida p/ dentro do overlay em z-index:2) */
  flex-shrink: 0;
  padding: max(var(--space-sm), env(safe-area-inset-top, 0px)) var(--space-md) var(--space-sm);
}

/* Seção de profissionais flutuante — sobe deslizando de baixo. NA FRENTE da barra
   de abas (z-index:2), então desliza por cima dela. */
.indicate-overlay__pros {
  position: relative;
  z-index: 3;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Verde do feed ATRÁS de toda a zona de pros (barra + scroll): o buraco do
     overscroll elástico da lista revela ESTE verde, não o blur do backdrop —
     o rubber-band do webview expõe o pai, não o fundo do próprio scroller. */
  background: var(--bg-canvas);
}

/* Barra de busca flutuante — MESMO verde da barra real (--p-green). A
   .agenda-filters__search-wrap REAL (campo + pílula de filtro) é movida para cá,
   com o botão de fechar à direita (ordem: [busca][fechar]). A ordem no flex é
   controlada pelo `order` (o fechar nasce 1º no DOM, mas vai para a direita). */
.indicate-overlay__bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--p-green);
}

.indicate-overlay__bar .agenda-filters__search-wrap { order: 0; }
.indicate-overlay__close { order: 1; }

/* Fechar: quadrado de controle — a COR vem da receita única .btn--close-on-green
   (buttons.css, composta no HTML); aqui só o formato + fade no toque. */
.indicate-overlay__close {
  width: var(--control-h);
  height: var(--control-h);
  flex-shrink: 0;
  border-radius: var(--radius-md);
}
.indicate-overlay__close:active { transform: none; opacity: 0.6; }

/* Wrapper de scroll da seção: rola AQUI (as sombras de corte .js-scroll-shadows
   vivem neste wrapper e sobrevivem ao re-render do #agenda-list). */
.indicate-overlay__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;     /* momentum no iOS/webview */
  overscroll-behavior-y: contain;        /* não encadeia p/ o body (pull-to-refresh) */
  scrollbar-width: none;                 /* barra escondida como nos 3 feeds */
  /* Fundo verde do corpo (--bg-canvas, o mesmo do feed) ATRÁS da lista transparente:
     o buraco do overscroll elástico no topo revela ESTE verde, não o blur. */
  background: var(--bg-canvas);
  --shade-bleed: 0px;
}
.indicate-overlay__scroll::-webkit-scrollbar { display: none; }

/* A lista real (#agenda-list) é movida para cá: NÃO rola (o wrapper rola), fundo
   transparente (o blur é o fundo) e respiro no fim p/ o último card não colar. */
.indicate-overlay__scroll .agenda-list {
  overflow: visible;
  height: auto;
  flex: none;
  background: transparent;
  padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
}

/* Popup de profissionais já indicados */
.indicated-popup {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
  visibility: hidden;
  /* Mantém visível durante a animação de fechamento (acompanha a duração do slide) */
  transition: visibility 0s linear var(--indicated-sheet-dur, var(--fade-backdrop));
}

.indicated-popup--open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.indicated-popup__backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  opacity: 0;
  transition: opacity var(--fade-backdrop) var(--ease);   /* duração única de fade dos backdrops */
}

.indicated-popup--open .indicated-popup__backdrop {
  opacity: 1;
}

.indicated-popup__sheet {
  position: relative;
  z-index: 1;
  background: var(--p-green);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: calc(var(--app-height, 100dvh) * 0.92);
  overflow: hidden;
  transform: translateY(100%);
  transition: transform var(--indicated-sheet-dur, var(--fade-backdrop)) var(--sheet-ease);
}

.indicated-popup--open .indicated-popup__sheet {
  transform: translateY(0);
}

.indicated-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.indicated-popup__title {
  font-size: var(--fs-9);
  font-weight: var(--fw-heavy);
  color: var(--t-light);
  margin: 0;
}

.indicated-popup__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;                                 /* Firefox */
  scrollbar-color: var(--on-green-muted) transparent;
  /* Barra na BORDA do sheet (ver .pedido-sheet__body): a barra não passa por
     cima dos cantos dos cards de profissional indicados. */
  margin-right: calc(-1 * var(--space-md));
  padding-right: var(--space-md);
}

/* Barra SEMPRE visível (não overlay): scrollbar estilizado do WebKit é persistente. */
.indicated-popup__scroll::-webkit-scrollbar { width: var(--scrollbar-w); }
.indicated-popup__scroll::-webkit-scrollbar-thumb { background: var(--on-green-muted); border-radius: var(--scrollbar-thumb-r); }

.indicated-popup__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}