/* =========================================================================
   Aviso flutuante de solicitações — vínculos e grupos
   Aparece na página inicial, no perfil e nas páginas do afiliado sempre que
   houver convite pendente criado no aplicativo ou no próprio site.
   Fica no topo à direita, logo abaixo do cabeçalho.
   ========================================================================= */
.mukfit-requests {
  position: fixed;
  right: 18px;
  /* Abaixo do cabeçalho fixo; o menu da conta tem z-index maior e passa por cima. */
  top: 88px;
  z-index: 80;
  display: none;
}
.mukfit-requests.is-on { display: block; }

.mukfit-requests-trigger {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  background: linear-gradient(135deg, #f85e02, #fca301);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.42), 0 0 25px rgba(248, 94, 2, 0.28);
  transition: transform 0.18s, box-shadow 0.18s;
}
.mukfit-requests-trigger:hover { transform: translateY(-2px); }
.mukfit-requests-trigger svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* pulso discreto: chama atenção sem virar animação constante irritante */
.mukfit-requests-trigger::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(252, 163, 1, 0.55);
  border-radius: 23px;
  animation: mukfitRequestsPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes mukfitRequestsPulse {
  0% { opacity: 0.75; transform: scale(0.92); }
  70%, 100% { opacity: 0; transform: scale(1.14); }
}
.mukfit-requests-count {
  position: absolute;
  right: -5px;
  top: -6px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border: 2px solid #071226;
  border-radius: 99px;
  background: #00a3e5;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
}

.mukfit-requests-panel {
  position: absolute;
  right: 0;
  top: 70px;
  width: min(390px, calc(100vw - 36px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  background: rgba(7, 18, 38, 0.97);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(22px);
  color: #f4f8ff;
  font-family: Inter, system-ui, sans-serif;
}
.mukfit-requests-panel[hidden] { display: none; }
.mukfit-requests-head {
  position: relative;
  padding: 16px 50px 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mukfit-requests-head b { display: block; font-size: 0.98rem; }
.mukfit-requests-head small {
  display: block;
  margin-top: 4px;
  color: #91a5c2;
  font-size: 0.73rem;
  line-height: 1.45;
}
.mukfit-requests-close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.055);
  color: #91a5c2;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.mukfit-requests-close:hover { color: #f4f8ff; }

.mukfit-requests-list {
  display: grid;
  gap: 8px;
  max-height: min(420px, 56vh);
  overflow-y: auto;
  padding: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 163, 229, 0.55) transparent;
}
.mukfit-requests-group {
  margin: 4px 2px 0;
  color: #00a3e5;
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mukfit-request {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.028);
}
.mukfit-request-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, #00a3e5, #f85e02);
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
}
.mukfit-request-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mukfit-request-copy { min-width: 0; }
.mukfit-request-copy strong { display: block; font-size: 0.87rem; }
.mukfit-request-copy small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #91a5c2;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mukfit-request-actions { display: flex; gap: 7px; margin-top: 9px; }
.mukfit-request-actions button {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: #f4f8ff;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}
.mukfit-request-actions button.is-accept {
  border-color: transparent;
  background: linear-gradient(135deg, #00a3e5, #0879dc);
}
.mukfit-request-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
.mukfit-request-open {
  display: inline-block;
  margin-top: 7px;
  color: #00edfc;
  font-size: 0.71rem;
  font-weight: 800;
  text-decoration: none;
}
.mukfit-request-done { margin: 8px 0 0; color: #7ee0a8; font-size: 0.75rem; font-weight: 800; }
.mukfit-requests-error { margin: 0; padding: 0 12px 12px; color: #ff6b7a; font-size: 0.76rem; }
.mukfit-requests-error:empty { display: none; }

@media (max-width: 600px) {
  .mukfit-requests { right: 13px; top: 74px; }
  .mukfit-requests-panel { width: calc(100vw - 26px); top: 66px; }
  .mukfit-requests-trigger { width: 56px; height: 56px; border-radius: 17px; }
}